FE/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-17 14:04:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

增加只读模式

Browse Source
This commit is contained in:
wanglin2
2022-06-08 14:30:45 +08:00
parent 495cb4c62a
commit 608adb21e1
11 changed files with 86 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
README.md
View File

@@ -116,6 +116,7 @@ const mindMap = new MindMap({
| selectTranslateStep | Number | 3 | 多选节点时鼠标移动到边缘时的画布移动偏移量 | | | selectTranslateStep | Number | 3 | 多选节点时鼠标移动到边缘时的画布移动偏移量 | |
| selectTranslateLimit | Number | 20 | 多选节点时鼠标移动距边缘多少距离时开始偏移 | | | selectTranslateLimit | Number | 20 | 多选节点时鼠标移动距边缘多少距离时开始偏移 | |
| customNoteContentShow（v0.1.6+） | Object | null | 自定义节点备注内容显示，Object类型，结构为：{show: (noteContent, left, top) => {// 你的显示节点备注逻辑 }, hide: () => {// 你的隐藏节点备注逻辑 }} | | | 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) #### on(event, fn)
@@ -298,6 +303,14 @@ v0.1.5+
### 方法 ### 方法
#### clearActive()
清除当前激活的节点
#### clearAllActive()
清除当前所有激活节点，并会触发`node_active`事件
#### startTextEdit() #### startTextEdit()
（v0.1.6+）若有文字编辑需求可调用该方法，会禁用回车键和删除键相关快捷键防止冲突 （v0.1.6+）若有文字编辑需求可调用该方法，会禁用回车键和删除键相关快捷键防止冲突

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.9f8f33bc.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.6fd71983.css" rel="preload" as="style"><link href="dist/js/app.ae3c62cc.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.384d822e.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.6fd71983.css" rel="stylesheet"><link href="dist/css/app.9f8f33bc.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.384d822e.js"></script><script src="dist/js/app.ae3c62cc.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.ab77c667.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.6fd71983.css" rel="preload" as="style"><link href="dist/js/app.73d36c68.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.384d822e.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.6fd71983.css" rel="stylesheet"><link href="dist/css/app.ab77c667.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.384d822e.js"></script><script src="dist/js/app.73d36c68.js"></script></body></html>

0
simple-mind-map/READMD.md → simple-mind-map/README.md
View File

20
simple-mind-map/index.js
View File

@@ -19,6 +19,8 @@ import {
// 默认选项配置 // 默认选项配置
const defaultOpt = { const defaultOpt = {
// 是否只读
readonly: false,
// 布局 // 布局
layout: 'logicalStructure', layout: 'logicalStructure',
// 主题 // 主题
@@ -347,6 +349,24 @@ class MindMap {
y: y - this.elRect.top 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 export default MindMap

2
simple-mind-map/package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "simple-mind-map", "name": "simple-mind-map",
"version": "0.1.6", "version": "0.1.7",
"description": "一个简单的web在线思维导图", "description": "一个简单的web在线思维导图",
"authors": [ "authors": [
{ {

6
simple-mind-map/src/Drag.js
View File

@@ -71,6 +71,9 @@ class Drag extends Base {
bindEvent() { bindEvent() {
this.checkOverlapNode = throttle(this.checkOverlapNode, 300, this) this.checkOverlapNode = throttle(this.checkOverlapNode, 300, this)
this.mindMap.on('node_mousedown', (node, e) => { this.mindMap.on('node_mousedown', (node, e) => {
if (this.mindMap.opt.readonly) {
return
}
if (e.which !== 1 || node.isRoot) { if (e.which !== 1 || node.isRoot) {
return return
} }
@@ -96,6 +99,9 @@ class Drag extends Base {
this.mouseDownY = y this.mouseDownY = y
}) })
this.mindMap.on('mousemove', (e) => { this.mindMap.on('mousemove', (e) => {
if (this.mindMap.opt.readonly) {
return
}
if (!this.isMousedown) { if (!this.isMousedown) {
return return
} }

9
simple-mind-map/src/Node.js
View File

@@ -576,11 +576,17 @@ class Node {
}) })
// 双击事件 // 双击事件
this.group.on('dblclick', (e) => { this.group.on('dblclick', (e) => {
if (this.mindMap.opt.readonly) {
return
}
e.stopPropagation() e.stopPropagation()
this.mindMap.emit('node_dblclick', this, e) this.mindMap.emit('node_dblclick', this, e)
}) })
// 右键菜单事件 // 右键菜单事件
this.group.on('contextmenu', (e) => { this.group.on('contextmenu', (e) => {
if (this.mindMap.opt.readonly) {
return
}
e.stopPropagation() e.stopPropagation()
e.preventDefault() e.preventDefault()
if (this.nodeData.data.isActive) { if (this.nodeData.data.isActive) {
@@ -597,6 +603,9 @@ class Node {
* @Desc: 激活节点 * @Desc: 激活节点
*/ */
active(e) { active(e) {
if (this.mindMap.opt.readonly) {
return
}
e.stopPropagation() e.stopPropagation()
if (this.nodeData.data.isActive) { if (this.nodeData.data.isActive) {
return return

9
simple-mind-map/src/Select.js
View File

@@ -31,6 +31,9 @@ class Select {
bindEvent() { bindEvent() {
this.checkInNodes = throttle(this.checkInNodes, 500, this) this.checkInNodes = throttle(this.checkInNodes, 500, this)
this.mindMap.on('mousedown', (e) => { this.mindMap.on('mousedown', (e) => {
if (this.mindMap.opt.readonly) {
return
}
if (e.which !== 3) { if (e.which !== 3) {
return return
} }
@@ -41,6 +44,9 @@ class Select {
this.createRect(x, y) this.createRect(x, y)
}) })
this.mindMap.on('mousemove', (e) => { this.mindMap.on('mousemove', (e) => {
if (this.mindMap.opt.readonly) {
return
}
if (!this.isMousedown) { if (!this.isMousedown) {
return return
} }
@@ -54,6 +60,9 @@ class Select {
this.onMove(x, y) this.onMove(x, y)
}) })
this.mindMap.on('mouseup', (e) => { this.mindMap.on('mouseup', (e) => {
if (this.mindMap.opt.readonly) {
return
}
if (!this.isMousedown) { if (!this.isMousedown) {
return; return;
} }

1
web/src/pages/Edit/components/Edit.vue
View File

@@ -200,6 +200,7 @@ export default {
'expand_btn_click', 'expand_btn_click',
'svg_mousedown', 'svg_mousedown',
'mouseup', 'mouseup',
'mode_change'
].forEach((event) => { ].forEach((event) => {
this.mindMap.on(event, (...args) => { this.mindMap.on(event, (...args) => {
this.$bus.$emit(event, ...args) this.$bus.$emit(event, ...args)

19
web/src/pages/Edit/components/NavigatorToolbar.vue
View File

@@ -1,5 +1,14 @@
<template> <template>
<div class="navigatorContainer"> <div class="navigatorContainer">
<div class="item">
<el-switch
v-model="isReadonly"
active-text="只读模式"
inactive-text="编辑模式"
@change="readonlyChange"
>
</el-switch>
</div>
<div class="item"> <div class="item">
<Scale :mindMap="mindMap"></Scale> <Scale :mindMap="mindMap"></Scale>
</div> </div>
@@ -28,6 +37,16 @@ export default {
mindMap: { mindMap: {
type: Object, type: Object,
}, },
},
data () {
return {
isReadonly: false
}
},
methods: {
readonlyChange(value) {
this.mindMap.setMode(value ? 'readonly' : 'edit')
}
} }
}; };
</script> </script>

10
web/src/pages/Edit/components/Toolbar.vue
View File

@@ -6,7 +6,7 @@
<div <div
class="toolbarBtn" class="toolbarBtn"
:class="{ :class="{
disabled: backEnd, disabled: readonly || backEnd,
}" }"
@click="$bus.$emit('execCommand', 'BACK')" @click="$bus.$emit('execCommand', 'BACK')"
> >
@@ -16,7 +16,7 @@
<div <div
class="toolbarBtn" class="toolbarBtn"
:class="{ :class="{
disabled: forwardEnd, disabled: readonly || forwardEnd,
}" }"
@click="$bus.$emit('execCommand', 'FORWARD')" @click="$bus.$emit('execCommand', 'FORWARD')"
> >
@@ -178,7 +178,8 @@ export default {
return { return {
activeNodes: [], activeNodes: [],
backEnd: false, backEnd: false,
forwardEnd: true forwardEnd: true,
readonly: false
}; };
}, },
computed: { computed: {
@@ -189,6 +190,9 @@ export default {
}, },
}, },
created() { created() {
this.$bus.$on("mode_change", (mode) => {
this.readonly = mode === 'readonly'
});
this.$bus.$on("node_active", (...args) => { this.$bus.$on("node_active", (...args) => {
this.activeNodes = args[1]; this.activeNodes = args[1];
}); });