From 0ebac39716ca640b69234747f56dd814fb7f71c3 Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Tue, 27 Jul 2021 14:17:58 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=88=A0=E9=99=A4=E8=8A=82?= =?UTF-8?q?=E7=82=B9=E5=92=8C=E8=8A=82=E7=82=B9=E7=BC=96=E8=BE=91=E6=97=B6?= =?UTF-8?q?=E7=9A=84=E5=88=A0=E9=99=A4=E5=86=B2=E7=AA=81=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 45 ++++++++++++++++--------------- index.html | 2 +- simple-mind-map/src/KeyCommand.js | 24 +++++++++++++++++ simple-mind-map/src/Render.js | 8 ++++-- simple-mind-map/src/TextEdit.js | 1 + 5 files changed, 55 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 0177764e..654fcf8c 100644 --- a/README.md +++ b/README.md @@ -112,28 +112,29 @@ const mindMap = new MindMap({ 监听事件，事件列表： -| 事件名称 | 描述 | 回调参数 | -| ------------------ | ------------------------------------------ | ------------------------------------------------------------ | -| data_change | 渲染树数据变化，可以监听该方法获取最新数据 | data（当前渲染树数据） | -| back_forward | 前进或回退 | activeHistoryIndex（当前在历史数据数组里的索引）、length（当前历史数据数组的长度） | -| draw_click | *画布的单击事件* | e（事件对象） | -| svg_mousedown | svg画布的鼠标按下事件 | e（事件对象） | -| mousedown | el元素的鼠标按下事件 | e（事件对象）、this（Event事件类实例） | -| mousemove | el元素的鼠标移动事件 | e（事件对象）、this（Event事件类实例） | -| drag | 如果是按住左键拖动的话会触发拖动事件 | e（事件对象）、this（Event事件类实例） | -| mouseup | el元素的鼠标松开事件 | e（事件对象）、this（Event事件类实例） | -| mousewheel | 鼠标滚动事件 | e（事件对象）、dir（向上up还是向下down滚动）、this（Event事件类实例） | -| contextmenu | svg画布的鼠标右键菜单事件 | e（事件对象） | -| node_click | 节点的单击事件 | this（节点实例）、e（事件对象） | -| node_mousedown | 节点的鼠标按下事件 | this（节点实例）、e（事件对象） | -| node_mouseup | 节点的鼠标松开事件 | this（节点实例）、e（事件对象） | -| node_dblclick | 节点的双击事件 | this（节点实例）、e（事件对象） | -| node_contextmenu | 节点的右键菜单事件 | e（事件对象）、this（节点实例） | -| before_node_active | 节点激活前事件 | this（节点实例）、activeNodeList（当前激活的所有节点列表） | -| node_active | 节点激活事件 | this（节点实例）、activeNodeList（当前激活的所有节点列表） | -| expand_btn_click | 节点展开或收缩事件 | this（节点实例） | -| hide_text_edit | 节点文本编辑框关闭事件 | textEditNode（文本编辑框DOM节点）、activeNodeList（当前激活的所有节点列表） | -| scale | 放大缩小事件 | scale（缩放比例） | +| 事件名称 | 描述 | 回调参数 | +| --------------------- | ------------------------------------------ | ------------------------------------------------------------ | +| data_change | 渲染树数据变化，可以监听该方法获取最新数据 | data（当前渲染树数据） | +| back_forward | 前进或回退 | activeHistoryIndex（当前在历史数据数组里的索引）、length（当前历史数据数组的长度） | +| draw_click | *画布的单击事件* | e（事件对象） | +| svg_mousedown | svg画布的鼠标按下事件 | e（事件对象） | +| mousedown | el元素的鼠标按下事件 | e（事件对象）、this（Event事件类实例） | +| mousemove | el元素的鼠标移动事件 | e（事件对象）、this（Event事件类实例） | +| drag | 如果是按住左键拖动的话会触发拖动事件 | e（事件对象）、this（Event事件类实例） | +| mouseup | el元素的鼠标松开事件 | e（事件对象）、this（Event事件类实例） | +| mousewheel | 鼠标滚动事件 | e（事件对象）、dir（向上up还是向下down滚动）、this（Event事件类实例） | +| contextmenu | svg画布的鼠标右键菜单事件 | e（事件对象） | +| node_click | 节点的单击事件 | this（节点实例）、e（事件对象） | +| node_mousedown | 节点的鼠标按下事件 | this（节点实例）、e（事件对象） | +| node_mouseup | 节点的鼠标松开事件 | this（节点实例）、e（事件对象） | +| node_dblclick | 节点的双击事件 | this（节点实例）、e（事件对象） | +| node_contextmenu | 节点的右键菜单事件 | e（事件对象）、this（节点实例） | +| before_node_active | 节点激活前事件 | this（节点实例）、activeNodeList（当前激活的所有节点列表） | +| node_active | 节点激活事件 | this（节点实例）、activeNodeList（当前激活的所有节点列表） | +| expand_btn_click | 节点展开或收缩事件 | this（节点实例） | +| before_show_text_edit | 节点文本编辑框即将打开事件 | | +| hide_text_edit | 节点文本编辑框关闭事件 | textEditNode（文本编辑框DOM节点）、activeNodeList（当前激活的所有节点列表） | +| scale | 放大缩小事件 | scale（缩放比例） | diff --git a/index.html b/index.html index 8a21a2b1..c9dd1989 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -一个简单的web思维导图实现
\ No newline at end of file +一个简单的web思维导图实现
\ No newline at end of file diff --git a/simple-mind-map/src/KeyCommand.js b/simple-mind-map/src/KeyCommand.js index a149d6aa..c1a89b04 100644 --- a/simple-mind-map/src/KeyCommand.js +++ b/simple-mind-map/src/KeyCommand.js @@ -115,4 +115,28 @@ export default class KeyCommand { } }) } + + /** + * javascript comment + * @Author: 王林25 + * @Date: 2021-07-27 14:06:16 + * @Desc: 移除快捷键命令 + */ + removeShortcut(key, fn) { + key.split(/\s*\|\s*/).forEach((item) => { + if (this.shortcutMap[item]) { + if (fn) { + let index = this.shortcutMap[item].findIndex((f) => { + return f === fn + }) + if (index !== -1) { + this.shortcutMap[item].splice(index, 1) + } + } else { + this.shortcutMap[item] = [] + delete this.shortcutMap[item] + } + } + }) + } } \ No newline at end of file diff --git a/simple-mind-map/src/Render.js b/simple-mind-map/src/Render.js index d6424d37..10dc3b4b 100644 --- a/simple-mind-map/src/Render.js +++ b/simple-mind-map/src/Render.js @@ -183,8 +183,12 @@ class Render { }) }) // 删除节点 - this.mindMap.keyCommand.addShortcut('Del|Backspace', () => { - this.removeNode() + this.mindMap.keyCommand.addShortcut('Del|Backspace', this.removeNode) + this.mindMap.on('before_show_text_edit', () => { + this.mindMap.keyCommand.removeShortcut('Del|Backspace') + }) + this.mindMap.on('hide_text_edit', () => { + this.mindMap.keyCommand.addShortcut('Del|Backspace', this.removeNode) }) } diff --git a/simple-mind-map/src/TextEdit.js b/simple-mind-map/src/TextEdit.js index daa3870f..b2055de3 100644 --- a/simple-mind-map/src/TextEdit.js +++ b/simple-mind-map/src/TextEdit.js @@ -75,6 +75,7 @@ export default class TextEdit { * @Desc: 显示文本编辑框 */ showEditTextBox(node, rect) { + this.mindMap.emit('before_show_text_edit') if (!this.textEditNode) { this.textEditNode = document.createElement('div') this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;background-color:#fff;box-shadow: 0 0 20px rgba(0,0,0,.5);padding: 3px 5px;margin-left: -5px;margin-top: -3px;outline: none;`