alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(core): better smoothstep edge label position

Browse Source
This commit is contained in:
braks
2023-08-21 17:44:20 +02:00
committed by Braks
parent 71aa00bc7a
commit 2f66300f05
1 changed files with 29 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/Edges/utils/smoothstep.ts
+29 -16
View File
@@ -119,20 +119,7 @@ function getPoints({
points = sourceDir.y === currDir ? sourceTarget : targetSource
}
// these are conditions for handling mixed handle positions like Right -> Bottom for example
if (sourcePosition !== targetPosition) {
const dirAccessorOpposite = dirAccessor === 'x' ? 'y' : 'x'
const isSameDir = sourceDir[dirAccessor] === targetDir[dirAccessorOpposite]
const sourceGtTargetOppo = sourceGapped[dirAccessorOpposite] > targetGapped[dirAccessorOpposite]
const sourceLtTargetOppo = sourceGapped[dirAccessorOpposite] < targetGapped[dirAccessorOpposite]
const flipSourceTarget =
(sourceDir[dirAccessor] === 1 && ((!isSameDir && sourceGtTargetOppo) || (isSameDir && sourceLtTargetOppo))) ||
(sourceDir[dirAccessor] !== 1 && ((!isSameDir && sourceLtTargetOppo) || (isSameDir && sourceGtTargetOppo)))
if (flipSourceTarget) {
points = dirAccessor === 'x' ? sourceTarget : targetSource
}
} else {
if (sourcePosition === targetPosition) {
const diff = Math.abs(source[dirAccessor] - target[dirAccessor])
// if an edge goes from right to right for example (sourcePosition === targetPosition) and the distance between source.x and target.x is less than the offset, the added point and the gapped source/target will overlap. This leads to a weird edge path. To avoid this we add a gapOffset to the source/target
@@ -146,8 +133,34 @@ function getPoints({
}
}
centerX = points[0].x
centerY = points[0].y
// these are conditions for handling mixed handle positions like Right -> Bottom for example
if (sourcePosition !== targetPosition) {
const dirAccessorOpposite = dirAccessor === 'x' ? 'y' : 'x'
const isSameDir = sourceDir[dirAccessor] === targetDir[dirAccessorOpposite]
const sourceGtTargetOppo = sourceGapped[dirAccessorOpposite] > targetGapped[dirAccessorOpposite]
const sourceLtTargetOppo = sourceGapped[dirAccessorOpposite] < targetGapped[dirAccessorOpposite]
const flipSourceTarget =
(sourceDir[dirAccessor] === 1 && ((!isSameDir && sourceGtTargetOppo) || (isSameDir && sourceLtTargetOppo))) ||
(sourceDir[dirAccessor] !== 1 && ((!isSameDir && sourceLtTargetOppo) || (isSameDir && sourceGtTargetOppo)))
if (flipSourceTarget) {
points = dirAccessor === 'x' ? sourceTarget : targetSource
}
}
const sourceGapPoint = { x: sourceGapped.x - sourceGapOffset.x, y: sourceGapped.y - sourceGapOffset.y }
const targetGapPoint = { x: targetGapped.x - targetGapOffset.x, y: targetGapped.y - targetGapOffset.y }
const maxXDistance = Math.max(Math.abs(sourceGapPoint.x - points[0].x), Math.abs(targetGapPoint.x - points[0].x))
const maxYDistance = Math.max(Math.abs(sourceGapPoint.y - points[0].y), Math.abs(targetGapPoint.y - points[0].y))
// we want to place the label on the longest segment of the edge
if (maxXDistance >= maxYDistance) {
centerX = (sourceGapPoint.x + targetGapPoint.x) / 2
centerY = points[0].y
} else {
centerX = points[0].x
centerY = (sourceGapPoint.y + targetGapPoint.y) / 2
}
}
const pathPoints = [