diff --git a/simple-mind-map/src/BatchExecution.js b/simple-mind-map/src/BatchExecution.js index 9b8ba2e2..4a92fbdc 100644 --- a/simple-mind-map/src/BatchExecution.js +++ b/simple-mind-map/src/BatchExecution.js @@ -1,33 +1,4 @@ -// 在下一个事件循环里执行任务 -const nextTick = function (fn, ctx) { - let pending = false - let timerFunc = null - let handle = () => { - pending = false - ctx ? fn.call(ctx) : fn() - } - // 支持MutationObserver接口的话使用MutationObserver - if (typeof MutationObserver !== 'undefined') { - let counter = 1 - let observer = new MutationObserver(handle) - let textNode = document.createTextNode(counter) - observer.observe(textNode, { - characterData: true // 设为 true 表示监视指定目标节点或子节点树中节点所包含的字符数据的变化 - }) - timerFunc = function () { - counter = (counter + 1) % 2 // counter会在0和1两者循环变化 - textNode.data = counter // 节点变化会触发回调handle, - } - } else { - // 否则使用定时器 - timerFunc = setTimeout - } - return function () { - if (pending) return - pending = true - timerFunc(handle, 0) - } -} +import { nextTick } from './utils' // 批量执行 class BatchExecution { diff --git a/simple-mind-map/src/Command.js b/simple-mind-map/src/Command.js index 71a88be1..4d9bd8c7 100644 --- a/simple-mind-map/src/Command.js +++ b/simple-mind-map/src/Command.js @@ -1,4 +1,4 @@ -import { copyRenderTree, simpleDeepClone } from './utils' +import { copyRenderTree, simpleDeepClone, nextTick } from './utils' // 命令类 class Command { @@ -11,6 +11,7 @@ class Command { this.activeHistoryIndex = 0 // 注册快捷键 this.registerShortcutKeys() + this.addHistory = nextTick(this.addHistory, this) } // 清空历史数据 @@ -36,7 +37,7 @@ class Command { this.commands[name].forEach(fn => { fn(...args) }) - if (name === 'BACK' || name === 'FORWARD') { + if (['BACK', 'FORWARD', 'SET_NODE_ACTIVE', 'CLEAR_ACTIVE_NODE'].includes(name)) { return } this.addHistory() @@ -125,7 +126,7 @@ class Command { // 获取渲染树数据副本 getCopyData() { - return copyRenderTree({}, this.mindMap.renderer.renderTree) + return copyRenderTree({}, this.mindMap.renderer.renderTree, true) } } diff --git a/simple-mind-map/src/utils/index.js b/simple-mind-map/src/utils/index.js index 7a825a6e..3f0bf725 100644 --- a/simple-mind-map/src/utils/index.js +++ b/simple-mind-map/src/utils/index.js @@ -122,12 +122,15 @@ export const simpleDeepClone = data => { } // 复制渲染树数据 -export const copyRenderTree = (tree, root) => { +export const copyRenderTree = (tree, root, removeActiveState = false) => { tree.data = simpleDeepClone(root.data) + if (removeActiveState) { + tree.data.isActive = false + } tree.children = [] if (root.children && root.children.length > 0) { root.children.forEach((item, index) => { - tree.children[index] = copyRenderTree({}, item) + tree.children[index] = copyRenderTree({}, item, removeActiveState) }) } return tree @@ -267,4 +270,35 @@ export const measureText = (text, { italic, bold, fontSize, fontFamily }) => { // 拼接font字符串 export const joinFontStr = ({ italic, bold, fontSize, fontFamily }) => { return `${italic ? 'italic ' : ''} ${bold ? 'bold ' : ''} ${fontSize}px ${fontFamily} ` +} + +// 在下一个事件循环里执行任务 +export const nextTick = function (fn, ctx) { + let pending = false + let timerFunc = null + let handle = () => { + pending = false + ctx ? fn.call(ctx) : fn() + } + // 支持MutationObserver接口的话使用MutationObserver + if (typeof MutationObserver !== 'undefined') { + let counter = 1 + let observer = new MutationObserver(handle) + let textNode = document.createTextNode(counter) + observer.observe(textNode, { + characterData: true // 设为 true 表示监视指定目标节点或子节点树中节点所包含的字符数据的变化 + }) + timerFunc = function () { + counter = (counter + 1) % 2 // counter会在0和1两者循环变化 + textNode.data = counter // 节点变化会触发回调handle, + } + } else { + // 否则使用定时器 + timerFunc = setTimeout + } + return function () { + if (pending) return + pending = true + timerFunc(handle, 0) + } } \ No newline at end of file