diff --git a/simple-mind-map/src/core/render/Render.js b/simple-mind-map/src/core/render/Render.js
index 4bfa6c31..c6be1777 100644
--- a/simple-mind-map/src/core/render/Render.js
+++ b/simple-mind-map/src/core/render/Render.js
@@ -65,7 +65,9 @@ class Render {
this.mindMap = opt.mindMap
this.themeConfig = this.mindMap.themeConfig
// 渲染树，操作过程中修改的都是这里的数据
- this.renderTree = this.mindMap.opt.data ? merge({}, this.mindMap.opt.data) : null
+ this.renderTree = this.mindMap.opt.data
+ ? merge({}, this.mindMap.opt.data)
+ : null
// 是否重新渲染
this.reRender = false
// 是否正在渲染中
@@ -246,6 +248,9 @@ class Render {
// 设置节点备注
this.setNodeNote = this.setNodeNote.bind(this)
this.mindMap.command.add('SET_NODE_NOTE', this.setNodeNote)
+ // 设置节点附件
+ this.setNodeAttachment = this.setNodeAttachment.bind(this)
+ this.mindMap.command.add('SET_NODE_ATTACHMENT', this.setNodeAttachment)
// 设置节点标签
this.setNodeTag = this.setNodeTag.bind(this)
this.mindMap.command.add('SET_NODE_TAG', this.setNodeTag)
@@ -1600,6 +1605,14 @@ class Render {
})
}
+ // 设置节点附件
+ setNodeAttachment(node, url, name = '') {
+ this.setNodeDataRender(node, {
+ attachmentUrl: url,
+ attachmentName: name
+ })
+ }
+
// 设置节点标签
setNodeTag(node, tag) {
this.setNodeDataRender(node, {
diff --git a/simple-mind-map/src/core/render/node/Node.js b/simple-mind-map/src/core/render/node/Node.js
index 80863b74..8a1cad17 100644
--- a/simple-mind-map/src/core/render/node/Node.js
+++ b/simple-mind-map/src/core/render/node/Node.js
@@ -75,6 +75,7 @@ class Node {
this._noteData = null
this.noteEl = null
this.noteContentIsShow = false
+ this._attachmentData = null
this._expandBtn = null
this._lastExpandBtnType = null
this._showExpandBtn = false
@@ -199,6 +200,7 @@ class Node {
this._hyperlinkData = this.createHyperlinkNode()
this._tagData = this.createTagNode()
this._noteData = this.createNoteNode()
+ this._attachmentData = this.createAttachmentNode()
}
// 计算节点的宽高
@@ -267,6 +269,11 @@ class Node {
textContentWidth += this._noteData.width
textContentHeight = Math.max(textContentHeight, this._noteData.height)
}
+ // 附件
+ if (this._attachmentData) {
+ textContentWidth += this._attachmentData.width
+ textContentHeight = Math.max(textContentHeight, this._attachmentData.height)
+ }
// 文字内容部分的尺寸
this._rectInfo.textContentWidth = textContentWidth
this._rectInfo.textContentHeight = textContentHeight
@@ -399,6 +406,14 @@ class Node {
textContentNested.add(this._noteData.node)
textContentOffsetX += this._noteData.width
}
+ // 附件
+ if (this._attachmentData) {
+ this._attachmentData.node
+ .x(textContentOffsetX)
+ .y((this._rectInfo.textContentHeight - this._attachmentData.height) / 2)
+ textContentNested.add(this._attachmentData.node)
+ textContentOffsetX += this._attachmentData.width
+ }
// 文字内容整体
textContentNested.translate(
width / 2 - textContentNested.bbox().width / 2,
diff --git a/simple-mind-map/src/core/render/node/nodeCommandWraps.js b/simple-mind-map/src/core/render/node/nodeCommandWraps.js
index 1a51130e..3f961cfa 100644
--- a/simple-mind-map/src/core/render/node/nodeCommandWraps.js
+++ b/simple-mind-map/src/core/render/node/nodeCommandWraps.js
@@ -28,6 +28,11 @@ function setNote(note) {
this.mindMap.execCommand('SET_NODE_NOTE', this, note)
}
+// 设置附件
+function setAttachment(url, name) {
+ this.mindMap.execCommand('SET_NODE_ATTACHMENT', this, url, name)
+}
+
// 设置标签
function setTag(tag) {
this.mindMap.execCommand('SET_NODE_TAG', this, tag)
@@ -55,6 +60,7 @@ export default {
setIcon,
setHyperlink,
setNote,
+ setAttachment,
setTag,
setShape,
setStyle,
diff --git a/simple-mind-map/src/core/render/node/nodeCreateContents.js b/simple-mind-map/src/core/render/node/nodeCreateContents.js
index 8fe5f3c7..20fda808 100644
--- a/simple-mind-map/src/core/render/node/nodeCreateContents.js
+++ b/simple-mind-map/src/core/render/node/nodeCreateContents.js
@@ -262,7 +262,7 @@ function createHyperlinkNode() {
e.stopPropagation()
})
if (hyperlinkTitle) {
- a.attr('title', hyperlinkTitle)
+ node.add(SVG(`${hyperlinkTitle}`))
}
// 添加一个透明的层，作为鼠标区域
a.rect(iconSize, iconSize).fill({ color: 'transparent' })
@@ -368,6 +368,36 @@ function createNoteNode() {
}
}
+// 创建附件节点
+function createAttachmentNode() {
+ const { attachmentUrl, attachmentName } = this.getData()
+ if (!attachmentUrl) {
+ return
+ }
+ const iconSize = this.mindMap.themeConfig.iconSize
+ const node = new SVG().attr('cursor', 'pointer').size(iconSize, iconSize)
+ if (attachmentName) {
+ node.add(SVG(`${attachmentName}`))
+ }
+ // 透明的层，用来作为鼠标区域
+ node.add(new Rect().size(iconSize, iconSize).fill({ color: 'transparent' }))
+ // 备注图标
+ const iconNode = SVG(iconsSvg.attachment).size(iconSize, iconSize)
+ this.style.iconNode(iconNode)
+ node.add(iconNode)
+ node.on('click', e => {
+ this.mindMap.emit('node_attachmentClick', this, e, node)
+ })
+ node.on('contextmenu', e => {
+ this.mindMap.emit('node_attachmentContextmenu', this, e, node)
+ })
+ return {
+ node,
+ width: iconSize,
+ height: iconSize
+ }
+}
+
// 获取节点备注显示位置
function getNoteContentPosition() {
const iconSize = this.mindMap.themeConfig.iconSize
@@ -415,6 +445,7 @@ export default {
createHyperlinkNode,
createTagNode,
createNoteNode,
+ createAttachmentNode,
getNoteContentPosition,
measureCustomNodeContentSize,
isUseCustomNodeContent
diff --git a/simple-mind-map/src/svg/icons.js b/simple-mind-map/src/svg/icons.js
index cafe49d4..f056545e 100644
--- a/simple-mind-map/src/svg/icons.js
+++ b/simple-mind-map/src/svg/icons.js
@@ -8,6 +8,10 @@ const hyperlink =
const note =
''
+// 附件图标
+const attachment =
+ ''
+
// 节点icon
export const nodeIconList = [
{
@@ -303,6 +307,7 @@ const getNodeIconListIcon = (name, extendIconList = []) => {
export default {
hyperlink,
note,
+ attachment,
nodeIconList,
getNodeIconListIcon
}