From 68bf2d361c6c64de453f3323ed86609959329975 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A1=97=E8=A7=92=E5=B0=8F=E6=9E=97?= <1013335014@qq.com> Date: Wed, 14 Aug 2024 09:21:30 +0800 Subject: [PATCH] =?UTF-8?q?Feat=EF=BC=9A=E6=96=B0=E5=A2=9E=E5=AF=B9?= =?UTF-8?q?=E7=BC=96=E5=8F=B7=E6=8F=92=E4=BB=B6=E7=9A=84=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/src/constants/constant.js | 3 +- simple-mind-map/src/core/render/node/Node.js | 26 +++++++++- simple-mind-map/src/layouts/Base.js | 50 ++++++++++++++++++-- 3 files changed, 73 insertions(+), 6 deletions(-) diff --git a/simple-mind-map/src/constants/constant.js b/simple-mind-map/src/constants/constant.js index 23f069c3..da51f23e 100644 --- a/simple-mind-map/src/constants/constant.js +++ b/simple-mind-map/src/constants/constant.js @@ -326,7 +326,8 @@ export const nodeDataNoStylePropList = [ 'attachmentUrl', 'attachmentName', 'notation', - 'outerFrame' + 'outerFrame', + 'number' ] // 错误类型 diff --git a/simple-mind-map/src/core/render/node/Node.js b/simple-mind-map/src/core/render/node/Node.js index 741befe3..4b96b9a4 100644 --- a/simple-mind-map/src/core/render/node/Node.js +++ b/simple-mind-map/src/core/render/node/Node.js @@ -1,6 +1,6 @@ import Style from './Style' import Shape from './Shape' -import { G, Rect } from '@svgdotjs/svg.js' +import { G, Rect, Text } from '@svgdotjs/svg.js' import nodeGeneralizationMethods from './nodeGeneralization' import nodeExpandBtnMethods from './nodeExpandBtn' import nodeCommandWrapsMethods from './nodeCommandWraps' @@ -82,6 +82,7 @@ class Node { this.noteEl = null this.noteContentIsShow = false this._attachmentData = null + this._numberData = null this._prefixData = null this._postfixData = null this._expandBtn = null @@ -105,6 +106,8 @@ class Node { // 概要节点的宽高 this._generalizationNodeWidth = 0 this._generalizationNodeHeight = 0 + // 编号字符 + this.number = opt.number || '' // 各种文字信息的间距 this.textContentItemMargin = this.mindMap.opt.textContentMargin // 图片和文字节点的间距 @@ -215,6 +218,9 @@ class Node { this._tagData = this.createTagNode() this._noteData = this.createNoteNode() this._attachmentData = this.createAttachmentNode() + if (this.mindMap.number) { + this._numberData = this.mindMap.number.createNumberContent(this) + } this._prefixData = createNodePrefixContent ? createNodePrefixContent(this) : null @@ -267,6 +273,11 @@ class Node { this._rectInfo.imgContentWidth = imgContentWidth = this._imgData.width this._rectInfo.imgContentHeight = imgContentHeight = this._imgData.height } + // 编号内容 + if (this._numberData) { + textContentWidth += this._numberData.width + textContentHeight = Math.max(textContentHeight, this._numberData.height) + } // 自定义前置内容 if (this._prefixData) { textContentWidth += this._prefixData.width @@ -417,6 +428,14 @@ class Node { // 内容节点 let textContentNested = new G() let textContentOffsetX = 0 + // 编号内容 + if (this._numberData) { + this._numberData.node + .x(textContentOffsetX) + .y((textContentHeight - this._numberData.height) / 2) + textContentNested.add(this._numberData.node) + textContentOffsetX += this._numberData.width + textContentItemMargin + } // 自定义前置内容 if (this._prefixData) { const foreignObject = createForeignObjectNode({ @@ -1270,6 +1289,11 @@ class Node { }) return newNode } + + // 创建SVG文本节点 + createSvgTextNode(text = '') { + return new Text().text(text) + } } export default Node diff --git a/simple-mind-map/src/layouts/Base.js b/simple-mind-map/src/layouts/Base.js index 886daf36..c5bdf3b4 100644 --- a/simple-mind-map/src/layouts/Base.js +++ b/simple-mind-map/src/layouts/Base.js @@ -69,8 +69,37 @@ class Base { } } + // 获取节点编号信息 + getNumberInfo({ parent, ancestors, layerIndex, index }) { + // 编号 + const hasNumberPlugin = !!this.mindMap.number + const parentNumberStr = + hasNumberPlugin && parent && parent._node.number + ? parent._node.number + : '' + const newNumberStr = hasNumberPlugin + ? this.mindMap.number.getNodeNumberStr({ + ancestors, + layerIndex, + num: index + 1, + parentNumberStr + }) + : '' + return { + hasNumberPlugin, + newNumberStr + } + } + // 创建节点实例 - createNode(data, parent, isRoot, layerIndex) { + createNode(data, parent, isRoot, layerIndex, index, ancestors) { + // 编号 + const { hasNumberPlugin, newNumberStr } = this.getNumberInfo({ + parent, + ancestors, + layerIndex, + index + }) // 创建节点 const uid = data.data.uid let newNode = null @@ -90,11 +119,17 @@ class Base { } this.cacheNode(data._node.uid, newNode) this.checkIsLayoutChangeRerenderExpandBtnPlaceholderRect(newNode) + // 判断编号是否改变 + let isNumberChange = false + if (hasNumberPlugin) { + isNumberChange = this.mindMap.number.updateNumber(newNode, newNumberStr) + } // 主题或主题配置改变了、节点层级改变了，需要重新渲染节点文本等情况需要重新计算节点大小和布局 if ( this.checkIsNeedResizeSources() || isLayerTypeChange || - newNode.getData('resetRichText') + newNode.getData('resetRichText') || + isNumberChange ) { newNode.getSize() newNode.needLayout = true @@ -129,11 +164,17 @@ class Base { const isResizeSource = this.checkIsNeedResizeSources() // 主题或主题配置改变了、节点层级改变了，需要重新渲染节点文本，节点数据改变了等情况需要重新计算节点大小和布局 const isNodeDataChange = lastData !== JSON.stringify(data.data) + // 判断编号是否改变 + let isNumberChange = false + if (hasNumberPlugin) { + isNumberChange = this.mindMap.number.updateNumber(newNode, newNumberStr) + } if ( isResizeSource || isNodeDataChange || isLayerTypeChange || - newNode.getData('resetRichText') + newNode.getData('resetRichText') || + isNumberChange ) { newNode.getSize() newNode.needLayout = true @@ -149,7 +190,8 @@ class Base { draw: this.draw, layerIndex, isRoot, - parent: !isRoot ? parent._node : null + parent: !isRoot ? parent._node : null, + number: newNumberStr }) // uid保存到数据上，为了节点复用 data.data.uid = newUid