fix:修复编辑节点文本时快捷键冲突的问题

2026-02-17 22:08:25 +08:00 · 2022-08-16 16:47:43 +08:00
parent ba5ff54b9a
commit 7a2075df51
7 changed files with 61 additions and 16 deletions
--- a/README.md
+++ b/README.md
@@ -86,6 +86,8 @@ npm run build

 # 安装

+> 当然仓库版本：0.2.3，当前npm版本：0.2.2
+
 ```bash
 npm i simple-mind-map
 ```
@@ -452,6 +454,14 @@ v0.2.2+。暂停所有快捷键响应

 v0.2.2+。恢复快捷键响应

+#### save()
+
+v0.2.3+。保存当前注册的快捷键数据，然后清空快捷键数据
+
+#### restore()
+
+v0.2.3+。恢复保存的快捷键数据，然后清空缓存数据
+

 ## command实例

--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d20ec02.81d632f4.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.228f2009.js" rel="prefetch"><link href="dist/js/chunk-519dd096.8de24e1d.js" rel="prefetch"><link href="dist/css/app.815cbcf2.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.273f75d5.css" rel="preload" as="style"><link href="dist/js/app.2f360bab.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.2db6a87c.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.273f75d5.css" rel="stylesheet"><link href="dist/css/app.815cbcf2.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.2db6a87c.js"></script><script src="dist/js/app.2f360bab.js"></script></body></html>
+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d20ec02.81d632f4.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.228f2009.js" rel="prefetch"><link href="dist/js/chunk-e86f1494.f8dd20e2.js" rel="prefetch"><link href="dist/css/app.fe3ff2a5.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.6fd71983.css" rel="preload" as="style"><link href="dist/js/app.eac9ce0c.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.094115db.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.6fd71983.css" rel="stylesheet"><link href="dist/css/app.fe3ff2a5.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.094115db.js"></script><script src="dist/js/app.eac9ce0c.js"></script></body></html>
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
 {
  "name": "simple-mind-map",
-  "version": "0.2.2",
+  "version": "0.2.3",
  "description": "一个简单的web在线思维导图",
  "authors": [
    {
--- a/simple-mind-map/src/KeyCommand.js
+++ b/simple-mind-map/src/KeyCommand.js
@@ -16,6 +16,7 @@ export default class KeyCommand {
        this.shortcutMap = {
            //Enter: [fn]
        }
+        this.shortcutMapCache = {}
        this.isPause = false
        this.bindEvent()
    }
@@ -38,6 +39,28 @@ export default class KeyCommand {
        this.isPause = false
    }

+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-08-16 16:29:01 
+     * @Desc: 保存当前注册的快捷键数据，然后清空快捷键数据
+     */
+    save() {
+        this.shortcutMapCache = this.shortcutMap
+        this.shortcutMap = {}
+    }
+
+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-08-16 16:29:38 
+     * @Desc: 恢复保存的快捷键数据，然后清空缓存数据 
+     */
+    restore() {
+        this.shortcutMap = this.shortcutMapCache
+        this.shortcutMapCache = {}
+    }
+
    /** 
     * @Author: 王林 
     * @Date: 2021-04-24 15:23:22 
--- a/simple-mind-map/src/Render.js
+++ b/simple-mind-map/src/Render.js
@@ -196,7 +196,7 @@ class Render {
        }
        this.mindMap.keyCommand.addShortcut('Enter', this.insertNodeWrap)
        // 插入概要
-        this.mindMap.keyCommand.addShortcut('Shift+s', this.addGeneralization)
+        this.mindMap.keyCommand.addShortcut('Control+s', this.addGeneralization)
        // 展开/收起节点
        this.toggleActiveExpand = this.toggleActiveExpand.bind(this)
        this.mindMap.keyCommand.addShortcut('/', this.toggleActiveExpand)
@@ -217,7 +217,7 @@ class Render {
            this.mindMap.execCommand('SELECT_ALL')
        })
        // 一键整理布局
-        this.mindMap.keyCommand.addShortcut('Shift+l', this.resetLayout)
+        this.mindMap.keyCommand.addShortcut('Control+l', this.resetLayout)
        // 上移节点
        this.mindMap.keyCommand.addShortcut('Control+Up', this.upNode)
        // 下移节点
@@ -232,9 +232,10 @@ class Render {
     * @Desc: 开启文字编辑，会禁用回车键和删除键相关快捷键防止冲突 
     */
    startTextEdit() {
-        this.mindMap.keyCommand.removeShortcut('Del|Backspace')
-        this.mindMap.keyCommand.removeShortcut('/')
-        this.mindMap.keyCommand.removeShortcut('Enter', this.insertNodeWrap)
+        this.mindMap.keyCommand.save()
+        // this.mindMap.keyCommand.removeShortcut('Del|Backspace')
+        // this.mindMap.keyCommand.removeShortcut('/')
+        // this.mindMap.keyCommand.removeShortcut('Enter', this.insertNodeWrap)
    }

    /** 
@@ -244,9 +245,10 @@ class Render {
     * @Desc: 结束文字编辑，会恢复回车键和删除键相关快捷键
     */
    endTextEdit() {
-        this.mindMap.keyCommand.addShortcut('Del|Backspace', this.removeNodeWrap)
-        this.mindMap.keyCommand.addShortcut('/', this.toggleActiveExpand)
-        this.mindMap.keyCommand.addShortcut('Enter', this.insertNodeWrap)
+        this.mindMap.keyCommand.restore()
+        // this.mindMap.keyCommand.addShortcut('Del|Backspace', this.removeNodeWrap)
+        // this.mindMap.keyCommand.addShortcut('/', this.toggleActiveExpand)
+        // this.mindMap.keyCommand.addShortcut('Enter', this.insertNodeWrap)
    }

    /** 
--- a/simple-mind-map/src/TextEdit.js
+++ b/simple-mind-map/src/TextEdit.js
@@ -47,10 +47,6 @@ export default class TextEdit {
        this.mindMap.on('before_node_active', () => {
            this.hideEditTextBox()
        })
-        // 注册回车快捷键
-        this.mindMap.keyCommand.addShortcut('Enter', () => {
-            this.hideEditTextBox()
-        })
        // 注册编辑快捷键
        this.mindMap.keyCommand.addShortcut('F2', () => {
            if (this.renderer.activeNodeList.length <= 0) {
@@ -60,6 +56,19 @@ export default class TextEdit {
        })
    }

+    /** 
+     * javascript comment 
+     * @Author: 王林25 
+     * @Date: 2022-08-16 16:27:02 
+     * @Desc: 注册临时快捷键 
+     */
+    registerTmpShortcut() {
+        // 注册回车快捷键
+        this.mindMap.keyCommand.addShortcut('Enter', () => {
+            this.hideEditTextBox()
+        })
+    }
+
    /** 
     * @Author: 王林 
     * @Date: 2021-04-13 22:15:56 
@@ -76,6 +85,7 @@ export default class TextEdit {
     */
    showEditTextBox(node, rect) {
        this.mindMap.emit('before_show_text_edit')
+        this.registerTmpShortcut()
        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;`
--- a/web/src/config/index.js
+++ b/web/src/config/index.js
@@ -227,7 +227,7 @@ export const shortcutKeyList = [
            {
                icon: 'icongaikuozonglan',
                name: '插入概要',
-                value: 'Shift + S'
+                value: 'Ctrl + S'
            },
            {
                icon: 'iconzhankai',
@@ -287,7 +287,7 @@ export const shortcutKeyList = [
            {
                icon: 'iconzhengli',
                name: '一键整理布局',
-                value: 'Shift + L'
+                value: 'Ctrl + L'
            },
        ]
    },