From ca9b3678dcd5744f0b2b89abb685577fd8d6f942 Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Mon, 12 Jul 2021 14:55:50 +0800 Subject: [PATCH] =?UTF-8?q?'=E4=BC=98=E5=8C=96=E5=8F=8A=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E4=B8=BB=E9=A2=98'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/example/exampleData.js | 343 +++++++++++++++++- simple-mind-map/index.js | 4 - simple-mind-map/src/Command.js | 19 +- simple-mind-map/src/Event.js | 14 +- simple-mind-map/src/Node.js | 63 ++-- simple-mind-map/src/Render.js | 33 +- simple-mind-map/src/Select.js | 6 +- simple-mind-map/src/TextEdit.js | 5 +- simple-mind-map/src/assets/minions.jpg | Bin 0 -> 8464 bytes simple-mind-map/src/assets/pinkGrape.jpg | Bin 0 -> 7065 bytes .../src/layouts/LogicalStructure.js | 25 +- simple-mind-map/src/themes/index.js | 30 +- simple-mind-map/src/themes/minions.js | 43 +++ simple-mind-map/src/themes/pinkGrape.js | 45 +++ simple-mind-map/src/utils/constant.js | 10 + simple-mind-map/src/utils/index.js | 26 ++ web/src/pages/Edit/components/BaseStyle.vue | 10 +- web/src/pages/Edit/components/Edit.vue | 5 +- web/src/pages/Edit/components/Toolbar.vue | 11 +- 19 files changed, 598 insertions(+), 94 deletions(-) create mode 100644 simple-mind-map/src/assets/minions.jpg create mode 100644 simple-mind-map/src/assets/pinkGrape.jpg create mode 100644 simple-mind-map/src/themes/minions.js create mode 100644 simple-mind-map/src/themes/pinkGrape.js diff --git a/simple-mind-map/example/exampleData.js b/simple-mind-map/example/exampleData.js index bea79b9b..5362a8f8 100644 --- a/simple-mind-map/example/exampleData.js +++ b/simple-mind-map/example/exampleData.js @@ -1,6 +1,6 @@ const createFullData = () => { return { - "image": "http://192.168.3.118:8080/enJFNMHnedQTYTESGfDkctCp2.jpeg", + "image": "/enJFNMHnedQTYTESGfDkctCp2.jpeg", "imageTitle": "图片名称", "imageSize": { "width": 1000, @@ -17,20 +17,13 @@ const createFullData = () => { /** * @Author: 王林 * @Date: 2021-04-15 22:23:24 - * @Desc: 完整示例数据 + * @Desc: 节点较多示例数据 */ -export default { +const data1 = { "root": { "data": { "text": "根节点" }, - "childrens": [ - { - "data": { - "text": "二级节点1" - } - } - ], "children": [ { "data": { @@ -465,7 +458,335 @@ export default { }] }, ] - }, + } +} + +/** + * javascript comment + * @Author: 王林25 + * @Date: 2021-07-12 13:49:43 + * @Desc: 真实场景数据 + */ +const data2 = { + "root": { + "data": { + "text": "一周安排" + }, + "children": [ + { + "data": { + "text": "生活" + }, + "children": [ + { + "data": { + "text": "锻炼" + }, + "children": [ + { + "data": { + "text": "晨跑" + }, + "children": [ + { + "data": { + "text": "7:00-8:00" + }, + "children": [] + } + ] + }, + { + "data": { + "text": "夜跑" + }, + "children": [ + { + "data": { + "text": "20:00-21:00" + }, + "children": [] + } + ] + } + ] + }, + { + "data": { + "text": "饮食" + }, + "children": [ + { + "data": { + "text": "早餐" + }, + "children": [ + { + "data": { + "text": "8:30" + }, + "children": [] + } + ] + }, + { + "data": { + "text": "午餐" + }, + "children": [ + { + "data": { + "text": "11:30" + }, + "children": [] + } + ] + }, + { + "data": { + "text": "晚餐" + }, + "children": [ + { + "data": { + "text": "19:00" + }, + "children": [] + } + ] + } + ] + }, + { + "data": { + "text": "休息" + }, + "children": [ + { + "data": { + "text": "午休" + }, + "children": [ + { + "data": { + "text": "12:30-13:00" + }, + "children": [] + } + ] + }, + { + "data": { + "text": "晚休" + }, + "children": [ + { + "data": { + "text": "23:00-6:30" + }, + "children": [] + } + ] + } + ] + } + ] + }, + { + "data": { + "text": "工作日\n周一至周五" + }, + "children": [ + { + "data": { + "text": "日常工作" + }, + "children": [ + { + "data": { + "text": "9:00-18:00" + }, + "children": [] + } + ] + }, + { + "data": { + "text": "工作总结" + }, + "children": [ + { + "data": { + "text": "21:00-22:00" + }, + "children": [] + } + ] + } + ] + }, + { + "data": { + "text": "学习" + }, + "children": [ + { + "data": { + "text": "工作日" + }, + "children": [ + { + "data": { + "text": "早间新闻" + }, + "children": [ + { + "data": { + "text": "8:00-8:30" + }, + "children": [] + } + ] + }, + { + "data": { + "text": "阅读" + }, + "children": [ + { + "data": { + "text": "21:00-23:00" + }, + "children": [] + } + ] + } + ] + }, + { + "data": { + "text": "休息日" + }, + "children": [ + { + "data": { + "text": "财务管理" + }, + "children": [ + { + "data": { + "text": "9:00-10:30" + }, + "children": [] + } + ] + }, + { + "data": { + "text": "职场技能" + }, + "children": [ + { + "data": { + "text": "14:00-15:30" + }, + "children": [] + } + ] + }, + { + "data": { + "text": "其他书籍" + }, + "children": [ + { + "data": { + "text": "16:00-18:00" + }, + "children": [] + } + ] + } + ] + } + ] + }, + { + "data": { + "text": "休闲娱乐" + }, + "children": [ + { + "data": { + "text": "看电影" + }, + "children": [ + { + "data": { + "text": "1~2部" + }, + "children": [] + } + ] + }, + { + "data": { + "text": "逛街" + }, + "children": [ + { + "data": { + "text": "1~2次" + }, + "children": [] + } + ] + } + ] + } + ] + } +} + +/** + * javascript comment + * @Author: 王林25 + * @Date: 2021-07-12 14:29:10 + * @Desc: 极简数据 + */ +const data3 = { + "root": { + "data": { + "text": "根节点" + }, + "children": [ + { + "data": { + "text": "二级节点" + }, + "children": [ + { + "data": { + "text": "子节点" + }, + "children": [] + }, + { + "data": { + "text": "子节点" + }, + "children": [] + } + ] + } + ] + } +} + +export default { + // ...data1, + // ...data2, + ...data3, "theme": { "template": "default", "config": { diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js index c35a38f9..95b39f71 100644 --- a/simple-mind-map/index.js +++ b/simple-mind-map/index.js @@ -23,8 +23,6 @@ const defaultOpt = { themeConfig: {}, // 放大缩小的增量比例 scaleRatio: 0.1, - // 设置鼠标左键还是右键按下拖动，1（左键）、2（右键） - dragButton: 1, // 最多显示几个标签 maxTag: 5, // 导出图片时的内边距 @@ -130,8 +128,6 @@ class MindMap { } // 检查主题配置 opt.theme = opt.theme && theme[opt.theme] ? opt.theme : 'default' - // 检查鼠标键值 - opt.dragButton = [1, 3].includes(opt.dragButton) ? opt.dragButton : 1 return opt } diff --git a/simple-mind-map/src/Command.js b/simple-mind-map/src/Command.js index d4f62b22..300f9eef 100644 --- a/simple-mind-map/src/Command.js +++ b/simple-mind-map/src/Command.js @@ -57,8 +57,9 @@ class Command { addHistory() { let data = this.getCopyData() this.history.push(simpleDeepClone(data)) - this.activeHistoryIndex++ + this.activeHistoryIndex = this.history.length - 1 this.mindMap.emit('data_change', data) + this.mindMap.emit('back_forward', this.activeHistoryIndex, this.history.length) } /** @@ -69,6 +70,22 @@ class Command { back(step = 1) { if (this.activeHistoryIndex - step >= 0) { this.activeHistoryIndex -= step + this.mindMap.emit('back_forward', this.activeHistoryIndex, this.history.length) + return simpleDeepClone(this.history[this.activeHistoryIndex]); + } + } + + /** + * javascript comment + * @Author: 王林25 + * @Date: 2021-07-12 10:45:31 + * @Desc: 前进 + */ + forward(step = 1) { + let len = this.history.length + if (this.activeHistoryIndex + step <= len - 1) { + this.activeHistoryIndex += step + this.mindMap.emit('back_forward', this.activeHistoryIndex,) return simpleDeepClone(this.history[this.activeHistoryIndex]); } } diff --git a/simple-mind-map/src/Event.js b/simple-mind-map/src/Event.js index 194cfedd..cca50593 100644 --- a/simple-mind-map/src/Event.js +++ b/simple-mind-map/src/Event.js @@ -17,7 +17,7 @@ class Event extends EventEmitter { super() this.opt = opt this.mindMap = opt.mindMap - this.isMousedown = false + this.isLeftMousedown = false this.mousedownPos = { x: 0, y: 0 @@ -100,11 +100,11 @@ class Event extends EventEmitter { * @Desc: 鼠标按下事件 */ onMousedown(e) { - if (e.which !== this.mindMap.opt.dragButton) { - return; - } e.preventDefault() - this.isMousedown = true + // 鼠标左键 + if (e.which === 1) { + this.isLeftMousedown = true + } this.mousedownPos.x = e.clientX this.mousedownPos.y = e.clientY this.emit('mousedown', e, this) @@ -123,7 +123,7 @@ class Event extends EventEmitter { this.mousemoveOffset.x = e.clientX - this.mousedownPos.x this.mousemoveOffset.y = e.clientY - this.mousedownPos.y this.emit('mousemove', e, this) - if (this.isMousedown) { + if (this.isLeftMousedown) { this.emit('drag', e, this) } } @@ -135,7 +135,7 @@ class Event extends EventEmitter { * @Desc: 鼠标松开事件 */ onMouseup(e) { - this.isMousedown = false + this.isLeftMousedown = false this.emit('mouseup', e, this) } diff --git a/simple-mind-map/src/Node.js b/simple-mind-map/src/Node.js index f1a0d51f..4a6950db 100644 --- a/simple-mind-map/src/Node.js +++ b/simple-mind-map/src/Node.js @@ -1,6 +1,7 @@ import Style from './Style' import { - resizeImgSize + resizeImgSize, + asyncRun } from './utils' import { Image, @@ -631,21 +632,23 @@ class Node { } // 子节点 if (this.children && this.children.length && this.nodeData.data.expand !== false) { - let index = 0 - let loop = () => { - if (index >= this.children.length) { - return + asyncRun(this.children.map((item) => { + return () =>{ + item.render() } - this.children[index].render() - setTimeout(() => { - index++ - loop() - }, 0) - } - loop() - // this.children.forEach((child) => { - // child.render() - // }) + })) + // let index = 0 + // let loop = () => { + // if (index >= this.children.length) { + // return + // } + // this.children[index].render() + // setTimeout(() => { + // index++ + // loop() + // }, 0) + // } + // loop() } } @@ -661,21 +664,23 @@ class Node { this.removeLine() // 子节点 if (this.children && this.children.length) { - let index = 0 - let loop = () => { - if (index >= this.children.length) { - return + asyncRun(this.children.map((item) => { + return () =>{ + item.remove() } - this.children[index].remove() - setTimeout(() => { - index++ - loop() - }, 0) - } - loop() - // this.children.forEach((child) => { - // child.remove() - // }) + })) + // let index = 0 + // let loop = () => { + // if (index >= this.children.length) { + // return + // } + // this.children[index].remove() + // setTimeout(() => { + // index++ + // loop() + // }, 0) + // } + // loop() } } diff --git a/simple-mind-map/src/Render.js b/simple-mind-map/src/Render.js index 1c7516ae..368fc1d2 100644 --- a/simple-mind-map/src/Render.js +++ b/simple-mind-map/src/Render.js @@ -40,8 +40,6 @@ class Render { this.activeNodeList = [] // 根节点 this.root = null - // 文本编辑框 - this.textEdit = new TextEdit(this) // 布局 this.layout = new (layouts[this.mindMap.opt.layout] ? layouts[this.mindMap.opt.layout] : layouts.logicalStructure)(this) // 绑定事件 @@ -50,6 +48,8 @@ class Render { this.registerCommands() // 注册快捷键 this.registerShortcutKeys() + // 文本编辑框 + this.textEdit = new TextEdit(this) } /** @@ -77,6 +77,9 @@ class Render { // 回退 this.back = this.back.bind(this) this.mindMap.command.add('BACK', this.back) + // 前进 + this.forward = this.forward.bind(this) + this.mindMap.command.add('FORWARD', this.forward) // 插入同级节点 this.insertNode = this.insertNode.bind(this) this.mindMap.command.add('INSERT_NODE', this.insertNode) @@ -133,6 +136,9 @@ class Render { }) // 插入同级节点 this.mindMap.keyCommand.addShortcut('Enter', () => { + if (this.textEdit.showTextEdit) { + return + } this.insertNode() }) // 展开/收起节点 @@ -157,11 +163,10 @@ class Render { * @Desc: 渲染 */ render() { - let s = Date.now() - this.root = this.layout.doLayout() - console.log(Date.now() - s) - this.root.render() - console.log(Date.now() - s) + this.layout.doLayout((root) => { + this.root = root + this.root.render() + }) } /** @@ -233,6 +238,20 @@ class Render { } } + /** + * javascript comment + * @Author: 王林25 + * @Date: 2021-07-12 10:44:51 + * @Desc: 前进 + */ + forward(step) { + let data = this.mindMap.command.forward(step) + if (data) { + this.renderTree = data + this.mindMap.reRender() + } + } + /** * @Author: 王林 * @Date: 2021-05-04 13:19:54 diff --git a/simple-mind-map/src/Select.js b/simple-mind-map/src/Select.js index b555537b..2308dc3a 100644 --- a/simple-mind-map/src/Select.js +++ b/simple-mind-map/src/Select.js @@ -30,7 +30,10 @@ class Select { */ bindEvent() { this.checkInNodes = throttle(this.checkInNodes, 500, this) - this.mindMap.on('contextmenu', (e) => { + this.mindMap.on('mousedown', (e) => { + if (e.which !== 3) { + return + } this.isMousedown = true let { x, y } = this.toPos(e.clientX, e.clientY) this.mouseDownX = x @@ -50,7 +53,6 @@ class Select { [this.mouseDownX, this.mouseMoveY] ]) this.checkInNodes() - // this.mindMap.batchExecution.push('checkInNodes', this.checkInNodes) }) this.mindMap.on('mouseup', (e) => { if (!this.isMousedown) { diff --git a/simple-mind-map/src/TextEdit.js b/simple-mind-map/src/TextEdit.js index 69a6262a..daa3870f 100644 --- a/simple-mind-map/src/TextEdit.js +++ b/simple-mind-map/src/TextEdit.js @@ -53,7 +53,10 @@ export default class TextEdit { }) // 注册编辑快捷键 this.mindMap.keyCommand.addShortcut('F2', () => { - this.show() + if (this.renderer.activeNodeList.length <= 0){ + return + } + this.show(this.renderer.activeNodeList[0]) }) } diff --git a/simple-mind-map/src/assets/minions.jpg b/simple-mind-map/src/assets/minions.jpg new file mode 100644 index 0000000000000000000000000000000000000000..a148ca79219ca01ed9e3b6a753a6889c0008047b GIT binary patch literal 8464 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 literal 0 HcmV?d00001 diff --git a/simple-mind-map/src/assets/pinkGrape.jpg b/simple-mind-map/src/assets/pinkGrape.jpg new file mode 100644 index 0000000000000000000000000000000000000000..b82999a2f782d6b32c5f165352e02f0973551f60 GIT binary patch literal 7065 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 HN#p+jrh{$5 literal 0 HcmV?d00001 diff --git a/simple-mind-map/src/layouts/LogicalStructure.js b/simple-mind-map/src/layouts/LogicalStructure.js index 13532517..682b87c5 100644 --- a/simple-mind-map/src/layouts/LogicalStructure.js +++ b/simple-mind-map/src/layouts/LogicalStructure.js @@ -1,6 +1,7 @@ import Base from './Base'; import { - walk + walk, + asyncRun } from '../utils' /** @@ -24,15 +25,17 @@ class LogicalStructure extends Base { * @Date: 2021-04-06 14:04:20 * @Desc: 布局 */ - doLayout() { - // 遍历数据计算节点的left、width、height - this.computedBaseValue() - // 计算节点的top - this.computedTopValue() - // 调整节点top - this.adjustTopValue() - - return this.root; + doLayout(callback) { + let task = [() => { + this.computedBaseValue() + }, () => { + this.computedTopValue() + }, () => { + this.adjustTopValue() + }, () => { + callback(this.root) + }] + asyncRun(task) } /** @@ -122,7 +125,7 @@ class LogicalStructure extends Base { // 上面的节点往上移 if (_index < index) { _offset = -addHeight - } else if (_index > index) {// 下面的节点往下移 + } else if (_index > index) { // 下面的节点往下移 _offset = addHeight } item.top += _offset diff --git a/simple-mind-map/src/themes/index.js b/simple-mind-map/src/themes/index.js index 70f5566e..03434e45 100644 --- a/simple-mind-map/src/themes/index.js +++ b/simple-mind-map/src/themes/index.js @@ -1,16 +1,18 @@ -import defaultTheme from './default'; -import freshGreen from './freshGreen'; -import blueSky from './blueSky'; -import brainImpairedPink from './brainImpairedPink'; -import romanticPurple from './romanticPurple'; -import freshRed from './freshRed'; -import earthYellow from './earthYellow'; -import classic from './classic'; -import classic2 from './classic2'; -import classic3 from './classic3'; +import defaultTheme from './default' +import freshGreen from './freshGreen' +import blueSky from './blueSky' +import brainImpairedPink from './brainImpairedPink' +import romanticPurple from './romanticPurple' +import freshRed from './freshRed' +import earthYellow from './earthYellow' +import classic from './classic' +import classic2 from './classic2' +import classic3 from './classic3' import dark from './dark'; -import classicGreen from './classicGreen'; -import classicBlue from './classicBlue'; +import classicGreen from './classicGreen' +import classicBlue from './classicBlue' +import minions from './minions' +import pinkGrape from './pinkGrape' export default { default: defaultTheme, @@ -25,5 +27,7 @@ export default { classic3, dark, classicGreen, - classicBlue + classicBlue, + minions, + pinkGrape } \ No newline at end of file diff --git a/simple-mind-map/src/themes/minions.js b/simple-mind-map/src/themes/minions.js new file mode 100644 index 00000000..647e5793 --- /dev/null +++ b/simple-mind-map/src/themes/minions.js @@ -0,0 +1,43 @@ +import defaultTheme from './default'; +import merge from 'deepmerge'; + +/** + * @Author: 王林 + * @Date: 2021-04-11 15:22:18 + * @Desc: 小黄人 + */ +export default merge(defaultTheme, { + // 连线的颜色 + lineColor: 'rgb(51, 51, 51)', + lineWidth: 3, + // 背景颜色 + backgroundColor: 'rgb(248, 215, 49)', + // 根节点样式 + root: { + fillColor: 'rgb(55, 165, 255)', + borderColor: 'rgb(51, 51, 51)', + borderWidth: 3, + active: { + borderColor: 'rgb(255, 160, 36)' + } + }, + // 二级节点样式 + second: { + fillColor: 'rgb(255, 160, 36)', + color: '#222', + borderColor: 'rgb(51, 51, 51)', + borderWidth: 3, + fontSize: 14, + active: { + borderColor: 'rgb(55, 165, 255)' + } + }, + // 三级及以下节点样式 + node: { + fontSize: 12, + color: '#222', + active: { + borderColor: 'rgb(55, 165, 255)' + } + } +}) \ No newline at end of file diff --git a/simple-mind-map/src/themes/pinkGrape.js b/simple-mind-map/src/themes/pinkGrape.js new file mode 100644 index 00000000..ae2d8a4b --- /dev/null +++ b/simple-mind-map/src/themes/pinkGrape.js @@ -0,0 +1,45 @@ +import defaultTheme from './default'; +import merge from 'deepmerge'; + +/** + * @Author: 王林 + * @Date: 2021-04-11 15:22:18 + * @Desc: 粉红葡萄 + */ +export default merge(defaultTheme, { + // 连线的颜色 + lineColor: 'rgb(166, 101, 106)', + lineWidth: 3, + // 背景颜色 + backgroundColor: 'rgb(255, 208, 211)', + // 根节点样式 + root: { + fillColor: 'rgb(139, 109, 225)', + borderColor: '', + borderWidth: 0, + active: { + borderColor: 'rgb(243, 104, 138)', + borderWidth: 2, + } + }, + // 二级节点样式 + second: { + fillColor: 'rgb(243, 104, 138)', + color: '#fff', + borderColor: '', + borderWidth: 0, + fontSize: 14, + active: { + borderColor: 'rgb(139, 109, 225)', + borderWidth: 2, + } + }, + // 三级及以下节点样式 + node: { + fontSize: 12, + color: '#222', + active: { + borderColor: 'rgb(139, 109, 225)' + } + } +}) \ No newline at end of file diff --git a/simple-mind-map/src/utils/constant.js b/simple-mind-map/src/utils/constant.js index 69113362..d9de6727 100644 --- a/simple-mind-map/src/utils/constant.js +++ b/simple-mind-map/src/utils/constant.js @@ -42,6 +42,16 @@ export const themeList = [ value: 'classic', img: require('../assets/classic.jpg') }, + { + name: '小黄人', + value: 'minions', + img: require('../assets/minions.jpg') + }, + { + name: '粉红葡萄', + value: 'pinkGrape', + img: require('../assets/pinkGrape.jpg') + }, { name: '脑图经典2', value: 'classic2', diff --git a/simple-mind-map/src/utils/index.js b/simple-mind-map/src/utils/index.js index b41baf47..b67aec30 100644 --- a/simple-mind-map/src/utils/index.js +++ b/simple-mind-map/src/utils/index.js @@ -194,4 +194,30 @@ export const throttle = (fn, time = 300, ctx) => { timer = null }, 300) }; +} + +/** + * javascript comment + * @Author: 王林25 + * @Date: 2021-07-12 10:27:36 + * @Desc: 异步执行任务队列 + */ +export const asyncRun = (taskList, callback = () => {}) => { + let index = 0 + let len = taskList.length + if (len <= 0) { + return + } + let loop = () => { + if (index >= len) { + callback() + return + } + taskList[index]() + setTimeout(() => { + index++ + loop() + }, 0) + } + loop() } \ No newline at end of file diff --git a/web/src/pages/Edit/components/BaseStyle.vue b/web/src/pages/Edit/components/BaseStyle.vue index f6f0cd42..77ab3b82 100644 --- a/web/src/pages/Edit/components/BaseStyle.vue +++ b/web/src/pages/Edit/components/BaseStyle.vue @@ -100,7 +100,7 @@
水平 垂直 显示的最大宽度 显示的最大高度 大小 { this.$bus.$emit("data_change", ...args); }); + this.mindMap.on("back_forward", (...args) => { + this.$bus.$emit("back_forward", ...args); + }); }, /** @@ -92,7 +95,7 @@ export default { * @Desc: 重新渲染 */ reRender() { - this.mindMap.render(); + this.mindMap.reRender(); }, /** diff --git a/web/src/pages/Edit/components/Toolbar.vue b/web/src/pages/Edit/components/Toolbar.vue index 47180c88..5261f9e0 100644 --- a/web/src/pages/Edit/components/Toolbar.vue +++ b/web/src/pages/Edit/components/Toolbar.vue @@ -6,7 +6,7 @@
@@ -16,7 +16,7 @@
@@ -170,6 +170,8 @@ export default { data() { return { activeNodes: [], + backEnd: false, + forwardEnd: true }; }, computed: { @@ -183,6 +185,11 @@ export default { this.$bus.$on("node_active", (...args) => { this.activeNodes = args[1]; }); + this.$bus.$on("back_forward", (index, len) => { + console.log(index, len) + this.backEnd = index <= 0 + this.forwardEnd = index >= len - 1 + }); }, };