openSourceRemote/mind-map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成基本逻辑

Browse Source
This commit is contained in:
wanglin 2021-07-10 22:06:45 +08:00
parent 388656f6e0
commit f3780baedc
19 changed files with 1182 additions and 586 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,6 +24,13 @@ export default {
"data": { "data": {
"text": "根节点" "text": "根节点"
}, },
"childrens": [
{
"data": {
"text": "二级节点1"
}
}
],
"children": [ "children": [
{ {
"data": { "data": {
@ -32,286 +39,431 @@ export default {
}, },
"children": [{ "children": [{
"data": { "data": {
"text": "子节点1-1", "text": "子节点",
...createFullData()
}, },
}, { "children": [{
"data": { "data": {
"text": "子节点1-2", "text": "子节点",
} },
},] }, {
"data": {
"text": "子节点",
},
"children": [{
"data": {
"text": "子节点",
...createFullData()
},
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
"children": [{
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
"children": [{
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
"children": [{
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
"children": [{
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}]
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}]
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}]
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}]
}, {
"data": {
"text": "子节点",
},
}]
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}]
}]
}, },
{ {
"data": { "data": {
"text": "二级节点2" "text": "二级节点2",
"expand": true,
}, },
"children": [ "children": [{
{ "data": {
"data": { "text": "子节点",
"text": "子节点2-1"
},
"children": [
{
"data": {
"text": "子节点2-1-1",
}
},
{
"data": {
"text": "子节点2-1-2",
},
"children": [
{
"data": {
"text": "子节点2-1-2-1",
}
},
{
"data": {
"text": "子节点2-1-2-2",
},
"children": [
{
"data": {
"text": "子节点2-1-2-2-1",
}
},
{
"data": {
"text": "子节点2-1-2-2-2"
}
},
{
"data": {
"text": "子节点2-1-2-2-3",
}
}
]
},
{
"data": {
"text": "子节点4-1-2-3"
}
}
]
},
{
"data": {
"text": "子节点2-1-3",
}
}
]
}, },
{ }, {
"data": {
"text": "子节点",
},
"children": [{
"data": { "data": {
"text": "子节点2-2", "text": "子节点",
}, },
"children": [ }, {
{ "data": {
"data": { "text": "子节点",
"text": "子节点2-1-1", },
} }, {
}, "data": {
{ "text": "子节点",
"data": { },
"text": "子节点2-1-2", }, {
}, "data": {
"children": [ "text": "子节点",
{ },
"data": { }]
"text": "子节点2-1-2-1", }, {
} "data": {
}, "text": "子节点",
{ },
"data": { }, {
"text": "子节点2-1-2-2", "data": {
}, "text": "子节点",
"children": [ },
{ }]
"data": {
"text": "子节点2-1-2-2-1",
}
},
{
"data": {
"text": "子节点2-1-2-2-2"
}
},
{
"data": {
"text": "子节点2-1-2-2-3",
}
}
]
},
{
"data": {
"text": "子节点4-1-2-3"
}
}
]
},
{
"data": {
"text": "子节点2-1-3",
}
}
]
}
]
}, },
{ {
"data": { "data": {
"text": "二级节点3", "text": "二级节点3",
"expand": true,
}, },
"children": [ "children": [{
{ "data": {
"data": { "text": "子节点",
"text": "子节点3-1",
},
"children": [
{
"data": {
"text": "子节点2-1-1",
}
},
{
"data": {
"text": "子节点2-1-2",
},
"children": [
{
"data": {
"text": "子节点2-1-2-1",
}
},
{
"data": {
"text": "子节点2-1-2-2",
},
"children": [
{
"data": {
"text": "子节点2-1-2-2-1",
}
},
{
"data": {
"text": "子节点2-1-2-2-2"
}
},
{
"data": {
"text": "子节点2-1-2-2-3",
}
}
]
},
{
"data": {
"text": "子节点4-1-2-3"
}
}
]
},
{
"data": {
"text": "子节点2-1-3",
}
}
]
}, },
{ "children": [{
"data": { "data": {
"text": "子节点3-2" "text": "子节点",
} },
} }, {
] "data": {
"text": "子节点",
},
"children": [{
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}]
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}]
}]
}, },
{ {
"data": { "data": {
"text": "二级节点4", "text": "二级节点4",
"expand": true,
}, },
"children": [ "children": [{
{ "data": {
"data": { "text": "子节点",
"text": "子节点4-1",
},
"children": [
{
"data": {
"text": "子节点4-1-1",
},
"children": [
{
"data": {
"text": "子节点2-1-1",
}
},
{
"data": {
"text": "子节点2-1-2",
},
"children": [
{
"data": {
"text": "子节点2-1-2-1",
}
},
{
"data": {
"text": "子节点2-1-2-2",
},
"children": [
{
"data": {
"text": "子节点2-1-2-2-1",
}
},
{
"data": {
"text": "子节点2-1-2-2-2"
}
},
{
"data": {
"text": "子节点2-1-2-2-3",
}
}
]
},
{
"data": {
"text": "子节点4-1-2-3"
}
}
]
},
{
"data": {
"text": "子节点2-1-3",
}
}
]
},
{
"data": {
"text": "子节点4-1-2",
}
},
{
"data": {
"text": "子节点4-1-3"
}
}
]
}, },
{ "children": [{
"data": { "data": {
"text": "子节点4-2", "text": "子节点",
} },
} "children": [{
] "data": {
} "text": "子节点",
},
"children": [{
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}]
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}]
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
"children": [{
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
"children": [{
"data": {
"text": "子节点",
},
"children": [{
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}]
}, {
"data": {
"text": "子节点",
},
"children": [{
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
"children": [{
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}]
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}]
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}]
}]
}, {
"data": {
"text": "子节点",
},
"children": [{
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
"children": [{
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
"children": [{
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}]
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}]
}, {
"data": {
"text": "子节点",
},
"children": [{
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}]
}, {
"data": {
"text": "子节点",
},
"children": [{
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}, {
"data": {
"text": "子节点",
},
}]
}]
}]
}]
},
] ]
}, },
"theme": { "theme": {

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

@ -7,7 +7,7 @@ import Style from './src/Style'
import KeyCommand from './src/KeyCommand' import KeyCommand from './src/KeyCommand'
import Command from './src/Command' import Command from './src/Command'
import BatchExecution from './src/BatchExecution' import BatchExecution from './src/BatchExecution'
import Export from './src/Export'; import Export from './src/Export'
import { import {
SVG SVG
} from '@svgdotjs/svg.js' } from '@svgdotjs/svg.js'
@ -101,10 +101,10 @@ class MindMap {
this.batchExecution = new BatchExecution() this.batchExecution = new BatchExecution()
// 初始渲染 // 初始渲染
this.renderer.render() this.reRender()
setTimeout(() => { setTimeout(() => {
this.command.addHistory() this.command.addHistory()
}, 0); }, 0)
} }
/** /**
@ -128,12 +128,26 @@ class MindMap {
* javascript comment * javascript comment
* @Author: 王林25 * @Author: 王林25
* @Date: 2021-04-06 18:47:29 * @Date: 2021-04-06 18:47:29
* @Desc: 渲染 * @Desc: 渲染，部分渲染
*/ */
render() { render() {
this.batchExecution.push('render', () => {
this.initTheme()
this.renderer.reRender = false
this.renderer.render()
})
}
/**
* @Author: 王林
* @Date: 2021-07-08 22:05:11
* @Desc: 重新渲染
*/
reRender() {
this.batchExecution.push('render', () => { this.batchExecution.push('render', () => {
this.draw.clear() this.draw.clear()
this.initTheme() this.initTheme()
this.renderer.reRender = true
this.renderer.render() this.renderer.render()
}) })
} }
@ -184,7 +198,7 @@ class MindMap {
*/ */
setTheme(theme) { setTheme(theme) {
this.opt.theme = theme this.opt.theme = theme
this.render() this.reRender()
} }
/** /**
@ -193,7 +207,7 @@ class MindMap {
* @Desc: 获取当前主题 * @Desc: 获取当前主题
*/ */
getTheme() { getTheme() {
return this.opt.theme; return this.opt.theme
} }
/** /**
@ -203,7 +217,7 @@ class MindMap {
*/ */
setThemeConfig(config) { setThemeConfig(config) {
this.opt.themeConfig = config this.opt.themeConfig = config
this.render() this.reRender()
} }
/** /**
@ -231,7 +245,7 @@ class MindMap {
*/ */
async export(...args) { async export(...args) {
let result = await this.doExport.export(...args) let result = await this.doExport.export(...args)
return result; return result
} }
} }

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

