fix:修复编辑节点文本时快捷键冲突的问题
This commit is contained in:
wanglin2
parent
ba5ff54b9a
commit
7a2075df51
10
README.md
10
README.md
@ -86,6 +86,8 @@ npm run build
|
|||||||
|
|
||||||
# 安装
|
# 安装
|
||||||
|
|
||||||
|
> 当然仓库版本：0.2.3，当前npm版本：0.2.2
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm i simple-mind-map
|
npm i simple-mind-map
|
||||||
```
|
```
|
||||||
@ -452,6 +454,14 @@ v0.2.2+。暂停所有快捷键响应
|
|||||||
|
|
||||||
v0.2.2+。恢复快捷键响应
|
v0.2.2+。恢复快捷键响应
|
||||||
|
|
||||||
|
#### save()
|
||||||
|
|
||||||
|
v0.2.3+。保存当前注册的快捷键数据，然后清空快捷键数据
|
||||||
|
|
||||||
|
#### restore()
|
||||||
|
|
||||||
|
v0.2.3+。恢复保存的快捷键数据，然后清空缓存数据
|
||||||
|
|
||||||
|
|
||||||
## command实例
|
## command实例
|
||||||
|
|
||||||
|
|||||||
@ -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>
|
||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "simple-mind-map",
|
"name": "simple-mind-map",
|
||||||
"version": "0.2.2",
|
"version": "0.2.3",
|
||||||
"description": "一个简单的web在线思维导图",
|
"description": "一个简单的web在线思维导图",
|
||||||
"authors": [
|
"authors": [
|
||||||
{
|
{
|
||||||
|
|||||||
@ -16,6 +16,7 @@ export default class KeyCommand {
|
|||||||
this.shortcutMap = {
|
this.shortcutMap = {
|
||||||
//Enter: [fn]
|
//Enter: [fn]
|
||||||
}
|
}
|
||||||
|
this.shortcutMapCache = {}
|
||||||
this.isPause = false
|
this.isPause = false
|
||||||
this.bindEvent()
|
this.bindEvent()
|
||||||
}
|
}
|
||||||
@ -38,6 +39,28 @@ export default class KeyCommand {
|
|||||||
this.isPause = false
|
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: 王林
|
* @Author: 王林
|
||||||
* @Date: 2021-04-24 15:23:22
|
* @Date: 2021-04-24 15:23:22
|
||||||
|
|||||||
@ -196,7 +196,7 @@ class Render {
|
|||||||
}
|
}
|
||||||
this.mindMap.keyCommand.addShortcut('Enter', this.insertNodeWrap)
|
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.toggleActiveExpand = this.toggleActiveExpand.bind(this)
|
||||||
this.mindMap.keyCommand.addShortcut('/', this.toggleActiveExpand)
|
this.mindMap.keyCommand.addShortcut('/', this.toggleActiveExpand)
|
||||||
@ -217,7 +217,7 @@ class Render {
|
|||||||
this.mindMap.execCommand('SELECT_ALL')
|
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)
|
this.mindMap.keyCommand.addShortcut('Control+Up', this.upNode)
|
||||||
// 下移节点
|
// 下移节点
|
||||||
@ -232,9 +232,10 @@ class Render {
|
|||||||
* @Desc: 开启文字编辑，会禁用回车键和删除键相关快捷键防止冲突
|
* @Desc: 开启文字编辑，会禁用回车键和删除键相关快捷键防止冲突
|
||||||
*/
|
*/
|
||||||
startTextEdit() {
|
startTextEdit() {
|
||||||
this.mindMap.keyCommand.removeShortcut('Del|Backspace')
|
this.mindMap.keyCommand.save()
|
||||||
this.mindMap.keyCommand.removeShortcut('/')
|
// this.mindMap.keyCommand.removeShortcut('Del|Backspace')
|
||||||
this.mindMap.keyCommand.removeShortcut('Enter', this.insertNodeWrap)
|
// this.mindMap.keyCommand.removeShortcut('/')
|
||||||
|
// this.mindMap.keyCommand.removeShortcut('Enter', this.insertNodeWrap)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -244,9 +245,10 @@ class Render {
|
|||||||
* @Desc: 结束文字编辑，会恢复回车键和删除键相关快捷键
|
* @Desc: 结束文字编辑，会恢复回车键和删除键相关快捷键
|
||||||
*/
|
*/
|
||||||
endTextEdit() {
|
endTextEdit() {
|
||||||
this.mindMap.keyCommand.addShortcut('Del|Backspace', this.removeNodeWrap)
|
this.mindMap.keyCommand.restore()
|
||||||
this.mindMap.keyCommand.addShortcut('/', this.toggleActiveExpand)
|
// this.mindMap.keyCommand.addShortcut('Del|Backspace', this.removeNodeWrap)
|
||||||
this.mindMap.keyCommand.addShortcut('Enter', this.insertNodeWrap)
|
// this.mindMap.keyCommand.addShortcut('/', this.toggleActiveExpand)
|
||||||
|
// this.mindMap.keyCommand.addShortcut('Enter', this.insertNodeWrap)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -47,10 +47,6 @@ export default class TextEdit {
|
|||||||
this.mindMap.on('before_node_active', () => {
|
this.mindMap.on('before_node_active', () => {
|
||||||
this.hideEditTextBox()
|
this.hideEditTextBox()
|
||||||
})
|
})
|
||||||
// 注册回车快捷键
|
|
||||||
this.mindMap.keyCommand.addShortcut('Enter', () => {
|
|
||||||
this.hideEditTextBox()
|
|
||||||
})
|
|
||||||
// 注册编辑快捷键
|
// 注册编辑快捷键
|
||||||
this.mindMap.keyCommand.addShortcut('F2', () => {
|
this.mindMap.keyCommand.addShortcut('F2', () => {
|
||||||
if (this.renderer.activeNodeList.length <= 0) {
|
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: 王林
|
* @Author: 王林
|
||||||
* @Date: 2021-04-13 22:15:56
|
* @Date: 2021-04-13 22:15:56
|
||||||
@ -76,6 +85,7 @@ export default class TextEdit {
|
|||||||
*/
|
*/
|
||||||
showEditTextBox(node, rect) {
|
showEditTextBox(node, rect) {
|
||||||
this.mindMap.emit('before_show_text_edit')
|
this.mindMap.emit('before_show_text_edit')
|
||||||
|
this.registerTmpShortcut()
|
||||||
if (!this.textEditNode) {
|
if (!this.textEditNode) {
|
||||||
this.textEditNode = document.createElement('div')
|
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;`
|
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;`
|
||||||
|
|||||||
@ -227,7 +227,7 @@ export const shortcutKeyList = [
|
|||||||
{
|
{
|
||||||
icon: 'icongaikuozonglan',
|
icon: 'icongaikuozonglan',
|
||||||
name: '插入概要',
|
name: '插入概要',
|
||||||
value: 'Shift + S'
|
value: 'Ctrl + S'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'iconzhankai',
|
icon: 'iconzhankai',
|
||||||
@ -287,7 +287,7 @@ export const shortcutKeyList = [
|
|||||||
{
|
{
|
||||||
icon: 'iconzhengli',
|
icon: 'iconzhengli',
|
||||||
name: '一键整理布局',
|
name: '一键整理布局',
|
||||||
value: 'Shift + L'
|
value: 'Ctrl + L'
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user