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

news2024/11/16 14:23:02

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

添加图标 

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文件。

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/349498.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ChatGPT国内镜像站初体验:聊天、Python代码生成等

ChatGPT国内镜像站试用,聊天、Python代码生成。 (本文获得CSDN质量评分【92】)【学习的细节是欢悦的历程】Python 官网:https://www.python.org/ Free:大咖免费“圣经”教程《 python 完全自学教程》,不仅仅是基础那么简单…… …

基于离散时间频率增益传感器的P级至M级PMU模型的实现(Matlab代码实现)

👨‍🎓个人主页:研学社的博客💥💥💞💞欢迎来到本博客❤️❤️💥💥🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密…

[足式机器人]Part3机构运动微分几何学分析与综合Ch01-4 平面运动微分几何学——【读书笔记】

本文仅供学习使用 本文参考: 《机构运动微分几何学分析与综合》-王德伦、汪伟 《微分几何》吴大任 Ch01-4 平面运动微分几何学1.2.3-2 点轨迹的Euler-Savary公式1.2.4 高阶曲率理论1.2.3-2 点轨迹的Euler-Savary公式 例1-7: 平面曲柄摇杆机构的 Euler-Sa…

VS中scanf为什么会报错

简单来讲&#xff0c;scanf会强行输入内容&#xff0c;所以是不安全的。 我们来看这样的例子&#xff1a; #include <iostream> using namespace std;int main() {char demo[3];scanf("%s", demo);return 0; }对于以上代码&#xff0c;当我们输入字符不超过3时…

联合身份验证与Cognito

Hello大家好&#xff0c;我们接下来讨论AWS联合身份验证的内容。 AWS联合身份验证 对于考试&#xff0c;联合身份验证部分是一块非常重要的内容。那什么是联合身份验证&#xff0c;它是做什么用的呢&#xff1f; 联合身份验证&#xff0c;是用来允许AWS外部用户&#xff0c;如…

vue2中使用 Tinymce 5.1.0使用过程举例

一、背景 vue-cli 版本 &#xff1a;vue/cli 4.5.15 查看脚手架版本的方法&#xff1a;Win R 打开运行输入&#xff1a; cmd &#xff0c;打开控制台输入 vue -V vue 版本&#xff1a;"vue": "^2.6.11", 二、安装 Tinymce 1、 --no-fund 是因为提示你…

C语言(表达式,语句和副作用和序列号)

目录 一.表达式 二.语句 三.副作用和序列点 一.表达式 由运算符和运算对象组合。最简单得表达式是一个单独的运算对象&#xff0c;以次为基础可以建立复杂的表达式 4 421 a*&#xff08;b c/d)/20 运算对象可以是常量&#xff0c;变量或二者得组合。一些表达式由子表达…

python--石头剪刀布游戏(列表)

本使用了下面几篇文章的知识&#xff1a; python(8)--列表初阶使用_码银的博客-CSDN博客 python(7)--if语句_码银的博客-CSDN博客 一、学习目标 利用列表实现石头剪刀布游戏 二、实验环境 Pycharm社区版、win11 三、代码 先贴代码&#xff0c;有需要的直接拿&#xff0c;想要进…

Hive提升篇-Hive修改事务

简介 Hive 默认是不允许数据更新操作的&#xff0c;毕竟它不擅长&#xff0c;即使在0.14版本后&#xff0c;做一些额外的配置便可开启Hive数据更新操作。而在海量数据场景下做update、delete之类的行级数据操作时&#xff0c;效率并不如意。 简单使用 修改HIVE_HOME/conf/hi…

JS逆向寻找生成bid变量的加密算法,一顿操作猛如虎,结果发现原来是混淆代码

分享一下最近我JS逆向的心得。 我最近使用Python爬取某个网站某个链接&#xff0c;cookie必须加入qgqp_b_id参数才能获取数据。 这个参数是一个32位字符串&#xff0c;通过浏览器的开发者工具分析网页源代码&#xff0c;了解到这个qgqp_b_id变量不是服务器返回给客户端的&…

Whids:一款针对Windows操作系统的开源EDR

