From 115725791147fb68bd91f24f8f02415e38c4cfaa Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Thu, 31 Aug 2023 19:43:59 +0800 Subject: [PATCH] =?UTF-8?q?Fix=EF=BC=9A1.=E4=BC=98=E5=8C=96=E5=B1=95?= =?UTF-8?q?=E5=BC=80=E6=94=B6=E8=B5=B7=E4=BB=A3=E7=A0=81=E9=80=BB=E8=BE=91?= =?UTF-8?q?=EF=BC=9B2.=E4=BF=AE=E5=A4=8D=E5=85=B3=E8=81=94=E7=BA=BF?= =?UTF-8?q?=E4=B8=8D=E5=85=BC=E5=AE=B9=E8=80=81=E7=89=88=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98=EF=BC=8C=E4=BF=AE=E5=A4=8D=E7=AB=AF=E7=82=B9=E5=81=8F?= =?UTF-8?q?=E7=A7=BB=E9=87=8F=E6=9C=AA=E4=BF=9D=E5=AD=98=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/core/render/node/nodeExpandBtn.js | 27 +++++++----- .../src/plugins/AssociativeLine.js | 36 ++++++---------- .../associativeLineControls.js | 43 +++++++++++-------- 3 files changed, 54 insertions(+), 52 deletions(-) diff --git a/simple-mind-map/src/core/render/node/nodeExpandBtn.js b/simple-mind-map/src/core/render/node/nodeExpandBtn.js index 3fb13f16..61936759 100644 --- a/simple-mind-map/src/core/render/node/nodeExpandBtn.js +++ b/simple-mind-map/src/core/render/node/nodeExpandBtn.js @@ -3,18 +3,15 @@ import { SVG, Circle, G } from '@svgdotjs/svg.js' // 创建展开收起按钮的内容节点 function createExpandNodeContent() { - if (this._openExpandNode && !this.mindMap.opt.isShowExpandNum) { + if (this._openExpandNode) { 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) + .text() .size(this.expandBtnSize, this.expandBtnSize) // 文本垂直居中 this._openExpandNode.attr({ @@ -73,12 +70,20 @@ function updateExpandBtnNode() { if (this._expandBtn) { // 如果是收起按钮加上边框 - let opt = this.mindMap.opt - if (!expand && opt.isShowExpandNum) { - // 数字按钮添加边框 - this._fillExpandNode.stroke({ - color: opt.expandBtnStyle.strokeColor - }) + let { isShowExpandNum, expandBtnStyle, expandBtnNumHandler } = this.mindMap.opt + if (isShowExpandNum) { + if (!expand) { + // 数字按钮添加边框 + this._fillExpandNode.stroke({ + color: expandBtnStyle.strokeColor + }) + // 计算子节点数量 + let count = this.sumNode(this.nodeData.children) + count = expandBtnNumHandler(count) + node.text(count) + } else { + this._fillExpandNode.stroke('none') + } } this._expandBtn.add(this._fillExpandNode).add(node) } diff --git a/simple-mind-map/src/plugins/AssociativeLine.js b/simple-mind-map/src/plugins/AssociativeLine.js index 637ba053..dbca5808 100644 --- a/simple-mind-map/src/plugins/AssociativeLine.js +++ b/simple-mind-map/src/plugins/AssociativeLine.js @@ -6,8 +6,7 @@ import { cubicBezierPath, getNodePoint, computeNodePoints, - getNodeLinePath, - getDefaultControlPointOffsets + getNodeLinePath } from './associativeLine/associativeLineUtils' import associativeLineControlsMethods from './associativeLine/associativeLineControls' import associativeLineTextMethods from './associativeLine/associativeLineText' @@ -106,13 +105,15 @@ class AssociativeLine { this.markerPath = add.path('M0,0 L2,5 L0,10 L10,5 Z') }) } + // 判断关联线坐标是否变更，有变更则使用变化后的坐标，无则默认坐标 updateAllLinesPos(node, toNode, associativeLinePoint) { + associativeLinePoint = associativeLinePoint || {} let [startPoint, endPoint] = computeNodePoints(node, toNode) let nodeRange = 0 - let nodeDir = 'right' + let nodeDir = '' let toNodeRange = 0 - let toNodeDir = 'right' + let toNodeDir = '' if (associativeLinePoint.startPoint) { nodeRange = associativeLinePoint.startPoint.range || 0 nodeDir = associativeLinePoint.startPoint.dir || 'right' @@ -160,8 +161,8 @@ class AssociativeLine { ids.forEach((id, index) => { let toNode = idToNode.get(id) if (!node || !toNode) return - const associativeLinePoint = - node.nodeData.data.associativeLinePoint[index] || {} + const associativeLinePoint = (node.nodeData.data.associativeLinePoint || + [])[index] // 切换结构和布局，都会更新坐标 const [startPoint, endPoint] = this.updateAllLinesPos( node, @@ -294,10 +295,8 @@ class AssociativeLine { // 创建连接线 createLine(fromNode) { - let { - associativeLineWidth, - associativeLineColor - } = this.mindMap.themeConfig + let { associativeLineWidth, associativeLineColor } = + this.mindMap.themeConfig if (this.isCreatingLine || !fromNode) return this.isCreatingLine = true this.creatingStartNode = fromNode @@ -332,12 +331,8 @@ class AssociativeLine { // 获取转换后的鼠标事件对象的坐标 getTransformedEventPos(e) { let { x, y } = this.mindMap.toPos(e.clientX, e.clientY) - let { - scaleX, - scaleY, - translateX, - translateY - } = this.mindMap.draw.transform() + let { scaleX, scaleY, translateX, translateY } = + this.mindMap.draw.transform() return { x: (x - translateX) / scaleX, y: (y - translateY) / scaleY @@ -346,12 +341,8 @@ class AssociativeLine { // 计算节点偏移位置 getNodePos(node) { - const { - scaleX, - scaleY, - translateX, - translateY - } = this.mindMap.draw.transform() + const { scaleX, scaleY, translateX, translateY } = + this.mindMap.draw.transform() const { left, top, width, height } = node let translateLeft = left * scaleX + translateX let translateTop = top * scaleY + translateY @@ -461,6 +452,7 @@ class AssociativeLine { associativeLineTargetControlOffsets, associativeLineText } = node.nodeData.data + associativeLinePoint = associativeLinePoint || [] let targetIndex = getAssociativeLineTargetIndex(node, toNode) // 更新关联线文本数据 let newAssociativeLineText = {} diff --git a/simple-mind-map/src/plugins/associativeLine/associativeLineControls.js b/simple-mind-map/src/plugins/associativeLine/associativeLineControls.js index 22a8dceb..a35b4d7c 100644 --- a/simple-mind-map/src/plugins/associativeLine/associativeLineControls.js +++ b/simple-mind-map/src/plugins/associativeLine/associativeLineControls.js @@ -63,10 +63,9 @@ function onControlPointMousemove(e) { this[this.mousedownControlPointKey].x(x - radius).y(y - radius) let [, , , node, toNode] = this.activeLine let targetIndex = getAssociativeLineTargetIndex(node, toNode) - const { - associativeLinePoint, - associativeLineTargetControlOffsets - } = node.nodeData.data + let { associativeLinePoint, associativeLineTargetControlOffsets } = + node.nodeData.data + associativeLinePoint = associativeLinePoint || [] const nodePos = this.getNodePos(node) const toNodePos = this.getNodePos(toNode) let [startPoint, endPoint] = this.updateAllLinesPos( @@ -86,9 +85,14 @@ function onControlPointMousemove(e) { } let point1 = null let point2 = null + const { x: clientX, y: clientY } = this.mindMap.toPos(e.clientX, e.clientY) + const _e = { + clientX, + clientY + } // 拖拽的是控制点1 if (this.mousedownControlPointKey === 'controlPoint1') { - startPoint = getNodePoint(nodePos, '', 0, e) + startPoint = getNodePoint(nodePos, '', 0, _e) point1 = { x, y @@ -99,14 +103,13 @@ function onControlPointMousemove(e) { } if (startPoint) { // 保存更新后的坐标 - associativeLinePoint[targetIndex].startPoint = startPoint this.controlPointMousemoveState.startPoint = startPoint // 更新控制点1的连线 this.controlLine1.plot(startPoint.x, startPoint.y, point1.x, point1.y) } } else { // 拖拽的是控制点2 - endPoint = getNodePoint(toNodePos, '', 0, e) + endPoint = getNodePoint(toNodePos, '', 0, _e) point1 = { x: startPoint.x + offsets[0].x, y: startPoint.y + offsets[0].y @@ -117,7 +120,6 @@ function onControlPointMousemove(e) { } if (endPoint) { // 保存更新后结束节点的坐标 - associativeLinePoint[targetIndex].endPoint = endPoint this.controlPointMousemoveState.endPoint = endPoint // 更新控制点2的连线 this.controlLine2.plot(endPoint.x, endPoint.y, point2.x, point2.y) @@ -148,23 +150,24 @@ function updataAassociativeLine( this.updateTextEditBoxPos(text) } -// 控制点的鼠标移动事件 +// 控制点的鼠标松开事件 function onControlPointMouseup(e) { if (!this.isControlPointMousedown) return e.stopPropagation() e.preventDefault() - let { - pos, - startPoint, - endPoint, - targetIndex - } = this.controlPointMousemoveState + let { pos, startPoint, endPoint, targetIndex } = + this.controlPointMousemoveState let [, , , node] = this.activeLine let offsetList = [] - const { - associativeLinePoint, - associativeLineTargetControlOffsets - } = node.nodeData.data + let { associativeLinePoint, associativeLineTargetControlOffsets } = + node.nodeData.data + if (!associativeLinePoint) { + associativeLinePoint = [] + } + associativeLinePoint[targetIndex] = associativeLinePoint[targetIndex] || { + startPoint, + endPoint + } if (!associativeLineTargetControlOffsets) { // 兼容0.4.5版本，没有associativeLineTargetControlOffsets的情况 offsetList[targetIndex] = getDefaultControlPointOffsets( @@ -183,6 +186,7 @@ function onControlPointMouseup(e) { y: pos.y - startPoint.y } offset2 = offsetList[targetIndex][1] + associativeLinePoint[targetIndex].startPoint = startPoint } else { // 更新控制点2数据 offset1 = offsetList[targetIndex][0] @@ -190,6 +194,7 @@ function onControlPointMouseup(e) { x: pos.x - endPoint.x, y: pos.y - endPoint.y } + associativeLinePoint[targetIndex].endPoint = endPoint } offsetList[targetIndex] = [offset1, offset2] this.mindMap.execCommand('SET_NODE_DATA', node, {