openSourceRemote/mind-map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复输入字符串/和快捷键/冲突问题

Browse Source
This commit is contained in:
wanglin 2022-08-14 09:43:00 +08:00
parent 8af44b2d45
commit ba5ff54b9a
6 changed files with 74 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
README.md
View File

@ -419,7 +419,7 @@ v0.1.5+
### 方法 ### 方法
#### keyCommand(key, fn) #### addShortcut(key, fn)
添加快捷键 添加快捷键
@ -427,7 +427,7 @@ v0.1.5+
```js ```js
// 单个按键 // 单个按键
mindMap.keyCommand..addShortcut('Enter', () => {}) mindMap.keyCommand.addShortcut('Enter', () => {})
// 或 // 或
mindMap.keyCommand.addShortcut('Del|Backspace', () => {}) mindMap.keyCommand.addShortcut('Del|Backspace', () => {})
// 组合键 // 组合键
@ -436,6 +436,21 @@ mindMap.keyCommand.addShortcut('Control+Enter', () => {})
`fn`：要执行的方法 `fn`：要执行的方法
#### removeShortcut(key, fn)
移除快捷键命令，`fn`不指定则移除该快捷键的所有回调方法
#### getShortcutFn(key)
v0.2.2+。获取指定快捷键的处理函数
#### pause()
v0.2.2+。暂停所有快捷键响应
#### recovery()
v0.2.2+。恢复快捷键响应
## command实例 ## command实例

2
index.html
View File

@ -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.5d07429c.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.273f75d5.css" rel="preload" as="style"><link href="dist/js/app.a4bce205.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.5d07429c.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.a4bce205.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-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>

2
simple-mind-map/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "simple-mind-map", "name": "simple-mind-map",
"version": "0.2.1", "version": "0.2.2",
"description": "一个简单的web在线思维导图", "description": "一个简单的web在线思维导图",
"authors": [ "authors": [
{ {

35
simple-mind-map/src/KeyCommand.js
View File

@ -16,9 +16,28 @@ export default class KeyCommand {
this.shortcutMap = { this.shortcutMap = {
//Enter: [fn] //Enter: [fn]
} }
this.isPause = false
this.bindEvent() this.bindEvent()
} }
/**
* @Author: 王林
* @Date: 2022-08-14 08:57:55
* @Desc: 暂停快捷键响应
*/
pause() {
this.isPause = true
}
/**
* @Author: 王林
* @Date: 2022-08-14 08:58:43
* @Desc: 恢复快捷键响应
*/
recovery() {
this.isPause = false
}
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-04-24 15:23:22 * @Date: 2021-04-24 15:23:22
@ -26,6 +45,9 @@ export default class KeyCommand {
*/ */
bindEvent() { bindEvent() {
window.addEventListener('keydown', (e) => { window.addEventListener('keydown', (e) => {
if (this.isPause) {
return
}
Object.keys(this.shortcutMap).forEach((key) => { Object.keys(this.shortcutMap).forEach((key) => {
if (this.checkKey(e, key)) { if (this.checkKey(e, key)) {
e.stopPropagation() e.stopPropagation()
@ -139,4 +161,17 @@ export default class KeyCommand {
} }
}) })
} }
/**
* @Author: 王林
* @Date: 2022-08-14 08:49:58
* @Desc: 获取指定快捷键的处理函数
*/
getShortcutFn(key) {
let res = []
key.split(/\s*\|\s*/).forEach((item) => {
res = this.shortcutMap[item] || []
})
return res
}
} }

26
simple-mind-map/src/Render.js
View File

@ -198,14 +198,8 @@ class Render {
// 插入概要 // 插入概要
this.mindMap.keyCommand.addShortcut('Shift+s', this.addGeneralization) this.mindMap.keyCommand.addShortcut('Shift+s', this.addGeneralization)
// 展开/收起节点 // 展开/收起节点
this.mindMap.keyCommand.addShortcut('/', () => { this.toggleActiveExpand = this.toggleActiveExpand.bind(this)
this.activeNodeList.forEach((node) => { this.mindMap.keyCommand.addShortcut('/', this.toggleActiveExpand)
if (node.nodeData.children.length <= 0) {
return
}
this.toggleNodeExpand(node)
})
})
// 删除节点 // 删除节点
this.removeNodeWrap = () => { this.removeNodeWrap = () => {
this.mindMap.execCommand('REMOVE_NODE') this.mindMap.execCommand('REMOVE_NODE')
@ -239,6 +233,7 @@ class Render {
*/ */
startTextEdit() { startTextEdit() {
this.mindMap.keyCommand.removeShortcut('Del|Backspace') this.mindMap.keyCommand.removeShortcut('Del|Backspace')
this.mindMap.keyCommand.removeShortcut('/')
this.mindMap.keyCommand.removeShortcut('Enter', this.insertNodeWrap) this.mindMap.keyCommand.removeShortcut('Enter', this.insertNodeWrap)
} }
@ -250,6 +245,7 @@ class Render {
*/ */
endTextEdit() { endTextEdit() {
this.mindMap.keyCommand.addShortcut('Del|Backspace', this.removeNodeWrap) this.mindMap.keyCommand.addShortcut('Del|Backspace', this.removeNodeWrap)
this.mindMap.keyCommand.addShortcut('/', this.toggleActiveExpand)
this.mindMap.keyCommand.addShortcut('Enter', this.insertNodeWrap) this.mindMap.keyCommand.addShortcut('Enter', this.insertNodeWrap)
} }
@ -801,6 +797,20 @@ class Render {
}, null, true, 0, 0) }, null, true, 0, 0)
} }
/**
* @Author: 王林
* @Date: 2022-08-14 09:18:40
* @Desc: 切换激活节点的展开状态
*/
toggleActiveExpand() {
this.activeNodeList.forEach((node) => {
if (node.nodeData.children.length <= 0) {
return
}
this.toggleNodeExpand(node)
})
}
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-07-11 17:15:33 * @Date: 2021-07-11 17:15:33

2
web/src/pages/Edit/components/NodeHyperlink.vue
View File

@ -53,6 +53,7 @@ export default {
} }
}); });
this.$bus.$on("showNodeLink", () => { this.$bus.$on("showNodeLink", () => {
this.activeNodes[0].mindMap.keyCommand.pause();
this.$bus.$emit('startTextEdit'); this.$bus.$emit('startTextEdit');
this.dialogVisible = true; this.dialogVisible = true;
}); });
@ -65,6 +66,7 @@ export default {
*/ */
cancel() { cancel() {
this.dialogVisible = false; this.dialogVisible = false;
this.activeNodes[0].mindMap.keyCommand.recovery();
this.$bus.$emit('endTextEdit'); this.$bus.$emit('endTextEdit');
}, },