diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js index 0c8262e1..226ef97b 100644 --- a/simple-mind-map/src/constants/defaultOptions.js +++ b/simple-mind-map/src/constants/defaultOptions.js @@ -68,13 +68,21 @@ export const defaultOpt = { // 展开收起按钮的颜色 expandBtnStyle: { color: '#808080', - fill: '#fff' + fill: '#fff', + fontSize: 13, + strokeColor: '#333333' }, // 自定义展开收起按钮的图标 expandBtnIcon: { open: '', // svg字符串 close: '' }, + // 处理收起节点数量 + expandBtnNumHandler: num => { + return num + }, + // 是否显示带数量的收起按钮 + isShowExpandNum: true, // 是否只有当鼠标在画布内才响应快捷键事件 enableShortcutOnlyWhenMouseInSvg: true, // 初始根节点的位置 diff --git a/simple-mind-map/src/core/render/node/Style.js b/simple-mind-map/src/core/render/node/Style.js index 9cd452d2..a0f922ce 100644 --- a/simple-mind-map/src/core/render/node/Style.js +++ b/simple-mind-map/src/core/render/node/Style.js @@ -1,6 +1,15 @@ -import { tagColorList, nodeDataNoStylePropList } from '../../../constants/constant' +import { + tagColorList, + nodeDataNoStylePropList +} from '../../../constants/constant' const rootProp = ['paddingX', 'paddingY'] -const backgroundStyleProps = ['backgroundColor', 'backgroundImage', 'backgroundRepeat', 'backgroundPosition', 'backgroundSize'] +const backgroundStyleProps = [ + 'backgroundColor', + 'backgroundImage', + 'backgroundRepeat', + 'backgroundPosition', + 'backgroundSize' +] // 样式类 class Style { @@ -10,12 +19,18 @@ class Style { if (!Style.cacheStyle) { Style.cacheStyle = {} let style = window.getComputedStyle(el) - backgroundStyleProps.forEach((prop) => { + backgroundStyleProps.forEach(prop => { Style.cacheStyle[prop] = style[prop] }) } // 设置新样式 - let { backgroundColor, backgroundImage, backgroundRepeat, backgroundPosition, backgroundSize } = themeConfig + let { + backgroundColor, + backgroundImage, + backgroundRepeat, + backgroundPosition, + backgroundSize + } = themeConfig el.style.backgroundColor = backgroundColor if (backgroundImage && backgroundImage !== 'none') { el.style.backgroundImage = `url(${backgroundImage})` @@ -30,7 +45,7 @@ class Style { // 移除背景样式 static removeBackgroundStyle(el) { if (!Style.cacheStyle) return - backgroundStyleProps.forEach((prop) => { + backgroundStyleProps.forEach(prop => { el.style[prop] = Style.cacheStyle[prop] }) Style.cacheStyle = null @@ -142,10 +157,10 @@ class Style { // 获取文本样式 getTextFontStyle() { - return { - italic: this.merge('fontStyle') === 'italic', - bold: this.merge('fontWeight'), - fontSize: this.merge('fontSize'), + return { + italic: this.merge('fontStyle') === 'italic', + bold: this.merge('fontWeight'), + fontSize: this.merge('fontSize'), fontFamily: this.merge('fontFamily') } } @@ -201,19 +216,26 @@ class Style { // 展开收起按钮 iconBtn(node, node2, fillNode) { - let { color, fill } = this.ctx.mindMap.opt.expandBtnStyle || { + let { color, fill, fontSize, fontColor } = this.ctx.mindMap.opt + .expandBtnStyle || { color: '#808080', - fill: '#fff' + fill: '#fff', + fontSize: 12, + strokeColor: '#333333', + fontColor: '#333333' } node.fill({ color: color }) node2.fill({ color: color }) fillNode.fill({ color: fill }) + if (this.ctx.mindMap.opt.isShowExpandNum) { + node.attr({ 'font-size': fontSize, 'font-color': fontColor }) + } } // 是否设置了自定义的样式 hasCustomStyle() { let res = false - Object.keys(this.ctx.nodeData.data).forEach((item) => { + Object.keys(this.ctx.nodeData.data).forEach(item => { if (!nodeDataNoStylePropList.includes(item)) { res = true } diff --git a/simple-mind-map/src/core/render/node/nodeExpandBtn.js b/simple-mind-map/src/core/render/node/nodeExpandBtn.js index 99252eda..3fb13f16 100644 --- a/simple-mind-map/src/core/render/node/nodeExpandBtn.js +++ b/simple-mind-map/src/core/render/node/nodeExpandBtn.js @@ -3,28 +3,32 @@ import { SVG, Circle, G } from '@svgdotjs/svg.js' // 创建展开收起按钮的内容节点 function createExpandNodeContent() { - // 实时更新收起节点数字 - // if (this._openExpandNode) { - // return - // } - let { close } = this.mindMap.opt.expandBtnIcon || {} - // 计算子节点数量 - const count = this.sumNode(this.nodeData.children) - // 生成按钮 - const node = SVG() - .text(count) - .font({ family: 'Inconsolata' }) - node.attr('font-size', 14) - // 展开的节点 - this._openExpandNode = node.size(this.expandBtnSize, this.expandBtnSize) - // 数字不同偏移量大小处理 - if (count < 10) { - this._openExpandNode.x(6).y(-this.expandBtnSize / 2) - } else if (count >= 10 && count < 100) { - this._openExpandNode.x(1).y(-this.expandBtnSize / 2) + if (this._openExpandNode && !this.mindMap.opt.isShowExpandNum) { + return + } + let { close, open } = this.mindMap.opt.expandBtnIcon || {} + // 根据配置判断是否显示数量按钮 + if (this.mindMap.opt.isShowExpandNum) { + // 计算子节点数量 + let count = this.sumNode(this.nodeData.children) + count = this.mindMap.opt.expandBtnNumHandler(count) + // 展开的节点 + this._openExpandNode = SVG() + .text(count) + .size(this.expandBtnSize, this.expandBtnSize) + // 文本垂直居中 + this._openExpandNode.attr({ + 'text-anchor': 'middle', + 'dominant-baseline': 'middle', + x: this.expandBtnSize / 2, + y: 2 + }) } else { + this._openExpandNode = SVG(open || btnsSvg.open).size( + this.expandBtnSize, + this.expandBtnSize + ) this._openExpandNode.x(0).y(-this.expandBtnSize / 2) - node.attr('font-size', 12) } // 收起的节点 this._closeExpandNode = SVG(close || btnsSvg.close).size( @@ -43,8 +47,6 @@ function createExpandNodeContent() { this._fillExpandNode ) } - -// 统计折叠的子节点数量 function sumNode(data = []) { return data.reduce( (total, cur) => total + this.sumNode(cur.children || []), @@ -71,9 +73,11 @@ function updateExpandBtnNode() { if (this._expandBtn) { // 如果是收起按钮加上边框 - if (!expand) { + let opt = this.mindMap.opt + if (!expand && opt.isShowExpandNum) { + // 数字按钮添加边框 this._fillExpandNode.stroke({ - color: '#333333' + color: opt.expandBtnStyle.strokeColor }) } this._expandBtn.add(this._fillExpandNode).add(node)