From 91bc0351b8ee88bcbfe6cecaa0bbccdebd6c103a Mon Sep 17 00:00:00 2001 From: eseasky Date: Wed, 30 Aug 2023 20:11:44 +0800 Subject: [PATCH] =?UTF-8?q?Feat:=20=E5=85=B3=E8=81=94=E7=BA=BF=E6=8B=96?= =?UTF-8?q?=E5=8A=A8=E6=95=88=E6=9E=9C=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/plugins/AssociativeLine.js | 56 ++++++++++++------- .../associativeLineControls.js | 52 ++++++++++------- .../associativeLine/associativeLineUtils.js | 7 +-- 3 files changed, 70 insertions(+), 45 deletions(-) diff --git a/simple-mind-map/src/plugins/AssociativeLine.js b/simple-mind-map/src/plugins/AssociativeLine.js index 06dc6fa6..637ba053 100644 --- a/simple-mind-map/src/plugins/AssociativeLine.js +++ b/simple-mind-map/src/plugins/AssociativeLine.js @@ -6,7 +6,8 @@ import { cubicBezierPath, getNodePoint, computeNodePoints, - getNodeLinePath + getNodeLinePath, + getDefaultControlPointOffsets } from './associativeLine/associativeLineUtils' import associativeLineControlsMethods from './associativeLine/associativeLineControls' import associativeLineTextMethods from './associativeLine/associativeLineText' @@ -106,22 +107,21 @@ class AssociativeLine { }) } // 判断关联线坐标是否变更，有变更则使用变化后的坐标，无则默认坐标 - updateAllLinesPos(node, toNode, associativeLineTargets) { - let startPoint = {} - let endPoint = {} + updateAllLinesPos(node, toNode, associativeLinePoint) { + let [startPoint, endPoint] = computeNodePoints(node, toNode) let nodeRange = 0 let nodeDir = 'right' let toNodeRange = 0 let toNodeDir = 'right' - if (associativeLineTargets.startPoint && associativeLineTargets.endPoint) { - nodeRange = associativeLineTargets.startPoint.range || 0 - nodeDir = associativeLineTargets.startPoint.dir || 'right' + if (associativeLinePoint.startPoint) { + nodeRange = associativeLinePoint.startPoint.range || 0 + nodeDir = associativeLinePoint.startPoint.dir || 'right' startPoint = getNodePoint(node, nodeDir, nodeRange) - toNodeRange = associativeLineTargets.endPoint.range || 0 - toNodeDir = associativeLineTargets.endPoint.dir || 'right' + } + if (associativeLinePoint.endPoint) { + toNodeRange = associativeLinePoint.endPoint.range || 0 + toNodeDir = associativeLinePoint.endPoint.dir || 'right' endPoint = getNodePoint(toNode, toNodeDir, toNodeRange) - } else { - ;[startPoint, endPoint] = computeNodePoints(node, toNode) } return [startPoint, endPoint] } @@ -158,15 +158,15 @@ class AssociativeLine { ) nodeToIds.forEach((ids, node) => { ids.forEach((id, index) => { - let toNode = idToNode.get(id.id) + let toNode = idToNode.get(id) if (!node || !toNode) return - const associativeLineTargets = - node.nodeData.data.associativeLineTargets[index] || {} + const associativeLinePoint = + node.nodeData.data.associativeLinePoint[index] || {} // 切换结构和布局，都会更新坐标 const [startPoint, endPoint] = this.updateAllLinesPos( node, toNode, - associativeLineTargets + associativeLinePoint ) this.drawLine(startPoint, endPoint, node, toNode) }) @@ -346,10 +346,15 @@ class AssociativeLine { // 计算节点偏移位置 getNodePos(node) { - const { translateX, translateY } = this.mindMap.draw.transform() + const { + scaleX, + scaleY, + translateX, + translateY + } = this.mindMap.draw.transform() const { left, top, width, height } = node - let translateLeft = left + translateX - let translateTop = top + translateY + let translateLeft = left * scaleX + translateX + let translateTop = top * scaleY + translateY return { left, top, @@ -409,11 +414,11 @@ class AssociativeLine { // 将目标节点id保存起来 let list = fromNode.nodeData.data.associativeLineTargets || [] // 连线节点是否存在相同的id,存在则阻止添加关联线 - const sameLine = list.some(item => item.id === id) + const sameLine = list.some(item => item === id) if (sameLine) { return } - list.push({ id }) + list.push(id) // 保存控制点 let [startPoint, endPoint] = computeNodePoints(fromNode, toNode) let controlPoints = computeCubicBezierPathPoints( @@ -435,9 +440,13 @@ class AssociativeLine { y: controlPoints[1].y - endPoint.y } ] + let associativeLinePoint = fromNode.nodeData.data.associativeLinePoint || [] + // 记录关联的起始|结束坐标 + associativeLinePoint[list.length - 1] = [{ startPoint, endPoint }] this.mindMap.execCommand('SET_NODE_DATA', fromNode, { associativeLineTargets: list, - associativeLineTargetControlOffsets: offsetList + associativeLineTargetControlOffsets: offsetList, + associativeLinePoint }) } @@ -448,6 +457,7 @@ class AssociativeLine { this.removeControls() let { associativeLineTargets, + associativeLinePoint, associativeLineTargetControlOffsets, associativeLineText } = node.nodeData.data @@ -466,6 +476,10 @@ class AssociativeLine { associativeLineTargets: associativeLineTargets.filter((_, index) => { return index !== targetIndex }), + // 连接线坐标 + associativeLinePoint: associativeLinePoint.filter((_, index) => { + return index !== targetIndex + }), // 偏移量 associativeLineTargetControlOffsets: associativeLineTargetControlOffsets ? associativeLineTargetControlOffsets.filter((_, index) => { diff --git a/simple-mind-map/src/plugins/associativeLine/associativeLineControls.js b/simple-mind-map/src/plugins/associativeLine/associativeLineControls.js index 6e5c0641..22a8dceb 100644 --- a/simple-mind-map/src/plugins/associativeLine/associativeLineControls.js +++ b/simple-mind-map/src/plugins/associativeLine/associativeLineControls.js @@ -61,10 +61,10 @@ function onControlPointMousemove(e) { } // 更新当前拖拽的控制点的位置 this[this.mousedownControlPointKey].x(x - radius).y(y - radius) - let [path, clickPath, text, node, toNode] = this.activeLine + let [, , , node, toNode] = this.activeLine let targetIndex = getAssociativeLineTargetIndex(node, toNode) const { - associativeLineTargets, + associativeLinePoint, associativeLineTargetControlOffsets } = node.nodeData.data const nodePos = this.getNodePos(node) @@ -72,7 +72,7 @@ function onControlPointMousemove(e) { let [startPoint, endPoint] = this.updateAllLinesPos( node, toNode, - associativeLineTargets[targetIndex] + associativeLinePoint[targetIndex] ) this.controlPointMousemoveState.startPoint = startPoint this.controlPointMousemoveState.endPoint = endPoint @@ -99,16 +99,10 @@ function onControlPointMousemove(e) { } if (startPoint) { // 保存更新后的坐标 - associativeLineTargets[targetIndex].startPoint = startPoint + associativeLinePoint[targetIndex].startPoint = startPoint this.controlPointMousemoveState.startPoint = startPoint // 更新控制点1的连线 this.controlLine1.plot(startPoint.x, startPoint.y, point1.x, point1.y) - // 更新关联线 - const pathStr = joinCubicBezierPath(startPoint, endPoint, point1, point2) - path.plot(pathStr) - clickPath.plot(pathStr) - this.updateTextPos(path, text) - this.updateTextEditBoxPos(text) } } else { // 拖拽的是控制点2 @@ -123,18 +117,35 @@ function onControlPointMousemove(e) { } if (endPoint) { // 保存更新后结束节点的坐标 - associativeLineTargets[targetIndex].endPoint = endPoint + associativeLinePoint[targetIndex].endPoint = endPoint this.controlPointMousemoveState.endPoint = endPoint // 更新控制点2的连线 this.controlLine2.plot(endPoint.x, endPoint.y, point2.x, point2.y) - // 更新关联线 - const pathStr = joinCubicBezierPath(startPoint, endPoint, point1, point2) - path.plot(pathStr) - clickPath.plot(pathStr) - this.updateTextPos(path, text) - this.updateTextEditBoxPos(text) } } + this.updataAassociativeLine( + startPoint, + endPoint, + point1, + point2, + this.activeLine + ) +} + +function updataAassociativeLine( + startPoint, + endPoint, + point1, + point2, + activeLine +) { + const [path, clickPath, text] = activeLine + // 更新关联线 + const pathStr = joinCubicBezierPath(startPoint, endPoint, point1, point2) + path.plot(pathStr) + clickPath.plot(pathStr) + this.updateTextPos(path, text) + this.updateTextEditBoxPos(text) } // 控制点的鼠标移动事件 @@ -151,7 +162,7 @@ function onControlPointMouseup(e) { let [, , , node] = this.activeLine let offsetList = [] const { - associativeLineTargets, + associativeLinePoint, associativeLineTargetControlOffsets } = node.nodeData.data if (!associativeLineTargetControlOffsets) { @@ -183,7 +194,7 @@ function onControlPointMouseup(e) { offsetList[targetIndex] = [offset1, offset2] this.mindMap.execCommand('SET_NODE_DATA', node, { associativeLineTargetControlOffsets: offsetList, - associativeLineTargets + associativeLinePoint }) // 这里要加个setTimeout0是因为draw_click事件比mouseup事件触发的晚，所以重置isControlPointMousedown需要等draw_click事件触发完以后 setTimeout(() => { @@ -270,5 +281,6 @@ export default { renderControls, removeControls, hideControls, - showControls + showControls, + updataAassociativeLine } diff --git a/simple-mind-map/src/plugins/associativeLine/associativeLineUtils.js b/simple-mind-map/src/plugins/associativeLine/associativeLineUtils.js index be1b619f..b68216e5 100644 --- a/simple-mind-map/src/plugins/associativeLine/associativeLineUtils.js +++ b/simple-mind-map/src/plugins/associativeLine/associativeLineUtils.js @@ -1,7 +1,7 @@ // 获取目标节点在起始节点的目标数组中的索引 export const getAssociativeLineTargetIndex = (node, toNode) => { return node.nodeData.data.associativeLineTargets.findIndex(item => { - return item.id === toNode.nodeData.data.id + return item === toNode.nodeData.data.id }) } @@ -54,7 +54,6 @@ export const cubicBezierPath = (x1, y1, x2, y2) => { ) } -// 计算关联线起始|结束坐标 export const calcPoint = (node, e) => { const { left, top, translateLeft, translateTop, width, height } = node const clientX = e.clientX @@ -220,8 +219,8 @@ export const computeNodePoints = (fromNode, toNode) => { toDir = 'bottom' } else if (offsetY > 0 && -offsetY < offsetX && offsetY > offsetX) { // down - fromDir = 'bottom' - toDir = 'top' + fromDir = 'right' + toDir = 'right' } return [getNodePoint(fromNode, fromDir), getNodePoint(toNode, toDir)] }