@ -1,16 +1,18 @@
import Style from './Style' import Style from './Style'
import { import {
resizeImgSize, resizeImgSize
copyRenderTree,
imgToDataUrl
} from './utils' } from './utils'
import { import {
Image, Image,
SVG, SVG,
Circle Circle,
A,
G,
Rect,
Text
} from '@svgdotjs/svg.js' } from '@svgdotjs/svg.js'
import btnsSvg from './svg/btns' import btnsSvg from './svg/btns'
import iconsSvg from './svg/icons'; import iconsSvg from './svg/icons'
/** /**
* javascript comment * javascript comment
@ -48,8 +50,6 @@ class Node {
this.width = opt.width || 0 this.width = opt.width || 0
// 节点高 // 节点高
this.height = opt.height || 0 this.height = opt.height || 0
// 节点文字内容部分高
this._textContentHeight = 0
// left // left
this.left = opt.left || 0 this.left = opt.left || 0
// top // top
@ -60,18 +60,47 @@ class Node {
this.children = opt.children || [] this.children = opt.children || []
// 节点内容的容器 // 节点内容的容器
this.group = null this.group = null
// 节点内容是否发生了变化，是的话会重新计算和渲染 // 节点内容对象
this.changed = true this._imgData = null
// 文本节点 this._iconData = null
this.textNode = null this._textData = null
this._hyperlinkData = null
this._tagData = null
this._noteData = null
this._expandBtn = null
this._lines = []
// 尺寸信息
this._rectInfo = {
imgContentWidth: 0,
imgContentHeight: 0,
textContentHeight: 0,
textContentHeight: 0
}
// icon间距 // icon间距
this._textContentItemMargin = 2 this._textContentItemMargin = 2
// 图片和文字节点的间距 // 图片和文字节点的间距
this._blockContentMargin = 5 this._blockContentMargin = 5
// 展开收缩按钮尺寸 // 展开收缩按钮尺寸
this._expandBtnSize = 20 this._expandBtnSize = 20
// 计算节点尺寸 // 初始渲染
this.refreshSize() this._initRender = true
// 初始化
this.createNodeData()
this.getSize()
}
/**
* @Author: 王林
* @Date: 2021-07-05 23:11:39
* @Desc: 复位部分布局时会重新设置的数据
*/
reset() {
this.children = []
this.parent = null
this.isRoot = false
this.layerIndex = 0
this.left = 0
this.top = 0
} }
/** /**
@ -82,7 +111,8 @@ class Node {
handleData(data) { handleData(data) {
data.data.expand = data.data.expand === false ? false : true data.data.expand = data.data.expand === false ? false : true
data.data.isActive = data.data.isActive === true ? true : false data.data.isActive = data.data.isActive === true ? true : false
return data; data.children = data.children || []
return data
} }
/** /**
@ -95,22 +125,84 @@ class Node {
this.children.push(node) this.children.push(node)
} }
/**
* @Author: 王林
* @Date: 2021-07-06 22:08:09
* @Desc: 创建节点的各个内容对象数据
*/
createNodeData() {
this._imgData = this.createImgNode()
this._iconData = this.createIconNode()
this._textData = this.createTextNode()
this._hyperlinkData = this.createHyperlinkNode()
this._tagData = this.createTagNode()
this._noteData = this.createNoteNode()
}
/**
* @Author: 王林
* @Date: 2021-07-10 09:20:02
* @Desc: 解绑所有事件
*/
removeAllEvent() {
if (this._noteData) {
this._noteData.node.off(['mouseover', 'mouseout'])
}
if (this._expandBtn) {
this._expandBtn.off(['mouseover', 'mouseout', 'click'])
}
if (this.group) {
this.group.off(['click', 'dblclick'])
}
}
/**
* @Author: 王林
* @Date: 2021-07-07 21:27:24
* @Desc: 移除节点内容
*/
removeAllNode() {
// 节点内的内容
;[this._imgData, this._iconData, this._textData, this._hyperlinkData, this._tagData, this._noteData].forEach((item) => {
if (item && item.node) item.node.remove()
})
this._imgData = null
this._iconData = null
this._textData = null
this._hyperlinkData = null
this._tagData = null
this._noteData = null
// 展开收缩按钮
if (this._expandBtn) {
this._expandBtn.remove()
this._expandBtn = null
}
// 组
if (this.group) {
this.group.clear()
this.group.remove()
this.group = null
}
}
/** /**
* javascript comment * javascript comment
* @Author: 王林25 * @Author: 王林25
* @Date: 2021-04-09 09:46:23 * @Date: 2021-04-09 09:46:23
* @Desc: 刷新节点的宽高 * @Desc: 计算节点的宽高
*/ */
refreshSize() { getSize() {
if (!this.changed) { this.removeAllNode()
return; this.createNodeData()
}
let { let {
width, width,
height height
} = this.getNodeRect() } = this.getNodeRect()
// 判断节点尺寸是否有变化
let changed = this.width !== width || this.height !== height
this.width = width this.width = width
this.height = height this.height = height
return changed
} }
/** /**
@ -126,50 +218,42 @@ class Node {
let textContentWidth = 0 let textContentWidth = 0
let textContentHeight = 0 let textContentHeight = 0
// 存在图片 // 存在图片
let imgObj = this.createImgNode() if (this._imgData) {
if (imgObj) { this._rectInfo.imgContentWidth = imgContentWidth = this._imgData.width
imgContentWidth = imgObj.width this._rectInfo.imgContentHeight = imgContentHeight = this._imgData.height
imgContentHeight = imgObj.height
} }
// 图标 // 图标
let iconObjs = this.createIconNode() if (this._iconData.length > 0) {
if (iconObjs.length > 0) { textContentWidth += this._iconData.reduce((sum, cur) => {
textContentWidth += iconObjs.reduce((sum, cur) => {
textContentHeight = Math.max(textContentHeight, cur.height) textContentHeight = Math.max(textContentHeight, cur.height)
return sum += cur.width + this._textContentItemMargin return sum += cur.width + this._textContentItemMargin
}, 0) }, 0)
} }
// 文字 // 文字
let textObj = this.createTextNode() if (this._textData) {
if (textObj) { textContentWidth += this._textData.width
textContentWidth += textObj.width textContentHeight = Math.max(textContentHeight, this._textData.height)
textContentHeight = Math.max(textContentHeight, textObj.height)
} }
// 超链接 // 超链接
let hyperlinkObj = this.createHyperlinkNode() if (this._hyperlinkData) {
if (hyperlinkObj) { textContentWidth += this._hyperlinkData.width
textContentWidth += hyperlinkObj.width textContentHeight = Math.max(textContentHeight, this._hyperlinkData.height)
textContentHeight = Math.max(textContentHeight, hyperlinkObj.height)
hyperlinkObj.node.remove()
} }
// 标签 // 标签
let tagObjs = this.createTagNode() if (this._tagData.length > 0) {
if (tagObjs.length > 0) { textContentWidth += this._tagData.reduce((sum, cur) => {
textContentWidth += tagObjs.reduce((sum, cur) => {
textContentHeight = Math.max(textContentHeight, cur.height) textContentHeight = Math.max(textContentHeight, cur.height)
cur.node.remove()
return sum += cur.width + this._textContentItemMargin return sum += cur.width + this._textContentItemMargin
}, 0) }, 0)
} }
// 备注 // 备注
let noteObj = this.createNoteNode() if (this._noteData) {
if (noteObj) { textContentWidth += this._noteData.width
textContentWidth += noteObj.width textContentHeight = Math.max(textContentHeight, this._noteData.height)
textContentHeight = Math.max(textContentHeight, noteObj.height)
noteObj.node.remove()
} }
// 文字内容部分的高度 // 文字内容部分的尺寸
this._textContentHeight = textContentHeight this._rectInfo.textContentWidth = textContentWidth
this._rectInfo.textContentHeight = textContentHeight
// 间距 // 间距
let margin = imgContentHeight > 0 && textContentHeight > 0 ? this._blockContentMargin : 0 let margin = imgContentHeight > 0 && textContentHeight > 0 ? this._blockContentMargin : 0
let { paddingX, paddingY } = this.getPaddingVale() let { paddingX, paddingY } = this.getPaddingVale()
@ -221,7 +305,7 @@ class Node {
createIconNode() { createIconNode() {
let _data = this.nodeData.data let _data = this.nodeData.data
if (!_data.icon || _data.icon.length <= 0) { if (!_data.icon || _data.icon.length <= 0) {
return []; return []
} }
let iconSize = this.themeConfig.iconSize let iconSize = this.themeConfig.iconSize
return _data.icon.map((item) => { return _data.icon.map((item) => {
@ -229,8 +313,8 @@ class Node {
node: SVG(iconsSvg.getNodeIconListIcon(item)).size(iconSize, iconSize), node: SVG(iconsSvg.getNodeIconListIcon(item)).size(iconSize, iconSize),
width: iconSize, width: iconSize,
height: iconSize height: iconSize
}; }
}); })
} }
/** /**
@ -240,16 +324,21 @@ class Node {
* @Desc: 创建文本节点 * @Desc: 创建文本节点
*/ */
createTextNode() { createTextNode() {
let node = this.draw.text(this.nodeData.data.text || '') let g = new G()
this.style.text(node) let fontSize = this.getStyle('fontSize', this.isRoot, this.nodeData.data.isActive)
let lineHeight = this.getStyle('lineHeight', this.isRoot, this.nodeData.data.isActive)
this.nodeData.data.text.split(/\n/img).forEach((item, index) => {
let node = new Text().text(item)
this.style.text(node)
node.y(fontSize * lineHeight * index)
g.add(node)
})
let { let {
width, width,
height height
} = node.bbox() } = g.bbox()
let cloneNode = node.clone()
node.remove()
return { return {
node: cloneNode, node: g,
width, width,
height height
} }
@ -266,19 +355,24 @@ class Node {
return return
} }
let iconSize = this.themeConfig.iconSize let iconSize = this.themeConfig.iconSize
let node = this.draw.link(hyperlink).target('_blank') let node = new SVG()
node.node.addEventListener('click', (e) => { // 超链接节点
let a = new A().to(hyperlink).target('_blank')
a.node.addEventListener('click', (e) => {
e.stopPropagation() e.stopPropagation()
}) })
if (hyperlinkTitle) { if (hyperlinkTitle) {
node.attr('title', hyperlinkTitle) a.attr('title', hyperlinkTitle)
} }
node.rect(iconSize, iconSize).fill({ color: 'transparent' }) // 添加一个透明的层，作为鼠标区域
a.rect(iconSize, iconSize).fill({ color: 'transparent' })
// 超链接图标
let iconNode = SVG(iconsSvg.hyperlink).size(iconSize, iconSize) let iconNode = SVG(iconsSvg.hyperlink).size(iconSize, iconSize)
this.style.iconNode(iconNode) this.style.iconNode(iconNode)
node.add(iconNode) a.add(iconNode)
node.add(a)
return { return {
node: node, node,
width: iconSize, width: iconSize,
height: iconSize height: iconSize
} }
@ -292,29 +386,29 @@ class Node {
createTagNode() { createTagNode() {
let tagData = this.nodeData.data.tag let tagData = this.nodeData.data.tag
if (!tagData || tagData.length <= 0) { if (!tagData || tagData.length <= 0) {
return []; return []
} }
let nodes = [] let nodes = []
tagData.slice(0, this.mindMap.opt.maxTag).forEach((item, index) => { tagData.slice(0, this.mindMap.opt.maxTag).forEach((item, index) => {
let tag = this.draw.group() let tag = new G()
let text = this.draw.text(item).x(8).cy(10) // 标签文本
let text = new Text().text(item).x(8).cy(10)
this.style.tagText(text, index) this.style.tagText(text, index)
let { let {
width, width,
height height
} = text.bbox() } = text.bbox()
let cloneText = text.clone() // 标签矩形
text.remove() let rect = new Rect().size(width + 16, 20)
let rect = this.draw.rect(width + 16, 20)
this.style.tagRect(rect, index) this.style.tagRect(rect, index)
tag.add(rect).add(cloneText) tag.add(rect).add(text)
nodes.push({ nodes.push({
node: tag, node: tag,
width: width + 16, width: width + 16,
height: 20 height: 20
}) })
}) })
return nodes; return nodes
} }
/** /**
@ -324,14 +418,17 @@ class Node {
*/ */
createNoteNode() { createNoteNode() {
if (!this.nodeData.data.note) { if (!this.nodeData.data.note) {
return null; return null
} }
let node = this.draw.group().attr('cursor', 'pointer')
let iconSize = this.themeConfig.iconSize let iconSize = this.themeConfig.iconSize
node.add(this.draw.rect(iconSize, iconSize).fill({ color: 'transparent' })) let node = new SVG().attr('cursor', 'pointer')
// 透明的层，用来作为鼠标区域
node.add(new Rect().size(iconSize, iconSize).fill({ color: 'transparent' }))
// 备注图标
let iconNode = SVG(iconsSvg.note).size(iconSize, iconSize) let iconNode = SVG(iconsSvg.note).size(iconSize, iconSize)
this.style.iconNode(iconNode) this.style.iconNode(iconNode)
node.add(iconNode) node.add(iconNode)
// 备注tooltip
let el = document.createElement('div') let el = document.createElement('div')
el.style.cssText = ` el.style.cssText = `
position: absolute; position: absolute;
@ -356,47 +453,43 @@ class Node {
node, node,
width: iconSize, width: iconSize,
height: iconSize height: iconSize
}; }
} }
/** /**
* javascript comment * javascript comment
* @Author: 王林25 * @Author: 王林25
* @Date: 2021-04-09 11:10:11 * @Date: 2021-04-09 11:10:11
* @Desc: 创建内容节点 * @Desc: 定位节点内容
*/ */
createNode() { layout() {
let { let {
left,
top,
width, width,
height, height,
_textContentHeight,
_textContentItemMargin _textContentItemMargin
} = this } = this
let { paddingY } = this.getPaddingVale() let { paddingY } = this.getPaddingVale()
// 创建组 // 创建组
this.group = this.draw.group() this.group = new G()
this.updatePos(false)
// 节点矩形 // 节点矩形
this.style.rect(this.group.rect(width, height).x(left).y(top)) this.style.rect(this.group.rect(width, height))
// 图片节点 // 图片节点
let imgObj = this.createImgNode()
let imgHeight = 0 let imgHeight = 0
if (imgObj) { if (this._imgData) {
imgHeight = imgObj.height imgHeight = this._imgData.height
this.group.add(imgObj.node) this.group.add(this._imgData.node)
imgObj.node.cx(left + width / 2).y(top + paddingY) this._imgData.node.cx(width / 2).y(paddingY)
} }
// 内容节点 // 内容节点
let textContentNested = this.draw.group() let textContentNested = new G()
let textContentOffsetX = 0 let textContentOffsetX = 0
// icon // icon
let iconObjs = this.createIconNode() let iconNested = new G()
let iconNested = this.draw.group() if (this._iconData && this._iconData.length > 0) {
if (iconObjs && iconObjs.length > 0) {
let iconLeft = 0 let iconLeft = 0
iconObjs.forEach((item) => { this._iconData.forEach((item) => {
item.node.x(textContentOffsetX + iconLeft).y((_textContentHeight - item.height) / 2) item.node.x(textContentOffsetX + iconLeft).y((this._rectInfo.textContentHeight - item.height) / 2)
iconNested.add(item.node) iconNested.add(item.node)
iconLeft += item.width + _textContentItemMargin iconLeft += item.width + _textContentItemMargin
}) })
@ -404,27 +497,23 @@ class Node {
textContentOffsetX += iconLeft textContentOffsetX += iconLeft
} }
// 文字 // 文字
let textObj = this.createTextNode() if (this._textData) {
if (textObj) { this._textData.node.x(textContentOffsetX).y(0)
textObj.node.x(textContentOffsetX).y(0) textContentNested.add(this._textData.node)
this.textNode = textObj textContentOffsetX += this._textData.width + _textContentItemMargin
textContentNested.add(textObj.node)
textContentOffsetX += textObj.width + _textContentItemMargin
} }
// 超链接 // 超链接
let hyperlinkObj = this.createHyperlinkNode() if (this._hyperlinkData) {
if (hyperlinkObj) { this._hyperlinkData.node.x(textContentOffsetX).y((this._rectInfo.textContentHeight - this._hyperlinkData.height) / 2)
hyperlinkObj.node.translate(textContentOffsetX, (_textContentHeight - hyperlinkObj.height) / 2) textContentNested.add(this._hyperlinkData.node)
textContentNested.add(hyperlinkObj.node) textContentOffsetX += this._hyperlinkData.width + _textContentItemMargin
textContentOffsetX += hyperlinkObj.width + _textContentItemMargin
} }
// 标签 // 标签
let tagObjs = this.createTagNode() let tagNested = new G()
let tagNested = this.draw.group() if (this._tagData && this._tagData.length > 0) {
if (tagObjs && tagObjs.length > 0) {
let tagLeft = 0 let tagLeft = 0
tagObjs.forEach((item) => { this._tagData.forEach((item) => {
item.node.x(textContentOffsetX + tagLeft).y((_textContentHeight - item.height) / 2) item.node.x(textContentOffsetX + tagLeft).y((this._rectInfo.textContentHeight - item.height) / 2)
tagNested.add(item.node) tagNested.add(item.node)
tagLeft += item.width + _textContentItemMargin tagLeft += item.width + _textContentItemMargin
}) })
@ -432,79 +521,91 @@ class Node {
textContentOffsetX += tagLeft textContentOffsetX += tagLeft
} }
// 备注 // 备注
let noteObj = this.createNoteNode() if (this._noteData) {
if (noteObj) { this._noteData.node.x(textContentOffsetX).y((this._rectInfo.textContentHeight - this._noteData.height) / 2)
noteObj.node.translate(textContentOffsetX, (_textContentHeight - noteObj.height) / 2) textContentNested.add(this._noteData.node)
textContentNested.add(noteObj.node) textContentOffsetX += this._noteData.width
textContentOffsetX += noteObj.width
} }
// 文字内容整体 // 文字内容整体
textContentNested.translate( textContentNested.translate(
left + width / 2 - textContentNested.bbox().width / 2, width / 2 - textContentNested.bbox().width / 2,
top + imgHeight + paddingY + (imgHeight > 0 && _textContentHeight > 0 ? this._blockContentMargin : 0) imgHeight + paddingY + (imgHeight > 0 && this._rectInfo.textContentHeight > 0 ? this._blockContentMargin : 0)
) )
this.group.add(textContentNested) this.group.add(textContentNested)
// 单击事件，选中节点 // 单击事件，选中节点
this.group.click((e) => { this.group.on('click', (e) => {
e.stopPropagation() this.active(e)
if (this.nodeData.data.isActive) {
return;
}
this.mindMap.emit('before_node_active', this, this.renderer.activeNodeList)
this.renderer.clearActive()
this.mindMap.execCommand('UPDATE_NODE_DATA', this, {
isActive: !this.nodeData.data.isActive
})
this.renderNode()
this.renderer.activeNodeList.push(this)
this.mindMap.emit('node_active', this, this.renderer.activeNodeList)
}) })
// 双击事件 // 双击事件
this.group.dblclick(() => { this.group.on('dblclick', () => {
this.mindMap.emit('node_dblclick', this) this.mindMap.emit('node_dblclick', this)
}) })
} }
/**
* @Author: 王林
* @Date: 2021-07-10 16:44:22
* @Desc: 激活节点
*/
active(e) {
e.stopPropagation()
if (this.nodeData.data.isActive) {
return
}
this.mindMap.emit('before_node_active', this, this.renderer.activeNodeList)
this.renderer.clearActive()
this.mindMap.execCommand('SET_NODE_ACTIVE', this, !this.nodeData.data.isActive)
this.renderer.activeNodeList.push(this)
this.mindMap.emit('node_active', this, this.renderer.activeNodeList)
}
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-07-04 20:20:09 * @Date: 2021-07-04 20:20:09
* @Desc: 渲染节点到画布 * @Desc: 渲染节点到画布，会移除旧的，创建新的
*/ */
renderNode() { renderNode() {
if (this.group) { this.removeAllEvent()
this.group.remove() this.removeAllNode()
} this.createNodeData()
this.createNode() this.layout()
this.renderExpandBtn()
this.draw.add(this.group) this.draw.add(this.group)
} }
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-07-04 22:47:01 * @Date: 2021-07-04 22:47:01
* @Desc: 更新整体位置 * @Desc: 更新节点位置
*/ */
updatePos() { updatePos(animate = true) {
if (!this.group) {
return;
}
let t = this.group.transform()
if (animate) {
this.group.animate(300).translate(this.left - t.translateX, this.top - t.translateY)
} else {
this.group.translate(this.left - t.translateX, this.top - t.translateY)
}
} }
/** /**
* javascript comment * javascript comment
* @Author: 王林25 * @Author: 王林25
* @Date: 2021-04-07 13:55:58 * @Date: 2021-04-07 13:55:58
* @Desc: 渲染 * @Desc: 递归渲染
*/ */
render() { render() {
// 连线 // 连线
this.renderLine() this.renderLine()
// 按钮
this.renderExpandBtn()
// 节点 // 节点
if (this.changed) { if (this._initRender) {
this._initRender = false
this.renderNode() this.renderNode()
} else { } else {
this.updatePos() this.updatePos()
} }
this.changed = false
// 子节点 // 子节点
if (this.children && this.children.length && this.nodeData.data.expand !== false) { if (this.children && this.children.length && this.nodeData.data.expand !== false) {
this.children.forEach((child) => { this.children.forEach((child) => {
@ -513,6 +614,24 @@ class Node {
} }
} }
/**
* @Author: 王林
* @Date: 2021-07-10 09:24:55
* @Desc: 递归删除
*/
remove() {
this._initRender = true
this.removeAllEvent()
this.removeAllNode()
this.removeLine()
// 子节点
if (this.children && this.children.length) {
this.children.forEach((child) => {
child.remove()
})
}
}
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-04-10 22:01:53 * @Date: 2021-04-10 22:01:53
@ -520,24 +639,50 @@ class Node {
*/ */
renderLine() { renderLine() {
if (this.nodeData.data.expand === false) { if (this.nodeData.data.expand === false) {
return; return
} }
let lines = this.renderer.layout.renderLine(this) let childrenLen = this.nodeData.children.length
lines.forEach((line) => { if (childrenLen > this._lines.length) {
// 创建缺少的线
new Array(childrenLen - this._lines.length).fill(0).forEach(() => {
this._lines.push(this.draw.path())
})
} else if (childrenLen < this._lines.length) {
// 删除多余的线
this._lines.slice(childrenLen).forEach((line) => {
line.remove()
})
this._lines = this._lines.slice(0, childrenLen)
}
// 画线
this.renderer.layout.renderLine(this, this._lines)
// 添加样式
this._lines.forEach((line) => {
this.style.line(line) this.style.line(line)
}) })
} }
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-04-11 19:47:01 * @Date: 2021-07-10 16:40:21
* @Desc: 展开收缩按钮 * @Desc: 移除连线
*/ */
renderExpandBtn() { removeLine() {
if (this.children.length <= 0 || this.isRoot) { this._lines.forEach((line) => {
return; line.remove()
})
this._lines = []
}
/**
* @Author: 王林
* @Date: 2021-07-10 17:59:14
* @Desc: 创建或更新展开收缩按钮内容
*/
updateExpandBtnNode() {
if (this._expandBtn) {
this._expandBtn.clear()
} }
let g = this.draw.group()
let iconSvg let iconSvg
if (this.nodeData.data.expand === false) { if (this.nodeData.data.expand === false) {
iconSvg = btnsSvg.open iconSvg = btnsSvg.open
@ -546,29 +691,43 @@ class Node {
} }
let node = SVG(iconSvg).size(this._expandBtnSize, this._expandBtnSize) let node = SVG(iconSvg).size(this._expandBtnSize, this._expandBtnSize)
let fillNode = new Circle().size(this._expandBtnSize) let fillNode = new Circle().size(this._expandBtnSize)
this.renderer.layout.renderExpandBtn(this, [node, fillNode]) node.x(0).y(-this._expandBtnSize / 2)
node.dx(0).dy(-10) fillNode.x(0).y(-this._expandBtnSize / 2)
fillNode.dx(0).dy(-10)
this.style.iconBtn(node, fillNode) this.style.iconBtn(node, fillNode)
g.mouseover(() => { this._expandBtn.add(fillNode).add(node)
g.css({ }
/**
* @Author: 王林
* @Date: 2021-04-11 19:47:01
* @Desc: 展开收缩按钮
*/
renderExpandBtn() {
if (!this.nodeData.children || this.nodeData.children.length <= 0 || this.isRoot) {
return
}
this._expandBtn = new G()
this.updateExpandBtnNode()
this._expandBtn.on('mouseover', (e) => {
e.stopPropagation()
this._expandBtn.css({
cursor: 'pointer' cursor: 'pointer'
}) })
}) })
g.mouseout(() => { this._expandBtn.on('mouseout', (e) => {
g.css({ e.stopPropagation()
this._expandBtn.css({
cursor: 'auto' cursor: 'auto'
}) })
}) })
g.click(() => { this._expandBtn.on('click', (e) => {
e.stopPropagation()
// 展开收缩 // 展开收缩
this.mindMap.execCommand('UPDATE_NODE_DATA', this, { this.mindMap.execCommand('SET_NODE_EXPAND', this, !this.nodeData.data.expand)
expand: !this.mindMap.nodeData.data.expand
}, children)
this.mindMap.emit('expand_btn_click', this) this.mindMap.emit('expand_btn_click', this)
}) })
g.add(fillNode) this.group.add(this._expandBtn)
g.add(node) this.renderer.layout.renderExpandBtn(this, this._expandBtn)
} }
/** /**
@ -580,7 +739,7 @@ class Node {
return { return {
paddingX: this.getStyle('paddingX', true, this.nodeData.data.isActive), paddingX: this.getStyle('paddingX', true, this.nodeData.data.isActive),
paddingY: this.getStyle('paddingY', true, this.nodeData.data.isActive) paddingY: this.getStyle('paddingY', true, this.nodeData.data.isActive)
}; }
} }
/** /**
@ -599,19 +758,7 @@ class Node {
* @Desc: 修改某个样式 * @Desc: 修改某个样式
*/ */
setStyle(prop, value, isActive) { setStyle(prop, value, isActive) {
if (isActive) { this.mindMap.execCommand('SET_NODE_STYLE', this, prop, value, isActive)
this.mindMap.execCommand('UPDATE_NODE_DATA', this, {
activeStyle: {
...(this.nodeData.data.activeStyle || {}),
[prop]: value
}
})
} else {
this.mindMap.execCommand('UPDATE_NODE_DATA', this, {
[prop]: value
})
}
this.renderNode()
} }
/** /**
@ -620,7 +767,7 @@ class Node {
* @Desc: 获取数据 * @Desc: 获取数据
*/ */
getData(key) { getData(key) {
return key ? this.nodeData.data[key] || '' : this.nodeData.data; return key ? this.nodeData.data[key] || '' : this.nodeData.data
} }
/** /**
@ -629,7 +776,61 @@ class Node {
* @Desc: 设置数据 * @Desc: 设置数据
*/ */
setData(data = {}) { setData(data = {}) {
this.mindMap.execCommand('UPDATE_NODE_DATA', this, data) this.mindMap.execCommand('SET_NODE_DATA', this, data)
}
/**
* @Author: 王林
* @Date: 2021-07-10 08:41:28
* @Desc: 设置文本
*/
setText(text) {
this.mindMap.execCommand('SET_NODE_TEXT', this, text)
}
/**
* @Author: 王林
* @Date: 2021-07-10 08:42:19
* @Desc: 设置图片
*/
setImage(imgData) {
this.mindMap.execCommand('SET_NODE_IMAGE', this, imgData)
}
/**
* @Author: 王林
* @Date: 2021-07-10 08:47:29
* @Desc: 设置图标
*/
setIcon(icons) {
this.mindMap.execCommand('SET_NODE_ICON', this, icons)
}
/**
* @Author: 王林
* @Date: 2021-07-10 08:50:41
* @Desc: 设置超链接
*/
setHyperlink(link, title) {
this.mindMap.execCommand('SET_NODE_HYPERLINK', this, link, title)
}
/**
* @Author: 王林
* @Date: 2021-07-10 08:53:24
* @Desc: 设置备注
*/
setNote(note) {
this.mindMap.execCommand('SET_NODE_NOTE', this, note)
}
/**
* @Author: 王林
* @Date: 2021-07-10 08:55:08
* @Desc: 设置标签
*/
setTag(tag) {
this.mindMap.execCommand('SET_NODE_TAG', this, tag)
} }
} }

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

@ -34,6 +34,8 @@ class Render {
this.draw = this.mindMap.draw this.draw = this.mindMap.draw
// 渲染树，操作过程中修改的都是这里的数据 // 渲染树，操作过程中修改的都是这里的数据
this.renderTree = merge({}, this.mindMap.opt.data || {}) this.renderTree = merge({}, this.mindMap.opt.data || {})
// 是否重新渲染
this.reRender = false
// 当前激活的节点列表 // 当前激活的节点列表
this.activeNodeList = [] this.activeNodeList = []
// 根节点 // 根节点
@ -70,14 +72,48 @@ class Render {
* @Desc: 注册命令 * @Desc: 注册命令
*/ */
registerCommands() { registerCommands() {
// 插入同级节点
this.insertNode = this.insertNode.bind(this) this.insertNode = this.insertNode.bind(this)
this.mindMap.command.add('INSERT_NODE', this.insertNode) this.mindMap.command.add('INSERT_NODE', this.insertNode)
// 插入子节点
this.insertChildNode = this.insertChildNode.bind(this) this.insertChildNode = this.insertChildNode.bind(this)
this.mindMap.command.add('INSERT_CHILD_NODE', this.insertChildNode) this.mindMap.command.add('INSERT_CHILD_NODE', this.insertChildNode)
// 删除节点
this.removeNode = this.removeNode.bind(this) this.removeNode = this.removeNode.bind(this)
this.mindMap.command.add('REMOVE_NODE', this.removeNode) this.mindMap.command.add('REMOVE_NODE', this.removeNode)
this.updateNodeData = this.updateNodeData.bind(this) // 修改节点样式
this.mindMap.command.add('UPDATE_NODE_DATA', this.updateNodeData) this.setNodeStyle = this.setNodeStyle.bind(this)
this.mindMap.command.add('SET_NODE_STYLE', this.setNodeStyle)
// 切换节点是否激活
this.setNodeActive = this.setNodeActive.bind(this)
this.mindMap.command.add('SET_NODE_ACTIVE', this.setNodeActive)
// 清除所有激活节点
this.clearActive = this.clearActive.bind(this)
this.mindMap.command.add('CLEAR_ACTIVE_NODE', this.clearActive)
// 切换节点是否展开
this.setNodeExpand = this.setNodeExpand.bind(this)
this.mindMap.command.add('SET_NODE_EXPAND', this.setNodeExpand)
// 设置节点数据
this.setNodeData = this.setNodeData.bind(this)
this.mindMap.command.add('SET_NODE_DATA', this.setNodeData)
// 设置节点文本
this.setNodeText = this.setNodeText.bind(this)
this.mindMap.command.add('SET_NODE_TEXT', this.setNodeText)
// 设置节点图片
this.setNodeImage = this.setNodeImage.bind(this)
this.mindMap.command.add('SET_NODE_IMAGE', this.setNodeImage)
// 设置节点图标
this.setNodeIcon = this.setNodeIcon.bind(this)
this.mindMap.command.add('SET_NODE_ICON', this.setNodeIcon)
// 设置节点超链接
this.setNodeHyperlink = this.setNodeHyperlink.bind(this)
this.mindMap.command.add('SET_NODE_HYPERLINK', this.setNodeHyperlink)
// 设置节点备注
this.setNodeNote = this.setNodeNote.bind(this)
this.mindMap.command.add('SET_NODE_NOTE', this.setNodeNote)
// 设置节点标签
this.setNodeTag = this.setNodeTag.bind(this)
this.mindMap.command.add('SET_NODE_TAG', this.setNodeTag)
} }
/** /**
@ -87,7 +123,6 @@ class Render {
* @Desc: 渲染 * @Desc: 渲染
*/ */
render() { render() {
console.log('渲染')
this.root = this.layout.doLayout() this.root = this.layout.doLayout()
this.root.render() this.root.render()
} }
@ -95,18 +130,27 @@ class Render {
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-04-12 22:45:01 * @Date: 2021-04-12 22:45:01
* @Desc: 清楚当前激活的节点 * @Desc: 清除当前激活的节点
*/ */
clearActive() { clearActive() {
this.activeNodeList.forEach((item) => { this.activeNodeList.forEach((item) => {
this.mindMap.execCommand('UPDATE_NODE_DATA', item, { this.mindMap.execCommand('SET_NODE_ACTIVE', item, false)
isActive: false
})
item.renderNode()
}) })
this.activeNodeList = [] this.activeNodeList = []
} }
/**
* @Author: 王林
* @Date: 2021-07-10 10:04:04
* @Desc: 在激活列表里移除某个节点
*/
removeActiveNode(node) {
let index = this.activeNodeList.findIndex((item) => {
return item === node;
})
this.activeNodeList.splice(index, 1)
}
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-05-04 13:46:08 * @Date: 2021-05-04 13:46:08
@ -152,11 +196,12 @@ class Render {
if (this.activeNodeList.length <= 0) { if (this.activeNodeList.length <= 0) {
return; return;
} }
let first = this.activeNodeList[0] let node = this.activeNodeList[0]
if (!first.nodeData.children) { if (!node.nodeData.children) {
first.nodeData.children = [] node.nodeData.children = []
} }
first.nodeData.children.push({ let len = node.nodeData.children.length
node.nodeData.children.push({
"data": { "data": {
"text": "分支主题", "text": "分支主题",
"expand": true "expand": true
@ -164,6 +209,11 @@ class Render {
"children": [] "children": []
}) })
this.mindMap.render() this.mindMap.render()
if (node.isRoot || len <= 0) {
this.mindMap.batchExecution.push('renderNode', () => {
node.renderNode()
})
}
} }
/** /**
@ -177,32 +227,176 @@ class Render {
} }
this.activeNodeList.forEach((item) => { this.activeNodeList.forEach((item) => {
if (item.isRoot) { if (item.isRoot) {
item.children.forEach((child) => {
child.remove()
})
item.children = [] item.children = []
item.nodeData.children = [] item.nodeData.children = []
} else { } else {
this.removeActiveNode(item)
let index = this.getNodeIndex(item) let index = this.getNodeIndex(item)
item.remove()
item.parent.children.splice(index, 1) item.parent.children.splice(index, 1)
item.parent.nodeData.children.splice(index, 1) item.parent.nodeData.children.splice(index, 1)
} }
}) })
this.clearActive()
this.mindMap.render() this.mindMap.render()
} }
/**
* @Author: 王林
* @Date: 2021-07-08 21:54:30
* @Desc: 设置节点样式
*/
setNodeStyle(node, prop, value, isActive) {
let data = {}
if (isActive) {
data = {
activeStyle: {
...(node.nodeData.data.activeStyle || {}),
[prop]: value
}
}
} else {
data = {
[prop]: value
}
}
this.setNodeDataRender(node, data)
}
/**
* @Author: 王林
* @Date: 2021-07-08 22:13:03
* @Desc: 设置节点是否激活
*/
setNodeActive(node, active) {
this.setNodeData(node, {
isActive: active
})
node.renderNode()
}
/**
* @Author: 王林
* @Date: 2021-07-10 16:52:41
* @Desc: 设置节点是否展开
*/
setNodeExpand(node, expand) {
this.setNodeData(node, {
expand
})
if (expand) {// 展开
node.children.forEach((item) => {
item.render()
})
node.renderLine()
node.updateExpandBtnNode()
} else {// 收缩
node.children.forEach((item) => {
item.remove()
})
node.removeLine()
node.updateExpandBtnNode()
}
this.mindMap.render()
}
/**
* @Author: 王林
* @Date: 2021-07-09 22:04:19
* @Desc: 设置节点文本
*/
setNodeText(node, text) {
this.setNodeDataRender(node, {
text
})
}
/**
* @Author: 王林
* @Date: 2021-07-10 08:37:40
* @Desc: 设置节点图片
*/
setNodeImage(node, { url, title, width, height }) {
this.setNodeDataRender(node, {
image: url,
imageTitle: title || '',
imageSize: {
width,
height,
},
})
}
/**
* @Author: 王林
* @Date: 2021-07-10 08:44:06
* @Desc: 设置节点图标
*/
setNodeIcon(node, icons) {
this.setNodeDataRender(node, {
icon: icons
})
}
/**
* @Author: 王林
* @Date: 2021-07-10 08:49:33
* @Desc: 设置节点超链接
*/
setNodeHyperlink(node, link, title = '') {
this.setNodeDataRender(node, {
hyperlink: link,
hyperlinkTitle: title,
})
}
/**
* @Author: 王林
* @Date: 2021-07-10 08:52:59
* @Desc: 设置节点备注
*/
setNodeNote(node, note) {
this.setNodeDataRender(node, {
note
})
}
/**
* @Author: 王林
* @Date: 2021-07-10 08:54:53
* @Desc: 设置节点标签
*/
setNodeTag(node, tag) {
this.setNodeDataRender(node, {
tag
})
}
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-05-04 14:19:48 * @Date: 2021-05-04 14:19:48
* @Desc: 更新节点数据 * @Desc: 更新节点数据
*/ */
updateNodeData(node, data, children) { setNodeData(node, data) {
Object.keys(data).forEach((key) => { Object.keys(data).forEach((key) => {
node.nodeData.data[key] = data[key] node.nodeData.data[key] = data[key]
}) })
if (children) { }
node.nodeData.children = children
/**
* @Author: 王林
* @Date: 2021-07-10 08:45:48
* @Desc: 设置节点数据，并判断是否渲染
*/
setNodeDataRender(node, data) {
this.setNodeData(node, data)
let changed = node.getSize()
node.renderNode()
if (changed) {
this.mindMap.render()
} }
node.changed = true
this.mindMap.render()
} }
} }

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

@ -59,7 +59,7 @@ export default class TextEdit {
* @Desc: 显示文本编辑框 * @Desc: 显示文本编辑框
*/ */
show(node) { show(node) {
this.showEditTextBox(node, node.textNode.node.node.getBoundingClientRect()) this.showEditTextBox(node, node._textData.node.node.getBoundingClientRect())
} }
/** /**
@ -95,10 +95,7 @@ export default class TextEdit {
} }
this.renderer.activeNodeList.forEach((node) => { this.renderer.activeNodeList.forEach((node) => {
let str = getStrWithBrFromHtml(this.textEditNode.innerHTML) let str = getStrWithBrFromHtml(this.textEditNode.innerHTML)
this.mindMap.execCommand('UPDATE_NODE_DATA', node, { this.mindMap.execCommand('SET_NODE_TEXT', node, str)
text: str
})
node.changed = true
this.mindMap.render() this.mindMap.render()
}) })
this.mindMap.emit('hide_text_edit', this.textEditNode, this.renderer.activeNodeList) this.mindMap.emit('hide_text_edit', this.textEditNode, this.renderer.activeNodeList)

41
simple-mind-map/src/layouts/Base.js
View File

@ -1,3 +1,5 @@
import Node from '../Node'
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-04-12 22:24:30 * @Date: 2021-04-12 22:24:30
@ -28,7 +30,6 @@ class Base {
* @Desc: 计算节点位置 * @Desc: 计算节点位置
*/ */
doLayout() { doLayout() {
console.log('布局')
throw new Error('【computed】方法为必要方法，需要子类进行重写！') throw new Error('【computed】方法为必要方法，需要子类进行重写！')
} }
@ -50,6 +51,44 @@ class Base {
throw new Error('【renderExpandBtn】方法为必要方法，需要子类进行重写！') throw new Error('【renderExpandBtn】方法为必要方法，需要子类进行重写！')
} }
/**
* @Author: 王林
* @Date: 2021-07-10 21:30:54
* @Desc: 创建节点实例
*/
createNode(data, parent, isRoot, layerIndex) {
// 创建节点
let newNode = null
// 复用节点
if (data && data._node && !this.renderer.reRender) {
newNode = data._node
newNode.reset()
newNode.layerIndex = layerIndex
} else {// 创建新节点
newNode = new Node({
data,
uid: this.mindMap.uid++,
renderer: this.renderer,
mindMap: this.mindMap,
draw: this.draw,
layerIndex
})
newNode.getSize()
// 数据关联实际节点
data._node = newNode
}
// 根节点
if (isRoot) {
newNode.isRoot = true
this.root = newNode
} else {
// 互相收集
newNode.parent = parent._node
parent._node.addChildren(newNode)
}
return newNode;
}
/** /**
* javascript comment * javascript comment
* @Author: 王林25 * @Author: 王林25

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

@ -2,7 +2,6 @@ import Base from './Base';
import { import {
walk walk
} from '../utils' } from '../utils'
import Node from '../Node'
/** /**
* @Author: 王林 * @Author: 王林
@ -44,48 +43,25 @@ class LogicalStructure extends Base {
*/ */
computedBaseValue() { computedBaseValue() {
walk(this.renderTree, null, (cur, parent, isRoot, layerIndex) => { walk(this.renderTree, null, (cur, parent, isRoot, layerIndex) => {
// 创建节点 let newNode = this.createNode(cur, parent, isRoot, layerIndex)
let newNode = null
if (cur && cur._node) {
newNode = cur._node
newNode.children = []
newNode.parent = null
if (cur._node.changed) {
newNode.refreshSize()
}
} else {
newNode = new Node({
data: cur,
uid: this.mindMap.uid++,
renderer: this.renderer,
mindMap: this.mindMap,
draw: this.draw,
layerIndex
})
// 数据关联实际节点
cur._node = newNode
}
// 根节点定位在画布中心位置 // 根节点定位在画布中心位置
if (isRoot) { if (isRoot) {
newNode.isRoot = true
newNode.left = (this.mindMap.width - newNode.width) / 2 newNode.left = (this.mindMap.width - newNode.width) / 2
newNode.top = (this.mindMap.height - newNode.height) / 2 newNode.top = (this.mindMap.height - newNode.height) / 2
this.root = newNode
} else { } else {
// 非根节点 // 非根节点
let marginX = layerIndex === 1 ? this.mindMap.themeConfig.second.marginX : this.mindMap.themeConfig.node.marginX
// 定位到父节点右侧 // 定位到父节点右侧
newNode.left = parent._node.left + parent._node.width + marginX newNode.left = parent._node.left + parent._node.width + this.getMarginX(layerIndex)
// 互相收集 }
newNode.parent = parent._node if (!cur.data.expand) {
parent._node.addChildren(newNode) return true;
} }
}, (cur, parent, isRoot, layerIndex) => { }, (cur, parent, isRoot, layerIndex) => {
// 返回时计算节点的areaHeight，也就是子节点所占的高度之和，包括外边距 // 返回时计算节点的areaHeight，也就是子节点所占的高度之和，包括外边距
let len = cur.data.expand === false ? 0 : cur._node.children.length let len = cur.data.expand === false ? 0 : cur._node.children.length
cur._node.childrenAreaHeight = len ? cur._node.children.reduce((h, item) => { cur._node.childrenAreaHeight = len ? cur._node.children.reduce((h, item) => {
return h + item.height return h + item.height
}, 0) + (len + 1) * this.getMarginY(layerIndex) : 0 }, 0) + (len + 1) * this.getMarginY(layerIndex + 1) : 0
}, true, 0) }, true, 0)
} }
@ -97,8 +73,8 @@ class LogicalStructure extends Base {
*/ */
computedTopValue() { computedTopValue() {
walk(this.root, null, (node, parent, isRoot, layerIndex) => { walk(this.root, null, (node, parent, isRoot, layerIndex) => {
if (node.children && node.children.length) { if (node.nodeData.data.expand && node.children && node.children.length) {
let marginY = this.getMarginY(layerIndex) let marginY = this.getMarginY(layerIndex + 1)
// 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半 // 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半
let top = node.top + node.height / 2 - node.childrenAreaHeight / 2 let top = node.top + node.height / 2 - node.childrenAreaHeight / 2
let totalTop = top + marginY let totalTop = top + marginY
@ -118,8 +94,11 @@ class LogicalStructure extends Base {
*/ */
adjustTopValue() { adjustTopValue() {
walk(this.root, null, (node, parent, isRoot, layerIndex) => { walk(this.root, null, (node, parent, isRoot, layerIndex) => {
if (!node.nodeData.data.expand) {
return;
}
// 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置 // 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
let difference = node.childrenAreaHeight - this.getMarginY(layerIndex) - node.height let difference = node.childrenAreaHeight - this.getMarginY(layerIndex + 1) - node.height
if (difference > 0) { if (difference > 0) {
this.updateBrothers(node, difference / 2) this.updateBrothers(node, difference / 2)
} }
@ -162,7 +141,7 @@ class LogicalStructure extends Base {
* @Date: 2021-04-11 14:42:48 * @Date: 2021-04-11 14:42:48
* @Desc: 绘制连线，连接该节点到其子节点 * @Desc: 绘制连线，连接该节点到其子节点
*/ */
renderLine(node) { renderLine(node, lines) {
if (node.children.length <= 0) { if (node.children.length <= 0) {
return []; return [];
} }
@ -172,12 +151,7 @@ class LogicalStructure extends Base {
width, width,
height height
} = node } = node
let lines = [] node.children.forEach((item, index) => {
if (!node.isRoot) {
let line = this.draw.line(left + width, top + height / 2, left + width + 20, top + height / 2)
lines.push(line)
}
node.children.forEach((item) => {
let x1 = node.layerIndex === 0 ? left + width / 2 : left + width + 20 let x1 = node.layerIndex === 0 ? left + width / 2 : left + width + 20
let y1 = node.layerIndex === 0 ? top + height / 2 : top + height / 2 let y1 = node.layerIndex === 0 ? top + height / 2 : top + height / 2
let x2 = item.left let x2 = item.left
@ -188,10 +162,8 @@ class LogicalStructure extends Base {
} else { } else {
path = this.cubicBezierPath(x1, y1, x2, y2) path = this.cubicBezierPath(x1, y1, x2, y2)
} }
let line = this.draw.path(path) lines[index].plot(path)
lines.push(line)
}) })
return lines;
} }
/** /**
@ -199,16 +171,12 @@ class LogicalStructure extends Base {
* @Date: 2021-04-11 19:54:26 * @Date: 2021-04-11 19:54:26
* @Desc: 渲染按钮 * @Desc: 渲染按钮
*/ */
renderExpandBtn(node, icons) { renderExpandBtn(node, btn) {
let { let {
left,
top,
width, width,
height height
} = node } = node
icons.forEach((icon) => { btn.translate(width, height / 2)
icon.x(left + width).y(top + height / 2)
})
} }
} }

2
simple-mind-map/src/layouts/_CatalogOrganization.js
View File

@ -75,7 +75,7 @@ class Render {
draw: this.draw draw: this.draw
}) })
// 计算节点的宽高 // 计算节点的宽高
newNode.refreshSize() newNode.getSize()
// 计算节点的top // 计算节点的top
if (isRoot) { if (isRoot) {
newNode.isRoot = true newNode.isRoot = true

2
simple-mind-map/src/layouts/_OrganizationStructure.js
View File

@ -73,7 +73,7 @@ class Render {
draw: this.draw draw: this.draw
}) })
// 计算节点的宽高 // 计算节点的宽高
newNode.refreshSize() newNode.getSize()
// 计算节点的top // 计算节点的top
if (isRoot) { if (isRoot) {
newNode.isRoot = true newNode.isRoot = true

9
simple-mind-map/src/themes/default.js
View File

@ -5,8 +5,8 @@
*/ */
export default { export default {
// 节点内边距 // 节点内边距
paddingX: 20, paddingX: 15,
paddingY: 10, paddingY: 5,
// 图片显示的最大宽度 // 图片显示的最大宽度
imgMaxWidth: 100, imgMaxWidth: 100,
// 图片显示的最大高度 // 图片显示的最大高度
@ -31,6 +31,7 @@ export default {
fontSize: 16, fontSize: 16,
fontWeight: 'bold', fontWeight: 'bold',
fontStyle: 'normal', fontStyle: 'normal',
lineHeight: 1.5,
borderColor: 'transparent', borderColor: 'transparent',
borderWidth: 0, borderWidth: 0,
borderDasharray: 'none', borderDasharray: 'none',
@ -52,6 +53,7 @@ export default {
fontSize: 16, fontSize: 16,
fontWeight: 'noraml', fontWeight: 'noraml',
fontStyle: 'normal', fontStyle: 'normal',
lineHeight: 1.5,
borderColor: '#549688', borderColor: '#549688',
borderWidth: 1, borderWidth: 1,
borderDasharray: 'none', borderDasharray: 'none',
@ -66,13 +68,14 @@ export default {
// 三级及以下节点样式 // 三级及以下节点样式
node: { node: {
marginX: 50, marginX: 50,
marginY: 10, marginY: 0,
fillColor: 'transparent', fillColor: 'transparent',
fontFamily: '微软雅黑, Microsoft YaHei', fontFamily: '微软雅黑, Microsoft YaHei',
color: '#6a6d6c', color: '#6a6d6c',
fontSize: 14, fontSize: 14,
fontWeight: 'noraml', fontWeight: 'noraml',
fontStyle: 'normal', fontStyle: 'normal',
lineHeight: 1.5,
borderColor: 'transparent', borderColor: 'transparent',
borderWidth: 0, borderWidth: 0,
borderRadius: 5, borderRadius: 5,

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

@ -5,8 +5,11 @@
* @Desc: 深度优先遍历树 * @Desc: 深度优先遍历树
*/ */
export const walk = (root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0) => { export const walk = (root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0) => {
beforeCallback && beforeCallback(root, parent, isRoot, layerIndex, index) let stop = false
if (root.children && root.children.length > 0) { if (beforeCallback) {
stop = beforeCallback(root, parent, isRoot, layerIndex, index)
}
if (!stop && root.children && root.children.length > 0) {
let _layerIndex = layerIndex + 1 let _layerIndex = layerIndex + 1
root.children.forEach((node, nodeIndex) => { root.children.forEach((node, nodeIndex) => {
walk(node, root, beforeCallback, afterCallback, false, _layerIndex, nodeIndex) walk(node, root, beforeCallback, afterCallback, false, _layerIndex, nodeIndex)

7
web/src/components/ImgUpload/index.vue
View File

@ -98,7 +98,10 @@ export default {
}); });
}; };
img.onerror = (e) => { img.onerror = (e) => {
reject(e); resolve({
width: 0,
height: 0,
});
}; };
}); });
}, },
@ -109,7 +112,7 @@ export default {
* @Desc: 删除图片 * @Desc: 删除图片
*/ */
deleteImg() { deleteImg() {
this.$emit("change", "none"); this.$emit("change", "");
this.file = null; this.file = null;
}, },
}, },

3
web/src/config/index.js
View File

@ -46,6 +46,9 @@ export const fontFamilyList = [
// 字号 // 字号
export const fontSizeList = [10, 12, 16, 18, 24, 32, 48] export const fontSizeList = [10, 12, 16, 18, 24, 32, 48]
// 行高
export const lineHeightList = [1, 1.5, 2, 2.5, 3]
// 颜色 // 颜色
export const colorList = [ export const colorList = [
'#4D4D4D', '#4D4D4D',

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

@ -68,10 +68,7 @@ export default {
* @Desc: 确定 * @Desc: 确定
*/ */
confirm() { confirm() {
this.activeNode.setData({ this.activeNode.setHyperlink(this.link, this.linkTitle);
hyperlink: this.link,
hyperlinkTitle: this.linkTitle,
});
this.cancel(); this.cancel();
}, },
}, },

4
web/src/pages/Edit/components/NodeIcon.vue
View File

@ -67,9 +67,7 @@ export default {
} else { } else {
this.icon.push(type + '_' + name) this.icon.push(type + '_' + name)
} }
this.activeNode.setData({ this.activeNode.setIcon([...this.icon])
icon: [...this.icon]
})
} }
}, },
}; };

16
web/src/pages/Edit/components/NodeImage.vue
View File

@ -73,16 +73,16 @@ export default {
async confirm() { async confirm() {
try { try {
let { width, height } = await this.$refs.ImgUpload.getSize(); let { width, height } = await this.$refs.ImgUpload.getSize();
this.activeNode.setData({ this.activeNode.setImage({
image: this.img, url: this.img || "none",
imageTitle: this.imgTitle, title: this.imgTitle,
imageSize: { width,
width, height,
height,
},
}); });
this.cancel(); this.cancel();
} catch (error) {} } catch (error) {
console.log(error);
}
}, },
}, },
}; };

4
web/src/pages/Edit/components/NodeNote.vue
View File

@ -65,9 +65,7 @@ export default {
* @Desc: 确定 * @Desc: 确定
*/ */
confirm() { confirm() {
this.activeNode.setData({ this.activeNode.setNote(this.note);
note: this.note,
});
this.cancel(); this.cancel();
}, },
}, },

4
web/src/pages/Edit/components/NodeTag.vue
View File

@ -105,9 +105,7 @@ export default {
* @Desc: 确定 * @Desc: 确定
*/ */
confirm() { confirm() {
this.activeNode.setData({ this.activeNode.setTag(this.tagArr);
tag: this.tagArr,
});
this.cancel(); this.cancel();
}, },
}, },

88
web/src/pages/Edit/components/Style.vue
View File

@ -9,37 +9,62 @@
<!-- 文字 --> <!-- 文字 -->
<div class="title noTop">文字</div> <div class="title noTop">文字</div>
<div class="row"> <div class="row">
<el-select <div class="rowItem">
size="mini" <span class="name">字体</span>
style="width: 160px" <el-select
v-model="style.fontFamily" size="mini"
placeholder="" v-model="style.fontFamily"
@change="update('fontFamily')" placeholder=""
> @change="update('fontFamily')"
<el-option
v-for="item in fontFamilyList"
:key="item.value"
:label="item.name"
:value="item.value"
:style="{ fontFamily: item.value }"
> >
</el-option> <el-option
</el-select> v-for="item in fontFamilyList"
<el-select :key="item.value"
size="mini" :label="item.name"
style="width: 80px" :value="item.value"
v-model="style.fontSize" :style="{ fontFamily: item.value }"
placeholder="" >
@change="update('fontSize')" </el-option>
> </el-select>
<el-option </div>
v-for="item in fontSizeList" </div>
:key="item" <div class="row">
:label="item" <div class="rowItem">
:value="item" <span class="name">字号</span>
<el-select
size="mini"
style="width: 80px"
v-model="style.fontSize"
placeholder=""
@change="update('fontSize')"
> >
</el-option> <el-option
</el-select> v-for="item in fontSizeList"
:key="item"
:label="item"
:value="item"
>
</el-option>
</el-select>
</div>
<div class="rowItem">
<span class="name">行高</span>
<el-select
size="mini"
style="width: 80px"
v-model="style.lineHeight"
placeholder=""
@change="update('lineHeight')"
>
<el-option
v-for="item in lineHeightList"
:key="item"
:label="item"
:value="item"
>
</el-option>
</el-select>
</div>
</div> </div>
<div class="row"> <div class="row">
<div class="btnGroup"> <div class="btnGroup">
@ -220,6 +245,7 @@ import {
borderWidthList, borderWidthList,
borderDasharrayList, borderDasharrayList,
borderRadiusList, borderRadiusList,
lineHeightList,
} from "@/config"; } from "@/config";
/** /**
@ -240,6 +266,7 @@ export default {
borderWidthList, borderWidthList,
borderDasharrayList, borderDasharrayList,
borderRadiusList, borderRadiusList,
lineHeightList,
activeNode: null, activeNode: null,
activeTab: "normal", activeTab: "normal",
style: { style: {
@ -248,6 +275,7 @@ export default {
color: "", color: "",
fontFamily: "", fontFamily: "",
fontSize: "", fontSize: "",
lineHeight: "",
textDecoration: "", textDecoration: "",
fontWeight: "", fontWeight: "",
fontStyle: "", fontStyle: "",
@ -297,6 +325,7 @@ export default {
"color", "color",
"fontFamily", "fontFamily",
"fontSize", "fontSize",
"lineHeight",
"textDecoration", "textDecoration",
"fontWeight", "fontWeight",
"fontStyle", "fontStyle",
@ -320,7 +349,6 @@ export default {
* @Desc: 修改样式 * @Desc: 修改样式
*/ */
update(prop) { update(prop) {
console.log(this.style[prop])
this.activeNode.setStyle( this.activeNode.setStyle(
prop, prop,
this.style[prop], this.style[prop],