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

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

Vue 3 + WebSocket 实战:公司通知实时推送功能详解

&#x1f4e2; Vue 3 WebSocket 实战&#xff1a;公司通知实时推送功能详解 &#x1f4cc; 收藏 点赞 关注&#xff0c;项目中要用到推送功能时就不怕找不到了&#xff01; 实时通知是企业系统中常见的功能&#xff0c;比如&#xff1a;管理员发布通知后&#xff0c;所有用户…...

MySQL体系架构解析(三):MySQL目录与启动配置全解析

MySQL中的目录和文件 bin目录 在 MySQL 的安装目录下有一个特别重要的 bin 目录&#xff0c;这个目录下存放着许多可执行文件。与其他系统的可执行文件类似&#xff0c;这些可执行文件都是与服务器和客户端程序相关的。 启动MySQL服务器程序 在 UNIX 系统中&#xff0c;用…...

深入解析光敏传感技术:嵌入式仿真平台如何重塑电子工程教学

一、光敏传感技术的物理本质与系统级实现挑战 光敏电阻作为经典的光电传感器件&#xff0c;其工作原理根植于半导体材料的光电导效应。当入射光子能量超过材料带隙宽度时&#xff0c;价带电子受激发跃迁至导带&#xff0c;形成电子-空穴对&#xff0c;导致材料电导率显著提升。…...