feat: Assign default handle id and allow for actual loose connections

* When set to loose allow connections from all handles, this requires ids on handles so a default will be set if none provided

package/src/components/Edges/EdgeWrapper.vue

@@ -42,6 +42,7 @@ const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
   const handleId = (isSourceHandle ? edge.value.targetHandle : edge.value.sourceHandle) ?? ''
 
   store.hooks.edgeUpdateStart.trigger({ event, edge: edge.value })
+
   onMouseDown(
     event,
     handleId,
@@ -58,15 +59,29 @@ const getClass = () => (edge.value.class instanceof Function ? edge.value.class(
 const getStyle = () => (edge.value.style instanceof Function ? edge.value.style(edge.value) : edge.value.style)
 
 // when connection type is loose we can define all handles as sources
-const targetNodeHandles = computed(() =>
-  store.connectionMode === ConnectionMode.Strict
-    ? edge.value.targetNode.handleBounds.target
-    : edge.value.targetNode.handleBounds.target ?? edge.value.targetNode.handleBounds.source,
-)
+const targetNodeHandles = computed(() => {
+  if (store.connectionMode === ConnectionMode.Strict) {
+    return edge.value.targetNode.handleBounds.target
+  }
+
+  const targetBounds = edge.value.targetNode.handleBounds.target || []
+  const sourceBounds = edge.value.targetNode.handleBounds.source || []
+  return [...sourceBounds, ...targetBounds]
+})
+
+const sourceNodeHandles = computed(() => {
+  if (store.connectionMode === ConnectionMode.Strict) {
+    return edge.value.sourceNode.handleBounds.source
+  }
+
+  const targetBounds = edge.value.sourceNode.handleBounds.target || []
+  const sourceBounds = edge.value.sourceNode.handleBounds.source || []
+  return [...sourceBounds, ...targetBounds]
+})
 
 const sourceHandle = controlledComputed(
   () => edge.value.sourceNode.handleBounds,
-  () => getHandle(edge.value.sourceNode.handleBounds.source, edge.value.sourceHandle),
+  () => getHandle(sourceNodeHandles.value, edge.value.sourceHandle),
 )
 
 const targetHandle = computed(() => getHandle(targetNodeHandles.value, edge.value.targetHandle))

package/src/components/Handle/Handle.vue

@@ -13,11 +13,11 @@ const props = withDefaults(defineProps<HandleProps>(), {
 
 const nodeId = inject(NodeId, '')
 
+const handleId = props.id ?? `${nodeId}__handle-${props.position}`
+
 const { onMouseDown, onClick } = useHandle()
 const onMouseDownHandler = (event: MouseEvent) =>
-  onMouseDown(event, props.id ?? null, nodeId, props.type === 'target', props.isValidConnection, undefined, (connection) =>
-    hooks.value.connect.trigger(connection),
-  )
+  onMouseDown(event, handleId, nodeId, props.type === 'target', props.isValidConnection, undefined)
 const onClickHandler = (event: MouseEvent) => onClick(event, props.id ?? null, nodeId, props.type, props.isValidConnection)
 </script>
 <script lang="ts">
@@ -27,7 +27,7 @@ export default {
 </script>
 <template>
   <div
-    :data-handleid="props.id"
+    :data-handleid="handleId"
     :data-nodeid="nodeId"
     :data-handlepos="props.position"
     :class="[

package/src/composables/useHandle.ts

@@ -152,7 +152,8 @@ export default (store: Store = useVueFlow().store) => {
       const isOwnHandle = connection.source === connection.target
 
       if (isValid && !isOwnHandle) {
-        onEdgeUpdate?.(connection)
+        if (!onEdgeUpdate) store.hooks.connect.trigger(connection)
+        else onEdgeUpdate(connection)
       }
 
       store.hooks.connectEnd.trigger(event)

package/src/utils/edge.ts

@@ -37,9 +37,10 @@ export const getHandle = (bounds: HandleElement[] = [], handleId?: string | null
   // there is no handleId when there are no multiple handles/ handles with ids
   // so we just pick the first one
   let handle
-  if (bounds.length === 1 ?? !handleId) handle = bounds[0]
+  if (!handleId && bounds.length === 1) handle = bounds[0]
   else if (handleId) handle = bounds.find((d) => d.id === handleId)
 
+  console.log(handleId, handle, bounds)
   return handle
 }