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 00000000..a148ca79 Binary files /dev/null and b/simple-mind-map/src/assets/minions.jpg differ diff --git a/simple-mind-map/src/assets/pinkGrape.jpg b/simple-mind-map/src/assets/pinkGrape.jpg new file mode 100644 index 00000000..b82999a2 Binary files /dev/null and b/simple-mind-map/src/assets/pinkGrape.jpg differ 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 + }); }, };