From e9722efe93c88a14ed0f47c6aa01133fe9cbf9ae Mon Sep 17 00:00:00 2001 From: wanglin25 Date: Wed, 8 Jun 2022 14:30:45 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=8F=AA=E8=AF=BB=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 13 ++++++++++++ index.html | 2 +- simple-mind-map/{READMD.md => README.md} | 0 simple-mind-map/index.js | 20 +++++++++++++++++++ simple-mind-map/package.json | 2 +- simple-mind-map/src/Drag.js | 6 ++++++ simple-mind-map/src/Node.js | 9 +++++++++ simple-mind-map/src/Select.js | 9 +++++++++ web/src/pages/Edit/components/Edit.vue | 1 + .../Edit/components/NavigatorToolbar.vue | 19 ++++++++++++++++++ web/src/pages/Edit/components/Toolbar.vue | 10 +++++++--- 11 files changed, 86 insertions(+), 5 deletions(-) rename simple-mind-map/{READMD.md => README.md} (100%) diff --git a/README.md b/README.md index ad1c58c4..51890569 100644 --- a/README.md +++ b/README.md @@ -116,6 +116,7 @@ const mindMap = new MindMap({ | selectTranslateStep | Number | 3 | 多选节点时鼠标移动到边缘时的画布移动偏移量 | | | selectTranslateLimit | Number | 20 | 多选节点时鼠标移动距边缘多少距离时开始偏移 | | | customNoteContentShow（v0.1.6+） | Object | null | 自定义节点备注内容显示，Object类型，结构为：{show: (noteContent, left, top) => {// 你的显示节点备注逻辑 }, hide: () => {// 你的隐藏节点备注逻辑 }} | | +| readonly（v0.1.7+） | Boolean | false | 是否是只读模式 | | ### 实例方法： @@ -136,7 +137,11 @@ const mindMap = new MindMap({ 容器尺寸变化后，需要调用该方法进行适应 +#### setMode(mode) +v0.1.7+。切换模式为只读或编辑。 + +`mode`：readonly、edit #### on(event, fn) @@ -298,6 +303,14 @@ v0.1.5+ ### 方法 +#### clearActive() + +清除当前激活的节点 + +#### clearAllActive() + +清除当前所有激活节点，并会触发`node_active`事件 + #### startTextEdit() （v0.1.6+）若有文字编辑需求可调用该方法，会禁用回车键和删除键相关快捷键防止冲突 diff --git a/index.html b/index.html index 57ae6b9e..26d743e3 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -一个简单的web思维导图实现
\ No newline at end of file +一个简单的web思维导图实现
\ No newline at end of file diff --git a/simple-mind-map/READMD.md b/simple-mind-map/README.md similarity index 100% rename from simple-mind-map/READMD.md rename to simple-mind-map/README.md diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js index 662bd270..f1a3bdc4 100644 --- a/simple-mind-map/index.js +++ b/simple-mind-map/index.js @@ -19,6 +19,8 @@ import { // 默认选项配置 const defaultOpt = { + // 是否只读 + readonly: false, // 布局 layout: 'logicalStructure', // 主题 @@ -347,6 +349,24 @@ class MindMap { y: y - this.elRect.top } } + + /** + * javascript comment + * @Author: 王林25 + * @Date: 2022-06-08 14:12:38 + * @Desc: 设置只读模式、编辑模式 + */ + setMode(mode) { + if (!['readonly', 'edit'].includes(mode)) { + return + } + this.opt.readonly = mode === 'readonly' + if (this.opt.readonly) { + // 取消当前激活的元素 + this.renderer.clearAllActive() + } + this.emit('mode_change', mode) + } } export default MindMap \ No newline at end of file diff --git a/simple-mind-map/package.json b/simple-mind-map/package.json index 0d797796..6db947a6 100644 --- a/simple-mind-map/package.json +++ b/simple-mind-map/package.json @@ -1,6 +1,6 @@ { "name": "simple-mind-map", - "version": "0.1.6", + "version": "0.1.7", "description": "一个简单的web在线思维导图", "authors": [ { diff --git a/simple-mind-map/src/Drag.js b/simple-mind-map/src/Drag.js index 96ed44b4..70ee60dd 100644 --- a/simple-mind-map/src/Drag.js +++ b/simple-mind-map/src/Drag.js @@ -71,6 +71,9 @@ class Drag extends Base { bindEvent() { this.checkOverlapNode = throttle(this.checkOverlapNode, 300, this) this.mindMap.on('node_mousedown', (node, e) => { + if (this.mindMap.opt.readonly) { + return + } if (e.which !== 1 || node.isRoot) { return } @@ -96,6 +99,9 @@ class Drag extends Base { this.mouseDownY = y }) this.mindMap.on('mousemove', (e) => { + if (this.mindMap.opt.readonly) { + return + } if (!this.isMousedown) { return } diff --git a/simple-mind-map/src/Node.js b/simple-mind-map/src/Node.js index 742e0023..e2520ec2 100644 --- a/simple-mind-map/src/Node.js +++ b/simple-mind-map/src/Node.js @@ -576,11 +576,17 @@ class Node { }) // 双击事件 this.group.on('dblclick', (e) => { + if (this.mindMap.opt.readonly) { + return + } e.stopPropagation() this.mindMap.emit('node_dblclick', this, e) }) // 右键菜单事件 this.group.on('contextmenu', (e) => { + if (this.mindMap.opt.readonly) { + return + } e.stopPropagation() e.preventDefault() if (this.nodeData.data.isActive) { @@ -597,6 +603,9 @@ class Node { * @Desc: 激活节点 */ active(e) { + if (this.mindMap.opt.readonly) { + return + } e.stopPropagation() if (this.nodeData.data.isActive) { return diff --git a/simple-mind-map/src/Select.js b/simple-mind-map/src/Select.js index bdfefbb1..e4bb86f9 100644 --- a/simple-mind-map/src/Select.js +++ b/simple-mind-map/src/Select.js @@ -31,6 +31,9 @@ class Select { bindEvent() { this.checkInNodes = throttle(this.checkInNodes, 500, this) this.mindMap.on('mousedown', (e) => { + if (this.mindMap.opt.readonly) { + return + } if (e.which !== 3) { return } @@ -41,6 +44,9 @@ class Select { this.createRect(x, y) }) this.mindMap.on('mousemove', (e) => { + if (this.mindMap.opt.readonly) { + return + } if (!this.isMousedown) { return } @@ -54,6 +60,9 @@ class Select { this.onMove(x, y) }) this.mindMap.on('mouseup', (e) => { + if (this.mindMap.opt.readonly) { + return + } if (!this.isMousedown) { return; } diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue index 878b9283..d65c766b 100644 --- a/web/src/pages/Edit/components/Edit.vue +++ b/web/src/pages/Edit/components/Edit.vue @@ -200,6 +200,7 @@ export default { 'expand_btn_click', 'svg_mousedown', 'mouseup', + 'mode_change' ].forEach((event) => { this.mindMap.on(event, (...args) => { this.$bus.$emit(event, ...args) diff --git a/web/src/pages/Edit/components/NavigatorToolbar.vue b/web/src/pages/Edit/components/NavigatorToolbar.vue index fb19b960..4b2c4438 100644 --- a/web/src/pages/Edit/components/NavigatorToolbar.vue +++ b/web/src/pages/Edit/components/NavigatorToolbar.vue @@ -1,5 +1,14 @@