Feat：新增自定义节点备注、超链接、附件图标样式的实例化选项

simple-mind-map/src/constants/defaultOptions.js

@@ -134,7 +134,7 @@ export const defaultOpt = {
   // 开启该特性后，需要给你的输入框绑定keydown事件，并禁止冒泡
   enableAutoEnterTextEditWhenKeydown: false,
   // 当enableAutoEnterTextEditWhenKeydown选项开启时生效，当通过按键进入文本编辑时是否自动清空原有文本
-  autoEmptyTextWhenKeydownEnterEdit: false, 
+  autoEmptyTextWhenKeydownEnterEdit: false,
   // 自定义对剪贴板文本的处理。当按ctrl+v粘贴时会读取用户剪贴板中的文本和图片，默认只会判断文本是否是普通文本和simple-mind-map格式的节点数据，如果你想处理其他思维导图的数据，比如processon、zhixi等，那么可以传递一个函数，接受当前剪贴板中的文本为参数，返回处理后的数据，可以返回两种类型：
   /*
     1.返回一个纯文本，那么会直接以该文本创建一个子节点
@@ -268,6 +268,30 @@ export const defaultOpt = {
   // 实例化完后是否立刻进行一次历史数据入栈操作
   // 即调用mindMap.command.addHistory方法
   addHistoryOnInit: true,
+  // 自定义节点备注图标
+  noteIcon: {
+    icon: '', // svg字符串，如果不是确定要使用svg自带的样式，否则请去除其中的fill等样式属性
+    style: {
+      // size: 20,// 图标大小，不手动设置则会使用主题的iconSize配置
+      // color: '',// 图标颜色，不手动设置则会使用节点文本的颜色
+    }
+  },
+  // 自定义节点超链接图标
+  hyperlinkIcon: {
+    icon: '', // svg字符串，如果不是确定要使用svg自带的样式，否则请去除其中的fill等样式属性
+    style: {
+      // size: 20,// 图标大小，不手动设置则会使用主题的iconSize配置
+      // color: '',// 图标颜色，不手动设置则会使用节点文本的颜色
+    }
+  },
+  // 自定义节点附件图标
+  attachmentIcon: {
+    icon: '', // svg字符串，如果不是确定要使用svg自带的样式，否则请去除其中的fill等样式属性
+    style: {
+      // size: 20,// 图标大小，不手动设置则会使用主题的iconSize配置
+      // color: '',// 图标颜色，不手动设置则会使用节点文本的颜色
+    }
+  },
 
   // 【Select插件】
   // 多选节点时鼠标移动到边缘时的画布移动偏移量

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

@@ -270,9 +270,9 @@ class Style {
   }
 
   //  内置图标
-  iconNode(node) {
+  iconNode(node, color) {
     node.attr({
-      fill: this.merge('color')
+      fill: color || this.merge('color')
     })
   }
 

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

@@ -303,15 +303,16 @@ function createTextNode(specifyText) {
 
 //  创建超链接节点
 function createHyperlinkNode() {
-  let { hyperlink, hyperlinkTitle } = this.getData()
+  const { hyperlink, hyperlinkTitle } = this.getData()
   if (!hyperlink) {
     return
   }
-  const { customHyperlinkJump } = this.mindMap.opt
+  const { customHyperlinkJump, hyperlinkIcon } = this.mindMap.opt
-  let iconSize = this.mindMap.themeConfig.iconSize
+  const { icon, style } = hyperlinkIcon
-  let node = new SVG().size(iconSize, iconSize)
+  const iconSize = this.getNodeIconSize('hyperlinkIcon')
+  const node = new SVG().size(iconSize, iconSize)
   // 超链接节点
-  let a = new A().to(hyperlink).target('_blank')
+  const a = new A().to(hyperlink).target('_blank')
   a.node.addEventListener('click', e => {
     if (typeof customHyperlinkJump === 'function') {
       e.preventDefault()
@@ -324,8 +325,8 @@ function createHyperlinkNode() {
   // 添加一个透明的层，作为鼠标区域
   a.rect(iconSize, iconSize).fill({ color: 'transparent' })
   // 超链接图标
-  let iconNode = SVG(iconsSvg.hyperlink).size(iconSize, iconSize)
+  const iconNode = SVG(icon || iconsSvg.hyperlink).size(iconSize, iconSize)
-  this.style.iconNode(iconNode)
+  this.style.iconNode(iconNode, style.color)
   a.add(iconNode)
   node.add(a)
   return {
@@ -410,16 +411,17 @@ function createNoteNode() {
   if (!this.getData('note')) {
     return null
   }
-  let iconSize = this.mindMap.themeConfig.iconSize
+  const { icon, style } = this.mindMap.opt.noteIcon
-  let node = new SVG()
+  const iconSize = this.getNodeIconSize('noteIcon')
+  const node = new SVG()
     .attr('cursor', 'pointer')
     .addClass('smm-node-note')
     .size(iconSize, iconSize)
   // 透明的层，用来作为鼠标区域
   node.add(new Rect().size(iconSize, iconSize).fill({ color: 'transparent' }))
   // 备注图标
-  let iconNode = SVG(iconsSvg.note).size(iconSize, iconSize)
+  const iconNode = SVG(icon || iconsSvg.note).size(iconSize, iconSize)
-  this.style.iconNode(iconNode)
+  this.style.iconNode(iconNode, style.color)
   node.add(iconNode)
   // 备注tooltip
   if (!this.mindMap.opt.customNoteContentShow) {
@@ -481,7 +483,8 @@ function createAttachmentNode() {
   if (!attachmentUrl) {
     return
   }
-  const iconSize = this.mindMap.themeConfig.iconSize
+  const iconSize = this.getNodeIconSize('attachmentIcon')
+  const { icon, style } = this.mindMap.opt.attachmentIcon
   const node = new SVG().attr('cursor', 'pointer').size(iconSize, iconSize)
   if (attachmentName) {
     node.add(SVG(`<title>${attachmentName}</title>`))
@@ -489,8 +492,8 @@ function createAttachmentNode() {
   // 透明的层，用来作为鼠标区域
   node.add(new Rect().size(iconSize, iconSize).fill({ color: 'transparent' }))
   // 备注图标
-  const iconNode = SVG(iconsSvg.attachment).size(iconSize, iconSize)
+  const iconNode = SVG(icon || iconsSvg.attachment).size(iconSize, iconSize)
-  this.style.iconNode(iconNode)
+  this.style.iconNode(iconNode, style.color)
   node.add(iconNode)
   node.on('click', e => {
     this.mindMap.emit('node_attachmentClick', this, e, node)
@@ -505,9 +508,15 @@ function createAttachmentNode() {
   }
 }
 
+// 获取节点图标大小
+function getNodeIconSize(prop) {
+  const { style } = this.mindMap.opt[prop]
+  return isUndef(style.size) ? this.mindMap.themeConfig.iconSize : style.size
+}
+
 // 获取节点备注显示位置
 function getNoteContentPosition() {
-  const iconSize = this.mindMap.themeConfig.iconSize
+  const iconSize = this.getNodeIconSize('noteIcon')
   const { scaleY } = this.mindMap.view.getTransformData().transform
   const iconSizeAddScale = iconSize * scaleY
   let { left, top } = this._noteData.node.node.getBoundingClientRect()
@@ -558,6 +567,7 @@ export default {
   createNoteNode,
   createAttachmentNode,
   getNoteContentPosition,
+  getNodeIconSize,
   measureCustomNodeContentSize,
   isUseCustomNodeContent
 }