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

增加快捷键功能

Browse Source
This commit is contained in:
wanglin 2021-08-05 00:06:27 +08:00
parent 4e4ade5c31
commit 7f4f4e2fe0
14 changed files with 81 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -194,6 +194,7 @@ const mindMap = new MindMap({
| 命令名称 | 描述 | 参数 |
| ------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| SELECT_ALL | 全选 | |
| BACK | 回退指定的步数 | step（要回退的步数，默认为1） |
| FORWARD | 前进指定的步数 | step（要前进的步数，默认为1） |
| INSERT_NODE | 插入同级节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效 | |

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/css/app.e587f860.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.37b3d8f8.css" rel="preload" as="style"><link href="dist/js/app.eed10b94.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.52f014f8.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.37b3d8f8.css" rel="stylesheet"><link href="dist/css/app.e587f860.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.52f014f8.js"></script><script src="dist/js/app.eed10b94.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/css/app.4060e1a4.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.37b3d8f8.css" rel="preload" as="style"><link href="dist/js/app.ef716bab.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.52f014f8.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.37b3d8f8.css" rel="stylesheet"><link href="dist/css/app.4060e1a4.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.52f014f8.js"></script><script src="dist/js/app.ef716bab.js"></script></body></html>

3
simple-mind-map/src/Command.js
View File

@ -41,6 +41,9 @@ class Command {
this.mindMap.keyCommand.addShortcut('Control+z', () => {
this.mindMap.execCommand('BACK')
})
this.mindMap.keyCommand.addShortcut('Control+y', () => {
this.mindMap.execCommand('FORWARD')
})
}
/**

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

@ -88,6 +88,9 @@ class Render {
* @Desc: 注册命令
*/
registerCommands() {
// 全选
this.selectAll = this.selectAll.bind(this)
this.mindMap.command.add('SELECT_ALL', this.selectAll)
// 回退
this.back = this.back.bind(this)
this.mindMap.command.add('BACK', this.back)
@ -197,6 +200,10 @@ class Render {
this.mindMap.keyCommand.addShortcut('Del|Backspace', removeNodeWrap)
this.mindMap.keyCommand.addShortcut('Enter', insertNodeWrap)
})
// 全选
this.mindMap.keyCommand.addShortcut('Control+a', () => {
this.mindMap.execCommand('SELECT_ALL')
})
}
/**
@ -284,6 +291,23 @@ class Render {
}) : 0
}
/**
* @Author: 王林
* @Date: 2021-08-04 23:54:52
* @Desc: 全选
*/
selectAll() {
walk(this.root, null, (node) => {
if (!node.nodeData.data.isActive) {
node.nodeData.data.isActive = true
this.addActiveNode(node)
setTimeout(() => {
node.renderNode()
}, 0);
}
}, null, true, 0, 0)
}
/**
* @Author: 王林
* @Date: 2021-07-11 22:34:12

BIN
web/src/.DS_Store vendored
View File

Binary file not shown.

BIN
web/src/assets/.DS_Store vendored
View File

Binary file not shown.

29
web/src/assets/icon-font/demo_index.html
View File

@ -54,6 +54,12 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xf199;</span>
<div class="name">全选</div>
<div class="code-name">&amp;#xf199;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6a3;</span>
<div class="name">导入</div>
@ -252,9 +258,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1628001202194') format('woff2'),
url('iconfont.woff?t=1628001202194') format('woff'),
url('iconfont.ttf?t=1628001202194') format('truetype');
src: url('iconfont.woff2?t=1628093007325') format('woff2'),
url('iconfont.woff?t=1628093007325') format('woff'),
url('iconfont.ttf?t=1628093007325') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -280,6 +286,15 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont iconquanxuan"></span>
<div class="name">
全选
</div>
<div class="code-name">.iconquanxuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icondaoru"></span>
<div class="name">
@ -577,6 +592,14 @@
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconquanxuan"></use>
</svg>
<div class="name">全选</div>
<div class="code-name">#iconquanxuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondaoru"></use>

10
web/src/assets/icon-font/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 2479351 */
src: url('iconfont.woff2?t=1628001202194') format('woff2'),
url('iconfont.woff?t=1628001202194') format('woff'),
url('iconfont.ttf?t=1628001202194') format('truetype');
src: url('iconfont.woff2?t=1628093007325') format('woff2'),
url('iconfont.woff?t=1628093007325') format('woff'),
url('iconfont.ttf?t=1628093007325') format('truetype');
}
.iconfont {
@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale;
}
.iconquanxuan:before {
content: "\f199";
}
.icondaoru:before {
content: "\e6a3";
}

2
web/src/assets/icon-font/iconfont.js
View File

File diff suppressed because one or more lines are too long

7
web/src/assets/icon-font/iconfont.json
View File

@ -5,6 +5,13 @@
"css_prefix_text": "icon",
"description": "思维导图",
"glyphs": [
{
"icon_id": "19738998",
"name": "全选",
"font_class": "quanxuan",
"unicode": "f199",
"unicode_decimal": 61849
},
{
"icon_id": "17606306",
"name": "导入",

BIN
web/src/assets/icon-font/iconfont.ttf
View File

Binary file not shown.

BIN
web/src/assets/icon-font/iconfont.woff
View File

Binary file not shown.

BIN
web/src/assets/icon-font/iconfont.woff2
View File

Binary file not shown.

12
web/src/config/index.js
View File

@ -237,7 +237,17 @@ export const shortcutKeyList = [
{
icon: 'iconhoutui-shi',
name: '回退',
value: 'Ctrl + z'
value: 'Ctrl + Z'
},
{
icon: 'iconqianjin1',
name: '前进',
value: 'Ctrl + Y'
},
{
icon: 'iconquanxuan',
name: '全选',
value: 'Ctrl + A'
}
]
},