diff --git a/simple-mind-map/example/exampleData.js b/simple-mind-map/example/exampleData.js index 519b0534..bea79b9b 100644 --- a/simple-mind-map/example/exampleData.js +++ b/simple-mind-map/example/exampleData.js @@ -24,14 +24,14 @@ export default { "data": { "text": "根节点" }, - "children": [ + "childrens": [ { "data": { "text": "二级节点1" } } ], - "childrens": [ + "children": [ { "data": { "text": "二级节点1", diff --git a/simple-mind-map/src/Command.js b/simple-mind-map/src/Command.js index bec96595..d4f62b22 100644 --- a/simple-mind-map/src/Command.js +++ b/simple-mind-map/src/Command.js @@ -29,6 +29,9 @@ class Command { this.commands[name].forEach((fn) => { fn(...args) }) + if (name === 'BACK' || name === 'FORWARD') { + return ; + } this.addHistory() } } @@ -58,6 +61,18 @@ class Command { this.mindMap.emit('data_change', data) } + /** + * @Author: 王林 + * @Date: 2021-07-11 22:34:53 + * @Desc: 回退 + */ + back(step = 1) { + if (this.activeHistoryIndex - step >= 0) { + this.activeHistoryIndex -= step + return simpleDeepClone(this.history[this.activeHistoryIndex]); + } + } + /** * @Author: 王林 * @Date: 2021-05-04 15:02:58 diff --git a/simple-mind-map/src/Node.js b/simple-mind-map/src/Node.js index 2d5c7694..f1a0d51f 100644 --- a/simple-mind-map/src/Node.js +++ b/simple-mind-map/src/Node.js @@ -89,6 +89,18 @@ class Node { this.getSize() } + /** + * @Author: 王林 + * @Date: 2021-07-12 07:40:47 + * @Desc: 更新主题配置 + */ + updateThemeConfig() { + // 主题配置 + this.themeConfig = this.mindMap.themeConfig + // 样式实例 + this.style.updateThemeConfig(this.themeConfig) + } + /** * @Author: 王林 * @Date: 2021-07-05 23:11:39 @@ -471,6 +483,7 @@ class Node { let { paddingY } = this.getPaddingVale() // 创建组 this.group = new G() + this.draw.add(this.group) this.update(false) // 节点矩形 this.style.rect(this.group.rect(width, height)) @@ -574,7 +587,6 @@ class Node { this.removeAllNode() this.createNodeData() this.layout() - this.draw.add(this.group) } /** @@ -584,13 +596,13 @@ class Node { */ update(animate = true) { if (!this.group) { - return; + return } // 需要移除展开收缩按钮 if (this._expandBtn && this.nodeData.children.length <= 0) { this.removeExpandBtn() } else if (!this._expandBtn && this.nodeData.children.length > 0) {// 需要添加展开收缩按钮 - + this.renderExpandBtn() } let t = this.group.transform() @@ -619,9 +631,21 @@ class Node { } // 子节点 if (this.children && this.children.length && this.nodeData.data.expand !== false) { - this.children.forEach((child) => { - child.render() - }) + let index = 0 + let loop = () => { + if (index >= this.children.length) { + return + } + this.children[index].render() + setTimeout(() => { + index++ + loop() + }, 0) + } + loop() + // this.children.forEach((child) => { + // child.render() + // }) } } @@ -637,9 +661,21 @@ class Node { this.removeLine() // 子节点 if (this.children && this.children.length) { - this.children.forEach((child) => { - child.remove() - }) + let index = 0 + let loop = () => { + if (index >= this.children.length) { + return + } + this.children[index].remove() + setTimeout(() => { + index++ + loop() + }, 0) + } + loop() + // this.children.forEach((child) => { + // child.remove() + // }) } } diff --git a/simple-mind-map/src/Render.js b/simple-mind-map/src/Render.js index 07c3e5b1..1c7516ae 100644 --- a/simple-mind-map/src/Render.js +++ b/simple-mind-map/src/Render.js @@ -74,6 +74,9 @@ class Render { * @Desc: 注册命令 */ registerCommands() { + // 回退 + this.back = this.back.bind(this) + this.mindMap.command.add('BACK', this.back) // 插入同级节点 this.insertNode = this.insertNode.bind(this) this.mindMap.command.add('INSERT_NODE', this.insertNode) @@ -154,8 +157,11 @@ class Render { * @Desc: 渲染 */ render() { + let s = Date.now() this.root = this.layout.doLayout() + console.log(Date.now() - s) this.root.render() + console.log(Date.now() - s) } /** @@ -214,6 +220,19 @@ class Render { }) : 0 } + /** + * @Author: 王林 + * @Date: 2021-07-11 22:34:12 + * @Desc: 回退 + */ + back(step) { + let data = this.mindMap.command.back(step) + if (data) { + this.renderTree = data + this.mindMap.reRender() + } + } + /** * @Author: 王林 * @Date: 2021-05-04 13:19:54 @@ -295,6 +314,7 @@ class Render { i-- } } + this.mindMap.emit('node_active', null, []) this.mindMap.render() } @@ -329,7 +349,9 @@ class Render { this.setNodeData(node, { isActive: active }) + let s = Date.now() node.renderNode() + console.log(Date.now() - s) } /** diff --git a/simple-mind-map/src/Style.js b/simple-mind-map/src/Style.js index 16fb2668..83f27b04 100644 --- a/simple-mind-map/src/Style.js +++ b/simple-mind-map/src/Style.js @@ -31,6 +31,15 @@ class Style { this.themeConfig = themeConfig } + /** + * @Author: 王林 + * @Date: 2021-07-12 07:40:14 + * @Desc: 更新主题配置 + */ + updateThemeConfig(themeConfig) { + this.themeConfig = themeConfig + } + /** * @Author: 王林 * @Date: 2021-04-11 12:02:55 diff --git a/simple-mind-map/src/layouts/Base.js b/simple-mind-map/src/layouts/Base.js index 5c96a442..e7f13b45 100644 --- a/simple-mind-map/src/layouts/Base.js +++ b/simple-mind-map/src/layouts/Base.js @@ -16,8 +16,6 @@ class Base { this.renderer = renderer // 控制实例 this.mindMap = renderer.mindMap - // 渲染树 - this.renderTree = renderer.renderTree // 绘图对象 this.draw = this.mindMap.draw // 根节点 diff --git a/simple-mind-map/src/layouts/LogicalStructure.js b/simple-mind-map/src/layouts/LogicalStructure.js index 3234524c..13532517 100644 --- a/simple-mind-map/src/layouts/LogicalStructure.js +++ b/simple-mind-map/src/layouts/LogicalStructure.js @@ -42,7 +42,7 @@ class LogicalStructure extends Base { * @Desc: 遍历数据计算节点的left、width、height */ computedBaseValue() { - walk(this.renderTree, null, (cur, parent, isRoot, layerIndex) => { + walk(this.renderer.renderTree, null, (cur, parent, isRoot, layerIndex) => { let newNode = this.createNode(cur, parent, isRoot, layerIndex) // 根节点定位在画布中心位置 if (isRoot) { diff --git a/web/src/assets/icon-font/demo_index.html b/web/src/assets/icon-font/demo_index.html index 505e4ce7..eb11f7f8 100644 --- a/web/src/assets/icon-font/demo_index.html +++ b/web/src/assets/icon-font/demo_index.html @@ -54,6 +54,18 @@