在vue2使用百度脑图的kityminder-core进行二次开发思维导图，在源码中添加新的命令

需求说明：最近在搞kityminder-core的思维导图，需要增加一个给节点添加文件的功能，一直在研究源码，发现都是通过执行命令的方式实现的。一直卡在新增命令的步骤，搞了好多天了今天找到了如何在源码里新增命令，怕之后忘记所以现在先来记录一下添加命令的步骤。

我是在这个大佬的源码基础上改的

GitHub - chenhengjie123/vue-testcase-minder-editor: 基于百度脑图的用例编辑器组件，支持记录测试结果

下面这个是我目前搞出来的百度脑图的功能,如果有人遇到类似问题可以留言问看见会回，这个东西我也花了好久时间才摸到点头绪，等我忙完了有空我再写一下怎么实现这个思维导图。

添加命令

1、在kityminder-core/src/module中新建一个file.js文件

2、仿照其他的js文件编写代码

数据存储

`node.getData(name)` 获得指定字段的数据

`node.setData(name, value)` 设定指定字段的数据

具体的字段名称与后端商定，我后端同事定义的是“jsonFile”
n.setData('jsonFile', value);

define(function (require, exports, module) {var kity = require('../core/kity');var utils = require('../core/utils');var Minder = require('../core/minder');var MinderNode = require('../core/node');var Command = require('../core/command');var Module = require('../core/module');var Renderer = require('../core/render');Module.register('FileModule', function () {/*** @command file* @description 为选中的节点添加文件  设置为 null 移除* @param {string}（ afterName  uuid后的文件名）* @param {string}（ fileUrl 设置为 null 移除）* @param {string}（ agoName 原本的文件名）* @param {string}（ physicsAddress 文件物理地址）* @param {string}（ type 文件类型）*  为选中的文件添加文件* @state*   0: 当前有选中的节点*  -1: 当前没有选中的节点* @return 返回首个选中节点的超链接信息，Array 对象： `[{ afterName: 'afterName', fileUrl: 'fileUrl',agoName:'agoName',physicsAddress:'physicsAddress',type:'type'}]`*/var FileCommand = kity.createClass('FileCommand', {base: Command,execute: function (km, value) {var nodes = km.getSelectedNodes();nodes.forEach(function (n) {n.setData('jsonFile', value);n.render();});km.layout();},queryState: function (km) {var nodes = km.getSelectedNodes(),result = 0;if (nodes.length === 0) {return -1;}nodes.forEach(function (n) {if (n && n.getData('jsonFile')) {result = 0;return false;}});return result;},queryValue: function (km) {var node = km.getSelectedNode();return node.getData('jsonFile');}})return {commands: {file: FileCommand},}})
});

3、在import.js中导入file,js文件

4、在dist/kityminder.core.js中仿照其他的添加文件代码

因为最后一个是_[81]，所以新增的file写成_p[82]

 //src/module/file.js_p[82] = {value: function (require, exports, module) {var kity = _p.r(17);var utils = _p.r(33);var Minder = _p.r(19);var MinderNode = _p.r(21);var Command = _p.r(9);var Module = _p.r(20);var Renderer = _p.r(27);Module.register("FileModule", function () {/*** @command File* @description 为选中的节点添加文件  设置为 null 移除* @param {string}（ afterName  uuid后的文件名）* @param {string}（ fileUrl 设置为 null 移除）* @param {string}（ agoName 原本的文件名）* @param {string}（ physicsAddress 文件物理地址）* @param {string}（ type 文件类型）*  为选中的文件添加文件* @state*   0: 当前有选中的节点*  -1: 当前没有选中的节点* @return 返回首个选中节点的超链接信息，Array 对象： `[{ afterName: 'afterName', fileUrl: 'fileUrl',agoName:'agoName',physicsAddress:'physicsAddress',type:'type'}]`*/var FileCommand = kity.createClass('FileCommand', {base: Command,execute: function (km, value) {var nodes = km.getSelectedNodes();nodes.forEach(function (n) {n.setData('jsonFile', value);n.render();});km.layout();},queryState: function (km) {var nodes = km.getSelectedNodes(),result = 0;if (nodes.length === 0) {return -1;}nodes.forEach(function (n) {if (n && n.getData('jsonFile')) {result = 0;return false;}});return result;},queryValue: function (km) {var node = km.getSelectedNode();return node.getData('jsonFile');}});return {commands: {file: FileCommand},}});}};

