diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js index fb40489f..01aa0244 100644 --- a/simple-mind-map/src/constants/defaultOptions.js +++ b/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插件】 // 多选节点时鼠标移动到边缘时的画布移动偏移量 diff --git a/simple-mind-map/src/core/render/node/Style.js b/simple-mind-map/src/core/render/node/Style.js index ecd3d89d..3ca64b5c 100644 --- a/simple-mind-map/src/core/render/node/Style.js +++ b/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') }) } diff --git a/simple-mind-map/src/core/render/node/nodeCreateContents.js b/simple-mind-map/src/core/render/node/nodeCreateContents.js index 9c2ee4a9..6598f607 100644 --- a/simple-mind-map/src/core/render/node/nodeCreateContents.js +++ b/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 - let iconSize = this.mindMap.themeConfig.iconSize - let node = new SVG().size(iconSize, iconSize) + const { customHyperlinkJump, hyperlinkIcon } = this.mindMap.opt + const { icon, style } = hyperlinkIcon + 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) - this.style.iconNode(iconNode) + const iconNode = SVG(icon || iconsSvg.hyperlink).size(iconSize, iconSize) + 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 - let node = new SVG() + const { icon, style } = this.mindMap.opt.noteIcon + 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) - this.style.iconNode(iconNode) + const iconNode = SVG(icon || iconsSvg.note).size(iconSize, iconSize) + 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(`