Merge branch 'main' into nodesbounds

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -21,7 +21,6 @@
   export let type: $$Props['type'] = 'source';
   export let position: $$Props['position'] = Position.Top;
   export let style: $$Props['style'] = undefined;
-  export let isConnectable: $$Props['isConnectable'] = undefined;
   export let isValidConnection: $$Props['isValidConnection'] = undefined;
   export let onconnect: $$Props['onconnect'] = undefined;
   export let ondisconnect: $$Props['ondisconnect'] = undefined;
@@ -29,13 +28,16 @@
   // export let isConnectableStart: $$Props['isConnectableStart'] = undefined;
   // export let isConnectableEnd: $$Props['isConnectableEnd'] = undefined;
 
+  let isConnectableProp: $$Props['isConnectable'] = undefined;
+  export { isConnectableProp as isConnectable };
+
   let className: $$Props['class'] = undefined;
   export { className as class };
 
   $: isTarget = type === 'target';
   const nodeId = getContext<string>('svelteflow__node_id');
   const connectable = getContext<Writable<boolean>>('svelteflow__node_connectable');
-  $: isConnectable = isConnectable !== undefined ? isConnectable : $connectable;
+  $: isConnectable = isConnectableProp !== undefined ? isConnectableProp : $connectable;
 
   $: handleId = id || null;
 
@@ -99,8 +101,8 @@
             handleType: startParams.handleType
           });
         },
-        onConnectEnd: (event) => {
-          $onConnectEndAction?.(event);
+        onConnectEnd: (event, connectionState) => {
+          $onConnectEndAction?.(event, connectionState);
         },
         getTransform: () => [$viewport.x, $viewport.y, $viewport.zoom],
         getFromHandle: () => $connection.fromHandle

packages/svelte/src/lib/container/Pane/Pane.svelte

@@ -92,7 +92,6 @@
 
   function onPointerDown(event: PointerEvent) {
     containerBounds = container.getBoundingClientRect();
-    (event.target as Element)?.setPointerCapture?.(event.pointerId);
 
     if (
       !elementsSelectable ||
@@ -104,6 +103,8 @@
       return;
     }
 
+    (event.target as Element)?.setPointerCapture?.(event.pointerId);
+
     const { x, y } = getEventPosition(event, containerBounds);
 
     unselectNodesAndEdges();
@@ -211,7 +212,7 @@
 <div
   bind:this={container}
   class="svelte-flow__pane"
-  class:draggable={panOnDrag}
+  class:draggable={panOnDrag === true || (Array.isArray(panOnDrag) && panOnDrag.includes(0))}
   class:dragging={$dragging}
   class:selection={isSelecting}
   on:click={hasActiveSelection ? undefined : wrapHandler(onClick, container)}

packages/svelte/src/lib/hooks/useSvelteFlow.ts

@@ -19,6 +19,9 @@ import {
   getBoundsOfBoxes,
   boxToRect,
   isInternalNodeBase
+  evaluateAbsolutePosition,
+  type HandleType,
+  type HandleConnection
 } from '@xyflow/system';
 
 import { useStore } from '$lib/store';
@@ -242,6 +245,22 @@ export function useSvelteFlow(): {
    * @returns the bounds of the given nodes
    */
   getNodesBounds: (nodes: (Node | InternalNode | string)[]) => Rect;
+   * Gets all connections for a given handle belonging to a specific node.
+   *
+   * @param type - handle type 'source' or 'target'
+   * @param id - the handle id (this is only needed if you have multiple handles of the same type, meaning you have to provide a unique id for each handle)
+   * @param nodeId - the node id the handle belongs to
+   * @returns an array with handle connections
+   */
+  getHandleConnections: ({
+    type,
+    id,
+    nodeId
+  }: {
+    type: HandleType;
+    nodeId: string;
+    id?: string | null;
+  }) => HandleConnection[];
 } {
   const {
     zoomIn,
@@ -260,15 +279,32 @@ export function useSvelteFlow(): {
     domNode,
     nodeLookup,
     nodeOrigin,
-    edgeLookup
+    edgeLookup,
+    connectionLookup,
   } = useStore();
 
-  const getNodeRect = (nodeOrRect: Node | { id: Node['id'] }): Rect | null => {
-    const node =
-      isNode(nodeOrRect) && nodeHasDimensions(nodeOrRect)
-        ? nodeOrRect
-        : get(nodeLookup).get(nodeOrRect.id);
-    return node ? nodeToRect(node) : null;
+  const getNodeRect = (node: Node | { id: Node['id'] }): Rect | null => {
+    const $nodeLookup = get(nodeLookup);
+    const nodeToUse = isNode(node) ? node : $nodeLookup.get(node.id)!;
+    const position = nodeToUse.parentId
+      ? evaluateAbsolutePosition(
+          nodeToUse.position,
+          nodeToUse.measured,
+          nodeToUse.parentId,
+          $nodeLookup,
+          get(nodeOrigin)
+        )
+      : nodeToUse.position;
+
+    const nodeWithPosition = {
+      id: nodeToUse.id,
+      position,
+      width: nodeToUse.measured?.width ?? nodeToUse.width,
+      height: nodeToUse.measured?.height ?? nodeToUse.height,
+      data: nodeToUse.data
+    };
+
+    return nodeToRect(nodeWithPosition);
   };
 
   const updateNode = (
@@ -519,7 +555,6 @@ export function useSvelteFlow(): {
 
       nodes.update((nds) => nds);
     },
-    viewport,
     getNodesBounds: (nodes) => {
       if (nodes.length === 0) {
         return { x: 0, y: 0, width: 0, height: 0 };
@@ -547,6 +582,13 @@ export function useSvelteFlow(): {
 
       return boxToRect(box);
     }
+    getHandleConnections: ({ type, id, nodeId }) =>
+      Array.from(
+        get(connectionLookup)
+          .get(`${nodeId}-${type}-${id ?? null}`)
+          ?.values() ?? []
+      ),
+    viewport
   };
 }
 function getElements(lookup: Map<string, InternalNode>, ids: string[]): Node[];