5、在dist/kityminder.core.js中找到_p[35],添加_p.r(82)

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

7、测试

添加文件前的数据

添加文件后打印数据，数据成功添加到jsonFile字段中

在vue2使用百度脑图的kityminder-core进行二次开发思维导图，在源码中添加新的命令相关推荐

在vue2使用百度脑图的kityminder-core进行二次开发思维导图。节点收起时显示子节点的数量
需求描述用户收起某节点后要展示出当前节点的子节点数量,当节点展开后不显示子节点数量. 功能效果分析 1.找到跟节点收起/展开相关的菜单按钮. 2.找到节点收起/展开的事件,添加一个children ...
思维导图一定要用计算机来完成吗,思维导图为什么一定要手绘?
原标题:思维导图为什么一定要手绘? 第一,手绘是掌握思维导图的基础,透过不断地手绘之后,可以快速的在我们的大脑内部建立神经连结,慢慢的培养一种放射性全面思考问题的习惯和思维模式.手绘的线条会给大脑留下 ...
亿图图示EDraw Max,云的跨端思维导图
亿图图示EDraw Max,云的跨端思维导图亿图脑图MindMaster-基于云的跨端思维导图将纷繁复杂的想法以结构化.有序化的方式呈现,提高归纳.学习和记忆的效率 20,000+节点不卡顿 15 ...
计算机英语第一张思维导图,小学语文、数学、英语思维导图模板集合，怎么画好看的思维导图...
原标题:小学语文.数学.英语思维导图模板集合,怎么画好看的思维导图小学的孩子成绩不理想.注意力不集中,使很多家长苦恼.爱玩.好动是每个孩子的天性,面对枯燥的文字,缺乏形象化的内容难以引起孩子的学习兴 ...
大学python教材思维导图_Python核心知识体系的14张思维导图
本文主要涵盖了 Python 编程的核心知识(暂不包括标准库及第三方库). 按顺序依次展示了以下内容的一系列思维导图:基础知识,数据类型(数字,字符串,列表,元组,字典,集合),条件&循环,文 ...
地理思维导图怎么画？五步教你思维导图画法
对于思维导图的使用很多人就说上班的时候用处确实挺大的,但也仅限于上班,其余的时候没什么用.能说出这样话的人必定是对思维导图不熟悉的人.对于思维导图来说,学习,工作,生活没有什么场合是不能使用的.地理思 ...
思维导图怎么做？一份完整的思维导图绘制教程来了！
在信息爆炸的时代,如何高效地整理和消化信息是每个人都需要面对的问题.思维导图作为一种能够高效组织和呈现信息的工具,凭借其直观.易理解的特性,备受学生.教师.企业管理者.商业团队等许多人的青睐.那么,如 ...
心智图/思维导图（Mind Map/Mind Mapping），思维导图介绍
心智图(Mind Map),又称脑图.心智地图.脑力激荡图.思维导图.灵感触发图.概念地图.树状图.树枝图或思维地图,是一种图像式思维的工具以及一种利用图像式思考辅助工具来表达思维的工具. 心智图是使 ...
android移动应用开发思维导图_这些地方应用思维导图就对了
思维导图是个好工具,但所谓"工欲善其事,必先利其器",我们首先还是要搞清楚要做的"事"是什么,才能正确的使用工具.所以让我们一起来了解一下思维导图这个工具究竟适 ...

在vue2使用百度脑图的kityminder-core进行二次开发思维导图，在源码中添加新的命令

添加命令

在vue2使用百度脑图的kityminder-core进行二次开发思维导图，在源码中添加新的命令相关推荐

最新文章

热门文章