Fix:1.优化展开收起代码逻辑;2.修复关联线不兼容老版的问题,修复端点偏移量未保存的问题

This commit is contained in:
wanglin2 2023-08-31 19:43:59 +08:00
parent f2642c9d63
commit 1157257911
3 changed files with 54 additions and 52 deletions

View File

@ -3,18 +3,15 @@ import { SVG, Circle, G } from '@svgdotjs/svg.js'
// 创建展开收起按钮的内容节点 // 创建展开收起按钮的内容节点
function createExpandNodeContent() { function createExpandNodeContent() {
if (this._openExpandNode && !this.mindMap.opt.isShowExpandNum) { if (this._openExpandNode) {
return return
} }
let { close, open } = this.mindMap.opt.expandBtnIcon || {} let { close, open } = this.mindMap.opt.expandBtnIcon || {}
// 根据配置判断是否显示数量按钮 // 根据配置判断是否显示数量按钮
if (this.mindMap.opt.isShowExpandNum) { if (this.mindMap.opt.isShowExpandNum) {
// 计算子节点数量
let count = this.sumNode(this.nodeData.children)
count = this.mindMap.opt.expandBtnNumHandler(count)
// 展开的节点 // 展开的节点
this._openExpandNode = SVG() this._openExpandNode = SVG()
.text(count) .text()
.size(this.expandBtnSize, this.expandBtnSize) .size(this.expandBtnSize, this.expandBtnSize)
// 文本垂直居中 // 文本垂直居中
this._openExpandNode.attr({ this._openExpandNode.attr({
@ -73,12 +70,20 @@ function updateExpandBtnNode() {
if (this._expandBtn) { if (this._expandBtn) {
// 如果是收起按钮加上边框 // 如果是收起按钮加上边框
let opt = this.mindMap.opt let { isShowExpandNum, expandBtnStyle, expandBtnNumHandler } = this.mindMap.opt
if (!expand && opt.isShowExpandNum) { if (isShowExpandNum) {
// 数字按钮添加边框 if (!expand) {
this._fillExpandNode.stroke({ // 数字按钮添加边框
color: opt.expandBtnStyle.strokeColor 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) this._expandBtn.add(this._fillExpandNode).add(node)
} }

View File

@ -6,8 +6,7 @@ import {
cubicBezierPath, cubicBezierPath,
getNodePoint, getNodePoint,
computeNodePoints, computeNodePoints,
getNodeLinePath, getNodeLinePath
getDefaultControlPointOffsets
} from './associativeLine/associativeLineUtils' } from './associativeLine/associativeLineUtils'
import associativeLineControlsMethods from './associativeLine/associativeLineControls' import associativeLineControlsMethods from './associativeLine/associativeLineControls'
import associativeLineTextMethods from './associativeLine/associativeLineText' import associativeLineTextMethods from './associativeLine/associativeLineText'
@ -106,13 +105,15 @@ class AssociativeLine {
this.markerPath = add.path('M0,0 L2,5 L0,10 L10,5 Z') this.markerPath = add.path('M0,0 L2,5 L0,10 L10,5 Z')
}) })
} }
// 判断关联线坐标是否变更,有变更则使用变化后的坐标,无则默认坐标 // 判断关联线坐标是否变更,有变更则使用变化后的坐标,无则默认坐标
updateAllLinesPos(node, toNode, associativeLinePoint) { updateAllLinesPos(node, toNode, associativeLinePoint) {
associativeLinePoint = associativeLinePoint || {}
let [startPoint, endPoint] = computeNodePoints(node, toNode) let [startPoint, endPoint] = computeNodePoints(node, toNode)
let nodeRange = 0 let nodeRange = 0
let nodeDir = 'right' let nodeDir = ''
let toNodeRange = 0 let toNodeRange = 0
let toNodeDir = 'right' let toNodeDir = ''
if (associativeLinePoint.startPoint) { if (associativeLinePoint.startPoint) {
nodeRange = associativeLinePoint.startPoint.range || 0 nodeRange = associativeLinePoint.startPoint.range || 0
nodeDir = associativeLinePoint.startPoint.dir || 'right' nodeDir = associativeLinePoint.startPoint.dir || 'right'
@ -160,8 +161,8 @@ class AssociativeLine {
ids.forEach((id, index) => { ids.forEach((id, index) => {
let toNode = idToNode.get(id) let toNode = idToNode.get(id)
if (!node || !toNode) return if (!node || !toNode) return
const associativeLinePoint = const associativeLinePoint = (node.nodeData.data.associativeLinePoint ||
node.nodeData.data.associativeLinePoint[index] || {} [])[index]
// 切换结构和布局,都会更新坐标 // 切换结构和布局,都会更新坐标
const [startPoint, endPoint] = this.updateAllLinesPos( const [startPoint, endPoint] = this.updateAllLinesPos(
node, node,
@ -294,10 +295,8 @@ class AssociativeLine {
// 创建连接线 // 创建连接线
createLine(fromNode) { createLine(fromNode) {
let { let { associativeLineWidth, associativeLineColor } =
associativeLineWidth, this.mindMap.themeConfig
associativeLineColor
} = this.mindMap.themeConfig
if (this.isCreatingLine || !fromNode) return if (this.isCreatingLine || !fromNode) return
this.isCreatingLine = true this.isCreatingLine = true
this.creatingStartNode = fromNode this.creatingStartNode = fromNode
@ -332,12 +331,8 @@ class AssociativeLine {
// 获取转换后的鼠标事件对象的坐标 // 获取转换后的鼠标事件对象的坐标
getTransformedEventPos(e) { getTransformedEventPos(e) {
let { x, y } = this.mindMap.toPos(e.clientX, e.clientY) let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
let { let { scaleX, scaleY, translateX, translateY } =
scaleX, this.mindMap.draw.transform()
scaleY,
translateX,
translateY
} = this.mindMap.draw.transform()
return { return {
x: (x - translateX) / scaleX, x: (x - translateX) / scaleX,
y: (y - translateY) / scaleY y: (y - translateY) / scaleY
@ -346,12 +341,8 @@ class AssociativeLine {
// 计算节点偏移位置 // 计算节点偏移位置
getNodePos(node) { getNodePos(node) {
const { const { scaleX, scaleY, translateX, translateY } =
scaleX, this.mindMap.draw.transform()
scaleY,
translateX,
translateY
} = this.mindMap.draw.transform()
const { left, top, width, height } = node const { left, top, width, height } = node
let translateLeft = left * scaleX + translateX let translateLeft = left * scaleX + translateX
let translateTop = top * scaleY + translateY let translateTop = top * scaleY + translateY
@ -461,6 +452,7 @@ class AssociativeLine {
associativeLineTargetControlOffsets, associativeLineTargetControlOffsets,
associativeLineText associativeLineText
} = node.nodeData.data } = node.nodeData.data
associativeLinePoint = associativeLinePoint || []
let targetIndex = getAssociativeLineTargetIndex(node, toNode) let targetIndex = getAssociativeLineTargetIndex(node, toNode)
// 更新关联线文本数据 // 更新关联线文本数据
let newAssociativeLineText = {} let newAssociativeLineText = {}

View File

@ -63,10 +63,9 @@ function onControlPointMousemove(e) {
this[this.mousedownControlPointKey].x(x - radius).y(y - radius) this[this.mousedownControlPointKey].x(x - radius).y(y - radius)
let [, , , node, toNode] = this.activeLine let [, , , node, toNode] = this.activeLine
let targetIndex = getAssociativeLineTargetIndex(node, toNode) let targetIndex = getAssociativeLineTargetIndex(node, toNode)
const { let { associativeLinePoint, associativeLineTargetControlOffsets } =
associativeLinePoint, node.nodeData.data
associativeLineTargetControlOffsets associativeLinePoint = associativeLinePoint || []
} = node.nodeData.data
const nodePos = this.getNodePos(node) const nodePos = this.getNodePos(node)
const toNodePos = this.getNodePos(toNode) const toNodePos = this.getNodePos(toNode)
let [startPoint, endPoint] = this.updateAllLinesPos( let [startPoint, endPoint] = this.updateAllLinesPos(
@ -86,9 +85,14 @@ function onControlPointMousemove(e) {
} }
let point1 = null let point1 = null
let point2 = null let point2 = null
const { x: clientX, y: clientY } = this.mindMap.toPos(e.clientX, e.clientY)
const _e = {
clientX,
clientY
}
// 拖拽的是控制点1 // 拖拽的是控制点1
if (this.mousedownControlPointKey === 'controlPoint1') { if (this.mousedownControlPointKey === 'controlPoint1') {
startPoint = getNodePoint(nodePos, '', 0, e) startPoint = getNodePoint(nodePos, '', 0, _e)
point1 = { point1 = {
x, x,
y y
@ -99,14 +103,13 @@ function onControlPointMousemove(e) {
} }
if (startPoint) { if (startPoint) {
// 保存更新后的坐标 // 保存更新后的坐标
associativeLinePoint[targetIndex].startPoint = startPoint
this.controlPointMousemoveState.startPoint = startPoint this.controlPointMousemoveState.startPoint = startPoint
// 更新控制点1的连线 // 更新控制点1的连线
this.controlLine1.plot(startPoint.x, startPoint.y, point1.x, point1.y) this.controlLine1.plot(startPoint.x, startPoint.y, point1.x, point1.y)
} }
} else { } else {
// 拖拽的是控制点2 // 拖拽的是控制点2
endPoint = getNodePoint(toNodePos, '', 0, e) endPoint = getNodePoint(toNodePos, '', 0, _e)
point1 = { point1 = {
x: startPoint.x + offsets[0].x, x: startPoint.x + offsets[0].x,
y: startPoint.y + offsets[0].y y: startPoint.y + offsets[0].y
@ -117,7 +120,6 @@ function onControlPointMousemove(e) {
} }
if (endPoint) { if (endPoint) {
// 保存更新后结束节点的坐标 // 保存更新后结束节点的坐标
associativeLinePoint[targetIndex].endPoint = endPoint
this.controlPointMousemoveState.endPoint = endPoint this.controlPointMousemoveState.endPoint = endPoint
// 更新控制点2的连线 // 更新控制点2的连线
this.controlLine2.plot(endPoint.x, endPoint.y, point2.x, point2.y) this.controlLine2.plot(endPoint.x, endPoint.y, point2.x, point2.y)
@ -148,23 +150,24 @@ function updataAassociativeLine(
this.updateTextEditBoxPos(text) this.updateTextEditBoxPos(text)
} }
// 控制点的鼠标移动事件 // 控制点的鼠标松开事件
function onControlPointMouseup(e) { function onControlPointMouseup(e) {
if (!this.isControlPointMousedown) return if (!this.isControlPointMousedown) return
e.stopPropagation() e.stopPropagation()
e.preventDefault() e.preventDefault()
let { let { pos, startPoint, endPoint, targetIndex } =
pos, this.controlPointMousemoveState
startPoint,
endPoint,
targetIndex
} = this.controlPointMousemoveState
let [, , , node] = this.activeLine let [, , , node] = this.activeLine
let offsetList = [] let offsetList = []
const { let { associativeLinePoint, associativeLineTargetControlOffsets } =
associativeLinePoint, node.nodeData.data
associativeLineTargetControlOffsets if (!associativeLinePoint) {
} = node.nodeData.data associativeLinePoint = []
}
associativeLinePoint[targetIndex] = associativeLinePoint[targetIndex] || {
startPoint,
endPoint
}
if (!associativeLineTargetControlOffsets) { if (!associativeLineTargetControlOffsets) {
// 兼容0.4.5版本没有associativeLineTargetControlOffsets的情况 // 兼容0.4.5版本没有associativeLineTargetControlOffsets的情况
offsetList[targetIndex] = getDefaultControlPointOffsets( offsetList[targetIndex] = getDefaultControlPointOffsets(
@ -183,6 +186,7 @@ function onControlPointMouseup(e) {
y: pos.y - startPoint.y y: pos.y - startPoint.y
} }
offset2 = offsetList[targetIndex][1] offset2 = offsetList[targetIndex][1]
associativeLinePoint[targetIndex].startPoint = startPoint
} else { } else {
// 更新控制点2数据 // 更新控制点2数据
offset1 = offsetList[targetIndex][0] offset1 = offsetList[targetIndex][0]
@ -190,6 +194,7 @@ function onControlPointMouseup(e) {
x: pos.x - endPoint.x, x: pos.x - endPoint.x,
y: pos.y - endPoint.y y: pos.y - endPoint.y
} }
associativeLinePoint[targetIndex].endPoint = endPoint
} }
offsetList[targetIndex] = [offset1, offset2] offsetList[targetIndex] = [offset1, offset2]
this.mindMap.execCommand('SET_NODE_DATA', node, { this.mindMap.execCommand('SET_NODE_DATA', node, {