关于Whids Whids是一款针对Windows操作系统的开源EDR&#xff0c;该工具所实现的检测引擎基于先前的 Gene项目构建&#xff0c;并专门设计可以根据用户定义的规则匹配Windows事件。 功能特性 1、为社区提供一款功能强大且开源的Windows EDR&#xff1b; 2、支持检测规则透明化…

有了java基础,迅速学完Python并做了一份笔记

面向过程Python简介Python和Java的解释方式对比Java&#xff1a;源代码 -> 编译成class -> Jvm解释运行Python&#xff1a;源代码 -> Python解释器解释运行我经常和身边的Java开发者开玩笑说&#xff1a;“Java真变态&#xff0c;别的语言都是要么直接编译要么直接解释…

无线蓝牙耳机哪个好用?好用的无线蓝牙耳机推荐

随着苹果取消3.5mm耳机孔&#xff0c;近几年蓝牙耳机便逐渐取代有线耳机以强势的姿态闯入人们的日常生活。听歌、游戏、运动等&#xff0c;使用蓝牙耳机的人越来越多。经常看到有人问&#xff0c;无线蓝牙耳机哪个好用&#xff1f;针对这个问题&#xff0c;我来给大家推荐几款好…

消息称索尼计划为PS5推出两款蓝牙耳机,Find My蓝牙耳机用途广

根据国外科技媒体 Insider Gaming 报道&#xff0c;索尼计划进一步丰富 PlayStation 5 的配件生态&#xff0c;将会推出两款耳机&#xff0c;一款采用类似于 AirPods 的 TWS 设计&#xff0c;另一款则是无线头戴式耳机。 消息称 TWS 耳机的内部代号为“Project Nomad”&#…

Debug分支在什么场景下使用?怎样创建Debug分支?

在项目的正常开发过程中&#xff0c;之前发布过的版本可能很会出bug&#xff0c;这时就需要停下来现在的开发任务&#xff0c;先去修改bug&#xff0c;完成后再回来继续开发任务。git中stash提供了保存现场的功能&#xff0c;可以把当前工作区、暂存区中的内容不需要提交而保存…

Elasticsearch:Text vs. Keyword - 它们之间的差异以及它们的行为方式

很多刚开始学习 Elasticsearch 的人经常会混淆 text 和 keyword 字段数据类型。 它们之间的区别很简单&#xff0c;但非常关键。 在本文中&#xff0c;我将讨论两者之间的区别、如何使用它们、它们的行为方式以及使用哪一种。 区别 它们之间的关键区别在于&#xff0c;Elastic…

Win 10电脑摄像头提示错误代码0xa00f4244怎么办?

如果你的Windows 10电脑无法打开摄像头&#xff0c;提示“我们找不到你的摄像头”的错误消息&#xff0c;错误代码是0xA00F4244&#xff0c;原因可能是杀毒软件阻止了摄像头&#xff0c;或者是摄像头驱动程序有问题。 小编为你整理了摄像头错误代码0xA00F4244的解决方法&#…

浏览器(以chrome为例)设置对WebGL的支持

某些浏览器由于不支持WebGL渲染&#xff0c;在浏览三维场景服务的时候会报“Your WebGL implementation doesn’t seem to support hardware accelerated rendering”错误&#xff0c;解决方法如下&#xff1a; 1、首先确保电脑支持gpu硬件加速&#xff0c;并下载最新的 GPU 驱…

存储性能软件加速库(SPDK)

存储性能软件加速库SPDK存储加速存储性能软件加速库&#xff08;SPDK&#xff09;SPDK NVMe驱动1.用户态驱动1&#xff09;UIO2&#xff09;VFIOIOMMU&#xff08;I/O Memory Management Unit&#xff09;3&#xff09;用户态DMA4&#xff09;大页&#xff08;Hugepage&#xf…

Part 4 描述性统计分析(占比 10%)——下

文章目录【后续会持续更新CDA Level I&II备考相关内容&#xff0c;敬请期待】【考试大纲】【考试内容】【备考资料】【扩展知识】4、相关分析4.1、相关分析的描述——散点图4.2、相关分析的类型4.3、相关分析的度量4.3.1、协方差4.3.2、相关系数【后续会持续更新CDA Level …