当前位置: 首页 > news >正文

在vue2使用百度脑图的kityminder-core进行二次开发思维导图,给节点绑定数据后添加新的图标

需求说明:在给某个节点绑定文件数据后,用户并不能一眼看出哪个节点上绑定了数据,因此需要在绑定文件数据后给节点上加一个图标用于标识。

添加图标 

1、在kityminder-core/src/module/file.js文件中添加代码

(file.js文件如何添加的看下面这个如何新增命令的文章)

在vue2使用百度脑图的kityminder-core进行二次开发思维导图,在源码中添加新的命令_~Serendipity~的博客-CSDN博客_vue中使用百度脑图

     添加以下红框中的代码,关于FILE_PATH是文件图标的svg路径,可以到网站上自己设计然后复制路径替换就行。

 一个画SVG图标的网站   SvgPathEditor

部分需要添加的代码 

var FILE_PATH = 'M -3 3 L -3 1 L 3 1 L 5 4 L 10 4 L 10 13 L -3 13 L -3 3 M 8 9 L 4 9'var FileIcon = kity.createClass('FileIcon', {base: kity.Group,constructor: function () {this.callBase();this.width = 16;this.height = 17;this.rect = new kity.Rect(16, 17, 0.5, -8.5, 2).fill('transparent');this.path = new kity.Path().setPathData(FILE_PATH).setTranslate(2.5, -6.5);this.addShapes([this.rect, this.path]);}
});
var FileIconRenderer = kity.createClass('FileIconRenderer', {base: Renderer,create: function (node) {var icon = new FileIcon();return icon;},shouldRender: function (node) {return node.getData('jsonFile');},update: function (icon, node, box) {var x = box.right + node.getStyle('space-left');var y = box.cy;icon.path.fill('none');icon.path.stroke('#111111');icon.setTranslate(x, y);return new kity.Box(x, Math.round(y - icon.height / 2), icon.width, icon.height);}
});

 

2、在dist/kityminder.core.js中找到查找FileCommand ,添加与file.js中一样的代码。

 3、使用uglifyjs重新生成min.js文件。

 

 

相关文章:

在vue2使用百度脑图的kityminder-core进行二次开发思维导图,给节点绑定数据后添加新的图标

