Fix:1.优化展开收起代码逻辑;2.修复关联线不兼容老版的问题,修复端点偏移量未保存的问题
This commit is contained in:
parent
f2642c9d63
commit
1157257911
@ -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)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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 = {}
|
||||||
|
|||||||
@ -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, {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user