Merge pull request #4028 from xyflow/next

React Flow 12.0.0-next.12 & Svelte Flow 0.0.39

README.md

@@ -17,20 +17,20 @@ Powerful open source libraries for building node-based UIs with React or Svelte.
 ## The xyflow mono repo
 
 The xyflow repository is the home of four packages:
-* React Flow v11 `reactflow` [v11 branch](https://github.com/xyflow/xyflow/tree/v11)
+* React Flow 11 `reactflow` [v11 branch](https://github.com/xyflow/xyflow/tree/v11)
-* React Flow v12 (not published yet) [packages/react](./packages/react)
+* React Flow 12 (beta) `@xyflow/svelte` [packages/react](./packages/react)
 * Svelte Flow `@xyflow/svelte` [packages/svelte](./packages/svelte)
 * Shared helper library `@xyflow/system` [packages/system](./packages/system)
 
 **We just moved repositories** from the @wbkd org to this one. React Flow v11 will remain on the [v11 branch](https://github.com/xyflow/xyflow/tree/v11). When we have a stable v12, the package name of React Flow will change from `reactflow` to `@xyflow/react`.
 
-## Commercial Usage
+## Commercial usage
 
 **Are you using React Flow or Svelte Flow for a personal project?** Great! No sponsorship needed, you can support us by reporting any bugs you find, sending us screenshots of your projects, and starring us on Github 🌟
 
 **Are you using React Flow or Svelte Flow at your organization and making money from it?** Awesome! We rely on your support to keep our libraries developed and maintained under an MIT License, just how we like it. For React Flow you can do that on the [React Flow Pro website](https://reactflow.dev/pro) and for both of our libraries you can do it through [Github Sponsors](https://github.com/sponsors/xyflow).
 
-## Getting Started
+## Getting started
 
 The best way to get started is to check out the [React Flow](https://reactflow.dev/learn) or [Svelte Flow](https://svelteflow.dev/learn) learn section. However if you want to get a sneak peek of how to install the and use the libraries you can see it here: 
 

examples/react/src/examples/Intersection/index.tsx

@@ -17,28 +17,34 @@ const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', n
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 
 const initialNodes: Node[] = [
+  {
+    id: '0',
+    data: { label: 'rectangle' },
+    position: { x: 0, y: 0 },
+    width: 100,
+    height: 100,
+    draggable: false,
+    style: {
+      opacity: 0.5,
+    },
+  },
   {
     id: '1',
     type: 'input',
     data: { label: 'Node 1' },
     position: { x: 0, y: 0 },
-    className: 'light',
+    width: 200,
-    style: {
+    height: 100,
-      width: 200,
-      height: 100,
-    },
   },
   {
     id: '2',
     data: { label: 'Node 2' },
     position: { x: 0, y: 150 },
-    className: 'light',
   },
   {
     id: '3',
     data: { label: 'Node 3' },
     position: { x: 250, y: 0 },
-    className: 'light',
   },
   {
     id: '4',
@@ -48,7 +54,6 @@ const initialNodes: Node[] = [
       width: 50,
       height: 50,
     },
-    className: 'light',
   },
 ];
 

packages/react/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @xyflow/react
 
+## 12.0.0-next.12
+
+## Patch changes
+
+- fix useNodesData: handle invalid node id thanks @saswatax
+- fix forwardRef: use custom fixForwardRef function
+- refactor intersection helpers to use passed node value
+
 ## 12.0.0-next.11
 
 ## Patch changes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/react",
-  "version": "12.0.0-next.11",
+  "version": "12.0.0-next.12",
   "description": "React Flow - A highly customizable React library for building node-based editors and interactive flow charts.",
   "keywords": [
     "react",

packages/react/src/components/EdgeWrapper/EdgeUpdateAnchors.tsx

@@ -96,6 +96,7 @@ export function EdgeUpdateAnchors<EdgeType extends Edge = Edge>({
       onEdgeUpdateEnd: _onEdgeUpdateEnd,
       updateConnection,
       getTransform: () => store.getState().transform,
+      getConnectionStartHandle: () => store.getState().connectionStartHandle,
     });
   };
 

packages/react/src/components/Handle/index.tsx

@@ -4,7 +4,6 @@ import {
   type TouchEvent as ReactTouchEvent,
   type ForwardedRef,
   memo,
-  forwardRef,
 } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
@@ -24,6 +23,7 @@ import {
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { useNodeId } from '../../contexts/NodeIdContext';
 import { type ReactFlowState } from '../../types';
+import { fixedForwardRef } from '../../utils';
 
 export interface HandleComponentProps extends HandleProps, Omit<HTMLAttributes<HTMLDivElement>, 'id'> {}
 
@@ -140,6 +140,7 @@ function HandleComponent(
         onConnect: onConnectExtended,
         isValidConnection: isValidConnection || currentStore.isValidConnection,
         getTransform: () => store.getState().transform,
+        getConnectionStartHandle: () => store.getState().connectionStartHandle,
       });
     }
 
@@ -242,4 +243,4 @@ function HandleComponent(
 /**
  * The Handle component is a UI element that is used to connect nodes.
  */
-export const Handle = memo(forwardRef(HandleComponent));
+export const Handle = memo(fixedForwardRef(HandleComponent));

packages/react/src/container/ReactFlow/index.tsx

@@ -1,4 +1,4 @@
-import { ForwardedRef, forwardRef, type CSSProperties } from 'react';
+import { ForwardedRef, type CSSProperties } from 'react';
 import cc from 'classcat';
 import { ConnectionLineType, PanOnScrollMode, SelectionMode, infiniteExtent, isMacOs } from '@xyflow/system';
 
@@ -11,6 +11,7 @@ import { GraphView } from '../GraphView';
 import { Wrapper } from './Wrapper';
 import type { Edge, Node, ReactFlowProps } from '../../types';
 import { defaultViewport as initViewport, defaultNodeOrigin } from './init-values';
+import { fixedForwardRef } from '../../utils/general';
 
 const wrapperStyle: CSSProperties = {
   width: '100%',
@@ -286,4 +287,4 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
   );
 }
 
-export default forwardRef(ReactFlow);
+export default fixedForwardRef(ReactFlow);

packages/react/src/hooks/useReactFlow.ts

@@ -1,5 +1,12 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
-import { getElementsToRemove, getOverlappingArea, isRectObject, nodeToRect, type Rect } from '@xyflow/system';
+import {
+  getElementsToRemove,
+  getOverlappingArea,
+  isRectObject,
+  nodeHasDimensions,
+  nodeToRect,
+  type Rect,
+} from '@xyflow/system';
 
 import useViewportHelper from './useViewportHelper';
 import { useStoreApi } from './useStore';
@@ -216,32 +223,26 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
     []
   );
 
-  const getNodeRect = useCallback(
+  const getNodeRect = useCallback((nodeOrRect: NodeType | { id: NodeType['id'] }): Rect | null => {
-    (nodeOrRect: NodeType | { id: Node['id'] } | Rect): [Rect | null, NodeType | null | undefined, boolean] => {
+    const node =
-      const isRect = isRectObject(nodeOrRect);
+      isNode(nodeOrRect) && nodeHasDimensions(nodeOrRect)
-      const node = isRect ? null : (store.getState().nodeLookup.get(nodeOrRect.id) as NodeType);
+        ? nodeOrRect
+        : (store.getState().nodeLookup.get(nodeOrRect.id) as NodeType);
 
-      if (!isRect && !node) {
+    return node ? nodeToRect(node) : null;
-        return [null, null, isRect];
+  }, []);
-      }
-
-      const nodeRect = isRect ? nodeOrRect : nodeToRect(node!);
-
-      return [nodeRect, node, isRect];
-    },
-    []
-  );
 
   const getIntersectingNodes = useCallback<Instance.GetIntersectingNodes<NodeType>>(
     (nodeOrRect, partially = true, nodes) => {
-      const [nodeRect, node, isRect] = getNodeRect(nodeOrRect);
+      const isRect = isRectObject(nodeOrRect);
+      const nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);
 
       if (!nodeRect) {
         return [];
       }
 
       return (nodes || store.getState().nodes).filter((n) => {
-        if (!isRect && (n.id === node!.id || !n.computed?.positionAbsolute)) {
+        if (!isRect && (n.id === nodeOrRect!.id || !n.computed?.positionAbsolute)) {
           return false;
         }
 
@@ -257,7 +258,8 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
 
   const isNodeIntersecting = useCallback<Instance.IsNodeIntersecting<NodeType>>(
     (nodeOrRect, area, partially = true) => {
-      const [nodeRect] = getNodeRect(nodeOrRect);
+      const isRect = isRectObject(nodeOrRect);
+      const nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);
 
       if (!nodeRect) {
         return false;

packages/react/src/types/general.ts

@@ -16,14 +16,6 @@ import {
 
 import type { NodeChange, EdgeChange, Node, Edge, ReactFlowInstance, EdgeProps, NodeProps } from '.';
 
-// this is needed, to use generics + forwardRef
-declare module 'react' {
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  function forwardRef<T, P = {}>(
-    render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
-  ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
-}
-
 export type OnNodesChange<NodeType extends Node = Node> = (changes: NodeChange<NodeType>[]) => void;
 export type OnEdgesChange<EdgeType extends Edge = Edge> = (changes: EdgeChange<EdgeType>[]) => void;
 

packages/react/src/utils/general.ts

@@ -1,3 +1,4 @@
+import { ReactNode, Ref, RefAttributes, forwardRef } from 'react';
 import { isNodeBase, isEdgeBase } from '@xyflow/system';
 
 import type { Edge, Node } from '../types';
@@ -21,3 +22,11 @@ export const isNode = <NodeType extends Node = Node>(element: unknown): element
  */
 export const isEdge = <EdgeType extends Edge = Edge>(element: unknown): element is EdgeType =>
   isEdgeBase<EdgeType>(element);
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function fixedForwardRef<T, P = {}>(
+  render: (props: P, ref: Ref<T>) => ReactNode
+): (props: P & RefAttributes<T>) => ReactNode {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return forwardRef(render) as any;
+}

packages/svelte/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @xyflow/svelte
 
+## 0.0.39
+
+## ⚠️ Breaking changes
+
+- `on:nodedragstart`, `on:nodedrag` and `on:nodedragstop` are also getting fired if a selection bix is being dragged. We renamed the `node` param to `targetNode` and set it to `null` if a selection is being dragged.
+
+## Patch changes
+
+- export `EdgeLabel` component
+- add "connectionindicator" class for `Handle` component
+- address a11y warnings
+
 ## 0.0.38
 
 ## ⚠️ Breaking changes

packages/svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/svelte",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.",
   "keywords": [
     "svelte",
@@ -43,33 +43,34 @@
   "dependencies": {
     "@svelte-put/shortcut": "^3.1.0",
     "@xyflow/system": "workspace:*",
-    "classcat": "^5.0.4"
+    "classcat": "^5.0.4",
+    "svelte-preprocess": "^5.1.3"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.1.1",
-    "@sveltejs/kit": "^2.5.2",
+    "@sveltejs/kit": "^2.5.4",
-    "@sveltejs/package": "^2.2.7",
+    "@sveltejs/package": "^2.3.0",
-    "@typescript-eslint/eslint-plugin": "^5.60.0",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^5.60.0",
+    "@typescript-eslint/parser": "^7.2.0",
-    "autoprefixer": "^10.4.15",
+    "autoprefixer": "^10.4.18",
-    "cssnano": "^6.0.1",
+    "cssnano": "^6.1.0",
-    "dotenv": "^16.3.1",
+    "dotenv": "^16.4.5",
-    "eslint": "^8.43.0",
+    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.31.1",
+    "eslint-plugin-svelte": "^2.35.1",
-    "postcss": "^8.4.21",
+    "postcss": "^8.4.35",
-    "postcss-cli": "^10.1.0",
+    "postcss-cli": "^11.0.0",
     "postcss-combine-duplicated-selectors": "^10.0.3",
-    "postcss-import": "^15.1.0",
+    "postcss-import": "^16.0.1",
-    "postcss-nested": "^6.0.0",
+    "postcss-nested": "^6.0.1",
     "postcss-rename": "^0.6.1",
-    "prettier": "^2.8.8",
+    "prettier": "^3.2.5",
-    "prettier-plugin-svelte": "^2.10.1",
+    "prettier-plugin-svelte": "^3.2.2",
     "svelte": "^4.2.12",
-    "svelte-check": "^3.6.6",
+    "svelte-check": "^3.6.7",
-    "svelte-eslint-parser": "^0.32.2",
+    "svelte-eslint-parser": "^0.33.1",
-    "tslib": "^2.5.3",
+    "tslib": "^2.6.2",
-    "typescript": "5.1.3"
+    "typescript": "5.4.2"
   },
   "peerDependencies": {
     "svelte": "^3.0.0 || ^4.0.0"

packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte

@@ -20,6 +20,8 @@
     style:transform="translate(-50%, -50%) translate({x}px,{y}px)"
     style={'pointer-events: all;' + style}
     role="button"
+    tabindex="-1"
+    on:keyup={() => {}}
     on:click={() => {
       if (id) handleEdgeSelect(id);
     }}

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

@@ -8,7 +8,8 @@
     isMouseEvent,
     type HandleConnection,
     areConnectionMapsEqual,
-    handleConnectionChange
+    handleConnectionChange,
+    ConnectionMode
   } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
@@ -23,6 +24,7 @@
   export let isConnectable: $$Props['isConnectable'] = undefined;
   export let onconnect: $$Props['onconnect'] = undefined;
   export let ondisconnect: $$Props['ondisconnect'] = undefined;
+  // @todo implement connectablestart, connectableend
   // export let isConnectableStart: $$Props['isConnectableStart'] = undefined;
   // export let isConnectableEnd: $$Props['isConnectableEnd'] = undefined;
 
@@ -32,7 +34,7 @@
   const isTarget = type === 'target';
   const nodeId = getContext<string>('svelteflow__node_id');
   const connectable = getContext<Writable<boolean>>('svelteflow__node_connectable');
-  $: handleConnectable = isConnectable !== undefined ? isConnectable : $connectable;
+  $: isConnectable = isConnectable !== undefined ? isConnectable : $connectable;
 
   const handleId = id || null;
 
@@ -99,7 +101,8 @@
         onConnectEnd: (event) => {
           $onConnectEndAction?.(event);
         },
-        getTransform: () => [$viewport.x, $viewport.y, $viewport.zoom]
+        getTransform: () => [$viewport.x, $viewport.y, $viewport.zoom],
+        getConnectionStartHandle: () => $connection.startHandle
       });
     }
   }
@@ -124,6 +127,7 @@
     prevConnections = connections ?? new Map();
   }
 
+  $: connectionInProcess = !!$connection.startHandle;
   $: connectingFrom =
     $connection.startHandle?.nodeId === nodeId &&
     $connection.startHandle?.type === type &&
@@ -132,9 +136,12 @@
     $connection.endHandle?.nodeId === nodeId &&
     $connection.endHandle?.type === type &&
     $connection.endHandle?.handleId === handleId;
+  $: isPossibleEndHandle =
+    $connectionMode === ConnectionMode.Strict
+      ? $connection.startHandle?.type !== type
+      : nodeId !== $connection.startHandle?.nodeId ||
+        handleId !== $connection.startHandle?.handleId;
   $: valid = connectingTo && $connection.status === 'valid';
-
-  // @todo implement connectablestart, connectableend
 </script>
 
 <!--
@@ -152,19 +159,17 @@ The Handle component is the part of a node that can be used to connect nodes.
     'nodrag',
     'nopan',
     position,
-    {
-      valid,
-      connectingto: connectingTo,
-      connectingfrom: connectingFrom
-    },
     className
   ])}
+  class:valid
+  class:connectingto={connectingTo}
+  class:connectingfrom={connectingFrom}
   class:source={!isTarget}
   class:target={isTarget}
-  class:connectablestart={handleConnectable}
+  class:connectablestart={isConnectable}
-  class:connectableend={handleConnectable}
+  class:connectableend={isConnectable}
-  class:connectable={handleConnectable}
+  class:connectable={isConnectable}
-  class:connectionindicator={handleConnectable}
+  class:connectionindicator={isConnectable && (!connectionInProcess || isPossibleEndHandle)}
   on:mousedown={onPointerDown}
   on:touchstart={onPointerDown}
   {style}

packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte

@@ -6,6 +6,7 @@
   import { Selection } from '$lib/components/Selection';
   import drag from '$lib/actions/drag';
   import type { Node } from '$lib/types';
+  import { createNodeEventDispatcher } from '$lib';
 
   const store = useStore();
   const { selectionRectMode, nodes } = store;
@@ -14,6 +15,7 @@
     selectioncontextmenu: { nodes: Node[]; event: MouseEvent | TouchEvent };
     selectionclick: { nodes: Node[]; event: MouseEvent | TouchEvent };
   }>();
+  const dispatchNodeEvent = createNodeEventDispatcher();
 
   $: selectedNodes = $nodes.filter((n) => n.selected);
   $: bounds = getNodesBounds(selectedNodes);
@@ -31,9 +33,24 @@
   <div
     class="selection-wrapper nopan"
     style="width: {bounds.width}px; height: {bounds.height}px; transform: translate({bounds.x}px, {bounds.y}px)"
-    use:drag={{ disabled: false, store }}
+    use:drag={{
+      disabled: false,
+      store,
+      onDrag: (event, _, __, nodes) => {
+        dispatchNodeEvent('nodedrag', { event, targetNode: null, nodes });
+      },
+      onDragStart: (event, _, __, nodes) => {
+        dispatchNodeEvent('nodedragstart', { event, targetNode: null, nodes });
+      },
+      onDragStop: (event, _, __, nodes) => {
+        dispatchNodeEvent('nodedragstop', { event, targetNode: null, nodes });
+      }
+    }}
     on:contextmenu={onContextMenu}
     on:click={onClick}
+    role="button"
+    tabindex="-1"
+    on:keyup={() => {}}
   >
     <Selection width="100%" height="100%" x={0} y={0} />
   </div>

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -12,6 +12,7 @@
   import type { NodeWrapperProps } from './types';
   import type { Node } from '$lib/types';
   import { getNodeInlineStyleDimensions } from './utils';
+  import { createNodeEventDispatcher } from '$lib';
 
   interface $$Props extends NodeWrapperProps {}
 
@@ -66,16 +67,7 @@
   }
 
   const nodeComponent = $nodeTypes[nodeType] || DefaultNode;
-  const dispatch = createEventDispatcher<{
+  const dispatchNodeEvent = createNodeEventDispatcher();
-    nodeclick: { node: Node; event: MouseEvent | TouchEvent };
-    nodecontextmenu: { node: Node; event: MouseEvent | TouchEvent };
-    nodedrag: { node: Node; nodes: Node[]; event: MouseEvent | TouchEvent };
-    nodedragstart: { node: Node; nodes: Node[]; event: MouseEvent | TouchEvent };
-    nodedragstop: { node: Node; nodes: Node[]; event: MouseEvent | TouchEvent };
-    nodemouseenter: { node: Node; event: MouseEvent | TouchEvent };
-    nodemouseleave: { node: Node; event: MouseEvent | TouchEvent };
-    nodemousemove: { node: Node; event: MouseEvent | TouchEvent };
-  }>();
   const connectableStore = writable(connectable);
   let prevType: string | undefined = undefined;
   let prevSourcePosition: Position | undefined = undefined;
@@ -151,7 +143,7 @@
       handleNodeSelection(id);
     }
 
-    dispatch('nodeclick', { node, event });
+    dispatchNodeEvent('nodeclick', { node, event });
   }
 </script>
 
