Feat:新增添加节点自定义内容的实例化选项
This commit is contained in:
parent
24365a22c3
commit
68f99d5236
@ -302,6 +302,25 @@ export const defaultOpt = {
|
|||||||
},
|
},
|
||||||
// 自定义快捷创建子节点按钮的点击操作,
|
// 自定义快捷创建子节点按钮的点击操作,
|
||||||
customQuickCreateChildBtnClick: null,
|
customQuickCreateChildBtnClick: null,
|
||||||
|
// 添加自定义的节点内容
|
||||||
|
// 可传递一个对象,格式如下:
|
||||||
|
/*
|
||||||
|
{
|
||||||
|
// 返回要添加的DOM元素详细
|
||||||
|
create: (node) => {
|
||||||
|
return {
|
||||||
|
el, // DOM节点
|
||||||
|
width: 20, // 宽高
|
||||||
|
height: 20
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 处理生成的@svgdotjs/svg.js库的ForeignObject节点实例,可以设置其在节点内的位置
|
||||||
|
handle: ({ content, element, node }) => {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
addCustomContentToNode: null,
|
||||||
|
|
||||||
// 【Select插件】
|
// 【Select插件】
|
||||||
// 多选节点时鼠标移动到边缘时的画布移动偏移量
|
// 多选节点时鼠标移动到边缘时的画布移动偏移量
|
||||||
|
|||||||
@ -99,6 +99,7 @@ class MindMapNode {
|
|||||||
this._generalizationList = []
|
this._generalizationList = []
|
||||||
this._unVisibleRectRegionNode = null
|
this._unVisibleRectRegionNode = null
|
||||||
this._isMouseenter = false
|
this._isMouseenter = false
|
||||||
|
this._customContentAddToNodeAdd = null
|
||||||
// 尺寸信息
|
// 尺寸信息
|
||||||
this._rectInfo = {
|
this._rectInfo = {
|
||||||
textContentWidth: 0,
|
textContentWidth: 0,
|
||||||
@ -216,7 +217,8 @@ class MindMapNode {
|
|||||||
isUseCustomNodeContent,
|
isUseCustomNodeContent,
|
||||||
customCreateNodeContent,
|
customCreateNodeContent,
|
||||||
createNodePrefixContent,
|
createNodePrefixContent,
|
||||||
createNodePostfixContent
|
createNodePostfixContent,
|
||||||
|
addCustomContentToNode
|
||||||
} = this.mindMap.opt
|
} = this.mindMap.opt
|
||||||
// 需要创建的内容类型
|
// 需要创建的内容类型
|
||||||
const typeList = [
|
const typeList = [
|
||||||
@ -289,6 +291,15 @@ class MindMapNode {
|
|||||||
addXmlns(this._postfixData.el)
|
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)
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 计算节点的宽高
|
// 计算节点的宽高
|
||||||
|
|||||||
@ -177,7 +177,8 @@ function layout() {
|
|||||||
const {
|
const {
|
||||||
hoverRectPadding,
|
hoverRectPadding,
|
||||||
openRealtimeRenderOnNodeTextEdit,
|
openRealtimeRenderOnNodeTextEdit,
|
||||||
textContentMargin
|
textContentMargin,
|
||||||
|
addCustomContentToNode
|
||||||
} = this.mindMap.opt
|
} = this.mindMap.opt
|
||||||
// 避免编辑过程中展开收起按钮闪烁的问题
|
// 避免编辑过程中展开收起按钮闪烁的问题
|
||||||
if (openRealtimeRenderOnNodeTextEdit && this._expandBtn) {
|
if (openRealtimeRenderOnNodeTextEdit && this._expandBtn) {
|
||||||
@ -428,6 +429,22 @@ function layout() {
|
|||||||
}
|
}
|
||||||
textContentNested.translate(translateX, translateY)
|
textContentNested.translate(translateX, translateY)
|
||||||
addHoverNode()
|
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)
|
this.mindMap.emit('node_layout_end', this)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user