From f38b92a2e2641e82bcfd2f47ae721e13119a0141 Mon Sep 17 00:00:00 2001 From: wanglin <1013335014@qq.com> Date: Sun, 11 Jul 2021 22:21:40 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=BF=AB=E6=8D=B7=E9=94=AE?= =?UTF-8?q?=E5=92=8C=E5=85=A8=E5=B1=8F=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/example/exampleData.js | 4 +- simple-mind-map/index.js | 22 ++- simple-mind-map/src/Export.js | 9 +- simple-mind-map/src/Node.js | 14 +- simple-mind-map/src/Render.js | 40 +++++ simple-mind-map/src/Select.js | 15 +- simple-mind-map/src/TextEdit.js | 4 + simple-mind-map/src/View.js | 27 ++++ web/src/assets/icon-font/demo_index.html | 144 +++++++++++++++++- web/src/assets/icon-font/iconfont.css | 30 +++- web/src/assets/icon-font/iconfont.js | 2 +- web/src/assets/icon-font/iconfont.json | 42 +++++ web/src/assets/icon-font/iconfont.ttf | Bin 7768 -> 9428 bytes web/src/assets/icon-font/iconfont.woff | Bin 4564 -> 5708 bytes web/src/assets/icon-font/iconfont.woff2 | Bin 3816 -> 4812 bytes web/src/config/index.js | 61 +++++++- web/src/pages/Edit/components/Edit.vue | 7 +- web/src/pages/Edit/components/Fullscreen.vue | 62 ++++++++ .../Edit/components/NavigatorToolbar.vue | 40 +++-- web/src/pages/Edit/components/ShortcutKey.vue | 87 +++++++++++ web/src/pages/Edit/components/Toolbar.vue | 18 ++- web/src/utils/index.js | 33 ++++ 22 files changed, 608 insertions(+), 53 deletions(-) create mode 100644 web/src/pages/Edit/components/Fullscreen.vue create mode 100644 web/src/pages/Edit/components/ShortcutKey.vue diff --git a/simple-mind-map/example/exampleData.js b/simple-mind-map/example/exampleData.js index bea79b9b..519b0534 100644 --- a/simple-mind-map/example/exampleData.js +++ b/simple-mind-map/example/exampleData.js @@ -24,14 +24,14 @@ export default { "data": { "text": "根节点" }, - "childrens": [ + "children": [ { "data": { "text": "二级节点1" } } ], - "children": [ + "childrens": [ { "data": { "text": "二级节点1", diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js index 132a67f6..c35a38f9 100644 --- a/simple-mind-map/index.js +++ b/simple-mind-map/index.js @@ -26,7 +26,15 @@ const defaultOpt = { // 设置鼠标左键还是右键按下拖动，1（左键）、2（右键） dragButton: 1, // 最多显示几个标签 - maxTag: 5 + maxTag: 5, + // 导出图片时的内边距 + exportPadding: 20, + // 展开收缩按钮尺寸 + expandBtnSize: 20, + // 节点里图片和文字的间距 + imgTextMargin: 5, + // 节点里各种文字信息的间距，如图标和文字的间距 + textContentMargin: 2 } /** @@ -155,6 +163,18 @@ class MindMap { }) } + /** + * @Author: 王林 + * @Date: 2021-07-11 21:16:52 + * @Desc: 容器尺寸变化，调整尺寸 + */ + resize() { + this.elRect = this.el.getBoundingClientRect() + this.width = this.elRect.width + this.height = this.elRect.height + this.svg.size(this.width, this.height) + } + /** * @Author: 王林 * @Date: 2021-04-24 13:25:50 diff --git a/simple-mind-map/src/Export.js b/simple-mind-map/src/Export.js index 4b5dd6b6..990fe615 100644 --- a/simple-mind-map/src/Export.js +++ b/simple-mind-map/src/Export.js @@ -14,6 +14,7 @@ class Export { */ constructor(opt) { this.mindMap = opt.mindMap + this.exportPadding = this.mindMap.opt.exportPadding } /** @@ -85,13 +86,13 @@ class Export { img.onload = async () => { try { let canvas = document.createElement('canvas') - canvas.width = img.width - canvas.height = img.height + canvas.width = img.width + this.exportPadding * 2 + canvas.height = img.height + this.exportPadding * 2 let ctx = canvas.getContext('2d') // 绘制背景 - await this.drawBackgroundToCanvas(ctx, img.width, img.height) + await this.drawBackgroundToCanvas(ctx, canvas.width, canvas.height) // 图片绘制到canvas里 - ctx.drawImage(img, 0, 0, img.width, img.height) + ctx.drawImage(img, 0, 0, img.width, img.height, this.exportPadding, this.exportPadding, img.width, img.height) resolve(canvas.toDataURL()) } catch (error) { reject(error) diff --git a/simple-mind-map/src/Node.js b/simple-mind-map/src/Node.js index 36d268bf..2d5c7694 100644 --- a/simple-mind-map/src/Node.js +++ b/simple-mind-map/src/Node.js @@ -76,12 +76,12 @@ class Node { textContentHeight: 0, textContentHeight: 0 } - // icon间距 - this._textContentItemMargin = 2 + // 各种文字信息的间距 + this._textContentItemMargin = this.mindMap.opt.textContentMargin // 图片和文字节点的间距 - this._blockContentMargin = 5 + this._blockContentMargin = this.mindMap.opt.imgTextMargin // 展开收缩按钮尺寸 - this._expandBtnSize = 20 + this._expandBtnSize = this.mindMap.opt.expandBtnSize // 初始渲染 this._initRender = true // 初始化 @@ -574,7 +574,6 @@ class Node { this.removeAllNode() this.createNodeData() this.layout() - this.renderExpandBtn() this.draw.add(this.group) } @@ -591,6 +590,7 @@ class Node { if (this._expandBtn && this.nodeData.children.length <= 0) { this.removeExpandBtn() } else if (!this._expandBtn && this.nodeData.children.length > 0) {// 需要添加展开收缩按钮 + this.renderExpandBtn() } let t = this.group.transform() @@ -749,9 +749,7 @@ class Node { removeExpandBtn() { if (this._expandBtn) { this._expandBtn.off(['mouseover', 'mouseout', 'click']) - } - // 展开收缩按钮 - if (this._expandBtn) { + this._expandBtn.clear() this._expandBtn.remove() this._expandBtn = null } diff --git a/simple-mind-map/src/Render.js b/simple-mind-map/src/Render.js index 5d9432ea..07c3e5b1 100644 --- a/simple-mind-map/src/Render.js +++ b/simple-mind-map/src/Render.js @@ -48,6 +48,8 @@ class Render { this.bindEvent() // 注册命令 this.registerCommands() + // 注册快捷键 + this.registerShortcutKeys() } /** @@ -116,6 +118,35 @@ class Render { this.mindMap.command.add('SET_NODE_TAG', this.setNodeTag) } + /** + * @Author: 王林 + * @Date: 2021-07-11 16:55:44 + * @Desc: 注册快捷键 + */ + registerShortcutKeys() { + // 插入下级节点 + this.mindMap.keyCommand.addShortcut('Tab', () => { + this.insertChildNode() + }) + // 插入同级节点 + this.mindMap.keyCommand.addShortcut('Enter', () => { + this.insertNode() + }) + // 展开/收起节点 + this.mindMap.keyCommand.addShortcut('/', () => { + this.activeNodeList.forEach((node) => { + if (node.nodeData.children.length <= 0) { + return + } + this.toggleNodeExpand(node) + }) + }) + // 删除节点 + this.mindMap.keyCommand.addShortcut('Del|Backspace', () => { + this.removeNode() + }) + } + /** * javascript comment * @Author: 王林25 @@ -326,6 +357,15 @@ class Render { this.mindMap.render() } + /** + * @Author: 王林 + * @Date: 2021-07-11 17:15:33 + * @Desc: 切换节点展开状态 + */ + toggleNodeExpand(node) { + this.mindMap.execCommand('SET_NODE_EXPAND', node, !node.nodeData.data.expand) + } + /** * @Author: 王林 * @Date: 2021-07-09 22:04:19 diff --git a/simple-mind-map/src/Select.js b/simple-mind-map/src/Select.js index 2474ba86..b555537b 100644 --- a/simple-mind-map/src/Select.js +++ b/simple-mind-map/src/Select.js @@ -49,7 +49,8 @@ class Select { [this.mouseMoveX, this.mouseMoveY], [this.mouseDownX, this.mouseMoveY] ]) - this.mindMap.batchExecution.push('checkInNodes', this.checkInNodes) + this.checkInNodes() + // this.mindMap.batchExecution.push('checkInNodes', this.checkInNodes) }) this.mindMap.on('mouseup', (e) => { if (!this.isMousedown) { @@ -110,11 +111,15 @@ class Select { top >= miny && bottom <= maxy ) { - this.mindMap.execCommand('SET_NODE_ACTIVE', node, true) - this.mindMap.renderer.addActiveNode(node) + this.mindMap.batchExecution.push('activeNode' + node.uid, () => { + this.mindMap.execCommand('SET_NODE_ACTIVE', node, true) + this.mindMap.renderer.addActiveNode(node) + }) } else if (node.nodeData.data.isActive) { - this.mindMap.execCommand('SET_NODE_ACTIVE', node, false) - this.mindMap.renderer.removeActiveNode(node) + this.mindMap.batchExecution.push('activeNode' + node.uid, () => { + this.mindMap.execCommand('SET_NODE_ACTIVE', node, false) + this.mindMap.renderer.removeActiveNode(node) + }) } }) } diff --git a/simple-mind-map/src/TextEdit.js b/simple-mind-map/src/TextEdit.js index d5e310dd..69a6262a 100644 --- a/simple-mind-map/src/TextEdit.js +++ b/simple-mind-map/src/TextEdit.js @@ -51,6 +51,10 @@ export default class TextEdit { this.mindMap.keyCommand.addShortcut('Enter', () => { this.hideEditTextBox() }) + // 注册编辑快捷键 + this.mindMap.keyCommand.addShortcut('F2', () => { + this.show() + }) } /** diff --git a/simple-mind-map/src/View.js b/simple-mind-map/src/View.js index 136fe5e2..3fb62b79 100644 --- a/simple-mind-map/src/View.js +++ b/simple-mind-map/src/View.js @@ -29,6 +29,16 @@ class View { * @Desc: 绑定 */ bind() { + // 快捷键 + this.mindMap.keyCommand.addShortcut('Control+=', () => { + this.enlarge() + }) + this.mindMap.keyCommand.addShortcut('Control+-', () => { + this.narrow() + }) + this.mindMap.keyCommand.addShortcut('Control+Enter', () => { + this.reset() + }) // 拖动视图 this.mindMap.event.on('mousedown', () => { this.sx = this.x @@ -63,6 +73,23 @@ class View { }) } + /** + * @Author: 王林 + * @Date: 2021-07-11 17:41:35 + * @Desc: 恢复 + */ + reset() { + let t = this.mindMap.draw.transform() + this.scale = 1 + this.x = 0 + this.y = 0 + this.mindMap.draw.transform({ + scale: this.scale, + origin: 'left center', + translate: [this.x, this.y], + }) + } + /** * @Author: 王林 * @Date: 2021-07-04 17:10:34 diff --git a/web/src/assets/icon-font/demo_index.html b/web/src/assets/icon-font/demo_index.html index bc5fe7e1..505e4ce7 100644 --- a/web/src/assets/icon-font/demo_index.html +++ b/web/src/assets/icon-font/demo_index.html @@ -54,6 +54,42 @@
@@ -126,12 +130,12 @@ import NodeHyperlink from "./NodeHyperlink"; import NodeIcon from "./NodeIcon"; import NodeNote from "./NodeNote"; import NodeTag from "./NodeTag"; -import Export from './Export'; +import Export from "./Export"; -/** - * @Author: 王林 - * @Date: 2021-06-24 22:54:58 - * @Desc: 工具栏 +/** + * @Author: 王林 + * @Date: 2021-06-24 22:54:58 + * @Desc: 工具栏 */ export default { name: "Toolbar", @@ -141,11 +145,11 @@ export default { NodeIcon, NodeNote, NodeTag, - Export + Export, }, data() { return { - activeNodes: [] + activeNodes: [], }; }, computed: { diff --git a/web/src/utils/index.js b/web/src/utils/index.js index e69de29b..f66776db 100644 --- a/web/src/utils/index.js +++ b/web/src/utils/index.js @@ -0,0 +1,33 @@ +/** + * @Author: 王林 + * @Date: 2021-07-11 21:38:09 + * @Desc: 全屏事件检测 + */ +const getOnfullscreEnevt = () => { + if (document.documentElement.requestFullScreen) { + return 'onfullscreenchange'; + } else if (document.documentElement.webkitRequestFullScreen) { + return 'onwebkitfullscreenchange'; + } else if (document.documentElement.mozRequestFullScreen) { + return 'onmozfullscreenchange'; + } else if (document.documentElement.msRequestFullscreen) { + return 'onmsfullscreenchange'; + } +} + +export const fullscrrenEvent = getOnfullscreEnevt() + +/** + * @Author: 王林 + * @Date: 2021-07-11 21:45:06 + * @Desc: 全屏 + */ +export const fullScreen = (element) => { + if (element.requestFullScreen) { + element.requestFullScreen(); + } else if (element.webkitRequestFullScreen) { + element.webkitRequestFullScreen(); + } else if (element.mozRequestFullScreen) { + element.mozRequestFullScreen(); + } +} \ No newline at end of file