From e1b414617147ab6afe1935d692a8fd2c7ee45f0b Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Mon, 24 Apr 2023 14:25:36 +0800 Subject: [PATCH] =?UTF-8?q?Feature=EF=BC=9A=E9=BB=98=E8=AE=A4=E6=94=B9?= =?UTF-8?q?=E4=B8=BA=E9=BC=A0=E6=A0=87=E7=A7=BB=E4=B8=8A=E8=8A=82=E7=82=B9?= =?UTF-8?q?=E6=89=8D=E6=98=BE=E7=A4=BA=E5=B1=95=E5=BC=80=E6=94=B6=E8=B5=B7?= =?UTF-8?q?=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/index.js | 4 +- simple-mind-map/src/Node.js | 42 ++++++++++++++----- simple-mind-map/src/Render.js | 8 ++++ .../src/layouts/CatalogOrganization.js | 3 ++ simple-mind-map/src/layouts/Fishbone.js | 3 ++ .../src/layouts/LogicalStructure.js | 9 ++++ simple-mind-map/src/layouts/MindMap.js | 11 ++++- .../src/layouts/OrganizationStructure.js | 3 ++ simple-mind-map/src/layouts/Timeline.js | 3 ++ simple-mind-map/src/utils/nodeExpandBtn.js | 29 +++++++++++-- 10 files changed, 100 insertions(+), 15 deletions(-) diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js index 737a2103..4357d39d 100644 --- a/simple-mind-map/index.js +++ b/simple-mind-map/index.js @@ -103,7 +103,9 @@ const defaultOpt = { // 是否在点击了画布外的区域时结束节点文本的编辑状态 isEndNodeTextEditOnClickOuter: true, // 最大历史记录数 - maxHistoryCount: 1000 + maxHistoryCount: 1000, + // 是否一直显示节点的展开收起按钮，默认为鼠标移上去和激活时才显示 + alwaysShowExpandBtn: false } // 思维导图 diff --git a/simple-mind-map/src/Node.js b/simple-mind-map/src/Node.js index c7bf3a57..7f1ec286 100644 --- a/simple-mind-map/src/Node.js +++ b/simple-mind-map/src/Node.js @@ -1,7 +1,7 @@ import Style from './Style' import Shape from './Shape' import { asyncRun } from './utils' -import { G } from '@svgdotjs/svg.js' +import { G, Rect } from '@svgdotjs/svg.js' import nodeGeneralizationMethods from './utils/nodeGeneralization' import nodeExpandBtnMethods from './utils/nodeExpandBtn' import nodeCommandWrapsMethods from './utils/nodeCommandWraps' @@ -74,6 +74,7 @@ class Node { this._lines = [] this._generalizationLine = null this._generalizationNode = null + this._unVisibleRectRegionNode = null // 尺寸信息 this._rectInfo = { imgContentWidth: 0, @@ -242,13 +243,23 @@ class Node { layout() { // 清除之前的内容 this.group.clear() - let { width, textContentItemMargin } = this + let { width, height, textContentItemMargin } = this let { paddingY } = this.getPaddingVale() paddingY += this.shapePadding.paddingY // 节点形状 this.shapeNode = this.shapeInstance.createShape() this.group.add(this.shapeNode) this.updateNodeShape() + // 渲染一个隐藏的矩形区域，用来触发展开收起按钮的显示 + if (!this.mindMap.opt.alwaysShowExpandBtn) { + if (!this._unVisibleRectRegionNode) { + this._unVisibleRectRegionNode = new Rect() + } + this._unVisibleRectRegionNode.fill({ + color: 'transparent' + }).size(this.expandBtnSize, height).x(width).y(0) + this.group.add(this._unVisibleRectRegionNode) + } // 概要节点添加一个带所属节点id的类名 if (this.isGeneralization && this.generalizationBelongNode) { this.group.addClass('generalization_' + this.generalizationBelongNode.uid) @@ -374,9 +385,12 @@ class Node { this.mindMap.emit('node_mouseup', this, e) }) this.group.on('mouseenter', e => { + // 显示展开收起按钮 + this.showExpandBtn() this.mindMap.emit('node_mouseenter', this, e) }) this.group.on('mouseleave', e => { + this.hideExpandBtn() this.mindMap.emit('node_mouseleave', this, e) }) // 双击事件 @@ -424,14 +438,21 @@ class Node { if (!this.group) { return } - let { enableNodeTransitionMove, nodeTransitionMoveDuration } = + let { enableNodeTransitionMove, nodeTransitionMoveDuration, alwaysShowExpandBtn } = this.mindMap.opt - // 需要移除展开收缩按钮 - if (this._expandBtn && this.nodeData.children.length <= 0) { - this.removeExpandBtn() + if (alwaysShowExpandBtn) { + // 需要移除展开收缩按钮 + if (this._expandBtn && this.nodeData.children.length <= 0) { + this.removeExpandBtn() + } else { + // 更新展开收起按钮 + this.renderExpandBtn() + } } else { - // 更新展开收起按钮 - this.renderExpandBtn() + // 如果是收起状态，那么显示展开收起按钮 + if (!this.nodeData.data.expand) { + this.showExpandBtn() + } } // 更新概要 this.renderGeneralization() @@ -730,9 +751,10 @@ class Node { // 获取padding值 getPaddingVale() { + let { isActive }= this.nodeData.data return { - paddingX: this.getStyle('paddingX', true, this.nodeData.data.isActive), - paddingY: this.getStyle('paddingY', true, this.nodeData.data.isActive) + paddingX: this.getStyle('paddingX', true, isActive), + paddingY: this.getStyle('paddingY', true, isActive) } } diff --git a/simple-mind-map/src/Render.js b/simple-mind-map/src/Render.js index 8a696e8e..dde1609c 100644 --- a/simple-mind-map/src/Render.js +++ b/simple-mind-map/src/Render.js @@ -366,6 +366,8 @@ class Render { if (!node.nodeData.data.isActive) { node.nodeData.data.isActive = true this.addActiveNode(node) + // 激活节点需要显示展开收起按钮 + node.showExpandBtn() setTimeout(() => { node.updateNodeShape() }, 0) @@ -735,6 +737,12 @@ class Render { this.setNodeData(node, { isActive: active }) + // 切换激活状态，需要切换展开收起按钮的显隐 + if (active) { + node.showExpandBtn() + } else { + node.hideExpandBtn() + } node.updateNodeShape() } diff --git a/simple-mind-map/src/layouts/CatalogOrganization.js b/simple-mind-map/src/layouts/CatalogOrganization.js index 6089a04d..72a00175 100644 --- a/simple-mind-map/src/layouts/CatalogOrganization.js +++ b/simple-mind-map/src/layouts/CatalogOrganization.js @@ -199,6 +199,9 @@ class CatalogOrganization extends Base { return [] } let { left, top, width, height, expandBtnSize } = node + if (!this.mindMap.opt.alwaysShowExpandBtn) { + expandBtnSize = 0 + } let len = node.children.length let marginX = this.getMarginX(node.layerIndex + 1) if (node.isRoot) { diff --git a/simple-mind-map/src/layouts/Fishbone.js b/simple-mind-map/src/layouts/Fishbone.js index c4a2dc0f..58e70932 100644 --- a/simple-mind-map/src/layouts/Fishbone.js +++ b/simple-mind-map/src/layouts/Fishbone.js @@ -231,6 +231,9 @@ class Fishbone extends Base { return [] } let { top, height, expandBtnSize } = node + if (!this.mindMap.opt.alwaysShowExpandBtn) { + expandBtnSize = 0 + } let len = node.children.length if (node.isRoot) { // 当前节点是根节点 diff --git a/simple-mind-map/src/layouts/LogicalStructure.js b/simple-mind-map/src/layouts/LogicalStructure.js index dde3a157..c136b0b1 100644 --- a/simple-mind-map/src/layouts/LogicalStructure.js +++ b/simple-mind-map/src/layouts/LogicalStructure.js @@ -159,6 +159,9 @@ class LogicalStructure extends Base { return [] } let { left, top, width, height, expandBtnSize } = node + if (!this.mindMap.opt.alwaysShowExpandBtn) { + expandBtnSize = 0 + } let marginX = this.getMarginX(node.layerIndex + 1) let s1 = (marginX - expandBtnSize) * 0.6 let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle @@ -188,6 +191,9 @@ class LogicalStructure extends Base { return [] } let { left, top, width, height, expandBtnSize } = node + if (!this.mindMap.opt.alwaysShowExpandBtn) { + expandBtnSize = 0 + } let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle node.children.forEach((item, index) => { let x1 = @@ -213,6 +219,9 @@ class LogicalStructure extends Base { return [] } let { left, top, width, height, expandBtnSize } = node + if (!this.mindMap.opt.alwaysShowExpandBtn) { + expandBtnSize = 0 + } let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle node.children.forEach((item, index) => { let x1 = diff --git a/simple-mind-map/src/layouts/MindMap.js b/simple-mind-map/src/layouts/MindMap.js index 48b9bdd8..6c030c4e 100644 --- a/simple-mind-map/src/layouts/MindMap.js +++ b/simple-mind-map/src/layouts/MindMap.js @@ -198,6 +198,9 @@ class MindMap extends Base { return [] } let { left, top, width, height, expandBtnSize } = node + if (!this.mindMap.opt.alwaysShowExpandBtn) { + expandBtnSize = 0 + } let marginX = this.getMarginX(node.layerIndex + 1) let s1 = (marginX - expandBtnSize) * 0.6 let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle @@ -235,6 +238,9 @@ class MindMap extends Base { return [] } let { left, top, width, height, expandBtnSize } = node + if (!this.mindMap.opt.alwaysShowExpandBtn) { + expandBtnSize = 0 + } let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle node.children.forEach((item, index) => { let x1 = @@ -269,6 +275,9 @@ class MindMap extends Base { return [] } let { left, top, width, height, expandBtnSize } = node + if (!this.mindMap.opt.alwaysShowExpandBtn) { + expandBtnSize = 0 + } let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle node.children.forEach((item, index) => { let x1 = @@ -276,7 +285,7 @@ class MindMap extends Base { ? left + width / 2 : item.dir === 'left' ? left - expandBtnSize - : left + width + 20 + : left + width + expandBtnSize let y1 = top + height / 2 let x2 = item.dir === 'left' ? item.left + item.width : item.left let y2 = item.top + item.height / 2 diff --git a/simple-mind-map/src/layouts/OrganizationStructure.js b/simple-mind-map/src/layouts/OrganizationStructure.js index 36a26a84..f03883a0 100644 --- a/simple-mind-map/src/layouts/OrganizationStructure.js +++ b/simple-mind-map/src/layouts/OrganizationStructure.js @@ -179,6 +179,9 @@ class OrganizationStructure extends Base { return [] } let { left, top, width, height, expandBtnSize, isRoot } = node + if (!this.mindMap.opt.alwaysShowExpandBtn) { + expandBtnSize = 0 + } let x1 = left + width / 2 let y1 = top + height let marginX = this.getMarginX(node.layerIndex + 1) diff --git a/simple-mind-map/src/layouts/Timeline.js b/simple-mind-map/src/layouts/Timeline.js index 6b792f7d..0e426cf6 100644 --- a/simple-mind-map/src/layouts/Timeline.js +++ b/simple-mind-map/src/layouts/Timeline.js @@ -238,6 +238,9 @@ class Timeline extends Base { return [] } let { left, top, width, height, expandBtnSize } = node + if (!this.mindMap.opt.alwaysShowExpandBtn) { + expandBtnSize = 0 + } let len = node.children.length if (node.isRoot) { // 当前节点是根节点 diff --git a/simple-mind-map/src/utils/nodeExpandBtn.js b/simple-mind-map/src/utils/nodeExpandBtn.js index 347b5b69..85587d72 100644 --- a/simple-mind-map/src/utils/nodeExpandBtn.js +++ b/simple-mind-map/src/utils/nodeExpandBtn.js @@ -32,14 +32,15 @@ function createExpandNodeContent() { // 创建或更新展开收缩按钮内容 function updateExpandBtnNode() { + let { expand } = this.nodeData.data // 如果本次和上次的展开状态一样则返回 - if (this.nodeData.data.expand === this._lastExpandBtnType) return + if (expand === this._lastExpandBtnType) return if (this._expandBtn) { this._expandBtn.clear() } this.createExpandNodeContent() let node - if (this.nodeData.data.expand === false) { + if (expand === false) { node = this._openExpandNode this._lastExpandBtnType = false } else { @@ -108,10 +109,32 @@ function removeExpandBtn() { } } +// 显示展开收起按钮 +function showExpandBtn() { + if (this.mindMap.opt.alwaysShowExpandBtn) return + setTimeout(() => { + this.renderExpandBtn() + }, 0) +} + +// 隐藏展开收起按钮 +function hideExpandBtn() { + if (this.mindMap.opt.alwaysShowExpandBtn) return + // 非激活状态且展开状态鼠标移出才隐藏按钮 + let { isActive, expand } = this.nodeData.data + if (!isActive && expand) { + setTimeout(() => { + this.removeExpandBtn() + }, 0) + } +} + export default { createExpandNodeContent, updateExpandBtnNode, updateExpandBtnPos, renderExpandBtn, - removeExpandBtn + removeExpandBtn, + showExpandBtn, + hideExpandBtn }