Merge branch 'main' into nodesbounds

2024-08-29 00:09:57 +02:00
parent d5592e7508 d03cd6b7c6
commit 3bca54345c
44 changed files with 1388 additions and 450 deletions
@@ -1,5 +1,44 @@
 # @xyflow/svelte

+## 0.1.17
+
+### Patch Changes
+
+- [#4574](https://github.com/xyflow/xyflow/pull/4574) [`b65aed19`](https://github.com/xyflow/xyflow/commit/b65aed19840c515949bef236a23d5f0a754cdeb4) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add `getHandleConnections` helper to `useReactFlow` & `useSvelteFlow`
+
+- Updated dependencies [[`5138d90b`](https://github.com/xyflow/xyflow/commit/5138d90bdb91ff5d8dbeb8c8d29bdfd31c5b59d6), [`12dbe125`](https://github.com/xyflow/xyflow/commit/12dbe125755fad7d2f6dff19100872dd823d1012)]:
+  - @xyflow/system@0.0.40
+
+## 0.1.16
+
+### Patch Changes
+
+- [#4568](https://github.com/xyflow/xyflow/pull/4568) [`c3e62782`](https://github.com/xyflow/xyflow/commit/c3e6278222dc13333f75ecdbe634201ddabab87a) Thanks [@peterkogo](https://github.com/peterkogo)! - Only display grab cursor when panOnDrag is on left mouse button
+
+- [#4569](https://github.com/xyflow/xyflow/pull/4569) [`54bfb6d9`](https://github.com/xyflow/xyflow/commit/54bfb6d9383b2c041f243c1ba16ce169c2b90085) Thanks [@peterkogo](https://github.com/peterkogo)! - Fix getIntersectingNodes for subflows
+
+- Updated dependencies [[`c3e62782`](https://github.com/xyflow/xyflow/commit/c3e6278222dc13333f75ecdbe634201ddabab87a)]:
+  - @xyflow/system@0.0.39
+
+## 0.1.15
+
+### Patch Changes
+
+- [#4510](https://github.com/xyflow/xyflow/pull/4510) [`12313a5b`](https://github.com/xyflow/xyflow/commit/12313a5b01312ef4425d3fa666e578961a151fe2) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Rename `isConnectable` prop locally to `isConnectableProp` to avoid naming collision with derived value of `isConnectable` in `<Handle>` component.
+
+- [#4517](https://github.com/xyflow/xyflow/pull/4517) [`085951bc`](https://github.com/xyflow/xyflow/commit/085951bc07f02ac7af143409fe156bade8a63113) Thanks [@ghostdevv](https://github.com/ghostdevv)! - fix: make svelte-preprocess a dev dep
+
+- [#4549](https://github.com/xyflow/xyflow/pull/4549) [`99733c01`](https://github.com/xyflow/xyflow/commit/99733c01bc70f9463e7dba0046c5f8d839a1d2ba) Thanks [@moklick](https://github.com/moklick)! - feat(onConnectEnd): pass connectionState param
+
+- Updated dependencies [[`b63a3734`](https://github.com/xyflow/xyflow/commit/b63a3734b84b6817603c8e6e48e2836f048acc3b), [`24e87e39`](https://github.com/xyflow/xyflow/commit/24e87e398419646f671af1085fbfec3e197bc56b), [`692e6440`](https://github.com/xyflow/xyflow/commit/692e6440b10e75cb31f3f3172aede9ed4d7f05d2), [`559d4926`](https://github.com/xyflow/xyflow/commit/559d49264b940f93c5e205bf984aa76230b10806), [`4ecfd7e1`](https://github.com/xyflow/xyflow/commit/4ecfd7e19720b70024d0b5dff27d4537dd46b49a), [`e7ef328f`](https://github.com/xyflow/xyflow/commit/e7ef328f8f9286a817b19457d38c491e6c0bcffd), [`99733c01`](https://github.com/xyflow/xyflow/commit/99733c01bc70f9463e7dba0046c5f8d839a1d2ba)]:
+  - @xyflow/system@0.0.38
+
+## 0.1.14
+
+### Patch Changes
+
+- [#4498](https://github.com/xyflow/xyflow/pull/4498) [`7a6e9e30`](https://github.com/xyflow/xyflow/commit/7a6e9e3091c8ee0aedbf8ae6e5c4ee08485417ab) Thanks [@peterkogo](https://github.com/peterkogo)! - fix(pane) only capture pointer after a valid selection has started, fixes #4492
+
 ## 0.1.13

 ### Patch Changes
@@ -1,6 +1,6 @@
 {
  "name": "@xyflow/svelte",
-  "version": "0.1.13",
+  "version": "0.1.17",
  "description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.",
  "keywords": [
    "svelte",
@@ -43,8 +43,7 @@
  "dependencies": {
    "@svelte-put/shortcut": "^3.1.0",
    "@xyflow/system": "workspace:*",
-    "classcat": "^5.0.4",
-    "svelte-preprocess": "^5.1.3"
+    "classcat": "^5.0.4"
  },
  "devDependencies": {
    "@sveltejs/adapter-auto": "^3.1.1",
@@ -69,6 +68,7 @@
    "svelte": "^4.2.12",
    "svelte-check": "^3.6.7",
    "svelte-eslint-parser": "^0.33.1",
+    "svelte-preprocess": "^5.1.3",
    "tslib": "^2.6.2",
    "typescript": "5.4.2"
  },
@@ -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
@@ -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)}
@@ -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[];