Merge branch 'main' into feat/zindexmode

packages/system/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @xyflow/system
 
+## 0.0.73
+
+### Patch Changes
+
+- [#5578](https://github.com/xyflow/xyflow/pull/5578) [`00bcb9f5f`](https://github.com/xyflow/xyflow/commit/00bcb9f5f45f49814b9ac19b3f55cfe069ee3773) Thanks [@peterkogo](https://github.com/peterkogo)! - Pass current pointer position to connection
+
 ## 0.0.72
 
 ### Patch Changes

packages/system/package.json

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

packages/system/src/utils/edges/general.ts

@@ -101,7 +101,19 @@ export function isEdgeVisible({ sourceNode, targetNode, width, height, transform
   return getOverlappingArea(viewRect, boxToRect(edgeBox)) > 0;
 }
 
-const getEdgeId = ({ source, sourceHandle, target, targetHandle }: Connection | EdgeBase): string =>
+/**
+ * Type for a custom edge ID generator function.
+ * @public
+ */
+export type GetEdgeId = (params: Connection | EdgeBase) => string;
+
+/**
+ * The default edge ID generator function. Generates an ID based on the source, target, and handles.
+ * @public
+ * @param params - The connection or edge to generate an ID for.
+ * @returns The generated edge ID.
+ */
+export const getEdgeId = ({ source, sourceHandle, target, targetHandle }: Connection | EdgeBase): string =>
   `xy-edge__${source}${sourceHandle || ''}-${target}${targetHandle || ''}`;
 
 const connectionExists = (edge: EdgeBase, edges: EdgeBase[]) => {
@@ -114,11 +126,19 @@ const connectionExists = (edge: EdgeBase, edges: EdgeBase[]) => {
   );
 };
 
+export type AddEdgeOptions = {
+  /**
+   * Custom function to generate edge IDs. If not provided, the default `getEdgeId` function is used.
+   */
+  getEdgeId?: GetEdgeId;
+};
+
 /**
  * This util is a convenience function to add a new Edge to an array of edges. It also performs some validation to make sure you don't add an invalid edge or duplicate an existing one.
  * @public
  * @param edgeParams - Either an `Edge` or a `Connection` you want to add.
  * @param edges - The array of all current edges.
+ * @param options - Optional configuration object.
  * @returns A new array of edges with the new edge added.
  *
  * @remarks If an edge with the same `target` and `source` already exists (and the same
@@ -128,7 +148,8 @@ const connectionExists = (edge: EdgeBase, edges: EdgeBase[]) => {
  */
 export const addEdge = <EdgeType extends EdgeBase>(
   edgeParams: EdgeType | Connection,
-  edges: EdgeType[]
+  edges: EdgeType[],
+  options: AddEdgeOptions = {}
 ): EdgeType[] => {
   if (!edgeParams.source || !edgeParams.target) {
     devWarn('006', errorMessages['error006']());
@@ -136,13 +157,15 @@ export const addEdge = <EdgeType extends EdgeBase>(
     return edges;
   }
 
+  const edgeIdGenerator = options.getEdgeId || getEdgeId;
+
   let edge: EdgeType;
   if (isEdgeBase(edgeParams)) {
     edge = { ...edgeParams };
   } else {
     edge = {
       ...edgeParams,
-      id: getEdgeId(edgeParams),
+      id: edgeIdGenerator(edgeParams),
     } as EdgeType;
   }
 
@@ -167,6 +190,10 @@ export type ReconnectEdgeOptions = {
    * @default true
    */
   shouldReplaceId?: boolean;
+  /**
+   * Custom function to generate edge IDs. If not provided, the default `getEdgeId` function is used.
+   */
+  getEdgeId?: GetEdgeId;
 };
 
 /**
@@ -207,10 +234,12 @@ export const reconnectEdge = <EdgeType extends EdgeBase>(
     return edges;
   }
 
+  const edgeIdGenerator = options.getEdgeId || getEdgeId;
+
   // Remove old edge and create the new edge with parameters of old edge.
   const edge = {
     ...rest,
-    id: options.shouldReplaceId ? getEdgeId(newConnection) : oldEdgeId,
+    id: options.shouldReplaceId ? edgeIdGenerator(newConnection) : oldEdgeId,
     source: newConnection.source,
     target: newConnection.target,
     sourceHandle: newConnection.sourceHandle,

packages/system/src/xyhandle/XYHandle.ts

@@ -93,8 +93,8 @@ function onPointerDown(
     position: fromHandleInternal.position,
   };
 
-  const fromNodeInternal = nodeLookup.get(nodeId)!;
-  const from = getHandlePosition(fromNodeInternal, fromHandle, Position.Left, true);
+  const fromInternalNode = nodeLookup.get(nodeId)!;
+  const from = getHandlePosition(fromInternalNode, fromHandle, Position.Left, true);
 
   let previousConnection: ConnectionInProgress = {
     inProgress: true,
@@ -103,7 +103,7 @@ function onPointerDown(
     from,
     fromHandle,
     fromPosition: fromHandle.position,
-    fromNode: fromNodeInternal,
+    fromNode: fromInternalNode,
 
     to: position,
     toHandle: null,
@@ -172,9 +172,14 @@ function onPointerDown(
     connection = result.connection;
     isValid = isConnectionValid(!!closestHandle, result.isValid);
 
+    const fromInternalNode = nodeLookup.get(nodeId);
+    const from = fromInternalNode
+      ? getHandlePosition(fromInternalNode, fromHandle, Position.Left, true)
+      : previousConnection.from;
+
     const newConnection: ConnectionInProgress = {
-      // from stays the same
       ...previousConnection,
+      from,
       isValid,
       to:
         result.toHandle && isValid