当前位置: 首页 > 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;感觉这个假…...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

解锁数据库简洁之道:FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...