需求说明:在给某个节点绑定文件数据后,用户并不能一眼看出哪个节点上绑定了数据,因此需要在绑定文件数据后给节点上加一个图标用于标识。 添加图标 1、在kityminder-core/src/module/file.js文件中添加代码 (file.js文件如何添加…...

FPGA时序约束与分析 --- 时序约束概述

本系列参考文献 — FPGA时序与约束分析-吴厚航 FPGA从综合到实现需要的过程如下:synth_design -> opt_design -> place-design -> phys_opt_design -> route_design 1、时序约束的理解 2、时序约束的基本路径 3、时序约束的步骤 4、时序约束的主要方法…...

2022——寒假总结

文章目录背景报名摸索结果总结背景 大一上学期,刚上大学没有尽快适应,什么都没有学到。 因为疫情,所以平时的测试以及期末都是线上进行的,就没怎么认真学,网课直接划水。 我的生活与学习很不平衡,还热衷于参…...

C++11 Lambda表达式

文章首发公众号:iDoitnow 为什么引入Lambda Lambda表达式是一个可以内联在我们代码中的函数,我们可以将他传递给另外一个函数。在没有引入Lambda表达式之前,当我们遇到需要对多个数据,按照同一规则进行操作的时候,创建…...

冰湖灾害遥感监测评价与模拟分析

查看原文>>>mp.weixin.qq.com/s?__bizMzAxNzcxMzc5MQ&mid2247582638&idx1&sna22a1697b16a5edc2b74cb1ccf011689&chksm9be29cbeac9515a8227460103ae1b9f280af688eab0ce5a43448f9fa7c9cab820c389fcdc031&token10630879&langzh_CN#rd【专家简介…...

Highcharts.Chart

Highcharts 是一个使用javascript 脚本来生成图表的工具,和jfreechart 作用类似,都用来生成各种图表,并支持图片的导出和打印。 从官网 www.highcharts.com 上下载的压缩表中的example中有各种图表的例子。 要编写生成图表的例子建议从 文…...

遍历map的几种方法

#先往map加入几个数据 Map<Integer,String> mapnew HashMap<>(); map.put(1,"美好的周一"); map.put(2,"美好的周二"); map.put(3,"美好的周三"); 1 2 3 4 方法一&#xff1a;普通的foreach循环&#xff0c…...

RocketMQ源码分析之Broker概述与同步消息发送原理与高可用设计及思考

1、Broker概述 Broker 在 RocketMQ 架构中的角色&#xff0c;就是存储消息&#xff0c;核心任务就是持久化消息&#xff0c;生产者发送消息给 Broker,消费者从 Broker 消费消息&#xff0c;其物理部署架构图如下&#xff1a; 备注&#xff1a;以上摘录自官方 RocketMQ 设计文档…...

K8s常见面试题总结

部分内容来自&#xff1a;k8s面试题大全&#xff08;持续更新中&#xff09; 目录 k8s常考面试题 1.1.什么是k8s&#xff1f; 1.2.简述Docker和Kubernetes的关系 1.3.k8s的组件有哪些&#xff0c;作用分别是什么&#xff1f; 1.4.简述kubelet的功能和作用 1.5.简述pod是…...

OpenFeign 自定义解码器Decoder 失效

问题描述 项目上开发了OpenFeign的自定义解码器&#xff0c;用来统一处理返回结果。 开发完后测试已经生效了&#xff0c;过两天后&#xff0c;这块代码没有变动的情况下&#xff0c;发现请求结果突然又不走自定义的解码器了。 代码如下 解码器 BaseResponseFeignDecoder …...

c++练习题8

1&#xff0e;在do-while循环中&#xff0c;循环由do开始&#xff0c;用while结束&#xff1b;必须注意的是&#xff1a;在while表达式后面的 不能丢&#xff0c;它表示do-while语句的结束。 A&#xff09;0 B&#xff09;1 C&#xff09;&#xff1b;…...

Python循环语句代码详解:while、for、break

目录 1 while循环 1 while循环 循环语句是程序设计中常用的语句之一。任何编程语言都有while循环&#xff0c;Python也不例外。while循环的格式如下所示。 while(表达式): … else: … while循环的执行过程&#xff1a;当循环表达式为真时&#xff0c;依次执行whi…...

vue父子组件传值不能实时更新

最近做项目&#xff0c;遇到个大坑&#xff0c;这会爬出来了&#xff0c;写个总结&#xff0c;避免下次掉坑。 vue父子组件传值不能实时更新问题&#xff0c;父组件将值传给了子组件&#xff0c;但子组件显示的值还是原来的初始值&#xff0c;并没有实时更新&#xff0c;为什么…...

2023美赛A题思路数据代码分享

文章目录赛题思路2023年美国大学生数学建模竞赛选题&论文一、关于选题二、关于论文格式三、关于论文提交四、论文提交流程注意不要手滑美赛A题思路数据代码【最新】赛题思路 (赛题出来以后第一时间在CSDN分享) 最新进度在文章最下方卡片&#xff0c;加入获取一手资源 202…...

【蓝桥杯集训·每日一题】AcWing 3768. 字符串删减

文章目录一、题目1、原题链接2、题目描述二、解题报告1、思路分析2、时间复杂度3、代码详解三、知识风暴双指针一、题目 1、原题链接 3768. 字符串删减 2、题目描述 给定一个由 n 个小写字母构成的字符串。 现在&#xff0c;需要删掉其中的一些字母&#xff0c;使得字符串中不…...

Python|每日一练|树|深度优先搜索|数组|二分查找|链表|双指针|单选记录:填充每个节点的下一个右侧节点指针|搜索插入位置|旋转链表

1、填充每个节点的下一个右侧节点指针&#xff08;树&#xff0c;深度优先搜索&#xff09; 给定一个 完美二叉树 &#xff0c;其所有叶子节点都在同一层&#xff0c;每个父节点都有两个子节点。二叉树定义如下&#xff1a; struct Node { int val; Node *left; Node *rig…...

降雨量实时监测系统压电式雨量计

压电式雨量传感器由上盖、外壳和下盖组成&#xff0c;壳体内部有压电片和电路板&#xff0c;可以固定在外径50mm立柱上和气象站横杆上。传感器采用冲击测量原理对单个雨滴重量进行测算&#xff0c;进而计算降雨量。雨滴在降落过程中受到雨滴重量和空气阻力的作用&#xff0c;到…...

滑动相关的原理以及用滤波器实现滑动相关(匹配滤波器捕获DMF)

目录滑动相关匹配滤波器捕获&#xff08;DMF&#xff09;滑动相关 滑动相关属于一种时域捕获方法&#xff0c;其具体原理是是通过本地序列与接收信号在固定窗长内滑动累加得到相关结果。 一般滑动相关算法可以用于对自相关性非常好的伪码进行同步判决。 我们首先生成一组自相关…...

计算机网络笔记(三)—— 数据链路层

数据链路层概述 数据链路层以帧为单位传输数据。 封装成帧&#xff1a;给网络层提供的协议数据单元添加帧头帧尾 差错检测&#xff1a;检错码封装在帧尾 可靠传输&#xff1a;尽管误码不能避免&#xff0c;但如果可以实现发送什么就接受什么&#xff0c;就叫可靠传输 封装成…...

【日常】矩阵正态分布参数检验问题

最近给凯爹做的一个苦力活&#xff0c;统计检验这个东西说实话也挺有趣&#xff0c;跟算法设计一样&#xff0c;好的检验真的是挺难设计的&#xff0c;就有近似算法的那种感觉&#xff0c;检验很难保证size和power都很理想&#xff0c;所以就要做tradeoff&#xff0c;感觉这个假…...

用Godot 4.0复刻街霸3D名场面:从Blender绑定到动画状态机的完整实战

用Godot 4.0复刻街霸3D名场面&#xff1a;从Blender绑定到动画状态机的完整实战 街机厅里那些经典格斗游戏的3D重制总能勾起玩家的情怀&#xff0c;而今天我们将用Godot 4.0完整复刻《街霸》中隆的招牌必杀技——从Blender的骨骼绑定到Godot动画状态机的全流程实现。这不是简单…...

Windows系统mqoa.dll文件丢失无法启动程序解决

在使用电脑系统时经常会出现丢失找不到某些文件的情况&#xff0c;由于很多常用软件都是采用 Microsoft Visual Studio 编写的&#xff0c;所以这类软件的运行需要依赖微软Visual C运行库&#xff0c;比如像 QQ、迅雷、Adobe 软件等等&#xff0c;如果没有安装VC运行库或者安装…...

Tarjan算法:从DFS序到强连通分量的寻路指南(附C++实战与缩点技巧)

1. 从迷宫探索到强连通王国&#xff1a;Tarjan算法的生活隐喻 想象你正在探索一座巨大的迷宫&#xff0c;手里拿着粉笔和记事本。每走到一个新的岔路口&#xff0c;你就在墙上标记数字&#xff08;第一个到的路口标1&#xff0c;第二个标2...&#xff09;&#xff0c;这就是DFS…...

Midjourney水彩风提示词已进入“语义过载”危机?2024Q2最新精简指令集发布(仅保留11个高响应关键词,准确率提升63.8%)

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Midjourney水彩风提示词的语义过载现象本质解析 水彩风格生成中&#xff0c;“watercolor”、“gouache”、“loose brushstrokes”、“wet-on-wet”等提示词常被叠加使用&#xff0c;表面增强风格表征…...

面试被问烂的20道编程基础题,你必须全会,不然别去面试

文章目录前言一、Python基础篇&#xff08;6道&#xff09;1. Python中list和tuple有什么区别&#xff1f;2. Python 3.7之后普通dict已经有序了&#xff0c;那OrderedDict还有存在的必要吗&#xff1f;3. Python中的深拷贝和浅拷贝有什么区别&#xff1f;4. Python中的*args和…...

告别内存焦虑:用STM32+外部SRAM(IS62WV51216)实现大数组和GUI缓存

STM32外部SRAM实战&#xff1a;突破内存限制的工程化解决方案 当你在STM32上开发图形界面或处理音频流时&#xff0c;是否遇到过程序突然崩溃的窘境&#xff1f;那些隐藏在编译通过背后的内存溢出问题&#xff0c;往往在项目后期才暴露出来。最近接手的一个智能家居控制面板项目…...

HTML5 教程

HTML5 教程 引言 HTML5,作为现代网页开发的核心技术之一,自从推出以来就受到了广泛的关注和认可。它不仅改进了原有的HTML特性,还引入了新的元素和API,使得网页设计和开发更加高效、强大。本教程旨在为您提供一个全面的HTML5学习路径,帮助您快速掌握HTML5的基础知识和高…...

35岁程序员的AI转型之路:年薪翻倍,收藏这份从零到架构师的详细指南

本文分享了作者作为35岁Java程序员的AI转型经历&#xff0c;从初期的焦虑与迷茫&#xff0c;到通过学习ChatGPT、Prompt Engineering和大模型技术&#xff0c;最终成功转型为AI架构师的故事。文章详细描述了学习路径、关键决策、遇到的坑以及成功因素&#xff0c;并给其他程序员…...

别再傻傻分不清了!MIPI DPHY和CPHY到底怎么选?从带宽、成本和PCB布线给你讲透

MIPI DPHY与CPHY工程选型实战指南&#xff1a;从理论到PCB布局的完整决策框架 在移动设备硬件设计中&#xff0c;MIPI接口的选择往往成为影响项目成败的关键决策点。当面对新一代图像传感器规格书上的DPHY/CPHY双模支持标识时&#xff0c;资深工程师的眉头总会不自觉地皱起——…...

联想刃7000k BIOS解锁终极指南:安全释放隐藏性能的3种方法

联想刃7000k BIOS解锁终极指南&#xff1a;安全释放隐藏性能的3种方法 【免费下载链接】Lenovo-7000k-Unlock-BIOS Lenovo联想刃7000k2021-3060版解锁BIOS隐藏选项并提升为Admin权限 项目地址: https://gitcode.com/gh_mirrors/le/Lenovo-7000k-Unlock-BIOS 对于联想刃7…...