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

refactor(core): remove reactivity transform from connection line component

Browse Source
This commit is contained in:
braks
2023-05-25 20:48:26 +02:00
committed by Braks
parent 627cbf65a8
commit 9b0b969caf
1 changed files with 27 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/ConnectionLine/ConnectionLine.vue
+27 -29
View File
@@ -16,7 +16,7 @@ const {
connectionStatus, connectionStatus,
viewport, viewport,
findNode, findNode,
} = $(useVueFlow()) } = useVueFlow()
const oppositePosition = { const oppositePosition = {
[Position.Left]: Position.Right, [Position.Left]: Position.Right,
@@ -27,44 +27,42 @@ const oppositePosition = {
const connectionLineComponent = inject(Slots)?.['connection-line'] const connectionLineComponent = inject(Slots)?.['connection-line']
const handleId = $computed(() => connectionStartHandle!.handleId) const handleId = connectionStartHandle.value!.handleId
const type = computed(() => connectionStartHandle!.type) const type = connectionStartHandle.value!.type
const targetNode = $computed(() => (connectionEndHandle?.handleId && findNode(connectionEndHandle.nodeId)) || null) const targetNode = computed(() => (connectionEndHandle.value?.handleId && findNode(connectionEndHandle.value.nodeId)) || null)
const sourceHandle = $computed( const sourceHandle = computed(
() => () =>
(connectionMode === ConnectionMode.Strict (connectionMode.value === ConnectionMode.Strict
? sourceNode.handleBounds[type.value]?.find((d) => d.id === handleId) ? sourceNode.handleBounds[type]?.find((d) => d.id === handleId)
: [...(sourceNode.handleBounds.source || []), ...(sourceNode.handleBounds.target || [])]?.find((d) => d.id === handleId)) || : [...(sourceNode.handleBounds.source || []), ...(sourceNode.handleBounds.target || [])]?.find((d) => d.id === handleId)) ||
sourceNode.handleBounds[type.value ?? 'source']?.[0], sourceNode.handleBounds[type ?? 'source']?.[0],
) )
const targetHandle = $computed(() => { const targetHandle = computed(() => {
return ( return (
(targetNode && (targetNode.value &&
connectionEndHandle?.handleId && connectionEndHandle.value?.handleId &&
((connectionMode === ConnectionMode.Strict ((connectionMode.value === ConnectionMode.Strict
? targetNode.handleBounds[type.value === 'source' ? 'target' : 'source']?.find( ? targetNode.value.handleBounds[type === 'source' ? 'target' : 'source']?.find(
(d) => d.id === connectionEndHandle?.handleId, (d) => d.id === connectionEndHandle.value?.handleId,
) )
: [...(targetNode.handleBounds.source || []), ...(targetNode.handleBounds.target || [])]?.find( : [...(targetNode.value.handleBounds.source || []), ...(targetNode.value.handleBounds.target || [])]?.find(
(d) => d.id === connectionEndHandle?.handleId, (d) => d.id === connectionEndHandle.value?.handleId,
)) || )) ||
targetNode.handleBounds[type.value ?? 'target']?.[0])) || targetNode.value.handleBounds[type ?? 'target']?.[0])) ||
null null
) )
}) })
const fromPosition = computed(() => sourceHandle?.position)
const fromXY = computed(() => { const fromXY = computed(() => {
if (sourceHandle) { if (sourceHandle.value) {
return getHandlePosition( return getHandlePosition(
fromPosition.value || Position.Top, sourceHandle.value?.position || Position.Top,
{ ...sourceNode.dimensions, ...sourceNode.computedPosition }, { ...sourceNode.dimensions, ...sourceNode.computedPosition },
sourceHandle, sourceHandle.value,
) )
} }
@@ -74,11 +72,11 @@ const fromXY = computed(() => {
} }
}) })
const targetPosition = computed(() => (fromPosition.value ? oppositePosition[fromPosition.value] : undefined)) const targetPosition = computed(() => (sourceHandle.value?.position ? oppositePosition[sourceHandle.value?.position] : undefined))
// todo: rename corresponding props // todo: rename corresponding props
const toX = $computed(() => (connectionPosition.x - viewport.x) / viewport.zoom) const toX = computed(() => (connectionPosition.value.x - viewport.value.x) / viewport.value.zoom)
const toY = $computed(() => (connectionPosition.y - viewport.y) / viewport.zoom) const toY = computed(() => (connectionPosition.value.y - viewport.value.y) / viewport.value.zoom)
const dAttr = computed(() => { const dAttr = computed(() => {
let path let path
@@ -86,13 +84,13 @@ const dAttr = computed(() => {
const pathParams = { const pathParams = {
sourceX: fromXY.value.x, sourceX: fromXY.value.x,
sourceY: fromXY.value.y, sourceY: fromXY.value.y,
sourcePosition: fromPosition.value, sourcePosition: sourceHandle.value?.position,
targetX: toX, targetX: toX.value,
targetY: toY, targetY: toY.value,
targetPosition: targetPosition.value, targetPosition: targetPosition.value,
} }
const type = connectionLineType ?? connectionLineOptions.type const type = connectionLineType.value ?? connectionLineOptions.value.type
switch (type) { switch (type) {
case ConnectionLineType.Bezier: case ConnectionLineType.Bezier: