coosld/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-21 10:27:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

合并

Browse Source
This commit is contained in:
wanglin2 2023-09-04 17:00:39 +08:00
commit cd5556aad5
121 changed files with 2446 additions and 2184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -167,4 +167,8 @@ const mindMap = new MindMap({
<img src="./web/src/assets/avatar/布林.jpg" style="width: 50px;height: 50px;" />
<span>布林</span>
</span>
<span>
<img src="./web/src/assets/avatar/南风.jpg" style="width: 50px;height: 50px;" />
<span>南风</span>
</span>
</p>

4
index.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><link rel="icon" href="dist/logo.ico"><title>思绪思维导图</title><script>// 自定义静态资源的路径
window.externalPublicPath = './dist/'
// 接管应用
window.takeOverApp = false</script><link href="dist/css/chunk-vendors.css?3f27c97d35a340dfd1c0" rel="stylesheet"><link href="dist/css/app.css?3f27c97d35a340dfd1c0" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script>const getDataFromBackend = () => {
window.takeOverApp = false</script><link href="dist/css/chunk-vendors.css?829fd06748ba83d9ecea" rel="stylesheet"><link href="dist/css/app.css?829fd06748ba83d9ecea" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script>const getDataFromBackend = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
@ -66,4 +66,4 @@
// 可以通过window.$bus.$on()来监听应用的一些事件
// 实例化页面
window.initApp()
}</script><script src="dist/js/chunk-vendors.js?3f27c97d35a340dfd1c0"></script><script src="dist/js/app.js?3f27c97d35a340dfd1c0"></script></body></html>
}</script><script src="dist/js/chunk-vendors.js?829fd06748ba83d9ecea"></script><script src="dist/js/app.js?829fd06748ba83d9ecea"></script></body></html>

2
simple-mind-map/full.js
View File

@ -13,6 +13,7 @@ import NodeImgAdjust from './src/plugins/NodeImgAdjust.js'
import TouchEvent from './src/plugins/TouchEvent.js'
import Search from './src/plugins/Search.js'
import Painter from './src/plugins/Painter.js'
import Scrollbar from './src/plugins/Scrollbar.js'
import xmind from './src/parse/xmind.js'
import markdown from './src/parse/markdown.js'
import icons from './src/svg/icons.js'
@ -42,5 +43,6 @@ MindMap
.usePlugin(NodeImgAdjust)
.usePlugin(Search)
.usePlugin(Painter)
.usePlugin(Scrollbar)
export default MindMap

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

@ -11,10 +11,11 @@ import {
layoutValueList,
CONSTANTS,
commonCaches,
ERROR_TYPES
ERROR_TYPES,
cssContent
} from './src/constants/constant'
import { SVG } from '@svgdotjs/svg.js'
import { simpleDeepClone, getType } from './src/utils'
import { simpleDeepClone, getType, getObjectChangedProps } from './src/utils'
import defaultTheme, {
checkIsNodeSizeIndependenceConfig
} from './src/themes/default'
@ -37,6 +38,10 @@ class MindMap {
this.height = this.elRect.height
if (this.width <= 0 || this.height <= 0) throw new Error('容器元素el的宽高不能为0')
// 添加css
this.cssEl = null
this.addCss()
// 画布
this.svg = SVG().addTo(this.el).size(this.width, this.height)
this.draw = this.svg.group()
@ -101,6 +106,19 @@ class MindMap {
return opt
}
// 添加必要的css样式到页面
addCss() {
this.cssEl = document.createElement('style')
this.cssEl.type = 'text/css'
this.cssEl.innerHTML = cssContent
document.head.appendChild(this.cssEl)
}
// 移除css
removeCss() {
document.head.removeChild(this.cssEl)
}
// 渲染，部分渲染
render(callback, source = '') {
this.batchExecution.push('render', () => {
@ -183,9 +201,11 @@ class MindMap {
// 设置主题配置
setThemeConfig(config) {
// 计算改变了的配置
const changedConfig = getObjectChangedProps(this.themeConfig, config)
this.opt.themeConfig = config
// 检查改变的是否是节点大小无关的主题属性
let res = checkIsNodeSizeIndependenceConfig(config)
let res = checkIsNodeSizeIndependenceConfig(changedConfig)
this.render(null, res ? '' : CONSTANTS.CHANGE_THEME)
}
@ -339,6 +359,8 @@ class MindMap {
draw.translate(-rect.x + elRect.left, -rect.y + elRect.top)
// 克隆一份数据
let clone = svg.clone()
// 添加必要的样式
clone.add(SVG(`<style>${ cssContent }</style>`))
// 如果实际图形宽高超出了屏幕宽高，且存在水印的话需要重新绘制水印，否则会出现超出部分没有水印的问题
if (
(rect.width > origWidth || rect.height > origHeight) &&
@ -406,6 +428,9 @@ class MindMap {
destroy() {
// 移除插件
;[...MindMap.pluginList].forEach(plugin => {
if (this[plugin.instanceName].beforePluginDestroy) {
this[plugin.instanceName].beforePluginDestroy()
}
this[plugin.instanceName] = null
})
// 解绑事件
@ -414,7 +439,9 @@ class MindMap {
this.svg.remove()
// 去除给容器元素设置的背景样式
Style.removeBackgroundStyle(this.el)
this.el.innerHTML = ''
this.el = null
this.removeCss()
}
}

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

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

32
simple-mind-map/src/constants/constant.js
View File

@ -325,7 +325,9 @@ export const nodeDataNoStylePropList = [
'uid',
'activeStyle',
'associativeLineTargets',
'associativeLineTargetControlOffsets'
'associativeLineTargetControlOffsets',
'associativeLinePoint',
'associativeLineText'
]
// 数据缓存
@ -342,4 +344,30 @@ export const ERROR_TYPES = {
LOAD_CLIPBOARD_IMAGE_ERROR: 'load_clipboard_image_error',
BEFORE_TEXT_EDIT_ERROR: 'before_text_edit_error',
EXPORT_ERROR: 'export_error'
}
}
// a4纸的宽高
export const a4Size = {
width: 592.28,
height: 841.89
}
// css
export const cssContent = `
/* 鼠标hover和激活时渲染的矩形 */
.smm-hover-node{
display: none;
opacity: 0.6;
stroke-width: 1;
}
.smm-node:hover .smm-hover-node{
display: block;
}
.smm-node.active .smm-hover-node{
display: block;
opacity: 1;
stroke-width: 2;
}
`

20
simple-mind-map/src/constants/defaultOptions.js
View File

@ -68,13 +68,21 @@ export const defaultOpt = {
// 展开收起按钮的颜色
expandBtnStyle: {
color: '#808080',
fill: '#fff'
fill: '#fff',
fontSize: 13,
strokeColor: '#333333'
},
// 自定义展开收起按钮的图标
expandBtnIcon: {
open: '', // svg字符串
close: ''
},
// 处理收起节点数量
expandBtnNumHandler: num => {
return num
},
// 是否显示带数量的收起按钮
isShowExpandNum: true,
// 是否只有当鼠标在画布内才响应快捷键事件
enableShortcutOnlyWhenMouseInSvg: true,
// 初始根节点的位置
@ -166,5 +174,13 @@ export const defaultOpt = {
}
`,
// 开启鼠标双击复位思维导图位置及缩放
enableDblclickReset: true
enableDblclickReset: false,
// 导出图片时canvas的缩放倍数，该配置会和window.devicePixelRatio值取最大值
minExportImgCanvasScale: 2,
// 节点鼠标hover和激活时显示的矩形边框的颜色
hoverRectColor: 'rgb(94, 200, 248)',
// 节点鼠标hover和激活时显示的矩形边框距节点内容的距离
hoverRectPadding: 2,
// 双击节点进入节点文本编辑时是否默认选中文本，默认只在创建新节点时会选中
selectTextOnEnterEditText: false
}

43
simple-mind-map/src/core/render/Render.js
View File

@ -342,7 +342,7 @@ class Render {
}
})
})
this.mindMap.emit('node_active', null, this.activeNodeList)
this.mindMap.emit('node_active', null, [...this.activeNodeList])
}
// 清除当前激活的节点
@ -407,7 +407,7 @@ class Render {
// 激活节点需要显示展开收起按钮
node.showExpandBtn()
setTimeout(() => {
node.updateNodeShape()
node.updateNodeActive()
}, 0)
}
},
@ -416,6 +416,7 @@ class Render {
0,
0
)
this.mindMap.emit('node_active', null, [...this.activeNodeList])
}
// 回退
@ -854,7 +855,7 @@ class Render {
}
}
}
this.mindMap.emit('node_active', null, this.activeNodeList)
this.mindMap.emit('node_active', null, [...this.activeNodeList])
this.mindMap.render()
}
@ -886,7 +887,7 @@ class Render {
let copyData = copyNodeTree({}, node, true)
this.removeActiveNode(node)
this.removeOneNode(node)
this.mindMap.emit('node_active', null, this.activeNodeList)
this.mindMap.emit('node_active', null, [...this.activeNodeList])
this.mindMap.render()
if (callback && typeof callback === 'function') {
callback(copyData)
@ -901,7 +902,7 @@ class Render {
// let copyData = copyNodeTree({}, node, false, true)
this.removeActiveNode(node)
this.removeOneNode(node)
this.mindMap.emit('node_active', null, this.activeNodeList)
this.mindMap.emit('node_active', null, [...this.activeNodeList])
toNode.nodeData.children.push(node.nodeData)
this.mindMap.render()
if (toNode.isRoot) {
@ -921,19 +922,9 @@ class Render {
}
// 设置节点样式
setNodeStyle(node, prop, value, isActive) {
let data = {}
if (isActive) {
data = {
activeStyle: {
...(node.nodeData.data.activeStyle || {}),
[prop]: value
}
}
} else {
data = {
[prop]: value
}
setNodeStyle(node, prop, value) {
let data = {
[prop]: value
}
// 如果开启了富文本，则需要应用到富文本上
if (this.mindMap.richText) {
@ -954,18 +945,8 @@ class Render {
}
// 设置节点多个样式
setNodeStyles(node, style, isActive) {
let data = {}
if (isActive) {
data = {
activeStyle: {
...(node.nodeData.data.activeStyle || {}),
...style
}
}
} else {
data = style
}
setNodeStyles(node, style) {
let data = { ...style }
// 如果开启了富文本，则需要应用到富文本上
if (this.mindMap.richText) {
let config = this.mindMap.richText.normalStyleToRichTextStyle(style)
@ -1000,7 +981,7 @@ class Render {
} else {
node.hideExpandBtn()
}
node.updateNodeShape()
node.updateNodeActive()
}
// 设置节点是否展开

20
simple-mind-map/src/core/render/TextEdit.js
View File

@ -63,7 +63,7 @@ export default class TextEdit {
const node = activeNodeList[0]
// 当正在输入中文或英文或数字时，如果没有按下组合键，那么自动进入文本编辑模式
if (node && this.checkIsAutoEnterTextEditKey(e)) {
this.show(node)
this.show(node, e, false, true)
}
})
}
@ -93,7 +93,8 @@ export default class TextEdit {
// 显示文本编辑框
// isInserting：是否是刚创建的节点
async show(node, e, isInserting = false) {
// isFromKeyDown：是否是在按键事件进入的编辑
async show(node, e, isInserting = false, isFromKeyDown = false) {
// 使用了自定义节点内容那么不响应编辑事件
if (node.isUseCustomNodeContent()) {
return
@ -114,10 +115,10 @@ export default class TextEdit {
this.mindMap.view.translateXY(offsetLeft, offsetTop)
let rect = node._textData.node.node.getBoundingClientRect()
if (this.mindMap.richText) {
this.mindMap.richText.showEditText(node, rect, isInserting)
this.mindMap.richText.showEditText(node, rect, isInserting, isFromKeyDown)
return
}
this.showEditTextBox(node, rect, isInserting)
this.showEditTextBox(node, rect, isInserting, isFromKeyDown)
}
// 处理画布缩放
@ -135,8 +136,10 @@ export default class TextEdit {
}
// 显示文本编辑框
showEditTextBox(node, rect, isInserting) {
showEditTextBox(node, rect, isInserting, isFromKeyDown) {
if (this.showTextEdit) return
const { nodeTextEditZIndex, textAutoWrapWidth, selectTextOnEnterEditText } =
this.mindMap.opt
this.mindMap.emit('before_show_text_edit')
this.registerTmpShortcut()
if (!this.textEditNode) {
@ -169,15 +172,14 @@ export default class TextEdit {
)
let isMultiLine = node._textData.node.attr('data-ismultiLine') === 'true'
node.style.domText(this.textEditNode, scale, isMultiLine)
this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex
this.textEditNode.style.zIndex = nodeTextEditZIndex
this.textEditNode.innerHTML = textLines.join('<br>')
this.textEditNode.style.minWidth = rect.width + 10 + 'px'
this.textEditNode.style.minHeight = rect.height + 6 + 'px'
this.textEditNode.style.left = rect.left + 'px'
this.textEditNode.style.top = rect.top + 'px'
this.textEditNode.style.display = 'block'
this.textEditNode.style.maxWidth =
this.mindMap.opt.textAutoWrapWidth * scale + 'px'
this.textEditNode.style.maxWidth = textAutoWrapWidth * scale + 'px'
if (isMultiLine && lineHeight !== 1) {
this.textEditNode.style.transform = `translateY(${
-((lineHeight * fontSize - fontSize) / 2) * scale
@ -188,7 +190,7 @@ export default class TextEdit {
// if (!this.cacheEditingText) {
// this.selectNodeText()
// }
if (isInserting) {
if (isInserting || (selectTextOnEnterEditText && !isFromKeyDown)) {
this.selectNodeText()
} else {
this.focus()

78
simple-mind-map/src/core/render/node/Node.js
View File

@ -1,6 +1,6 @@
import Style from './Style'
import Shape from './Shape'
import { G, ForeignObject, SVG } from '@svgdotjs/svg.js'
import { G, ForeignObject, SVG, Rect } from '@svgdotjs/svg.js'
import nodeGeneralizationMethods from './nodeGeneralization'
import nodeExpandBtnMethods from './nodeExpandBtn'
import nodeCommandWrapsMethods from './nodeCommandWraps'
@ -58,6 +58,7 @@ class Node {
// 节点内容的容器
this.group = null
this.shapeNode = null // 节点形状节点
this.hoverNode = null // 节点hover和激活的节点
// 节点内容对象
this._customNodeContent = null
this._imgData = null
@ -269,6 +270,7 @@ class Node {
layout() {
// 清除之前的内容
this.group.clear()
const { hoverRectPadding } = this.mindMap.opt
let { width, height, textContentItemMargin } = this
let { paddingY } = this.getPaddingVale()
const halfBorderWidth = this.getBorderWidth() / 2
@ -277,21 +279,32 @@ class Node {
this.shapeNode = this.shapeInstance.createShape()
this.shapeNode.addClass('smm-node-shape')
this.shapeNode.translate(halfBorderWidth, halfBorderWidth)
this.style.shape(this.shapeNode)
this.group.add(this.shapeNode)
this.updateNodeShape()
// 渲染一个隐藏的矩形区域，用来触发展开收起按钮的显示
this.renderExpandBtnPlaceholderRect()
// 概要节点添加一个带所属节点id的类名
if (this.isGeneralization && this.generalizationBelongNode) {
this.group.addClass('generalization_' + this.generalizationBelongNode.uid)
}
// 激活hover和激活边框
const addHoverNode = () => {
this.hoverNode = new Rect()
.size(width + hoverRectPadding * 2, height + hoverRectPadding * 2)
.x(-hoverRectPadding)
.y(-hoverRectPadding)
this.hoverNode.addClass('smm-hover-node')
this.style.hoverNode(this.hoverNode, width, height)
this.group.add(this.hoverNode)
}
// 如果存在自定义节点内容，那么使用自定义节点内容
if (this.isUseCustomNodeContent()) {
let foreignObject = new ForeignObject()
foreignObject.width(width)
foreignObject.height(height)
foreignObject.add(SVG(this._customNodeContent))
foreignObject.add(this._customNodeContent)
this.group.add(foreignObject)
addHoverNode()
return
}
// 图片节点
@ -365,6 +378,7 @@ class Node {
: 0)
)
this.group.add(textContentNested)
addHoverNode()
}
// 给节点绑定事件
@ -380,14 +394,23 @@ class Node {
this.active(e)
})
this.group.on('mousedown', e => {
if (this.isRoot && e.which === 3 && !this.mindMap.opt.readonly) {
e.stopPropagation()
}
if (!this.isRoot && e.which !== 2 && !this.mindMap.opt.readonly) {
e.stopPropagation()
const { readonly, enableCtrlKeyNodeSelection, useLeftKeySelectionRightKeyDrag } = this.mindMap.opt
// 只读模式不需要阻止冒泡
if (!readonly) {
if (this.isRoot) {
// 根节点，右键拖拽画布模式下不需要阻止冒泡
if (e.which === 3 && !useLeftKeySelectionRightKeyDrag) {
e.stopPropagation()
}
} else {
// 非根节点，且按下的是非鼠标中键，需要阻止事件冒泡
if (e.which !== 2) {
e.stopPropagation()
}
}
}
// 多选和取消多选
if (e.ctrlKey && this.mindMap.opt.enableCtrlKeyNodeSelection) {
if (e.ctrlKey && enableCtrlKeyNodeSelection) {
this.isMultipleChoice = true
let isActive = this.nodeData.data.isActive
if (!isActive)
@ -403,7 +426,7 @@ class Node {
this.mindMap.emit(
'node_active',
isActive ? null : this,
this.mindMap.renderer.activeNodeList
[...this.mindMap.renderer.activeNodeList]
)
}
this.mindMap.emit('node_mousedown', this, e)
@ -435,13 +458,17 @@ class Node {
})
// 右键菜单事件
this.group.on('contextmenu', e => {
const { readonly, useLeftKeySelectionRightKeyDrag } = this.mindMap.opt
// 按住ctrl键点击鼠标左键不知为何触发的是contextmenu事件
if (this.mindMap.opt.readonly || e.ctrlKey) {
// || this.isGeneralization
if (readonly || e.ctrlKey) {
return
}
e.stopPropagation()
e.preventDefault()
// 如果是多选节点结束，那么不要触发右键菜单事件
if(!useLeftKeySelectionRightKeyDrag && this.mindMap.select.hasSelectRange()) {
return
}
if (this.nodeData.data.isActive) {
this.renderer.clearActive()
}
@ -463,14 +490,15 @@ class Node {
this.renderer.clearActive()
this.mindMap.execCommand('SET_NODE_ACTIVE', this, true)
this.renderer.addActiveNode(this)
this.mindMap.emit('node_active', this, this.renderer.activeNodeList)
this.mindMap.emit('node_active', this, [...this.renderer.activeNodeList])
}
// 更新节点
update(isLayout = false) {
update() {
if (!this.group) {
return
}
this.updateNodeActive()
let { alwaysShowExpandBtn } = this.mindMap.opt
if (alwaysShowExpandBtn) {
// 需要移除展开收缩按钮
@ -543,13 +571,11 @@ class Node {
return sizeChange
}
// 更新节点形状样式
updateNodeShape() {
if (!this.shapeNode) return
const shape = this.getShape()
this.style[shape === CONSTANTS.SHAPE.RECTANGLE ? 'rect' : 'shape'](
this.shapeNode
)
// 更新节点激活状态
updateNodeActive() {
if (!this.group) return
const isActive = this.nodeData.data.isActive
this.group[isActive ? 'addClass' : 'removeClass']('active')
}
// 递归渲染
@ -557,9 +583,7 @@ class Node {
// 节点
// 重新渲染连线
this.renderLine()
let isLayout = false
if (!this.group) {
isLayout = true
// 创建组
this.group = new G()
this.group.addClass('smm-node')
@ -569,7 +593,7 @@ class Node {
this.bindGroupEvent()
this.draw.add(this.group)
this.layout()
this.update(isLayout)
this.update()
} else {
this.draw.add(this.group)
if (this.needLayout) {
@ -803,8 +827,8 @@ class Node {
}
// 获取某个样式
getStyle(prop, root, isActive) {
let v = this.style.merge(prop, root, isActive)
getStyle(prop, root) {
let v = this.style.merge(prop, root)
return v === undefined ? '' : v
}
@ -833,7 +857,7 @@ class Node {
// 获取节点非节点状态的边框大小
getBorderWidth() {
return this.style.merge('borderWidth', false, false) || 0
return this.style.merge('borderWidth', false) || 0
}
// 获取数据

54
simple-mind-map/src/core/render/node/Shape.js
View File

@ -62,14 +62,10 @@ export default class Shape {
// 创建形状节点
createShape() {
const shape = this.node.getShape()
const borderWidth = this.node.getBorderWidth()
let { width, height } = this.node
width -= borderWidth
height -= borderWidth
let node = null
// 矩形
if (shape === CONSTANTS.SHAPE.RECTANGLE) {
node = new Rect().size(width, height)
node = this.createRect()
} else if (shape === CONSTANTS.SHAPE.DIAMOND) {
// 菱形
node = this.createDiamond()
@ -98,9 +94,41 @@ export default class Shape {
return node
}
// 获取节点减去节点边框宽度、hover节点边框宽度后的尺寸
getNodeSize() {
const borderWidth = this.node.getBorderWidth()
let { width, height } = this.node
width -= borderWidth
height -= borderWidth
return {
width,
height
}
}
// 创建矩形
createRect() {
let { width, height } = this.getNodeSize()
let borderRadius = this.node.style.merge('borderRadius')
return new Path().plot(`
M${borderRadius},0
L${width - borderRadius},0
C${width - borderRadius},0 ${width},${0} ${width},${borderRadius}
L${width},${height - borderRadius}
C${width},${height - borderRadius} ${width},${height} ${
width - borderRadius
},${height}
L${borderRadius},${height}
C${borderRadius},${height} ${0},${height} ${0},${height - borderRadius}
L${0},${borderRadius}
C${0},${borderRadius} ${0},${0} ${borderRadius},${0}
Z
`)
}
// 创建菱形
createDiamond() {
let { width, height } = this.node
let { width, height } = this.getNodeSize()
let halfWidth = width / 2
let halfHeight = height / 2
let topX = halfWidth
@ -123,7 +151,7 @@ export default class Shape {
createParallelogram() {
let { paddingX } = this.node.getPaddingVale()
paddingX = paddingX || this.node.shapePadding.paddingX
let { width, height } = this.node
let { width, height } = this.getNodeSize()
return new Polygon().plot([
[paddingX, 0],
[width, 0],
@ -134,7 +162,7 @@ export default class Shape {
// 创建圆角矩形
createRoundedRectangle() {
let { width, height } = this.node
let { width, height } = this.getNodeSize()
let halfHeight = height / 2
return new Path().plot(`
M${halfHeight},0
@ -148,7 +176,7 @@ export default class Shape {
// 创建八角矩形
createOctagonalRectangle() {
let w = 5
let { width, height } = this.node
let { width, height } = this.getNodeSize()
return new Polygon().plot([
[0, w],
[w, 0],
@ -165,7 +193,7 @@ export default class Shape {
createOuterTriangularRectangle() {
let { paddingX } = this.node.getPaddingVale()
paddingX = paddingX || this.node.shapePadding.paddingX
let { width, height } = this.node
let { width, height } = this.getNodeSize()
return new Polygon().plot([
[paddingX, 0],
[width - paddingX, 0],
@ -180,7 +208,7 @@ export default class Shape {
createInnerTriangularRectangle() {
let { paddingX } = this.node.getPaddingVale()
paddingX = paddingX || this.node.shapePadding.paddingX
let { width, height } = this.node
let { width, height } = this.getNodeSize()
return new Polygon().plot([
[0, 0],
[width, 0],
@ -193,7 +221,7 @@ export default class Shape {
// 创建椭圆
createEllipse() {
let { width, height } = this.node
let { width, height } = this.getNodeSize()
let halfWidth = width / 2
let halfHeight = height / 2
return new Path().plot(`
@ -206,7 +234,7 @@ export default class Shape {
// 创建圆
createCircle() {
let { width, height } = this.node
let { width, height } = this.getNodeSize()
let halfWidth = width / 2
let halfHeight = height / 2
return new Path().plot(`

74
simple-mind-map/src/core/render/node/Style.js
View File

@ -1,6 +1,15 @@
import { tagColorList, nodeDataNoStylePropList } from '../../../constants/constant'
import {
tagColorList,
nodeDataNoStylePropList
} from '../../../constants/constant'
const rootProp = ['paddingX', 'paddingY']
const backgroundStyleProps = ['backgroundColor', 'backgroundImage', 'backgroundRepeat', 'backgroundPosition', 'backgroundSize']
const backgroundStyleProps = [
'backgroundColor',
'backgroundImage',
'backgroundRepeat',
'backgroundPosition',
'backgroundSize'
]
// 样式类
class Style {
@ -10,12 +19,18 @@ class Style {
if (!Style.cacheStyle) {
Style.cacheStyle = {}
let style = window.getComputedStyle(el)
backgroundStyleProps.forEach((prop) => {
backgroundStyleProps.forEach(prop => {
Style.cacheStyle[prop] = style[prop]
})
}
// 设置新样式
let { backgroundColor, backgroundImage, backgroundRepeat, backgroundPosition, backgroundSize } = themeConfig
let {
backgroundColor,
backgroundImage,
backgroundRepeat,
backgroundPosition,
backgroundSize
} = themeConfig
el.style.backgroundColor = backgroundColor
if (backgroundImage && backgroundImage !== 'none') {
el.style.backgroundImage = `url(${backgroundImage})`
@ -30,7 +45,7 @@ class Style {
// 移除背景样式
static removeBackgroundStyle(el) {
if (!Style.cacheStyle) return
backgroundStyleProps.forEach((prop) => {
backgroundStyleProps.forEach(prop => {
el.style[prop] = Style.cacheStyle[prop]
})
Style.cacheStyle = null
@ -42,7 +57,7 @@ class Style {
}
// 合并样式
merge(prop, root, isActive) {
merge(prop, root) {
let themeConfig = this.ctx.mindMap.themeConfig
// 三级及以下节点
let defaultConfig = themeConfig.node
@ -59,17 +74,6 @@ class Style {
// 二级节点
defaultConfig = themeConfig.second
}
// 激活状态
if (isActive !== undefined ? isActive : this.ctx.nodeData.data.isActive) {
if (
this.ctx.nodeData.data.activeStyle &&
this.ctx.nodeData.data.activeStyle[prop] !== undefined
) {
return this.ctx.nodeData.data.activeStyle[prop]
} else if (defaultConfig.active && defaultConfig.active[prop]) {
return defaultConfig.active[prop]
}
}
// 优先使用节点本身的样式
return this.getSelfStyle(prop) !== undefined
? this.getSelfStyle(prop)
@ -77,8 +81,8 @@ class Style {
}
// 获取某个样式值
getStyle(prop, root, isActive) {
return this.merge(prop, root, isActive)
getStyle(prop, root) {
return this.merge(prop, root)
}
// 获取自身自定义样式
@ -142,10 +146,10 @@ class Style {
// 获取文本样式
getTextFontStyle() {
return {
italic: this.merge('fontStyle') === 'italic',
bold: this.merge('fontWeight'),
fontSize: this.merge('fontSize'),
return {
italic: this.merge('fontStyle') === 'italic',
bold: this.merge('fontWeight'),
fontSize: this.merge('fontSize'),
fontFamily: this.merge('fontFamily')
}
}
@ -201,25 +205,43 @@ class Style {
// 展开收起按钮
iconBtn(node, node2, fillNode) {
let { color, fill } = this.ctx.mindMap.opt.expandBtnStyle || {
let { color, fill, fontSize, fontColor } = this.ctx.mindMap.opt
.expandBtnStyle || {
color: '#808080',
fill: '#fff'
fill: '#fff',
fontSize: 12,
strokeColor: '#333333',
fontColor: '#333333'
}
node.fill({ color: color })
node2.fill({ color: color })
fillNode.fill({ color: fill })
if (this.ctx.mindMap.opt.isShowExpandNum) {
node.attr({ 'font-size': fontSize, 'font-color': fontColor })
}
}
// 是否设置了自定义的样式
hasCustomStyle() {
let res = false
Object.keys(this.ctx.nodeData.data).forEach((item) => {
Object.keys(this.ctx.nodeData.data).forEach(item => {
if (!nodeDataNoStylePropList.includes(item)) {
res = true
}
})
return res
}
// hover和激活节点
hoverNode(node) {
const { hoverRectColor } = this.ctx.mindMap.opt
node
.radius(5)
.fill('none')
.stroke({
color: hoverRectColor
})
}
}
Style.cacheStyle = null

8
simple-mind-map/src/core/render/node/nodeCommandWraps.js
View File

@ -39,13 +39,13 @@ function setShape(shape) {
}
// 修改某个样式
function setStyle(prop, value, isActive) {
this.mindMap.execCommand('SET_NODE_STYLE', this, prop, value, isActive)
function setStyle(prop, value) {
this.mindMap.execCommand('SET_NODE_STYLE', this, prop, value)
}
// 修改多个样式
function setStyles(style, isActive) {
this.mindMap.execCommand('SET_NODE_STYLES', this, style, isActive)
function setStyles(style) {
this.mindMap.execCommand('SET_NODE_STYLES', this, style)
}
export default {

8
simple-mind-map/src/core/render/node/nodeCreateContents.js
View File

@ -160,12 +160,8 @@ function createTextNode() {
return this.createRichTextNode()
}
let g = new G()
let fontSize = this.getStyle('fontSize', false, this.nodeData.data.isActive)
let lineHeight = this.getStyle(
'lineHeight',
false,
this.nodeData.data.isActive
)
let fontSize = this.getStyle('fontSize', false)
let lineHeight = this.getStyle('lineHeight', false)
// 文本超长自动换行
let textStyle = this.style.getTextFontStyle()
let textArr = this.nodeData.data.text.split(/\n/gim)

60
simple-mind-map/src/core/render/node/nodeExpandBtn.js
View File

@ -6,13 +6,27 @@ function createExpandNodeContent() {
if (this._openExpandNode) {
return
}
let { open, close } = this.mindMap.opt.expandBtnIcon || {}
// 展开的节点
this._openExpandNode = SVG(open || btnsSvg.open).size(
this.expandBtnSize,
this.expandBtnSize
)
this._openExpandNode.x(0).y(-this.expandBtnSize / 2)
let { close, open } = this.mindMap.opt.expandBtnIcon || {}
// 根据配置判断是否显示数量按钮
if (this.mindMap.opt.isShowExpandNum) {
// 展开的节点
this._openExpandNode = SVG()
.text()
.size(this.expandBtnSize, this.expandBtnSize)
// 文本垂直居中
this._openExpandNode.attr({
'text-anchor': 'middle',
'dominant-baseline': 'middle',
x: this.expandBtnSize / 2,
y: 2
})
} else {
this._openExpandNode = SVG(open || btnsSvg.open).size(
this.expandBtnSize,
this.expandBtnSize
)
this._openExpandNode.x(0).y(-this.expandBtnSize / 2)
}
// 收起的节点
this._closeExpandNode = SVG(close || btnsSvg.close).size(
this.expandBtnSize,
@ -22,6 +36,7 @@ function createExpandNodeContent() {
// 填充节点
this._fillExpandNode = new Circle().size(this.expandBtnSize)
this._fillExpandNode.x(0).y(-this.expandBtnSize / 2)
// 设置样式
this.style.iconBtn(
this._openExpandNode,
@ -29,7 +44,12 @@ function createExpandNodeContent() {
this._fillExpandNode
)
}
function sumNode(data = []) {
return data.reduce(
(total, cur) => total + this.sumNode(cur.children || []),
data.length
)
}
// 创建或更新展开收缩按钮内容
function updateExpandBtnNode() {
let { expand } = this.nodeData.data
@ -47,7 +67,26 @@ function updateExpandBtnNode() {
node = this._closeExpandNode
this._lastExpandBtnType = true
}
if (this._expandBtn) this._expandBtn.add(this._fillExpandNode).add(node)
if (this._expandBtn) {
// 如果是收起按钮加上边框
let { isShowExpandNum, expandBtnStyle, expandBtnNumHandler } = this.mindMap.opt
if (isShowExpandNum) {
if (!expand) {
// 数字按钮添加边框
this._fillExpandNode.stroke({
color: expandBtnStyle.strokeColor
})
// 计算子节点数量
let count = this.sumNode(this.nodeData.children)
count = expandBtnNumHandler(count)
node.text(count)
} else {
this._fillExpandNode.stroke('none')
}
}
this._expandBtn.add(this._fillExpandNode).add(node)
}
}
// 更新展开收缩按钮位置
@ -138,5 +177,6 @@ export default {
renderExpandBtn,
removeExpandBtn,
showExpandBtn,
hideExpandBtn
hideExpandBtn,
sumNode
}

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

@ -46,7 +46,10 @@ class Base {
// 检查当前来源是否需要重新计算节点大小
checkIsNeedResizeSources() {
return [CONSTANTS.CHANGE_THEME, CONSTANTS.TRANSFORM_TO_NORMAL_NODE].includes(this.renderer.renderSource)
return [
CONSTANTS.CHANGE_THEME,
CONSTANTS.TRANSFORM_TO_NORMAL_NODE
].includes(this.renderer.renderSource)
}
// 层级类型改变
@ -70,7 +73,10 @@ class Base {
// 数据上保存了节点引用，那么直接复用节点
if (data && data._node && !this.renderer.reRender) {
newNode = data._node
let isLayerTypeChange = this.checkIsLayerTypeChange(newNode.layerIndex, layerIndex)
let isLayerTypeChange = this.checkIsLayerTypeChange(
newNode.layerIndex,
layerIndex
)
newNode.reset()
newNode.layerIndex = layerIndex
this.cacheNode(data._node.uid, newNode)
@ -85,7 +91,10 @@ class Base {
newNode = this.lru.get(data.data.uid)
// 保存该节点上一次的数据
let lastData = JSON.stringify(newNode.nodeData.data)
let isLayerTypeChange = this.checkIsLayerTypeChange(newNode.layerIndex, layerIndex)
let isLayerTypeChange = this.checkIsLayerTypeChange(
newNode.layerIndex,
layerIndex
)
newNode.reset()
newNode.nodeData = newNode.handleData(data || {})
newNode.layerIndex = layerIndex
@ -139,7 +148,7 @@ class Base {
} else if (initRootNodePositionMap[value] !== undefined) {
return size * initRootNodePositionMap[value]
} else if (/^\d\d*%$/.test(value)) {
return Number.parseFloat(value) / 100 * size
return (Number.parseFloat(value) / 100) * size
} else {
return (size - nodeSize) / 2
}
@ -148,12 +157,24 @@ class Base {
// 定位节点到画布中间
setNodeCenter(node) {
let { initRootNodePosition } = this.mindMap.opt
let { CENTER }= CONSTANTS.INIT_ROOT_NODE_POSITION
if (!initRootNodePosition || !Array.isArray(initRootNodePosition) || initRootNodePosition.length < 2) {
let { CENTER } = CONSTANTS.INIT_ROOT_NODE_POSITION
if (
!initRootNodePosition ||
!Array.isArray(initRootNodePosition) ||
initRootNodePosition.length < 2
) {
initRootNodePosition = [CENTER, CENTER]
}
node.left = this.formatPosition(initRootNodePosition[0], this.mindMap.width, node.width)
node.top = this.formatPosition(initRootNodePosition[1], this.mindMap.height, node.height)
node.left = this.formatPosition(
initRootNodePosition[0],
this.mindMap.width,
node.width
)
node.top = this.formatPosition(
initRootNodePosition[1],
this.mindMap.height,
node.height
)
}
// 更新子节点属性
@ -170,7 +191,7 @@ class Base {
// 更新子节点多个属性
updateChildrenPro(children, props) {
children.forEach(item => {
Object.keys(props).forEach((prop) => {
Object.keys(props).forEach(prop => {
item[prop] += props[prop]
})
if (item.children && item.children.length && !item.hasCustomPosition()) {
@ -216,16 +237,22 @@ class Base {
// 获取节点的marginX
getMarginX(layerIndex) {
const { themeConfig, opt } = this.mindMap
const { second, node } = themeConfig
const hoverRectPadding = opt.hoverRectPadding * 2
return layerIndex === 1
? this.mindMap.themeConfig.second.marginX
: this.mindMap.themeConfig.node.marginX
? second.marginX + hoverRectPadding
: node.marginX + hoverRectPadding
}
// 获取节点的marginY
getMarginY(layerIndex) {
const { themeConfig, opt } = this.mindMap
const { second, node } = themeConfig
const hoverRectPadding = opt.hoverRectPadding * 2
return layerIndex === 1
? this.mindMap.themeConfig.second.marginY
: this.mindMap.themeConfig.node.marginY
? second.marginY + hoverRectPadding
: node.marginY + hoverRectPadding
}
// 获取节点包括概要在内的宽度

22
simple-mind-map/src/layouts/Fishbone.js
View File

@ -56,10 +56,11 @@ class Fishbone extends Base {
}
// 计算二级节点的top值
if (parent._node.isRoot) {
let marginY = this.getMarginY(layerIndex)
if (this.checkIsTop(newNode)) {
newNode.top = parent._node.top - newNode.height
newNode.top = parent._node.top - newNode.height - marginY
} else {
newNode.top = parent._node.top + parent._node.height
newNode.top = parent._node.top + parent._node.height + marginY
}
}
}
@ -80,15 +81,16 @@ class Fishbone extends Base {
null,
(node, parent, isRoot, layerIndex) => {
if (node.isRoot) {
let topTotalLeft = node.left + node.width + node.height
let bottomTotalLeft = node.left + node.width + node.height
let marginX = this.getMarginX(layerIndex + 1)
let topTotalLeft = node.left + node.width + node.height + marginX
let bottomTotalLeft = node.left + node.width + node.height + marginX
node.children.forEach(item => {
if (this.checkIsTop(item)) {
item.left = topTotalLeft
topTotalLeft += item.width
topTotalLeft += item.width + marginX
} else {
item.left = bottomTotalLeft + 20
bottomTotalLeft += item.width
bottomTotalLeft += item.width + marginX
}
})
}
@ -154,9 +156,10 @@ class Fishbone extends Base {
getNodeAreaHeight(node) {
let totalHeight = 0
let loop = node => {
let marginY = this.getMarginY(node.layerIndex)
totalHeight +=
node.height +
(this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
(this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) + marginY
if (node.children.length) {
node.children.forEach(item => {
loop(item)
@ -244,8 +247,9 @@ class Fishbone extends Base {
maxx = item.left
}
// 水平线段到二级节点的连线
let marginY = this.getMarginY(item.layerIndex)
let nodeLineX = item.left
let offset = node.height / 2
let offset = node.height / 2 + marginY
let offsetX = offset / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
let line = this.draw.path()
if (this.checkIsTop(item)) {
@ -267,7 +271,7 @@ class Fishbone extends Base {
})
// 从根节点出发的水平线
let nodeHalfTop = node.top + node.height / 2
let offset = node.height / 2
let offset = node.height / 2 + this.getMarginY(node.layerIndex + 1)
let line = this.draw.path()
line.plot(
`M ${node.left + node.width},${nodeHalfTop} L ${

29
simple-mind-map/src/layouts/fishboneUtils.js
View File

@ -47,30 +47,32 @@ export default {
computedLeftTopValue({ layerIndex, node, ctx }) {
if (layerIndex >= 1 && node.children) {
// 遍历三级及以下节点的子节点
let marginY = ctx.getMarginY(layerIndex + 1)
let startLeft = node.left + node.width * ctx.childIndent
let totalTop =
node.top +
node.height +
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) + marginY
node.children.forEach(item => {
item.left = startLeft
item.top += totalTop
totalTop +=
item.height +
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) + marginY
})
}
},
adjustLeftTopValueBefore({ node, parent, ctx }) {
adjustLeftTopValueBefore({ node, parent, ctx, layerIndex }) {
// 调整top
let len = node.children.length
let marginY = ctx.getMarginY(layerIndex + 1)
// 调整三级及以下节点的top
if (parent && !parent.isRoot && len > 0) {
let totalHeight = node.children.reduce((h, item) => {
return (
h +
item.height +
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) + marginY
)
}, 0)
ctx.updateBrothersTop(node, totalHeight)
@ -80,7 +82,8 @@ export default {
// 将二级节点的子节点移到上方
if (parent && parent.isRoot) {
// 遍历二级节点的子节点
let totalHeight = node.expandBtnSize
let marginY = ctx.getMarginY(node.layerIndex + 1)
let totalHeight = node.expandBtnSize + marginY
node.children.forEach(item => {
// 调整top
let nodeTotalHeight = ctx.getNodeAreaHeight(item)
@ -134,13 +137,14 @@ export default {
}
},
computedLeftTopValue({ layerIndex, node, ctx }) {
let marginY = ctx.getMarginY(layerIndex + 1)
if (layerIndex === 1 && node.children) {
// 遍历二级节点的子节点
let startLeft = node.left + node.width * ctx.childIndent
let totalTop =
node.top +
node.height +
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) + marginY
node.children.forEach(item => {
item.left = startLeft
@ -149,7 +153,7 @@ export default {
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
totalTop +=
item.height +
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) + marginY
})
}
if (layerIndex > 1 && node.children) {
@ -157,25 +161,26 @@ export default {
let startLeft = node.left + node.width * ctx.childIndent
let totalTop =
node.top -
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) - marginY
node.children.forEach(item => {
item.left = startLeft
item.top = totalTop - item.height
totalTop -=
item.height +
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) + marginY
})
}
},
adjustLeftTopValueBefore({ node, ctx, layerIndex }) {
// 调整top
let marginY = ctx.getMarginY(layerIndex + 1)
let len = node.children.length
if (layerIndex > 2 && len > 0) {
let totalHeight = node.children.reduce((h, item) => {
return (
h +
item.height +
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) + marginY
)
}, 0)
ctx.updateBrothersTop(node, -totalHeight)
@ -185,6 +190,7 @@ export default {
// 将二级节点的子节点移到上方
if (parent && parent.isRoot) {
// 遍历二级节点的子节点
let marginY = ctx.getMarginY(node.layerIndex + 1)
let totalHeight = 0
let totalHeight2 = node.expandBtnSize
node.children.forEach(item => {
@ -192,11 +198,12 @@ export default {
let hasChildren = ctx.getNodeActChildrenLength(item) > 0
let nodeTotalHeight = ctx.getNodeAreaHeight(item)
let offset =
hasChildren > 0
hasChildren
? nodeTotalHeight -
item.height -
(hasChildren ? item.expandBtnSize : 0)
: 0
offset -= (hasChildren ? marginY : 0)
let _top = totalHeight + offset
let _left = item.left
item.top += _top

112
simple-mind-map/src/plugins/AssociativeLine.js
View File

@ -99,12 +99,33 @@ class AssociativeLine {
// 创建箭头
createMarker() {
return this.draw.marker(20, 20, add => {
add.ref(2, 5)
add.ref(12, 5)
add.size(10, 10)
add.attr('orient', 'auto-start-reverse')
this.markerPath = add.path('M0,0 L2,5 L0,10 L10,5 Z')
})
}
// 判断关联线坐标是否变更，有变更则使用变化后的坐标，无则默认坐标
updateAllLinesPos(node, toNode, associativeLinePoint) {
associativeLinePoint = associativeLinePoint || {}
let [startPoint, endPoint] = computeNodePoints(node, toNode)
let nodeRange = 0
let nodeDir = ''
let toNodeRange = 0
let toNodeDir = ''
if (associativeLinePoint.startPoint) {
nodeRange = associativeLinePoint.startPoint.range || 0
nodeDir = associativeLinePoint.startPoint.dir || 'right'
startPoint = getNodePoint(node, nodeDir, nodeRange)
}
if (associativeLinePoint.endPoint) {
toNodeRange = associativeLinePoint.endPoint.range || 0
toNodeDir = associativeLinePoint.endPoint.dir || 'right'
endPoint = getNodePoint(toNode, toNodeDir, toNodeRange)
}
return [startPoint, endPoint]
}
// 渲染所有连线
renderAllLines() {
@ -137,10 +158,17 @@ class AssociativeLine {
0
)
nodeToIds.forEach((ids, node) => {
ids.forEach(id => {
ids.forEach((id, index) => {
let toNode = idToNode.get(id)
if (!node || !toNode) return
let [startPoint, endPoint] = computeNodePoints(node, toNode)
const associativeLinePoint = (node.nodeData.data.associativeLinePoint ||
[])[index]
// 切换结构和布局，都会更新坐标
const [startPoint, endPoint] = this.updateAllLinesPos(
node,
toNode,
associativeLinePoint
)
this.drawLine(startPoint, endPoint, node, toNode)
})
})
@ -183,11 +211,28 @@ class AssociativeLine {
.fill({ color: 'none' })
clickPath.plot(pathStr)
// 文字
let text = this.createText({ path, clickPath, node, toNode, startPoint, endPoint, controlPoints })
let text = this.createText({
path,
clickPath,
node,
toNode,
startPoint,
endPoint,
controlPoints
})
// 点击事件
clickPath.click(e => {
e.stopPropagation()
this.setActiveLine({ path, clickPath, text, node, toNode, startPoint, endPoint, controlPoints })
this.setActiveLine({
path,
clickPath,
text,
node,
toNode,
startPoint,
endPoint,
controlPoints
})
})
// 渲染关联线文字
this.renderText(this.getText(node, toNode), path, text)
@ -195,10 +240,17 @@ class AssociativeLine {
}
// 激活某根关联线
setActiveLine({ path, clickPath, text, node, toNode, startPoint, endPoint, controlPoints }) {
let {
associativeLineActiveColor
} = this.mindMap.themeConfig
setActiveLine({
path,
clickPath,
text,
node,
toNode,
startPoint,
endPoint,
controlPoints
}) {
let { associativeLineActiveColor } = this.mindMap.themeConfig
// 如果当前存在激活节点，那么取消激活节点
if (this.mindMap.renderer.activeNodeList.length > 0) {
this.clearActiveNodes()
@ -287,6 +339,22 @@ class AssociativeLine {
}
}
// 计算节点偏移位置
getNodePos(node) {
const { scaleX, scaleY, translateX, translateY } =
this.mindMap.draw.transform()
const { left, top, width, height } = node
let translateLeft = left * scaleX + translateX
let translateTop = top * scaleY + translateY
return {
left,
top,
translateLeft,
translateTop,
width,
height
}
}
// 检测当前移动到的目标节点
checkOverlapNode(x, y) {
this.overlapNode = null
@ -336,6 +404,11 @@ class AssociativeLine {
}
// 将目标节点id保存起来
let list = fromNode.nodeData.data.associativeLineTargets || []
// 连线节点是否存在相同的id,存在则阻止添加关联线
const sameLine = list.some(item => item === id)
if (sameLine) {
return
}
list.push(id)
// 保存控制点
let [startPoint, endPoint] = computeNodePoints(fromNode, toNode)
@ -358,9 +431,13 @@ class AssociativeLine {
y: controlPoints[1].y - endPoint.y
}
]
let associativeLinePoint = fromNode.nodeData.data.associativeLinePoint || []
// 记录关联的起始|结束坐标
associativeLinePoint[list.length - 1] = [{ startPoint, endPoint }]
this.mindMap.execCommand('SET_NODE_DATA', fromNode, {
associativeLineTargets: list,
associativeLineTargetControlOffsets: offsetList
associativeLineTargetControlOffsets: offsetList,
associativeLinePoint
})
}
@ -369,13 +446,18 @@ class AssociativeLine {
if (!this.activeLine) return
let [, , , node, toNode] = this.activeLine
this.removeControls()
let { associativeLineTargets, associativeLineTargetControlOffsets, associativeLineText } =
node.nodeData.data
let {
associativeLineTargets,
associativeLinePoint,
associativeLineTargetControlOffsets,
associativeLineText
} = node.nodeData.data
associativeLinePoint = associativeLinePoint || []
let targetIndex = getAssociativeLineTargetIndex(node, toNode)
// 更新关联线文本数据
let newAssociativeLineText = {}
if (associativeLineText) {
Object.keys(associativeLineText).forEach((item) => {
Object.keys(associativeLineText).forEach(item => {
if (item !== toNode.nodeData.data.id) {
newAssociativeLineText[item] = associativeLineText[item]
}
@ -386,6 +468,10 @@ class AssociativeLine {
associativeLineTargets: associativeLineTargets.filter((_, index) => {
return index !== targetIndex
}),
// 连接线坐标
associativeLinePoint: associativeLinePoint.filter((_, index) => {
return index !== targetIndex
}),
// 偏移量
associativeLineTargetControlOffsets: associativeLineTargetControlOffsets
? associativeLineTargetControlOffsets.filter((_, index) => {

53
simple-mind-map/src/plugins/Export.js
View File

@ -7,6 +7,7 @@ import {
import { SVG } from '@svgdotjs/svg.js'
import drawBackgroundImageToCanvas from '../utils/simulateCSSBackgroundInCanvas'
import { transformToMarkdown } from '../parse/toMarkdown'
import { a4Size } from '../constants/constant'
// 导出插件
class Export {
@ -57,45 +58,42 @@ class Export {
}
// svg转png
svgToPng(svgSrc, transparent, rotateWhenWidthLongerThenHeight = false) {
svgToPng(svgSrc, transparent, checkRotate = () => { return false }) {
return new Promise((resolve, reject) => {
const img = new Image()
// 跨域图片需要添加这个属性，否则画布被污染了无法导出图片
img.setAttribute('crossOrigin', 'anonymous')
img.onload = async () => {
try {
let canvas = document.createElement('canvas')
const canvas = document.createElement('canvas')
const dpr = Math.max(window.devicePixelRatio, this.mindMap.opt.minExportImgCanvasScale)
const imgWidth = img.width
const imgHeight = img.height
// 如果宽比高长，那么旋转90度
let needRotate =
rotateWhenWidthLongerThenHeight && img.width / img.height > 1
const needRotate = checkRotate(imgWidth, imgHeight)
if (needRotate) {
canvas.width = img.height
canvas.height = img.width
canvas.width = imgHeight * dpr
canvas.height = imgWidth * dpr
canvas.style.width = imgHeight + 'px'
canvas.style.height = imgWidth + 'px'
} else {
canvas.width = img.width
canvas.height = img.height
canvas.width = imgWidth * dpr
canvas.height = imgHeight * dpr
canvas.style.width = imgWidth + 'px'
canvas.style.height = imgHeight + 'px'
}
let ctx = canvas.getContext('2d')
const ctx = canvas.getContext('2d')
ctx.scale(dpr, dpr)
if (needRotate) {
ctx.rotate(0.5 * Math.PI)
ctx.translate(0, -img.height)
ctx.translate(0, -imgHeight)
}
// 绘制背景
if (!transparent) {
await this.drawBackgroundToCanvas(ctx, img.width, img.height)
await this.drawBackgroundToCanvas(ctx, imgWidth, imgHeight)
}
// 图片绘制到canvas里
ctx.drawImage(
img,
0,
0,
img.width,
img.height,
0,
0,
img.width,
img.height
)
ctx.drawImage(img, 0, 0, imgWidth, imgHeight)
resolve(canvas.toDataURL())
} catch (error) {
reject(error)
@ -179,7 +177,7 @@ class Export {
* 方法1.把svg的图片都转化成data:url格式，再转换
* 方法2.把svg的图片提取出来再挨个绘制到canvas里，最后一起转换
*/
async png(name, transparent = false, rotateWhenWidthLongerThenHeight) {
async png(name, transparent = false, checkRotate) {
let { node, str } = await this.getSvgData()
str = removeHTMLEntities(str)
// 如果开启了富文本，则使用htmltocanvas转换为图片
@ -195,7 +193,7 @@ class Export {
// let imgDataUrl = await this.svgToPng(
// res,
// transparent,
// rotateWhenWidthLongerThenHeight
// checkRotate
// )
// return imgDataUrl
}
@ -209,7 +207,7 @@ class Export {
let res = await this.svgToPng(
svgUrl,
transparent,
rotateWhenWidthLongerThenHeight
checkRotate
)
return res
}
@ -219,7 +217,10 @@ class Export {
if (!this.mindMap.doExportPDF) {
throw new Error('请注册ExportPDF插件')
}
let img = await this.png('', false, true)
let img = await this.png('', false, (width, height) => {
if (width <= a4Size.width && height && a4Size.height) return false
return (width / height) > 1
})
this.mindMap.doExportPDF.pdf(name, img, useMultiPageExport)
}

31
simple-mind-map/src/plugins/ExportPDF.js
View File

@ -1,4 +1,5 @@
import JsPDF from 'jspdf'
import { a4Size } from '../constants/constant'
// 导出PDF插件，需要通过Export插件使用
class ExportPDF {
@ -19,29 +20,27 @@ class ExportPDF {
// 单页导出
onePageExport(name, img) {
let pdf = new JsPDF('', 'pt', 'a4')
let a4Width = 595
let a4Height = 841
let a4Ratio = a4Width / a4Height
let a4Ratio = a4Size.width / a4Size.height
let image = new Image()
image.onload = () => {
let imageWidth = image.width
let imageHeight = image.height
let imageRatio = imageWidth / imageHeight
let w, h
if (imageWidth <= a4Width && imageHeight <= a4Height) {
if (imageWidth <= a4Size.width && imageHeight <= a4Size.height) {
// 使用图片原始宽高
w = imageWidth
h = imageHeight
} else if (a4Ratio > imageRatio) {
// 以a4Height为高度，缩放图片宽度
w = imageRatio * a4Height
h = a4Height
w = imageRatio * a4Size.height
h = a4Size.height
} else {
// 以a4Width为宽度，缩放图片高度
w = a4Width
h = a4Width / imageRatio
w = a4Size.width
h = a4Size.width / imageRatio
}
pdf.addImage(img, 'PNG', (a4Width - w) / 2, (a4Height - h) / 2, w, h)
pdf.addImage(img, 'PNG', (a4Size.width - w) / 2, (a4Size.height - h) / 2, w, h)
pdf.save(name)
}
image.src = img
@ -50,20 +49,18 @@ class ExportPDF {
// 多页导出
multiPageExport(name, img) {
let image = new Image()
const a4Width = 592.28
const a4Height = 841.89
image.onload = () => {
let imageWidth = image.width
let imageHeight = image.height
// 一页pdf显示高度
let pageHeight = (imageWidth / a4Width) * a4Height
let pageHeight = (imageWidth / a4Size.width) * a4Size.height
// 未生成pdf的高度
let leftHeight = imageHeight
// 偏移
let position = 0
// a4纸的尺寸[595.28,841.89]，图片在pdf中图片的宽高
let imgWidth = a4Width
let imgHeight = (a4Width / imageWidth) * imageHeight
let imgWidth = a4Size.width
let imgHeight = (a4Size.width / imageWidth) * imageHeight
let pdf = new JsPDF('', 'pt', 'a4')
// 有两个高度需要区分，一个是图片的实际高度，和生成pdf的页面高度(841.89)
// 当内容未超过pdf一页显示的范围，无需分页
@ -71,8 +68,8 @@ class ExportPDF {
pdf.addImage(
img,
'PNG',
(a4Width - imgWidth) / 2,
(a4Height - imgHeight) / 2,
(a4Size.width - imgWidth) / 2,
(a4Size.height - imgHeight) / 2,
imgWidth,
imgHeight
)
@ -81,7 +78,7 @@ class ExportPDF {
while (leftHeight > 0) {
pdf.addImage(img, 'PNG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= a4Height
position -= a4Size.height
// 避免添加空白页
if (leftHeight > 0) {
pdf.addPage()

5
simple-mind-map/src/plugins/NodeImgAdjust.js
View File

@ -263,6 +263,11 @@ class NodeImgAdjust {
beforePluginRemove() {
this.unBindEvent()
}
// 插件被卸载前做的事情
beforePluginDestroy() {
this.unBindEvent()
}
}
NodeImgAdjust.instanceName = 'nodeImgAdjust'

5
simple-mind-map/src/plugins/Painter.js
View File

@ -69,6 +69,11 @@ class Painter {
beforePluginRemove() {
this.unBindEvent()
}
// 插件被卸载前做的事情
beforePluginDestroy() {
this.unBindEvent()
}
}
Painter.instanceName = 'painter'

15
simple-mind-map/src/plugins/RichText.js
View File

@ -152,7 +152,7 @@ class RichText {
}
// 显示文本编辑控件
showEditText(node, rect, isInserting) {
showEditText(node, rect, isInserting, isFromKeyDown) {
if (this.showTextEdit) {
return
}
@ -160,7 +160,8 @@ class RichText {
richTextEditFakeInPlace,
customInnerElsAppendTo,
nodeTextEditZIndex,
textAutoWrapWidth
textAutoWrapWidth,
selectTextOnEnterEditText
} = this.mindMap.opt
this.node = node
this.isInserting = isInserting
@ -246,8 +247,9 @@ class RichText {
this.initQuillEditor()
document.querySelector('.ql-editor').style.minHeight = originHeight + 'px'
this.showTextEdit = true
// 如果是刚创建的节点，那么默认全选，否则普通激活不全选
this.focus(isInserting ? 0 : null)
// 如果是刚创建的节点，那么默认全选，否则普通激活不全选，除非selectTextOnEnterEditText配置为true
// 在selectTextOnEnterEditText时，如果是在keydown事件进入的节点编辑，也不需要全选
this.focus(isInserting || (selectTextOnEnterEditText && !isFromKeyDown) ? 0 : null)
if (!node.nodeData.data.richText) {
// 如果是非富文本的情况，需要手动应用文本样式
this.setTextStyleIfNotRichText(node)
@ -631,6 +633,11 @@ class RichText {
this.transformAllNodesToNormalNode()
document.head.removeChild(this.styleEl)
}
// 插件被卸载前做的事情
beforePluginDestroy() {
document.head.removeChild(this.styleEl)
}
}
RichText.instanceName = 'richText'

180
simple-mind-map/src/plugins/Scrollbar.js Normal file
View File

@ -0,0 +1,180 @@
import { throttle } from '../utils/index'
// 滚动条插件
class Scrollbar {
// 构造函数
constructor(opt) {
this.mindMap = opt.mindMap
this.scrollbarWrapSize = {
width: 0, // 水平滚动条的容器宽度
height: 0 // 垂直滚动条的容器高度
}
this.reset()
this.bindEvent()
}
// 绑定事件
bindEvent() {
this.onMousemove = this.onMousemove.bind(this)
this.onMouseup = this.onMouseup.bind(this)
this.onNodeTreeRenderEnd = this.onNodeTreeRenderEnd.bind(this)
this.onViewDataChange = throttle(this.onViewDataChange, 16, this) // 加个节流
this.mindMap.on('mousemove', this.onMousemove)
this.mindMap.on('mouseup', this.onMouseup)
this.mindMap.on('node_tree_render_end', this.onNodeTreeRenderEnd)
this.mindMap.on('view_data_change', this.onViewDataChange)
}
// 解绑事件
unBindEvent() {
this.mindMap.off('mousemove', this.onMousemove)
this.mindMap.off('mouseup', this.onMouseup)
this.mindMap.off('node_tree_render_end', this.onNodeTreeRenderEnd)
this.mindMap.off('view_data_change', this.onViewDataChange)
}
// 每次渲染后需要更新滚动条
onNodeTreeRenderEnd() {
this.emitEvent()
}
// 思维导图视图数据改变需要更新滚动条
onViewDataChange() {
this.emitEvent()
}
// 发送滚动条改变事件
emitEvent() {
this.mindMap.emit('scrollbar_change')
}
// 复位数据
reset() {
// 当前拖拽的滚动条类型
this.currentScrollType = ''
this.isMousedown = false
this.mousedownPos = {
x: 0,
y: 0
}
this.startViewPos = {
x: 0,
y: 0
}
// 思维导图实际高度
this.chartHeight = 0
this.chartWidth = 0
}
// 设置滚动条容器的大小，指滚动条容器的大小，对于水平滚动条，即宽度，对于垂直滚动条，即高度
setScrollBarWrapSize(width, height) {
this.scrollbarWrapSize.width = width
this.scrollbarWrapSize.height = height
}
// 计算滚动条大小和位置
calculationScrollbar() {
const rect = this.mindMap.draw.rbox()
// 减去画布距离浏览器窗口左上角的距离
const elRect = this.mindMap.elRect
rect.x -= elRect.left
rect.x2 -= elRect.left
rect.y -= elRect.top
rect.y2 -= elRect.top
// 垂直滚动条
const canvasHeight = this.mindMap.height // 画布高度
const paddingY = canvasHeight / 2 // 首尾允许超出的距离，默认为高度的一半
const chartHeight = rect.height + paddingY * 2 // 思维导图高度
this.chartHeight = chartHeight
const chartTop = rect.y - paddingY // 思维导图顶部距画布顶部的距离
const height = Math.min((canvasHeight / chartHeight) * 100, 100) // 滚动条高度 = 画布高度 / 思维导图高度
let top = (-chartTop / chartHeight) * 100 // 滚动条距离 = 思维导图顶部距画布顶部的距离 / 思维导图高度
// 判断是否到达边界
if (top < 0) {
top = 0
}
if (top > 100 - height) {
top = 100 - height
}
// 水平滚动条
const canvasWidth = this.mindMap.width
const paddingX = canvasWidth / 2
const chartWidth = rect.width + paddingX * 2
this.chartWidth = chartWidth
const chartLeft = rect.x - paddingX
const width = Math.min((canvasWidth / chartWidth) * 100, 100)
let left = (-chartLeft / chartWidth) * 100
if (left < 0) {
left = 0
}
if (left > 100 - width) {
left = 100 - width
}
const res = {
// 垂直滚动条
vertical: {
top,
height
},
// 水平滚动条
horizontal: {
left,
width
}
}
return res
}
onMousedown(e, type) {
e.preventDefault()
this.currentScrollType = type
this.isMousedown = true
this.mousedownPos = {
x: e.clientX,
y: e.clientY
}
// 保存视图当前的偏移量
let transformData = this.mindMap.view.getTransformData()
this.startViewPos = {
x: transformData.state.x,
y: transformData.state.y
}
}
onMousemove(e) {
if (!this.isMousedown) {
return
}
if (this.currentScrollType === 'vertical') {
const oy = e.clientY - this.mousedownPos.y
const oyPercentage = -oy / this.scrollbarWrapSize.height
const oyPx = oyPercentage * this.chartHeight
// 在视图最初偏移量上累加更新量
this.mindMap.view.translateYTo(oyPx + this.startViewPos.y)
} else {
const ox = e.clientX - this.mousedownPos.x
const oxPercentage = -ox / this.scrollbarWrapSize.width
const oxPx = oxPercentage * this.chartWidth
// 在视图最初偏移量上累加更新量
this.mindMap.view.translateXTo(oxPx + this.startViewPos.x)
}
}
onMouseup() {
this.isMousedown = false
this.reset()
}
// 插件被卸载前做的事情
beforePluginDestroy() {
this.unBindEvent()
}
}
Scrollbar.instanceName = 'scrollbar'
export default Scrollbar

45
simple-mind-map/src/plugins/Select.js
View File

@ -11,6 +11,8 @@ class Select {
this.mouseDownY = 0
this.mouseMoveX = 0
this.mouseMoveY = 0
this.isSelecting = false
this.cacheActiveList = []
this.bindEvent()
}
@ -30,6 +32,7 @@ class Select {
}
e.preventDefault()
this.isMousedown = true
this.cacheActiveList = [...this.mindMap.renderer.activeNodeList]
let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
this.mouseDownX = x
this.mouseDownY = y
@ -61,20 +64,45 @@ class Select {
if (!this.isMousedown) {
return
}
this.checkTriggerNodeActiveEvent()
clearTimeout(this.autoMoveTimer)
this.isMousedown = false
this.cacheActiveList = []
if (this.rect) this.rect.remove()
this.rect = null
setTimeout(() => {
this.isSelecting = false
}, 0)
})
}
// 如果激活节点改变了，那么触发事件
checkTriggerNodeActiveEvent() {
let isNumChange = this.cacheActiveList.length !== this.mindMap.renderer.activeNodeList.length
let isNodeChange = false
if (!isNumChange) {
for(let i = 0; i < this.cacheActiveList.length; i++) {
let cur = this.cacheActiveList[i]
if (!this.mindMap.renderer.activeNodeList.find((item) => {
return item.nodeData.data.uid === cur.nodeData.data.uid
})){
isNodeChange = true
break
}
}
}
if (isNumChange || isNodeChange) {
this.mindMap.emit(
'node_active',
null,
this.mindMap.renderer.activeNodeList
[...this.mindMap.renderer.activeNodeList]
)
clearTimeout(this.autoMoveTimer)
this.isMousedown = false
if (this.rect) this.rect.remove()
this.rect = null
})
}
}
// 鼠标移动事件
onMove(x, y) {
this.isSelecting = true
// 绘制矩形
this.rect.plot([
[this.mouseDownX, this.mouseDownY],
@ -172,6 +200,11 @@ class Select {
}
})
}
// 是否存在选区
hasSelectRange() {
return this.isSelecting
}
}
Select.instanceName = 'select'

5
simple-mind-map/src/plugins/TouchEvent.js
View File

@ -148,6 +148,11 @@ class TouchEvent {
beforePluginRemove() {
this.unBindEvent()
}
// 插件被卸载前做的事情
beforePluginDestroy() {
this.unBindEvent()
}
}
TouchEvent.instanceName = 'touchEvent'

82
simple-mind-map/src/plugins/associativeLine/associativeLineControls.js
View File

@ -1,7 +1,7 @@
import {
getAssociativeLineTargetIndex,
joinCubicBezierPath,
computeNodePoints,
getNodePoint,
getDefaultControlPointOffsets
} from './associativeLineUtils'
@ -61,15 +61,22 @@ function onControlPointMousemove(e) {
}
// 更新当前拖拽的控制点的位置
this[this.mousedownControlPointKey].x(x - radius).y(y - radius)
let [path, clickPath, text, node, toNode] = this.activeLine
let [startPoint, endPoint] = computeNodePoints(node, toNode)
let [, , , node, toNode] = this.activeLine
let targetIndex = getAssociativeLineTargetIndex(node, toNode)
let { associativeLinePoint, associativeLineTargetControlOffsets } =
node.nodeData.data
associativeLinePoint = associativeLinePoint || []
const nodePos = this.getNodePos(node)
const toNodePos = this.getNodePos(toNode)
let [startPoint, endPoint] = this.updateAllLinesPos(
node,
toNode,
associativeLinePoint[targetIndex]
)
this.controlPointMousemoveState.startPoint = startPoint
this.controlPointMousemoveState.endPoint = endPoint
let targetIndex = getAssociativeLineTargetIndex(node, toNode)
this.controlPointMousemoveState.targetIndex = targetIndex
let offsets = []
let associativeLineTargetControlOffsets =
node.nodeData.data.associativeLineTargetControlOffsets
if (!associativeLineTargetControlOffsets) {
// 兼容0.4.5版本，没有associativeLineTargetControlOffsets的情况
offsets = getDefaultControlPointOffsets(startPoint, endPoint)
@ -78,8 +85,14 @@ function onControlPointMousemove(e) {
}
let point1 = null
let point2 = null
const { x: clientX, y: clientY } = this.mindMap.toPos(e.clientX, e.clientY)
const _e = {
clientX,
clientY
}
// 拖拽的是控制点1
if (this.mousedownControlPointKey === 'controlPoint1') {
startPoint = getNodePoint(nodePos, '', 0, _e)
point1 = {
x,
y
@ -88,10 +101,15 @@ function onControlPointMousemove(e) {
x: endPoint.x + offsets[1].x,
y: endPoint.y + offsets[1].y
}
// 更新控制点1的连线
this.controlLine1.plot(startPoint.x, startPoint.y, point1.x, point1.y)
if (startPoint) {
// 保存更新后的坐标
this.controlPointMousemoveState.startPoint = startPoint
// 更新控制点1的连线
this.controlLine1.plot(startPoint.x, startPoint.y, point1.x, point1.y)
}
} else {
// 拖拽的是控制点2
endPoint = getNodePoint(toNodePos, '', 0, _e)
point1 = {
x: startPoint.x + offsets[0].x,
y: startPoint.y + offsets[0].y
@ -100,18 +118,39 @@ function onControlPointMousemove(e) {
x,
y
}
// 更新控制点2的连线
this.controlLine2.plot(endPoint.x, endPoint.y, point2.x, point2.y)
if (endPoint) {
// 保存更新后结束节点的坐标
this.controlPointMousemoveState.endPoint = endPoint
// 更新控制点2的连线
this.controlLine2.plot(endPoint.x, endPoint.y, point2.x, point2.y)
}
}
this.updataAassociativeLine(
startPoint,
endPoint,
point1,
point2,
this.activeLine
)
}
function updataAassociativeLine(
startPoint,
endPoint,
point1,
point2,
activeLine
) {
const [path, clickPath, text] = activeLine
// 更新关联线
let pathStr = joinCubicBezierPath(startPoint, endPoint, point1, point2)
const pathStr = joinCubicBezierPath(startPoint, endPoint, point1, point2)
path.plot(pathStr)
clickPath.plot(pathStr)
this.updateTextPos(path, text)
this.updateTextEditBoxPos(text)
}
// 控制点的鼠标移动事件
// 控制点的鼠标松开事件
function onControlPointMouseup(e) {
if (!this.isControlPointMousedown) return
e.stopPropagation()
@ -120,8 +159,15 @@ function onControlPointMouseup(e) {
this.controlPointMousemoveState
let [, , , node] = this.activeLine
let offsetList = []
let associativeLineTargetControlOffsets =
node.nodeData.data.associativeLineTargetControlOffsets
let { associativeLinePoint, associativeLineTargetControlOffsets } =
node.nodeData.data
if (!associativeLinePoint) {
associativeLinePoint = []
}
associativeLinePoint[targetIndex] = associativeLinePoint[targetIndex] || {
startPoint,
endPoint
}
if (!associativeLineTargetControlOffsets) {
// 兼容0.4.5版本，没有associativeLineTargetControlOffsets的情况
offsetList[targetIndex] = getDefaultControlPointOffsets(
@ -140,6 +186,7 @@ function onControlPointMouseup(e) {
y: pos.y - startPoint.y
}
offset2 = offsetList[targetIndex][1]
associativeLinePoint[targetIndex].startPoint = startPoint
} else {
// 更新控制点2数据
offset1 = offsetList[targetIndex][0]
@ -147,10 +194,12 @@ function onControlPointMouseup(e) {
x: pos.x - endPoint.x,
y: pos.y - endPoint.y
}
associativeLinePoint[targetIndex].endPoint = endPoint
}
offsetList[targetIndex] = [offset1, offset2]
this.mindMap.execCommand('SET_NODE_DATA', node, {
associativeLineTargetControlOffsets: offsetList
associativeLineTargetControlOffsets: offsetList,
associativeLinePoint
})
// 这里要加个setTimeout0是因为draw_click事件比mouseup事件触发的晚，所以重置isControlPointMousedown需要等draw_click事件触发完以后
setTimeout(() => {
@ -237,5 +286,6 @@ export default {
renderControls,
removeControls,
hideControls,
showControls
showControls,
updataAassociativeLine
}

21
simple-mind-map/src/plugins/associativeLine/associativeLineText.js
View File

@ -36,7 +36,7 @@ function showEditTextBox(g) {
this.mindMap.keyCommand.addShortcut('Enter', () => {
this.hideEditTextBox()
})
if (!this.textEditNode) {
this.textEditNode = document.createElement('div')
this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;background-color:#fff;box-shadow: 0 0 20px rgba(0,0,0,.5);padding: 3px 5px;margin-left: -5px;margin-top: -3px;outline: none; word-break: break-all;`
@ -62,7 +62,8 @@ function showEditTextBox(g) {
).split(/\n/gim)
this.textEditNode.style.fontFamily = associativeLineTextFontFamily
this.textEditNode.style.fontSize = associativeLineTextFontSize * scale + 'px'
this.textEditNode.style.lineHeight = textLines.length > 1 ? associativeLineTextLineHeight : 'normal'
this.textEditNode.style.lineHeight =
textLines.length > 1 ? associativeLineTextLineHeight : 'normal'
this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex
this.textEditNode.innerHTML = textLines.join('<br>')
this.textEditNode.style.display = 'block'
@ -78,10 +79,12 @@ function onScale() {
// 更新文本编辑框位置
function updateTextEditBoxPos(g) {
let rect = g.node.getBoundingClientRect()
this.textEditNode.style.minWidth = rect.width + 10 + 'px'
this.textEditNode.style.minHeight = rect.height + 6 + 'px'
this.textEditNode.style.left = rect.left + 'px'
this.textEditNode.style.top = rect.top + 'px'
if (this.textEditNode) {
this.textEditNode.style.minWidth = `${rect.width + 10}px`
this.textEditNode.style.minHeight = `${rect.height + 6}px`
this.textEditNode.style.left = `${rect.left}px`
this.textEditNode.style.top = `${rect.top}px`
}
}
// 隐藏文本编辑框
@ -116,8 +119,10 @@ function getText(node, toNode) {
// 渲染关联线文字
function renderText(str, path, text) {
if (!str) return
let { associativeLineTextFontSize, associativeLineTextLineHeight } =
this.mindMap.themeConfig
let {
associativeLineTextFontSize,
associativeLineTextLineHeight
} = this.mindMap.themeConfig
text.clear()
let textArr = str.split(/\n/gim)
textArr.forEach((item, index) => {

124
simple-mind-map/src/plugins/associativeLine/associativeLineUtils.js
View File

@ -54,28 +54,136 @@ export const cubicBezierPath = (x1, y1, x2, y2) => {
)
}
export const calcPoint = (node, e) => {
const { left, top, translateLeft, translateTop, width, height } = node
const clientX = e.clientX
const clientY = e.clientY
// 中心点的坐标
const centerX = translateLeft + width / 2
const centerY = translateTop + height / 2
const translateCenterX = left + width / 2
const translateCenterY = top + height / 2
const theta = Math.atan(height / width)
// 矩形左上角坐标
const deltaX = clientX - centerX
const deltaY = centerY - clientY
// 方向值
const direction = Math.atan2(deltaY, deltaX)
// 默认坐标
let x = left + width
let y = top + height
if (direction < theta && direction >= -theta) {
// 右边
// 正切值 = 对边/邻边，对边 = 正切值*邻边
const range = direction * (width / 2)
if (direction < theta && direction >= 0) {
// 中心点上边
y = translateCenterY - range
} else if (direction >= -theta && direction < 0) {
// 中心点下方
y = translateCenterY - range
}
return {
x,
y,
dir: 'right',
range
}
} else if (direction >= theta && direction < Math.PI - theta) {
// 上边
y = top
let range = 0
if (direction < Math.PI / 2 - theta && direction >= theta) {
// 正切值 = 对边/邻边，邻边 = 对边/正切值
const side = height / 2 / direction
range = -side
// 中心点右侧
x = translateCenterX + side
} else if (
direction >= Math.PI / 2 - theta &&
direction < Math.PI - theta
) {
// 中心点左侧
const tanValue = (centerX - clientX) / (centerY - clientY)
const side = (height / 2) * tanValue
range = side
x = translateCenterX - side
}
return {
x,
y,
dir: 'top',
range
}
} else if (direction < -theta && direction >= theta - Math.PI) {
// 下边
let range = 0
if (direction >= theta - Math.PI / 2 && direction < -theta) {
// 中心点右侧
// 正切值 = 对边/邻边，邻边 = 对边/正切值
const side = height / 2 / direction
range = side
x = translateCenterX - side
} else if (
direction < theta - Math.PI / 2 &&
direction >= theta - Math.PI
) {
// 中心点左侧
const tanValue = (centerX - clientX) / (centerY - clientY)
const side = (height / 2) * tanValue
range = -side
x = translateCenterX + side
}
return {
x,
y,
dir: 'bottom',
range
}
}
// 左边
x = left
const tanValue = (centerY - clientY) / (centerX - clientX)
const range = tanValue * (width / 2)
if (direction >= -Math.PI && direction < theta - Math.PI) {
// 中心点右侧
y = translateCenterY - range
} else if (direction < Math.PI && direction >= Math.PI - theta) {
// 中心点左侧
y = translateCenterY - range
}
return {
x,
y,
dir: 'left',
range
}
}
// 获取节点的连接点
export const getNodePoint = (node, dir = 'right') => {
export const getNodePoint = (node, dir = 'right', range = 0, e = null) => {
let { left, top, width, height } = node
if (e) {
return calcPoint(node, e)
}
switch (dir) {
case 'left':
return {
x: left,
y: top + height / 2
y: top + height / 2 - range
}
case 'right':
return {
x: left + width,
y: top + height / 2
y: top + height / 2 - range
}
case 'top':
return {
x: left + width / 2,
x: left + width / 2 - range,
y: top
}
case 'bottom':
return {
x: left + width / 2,
x: left + width / 2 - range,
y: top + height
}
default:
@ -111,8 +219,8 @@ export const computeNodePoints = (fromNode, toNode) => {
toDir = 'bottom'
} else if (offsetY > 0 && -offsetY < offsetX && offsetY > offsetX) {
// down
fromDir = 'bottom'
toDir = 'top'
fromDir = 'right'
toDir = 'right'
}
return [getNodePoint(fromNode, fromDir), getNodePoint(toNode, toDir)]
}
@ -179,4 +287,4 @@ export const getDefaultControlPointOffsets = (startPoint, endPoint) => {
y: controlPoints[1].y - endPoint.y
}
]
}
}

21
simple-mind-map/src/themes/autumn.js
View File

@ -18,11 +18,7 @@ export default merge(defaultTheme, {
color: '#fff',
borderColor: '#e68112',
borderWidth: 0,
fontSize: 24,
active: {
borderColor: '#b0bc47',
borderWidth: 3
}
fontSize: 24
},
// 二级节点样式
second: {
@ -30,18 +26,12 @@ export default merge(defaultTheme, {
color: '#8c5416',
borderColor: '#b0bc47',
borderWidth: 2,
fontSize: 18,
active: {
borderColor: '#e68112'
}
fontSize: 18
},
// 三级及以下节点样式
node: {
fontSize: 14,
color: '#8c5416',
active: {
borderColor: '#b0bc47'
}
color: '#8c5416'
},
// 概要节点样式
generalization: {
@ -49,9 +39,6 @@ export default merge(defaultTheme, {
fillColor: '#ffd683',
borderColor: '#b0bc47',
borderWidth: 2,
color: '#8c5416',
active: {
borderColor: '#e68112'
}
color: '#8c5416'
}
})

21
simple-mind-map/src/themes/avocado.js
View File

@ -18,11 +18,7 @@ export default merge(defaultTheme, {
color: '#fff',
borderColor: '#94c143',
borderWidth: 0,
fontSize: 24,
active: {
borderColor: '#749336',
borderWidth: 3
}
fontSize: 24
},
// 二级节点样式
second: {
@ -30,18 +26,12 @@ export default merge(defaultTheme, {
color: '#749336',
borderColor: '#aec668',
borderWidth: 2,
fontSize: 18,
active: {
borderColor: '#749336'
}
fontSize: 18
},
// 三级及以下节点样式
node: {
fontSize: 14,
color: '#749336',
active: {
borderColor: '#749336'
}
color: '#749336'
},
// 概要节点样式
generalization: {
@ -49,9 +39,6 @@ export default merge(defaultTheme, {
fillColor: '#cee498',
borderColor: '#aec668',
borderWidth: 2,
color: '#749336',
active: {
borderColor: '#749336'
}
color: '#749336'
}
})

21
simple-mind-map/src/themes/blackGold.js
View File

@ -18,11 +18,7 @@ export default merge(defaultTheme, {
color: 'rgb(111, 61, 6)',
borderColor: '',
borderWidth: 0,
fontSize: 24,
active: {
borderColor: '#fff',
borderWidth: 3
}
fontSize: 24
},
// 二级节点样式
second: {
@ -30,18 +26,12 @@ export default merge(defaultTheme, {
color: 'rgb(225, 201, 158)',
borderColor: 'rgb(245, 224, 191)',
borderWidth: 2,
fontSize: 18,
active: {
borderColor: 'rgb(255, 208, 124)'
}
fontSize: 18
},
// 三级及以下节点样式
node: {
fontSize: 14,
color: 'rgb(231, 203, 155)',
active: {
borderColor: 'rgb(255, 208, 124)'
}
color: 'rgb(231, 203, 155)'
},
// 概要节点样式
generalization: {
@ -49,9 +39,6 @@ export default merge(defaultTheme, {
fillColor: 'rgb(56, 45, 34)',
borderColor: 'rgb(104, 84, 61)',
borderWidth: 2,
color: 'rgb(242, 216, 176)',
active: {
borderColor: 'rgb(255, 208, 124)'
}
color: 'rgb(242, 216, 176)'
}
})

22
simple-mind-map/src/themes/blackHumour.js
View File

@ -18,11 +18,7 @@ export default merge(defaultTheme, {
color: '#fff',
borderColor: '',
borderWidth: 0,
fontSize: 24,
active: {
borderColor: 'rgb(254, 199, 13)',
borderWidth: 3
}
fontSize: 24
},
// 二级节点样式
second: {
@ -30,19 +26,12 @@ export default merge(defaultTheme, {
color: 'rgb(0, 0, 0)',
borderColor: '',
borderWidth: 0,
fontSize: 18,
active: {
borderColor: 'rgb(36, 179, 96)',
borderWidth: 3
}
fontSize: 18
},
// 三级及以下节点样式
node: {
fontSize: 14,
color: 'rgb(204, 204, 204)',
active: {
borderColor: 'rgb(254, 199, 13)'
}
color: 'rgb(204, 204, 204)'
},
// 概要节点样式
generalization: {
@ -50,9 +39,6 @@ export default merge(defaultTheme, {
fillColor: 'rgb(27, 31, 34)',
borderColor: 'rgb(255, 119, 34)',
borderWidth: 2,
color: 'rgb(204, 204, 204)',
active: {
borderColor: 'rgb(36, 179, 96)'
}
color: 'rgb(204, 204, 204)'
}
})

20
simple-mind-map/src/themes/blueSky.js
View File

@ -13,10 +13,7 @@ export default merge(defaultTheme, {
generalizationLineColor: '#333',
// 根节点样式
root: {
fillColor: 'rgb(115, 161, 191)',
active: {
borderColor: 'rgb(57, 80, 96)'
}
fillColor: 'rgb(115, 161, 191)'
},
// 二级节点样式
second: {
@ -24,26 +21,17 @@ export default merge(defaultTheme, {
color: '#333',
borderColor: 'rgb(115, 161, 191)',
borderWidth: 1,
fontSize: 14,
active: {
borderColor: 'rgb(57, 80, 96)'
}
fontSize: 14
},
// 三级及以下节点样式
node: {
fontSize: 12,
color: '#333',
active: {
borderColor: 'rgb(57, 80, 96)'
}
color: '#333'
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: '#333',
color: '#333',
active: {
borderColor: 'rgb(57, 80, 96)'
}
color: '#333'
}
})

20
simple-mind-map/src/themes/brainImpairedPink.js
View File

@ -13,10 +13,7 @@ export default merge(defaultTheme, {
generalizationLineColor: '#333',
// 根节点样式
root: {
fillColor: 'rgb(191, 115, 148)',
active: {
borderColor: 'rgb(96, 57, 74)'
}
fillColor: 'rgb(191, 115, 148)'
},
// 二级节点样式
second: {
@ -24,26 +21,17 @@ export default merge(defaultTheme, {
color: '#333',
borderColor: 'rgb(191, 115, 148)',
borderWidth: 1,
fontSize: 14,
active: {
borderColor: 'rgb(96, 57, 74)'
}
fontSize: 14
},
// 三级及以下节点样式
node: {
fontSize: 12,
color: '#333',
active: {
borderColor: 'rgb(96, 57, 74)'
}
color: '#333'
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: '#333',
color: '#333',
active: {
borderColor: 'rgb(96, 57, 74)'
}
color: '#333'
}
})

25
simple-mind-map/src/themes/classic.js
View File

@ -18,16 +18,13 @@ export default merge(defaultTheme, {
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowQzg5QTQ0NDhENzgxMUUzOENGREE4QTg0RDgzRTZDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowQzg5QTQ0NThENzgxMUUzOENGREE4QTg0RDgzRTZDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkMwOEQ1NDRGOEQ3NzExRTM4Q0ZEQThBODREODNFNkM3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkMwOEQ1NDUwOEQ3NzExRTM4Q0ZEQThBODREODNFNkM3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+e9P33AAAACVJREFUeNpisXJ0YUACTAyoAMr/+eM7EGGRZ4FQ7BycEAZAgAEAHbEGtkoQm/wAAAAASUVORK5CYII=',
// 背景重复
backgroundRepeat: 'repeat',
backgroundSize: 'auto',
// 根节点样式
root: {
fillColor: 'rgb(233, 223, 152)',
color: '#333',
fontSize: 24,
borderRadius: 21,
active: {
fillColor: 'rgb(254, 219, 0)',
borderColor: 'transparent'
}
borderRadius: 21
},
// 二级节点样式
second: {
@ -35,30 +32,18 @@ export default merge(defaultTheme, {
borderColor: 'transparent',
color: '#333',
fontSize: 16,
borderRadius: 10,
active: {
fillColor: 'rgb(254, 219, 0)',
borderColor: 'transparent'
}
borderRadius: 10
},
// 三级及以下节点样式
node: {
fontSize: 12,
color: '#fff',
fontWeight: 'bold',
active: {
fillColor: 'rgb(254, 219, 0)',
borderColor: 'transparent'
}
fontWeight: 'bold'
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: 'transparent',
color: '#333',
active: {
fillColor: 'rgb(254, 219, 0)',
borderColor: 'transparent'
}
color: '#333'
}
})

20
simple-mind-map/src/themes/classic2.js
View File

@ -18,10 +18,7 @@ export default merge(defaultTheme, {
fillColor: 'rgb(18, 187, 55)',
color: '#fff',
fontSize: 24,
borderRadius: 10,
active: {
borderColor: 'rgb(51, 51, 51)'
}
borderRadius: 10
},
// 二级节点样式
second: {
@ -29,27 +26,18 @@ export default merge(defaultTheme, {
borderColor: 'transparent',
color: '#1a1a1a',
fontSize: 18,
borderRadius: 10,
active: {
borderColor: 'rgb(51, 51, 51)'
}
borderRadius: 10
},
// 三级及以下节点样式
node: {
fontSize: 14,
color: '#1a1a1a',
active: {
borderColor: 'rgb(51, 51, 51)'
}
color: '#1a1a1a'
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: 'rgb(51, 51, 51)',
borderWidth: 2,
color: '#1a1a1a',
active: {
borderColor: 'rgb(18, 187, 55)'
}
color: '#1a1a1a'
}
})

20
simple-mind-map/src/themes/classic3.js
View File

@ -20,10 +20,7 @@ export default merge(defaultTheme, {
fontSize: 24,
borderRadius: 10,
borderColor: 'rgb(249, 199, 84)',
borderWidth: 1,
active: {
borderColor: 'rgb(94, 202, 110)'
}
borderWidth: 1
},
// 二级节点样式
second: {
@ -32,27 +29,18 @@ export default merge(defaultTheme, {
borderWidth: 1,
color: '#1a1a1a',
fontSize: 18,
borderRadius: 10,
active: {
borderColor: 'rgb(94, 202, 110)'
}
borderRadius: 10
},
// 三级及以下节点样式
node: {
fontSize: 14,
color: '#1a1a1a',
active: {
borderColor: 'rgb(94, 202, 110)'
}
color: '#1a1a1a'
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: '#1a1a1a',
color: '#1a1a1a',
borderWidth: 2,
active: {
borderColor: 'rgb(94, 202, 110)'
}
borderWidth: 2
}
})

20
simple-mind-map/src/themes/classic4.js
View File

@ -20,10 +20,7 @@ export default merge(defaultTheme, {
fontSize: 24,
borderRadius: 10,
borderColor: 'rgb(189, 197, 201)',
borderWidth: 2,
active: {
borderColor: 'rgb(169, 218, 218)'
}
borderWidth: 2
},
// 二级节点样式
second: {
@ -32,10 +29,7 @@ export default merge(defaultTheme, {
borderWidth: 2,
color: '#fff',
fontSize: 18,
borderRadius: 10,
active: {
borderColor: 'rgb(56, 123, 233)'
}
borderRadius: 10
},
// 三级及以下节点样式
node: {
@ -43,19 +37,13 @@ export default merge(defaultTheme, {
color: 'rgb(30, 53, 86)',
borderColor: 'rgb(30, 53, 86)',
borderWidth: 1,
marginY: 20,
active: {
borderColor: 'rgb(169, 218, 218)'
}
marginY: 20
},
// 概要节点样式
generalization: {
fillColor: 'rgb(56, 123, 233)',
borderColor: 'rgb(56, 123, 233)',
color: '#fff',
borderWidth: 0,
active: {
borderColor: 'rgb(169, 218, 218)'
}
borderWidth: 0
}
})

20
simple-mind-map/src/themes/classicBlue.js
View File

@ -16,10 +16,7 @@ export default merge(defaultTheme, {
// 根节点样式
root: {
fillColor: 'rgb(255, 255, 255)',
color: '#222',
active: {
borderColor: 'rgb(94, 199, 248)'
}
color: '#222'
},
// 二级节点样式
second: {
@ -27,26 +24,17 @@ export default merge(defaultTheme, {
color: '#222',
borderColor: 'rgb(255, 255, 255)',
borderWidth: 1,
fontSize: 14,
active: {
borderColor: 'rgb(94, 199, 248)'
}
fontSize: 14
},
// 三级及以下节点样式
node: {
fontSize: 12,
color: '#333',
active: {
borderColor: 'rgb(94, 199, 248)'
}
color: '#333'
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: 'rgb(51, 51, 51)',
color: '#333',
active: {
borderColor: 'rgb(94, 199, 248)'
}
color: '#333'
}
})

20
simple-mind-map/src/themes/classicGreen.js
View File

@ -14,10 +14,7 @@ export default merge(defaultTheme, {
// 根节点样式
root: {
fillColor: 'rgb(253, 244, 217)',
color: '#222',
active: {
borderColor: 'rgb(94, 199, 248)'
}
color: '#222'
},
// 二级节点样式
second: {
@ -25,27 +22,18 @@ export default merge(defaultTheme, {
color: '#222',
borderColor: 'rgb(242, 200, 104)',
borderWidth: 1,
fontSize: 14,
active: {
borderColor: 'rgb(94, 199, 248)'
}
fontSize: 14
},
// 三级及以下节点样式
node: {
fontSize: 12,
color: '#333',
active: {
borderColor: 'rgb(94, 199, 248)'
}
color: '#333'
},
// 概要节点样式
generalization: {
fillColor: 'rgb(123, 199, 120)',
borderColor: 'transparent',
borderWidth: 2,
color: '#fff',
active: {
borderColor: 'rgb(94, 199, 248)'
}
color: '#fff'
}
})

21
simple-mind-map/src/themes/coffee.js
View File

@ -16,11 +16,7 @@ export default merge(defaultTheme, {
color: '#fff',
borderColor: '',
borderWidth: 0,
fontSize: 24,
active: {
borderColor: 'rgb(173, 123, 91)',
borderWidth: 3
}
fontSize: 24
},
// 二级节点样式
second: {
@ -28,18 +24,12 @@ export default merge(defaultTheme, {
color: 'rgb(125, 86, 42)',
borderColor: '',
borderWidth: 0,
fontSize: 18,
active: {
borderColor: 'rgb(173, 123, 91)'
}
fontSize: 18
},
// 三级及以下节点样式
node: {
fontSize: 14,
color: 'rgb(96, 71, 47)',
active: {
borderColor: 'rgb(173, 123, 91)'
}
color: 'rgb(96, 71, 47)'
},
// 概要节点样式
generalization: {
@ -47,9 +37,6 @@ export default merge(defaultTheme, {
fillColor: 'rgb(255, 249, 239)',
borderColor: 'rgb(173, 123, 91)',
borderWidth: 2,
color: 'rgb(122, 83, 44)',
active: {
borderColor: 'rgb(202, 117, 79)'
}
color: 'rgb(122, 83, 44)'
}
})

21
simple-mind-map/src/themes/courseGreen.js
View File

@ -16,11 +16,7 @@ export default merge(defaultTheme, {
color: '#fff',
borderColor: '',
borderWidth: 0,
fontSize: 24,
active: {
borderColor: 'rgb(173, 91, 12)',
borderWidth: 3
}
fontSize: 24
},
// 二级节点样式
second: {
@ -28,18 +24,12 @@ export default merge(defaultTheme, {
color: 'rgb(50, 113, 96)',
borderColor: 'rgb(113, 195, 169)',
borderWidth: 2,
fontSize: 18,
active: {
borderColor: 'rgb(173, 91, 12)'
}
fontSize: 18
},
// 三级及以下节点样式
node: {
fontSize: 14,
color: 'rgb(10, 59, 43)',
active: {
borderColor: 'rgb(173, 91, 12)'
}
color: 'rgb(10, 59, 43)'
},
// 概要节点样式
generalization: {
@ -47,9 +37,6 @@ export default merge(defaultTheme, {
fillColor: 'rgb(246, 238, 211)',
borderColor: '',
borderWidth: 0,
color: 'rgb(173, 91, 12)',
active: {
borderColor: 'rgb(113, 195, 169)'
}
color: 'rgb(173, 91, 12)'
}
})

20
simple-mind-map/src/themes/dark.js
View File

@ -18,10 +18,7 @@ export default merge(defaultTheme, {
fillColor: 'rgb(28, 178, 43)',
color: '#fff',
fontSize: 24,
borderRadius: 10,
active: {
borderColor: 'rgb(17, 68, 23)'
}
borderRadius: 10
},
// 二级节点样式
second: {
@ -29,26 +26,17 @@ export default merge(defaultTheme, {
color: 'rgb(147,148,149)',
fontSize: 18,
borderRadius: 10,
borderWidth: 0,
active: {
borderColor: 'rgb(17, 68, 23)'
}
borderWidth: 0
},
// 三级及以下节点样式
node: {
fontSize: 14,
color: 'rgb(147, 148, 149)',
active: {
borderColor: 'rgb(17, 68, 23)'
}
color: 'rgb(147, 148, 149)'
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: 'transparent',
color: '#333',
active: {
borderColor: 'rgb(17, 68, 23)'
}
color: '#333'
}
})

22
simple-mind-map/src/themes/dark2.js
View File

@ -17,11 +17,7 @@ export default merge(defaultTheme, {
fillColor: 'rgb(36, 179, 96)',
color: '#fff',
borderColor: '',
borderWidth: 0,
active: {
borderColor: 'rgb(254, 199, 13)',
borderWidth: 3
}
borderWidth: 0
},
// 二级节点样式
second: {
@ -29,28 +25,18 @@ export default merge(defaultTheme, {
color: 'rgb(0, 0, 0)',
borderColor: '',
borderWidth: 0,
fontSize: 14,
active: {
borderColor: 'rgb(36, 179, 96)',
borderWidth: 2
}
fontSize: 14
},
// 三级及以下节点样式
node: {
fontSize: 12,
color: 'rgb(204, 204, 204)',
active: {
borderColor: 'rgb(254, 199, 13)'
}
color: 'rgb(204, 204, 204)'
},
// 概要节点样式
generalization: {
fillColor: 'transparent',
borderColor: 'rgb(255, 119, 34)',
borderWidth: 2,
color: 'rgb(204, 204, 204)',
active: {
borderColor: 'rgb(254, 199, 13)'
}
color: 'rgb(204, 204, 204)'
}
})

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

@ -70,12 +70,7 @@ export default {
borderWidth: 0,
borderDasharray: 'none',
borderRadius: 5,
textDecoration: 'none',
active: {
borderColor: 'rgb(57, 80, 96)',
borderWidth: 3,
borderDasharray: 'none'
}
textDecoration: 'none'
},
// 二级节点样式
second: {
@ -93,12 +88,7 @@ export default {
borderWidth: 1,
borderDasharray: 'none',
borderRadius: 5,
textDecoration: 'none',
active: {
borderColor: 'rgb(57, 80, 96)',
borderWidth: 3,
borderDasharray: 'none'
}
textDecoration: 'none'
},
// 三级及以下节点样式
node: {
@ -116,12 +106,7 @@ export default {
borderWidth: 0,
borderRadius: 5,
borderDasharray: 'none',
textDecoration: 'none',
active: {
borderColor: 'rgb(57, 80, 96)',
borderWidth: 3,
borderDasharray: 'none'
}
textDecoration: 'none'
},
// 概要节点样式
generalization: {
@ -139,12 +124,7 @@ export default {
borderWidth: 1,
borderDasharray: 'none',
borderRadius: 5,
textDecoration: 'none',
active: {
borderColor: 'rgb(57, 80, 96)',
borderWidth: 3,
borderDasharray: 'none'
}
textDecoration: 'none'
}
}
@ -178,7 +158,8 @@ const nodeSizeIndependenceList = [
'backgroundImage',
'backgroundRepeat',
'backgroundPosition',
'backgroundSize'
'backgroundSize',
'rootLineKeepSameInCurve'
]
export const checkIsNodeSizeIndependenceConfig = (config) => {
let keys = Object.keys(config)

20
simple-mind-map/src/themes/earthYellow.js
View File

@ -13,10 +13,7 @@ export default merge(defaultTheme, {
generalizationLineColor: '#333',
// 根节点样式
root: {
fillColor: 'rgb(191, 147, 115)',
active: {
borderColor: 'rgb(96, 73, 57)'
}
fillColor: 'rgb(191, 147, 115)'
},
// 二级节点样式
second: {
@ -24,26 +21,17 @@ export default merge(defaultTheme, {
color: '#333',
borderColor: 'rgb(191, 147, 115)',
borderWidth: 1,
fontSize: 14,
active: {
borderColor: 'rgb(96, 73, 57)'
}
fontSize: 14
},
// 三级及以下节点样式
node: {
fontSize: 12,
color: '#333',
active: {
borderColor: 'rgb(96, 73, 57)'
}
color: '#333'
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: '#333',
color: '#333',
active: {
borderColor: 'rgb(96, 73, 57)'
}
color: '#333'
}
})

7
simple-mind-map/src/themes/freshGreen.js
View File

@ -26,11 +26,6 @@ export default merge(defaultTheme, {
generalization: {
fillColor: '#fff',
borderColor: '#333',
color: '#333',
active: {
borderColor: 'rgb(57, 80, 96)',
borderWidth: 3,
borderDasharray: 'none'
}
color: '#333'
}
})

20
simple-mind-map/src/themes/freshRed.js
View File

@ -13,10 +13,7 @@ export default merge(defaultTheme, {
generalizationLineColor: '#333',
// 根节点样式
root: {
fillColor: 'rgb(191, 115, 115)',
active: {
borderColor: 'rgb(96, 57, 57)'
}
fillColor: 'rgb(191, 115, 115)'
},
// 二级节点样式
second: {
@ -24,26 +21,17 @@ export default merge(defaultTheme, {
color: '#333',
borderColor: 'rgb(191, 115, 115)',
borderWidth: 1,
fontSize: 14,
active: {
borderColor: 'rgb(96, 57, 57)'
}
fontSize: 14
},
// 三级及以下节点样式
node: {
fontSize: 12,
color: '#333',
active: {
borderColor: 'rgb(96, 57, 57)'
}
color: '#333'
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: '#333',
color: '#333',
active: {
borderColor: 'rgb(96, 57, 57)'
}
color: '#333'
}
})

22
simple-mind-map/src/themes/gold.js
View File

@ -17,11 +17,7 @@ export default merge(defaultTheme, {
fillColor: 'rgb(51, 56, 62)',
color: 'rgb(247, 208, 160)',
borderColor: '',
borderWidth: 0,
active: {
borderColor: 'rgb(247, 208, 160)',
borderWidth: 3
}
borderWidth: 0
},
// 二级节点样式
second: {
@ -29,27 +25,17 @@ export default merge(defaultTheme, {
color: 'rgb(81, 58, 42)',
borderColor: '',
borderWidth: 0,
fontSize: 14,
active: {
borderColor: 'rgb(51, 56, 62)',
borderWidth: 2
}
fontSize: 14
},
// 三级及以下节点样式
node: {
fontSize: 12,
color: '#222',
active: {
borderColor: 'rgb(0, 192, 184)'
}
color: '#222'
},
// 概要节点样式
generalization: {
fillColor: 'rgb(127, 93, 64)',
borderColor: 'transparent',
color: 'rgb(255, 214, 175)',
active: {
borderColor: 'rgb(51, 56, 62)'
}
color: 'rgb(255, 214, 175)'
}
})

22
simple-mind-map/src/themes/greenLeaf.js
View File

@ -17,11 +17,7 @@ export default merge(defaultTheme, {
fillColor: 'rgb(25, 193, 73)',
color: '#fff',
borderColor: '',
borderWidth: 0,
active: {
borderColor: '#222',
borderWidth: 3
}
borderWidth: 0
},
// 二级节点样式
second: {
@ -29,28 +25,18 @@ export default merge(defaultTheme, {
color: 'rgb(69, 149, 96)',
borderColor: '',
borderWidth: 0,
fontSize: 14,
active: {
borderColor: 'rgb(25, 193, 73)',
borderWidth: 2
}
fontSize: 14
},
// 三级及以下节点样式
node: {
fontSize: 12,
color: '#222',
active: {
borderColor: 'rgb(25, 193, 73)'
}
color: '#222'
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: 'rgb(251, 158, 0)',
borderWidth: 2,
color: 'rgb(51, 51, 51)',
active: {
borderColor: 'rgb(25, 193, 73)'
}
color: 'rgb(51, 51, 51)'
}
})

22
simple-mind-map/src/themes/lateNightOffice.js
View File

@ -18,11 +18,7 @@ export default merge(defaultTheme, {
color: 'rgb(255, 255, 255)',
borderColor: '',
borderWidth: 0,
fontSize: 24,
active: {
borderColor: 'rgb(255, 119, 34)',
borderWidth: 3
}
fontSize: 24
},
// 二级节点样式
second: {
@ -30,19 +26,12 @@ export default merge(defaultTheme, {
color: 'rgb(209, 210, 210)',
borderColor: '',
borderWidth: 0,
fontSize: 18,
active: {
borderColor: 'rgb(255, 119, 34)',
borderWidth: 3
}
fontSize: 18
},
// 三级及以下节点样式
node: {
fontSize: 14,
color: 'rgb(204, 204, 204)',
active: {
borderColor: 'rgb(255, 119, 34)'
}
color: 'rgb(204, 204, 204)'
},
// 概要节点样式
generalization: {
@ -50,9 +39,6 @@ export default merge(defaultTheme, {
fillColor: 'rgb(255, 119, 34)',
borderColor: '',
borderWidth: 2,
color: '#fff',
active: {
borderColor: 'rgb(23, 153, 243)'
}
color: '#fff'
}
})

20
simple-mind-map/src/themes/minions.js
View File

@ -16,10 +16,7 @@ export default merge(defaultTheme, {
root: {
fillColor: 'rgb(55, 165, 255)',
borderColor: 'rgb(51, 51, 51)',
borderWidth: 3,
active: {
borderColor: 'rgb(255, 160, 36)'
}
borderWidth: 3
},
// 二级节点样式
second: {
@ -27,26 +24,17 @@ export default merge(defaultTheme, {
color: '#222',
borderColor: 'rgb(51, 51, 51)',
borderWidth: 3,
fontSize: 14,
active: {
borderColor: 'rgb(55, 165, 255)'
}
fontSize: 14
},
// 三级及以下节点样式
node: {
fontSize: 12,
color: '#222',
active: {
borderColor: 'rgb(55, 165, 255)'
}
color: '#222'
},
// 概要节点样式
generalization: {
borderColor: '#222',
borderWidth: 3,
color: '#222',
active: {
borderColor: 'rgb(55, 165, 255)'
}
color: '#222'
}
})

21
simple-mind-map/src/themes/mint.js
View File

@ -16,11 +16,7 @@ export default merge(defaultTheme, {
root: {
fillColor: 'rgb(0, 192, 184)',
borderColor: '',
borderWidth: 0,
active: {
borderColor: 'rgb(255, 160, 36)',
borderWidth: 3
}
borderWidth: 0
},
// 二级节点样式
second: {
@ -28,26 +24,17 @@ export default merge(defaultTheme, {
color: '#222',
borderColor: 'rgb(184, 235, 233)',
borderWidth: 2,
fontSize: 14,
active: {
borderColor: 'rgb(0, 192, 184)'
}
fontSize: 14
},
// 三级及以下节点样式
node: {
fontSize: 12,
color: '#222',
active: {
borderColor: 'rgb(0, 192, 184)'
}
color: '#222'
},
// 概要节点样式
generalization: {
fillColor: 'rgb(90, 206, 241)',
borderColor: 'transparent',
color: '#fff',
active: {
borderColor: 'rgb(0, 192, 184)'
}
color: '#fff'
}
})

21
simple-mind-map/src/themes/orangeJuice.js
View File

@ -18,11 +18,7 @@ export default merge(defaultTheme, {
color: '#110501',
borderColor: '#ff6811',
borderWidth: 0,
fontSize: 24,
active: {
borderColor: '#a9a4a9',
borderWidth: 3
}
fontSize: 24
},
// 二级节点样式
second: {
@ -30,18 +26,12 @@ export default merge(defaultTheme, {
color: '#a9a4a9',
borderColor: '#ff6811',
borderWidth: 2,
fontSize: 18,
active: {
borderColor: '#110501'
}
fontSize: 18
},
// 三级及以下节点样式
node: {
fontSize: 14,
color: '#a9a4a9',
active: {
borderColor: '#ff6811'
}
color: '#a9a4a9'
},
// 概要节点样式
generalization: {
@ -49,9 +39,6 @@ export default merge(defaultTheme, {
fillColor: '',
borderColor: '#ff6811',
borderWidth: 2,
color: '#a9a4a9',
active: {
borderColor: '#110501'
}
color: '#a9a4a9'
}
})

23
simple-mind-map/src/themes/pinkGrape.js
View File

@ -16,11 +16,7 @@ export default merge(defaultTheme, {
root: {
fillColor: 'rgb(139, 109, 225)',
borderColor: '',
borderWidth: 0,
active: {
borderColor: 'rgb(243, 104, 138)',
borderWidth: 2
}
borderWidth: 0
},
// 二级节点样式
second: {
@ -28,28 +24,17 @@ export default merge(defaultTheme, {
color: '#fff',
borderColor: '',
borderWidth: 0,
fontSize: 14,
active: {
borderColor: 'rgb(139, 109, 225)',
borderWidth: 2
}
fontSize: 14
},
// 三级及以下节点样式
node: {
fontSize: 12,
color: '#222',
active: {
borderColor: 'rgb(139, 109, 225)'
}
color: '#222'
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: 'transparent',
color: '#222',
active: {
borderColor: 'rgb(139, 109, 225)',
borderWidth: 2
}
color: '#222'
}
})

21
simple-mind-map/src/themes/redSpirit.js
View File

@ -18,11 +18,7 @@ export default merge(defaultTheme, {
color: 'rgb(255, 233, 157)',
borderColor: '',
borderWidth: 0,
fontSize: 24,
active: {
borderColor: 'rgb(255, 233, 157)',
borderWidth: 3
}
fontSize: 24
},
// 二级节点样式
second: {
@ -30,18 +26,12 @@ export default merge(defaultTheme, {
color: 'rgb(211, 58, 21)',
borderColor: 'rgb(222, 101, 85)',
borderWidth: 2,
fontSize: 18,
active: {
borderColor: 'rgb(255, 233, 157)'
}
fontSize: 18
},
// 三级及以下节点样式
node: {
fontSize: 14,
color: 'rgb(144, 71, 43)',
active: {
borderColor: 'rgb(255, 233, 157)'
}
color: 'rgb(144, 71, 43)'
},
// 概要节点样式
generalization: {
@ -49,9 +39,6 @@ export default merge(defaultTheme, {
fillColor: 'rgb(255, 247, 211)',
borderColor: 'rgb(255, 202, 162)',
borderWidth: 2,
color: 'rgb(187, 101, 69)',
active: {
borderColor: 'rgb(222, 101, 85)'
}
color: 'rgb(187, 101, 69)'
}
})

20
simple-mind-map/src/themes/romanticPurple.js
View File

@ -13,10 +13,7 @@ export default merge(defaultTheme, {
generalizationLineColor: '#333',
// 根节点样式
root: {
fillColor: 'rgb(123, 115, 191)',
active: {
borderColor: 'rgb(61, 57, 96)'
}
fillColor: 'rgb(123, 115, 191)'
},
// 二级节点样式
second: {
@ -24,26 +21,17 @@ export default merge(defaultTheme, {
color: '#333',
borderColor: 'rgb(123, 115, 191)',
borderWidth: 1,
fontSize: 14,
active: {
borderColor: 'rgb(61, 57, 96)'
}
fontSize: 14
},
// 三级及以下节点样式
node: {
fontSize: 12,
color: '#333',
active: {
borderColor: 'rgb(61, 57, 96)'
}
color: '#333'
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: '#333',
color: '#333',
active: {
borderColor: 'rgb(61, 57, 96)'
}
color: '#333'
}
})

20
simple-mind-map/src/themes/simpleBlack.js
View File

@ -16,10 +16,7 @@ export default merge(defaultTheme, {
color: 'rgb(34, 34, 34)',
borderColor: 'rgb(34, 34, 34)',
borderWidth: 3,
fontSize: 24,
active: {
borderColor: '#a13600'
}
fontSize: 24
},
// 二级节点样式
second: {
@ -27,18 +24,12 @@ export default merge(defaultTheme, {
color: 'rgb(34, 34, 34)',
borderColor: 'rgb(34, 34, 34)',
borderWidth: 3,
fontSize: 18,
active: {
borderColor: '#a13600'
}
fontSize: 18
},
// 三级及以下节点样式
node: {
fontSize: 14,
color: 'rgb(34, 34, 34)',
active: {
borderColor: '#a13600'
}
color: 'rgb(34, 34, 34)'
},
// 概要节点样式
generalization: {
@ -46,9 +37,6 @@ export default merge(defaultTheme, {
fillColor: 'transparent',
borderColor: 'rgb(34, 34, 34)',
borderWidth: 2,
color: 'rgb(34, 34, 34)',
active: {
borderColor: '#a13600'
}
color: 'rgb(34, 34, 34)'
}
})

22
simple-mind-map/src/themes/skyGreen.js
View File

@ -17,11 +17,7 @@ export default merge(defaultTheme, {
fillColor: '#fff',
borderColor: '',
borderWidth: 0,
color: 'rgb(65, 89, 158)',
active: {
borderColor: 'rgb(251, 227, 188)',
borderWidth: 3
}
color: 'rgb(65, 89, 158)'
},
// 二级节点样式
second: {
@ -29,27 +25,17 @@ export default merge(defaultTheme, {
color: 'rgb(65, 89, 158)',
borderColor: '',
borderWidth: 0,
fontSize: 14,
active: {
borderColor: '#fff',
borderWidth: 2
}
fontSize: 14
},
// 三级及以下节点样式
node: {
fontSize: 12,
color: 'rgb(65, 89, 158)',
active: {
borderColor: 'rgb(251, 227, 188)'
}
color: 'rgb(65, 89, 158)'
},
// 概要节点样式
generalization: {
fillColor: '#fff',
borderColor: 'transparent',
color: 'rgb(65, 89, 158)',
active: {
borderColor: 'rgb(251, 227, 188)'
}
color: 'rgb(65, 89, 158)'
}
})

22
simple-mind-map/src/themes/vitalityOrange.js
View File

@ -17,11 +17,7 @@ export default merge(defaultTheme, {
fillColor: 'rgb(255, 112, 52)',
color: '#fff',
borderColor: '',
borderWidth: 0,
active: {
borderColor: 'rgb(51, 51, 51)',
borderWidth: 3
}
borderWidth: 0
},
// 二级节点样式
second: {
@ -29,27 +25,17 @@ export default merge(defaultTheme, {
color: 'rgb(51, 51, 51)',
borderColor: '',
borderWidth: 0,
fontSize: 14,
active: {
borderColor: 'rgb(255, 112, 52)',
borderWidth: 2
}
fontSize: 14
},
// 三级及以下节点样式
node: {
fontSize: 12,
color: '#222',
active: {
borderColor: 'rgb(255, 112, 52)'
}
color: '#222'
},
// 概要节点样式
generalization: {
fillColor: 'rgb(255, 222, 69)',
borderColor: 'transparent',
color: 'rgb(51, 51, 51)',
active: {
borderColor: 'rgb(255, 112, 52)'
}
color: 'rgb(51, 51, 51)'
}
})

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

@ -632,3 +632,28 @@ export const isMobile = () => {
navigator.userAgent
)
}
// 获取对象改变了的的属性
export const getObjectChangedProps = (oldObject, newObject) => {
const res = {}
Object.keys(newObject).forEach((prop) => {
const oldVal = oldObject[prop]
const newVal = newObject[prop]
if (getType(oldVal) !== getType(newVal)) {
res[prop] = newVal
return
}
if (getType(oldVal) === 'Object') {
if (JSON.stringify(oldVal) !== JSON.stringify(newVal)) {
res[prop] = newVal
return
}
} else {
if (oldVal !== newVal) {
res[prop] = newVal
return
}
}
})
return res
}

BIN
web/src/assets/avatar/南风.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

20
web/src/customThemes/darkNightLceBlade.js
View File

@ -19,10 +19,7 @@ export default {
borderColor: '#fff',
borderWidth: 3,
fontSize: 24,
shape: 'parallelogram',
active: {
borderColor: 'rgba(2, 167, 240, 0.5)',
}
shape: 'parallelogram'
},
// 二级节点样式
second: {
@ -31,18 +28,12 @@ export default {
borderColor: '#fff',
borderWidth: 3,
fontSize: 18,
shape: 'diamond',
active: {
borderColor: 'rgba(2, 167, 240, 0.5)',
}
shape: 'diamond'
},
// 三级及以下节点样式
node: {
fontSize: 14,
color: '#fff',
active: {
borderColor: 'rgba(2, 167, 240, 0.5)'
}
color: '#fff'
},
// 概要节点样式
generalization: {
@ -50,10 +41,7 @@ export default {
fillColor: '#fff',
borderColor: 'rgb(0, 117, 255)',
borderWidth: 2,
color: 'rgb(0, 21, 21)',
active: {
borderColor: 'rgb(0, 243, 255)'
}
color: 'rgb(0, 21, 21)'
}
}

20
web/src/customThemes/lemonBubbles.js
View File

@ -15,10 +15,7 @@ export default {
borderColor: 'rgb(26, 26, 26)',
borderWidth: 3,
fontSize: 24,
shape: 'roundedRectangle',
active: {
borderColor: 'rgb(235, 255, 187)',
}
shape: 'roundedRectangle'
},
// 二级节点样式
second: {
@ -27,18 +24,12 @@ export default {
borderColor: 'rgb(51, 51, 51)',
borderWidth: 3,
fontSize: 18,
shape: 'roundedRectangle',
active: {
borderColor: 'rgb(39, 222, 232)',
}
shape: 'roundedRectangle'
},
// 三级及以下节点样式
node: {
fontSize: 14,
color: 'rgb(0, 0, 0)',
active: {
borderColor: 'rgb(39, 222, 232)'
}
color: 'rgb(0, 0, 0)'
},
// 概要节点样式
generalization: {
@ -46,10 +37,7 @@ export default {
fillColor: '#fff',
borderColor: 'rgb(26, 26, 26)',
borderWidth: 2,
color: 'rgb(26, 26, 26)',
active: {
borderColor: 'rgb(39, 222, 232)'
}
color: 'rgb(26, 26, 26)'
}
}

20
web/src/customThemes/morandi.js
View File

@ -19,10 +19,7 @@ export default {
borderColor: 'rgb(207, 121, 105)',
borderWidth: 3,
fontSize: 24,
shape: 'roundedRectangle',
active: {
borderColor: 'rgb(172, 202, 199)',
}
shape: 'roundedRectangle'
},
// 二级节点样式
second: {
@ -31,18 +28,12 @@ export default {
borderColor: 'rgb(222, 186, 183)',
borderWidth: 3,
fontSize: 18,
shape: 'roundedRectangle',
active: {
borderColor: 'rgb(172, 202, 199)',
}
shape: 'roundedRectangle'
},
// 三级及以下节点样式
node: {
fontSize: 14,
color: 'rgb(131, 90, 64)',
active: {
borderColor: 'rgb(172, 202, 199)'
}
color: 'rgb(131, 90, 64)'
},
// 概要节点样式
generalization: {
@ -50,10 +41,7 @@ export default {
fillColor: 'rgb(172, 202, 199)',
borderColor: 'rgb(172, 202, 199)',
borderWidth: 2,
color: 'rgb(91, 102, 97)',
active: {
borderColor: 'rgb(207, 121, 105)'
}
color: 'rgb(91, 102, 97)'
}
}

20
web/src/customThemes/neonLamp.js
View File

@ -19,10 +19,7 @@ export default {
borderColor: 'rgb(255, 0, 214)',
borderWidth: 3,
fontSize: 24,
shape: 'roundedRectangle',
active: {
borderColor: 'rgb(255, 181, 0)',
}
shape: 'roundedRectangle'
},
// 二级节点样式
second: {
@ -30,18 +27,12 @@ export default {
color: 'rgb(248, 177, 237)',
borderColor: '',
borderWidth: 3,
fontSize: 18,
active: {
borderColor: 'rgb(255, 181, 0)',
}
fontSize: 18
},
// 三级及以下节点样式
node: {
fontSize: 14,
color: '#fff',
active: {
borderColor: 'rgb(255, 181, 0)'
}
color: '#fff'
},
// 概要节点样式
generalization: {
@ -49,10 +40,7 @@ export default {
fillColor: '#fff',
borderColor: 'rgb(255, 181, 0)',
borderWidth: 2,
color: 'rgb(17, 17, 84)',
active: {
borderColor: 'rgb(255, 0, 214)'
}
color: 'rgb(17, 17, 84)'
}
}

20
web/src/customThemes/oreo.js
View File

@ -13,10 +13,7 @@ export default {
color: '#fff',
borderColor: 'rgb(22, 22, 22)',
borderWidth: 3,
fontSize: 24,
active: {
borderColor: '#a13600',
}
fontSize: 24
},
// 二级节点样式
second: {
@ -25,18 +22,12 @@ export default {
borderColor: '',
borderWidth: 3,
fontSize: 18,
shape: 'roundedRectangle',
active: {
borderColor: 'rgb(22, 22, 22)',
}
shape: 'roundedRectangle'
},
// 三级及以下节点样式
node: {
fontSize: 14,
color: 'rgb(0, 0, 0)',
active: {
borderColor: 'rgb(22, 22, 22)'
}
color: 'rgb(0, 0, 0)'
},
// 概要节点样式
generalization: {
@ -44,9 +35,6 @@ export default {
fillColor: 'transparent',
borderColor: 'rgb(34, 34, 34)',
borderWidth: 2,
color: 'rgb(34, 34, 34)',
active: {
borderColor: '#a13600'
}
color: 'rgb(34, 34, 34)'
}
}

20
web/src/customThemes/rose.js
View File

@ -15,10 +15,7 @@ export default {
borderColor: 'rgb(18, 187, 55)',
borderWidth: 3,
fontSize: 24,
shape: 'roundedRectangle',
active: {
borderColor: 'rgb(136, 100, 0)',
}
shape: 'roundedRectangle'
},
// 二级节点样式
second: {
@ -27,18 +24,12 @@ export default {
borderColor: '',
borderWidth: 3,
fontSize: 18,
shape: 'roundedRectangle',
active: {
borderColor: 'rgb(254, 92, 92)',
}
shape: 'roundedRectangle'
},
// 三级及以下节点样式
node: {
fontSize: 14,
color: 'rgb(26, 26, 26)',
active: {
borderColor: 'rgb(209, 237, 176)'
}
color: 'rgb(26, 26, 26)'
},
// 概要节点样式
generalization: {
@ -46,10 +37,7 @@ export default {
fillColor: '#fff',
borderColor: 'rgb(136, 100, 0)',
borderWidth: 2,
color: 'rgb(136, 100, 0)',
active: {
borderColor: 'rgb(254, 92, 92)'
}
color: 'rgb(136, 100, 0)'
}
}

20
web/src/customThemes/seaBlueLine.js
View File

@ -15,10 +15,7 @@ export default {
borderColor: '#fff',
borderWidth: 3,
fontSize: 24,
shape: 'roundedRectangle',
active: {
borderColor: 'rgb(0, 155, 255)',
}
shape: 'roundedRectangle'
},
// 二级节点样式
second: {
@ -27,18 +24,12 @@ export default {
borderColor: '',
borderWidth: 3,
fontSize: 18,
shape: 'roundedRectangle',
active: {
borderColor: 'rgb(96, 189, 255)',
}
shape: 'roundedRectangle'
},
// 三级及以下节点样式
node: {
fontSize: 14,
color: 'rgb(0, 66, 157)',
active: {
borderColor: 'rgb(96, 189, 255)'
}
color: 'rgb(0, 66, 157)'
},
// 概要节点样式
generalization: {
@ -46,10 +37,7 @@ export default {
fillColor: '#fff',
borderColor: 'rgb(0, 155, 255)',
borderWidth: 2,
color: 'rgb(0, 155, 255)',
active: {
borderColor: 'rgba(2, 167, 240, 0.5)'
}
color: 'rgb(0, 155, 255)'
}
}

20
web/src/customThemes/shallowSea.js
View File

@ -15,10 +15,7 @@ export default {
borderColor: 'rgb(51, 149, 255)',
borderWidth: 3,
fontSize: 24,
shape: 'roundedRectangle',
active: {
borderColor: 'rgb(255, 168, 101)',
}
shape: 'roundedRectangle'
},
// 二级节点样式
second: {
@ -26,18 +23,12 @@ export default {
color: '#fff',
borderColor: '',
borderWidth: 3,
fontSize: 18,
active: {
borderColor: 'rgb(255, 168, 101)',
}
fontSize: 18
},
// 三级及以下节点样式
node: {
fontSize: 14,
color: 'rgb(0, 0, 0)',
active: {
borderColor: 'rgb(255, 168, 101)'
}
color: 'rgb(0, 0, 0)'
},
// 概要节点样式
generalization: {
@ -45,10 +36,7 @@ export default {
fillColor: '#fff',
borderColor: 'rgb(255, 168, 101)',
borderWidth: 2,
color: '#000',
active: {
borderColor: 'rgb(51, 149, 255)'
}
color: '#000'
}
}

3
web/src/lang/en_us.js
View File

@ -50,7 +50,8 @@ export default {
rootStyle: 'Root Node',
associativeLineText: 'Associative line text',
fontFamily: 'Font family',
fontSize: 'Font size'
fontSize: 'Font size',
isShowScrollbar: 'Is show scrollbar'
},
color: {
moreColor: 'More color'

3
web/src/lang/zh_cn.js
View File

@ -50,7 +50,8 @@ export default {
rootStyle: '根节点',
associativeLineText: '关联线文字',
fontFamily: '字体',
fontSize: '字号'
fontSize: '字号',
isShowScrollbar: '是否显示滚动条'
},
color: {
moreColor: '更多颜色'

3
web/src/pages/Doc/catalogList.js
View File

@ -11,7 +11,7 @@ let langList = [
}
]
let StartList = ['introduction', 'start', 'deploy', 'client', 'translate', 'changelog']
let CourseList = new Array(22).fill(0).map((_, index) => {
let CourseList = new Array(24).fill(0).map((_, index) => {
return 'course' + (index + 1)
})
let APIList = [
@ -34,6 +34,7 @@ let APIList = [
'nodeImgAdjust',
'search',
'painter',
'scrollbar',
'xmind',
'markdown',
'utils'

50
web/src/pages/Doc/en/changelog/index.md
View File

@ -1,5 +1,55 @@
# Changelog
## 0.7.0
Breaking change: Removed the section of node activation style in the theme file, Setting the activation style of nodes is no longer supported, and the activation effect has been changed to a unified node outer border style, while also supporting the mouse hover effect.
Fix:
> 1.Fix rendering anomalies when the node border size is relatively large.
>
> 2.Fixed an issue where the node style of the associated line will not be updated when switching themes.
>
> 3.Fix that selecting all did not trigger node_ The issue with active events.
新增：
> 1.When folding nodes, displays the number of collapsed nodes.
>
> 2.Support the position of the endpoint of the associated line to follow mouse drag changes.
>
> 3.Add a scrollbar plugin.
>
> 4.Support opening specified online files through fileURL query parameters in URLs.
>
> 5.The fishbone diagram supports setting node margins.
>
> 6.By default, double-click to reset the canvas.
>
> 7.Modify the parameters of the export image method, and when exporting PDF, if the size of the mind map is smaller than A4 paper, do not rotate the direction.
>
> 8.Improve the clarity of exported images and PDFs on high-definition screens.
>
> 9.Add a pre destruction lifecycle function to the plugin to address the issue of some side effects that were not cleared during the destruction of the mind map.
>
> 10.Optimize the settings of the basic style and do not trigger full rendering when modifying theme attributes that do not affect size.
>
> 11.Prohibit triggering node right-click menu events when multiple node selections are completed, to avoid triggering the right-click menu display.
>
> 12.Optimize the Select plugin so that if multiple selected nodes do not change, the activation event is not triggered.
>
> 13.The activation node list thrown by event node_active no longer directly references the internal activation list.
>
> 14.Optimize the logic of mouse button down node events, and support dragging the canvas by holding down the root node with the right mouse button in the right-click drag and drop canvas mode.
Demo：
> 1.Do not directly reference the internal activation node list to optimize performance.
>
> 2.Support configuring whether to display scrollbars.
>
> 3.Delete the active node configuration in the sidebar node style configuration section.
## 0.6.17
Fix:

31
web/src/pages/Doc/en/changelog/index.vue
View File

@ -1,6 +1,37 @@
<template>
<div>
<h1>Changelog</h1>
<h2>0.7.0</h2>
<p>Breaking change: Removed the section of node activation style in the theme file, Setting the activation style of nodes is no longer supported, and the activation effect has been changed to a unified node outer border style, while also supporting the mouse hover effect.</p>
<p>Fix:</p>
<blockquote>
<p>1.Fix rendering anomalies when the node border size is relatively large.</p>
<p>2.Fixed an issue where the node style of the associated line will not be updated when switching themes.</p>
<p>3.Fix that selecting all did not trigger node_ The issue with active events.</p>
</blockquote>
<p>新增：</p>
<blockquote>
<p>1.When folding nodes, displays the number of collapsed nodes.</p>
<p>2.Support the position of the endpoint of the associated line to follow mouse drag changes.</p>
<p>3.Add a scrollbar plugin.</p>
<p>4.Support opening specified online files through fileURL query parameters in URLs.</p>
<p>5.The fishbone diagram supports setting node margins.</p>
<p>6.By default, double-click to reset the canvas.</p>
<p>7.Modify the parameters of the export image method, and when exporting PDF, if the size of the mind map is smaller than A4 paper, do not rotate the direction.</p>
<p>8.Improve the clarity of exported images and PDFs on high-definition screens.</p>
<p>9.Add a pre destruction lifecycle function to the plugin to address the issue of some side effects that were not cleared during the destruction of the mind map.</p>
<p>10.Optimize the settings of the basic style and do not trigger full rendering when modifying theme attributes that do not affect size.</p>
<p>11.Prohibit triggering node right-click menu events when multiple node selections are completed, to avoid triggering the right-click menu display.</p>
<p>12.Optimize the Select plugin so that if multiple selected nodes do not change, the activation event is not triggered.</p>
<p>13.The activation node list thrown by event node_active no longer directly references the internal activation list.</p>
<p>14.Optimize the logic of mouse button down node events, and support dragging the canvas by holding down the root node with the right mouse button in the right-click drag and drop canvas mode.</p>
</blockquote>
<p>Demo：</p>
<blockquote>
<p>1.Do not directly reference the internal activation node list to optimize performance.</p>
<p>2.Support configuring whether to display scrollbars.</p>
<p>3.Delete the active node configuration in the sidebar node style configuration section.</p>
</blockquote>
<h2>0.6.17</h2>
<p>Fix:</p>
<blockquote>

14
web/src/pages/Doc/en/constructor/index.md
View File

@ -48,8 +48,10 @@ const mindMap = new MindMap({
| mousewheelZoomActionReverse（v0.6.5+） | Boolean | false | When `mousewheelAction` is set to `zoom`, the default scrolling forward is to zoom out, and scrolling backward is to zoom in. If this property is set to true, it will be reversed | |
| defaultInsertSecondLevelNodeText（v0.4.7+） | String | 二级节点 | Text of the default inserted secondary node | |
| defaultInsertBelowSecondLevelNodeText（v0.4.7+） | String | 分支主题 | Text for nodes below the second level inserted by default | |
| expandBtnStyle（v0.5.0+） | Object | { color: '#808080', fill: '#fff' } | Expand the color of the stow button | |
| expandBtnStyle（v0.5.0+） | Object | { color: '#808080', fill: '#fff', fontSize: 13, strokeColor: '#333333' } | Expand the color of the stow button, (The fontSize and strokeColor fields were added in version 0.7.0+to set the text style for displaying the number of nodes when folded) | |
| expandBtnIcon（v0.5.0+） | Object | { open: '', close: '' } | Customize the icon of the expand/collapse button, and you can transfer the svg string of the icon | |
| expandBtnNumHandler（v0.7.0+） | Function | | Used to customize the content of displaying the number of nodes when folding, receiving a parameter that represents the instance of the folding node, and returning a number or string that represents the final displayed content. For example, when the number is greater than 99, 99 can be displayed+ | |
| isShowExpandNum（v0.7.0+） | Boolean | true | Display the number of folded nodes when they are folded up | |
| enableShortcutOnlyWhenMouseInSvg（v0.5.1+） | Boolean | true | Only respond to shortcut key events when the mouse is inside the canvas | |
| enableNodeTransitionMove（v0.5.1+）（v0.6.7+ is remove this feature） | Boolean | true | Whether to enable node animation transition | |
| nodeTransitionMoveDuration（v0.5.1+）（v0.6.7+ is remove this feature） | Number | 300 | If node animation transition is enabled, the transition time can be set using this attribute, in milliseconds | |
@ -80,7 +82,11 @@ const mindMap = new MindMap({
| errorHandler（v0.6.15+） | Function | | Custom error handling functions currently only throw some asynchronous logic errors. Can pass a function that takes two parameters, the first being the wrong type and the second being the wrong object | |
| disableMouseWheelZoom（v0.6.15+） | Boolean | false | Prohibit mouse wheel scaling, you can still use the API for scaling | |
| resetCss（v0.6.16+） | String | * { margin: 0; padding: 0; box-sizing: border-box; } | When exporting images and SVGs, the default style overlay for rich text node content, which is embedded in HTML nodes in SVGs, will occur. If not overlaid, the node content will be offset | |
| enableDblclickReset（v0.6.17+） | Boolean | true | Turn on the mouse and double-click to reset the position and zoom of the mind map | |
| enableDblclickReset（v0.6.17+） | Boolean | true(v0.7.0+changed to false) | Turn on the mouse and double-click to reset the position and zoom of the mind map | |
| minExportImgCanvasScale（v0.7.0+） | Number | 2 | The scaling factor of canvas when exporting images and PDFs, which is set to the maximum value of window.devicePixelRatio to improve image clarity | |
| hoverRectColor（v0.7.0+） | String | rgb(94, 200, 248) | The node mouse hover and the rectangular border color displayed when activated will add a transparency of 0.6 when hovering | |
| hoverRectPadding（v0.7.0+） | Number | 2 | The distance between the node mouse hover and the displayed rectangular border when activated and the node content | |
| selectTextOnEnterEditText（v0.7.0+） | Boolean | true | Is the text selected by default when double-clicking a node to enter node text editing? By default, it will only be selected when creating a new node | |
### Watermark config
@ -337,8 +343,8 @@ redo. All commands are as follows:
| DOWN_NODE | Move node down, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective. Using this command on the root node or the last node in the list will be invalid | |
| REMOVE_NODE | Remove node, the active node or appoint node will be the operation node | appointNodes（v0.4.7+, Optional, appoint node, Specifying multiple nodes can pass an array） |
| PASTE_NODE | Paste node to a node, the active node will be the operation node | data (the node data to paste, usually obtained through the renderer.copyNode() and renderer.cutNode() methods) |
| SET_NODE_STYLE | Modify node single style | node (the node to set the style of), prop (style property), value (style property value), isActive (boolean, whether the style being set is for the active state) |
| SET_NODE_STYLEs（v0.6.12+） | Modify multiple styles of nodes | node（the node to set the style of）、style（Style object，key is style prop，value is style value）、isActive（boolean, whether the style being set is for the active state） |
| SET_NODE_STYLE | Modify node single style | node (the node to set the style of), prop (style property), value (style property value), isActive (v0.7.0+has been abandoned, boolean, whether the style being set is for the active state) |
| SET_NODE_STYLEs（v0.6.12+） | Modify multiple styles of nodes | node（the node to set the style of）、style（Style object，key is style prop，value is style value）、isActive（v0.7.0+has been abandoned, boolean, whether the style being set is for the active state） |
| SET_NODE_ACTIVE | Set whether the node is active | node (the node to set), active (boolean, whether to activate) |
| CLEAR_ACTIVE_NODE | Clear the active state of the currently active node(s), the active node will be the operation node | |
| SET_NODE_EXPAND | Set whether the node is expanded | node (the node to set), expand (boolean, whether to expand) |

1065
web/src/pages/Doc/en/constructor/index.vue
View File

File diff suppressed because it is too large Load Diff

8
web/src/pages/Doc/en/doExport/index.md
View File

@ -38,13 +38,17 @@ a.download = 'xxx'
a.click()
```
### png(name, transparent = false, rotateWhenWidthLongerThenHeight)
### png(name, transparent = false, checkRotate)
> Versions below v0.7.0 are: png(name, transparent = false, rotateWhenWidthLongerThenHeight)
- `name`: Name, optional
- `transparent`: v0.5.7+, Specify whether the background of the exported image is transparent
- `rotateWhenWidthLongerThenHeight`: v0.6.15+，Boolean, false, Automatically rotate 90 degrees when the image has a width to height ratio
- `rotateWhenWidthLongerThenHeight`: v0.6.15+, V0.7.0+abandoned, Boolean, false, Automatically rotate 90 degrees when the image has a width to height ratio
- `checkRotate`: v0.7.0+, Function, You can pass a function that takes two parameters, the width and height of the image, and returns true or false. True represents that the image needs to be rotated by 90 degrees.
Exports as `png`.

10
web/src/pages/Doc/en/doExport/index.vue
View File

@ -27,7 +27,10 @@ a.href = <span class="hljs-string">&#x27;xxx.png&#x27;</span><span class="hljs-c
a.download = <span class="hljs-string">&#x27;xxx&#x27;</span>
a.click()
</code></pre>
<h3>png(name, transparent = false, rotateWhenWidthLongerThenHeight)</h3>
<h3>png(name, transparent = false, checkRotate)</h3>
<blockquote>
<p>Versions below v0.7.0 are: png(name, transparent = false, rotateWhenWidthLongerThenHeight)</p>
</blockquote>
<ul>
<li>
<p><code>name</code>: Name, optional</p>
@ -36,7 +39,10 @@ a.click()
<p><code>transparent</code>: v0.5.7+, Specify whether the background of the exported image is transparent</p>
</li>
<li>
<p><code>rotateWhenWidthLongerThenHeight</code>: v0.6.15+，Boolean, false, Automatically rotate 90 degrees when the image has a width to height ratio</p>
<p><code>rotateWhenWidthLongerThenHeight</code>: v0.6.15+, V0.7.0+abandoned, Boolean, false, Automatically rotate 90 degrees when the image has a width to height ratio</p>
</li>
<li>
<p><code>checkRotate</code>: v0.7.0+, Function, You can pass a function that takes two parameters, the width and height of the image, and returns true or false. True represents that the image needs to be rotated by 90 degrees.</p>
</li>
</ul>
<p>Exports as <code>png</code>.</p>

8
web/src/pages/Doc/en/introduction/index.md
View File

@ -184,4 +184,12 @@ Open source is not easy. If this project is helpful to you, you can invite the a
<img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>Luke</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
<img src="../../../../assets/avatar/布林.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>布林</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
<img src="../../../../assets/avatar/南风.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>南风</p>
</div>
</div>

38
web/src/pages/Doc/en/introduction/index.vue
View File

@ -8,16 +8,16 @@
</blockquote>
<h2>Features</h2>
<ul>
<li><input type="checkbox" id="checkbox75" checked="true" /><label for="checkbox75">Pluggable architecture, in addition to core functions, other functions are provided as plugins, which can be used as needed to reduce packaging volume</label></li>
<li><input type="checkbox" id="checkbox76" checked="true" /><label for="checkbox76">Support logical structure chart, mind map, Organizational chart, directory organization chart, timeline (horizontal and vertical), fishbone chart and other structures</label></li>
<li><input type="checkbox" id="checkbox77" checked="true" /><label for="checkbox77">Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes</label></li>
<li><input type="checkbox" id="checkbox78" checked="true" /><label for="checkbox78">Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, and summaries</label></li>
<li><input type="checkbox" id="checkbox79" checked="true" /><label for="checkbox79">Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, and fully customize node content using DDM</label></li>
<li><input type="checkbox" id="checkbox80" checked="true" /><label for="checkbox80">Support canvas dragging and scaling</label></li>
<li><input type="checkbox" id="checkbox81" checked="true" /><label for="checkbox81">Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection</label></li>
<li><input type="checkbox" id="checkbox82" checked="true" /><label for="checkbox82">Supoorts to export as </label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>, support import from <code>json</code>、<code>xmind</code>、<code>markdown</code></li>
<li><input type="checkbox" id="checkbox83" checked="true" /><label for="checkbox83">Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, and watermarks</label></li>
<li><input type="checkbox" id="checkbox84" checked="true" /><label for="checkbox84">Provide rich configurations to meet various scenarios and usage habits</label></li>
<li><input type="checkbox" id="checkbox15" checked="true" /><label for="checkbox15">Pluggable architecture, in addition to core functions, other functions are provided as plugins, which can be used as needed to reduce packaging volume</label></li>
<li><input type="checkbox" id="checkbox16" checked="true" /><label for="checkbox16">Support logical structure chart, mind map, Organizational chart, directory organization chart, timeline (horizontal and vertical), fishbone chart and other structures</label></li>
<li><input type="checkbox" id="checkbox17" checked="true" /><label for="checkbox17">Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes</label></li>
<li><input type="checkbox" id="checkbox18" checked="true" /><label for="checkbox18">Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, and summaries</label></li>
<li><input type="checkbox" id="checkbox19" checked="true" /><label for="checkbox19">Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, and fully customize node content using DDM</label></li>
<li><input type="checkbox" id="checkbox20" checked="true" /><label for="checkbox20">Support canvas dragging and scaling</label></li>
<li><input type="checkbox" id="checkbox21" checked="true" /><label for="checkbox21">Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection</label></li>
<li><input type="checkbox" id="checkbox22" checked="true" /><label for="checkbox22">Supoorts to export as </label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>, support import from <code>json</code>、<code>xmind</code>、<code>markdown</code></li>
<li><input type="checkbox" id="checkbox23" checked="true" /><label for="checkbox23">Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, and watermarks</label></li>
<li><input type="checkbox" id="checkbox24" checked="true" /><label for="checkbox24">Provide rich configurations to meet various scenarios and usage habits</label></li>
</ul>
<h2>Repository Catalog Introduction</h2>
<p>1.<code>simple-mind-map</code></p>
@ -27,16 +27,16 @@ frameworks such as Vue and React, or without a framework.</p>
<p>This is an online mind map built using the <code>simple-mind-map</code> library and based
on <code>Vue2.x</code> and <code>ElementUI</code>. Features include:</p>
<ul>
<li><input type="checkbox" id="checkbox85" checked="true" /><label for="checkbox85">Toolbar, which supports inserting and deleting nodes, and editing node</label>
<li><input type="checkbox" id="checkbox25" checked="true" /><label for="checkbox25">Toolbar, which supports inserting and deleting nodes, and editing node</label>
images, icons, hyperlinks, notes, tags, and summaries</li>
<li><input type="checkbox" id="checkbox86" checked="true" /><label for="checkbox86">Sidebar, with panels for basic style settings, node style settings,</label>
<li><input type="checkbox" id="checkbox26" checked="true" /><label for="checkbox26">Sidebar, with panels for basic style settings, node style settings,</label>
outline, theme selection, and structure selection</li>
<li><input type="checkbox" id="checkbox87" checked="true" /><label for="checkbox87">Import and export functionality; data is saved in the browser's local</label>
<li><input type="checkbox" id="checkbox27" checked="true" /><label for="checkbox27">Import and export functionality; data is saved in the browser's local</label>
storage by default, but it also supports creating, opening, and editing
local files on the computer directly</li>
<li><input type="checkbox" id="checkbox88" checked="true" /><label for="checkbox88">Right-click menu, which supports operations such as expanding, collapsing,</label>
<li><input type="checkbox" id="checkbox28" checked="true" /><label for="checkbox28">Right-click menu, which supports operations such as expanding, collapsing,</label>
and organizing layout</li>
<li><input type="checkbox" id="checkbox89" checked="true" /><label for="checkbox89">Bottom bar, which supports node and word count statistics, switching</label>
<li><input type="checkbox" id="checkbox29" checked="true" /><label for="checkbox29">Bottom bar, which supports node and word count statistics, switching</label>
between edit and read-only modes, zooming in and out, and switching to
full screen, support mini map</li>
</ul>
@ -143,6 +143,14 @@ full screen, support mini map</li>
<img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>Luke</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
<img src="../../../../assets/avatar/布林.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>布林</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
<img src="../../../../assets/avatar/南风.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>南风</p>
</div>
</div>
</div>
</template>

6
web/src/pages/Doc/en/node/index.md
View File

@ -110,17 +110,21 @@ Get the final style value applied to this node
`root`: whether it is the root node, default `false`
`isActive`: whether the value being fetched is the active state style value,
`isActive`: v0.7.0+has been abandoned, whether the value being fetched is the active state style value,
default `false`
### setStyle(prop, value, isActive)
- `isActive`: v0.7.0+has been abandoned
Modify a style of the node, a shortcut method for the `SET_NODE_STYLE` command
### setStyles(style, isActive)
> v0.6.12+
- `isActive`: v0.7.0+has been abandoned
Modify multiple styles of nodes, a shortcut method for the `SET_NODE_STYLES` command
### getData(key)

8
web/src/pages/Doc/en/node/index.vue
View File

@ -64,14 +64,20 @@
<p>Get the final style value applied to this node</p>
<p><code>prop</code>: the style property to get</p>
<p><code>root</code>: whether it is the root node, default <code>false</code></p>
<p><code>isActive</code>: whether the value being fetched is the active state style value,
<p><code>isActive</code>: v0.7.0+has been abandoned, whether the value being fetched is the active state style value,
default <code>false</code></p>
<h3>setStyle(prop, value, isActive)</h3>
<ul>
<li><code>isActive</code>: v0.7.0+has been abandoned</li>
</ul>
<p>Modify a style of the node, a shortcut method for the <code>SET_NODE_STYLE</code> command</p>
<h3>setStyles(style, isActive)</h3>
<blockquote>
<p>v0.6.12+</p>
</blockquote>
<ul>
<li><code>isActive</code>: v0.7.0+has been abandoned</li>
</ul>
<p>Modify multiple styles of nodes, a shortcut method for the <code>SET_NODE_STYLES</code> command</p>
<h3>getData(key)</h3>
<p>Get the specified value in the <code>data</code> object of the node's real data <code>nodeData</code>,

64
web/src/pages/Doc/en/scrollbar/index.md Normal file
View File

@ -0,0 +1,64 @@
# Scrollbar plugin
> v0.7.0+
This plugin is used to help develop the functionality of horizontal and vertical scrollbar.
## Register
```js
import MindMap from 'simple-mind-map'
import Scrollbar from 'simple-mind-map/src/plugins/Scrollbar.js'
MindMap.usePlugin(Scrollbar)
```
After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.scrollbar`.
## Event
#### scrollbar_change
Triggered when the scrollbar data changes, you can listen to this event to update the position and size of the scrollbar.
## Method
### setScrollBarWrapSize(width, height)
- `width`: Number, The width of your scrollbar container element.
- `height`: Number, The height of your scrollbar container element.
Set the size of the scroll bar container, which is the width of the container for horizontal scrollbars and the height of the container for vertical scrollbars. When your scrollbar container size changes, you need to call this method again.
### calculationScrollbar()
> You need to first call the setScrollBarWrapSize method to set the width and height of the scroll bar container element.
>
> Generally, it is necessary to monitor scrollbar_change event, and then call it to update the scroll bar.
Return value:
```js
{
// Vertical scrollbar
vertical: {
top,
height
},
// Horizontal scrollbar
horizontal: {
left,
width
}
}
```
Obtain the size and position of the scroll bar, and you can set it to the scroll bar element based on the return value to achieve the effect of rendering and caring about the scroll bar.
### onMousedown(e, type)
- `e`: The event object for the mouse down event.
- `type`: The type of scroll bar pressed, vertical(Vertical scrollbar)、horizontal(Horizontal scrollbar)。
This method needs to be called when the mouse press event of the scrollbar element occurs.

70
web/src/pages/Doc/en/scrollbar/index.vue Normal file
View File

@ -0,0 +1,70 @@
<template>
<div>
<h1>Scrollbar plugin</h1>
<blockquote>
<p>v0.7.0+</p>
</blockquote>
<p>This plugin is used to help develop the functionality of horizontal and vertical scrollbar.</p>
<h2>Register</h2>
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
<span class="hljs-keyword">import</span> Scrollbar <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/Scrollbar.js&#x27;</span>
MindMap.usePlugin(Scrollbar)
</code></pre>
<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.scrollbar</code>.</p>
<h2>Event</h2>
<h4>scrollbar_change</h4>
<p>Triggered when the scrollbar data changes, you can listen to this event to update the position and size of the scrollbar.</p>
<h2>Method</h2>
<h3>setScrollBarWrapSize(width, height)</h3>
<ul>
<li>
<p><code>width</code>: Number, The width of your scrollbar container element.</p>
</li>
<li>
<p><code>height</code>: Number, The height of your scrollbar container element.</p>
</li>
</ul>
<p>Set the size of the scroll bar container, which is the width of the container for horizontal scrollbars and the height of the container for vertical scrollbars. When your scrollbar container size changes, you need to call this method again.</p>
<h3>calculationScrollbar()</h3>
<blockquote>
<p>You need to first call the setScrollBarWrapSize method to set the width and height of the scroll bar container element.</p>
<p>Generally, it is necessary to monitor scrollbar_change event, and then call it to update the scroll bar.</p>
</blockquote>
<p>Return value:</p>
<pre class="hljs"><code>{
<span class="hljs-comment">// Vertical scrollbar</span>
<span class="hljs-attr">vertical</span>: {
top,
height
},
<span class="hljs-comment">// Horizontal scrollbar</span>
<span class="hljs-attr">horizontal</span>: {
left,
width
}
}
</code></pre>
<p>Obtain the size and position of the scroll bar, and you can set it to the scroll bar element based on the return value to achieve the effect of rendering and caring about the scroll bar.</p>
<h3>onMousedown(e, type)</h3>
<ul>
<li>
<p><code>e</code>: The event object for the mouse down event.</p>
</li>
<li>
<p><code>type</code>: The type of scroll bar pressed, vertical(Vertical scrollbar)、horizontal(Horizontal scrollbar)。</p>
</li>
</ul>
<p>This method needs to be called when the mouse press event of the scrollbar element occurs.</p>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>

2
web/src/pages/Doc/en/search/index.md
View File

@ -12,7 +12,7 @@ import Search from 'simple-mind-map/src/plugins/Search.js'
MindMap.usePlugin(Search)
```
After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.Search`.
After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.search`.
## Event

2
web/src/pages/Doc/en/search/index.vue
View File

@ -10,7 +10,7 @@
<span class="hljs-keyword">import</span> Search <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/Search.js&#x27;</span>
MindMap.usePlugin(Search)
</code></pre>
<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.Search</code>.</p>
<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.search</code>.</p>
<h2>Event</h2>
<h3>search_info_change</h3>
<p>You can listen to 'search_info_change' event to get the number of current search results and the index currently located.</p>

8
web/src/pages/Doc/routerList.js
View File

@ -29,6 +29,8 @@ export default [
{ path: 'course20', title: '如何自定义节点内容' },
{ path: 'course21', title: '如何复制、剪切、粘贴' },
{ path: 'course22', title: '如何实现搜索、替换' },
{ path: 'course23', title: '如何渲染滚动条' },
{ path: 'course24', title: '如何开发一个插件' },
{ path: 'doExport', title: 'Export 插件' },
{ path: 'drag', title: 'Drag插件' },
{ path: 'introduction', title: '简介' },
@ -52,7 +54,8 @@ export default [
{ path: 'nodeImgAdjust', title: 'NodeImgAdjust插件' },
{ path: 'search', title: 'Search插件' },
{ path: 'painter', title: 'Painter插件' },
{ path: 'help1', title: '概要/关联线' },
{ path: 'painter', title: 'Painter插件' },
{ path: 'scrollbar', title: 'Scrollbar插件' },
{ path: 'help2', title: '客户端' }
]
},
@ -85,7 +88,8 @@ export default [
{ path: 'touchEvent', title: 'TouchEvent plugin' },
{ path: 'nodeImgAdjust', title: 'NodeImgAdjust plugin' },
{ path: 'search', title: 'Search plugin' },
{ path: 'painter', title: 'Painter plugin' }
{ path: 'painter', title: 'Painter plugin' },
{ path: 'scrollbar', title: 'Scrollbar plugin' }
]
}
]

50
web/src/pages/Doc/zh/changelog/index.md
View File

@ -1,5 +1,55 @@
# Changelog
## 0.7.0
破坏性更新：删除了主题文件中节点激活样式的部分，不再支持设置节点的激活样式，激活效果改为统一的节点外边框样式，同时支持鼠标hover效果。
修复：
> 1.修复节点边框尺寸比较大的情况下的的渲染异常问题。
>
> 2.修复切换主题时存在关联线的节点样式不会更新的问题。
>
> 3.修复全选没有触发node_active事件的问题。
新增：
> 1.收起节点时，显示折叠的节点数量。
>
> 2.支持关联线端点的位置跟随鼠标拖拽变化。
>
> 3.新增滚动条插件。
>
> 4.支持在url中通过fileURL查询参数打开指定的在线文件。
>
> 5.鱼骨图支持设置节点margin。
>
> 6.默认关闭双击复位画布。
>
> 7.修改导出图片方法的参数,导出pdf时如果思维导图尺寸小于a4纸那么不旋转方向。
>
> 8.提升导出的图片和pdf在高清屏的清晰度。
>
> 9.插件新增销毁前生命周期函数，解决销毁思维导图时插件的一些副作用没有清除的问题。
>
> 10.优化基础样式的设置，修改不影响大小的主题属性时不触发全量渲染。
>
> 11.右键多选节点结束时禁止触发节点右键菜单事件，避免触发右键菜单显示。
>
> 12.优化Select插件，如果多选节点没有变化，那么不触发激活激活事件。
>
> 13.node_active事件抛出的激活节点列表不再直接引用内部激活列表。
>
> 14.优化鼠标按下节点事件逻辑，在右键拖拽画布模式下支持右键按住根节点拖拽画布。
Demo：
> 1.不直接引用内部激活节点列表，优化性能。
>
> 2.支持配置是否显示滚动条。
>
> 3.删除侧边栏节点样式配置部分的激活节点配置。
## 0.6.17
修复：

31
web/src/pages/Doc/zh/changelog/index.vue
View File

@ -1,6 +1,37 @@
<template>
<div>
<h1>Changelog</h1>
<h2>0.7.0</h2>
<p>破坏性更新：删除了主题文件中节点激活样式的部分，不再支持设置节点的激活样式，激活效果改为统一的节点外边框样式，同时支持鼠标hover效果。</p>
<p>修复：</p>
<blockquote>
<p>1.修复节点边框尺寸比较大的情况下的的渲染异常问题。</p>
<p>2.修复切换主题时存在关联线的节点样式不会更新的问题。</p>
<p>3.修复全选没有触发node_active事件的问题。</p>
</blockquote>
<p>新增：</p>
<blockquote>
<p>1.收起节点时，显示折叠的节点数量。</p>
<p>2.支持关联线端点的位置跟随鼠标拖拽变化。</p>
<p>3.新增滚动条插件。</p>
<p>4.支持在url中通过fileURL查询参数打开指定的在线文件。</p>
<p>5.鱼骨图支持设置节点margin。</p>
<p>6.默认关闭双击复位画布。</p>
<p>7.修改导出图片方法的参数,导出pdf时如果思维导图尺寸小于a4纸那么不旋转方向。</p>
<p>8.提升导出的图片和pdf在高清屏的清晰度。</p>
<p>9.插件新增销毁前生命周期函数，解决销毁思维导图时插件的一些副作用没有清除的问题。</p>
<p>10.优化基础样式的设置，修改不影响大小的主题属性时不触发全量渲染。</p>
<p>11.右键多选节点结束时禁止触发节点右键菜单事件，避免触发右键菜单显示。</p>
<p>12.优化Select插件，如果多选节点没有变化，那么不触发激活激活事件。</p>
<p>13.node_active事件抛出的激活节点列表不再直接引用内部激活列表。</p>
<p>14.优化鼠标按下节点事件逻辑，在右键拖拽画布模式下支持右键按住根节点拖拽画布。</p>
</blockquote>
<p>Demo：</p>
<blockquote>
<p>1.不直接引用内部激活节点列表，优化性能。</p>
<p>2.支持配置是否显示滚动条。</p>
<p>3.删除侧边栏节点样式配置部分的激活节点配置。</p>
</blockquote>
<h2>0.6.17</h2>
<p>修复：</p>
<blockquote>

14
web/src/pages/Doc/zh/constructor/index.md
View File

@ -48,8 +48,10 @@ const mindMap = new MindMap({
| mousewheelZoomActionReverse（v0.6.5+） | Boolean | false | 当mousewheelAction设为zoom时，默认向前滚动是缩小，向后滚动是放大，如果该属性设为true，那么会反过来 | |
| defaultInsertSecondLevelNodeText（v0.4.7+） | String | 二级节点 | 默认插入的二级节点的文字 | |
| defaultInsertBelowSecondLevelNodeText（v0.4.7+） | String | 分支主题 | 默认插入的二级以下节点的文字 | |
| expandBtnStyle（v0.5.0+） | Object | { color: '#808080', fill: '#fff' } | 展开收起按钮的颜色 | |
| expandBtnStyle（v0.5.0+） | Object | { color: '#808080', fill: '#fff', fontSize: 13, strokeColor: '#333333' } | 展开收起按钮的颜色，（fontSize及strokeColor字段为0.7.0+版本新增的，用于设置收起时显示节点数量的文字样式） | |
| expandBtnIcon（v0.5.0+） | Object | { open: '', close: '' } | 自定义展开收起按钮的图标，可以传图标的svg字符串 | |
| expandBtnNumHandler（v0.7.0+） | Function | | 用于自定义收起时显示节点数量的内容，接收一个参数，代表收起的节点实例，需要返回一个数字或字符串，代表最终显示的内容，比如你可以当数量大于99时，显示99+ | |
| isShowExpandNum（v0.7.0+） | Boolean | true | 节点收起时是否显示收起的数量 | |
| enableShortcutOnlyWhenMouseInSvg（v0.5.1+） | Boolean | true | 是否只有当鼠标在画布内才响应快捷键事件 | |
| enableNodeTransitionMove（v0.5.1+）（v0.6.7+已去除该特性） | Boolean | true | 是否开启节点动画过渡 | |
| nodeTransitionMoveDuration（v0.5.1+）（v0.6.7+已去除该特性） | Number | 300 | 如果开启节点动画过渡，可以通过该属性设置过渡的时间，单位ms | |
@ -80,7 +82,11 @@ const mindMap = new MindMap({
| errorHandler（v0.6.15+） | Function | | 自定义错误处理函数，目前只会抛出一些异步逻辑出错的情况。可以传递一个函数，会接收两个参数，第一个为错误的类型，第二个为错误对象 | |
| disableMouseWheelZoom（v0.6.15+） | Boolean | false | 禁止鼠标滚轮缩放，你仍旧可以使用api进行缩放 | |
| resetCss（v0.6.16+） | String | * { margin: 0; padding: 0; box-sizing: border-box; } | 设置导出图片和svg时，针对富文本节点内容，也就是嵌入到svg中的html节点的默认样式覆盖，如果不覆盖，节点内容会发生偏移 | |
| enableDblclickReset（v0.6.17+） | Boolean | true | 开启鼠标双击复位思维导图位置及缩放 | |
| enableDblclickReset（v0.6.17+） | Boolean | true（v0.7.0+改为false） | 开启鼠标双击复位思维导图位置及缩放 | |
| minExportImgCanvasScale（v0.7.0+） | Number | 2 | 导出图片和pdf时canvas的缩放倍数，该配置会和window.devicePixelRatio值取最大值，用于提升图片清晰度 | |
| hoverRectColor（v0.7.0+） | String | rgb(94, 200, 248) | 节点鼠标hover和激活时显示的矩形边框颜色，hover时会添加0.6的透明度 | |
| hoverRectPadding（v0.7.0+） | Number | 2 | 节点鼠标hover和激活时显示的矩形边框距节点内容的距离 | |
| selectTextOnEnterEditText（v0.7.0+） | Boolean | true | 双击节点进入节点文本编辑时是否默认选中文本，默认只在创建新节点时会选中 | |
### 水印配置
@ -330,8 +336,8 @@ mindMap.updateConfig({
| REMOVE_NODE | 删除节点，操作节点为当前激活的节点或指定节点 | appointNodes（v0.4.7+，可选，指定节点，指定多个节点可以传一个数组） |
| PASTE_NODE | 粘贴节点到节点，操作节点为当前激活的节点 | data（要粘贴的节点数据，一般通过`renderer.copyNode()`方法和`renderer.cutNode()`方法获取） |
| CUT_NODE | 剪切节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点使用无效 | callback(回调函数，剪切的节点数据会通过调用该函数并通过参数返回) |
| SET_NODE_STYLE | 修改节点单个样式 | node（要设置样式的节点）、style（样式属性）、value（样式属性值）、isActive（布尔值，是否设置的是激活状态的样式） |
| SET_NODE_STYLEs（v0.6.12+） | 修改节点多个样式 | node（要设置样式的节点）、style（样式对象，key为样式属性，value为样式值）、isActive（布尔值，是否设置的是激活状态的样式） |
| SET_NODE_STYLE | 修改节点单个样式 | node（要设置样式的节点）、style（样式属性）、value（样式属性值）、isActive（v0.7.0+已废弃，布尔值，是否设置的是激活状态的样式） |
| SET_NODE_STYLEs（v0.6.12+） | 修改节点多个样式 | node（要设置样式的节点）、style（样式对象，key为样式属性，value为样式值）、isActive（v0.7.0+已废弃，布尔值，是否设置的是激活状态的样式） |
| SET_NODE_ACTIVE | 设置节点是否激活 | node（要设置的节点）、active（布尔值，是否激活） |
| CLEAR_ACTIVE_NODE | 清除当前已激活节点的激活状态，操作节点为当前激活的节点 | |
| SET_NODE_EXPAND | 设置节点是否展开 | node（要设置的节点）、expand（布尔值，是否展开） |

52
web/src/pages/Doc/zh/constructor/index.vue
View File

@ -199,8 +199,8 @@
<tr>
<td>expandBtnStyle（v0.5.0+）</td>
<td>Object</td>
<td>{ color: '#808080', fill: '#fff' }</td>
<td>展开收起按钮的颜色</td>
<td>{ color: '#808080', fill: '#fff', fontSize: 13, strokeColor: '#333333' }</td>
<td>展开收起按钮的颜色，（fontSize及strokeColor字段为0.7.0+版本新增的，用于设置收起时显示节点数量的文字样式）</td>
<td></td>
</tr>
<tr>
@ -211,6 +211,20 @@
<td></td>
</tr>
<tr>
<td>expandBtnNumHandler（v0.7.0+）</td>
<td>Function</td>
<td></td>
<td>用于自定义收起时显示节点数量的内容，接收一个参数，代表收起的节点实例，需要返回一个数字或字符串，代表最终显示的内容，比如你可以当数量大于99时，显示99+</td>
<td></td>
</tr>
<tr>
<td>isShowExpandNum（v0.7.0+）</td>
<td>Boolean</td>
<td>true</td>
<td>节点收起时是否显示收起的数量</td>
<td></td>
</tr>
<tr>
<td>enableShortcutOnlyWhenMouseInSvg（v0.5.1+）</td>
<td>Boolean</td>
<td>true</td>
@ -423,10 +437,38 @@
<tr>
<td>enableDblclickReset（v0.6.17+）</td>
<td>Boolean</td>
<td>true</td>
<td>true（v0.7.0+改为false）</td>
<td>开启鼠标双击复位思维导图位置及缩放</td>
<td></td>
</tr>
<tr>
<td>minExportImgCanvasScale（v0.7.0+）</td>
<td>Number</td>
<td>2</td>
<td>导出图片和pdf时canvas的缩放倍数，该配置会和window.devicePixelRatio值取最大值，用于提升图片清晰度</td>
<td></td>
</tr>
<tr>
<td>hoverRectColor（v0.7.0+）</td>
<td>String</td>
<td>rgb(94, 200, 248)</td>
<td>节点鼠标hover和激活时显示的矩形边框颜色，hover时会添加0.6的透明度</td>
<td></td>
</tr>
<tr>
<td>hoverRectPadding（v0.7.0+）</td>
<td>Number</td>
<td>2</td>
<td>节点鼠标hover和激活时显示的矩形边框距节点内容的距离</td>
<td></td>
</tr>
<tr>
<td>selectTextOnEnterEditText（v0.7.0+）</td>
<td>Boolean</td>
<td>true</td>
<td>双击节点进入节点文本编辑时是否默认选中文本，默认只在创建新节点时会选中</td>
<td></td>
</tr>
</tbody>
</table>
<h3>水印配置</h3>
@ -888,12 +930,12 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
<tr>
<td>SET_NODE_STYLE</td>
<td>修改节点单个样式</td>
<td>node（要设置样式的节点）、style（样式属性）、value（样式属性值）、isActive（布尔值，是否设置的是激活状态的样式）</td>
<td>node（要设置样式的节点）、style（样式属性）、value（样式属性值）、isActive（v0.7.0+已废弃，布尔值，是否设置的是激活状态的样式）</td>
</tr>
<tr>
<td>SET_NODE_STYLEs（v0.6.12+）</td>
<td>修改节点多个样式</td>
<td>node（要设置样式的节点）、style（样式对象，key为样式属性，value为样式值）、isActive（布尔值，是否设置的是激活状态的样式）</td>
<td>node（要设置样式的节点）、style（样式对象，key为样式属性，value为样式值）、isActive（v0.7.0+已废弃，布尔值，是否设置的是激活状态的样式）</td>
</tr>
<tr>
<td>SET_NODE_ACTIVE</td>

116
web/src/pages/Doc/zh/course23/index.md Normal file
View File

@ -0,0 +1,116 @@
# 如何渲染滚动条
> 需要先注册 Scrollbar 插件
滚动条分为水平和垂直滚动条，所以你需要创建如下模板：
```html
<!-- 垂直 -->
<div class="scrollbar verticalScrollbar" ref="verticalScrollbarRef">
<div
class="scrollbarInner"
:style="verticalScrollbarStyle"
@mousedown="onVerticalScrollbarMousedown"
></div>
</div>
<!-- 水平 -->
<div class="scrollbar horizontalScrollbar" ref="horizontalScrollbarRef">
<div
class="scrollbarInner"
:style="horizontalScrollbarStyle"
@mousedown="onHorizontalScrollbarMousedown"
></div>
</div>
```
外层元素为滚动条容器元素，内层为滚动条元素。
内层滚动条元素一般需要设置成绝对定位，样式示例如下：
```css
.scrollbar {
position: relative;
background-color: #f5f5f5;
border-radius: 10px;
overflow: hidden;
&.verticalScrollbar {
width: 10px;
height: 500px;
.scrollbarInner {
width: 10px;
left: 0;
}
}
&.horizontalScrollbar {
width: 500px;
height: 10px;
.scrollbarInner {
height: 10px;
top: 0;
}
}
.scrollbarInner {
position: absolute;
background-color: #ccc;
border-radius: 10px;
}
}
```
垂直滚动条的`top`和`height`、水平滚动条的`left`和`width`值需要调用插件的方法获取。
首先你需要调用`setScrollBarWrapSize`方法传递你的滚动条容器的宽和高：
```js
// 水平滚动条容器的宽度
const { width } = this.$refs.horizontalScrollbarRef.getBoundingClientRect()
// 垂直滚动条容器的高度
const { height } = this.$refs.verticalScrollbarRef.getBoundingClientRect()
mindMap.scrollbar.setScrollBarWrapSize(width, height)
```
如果容器大小发生了改变需要再次调用该方法传递改变后的大小。
然后你需要监听`scrollbar_change`方法来获取滚动条大小和位置数据：
```js
mindMap.('scrollbar_change', this.updateScrollbar)
// 调用插件方法更新滚动条位置和大小
{
updateScrollbar() {
const {
vertical,
horizontal
} = mindMap.scrollbar.calculationScrollbar()
this.verticalScrollbarStyle = {
top: vertical.top + '%',
height: vertical.height + '%'
}
this.horizontalScrollbarStyle = {
left: horizontal.left + '%',
width: horizontal.width + '%'
}
}
}
```
调用插件的`calculationScrollbar`方法来获取滚动条元素的位置和大小，返回的是百分比数值，所以需要添加`%`。
最后，需要给滚动条元素绑定`mousedown`事件，并且调用插件的`onMousedown`方法：
```js
// 垂直滚动条元素
mindMap.scrollbar.onMousedown(e, 'vertical')
// 水平滚动条元素
mindMap.scrollbar.onMousedown(e, 'horizontal')
```
以上就是实现滚动条渲染的全部步骤。

112
web/src/pages/Doc/zh/course23/index.vue Normal file
View File

@ -0,0 +1,112 @@
<template>
<div>
<h1>如何渲染滚动条</h1>
<blockquote>
<p>需要先注册 Scrollbar 插件</p>
</blockquote>
<p>滚动条分为水平和垂直滚动条，所以你需要创建如下模板：</p>
<pre class="hljs"><code><span class="hljs-comment">&lt;!-- 垂直 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;scrollbar verticalScrollbar&quot;</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">&quot;verticalScrollbarRef&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span>
<span class="hljs-attr">class</span>=<span class="hljs-string">&quot;scrollbarInner&quot;</span>
<span class="hljs-attr">:style</span>=<span class="hljs-string">&quot;verticalScrollbarStyle&quot;</span>
@<span class="hljs-attr">mousedown</span>=<span class="hljs-string">&quot;onVerticalScrollbarMousedown&quot;</span>
&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-comment">&lt;!-- 水平 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;scrollbar horizontalScrollbar&quot;</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">&quot;horizontalScrollbarRef&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span>
<span class="hljs-attr">class</span>=<span class="hljs-string">&quot;scrollbarInner&quot;</span>
<span class="hljs-attr">:style</span>=<span class="hljs-string">&quot;horizontalScrollbarStyle&quot;</span>
@<span class="hljs-attr">mousedown</span>=<span class="hljs-string">&quot;onHorizontalScrollbarMousedown&quot;</span>
&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
<p>外层元素为滚动条容器元素，内层为滚动条元素。</p>
<p>内层滚动条元素一般需要设置成绝对定位，样式示例如下：</p>
<pre class="hljs"><code><span class="hljs-selector-class">.scrollbar</span> {
<span class="hljs-attribute">position</span>: relative;
<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#f5f5f5</span>;
<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span>;
<span class="hljs-attribute">overflow</span>: hidden;
&amp;<span class="hljs-selector-class">.verticalScrollbar</span> {
<span class="hljs-attribute">width</span>: <span class="hljs-number">10px</span>;
<span class="hljs-attribute">height</span>: <span class="hljs-number">500px</span>;
<span class="hljs-selector-class">.scrollbarInner</span> {
<span class="hljs-attribute">width</span>: <span class="hljs-number">10px</span>;
<span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;
}
}
&amp;<span class="hljs-selector-class">.horizontalScrollbar</span> {
<span class="hljs-attribute">width</span>: <span class="hljs-number">500px</span>;
<span class="hljs-attribute">height</span>: <span class="hljs-number">10px</span>;
<span class="hljs-selector-class">.scrollbarInner</span> {
<span class="hljs-attribute">height</span>: <span class="hljs-number">10px</span>;
<span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;
}
}
<span class="hljs-selector-class">.scrollbarInner</span> {
<span class="hljs-attribute">position</span>: absolute;
<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#ccc</span>;
<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span>;
}
}
</code></pre>
<p>垂直滚动条的<code>top</code>和<code>height</code>、水平滚动条的<code>left</code>和<code>width</code>值需要调用插件的方法获取。</p>
<p>首先你需要调用<code>setScrollBarWrapSize</code>方法传递你的滚动条容器的宽和高：</p>
<pre class="hljs"><code><span class="hljs-comment">// 水平滚动条容器的宽度</span>
<span class="hljs-keyword">const</span> { width } = <span class="hljs-built_in">this</span>.$refs.horizontalScrollbarRef.getBoundingClientRect()
<span class="hljs-comment">// 垂直滚动条容器的高度</span>
<span class="hljs-keyword">const</span> { height } = <span class="hljs-built_in">this</span>.$refs.verticalScrollbarRef.getBoundingClientRect()
mindMap.scrollbar.setScrollBarWrapSize(width, height)
</code></pre>
<p>如果容器大小发生了改变需要再次调用该方法传递改变后的大小。</p>
<p>然后你需要监听<code>scrollbar_change</code>方法来获取滚动条大小和位置数据：</p>
<pre class="hljs"><code>mindMap.(<span class="hljs-string">&#x27;scrollbar_change&#x27;</span>, <span class="hljs-built_in">this</span>.updateScrollbar)
<span class="hljs-comment">// 调用插件方法更新滚动条位置和大小</span>
{
<span class="hljs-function"><span class="hljs-title">updateScrollbar</span>(<span class="hljs-params"></span>)</span> {
<span class="hljs-keyword">const</span> {
vertical,
horizontal
} = mindMap.scrollbar.calculationScrollbar()
<span class="hljs-built_in">this</span>.verticalScrollbarStyle = {
<span class="hljs-attr">top</span>: vertical.top + <span class="hljs-string">&#x27;%&#x27;</span>,
<span class="hljs-attr">height</span>: vertical.height + <span class="hljs-string">&#x27;%&#x27;</span>
}
<span class="hljs-built_in">this</span>.horizontalScrollbarStyle = {
<span class="hljs-attr">left</span>: horizontal.left + <span class="hljs-string">&#x27;%&#x27;</span>,
<span class="hljs-attr">width</span>: horizontal.width + <span class="hljs-string">&#x27;%&#x27;</span>
}
}
}
</code></pre>
<p>调用插件的<code>calculationScrollbar</code>方法来获取滚动条元素的位置和大小，返回的是百分比数值，所以需要添加<code>%</code>。</p>
<p>最后，需要给滚动条元素绑定<code>mousedown</code>事件，并且调用插件的<code>onMousedown</code>方法：</p>
<pre class="hljs"><code><span class="hljs-comment">// 垂直滚动条元素</span>
mindMap.scrollbar.onMousedown(e, <span class="hljs-string">&#x27;vertical&#x27;</span>)
<span class="hljs-comment">// 水平滚动条元素</span>
mindMap.scrollbar.onMousedown(e, <span class="hljs-string">&#x27;horizontal&#x27;</span>)
</code></pre>
<p>以上就是实现滚动条渲染的全部步骤。</p>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>

65
web/src/pages/Doc/zh/course24/index.md Normal file
View File

@ -0,0 +1,65 @@
# 如何开发一个插件
库本身提供了一些插件，如果满足不了你的需求，你也可以自己开发一个新插件。
想要开发一个插件，你肯定需要对库的实现原理、模块划分、目录结构等等有一定了解，简而言之，需要你对库的源码有一定程度的熟悉，所以如果还没看过，现在就可以先去阅读一下，好消息是，本库的源码并不复杂，相信你一定能看懂。
在你决定动手之前，最好先看一下内部插件是如何实现的。
一个插件就是一个类：
```js
class YourPlugin {
constructor({ mindMap }) {
this.mindMap = mindMap
}
// 插件被移除前做的事情
beforePluginRemove() {
}
// 插件被卸载前做的事情
beforePluginDestroy() {
}
}
Scrollbar.instanceName = 'yourPlugin'
```
实例化插件时会传入思维导图实例，你可以保存起来，后续可以通过它来监听方法或调用实例的方法，甚至是其他插件的方法。
需要给插件类添加一个静态属性`instanceName`，会将你的插件实例通过该属性保存到思维导图实例上，外部或其他插件想要获取你的插件实例时都需要通过该属性：
```js
mindMap.yourPlugin.xxx
```
插件存在两个生命周期函数：
`beforePluginRemove`生命周期会在思维导图实例调用`removePlugin`方法时调用，代表思维导图实例并没有销毁，只是移除该插件。
`beforePluginDestroy`生命周期会在销毁思维导图时调用，此时思维导图实例也会被销毁。
```js
mindMap.removePlugin(YourPlugin)
```
你也可以继承内部的一些插件：
```js
import ScrollbarPlugin from 'simple-mind-map/src/plugins/Scrollbar.js'
class YourPlugin extends ScrollbarPlugin {
constructor(opt) {
super(opt)
}
}
Scrollbar.instanceName = 'yourPlugin'
```
插件的原理无非是监听一些你需要的事件，然后调用一些你需要的方法来完成一些功能，其实没啥好多说的，建议看一下内部插件的实现。
当你完成了一个插件后，你可以考虑发布到`npm`，提供给其他开发者使用。

60
web/src/pages/Doc/zh/course24/index.vue Normal file
View File

@ -0,0 +1,60 @@
<template>
<div>
<h1>如何开发一个插件</h1>
<p>库本身提供了一些插件，如果满足不了你的需求，你也可以自己开发一个新插件。</p>
<p>想要开发一个插件，你肯定需要对库的实现原理、模块划分、目录结构等等有一定了解，简而言之，需要你对库的源码有一定程度的熟悉，所以如果还没看过，现在就可以先去阅读一下，好消息是，本库的源码并不复杂，相信你一定能看懂。</p>
<p>在你决定动手之前，最好先看一下内部插件是如何实现的。</p>
<p>一个插件就是一个类：</p>
<pre class="hljs"><code><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">YourPlugin</span> </span>{
<span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">{ mindMap }</span>)</span> {
<span class="hljs-built_in">this</span>.mindMap = mindMap
}
<span class="hljs-comment">// 插件被移除前做的事情</span>
<span class="hljs-function"><span class="hljs-title">beforePluginRemove</span>(<span class="hljs-params"></span>)</span> {
}
<span class="hljs-comment">// 插件被卸载前做的事情</span>
<span class="hljs-function"><span class="hljs-title">beforePluginDestroy</span>(<span class="hljs-params"></span>)</span> {
}
}
Scrollbar.instanceName = <span class="hljs-string">&#x27;yourPlugin&#x27;</span>
</code></pre>
<p>实例化插件时会传入思维导图实例，你可以保存起来，后续可以通过它来监听方法或调用实例的方法，甚至是其他插件的方法。</p>
<p>需要给插件类添加一个静态属性<code>instanceName</code>，会将你的插件实例通过该属性保存到思维导图实例上，外部或其他插件想要获取你的插件实例时都需要通过该属性：</p>
<pre class="hljs"><code>mindMap.yourPlugin.xxx
</code></pre>
<p>插件存在两个生命周期函数：</p>
<p><code>beforePluginRemove</code>生命周期会在思维导图实例调用<code>removePlugin</code>方法时调用，代表思维导图实例并没有销毁，只是移除该插件。</p>
<p><code>beforePluginDestroy</code>生命周期会在销毁思维导图时调用，此时思维导图实例也会被销毁。</p>
<pre class="hljs"><code>mindMap.removePlugin(YourPlugin)
</code></pre>
<p>你也可以继承内部的一些插件：</p>
<pre class="hljs"><code><span class="hljs-keyword">import</span> ScrollbarPlugin <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/Scrollbar.js&#x27;</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">YourPlugin</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">ScrollbarPlugin</span> </span>{
<span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">opt</span>)</span> {
<span class="hljs-built_in">super</span>(opt)
}
}
Scrollbar.instanceName = <span class="hljs-string">&#x27;yourPlugin&#x27;</span>
</code></pre>
<p>插件的原理无非是监听一些你需要的事件，然后调用一些你需要的方法来完成一些功能，其实没啥好多说的，建议看一下内部插件的实现。</p>
<p>当你完成了一个插件后，你可以考虑发布到<code>npm</code>，提供给其他开发者使用。</p>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>

22
web/src/pages/Doc/zh/course3/index.md
View File

@ -14,6 +14,28 @@ mindMap.execCommand('INSERT_CHILD_NODE')
`INSERT_CHILD_NODE`命令还支持传入几个参数，详细详细请阅读【API】-【构造函数】-【execCommand方法】。
如果你想获取插入节点的实例，可以这样操作：
1.需要指定新插入节点的`id`，比如：
```js
import { createUid } from 'simple-mind-map/src/utils'
let uid = createUid()
mindMap.execCommand('INSERT_CHILD_NODE', false, [], {
uid
})
```
2.然后在`node_tree_render_end`事件里通过该`id`来获取实例：
```js
mindMap.on('node_tree_render_end', () => {
// 调用renderer实例的findNodeByUid方法获取到节点的实例对象
const node = mindMap.renderer.findNodeByUid(uid)
})
```
## 插入兄弟节点
插入兄弟节点和插入子节点方式完全一致：

15
web/src/pages/Doc/zh/course3/index.vue
View File

@ -8,6 +8,21 @@
</code></pre>
<p>这样就会在当前激活节点（如果存在多个激活节点，默认会操作第一个激活节点）下添加一个子节点。</p>
<p><code>INSERT_CHILD_NODE</code>命令还支持传入几个参数，详细详细请阅读【API】-【构造函数】-【execCommand方法】。</p>
<p>如果你想获取插入节点的实例，可以这样操作：</p>
<p>1.需要指定新插入节点的<code>id</code>，比如：</p>
<pre class="hljs"><code><span class="hljs-keyword">import</span> { createUid } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils&#x27;</span>
<span class="hljs-keyword">let</span> uid = createUid()
mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_CHILD_NODE&#x27;</span>, <span class="hljs-literal">false</span>, [], {
uid
})
</code></pre>
<p>2.然后在<code>node_tree_render_end</code>事件里通过该<code>id</code>来获取实例：</p>
<pre class="hljs"><code>mindMap.on(<span class="hljs-string">&#x27;node_tree_render_end&#x27;</span>, <span class="hljs-function">() =&gt;</span> {
<span class="hljs-comment">// 调用renderer实例的findNodeByUid方法获取到节点的实例对象</span>
<span class="hljs-keyword">const</span> node = mindMap.renderer.findNodeByUid(uid)
})
</code></pre>
<h2>插入兄弟节点</h2>
<p>插入兄弟节点和插入子节点方式完全一致：</p>
<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_NODE&#x27;</span>)

Some files were not shown because too many files have changed in this diff Show More