diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js index c655211e..25e39f28 100644 --- a/simple-mind-map/src/constants/defaultOptions.js +++ b/simple-mind-map/src/constants/defaultOptions.js @@ -302,6 +302,25 @@ export const defaultOpt = { }, // 自定义快捷创建子节点按钮的点击操作, customQuickCreateChildBtnClick: null, + // 添加自定义的节点内容 + // 可传递一个对象,格式如下: + /* + { + // 返回要添加的DOM元素详细 + create: (node) => { + return { + el, // DOM节点 + width: 20, // 宽高 + height: 20 + } + }, + // 处理生成的@svgdotjs/svg.js库的ForeignObject节点实例,可以设置其在节点内的位置 + handle: ({ content, element, node }) => { + + } + } + */ + addCustomContentToNode: null, // 【Select插件】 // 多选节点时鼠标移动到边缘时的画布移动偏移量 diff --git a/simple-mind-map/src/core/render/node/MindMapNode.js b/simple-mind-map/src/core/render/node/MindMapNode.js index aa1812fa..86dd9e5b 100644 --- a/simple-mind-map/src/core/render/node/MindMapNode.js +++ b/simple-mind-map/src/core/render/node/MindMapNode.js @@ -99,6 +99,7 @@ class MindMapNode { this._generalizationList = [] this._unVisibleRectRegionNode = null this._isMouseenter = false + this._customContentAddToNodeAdd = null // 尺寸信息 this._rectInfo = { textContentWidth: 0, @@ -216,7 +217,8 @@ class MindMapNode { isUseCustomNodeContent, customCreateNodeContent, createNodePrefixContent, - createNodePostfixContent + createNodePostfixContent, + addCustomContentToNode } = this.mindMap.opt // 需要创建的内容类型 const typeList = [ @@ -289,6 +291,15 @@ class MindMapNode { addXmlns(this._postfixData.el) } } + if ( + addCustomContentToNode && + typeof addCustomContentToNode.create === 'function' + ) { + this._customContentAddToNodeAdd = addCustomContentToNode.create(this) + if (this._customContentAddToNodeAdd && this._customContentAddToNodeAdd.el) { + addXmlns(this._customContentAddToNodeAdd.el) + } + } } // 计算节点的宽高 diff --git a/simple-mind-map/src/core/render/node/nodeLayout.js b/simple-mind-map/src/core/render/node/nodeLayout.js index b6004b05..7844c0e3 100644 --- a/simple-mind-map/src/core/render/node/nodeLayout.js +++ b/simple-mind-map/src/core/render/node/nodeLayout.js @@ -177,7 +177,8 @@ function layout() { const { hoverRectPadding, openRealtimeRenderOnNodeTextEdit, - textContentMargin + textContentMargin, + addCustomContentToNode } = this.mindMap.opt // 避免编辑过程中展开收起按钮闪烁的问题 if (openRealtimeRenderOnNodeTextEdit && this._expandBtn) { @@ -428,6 +429,22 @@ function layout() { } textContentNested.translate(translateX, translateY) addHoverNode() + if (this._customContentAddToNodeAdd && this._customContentAddToNodeAdd.el) { + const foreignObject = createForeignObjectNode( + this._customContentAddToNodeAdd + ) + this.group.add(foreignObject) + if ( + addCustomContentToNode && + typeof addCustomContentToNode.handle === 'function' + ) { + addCustomContentToNode.handle({ + content: this._customContentAddToNodeAdd, + element: foreignObject, + node: this + }) + } + } this.mindMap.emit('node_layout_end', this) }