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

'优化及增加主题'

Browse Source
This commit is contained in:
wanglin2
2021-07-12 14:55:50 +08:00
parent 395e802b6b
commit ca9b3678dc
19 changed files with 598 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

343
simple-mind-map/example/exampleData.js
View File

@@ -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": {

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

@@ -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
}

19
simple-mind-map/src/Command.js
View File

@@ -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]);
}
}

14
simple-mind-map/src/Event.js
View File

@@ -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)
}

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

@@ -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()
}
}

33
simple-mind-map/src/Render.js
View File

@@ -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

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

@@ -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) {

5
simple-mind-map/src/TextEdit.js
View File

@@ -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])
})
}

BIN
simple-mind-map/src/assets/minions.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
simple-mind-map/src/assets/pinkGrape.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

25
simple-mind-map/src/layouts/LogicalStructure.js
View File

@@ -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

30
simple-mind-map/src/themes/index.js
View File

@@ -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
}

43
simple-mind-map/src/themes/minions.js Normal file
View File

@@ -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)'
}
}
})

45
simple-mind-map/src/themes/pinkGrape.js Normal file
View File

@@ -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)'
}
}
})

10
simple-mind-map/src/utils/constant.js
View File

@@ -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',

26
simple-mind-map/src/utils/index.js
View File

@@ -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()
}

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

@@ -100,7 +100,7 @@
<div class="rowItem">
<span class="name">水平</span>
<el-slider
style="width: 210px"
style="width: 200px"
v-model="style.paddingX"
@change="
(value) => {
@@ -114,7 +114,7 @@
<div class="rowItem">
<span class="name">垂直</span>
<el-slider
style="width: 210px"
style="width: 200px"
v-model="style.paddingY"
@change="
(value) => {
@@ -130,7 +130,7 @@
<div class="rowItem">
<span class="name">显示的最大宽度</span>
<el-slider
style="width: 150px"
style="width: 140px"
v-model="style.imgMaxWidth"
:min="10"
:max="300"
@@ -146,7 +146,7 @@
<div class="rowItem">
<span class="name">显示的最大高度</span>
<el-slider
style="width: 150px"
style="width: 140px"
v-model="style.imgMaxHeight"
:min="10"
:max="300"
@@ -164,7 +164,7 @@
<div class="rowItem">
<span class="name">大小</span>
<el-slider
style="width: 210px"
style="width: 200px"
v-model="style.iconSize"
:min="12"
:max="50"

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

@@ -84,6 +84,9 @@ export default {
this.mindMap.on("data_change", (...args) => {
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();
},
/**

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

@@ -6,7 +6,7 @@
<div
class="toolbarBtn"
:class="{
disabled: false,
disabled: backEnd,
}"
@click="$bus.$emit('execCommand', 'BACK')"
>
@@ -16,7 +16,7 @@
<div
class="toolbarBtn"
:class="{
disabled: false,
disabled: forwardEnd,
}"
@click="$bus.$emit('execCommand', 'FORWARD')"
>
@@ -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
});
},
};
</script>