在vue2使用百度脑图的kityminder-core进行二次开发思维导图。节点收起时显示子节点的数量
2024-05-13 18:39:36
需求描述
用户收起某节点后要展示出当前节点的子节点数量，当节点展开后不显示子节点数量。
功能效果
分析
1、找到跟节点收起/展开相关的菜单按钮。
2、找到节点收起/展开的事件，添加一个childrenSize字段用于存储 收起状态下节点的子数量，当节点收起时添加一个图标显示该childrenSize的值。
节点收起时，设置childrenSize的值为当前节点的子节点数量
节点展开时，设置childrenSize的值为null
3、注册显示子节点数量的图标。当childrenSize有值时则显示该图标。
var BACK_PATH = 'M 0 10 A 1 1 0 0 0 22 10 A 1 1 0 0 0 0 10';var MASK_PATH = 'M 0 10 A 1 1 0 0 0 22 10 A 1 1 0 0 0 0 10';// 节点收缩时的图形 显示子节点数量var ChildrenSizeIcon = kity.createClass('ChildrenSizeIcon', {base: kity.Group,constructor: function () {this.callBase();this.setSize(20);this.create();// this.setId(utils.uuid('node_priority'));},setSize: function (size) {this.width = this.height = size;},create: function () {var white, back, mask, number; // 4 layerwhite = new kity.Path().setPathData(MASK_PATH).fill('white');back = new kity.Path().setPathData(BACK_PATH).setTranslate(0.5, 0.5);mask = new kity.Path().setPathData(MASK_PATH).setOpacity(0.8).setTranslate(0.5, 0.5);number = new kity.Text().setX(this.width / 2 - 0.5).setY(this.height / 2).setTextAnchor('middle').setVerticalAlign('middle').setFontItalic(true).setFontSize(12).fill('white');this.addShapes([back, mask, number]);this.mask = mask;this.back = back;this.number = number;},setValue: function (value) {var back = this.back,mask = this.mask,number = this.number;var color = ['#000000', '#000000'];if (color) {back.fill(color[1]);mask.fill(color[0]);}number.setContent(value);}});var childrenSizeRenderer = kity.createClass('childrenSizeRenderer', {base: Renderer,create: function (node) {return new ChildrenSizeIcon();},shouldRender: function (node) {return node.getData('childrenSize');},update: function (icon, node, box) {var data = node.getData('childrenSize');var spaceLeft = node.getStyle('space-left'),x, y;icon.setValue(data);x = box.left - icon.width - spaceLeft;y = -icon.height / 2;icon.setTranslate(x, y);return new kity.Box({x: x,y: y,width: icon.width,height: icon.height});}});注册图标
完整代码
在kityminder.core.js文件中找到_p[46]，将其中的代码照着expand.js的修改。
expand.js 中的完整代码
define(function (require, exports, module) {var kity = require('../core/kity');var utils = require('../core/utils');var keymap = require('../core/keymap');var MinderNode = require('../core/node');var Command = require('../core/command');var Module = require('../core/module');var Renderer = require('../core/render');Module.register('Expand', function () {var minder = this;var EXPAND_STATE_DATA = 'expandState',STATE_EXPAND = 'expand',STATE_COLLAPSE = 'collapse';// 将展开的操作和状态读取接口拓展到 MinderNode 上kity.extendClass(MinderNode, {/*** 展开节点* @param {Policy} policy 展开的策略，默认为 KEEP_STATE*/expand: function () {this.setData(EXPAND_STATE_DATA, STATE_EXPAND);return this;},/*** 收起节点*/collapse: function () {this.setData(EXPAND_STATE_DATA, STATE_COLLAPSE);return this;},/*** 判断节点当前的状态是否为展开*/isExpanded: function () {var expanded = this.getData(EXPAND_STATE_DATA) !== STATE_COLLAPSE;return expanded && (this.isRoot() || this.parent.isExpanded());},/*** 判断节点当前的状态是否为收起*/isCollapsed: function () {return !this.isExpanded();}});/*** @command Expand* @description 展开当前选中的节点，保证其可见* @param {bool} justParents 是否只展开到父亲* * `false` - （默认）保证选中的节点以及其子树可见* * `true` - 只保证选中的节点可见，不展开其子树* @state* 0: 当前有选中的节点* -1: 当前没有选中的节点*/var ExpandCommand = kity.createClass('ExpandCommand', {base: Command,execute: function (km, justParents) {var node = km.getSelectedNode();if (!node) return;if (justParents) {node = node.parent;}while (node.parent) {node.expand();node.setData('childrenSize', null)node = node.parent;}node.renderTree();km.layout(100);},queryState: function (km) {var node = km.getSelectedNode();return node && !node.isRoot() && !node.isExpanded() ? 0 : -1;}});/*** @command ExpandToLevel* @description 展开脑图到指定的层级* @param {number} level 指定展开到的层级，最少值为 1。* @state* 0: 一直可用*/var ExpandToLevelCommand = kity.createClass('ExpandToLevelCommand', {base: Command,execute: function (km, level) {km.getRoot().traverse(function (node) {if (node.getLevel() < level) {node.expand();node.setData('childrenSize', null);}if (node.getLevel() == level && !node.isLeaf()) {node.collapse();node.setData('childrenSize', node.children.length);}});km.refresh(100);},enableReadOnly: true});/*** @command Collapse* @description 收起当前节点的子树* @state* 0: 当前有选中的节点* -1: 当前没有选中的节点*/var CollapseCommand = kity.createClass('CollapseCommand', {base: Command,execute: function (km) {var node = km.getSelectedNode();if (!node) return;node.collapse();node.setData('childrenSize', node.children.length)node.renderTree();km.layout();},queryState: function (km) {var node = km.getSelectedNode();return node && !node.isRoot() && node.isExpanded() ? 0 : -1;}});var Expander = kity.createClass('Expander', {base: kity.Group,constructor: function (node) {this.callBase();this.radius = 6;this.outline = new kity.Circle(this.radius).stroke('gray').fill('white');this.sign = new kity.Path().stroke('gray');this.addShapes([this.outline, this.sign]);this.initEvent(node);this.setId(utils.uuid('node_expander'));this.setStyle('cursor', 'pointer');},initEvent: function (node) {this.on('mousedown', function (e) {minder.select([node], true);if (node.isExpanded()) {node.collapse();node.setData('childrenSize', node.children.length)} else {node.expand();node.setData('childrenSize', null)}node.renderTree().getMinder().layout(100);node.getMinder().fire('contentchange');e.stopPropagation();e.preventDefault();});this.on('dblclick click mouseup', function (e) {e.stopPropagation();e.preventDefault();});},setState: function (state) {if (state == 'hide') {this.setVisible(false);return;}this.setVisible(true);var pathData = ['M', 1.5 - this.radius, 0, 'L', this.radius - 1.5, 0];if (state == STATE_COLLAPSE) {pathData.push(['M', 0, 1.5 - this.radius, 'L', 0, this.radius - 1.5]);}this.sign.setPathData(pathData);}});var BACK_PATH = 'M 0 10 A 1 1 0 0 0 22 10 A 1 1 0 0 0 0 10';var MASK_PATH = 'M 0 10 A 1 1 0 0 0 22 10 A 1 1 0 0 0 0 10';// 节点收缩时的图形 显示子节点数量var ChildrenSizeIcon = kity.createClass('ChildrenSizeIcon', {base: kity.Group,constructor: function () {this.callBase();this.setSize(20);this.create();// this.setId(utils.uuid('node_priority'));},setSize: function (size) {this.width = this.height = size;},create: function () {var white, back, mask, number; // 4 layerwhite = new kity.Path().setPathData(MASK_PATH).fill('white');back = new kity.Path().setPathData(BACK_PATH).setTranslate(0.5, 0.5);mask = new kity.Path().setPathData(MASK_PATH).setOpacity(0.8).setTranslate(0.5, 0.5);number = new kity.Text().setX(this.width / 2 - 0.5).setY(this.height / 2).setTextAnchor('middle').setVerticalAlign('middle').setFontItalic(true).setFontSize(12).fill('white');this.addShapes([back, mask, number]);this.mask = mask;this.back = back;this.number = number;},setValue: function (value) {var back = this.back,mask = this.mask,number = this.number;var color = ['#000000', '#000000'];if (color) {back.fill(color[1]);mask.fill(color[0]);}number.setContent(value);}});var childrenSizeRenderer = kity.createClass('childrenSizeRenderer', {base: Renderer,create: function (node) {return new ChildrenSizeIcon();},shouldRender: function (node) {return node.getData('childrenSize');},update: function (icon, node, box) {var data = node.getData('childrenSize');var spaceLeft = node.getStyle('space-left'),x, y;icon.setValue(data);x = box.left - icon.width - spaceLeft;y = -icon.height / 2;icon.setTranslate(x, y);return new kity.Box({x: x,y: y,width: icon.width,height: icon.height});}});var ExpanderRenderer = kity.createClass('ExpanderRenderer', {base: Renderer,create: function (node) {if (node.isRoot()) return;this.expander = new Expander(node);node.getRenderContainer().prependShape(this.expander);node.expanderRenderer = this;this.node = node;return this.expander;},shouldRender: function (node) {return !node.isRoot();},update: function (expander, node, box) {if (!node.parent) return;var visible = node.parent.isExpanded();expander.setState(visible && node.children.length ? node.getData(EXPAND_STATE_DATA) : 'hide');var vector = node.getLayoutVectorIn().normalize(expander.radius + node.getStyle('stroke-width'));var position = node.getVertexIn().offset(vector.reverse());this.expander.setTranslate(position);}});return {commands: {'expand': ExpandCommand,'expandtolevel': ExpandToLevelCommand,'collapse': CollapseCommand},events: {'layoutapply': function (e) {var r = e.node.getRenderer('ExpanderRenderer');if (r.getRenderShape()) {r.update(r.getRenderShape(), e.node);}},'beforerender': function (e) {var node = e.node;var visible = !node.parent || node.parent.isExpanded();var minder = this;node.getRenderContainer().setVisible(visible);if (!visible) e.stopPropagation();},'normal.keydown': function (e) {if (this.getStatus() == 'textedit') return;if (e.originEvent.keyCode == keymap['/']) {var node = this.getSelectedNode();if (!node || node == this.getRoot()) return;var expanded = node.isExpanded();this.getSelectedNodes().forEach(function (node) {if (expanded) node.collapse();else node.expand();node.renderTree();});this.layout(100);this.fire('contentchange');e.preventDefault();e.stopPropagationImmediately();}if (e.isShortcutKey('Alt+`')) {this.execCommand('expandtolevel', 9999);}for (var i = 1; i < 6; i++) {if (e.isShortcutKey('Alt+' + i)) {this.execCommand('expandtolevel', i);}}}},renderers: {outside: ExpanderRenderer,left: childrenSizeRenderer,},contextmenu: [{command: 'expandtoleaf',query: function () {return !minder.getSelectedNode();},fn: function (minder) {minder.execCommand('expandtolevel', 9999);}}, {command: 'expandtolevel1',query: function () {return !minder.getSelectedNode();},fn: function (minder) {minder.execCommand('expandtolevel', 1);}}, {command: 'expandtolevel2',query: function () {return !minder.getSelectedNode();},fn: function (minder) {minder.execCommand('expandtolevel', 2);}}, {command: 'expandtolevel3',query: function () {return !minder.getSelectedNode();},fn: function (minder) {minder.execCommand('expandtolevel', 3);}}, {divider: true}]};});
});
在vue2使用百度脑图的kityminder-core进行二次开发思维导图。节点收起时显示子节点的数量相关推荐
- 在vue2使用百度脑图的kityminder-core进行二次开发思维导图，在源码中添加新的命令
需求说明:最近在搞kityminder-core的思维导图,需要增加一个给节点添加文件的功能,一直在研究源码,发现都是通过执行命令的方式实现的.一直卡在新增命令的步骤,搞了好多天了今天找到了如何在源码 ...
- 思维导图一定要用计算机来完成吗,思维导图为什么一定要手绘?
原标题:思维导图为什么一定要手绘? 第一,手绘是掌握思维导图的基础,透过不断地手绘之后,可以快速的在我们的大脑内部建立神经连结,慢慢的培养一种放射性全面思考问题的习惯和思维模式.手绘的线条会给大脑留下 ...
- 亿图图示EDraw Max,云的跨端思维导图
亿图图示EDraw Max,云的跨端思维导图 亿图脑图MindMaster-基于云的跨端思维导图 将纷繁复杂的想法以结构化.有序化的方式呈现,提高归纳.学习和记忆的效率 20,000+节点不卡顿 15 ...
- Edraw Max（亿图图示）新手福音：教你思维导图的简单画法！ 1
思维导图,也就是心智图或者脑图,是近年来十分流行的一种有效地思维管理方法.Edraw Max(亿图图示)作为国内仅有的一款综合类型的图形图表设计软件,除了强大的绘图功能,还有丰富的模板和例子,在绘制思 ...
- 计算机英语第一张思维导图,小学语文、数学、英语思维导图模板集合，怎么画好看的思维导图...
原标题:小学语文.数学.英语思维导图模板集合,怎么画好看的思维导图 小学的孩子成绩不理想.注意力不集中,使很多家长苦恼.爱玩.好动是每个孩子的天性,面对枯燥的文字,缺乏形象化的内容难以引起孩子的学习兴 ...
- 大学python教材思维导图_Python核心知识体系的14张思维导图
本文主要涵盖了 Python 编程的核心知识(暂不包括标准库及第三方库). 按顺序依次展示了以下内容的一系列思维导图:基础知识,数据类型(数字,字符串,列表,元组,字典,集合),条件&循环,文 ...
- 地理思维导图怎么画？五步教你思维导图画法
对于思维导图的使用很多人就说上班的时候用处确实挺大的,但也仅限于上班,其余的时候没什么用.能说出这样话的人必定是对思维导图不熟悉的人.对于思维导图来说,学习,工作,生活没有什么场合是不能使用的.地理思 ...
- 思维导图怎么做？一份完整的思维导图绘制教程来了！
在信息爆炸的时代,如何高效地整理和消化信息是每个人都需要面对的问题.思维导图作为一种能够高效组织和呈现信息的工具,凭借其直观.易理解的特性,备受学生.教师.企业管理者.商业团队等许多人的青睐.那么,如 ...
- 心智图/思维导图（Mind Map/Mind Mapping），思维导图介绍
心智图(Mind Map),又称脑图.心智地图.脑力激荡图.思维导图.灵感触发图.概念地图.树状图.树枝图或思维地图,是一种图像式思维的工具以及一种利用图像式思考辅助工具来表达思维的工具. 心智图是使 ...
最新文章
- 有年味的年会才够味|第12届信息化领袖峰会
- 在Ubuntu18上搭建K8s集群(1.19.3）
- A1075.PAT Judge
- 【转】Microsoft Cloud全新认证体系介绍
- 主成分分析PCA以及特征值和特征向量的意义
- Java 蓝桥杯 字母图形
- 电脑刷机重装系统_手机刷机，原来也没有那么复杂
- 每周个人进度总结02
- liunx grep sed
- 第二阶段团队站立会议02
- Linux有待提高的七个领域
- 深入理解JVM一JVM内存模型
- ubuntu 常用命令锦集
- 腾讯笔试题之数字转换机
- python取字母以及数字随机数
- 黑色背景视频和白色背景图片变透明的方法
- ps软件1.基础工具2.工具快捷键3.图片基本操作4.撤回方法5.抠图
- 【水题】CodeForce 1183B Equalize Prices
- VMware 8安装Mac OS X 10.7 Lion
- 相似矩阵、矩阵的相似对角化