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

refactor(core): use opposite position for connection lines

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2023-02-05 23:39:15 +01:00
committed by Braks
parent 7f26253be1
commit 6c00909f46
1 changed files with 26 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/ConnectionLine/ConnectionLine.vue
+26 -20
View File
@@ -16,28 +16,34 @@ const {
viewport, viewport,
} = $(useVueFlow()) } = $(useVueFlow())
const slots = inject(Slots)?.['connection-line'] const oppositePosition = {
[Position.Left]: Position.Right,
[Position.Right]: Position.Left,
[Position.Top]: Position.Bottom,
[Position.Bottom]: Position.Top,
}
const hasSlot = slots?.({}) const connectionLineComponent = inject(Slots)?.['connection-line']
const handleId = connectionStartHandle!.handleId const handleId = $computed(() => connectionStartHandle!.handleId)
const type = connectionStartHandle!.type const type = computed(() => connectionStartHandle!.type)
const sourceHandle = const sourceHandle = $computed(
(connectionMode === ConnectionMode.Strict () =>
? sourceNode.handleBounds[type]?.find((d) => d.id === handleId) (connectionMode === ConnectionMode.Strict
: [...(sourceNode.handleBounds.source || []), ...(sourceNode.handleBounds.target || [])]?.find((d) => d.id === handleId)) || ? sourceNode.handleBounds[type.value]?.find((d) => d.id === handleId)
sourceNode.handleBounds[type ?? 'source']?.[0] : [...(sourceNode.handleBounds.source || []), ...(sourceNode.handleBounds.target || [])]?.find((d) => d.id === handleId)) ||
sourceNode.handleBounds[type.value ?? 'source']?.[0],
)
const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.dimensions.width / 2 const sourceHandleX = $computed(() => (sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.dimensions.width / 2))
const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.dimensions.height const sourceHandleY = $computed(() => (sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.dimensions.height))
const sourceX = sourceNode.computedPosition.x + sourceHandleX const sourceX = $computed(() => sourceNode.computedPosition.x + sourceHandleX)
const sourceY = sourceNode.computedPosition.y + sourceHandleY const sourceY = $computed(() => sourceNode.computedPosition.y + sourceHandleY)
const isRightOrLeft = sourceHandle?.position === Position.Left || sourceHandle?.position === Position.Right const fromPosition = computed(() => sourceHandle?.position)
const targetPosition = computed(() => (fromPosition.value ? oppositePosition[fromPosition.value] : undefined))
const targetPosition = isRightOrLeft ? Position.Left : Position.Top
const targetX = $computed(() => (connectionPosition.x - viewport.x) / viewport.zoom) const targetX = $computed(() => (connectionPosition.x - viewport.x) / viewport.zoom)
const targetY = $computed(() => (connectionPosition.y - viewport.y) / viewport.zoom) const targetY = $computed(() => (connectionPosition.y - viewport.y) / viewport.zoom)
@@ -48,10 +54,10 @@ const dAttr = computed(() => {
const pathParams = { const pathParams = {
sourceX, sourceX,
sourceY, sourceY,
sourcePosition: sourceHandle?.position, sourcePosition: fromPosition.value,
targetX, targetX,
targetY, targetY,
targetPosition, targetPosition: targetPosition.value,
} }
switch (connectionLineType || connectionLineOptions.type) { switch (connectionLineType || connectionLineOptions.type) {
@@ -85,8 +91,8 @@ export default {
<template> <template>
<g class="vue-flow__connection"> <g class="vue-flow__connection">
<component <component
:is="slots" :is="connectionLineComponent"
v-if="hasSlot" v-if="connectionLineComponent"
:source-x="sourceX" :source-x="sourceX"
:source-y="sourceY" :source-y="sourceY"
:source-position="sourceHandle?.position" :source-position="sourceHandle?.position"