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

refactor(core): add connection start and end handles to store state

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2023-04-03 08:53:33 +02:00
committed by Braks
parent eab9991762
commit 4efc787067
8 changed files with 53 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/ConnectionLine/ConnectionLine.vue
+5 -6
View File
@@ -8,6 +8,7 @@ const { sourceNode } = defineProps<{ sourceNode: GraphNode }>()
const {
connectionMode,
connectionStartHandle,
connectionEndHandle,
connectionPosition,
connectionLineType,
connectionLineStyle,
@@ -30,9 +31,7 @@ const handleId = $computed(() => connectionStartHandle!.handleId)
const type = computed(() => connectionStartHandle!.type)
const targetNode = $computed(
() => (connectionStartHandle?.result && findNode(connectionStartHandle.result.connection.target)) || null,
)
const targetNode = $computed(() => (connectionEndHandle?.handleId && findNode(connectionEndHandle.handleId)) || null)
const sourceHandle = $computed(
() =>
@@ -45,13 +44,13 @@ const sourceHandle = $computed(
const targetHandle = $computed(() => {
return (
(targetNode &&
connectionStartHandle?.result?.handleId &&
connectionEndHandle?.handleId &&
((connectionMode === ConnectionMode.Strict
? targetNode.handleBounds[type.value === 'source' ? 'target' : 'source']?.find(
(d) => d.id === connectionStartHandle?.result?.handleId,
(d) => d.id === connectionEndHandle?.handleId,
)
: [...(targetNode.handleBounds.source || []), ...(targetNode.handleBounds.target || [])]?.find(
(d) => d.id === connectionStartHandle?.result?.handleId,
(d) => d.id === connectionEndHandle?.handleId,
)) ||
targetNode.handleBounds[type.value ?? 'target']?.[0])) ||
null
packages/core/src/components/Handle/Handle.vue
+18 -8
View File
@@ -21,7 +21,8 @@ const emits = defineEmits<{
const type = toRef(props, 'type', 'source')
const { connectionStartHandle, vueFlowRef, nodesConnectable, noDragClassName } = useVueFlow()
const { connectionStartHandle, connectionClickStartHandle, connectionEndHandle, vueFlowRef, nodesConnectable, noDragClassName } =
useVueFlow()
const { id: nodeId, node, nodeEl, connectedEdges } = useNode()
@@ -58,10 +59,19 @@ const isConnectable = computed(() => {
const isConnecting = computed(
() =>
connectionStartHandle.value &&
connectionStartHandle.value.nodeId === nodeId &&
connectionStartHandle.value.handleId === handleId.value &&
connectionStartHandle.value.type === type.value,
(connectionStartHandle.value?.nodeId === nodeId &&
connectionStartHandle.value?.handleId === handleId.value &&
connectionStartHandle.value?.type === type.value) ||
(connectionEndHandle.value?.nodeId === nodeId &&
connectionEndHandle.value?.handleId === handleId.value &&
connectionEndHandle.value?.type === type.value),
)
const isClickConnecting = computed(
() =>
connectionClickStartHandle.value?.nodeId === nodeId &&
connectionClickStartHandle.value?.handleId === handleId.value &&
connectionClickStartHandle.value?.type === type.value,
)
// set up handle bounds if they don't exist yet and the node has been initialized (i.e. the handle was added after the node has already been mounted)
@@ -109,7 +119,7 @@ function onPointerDown(event: MouseEvent | TouchEvent) {
}
function onClick(event: MouseEvent) {
if (!connectionStartHandle && !connectableStart) {
if (!nodeId || (!connectionStartHandle && !connectableStart)) {
return
}
@@ -141,10 +151,10 @@ export default {
type,
{
connectable: isConnectable,
connecting: isConnecting,
connecting: isClickConnecting,
connectablestart: connectableStart,
connectableend: connectableEnd,
connectionindicator: (isConnectable && connectableStart && !isConnecting) || (connectableEnd && isConnecting),
connectionindicator: isConnectable && ((connectableStart && !isConnecting) || (connectableEnd && isConnecting)),
},
]"
@mousedown="onPointerDown"