@@ -166,14 +158,14 @@
       handleSelector: dragHandle,
       noDragClass: 'nodrag',
       onNodeMouseDown: handleNodeSelection,
-      onDrag: (event, _, node, nodes) => {
+      onDrag: (event, _, targetNode, nodes) => {
-        dispatch('nodedrag', { event, node, nodes });
+        dispatchNodeEvent('nodedrag', { event, targetNode, nodes });
       },
-      onDragStart: (event, _, node, nodes) => {
+      onDragStart: (event, _, targetNode, nodes) => {
-        dispatch('nodedragstart', { event, node, nodes });
+        dispatchNodeEvent('nodedragstart', { event, targetNode, nodes });
       },
-      onDragStop: (event, _, node, nodes) => {
+      onDragStop: (event, _, targetNode, nodes) => {
-        dispatch('nodedragstop', { event, node, nodes });
+        dispatchNodeEvent('nodedragstop', { event, targetNode, nodes });
       },
       store
     }}
@@ -192,10 +184,10 @@
     style:visibility={initialized ? 'visible' : 'hidden'}
     style="{style ?? ''};{inlineStyleDimensions.width}{inlineStyleDimensions.height}"
     on:click={onSelectNodeHandler}
-    on:mouseenter={(event) => dispatch('nodemouseenter', { node, event })}
+    on:mouseenter={(event) => dispatchNodeEvent('nodemouseenter', { node, event })}
-    on:mouseleave={(event) => dispatch('nodemouseleave', { node, event })}
+    on:mouseleave={(event) => dispatchNodeEvent('nodemouseleave', { node, event })}
-    on:mousemove={(event) => dispatch('nodemousemove', { node, event })}
+    on:mousemove={(event) => dispatchNodeEvent('nodemousemove', { node, event })}
-    on:contextmenu={(event) => dispatch('nodecontextmenu', { node, event })}
+    on:contextmenu={(event) => dispatchNodeEvent('nodecontextmenu', { node, event })}
   >
     <svelte:component
       this={nodeComponent}

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -242,7 +242,13 @@
           on:nodedragstop
           on:nodecontextmenu
         />
-        <NodeSelection on:selectionclick on:selectioncontextmenu />
+        <NodeSelection
+          on:selectionclick
+          on:selectioncontextmenu
+          on:nodedragstart
+          on:nodedrag
+          on:nodedragstop
+        />
       </ViewportComponent>
       <UserSelection />
     </Pane>

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

@@ -13,7 +13,8 @@ import {
   type Rect,
   getViewportForBounds,
   getElementsToRemove,
-  rendererPointToPoint
+  rendererPointToPoint,
+  nodeHasDimensions
 } from '@xyflow/system';
 
 import { useStore } from '$lib/store';
@@ -242,19 +243,12 @@ export function useSvelteFlow(): {
     edgeLookup
   } = useStore();
 
-  const getNodeRect = (
+  const getNodeRect = (nodeOrRect: Node | { id: Node['id'] }): Rect | null => {
-    nodeOrRect: Node | { id: Node['id'] } | Rect
+    const node =
-  ): [Rect | null, Node | null | undefined, boolean] => {
+      isNode(nodeOrRect) && nodeHasDimensions(nodeOrRect)
-    const isRect = isRectObject(nodeOrRect);
+        ? nodeOrRect
-    const node = isRect ? null : get(nodes).find((n) => n.id === nodeOrRect.id);
+        : get(nodeLookup).get(nodeOrRect.id);
-
+    return node ? nodeToRect(node) : null;
-    if (!isRect && !node) {
-      return [null, null, isRect];
-    }
-
-    const nodeRect = isRect ? nodeOrRect : nodeToRect(node!);
-
-    return [nodeRect, node, isRect];
   };
 
   const updateNode = (
@@ -329,14 +323,15 @@ export function useSvelteFlow(): {
       partially = true,
       nodesToIntersect?: Node[]
     ) => {
-      const [nodeRect, node, isRect] = getNodeRect(nodeOrRect);
+      const isRect = isRectObject(nodeOrRect);
+      const nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);
 
       if (!nodeRect) {
         return [];
       }
 
       return (nodesToIntersect || get(nodes)).filter((n) => {
-        if (!isRect && (n.id === node!.id || !n.computed?.positionAbsolute)) {
+        if (!isRect && (n.id === nodeOrRect.id || !n.computed?.positionAbsolute)) {
           return false;
         }
 
@@ -352,7 +347,8 @@ export function useSvelteFlow(): {
       area: Rect,
       partially = true
     ) => {
-      const [nodeRect] = getNodeRect(nodeOrRect);
+      const isRect = isRectObject(nodeOrRect);
+      const nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);
 
       if (!nodeRect) {
         return false;

packages/svelte/src/lib/index.ts

@@ -10,6 +10,7 @@ export * from '$lib/components/ViewportPortal';
 export * from '$lib/components/BaseEdge';
 export { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '$lib/components/edges';
 export * from '$lib/components/Handle';
+export * from '$lib/components/EdgeLabel';
 
 // plugins
 export * from '$lib/plugins/Controls';

packages/svelte/src/lib/utils/index.ts

@@ -1,3 +1,4 @@
+import { createEventDispatcher } from 'svelte';
 import { isNodeBase, isEdgeBase } from '@xyflow/system';
 
 import type { Edge, Node } from '$lib/types';
@@ -21,3 +22,15 @@ export const isNode = <NodeType extends Node = Node>(element: unknown): element
  */
 export const isEdge = <EdgeType extends Edge = Edge>(element: unknown): element is EdgeType =>
   isEdgeBase<EdgeType>(element);
+
+export const createNodeEventDispatcher = () =>
+  createEventDispatcher<{
+    nodeclick: { node: Node; event: MouseEvent | TouchEvent };
+    nodecontextmenu: { node: Node; event: MouseEvent | TouchEvent };
+    nodedrag: { targetNode: Node | null; nodes: Node[]; event: MouseEvent | TouchEvent };
+    nodedragstart: { targetNode: Node | null; nodes: Node[]; event: MouseEvent | TouchEvent };
+    nodedragstop: { targetNode: Node | null; nodes: Node[]; event: MouseEvent | TouchEvent };
+    nodemouseenter: { node: Node; event: MouseEvent | TouchEvent };
+    nodemouseleave: { node: Node; event: MouseEvent | TouchEvent };
+    nodemousemove: { node: Node; event: MouseEvent | TouchEvent };
+  }>();

packages/svelte/svelte.config.js

@@ -1,7 +1,9 @@
 import adapter from '@sveltejs/adapter-auto';
+import preprocess from 'svelte-preprocess';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
+  preprocess: preprocess(),
   kit: {
     adapter: adapter()
   }

packages/system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyflow/system",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "xyflow core system that powers React Flow and Svelte Flow.",
   "keywords": [
     "node-based UI",

packages/system/src/utils/graph.ts

@@ -45,7 +45,7 @@ export const isEdgeBase = <EdgeType extends EdgeBase = EdgeBase>(element: any):
  * @returns A boolean indicating whether the element is an Node
  */
 export const isNodeBase = <NodeType extends NodeBase = NodeBase>(element: any): element is NodeType =>
-  'id' in element && !('source' in element) && !('target' in element);
+  'id' in element && 'position' in element && !('source' in element) && !('target' in element);
 
 /**
  * Pass in a node, and get connected nodes where edge.source === node.id

packages/system/src/utils/shallow-node-data.ts

@@ -2,7 +2,11 @@ import { NodeBase } from '../types';
 
 type NodeData = Pick<NodeBase, 'id' | 'type' | 'data'>;
 
-export function shallowNodeData(a: NodeData | NodeData[], b: NodeData | NodeData[]) {
+export function shallowNodeData(a: NodeData | NodeData[] | null, b: NodeData | NodeData[] | null) {
+  if (a === null || b === null) {
+    return false;
+  }
+
   const _a = Array.isArray(a) ? a : [a];
   const _b = Array.isArray(b) ? b : [b];
 

packages/system/src/xyhandle/XYHandle.ts

@@ -38,6 +38,7 @@ export type OnPointerDownParams = {
   isValidConnection?: IsValidConnection;
   onEdgeUpdateEnd?: (evt: MouseEvent | TouchEvent) => void;
   getTransform: () => Transform;
+  getConnectionStartHandle: () => ConnectingHandle | null;
 };
 
 export type IsValidParams = {
@@ -91,6 +92,7 @@ function onPointerDown(
     onEdgeUpdateEnd,
     updateConnection,
     getTransform,
+    getConnectionStartHandle,
   }: OnPointerDownParams
 ) {
   // when xyflow is used inside a shadow root we can't use document
@@ -149,6 +151,10 @@ function onPointerDown(
   onConnectStart?.(event, { nodeId, handleId, handleType });
 
   function onPointerMove(event: MouseEvent | TouchEvent) {
+    if (!getConnectionStartHandle()) {
+      onPointerUp(event);
+    }
+
     const transform = getTransform();
     connectionPosition = getEventPosition(event, containerBounds);
     closestHandle = getClosestHandle(

tooling/rollup-config/package.json

@@ -14,6 +14,6 @@
     "@rollup/plugin-typescript": "11.0.0",
     "rollup": "^3.23.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "typescript": "^4.9.4"
+    "typescript": "^5.1.3"
   }
 }