coosld/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-22 10:57:40 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
wanglin 2022-08-14 09:43:00 +08:00
parent a39c8c30e6
commit 1ea0c7e316
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
// 单个按键
mindMap.keyCommand..addShortcut('Enter', () => {})
mindMap.keyCommand.addShortcut('Enter', () => {})
// 或
mindMap.keyCommand.addShortcut('Del|Backspace', () => {})
// 组合键
@ -436,6 +436,21 @@ mindMap.keyCommand.addShortcut('Control+Enter', () => {})
`fn`：要执行的方法
#### removeShortcut(key, fn)
移除快捷键命令，`fn`不指定则移除该快捷键的所有回调方法
#### getShortcutFn(key)
v0.2.2+。获取指定快捷键的处理函数
#### pause()
v0.2.2+。暂停所有快捷键响应
#### recovery()
v0.2.2+。恢复快捷键响应
## 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",
"version": "0.2.1",
"version": "0.2.2",
"description": "一个简单的web在线思维导图",
"authors": [
{

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

@ -16,9 +16,28 @@ export default class KeyCommand {
this.shortcutMap = {
//Enter: [fn]
}
this.isPause = false
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: 王林
* @Date: 2021-04-24 15:23:22
@ -26,6 +45,9 @@ export default class KeyCommand {
*/
bindEvent() {
window.addEventListener('keydown', (e) => {
if (this.isPause) {
return
}
Object.keys(this.shortcutMap).forEach((key) => {
if (this.checkKey(e, key)) {
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('/', () => {
this.activeNodeList.forEach((node) => {
if (node.nodeData.children.length <= 0) {
return
}
this.toggleNodeExpand(node)
})
})
this.toggleActiveExpand = this.toggleActiveExpand.bind(this)
this.mindMap.keyCommand.addShortcut('/', this.toggleActiveExpand)
// 删除节点
this.removeNodeWrap = () => {
this.mindMap.execCommand('REMOVE_NODE')
@ -239,6 +233,7 @@ class Render {
*/
startTextEdit() {
this.mindMap.keyCommand.removeShortcut('Del|Backspace')
this.mindMap.keyCommand.removeShortcut('/')
this.mindMap.keyCommand.removeShortcut('Enter', this.insertNodeWrap)
}
@ -250,6 +245,7 @@ class Render {
*/
endTextEdit() {
this.mindMap.keyCommand.addShortcut('Del|Backspace', this.removeNodeWrap)
this.mindMap.keyCommand.addShortcut('/', this.toggleActiveExpand)
this.mindMap.keyCommand.addShortcut('Enter', this.insertNodeWrap)
}
@ -801,6 +797,20 @@ class Render {
}, 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: 王林
* @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.activeNodes[0].mindMap.keyCommand.pause();
this.$bus.$emit('startTextEdit');
this.dialogVisible = true;
});
@ -65,6 +66,7 @@ export default {
*/
cancel() {
this.dialogVisible = false;
this.activeNodes[0].mindMap.keyCommand.recovery();
this.$bus.$emit('endTextEdit');
},