@uipath/apollo-react 4.15.1 → 4.16.0

package/dist/canvas/utils/NodeUtils.cjs

@@ -29,10 +29,12 @@ __webpack_require__.d(__webpack_exports__, {
     resolveCollisions: ()=>resolveCollisions,
     resolveHandleContext: ()=>resolveHandleContext,
     getHandleIndex: ()=>getHandleIndex,
+    selectIsConnecting: ()=>selectIsConnecting,
     snapToGrid: ()=>snapToGrid
 });
 const react_cjs_namespaceObject = require("../xyflow/react.cjs");
 const external_constants_cjs_namespaceObject = require("../constants.cjs");
+const selectIsConnecting = (state)=>!!state.connection.inProgress;
 const getAbsolutePosition = (node, nodes)=>{
     let x = node.position.x;
     let y = node.position.y;
@@ -146,6 +148,7 @@ exports.getHandleIndex = __webpack_exports__.getHandleIndex;
 exports.getNonOverlappingPositionForDirection = __webpack_exports__.getNonOverlappingPositionForDirection;
 exports.resolveCollisions = __webpack_exports__.resolveCollisions;
 exports.resolveHandleContext = __webpack_exports__.resolveHandleContext;
+exports.selectIsConnecting = __webpack_exports__.selectIsConnecting;
 exports.snapToGrid = __webpack_exports__.snapToGrid;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "getAbsolutePosition",
@@ -153,6 +156,7 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "getNonOverlappingPositionForDirection",
     "resolveCollisions",
     "resolveHandleContext",
+    "selectIsConnecting",
     "snapToGrid"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {

package/dist/canvas/utils/NodeUtils.d.ts

@@ -1,4 +1,5 @@
-import { type Handle, type InternalNode, type Node, Position, type XYPosition } from '../xyflow/react.ts';
+import { type Handle, type InternalNode, type Node, Position, type ReactFlowState, type XYPosition } from '../xyflow/react.ts';
+export declare const selectIsConnecting: (state: ReactFlowState) => boolean;
 export declare const getAbsolutePosition: (node: Node, nodes: Node[]) => {
     x: number;
     y: number;

package/dist/canvas/utils/NodeUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeUtils.d.ts","sourceRoot":"","sources":["../../../src/canvas/utils/NodeUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,MAAM,EACX,KAAK,YAAY,EACjB,KAAK,IAAI,EACT,QAAQ,EACR,KAAK,UAAU,EAChB,MAAM,0CAA0C,CAAC;AAUlD,eAAO,MAAM,mBAAmB,GAAI,MAAM,IAAI,EAAE,OAAO,IAAI,EAAE,KAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAWrF,CAAC;AAeF,wBAAgB,qCAAqC,CACnD,KAAK,EAAE,IAAI,EAAE,EACb,eAAe,EAAE,UAAU,EAC3B,YAAY,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAC/C,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,EAC9C,MAAM,SAAmB,EACzB,gBAAgB,GAAE,MAAM,EAAO,EAC/B,iBAAiB,GAAE;IAAE,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAAC,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;CAA8B,GACvF,UAAU,CAgCZ;AAED,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,KAAG,MAE1C,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,OAAO,CAAC,EAAE,yBAAyB,KAAK,IAAI,EAAE,CAAC;AA6BhG,eAAO,MAAM,iBAAiB,EAAE,kBAwE/B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAMF,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,MAAM,EAChB,cAAc,EAAE,QAAQ,GACvB,aAAa,GAAG,SAAS,CAgB3B;AAWD,wBAAgB,cAAc,CAC5B,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,MAAM,EAAE,GACnB,MAAM,GAAG,IAAI,CAQf"}
+{"version":3,"file":"NodeUtils.d.ts","sourceRoot":"","sources":["../../../src/canvas/utils/NodeUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,MAAM,EACX,KAAK,YAAY,EACjB,KAAK,IAAI,EACT,QAAQ,EACR,KAAK,cAAc,EACnB,KAAK,UAAU,EAChB,MAAM,0CAA0C,CAAC;AAQlD,eAAO,MAAM,kBAAkB,GAAI,OAAO,cAAc,YAAkC,CAAC;AAS3F,eAAO,MAAM,mBAAmB,GAAI,MAAM,IAAI,EAAE,OAAO,IAAI,EAAE,KAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAWrF,CAAC;AAeF,wBAAgB,qCAAqC,CACnD,KAAK,EAAE,IAAI,EAAE,EACb,eAAe,EAAE,UAAU,EAC3B,YAAY,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAC/C,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,EAC9C,MAAM,SAAmB,EACzB,gBAAgB,GAAE,MAAM,EAAO,EAC/B,iBAAiB,GAAE;IAAE,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAAC,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;CAA8B,GACvF,UAAU,CAgCZ;AAED,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,KAAG,MAE1C,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,OAAO,CAAC,EAAE,yBAAyB,KAAK,IAAI,EAAE,CAAC;AA6BhG,eAAO,MAAM,iBAAiB,EAAE,kBAwE/B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAMF,wBAAgB,oBAAoB,CAClC,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,MAAM,EAChB,cAAc,EAAE,QAAQ,GACvB,aAAa,GAAG,SAAS,CAgB3B;AAWD,wBAAgB,cAAc,CAC5B,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,MAAM,EAAE,GACnB,MAAM,GAAG,IAAI,CAQf"}

package/dist/canvas/utils/NodeUtils.js

@@ -1,5 +1,6 @@
 import { Position } from "../xyflow/react.js";
 import { DEFAULT_NODE_SIZE, GRID_SPACING, PREVIEW_NODE_ID } from "../constants.js";
+const selectIsConnecting = (state)=>!!state.connection.inProgress;
 const getAbsolutePosition = (node, nodes)=>{
     let x = node.position.x;
     let y = node.position.y;
@@ -108,4 +109,4 @@ function getHandleIndex(handleId, position, allHandles) {
     const index = peers.findIndex((h)=>h.id === handleId);
     return -1 === index ? null : index;
 }
-export { getAbsolutePosition, getHandleIndex, getNonOverlappingPositionForDirection, resolveCollisions, resolveHandleContext, snapToGrid };
+export { getAbsolutePosition, getHandleIndex, getNonOverlappingPositionForDirection, resolveCollisions, resolveHandleContext, selectIsConnecting, snapToGrid };

package/dist/canvas/utils/collapse.cjs

@@ -24,13 +24,14 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    COLLAPSED_NODE_SIZE: ()=>COLLAPSED_NODE_SIZE,
+    getExpandedShape: ()=>getExpandedShape,
+    getExpandedSize: ()=>getExpandedSize,
     EXPANDED_RECTANGLE_WIDTH: ()=>EXPANDED_RECTANGLE_WIDTH,
     getCollapsedShape: ()=>getCollapsedShape,
-    getCollapsedSize: ()=>getCollapsedSize,
-    getExpandedShape: ()=>getExpandedShape,
-    getExpandedSize: ()=>getExpandedSize
+    COLLAPSED_NODE_SIZE: ()=>COLLAPSED_NODE_SIZE,
+    getCollapsedSize: ()=>getCollapsedSize
 });
+const external_constants_cjs_namespaceObject = require("../constants.cjs");
 const COLLAPSED_NODE_SIZE = 96;
 const EXPANDED_RECTANGLE_WIDTH = 288;
 const getCollapsedShape = (originalShape)=>'rectangle' === originalShape ? 'square' : originalShape;
@@ -39,10 +40,16 @@ const getCollapsedSize = ()=>({
         width: COLLAPSED_NODE_SIZE,
         height: COLLAPSED_NODE_SIZE
     });
-const getExpandedSize = (shape)=>({
+const getExpandedSize = (shape)=>{
+    if ('container' === shape) return {
+        width: external_constants_cjs_namespaceObject.DEFAULT_CONTAINER_WIDTH,
+        height: external_constants_cjs_namespaceObject.DEFAULT_CONTAINER_HEIGHT
+    };
+    return {
         width: 'rectangle' === shape ? EXPANDED_RECTANGLE_WIDTH : COLLAPSED_NODE_SIZE,
         height: COLLAPSED_NODE_SIZE
-    });
+    };
+};
 exports.COLLAPSED_NODE_SIZE = __webpack_exports__.COLLAPSED_NODE_SIZE;
 exports.EXPANDED_RECTANGLE_WIDTH = __webpack_exports__.EXPANDED_RECTANGLE_WIDTH;
 exports.getCollapsedShape = __webpack_exports__.getCollapsedShape;

package/dist/canvas/utils/collapse.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collapse.d.ts","sourceRoot":"","sources":["../../../src/canvas/utils/collapse.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAK3D,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAKtC,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAM5C,eAAO,MAAM,iBAAiB,GAAI,gBAAgB,SAAS,KAAG,SAAS,GAAG,SAEzE,CAAC;AAOF,eAAO,MAAM,gBAAgB,GAAI,iBAAiB,SAAS,KAAG,SAAS,GAAG,SAEzE,CAAC;AAMF,eAAO,MAAM,gBAAgB,QAAO;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAKlE,CAAC;AAOF,eAAO,MAAM,eAAe,GAAI,QAAQ,SAAS,KAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAKlF,CAAC"}
+{"version":3,"file":"collapse.d.ts","sourceRoot":"","sources":["../../../src/canvas/utils/collapse.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAK3D,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAKtC,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAM5C,eAAO,MAAM,iBAAiB,GAAI,gBAAgB,SAAS,KAAG,SAAS,GAAG,SAEzE,CAAC;AAOF,eAAO,MAAM,gBAAgB,GAAI,iBAAiB,SAAS,KAAG,SAAS,GAAG,SAEzE,CAAC;AAMF,eAAO,MAAM,gBAAgB,QAAO;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAKlE,CAAC;AAOF,eAAO,MAAM,eAAe,GAAI,QAAQ,SAAS,KAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAYlF,CAAC"}

package/dist/canvas/utils/collapse.js

@@ -1,3 +1,4 @@
+import { DEFAULT_CONTAINER_HEIGHT, DEFAULT_CONTAINER_WIDTH } from "../constants.js";
 const COLLAPSED_NODE_SIZE = 96;
 const EXPANDED_RECTANGLE_WIDTH = 288;
 const getCollapsedShape = (originalShape)=>'rectangle' === originalShape ? 'square' : originalShape;
@@ -6,8 +7,14 @@ const getCollapsedSize = ()=>({
         width: COLLAPSED_NODE_SIZE,
         height: COLLAPSED_NODE_SIZE
     });
-const getExpandedSize = (shape)=>({
+const getExpandedSize = (shape)=>{
+    if ('container' === shape) return {
+        width: DEFAULT_CONTAINER_WIDTH,
+        height: DEFAULT_CONTAINER_HEIGHT
+    };
+    return {
         width: 'rectangle' === shape ? EXPANDED_RECTANGLE_WIDTH : COLLAPSED_NODE_SIZE,
         height: COLLAPSED_NODE_SIZE
-    });
+    };
+};
 export { COLLAPSED_NODE_SIZE, EXPANDED_RECTANGLE_WIDTH, getCollapsedShape, getCollapsedSize, getExpandedShape, getExpandedSize };

package/dist/canvas/utils/createPreviewGraph.cjs

@@ -0,0 +1,126 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    createPreviewGraph: ()=>createPreviewGraph,
+    reparentPreviewNodeToContainer: ()=>reparentPreviewNodeToContainer,
+    showPreviewGraph: ()=>showPreviewGraph,
+    applyPreviewGraphToReactFlow: ()=>applyPreviewGraphToReactFlow
+});
+const external_constants_cjs_namespaceObject = require("../constants.cjs");
+const external_createPreviewNode_cjs_namespaceObject = require("./createPreviewNode.cjs");
+const external_NodeUtils_cjs_namespaceObject = require("./NodeUtils.cjs");
+function inferPreviewContainerId(sourceNode, targetNode) {
+    if (!targetNode) return sourceNode.parentId;
+    if (sourceNode.parentId === targetNode.parentId) return sourceNode.parentId;
+    if (targetNode.parentId === sourceNode.id) return sourceNode.id;
+    if (sourceNode.parentId === targetNode.id) return targetNode.id;
+}
+function reparentPreviewNodeToContainer(previewNode, containerId, reactFlowInstance) {
+    const containerNode = reactFlowInstance.getNode(containerId);
+    if (!containerNode) return null;
+    const containerAbsolutePosition = (0, external_NodeUtils_cjs_namespaceObject.getAbsolutePosition)(containerNode, reactFlowInstance.getNodes());
+    return {
+        ...previewNode,
+        position: {
+            x: previewNode.position.x - containerAbsolutePosition.x,
+            y: previewNode.position.y - containerAbsolutePosition.y
+        },
+        parentId: containerId,
+        extent: 'parent'
+    };
+}
+function createPreviewNodeForGraph({ sourceNodeId, sourceHandleId, reactFlowInstance, position, data, sourceHandleType, previewNodeSize, handlePosition, ignoredNodeTypes, positionMode }) {
+    return (0, external_createPreviewNode_cjs_namespaceObject.createPreviewNode)(sourceNodeId, sourceHandleId, reactFlowInstance, position, data, sourceHandleType, previewNodeSize, handlePosition, ignoredNodeTypes, positionMode);
+}
+function createTrailingPreviewEdge({ targetNodeId, targetHandleId, trailingEdgeId, trailingEdgeStyle = external_createPreviewNode_cjs_namespaceObject.PREVIEW_EDGE_STYLE }) {
+    if (!targetNodeId) return null;
+    return {
+        id: trailingEdgeId ?? `${external_constants_cjs_namespaceObject.PREVIEW_NODE_ID}-${targetNodeId}`,
+        source: external_constants_cjs_namespaceObject.PREVIEW_NODE_ID,
+        sourceHandle: external_constants_cjs_namespaceObject.DEFAULT_SOURCE_HANDLE_ID,
+        target: targetNodeId,
+        targetHandle: targetHandleId,
+        type: 'default',
+        style: trailingEdgeStyle
+    };
+}
+function createPreviewGraph(options) {
+    const { reactFlowInstance, targetNodeId, containerId, removedEdgeIds, sourceNodeId } = options;
+    const preview = createPreviewNodeForGraph(options);
+    if (!preview) return null;
+    const sourceNode = reactFlowInstance.getNode(sourceNodeId);
+    if (!sourceNode) return null;
+    const targetNode = targetNodeId ? reactFlowInstance.getNode(targetNodeId) : void 0;
+    const resolvedContainerId = containerId ?? inferPreviewContainerId(sourceNode, targetNode);
+    const finalPreviewNode = resolvedContainerId ? reparentPreviewNodeToContainer(preview.node, resolvedContainerId, reactFlowInstance) : preview.node;
+    if (!finalPreviewNode) return null;
+    const trailingEdge = createTrailingPreviewEdge(options);
+    const edges = trailingEdge ? [
+        preview.edge,
+        trailingEdge
+    ] : [
+        preview.edge
+    ];
+    return {
+        node: finalPreviewNode,
+        edges,
+        removedEdgeIds
+    };
+}
+function showPreviewGraph(options) {
+    const preview = createPreviewGraph(options);
+    if (preview) applyPreviewGraphToReactFlow(preview, options.reactFlowInstance);
+    return preview;
+}
+function applyPreviewGraphToReactFlow(preview, reactFlowInstance) {
+    const removedEdgeIds = new Set(preview.removedEdgeIds ?? []);
+    setTimeout(()=>{
+        reactFlowInstance.setNodes((nodes)=>[
+                ...nodes.filter((node)=>node.id !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID).map((node)=>({
+                        ...node,
+                        selected: false
+                    })),
+                preview.node
+            ]);
+        reactFlowInstance.setEdges((edges)=>[
+                ...edges.filter((edge)=>!(0, external_createPreviewNode_cjs_namespaceObject.isPreviewEdge)(edge) && !removedEdgeIds.has(edge.id)),
+                ...preview.edges
+            ]);
+    }, 0);
+}
+exports.applyPreviewGraphToReactFlow = __webpack_exports__.applyPreviewGraphToReactFlow;
+exports.createPreviewGraph = __webpack_exports__.createPreviewGraph;
+exports.reparentPreviewNodeToContainer = __webpack_exports__.reparentPreviewNodeToContainer;
+exports.showPreviewGraph = __webpack_exports__.showPreviewGraph;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "applyPreviewGraphToReactFlow",
+    "createPreviewGraph",
+    "reparentPreviewNodeToContainer",
+    "showPreviewGraph"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/utils/createPreviewGraph.d.ts

@@ -0,0 +1,36 @@
+import type { Edge, Node, Position, ReactFlowInstance } from '../xyflow/react.ts';
+import { type PreviewNodePositionMode } from './createPreviewNode';
+export interface PreviewGraph {
+    node: Node;
+    edges: Edge[];
+    removedEdgeIds?: string[];
+}
+export interface CreatePreviewGraphOptions {
+    sourceNodeId: string;
+    sourceHandleId: string;
+    reactFlowInstance: ReactFlowInstance;
+    position?: {
+        x: number;
+        y: number;
+    };
+    data?: Record<string, unknown>;
+    sourceHandleType?: 'source' | 'target';
+    previewNodeSize?: {
+        width: number;
+        height: number;
+    };
+    handlePosition?: Position;
+    ignoredNodeTypes?: string[];
+    positionMode?: PreviewNodePositionMode;
+    targetNodeId?: string;
+    targetHandleId?: string | null;
+    containerId?: string;
+    removedEdgeIds?: string[];
+    trailingEdgeId?: string;
+    trailingEdgeStyle?: Edge['style'];
+}
+export declare function reparentPreviewNodeToContainer(previewNode: Node, containerId: string, reactFlowInstance: ReactFlowInstance): Node | null;
+export declare function createPreviewGraph(options: CreatePreviewGraphOptions): PreviewGraph | null;
+export declare function showPreviewGraph(options: CreatePreviewGraphOptions): PreviewGraph | null;
+export declare function applyPreviewGraphToReactFlow(preview: PreviewGraph, reactFlowInstance: ReactFlowInstance): void;
+//# sourceMappingURL=createPreviewGraph.d.ts.map

package/dist/canvas/utils/createPreviewGraph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createPreviewGraph.d.ts","sourceRoot":"","sources":["../../../src/canvas/utils/createPreviewGraph.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,iBAAiB,EAClB,MAAM,0CAA0C,CAAC;AAElD,OAAO,EAIL,KAAK,uBAAuB,EAC7B,MAAM,qBAAqB,CAAC;AAG7B,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,yBAAyB;IACxC,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,QAAQ,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,gBAAgB,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACvC,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,YAAY,CAAC,EAAE,uBAAuB,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;CACnC;AAsBD,wBAAgB,8BAA8B,CAC5C,WAAW,EAAE,IAAI,EACjB,WAAW,EAAE,MAAM,EACnB,iBAAiB,EAAE,iBAAiB,GACnC,IAAI,GAAG,IAAI,CAoBb;AAkDD,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,yBAAyB,GAAG,YAAY,GAAG,IAAI,CAyB1F;AAOD,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,yBAAyB,GAAG,YAAY,GAAG,IAAI,CAMxF;AAOD,wBAAgB,4BAA4B,CAC1C,OAAO,EAAE,YAAY,EACrB,iBAAiB,EAAE,iBAAiB,GACnC,IAAI,CAgBN"}

package/dist/canvas/utils/createPreviewGraph.js

@@ -0,0 +1,83 @@
+import { DEFAULT_SOURCE_HANDLE_ID, PREVIEW_NODE_ID } from "../constants.js";
+import { PREVIEW_EDGE_STYLE, createPreviewNode, isPreviewEdge } from "./createPreviewNode.js";
+import { getAbsolutePosition } from "./NodeUtils.js";
+function inferPreviewContainerId(sourceNode, targetNode) {
+    if (!targetNode) return sourceNode.parentId;
+    if (sourceNode.parentId === targetNode.parentId) return sourceNode.parentId;
+    if (targetNode.parentId === sourceNode.id) return sourceNode.id;
+    if (sourceNode.parentId === targetNode.id) return targetNode.id;
+}
+function reparentPreviewNodeToContainer(previewNode, containerId, reactFlowInstance) {
+    const containerNode = reactFlowInstance.getNode(containerId);
+    if (!containerNode) return null;
+    const containerAbsolutePosition = getAbsolutePosition(containerNode, reactFlowInstance.getNodes());
+    return {
+        ...previewNode,
+        position: {
+            x: previewNode.position.x - containerAbsolutePosition.x,
+            y: previewNode.position.y - containerAbsolutePosition.y
+        },
+        parentId: containerId,
+        extent: 'parent'
+    };
+}
+function createPreviewNodeForGraph({ sourceNodeId, sourceHandleId, reactFlowInstance, position, data, sourceHandleType, previewNodeSize, handlePosition, ignoredNodeTypes, positionMode }) {
+    return createPreviewNode(sourceNodeId, sourceHandleId, reactFlowInstance, position, data, sourceHandleType, previewNodeSize, handlePosition, ignoredNodeTypes, positionMode);
+}
+function createTrailingPreviewEdge({ targetNodeId, targetHandleId, trailingEdgeId, trailingEdgeStyle = PREVIEW_EDGE_STYLE }) {
+    if (!targetNodeId) return null;
+    return {
+        id: trailingEdgeId ?? `${PREVIEW_NODE_ID}-${targetNodeId}`,
+        source: PREVIEW_NODE_ID,
+        sourceHandle: DEFAULT_SOURCE_HANDLE_ID,
+        target: targetNodeId,
+        targetHandle: targetHandleId,
+        type: 'default',
+        style: trailingEdgeStyle
+    };
+}
+function createPreviewGraph(options) {
+    const { reactFlowInstance, targetNodeId, containerId, removedEdgeIds, sourceNodeId } = options;
+    const preview = createPreviewNodeForGraph(options);
+    if (!preview) return null;
+    const sourceNode = reactFlowInstance.getNode(sourceNodeId);
+    if (!sourceNode) return null;
+    const targetNode = targetNodeId ? reactFlowInstance.getNode(targetNodeId) : void 0;
+    const resolvedContainerId = containerId ?? inferPreviewContainerId(sourceNode, targetNode);
+    const finalPreviewNode = resolvedContainerId ? reparentPreviewNodeToContainer(preview.node, resolvedContainerId, reactFlowInstance) : preview.node;
+    if (!finalPreviewNode) return null;
+    const trailingEdge = createTrailingPreviewEdge(options);
+    const edges = trailingEdge ? [
+        preview.edge,
+        trailingEdge
+    ] : [
+        preview.edge
+    ];
+    return {
+        node: finalPreviewNode,
+        edges,
+        removedEdgeIds
+    };
+}
+function showPreviewGraph(options) {
+    const preview = createPreviewGraph(options);
+    if (preview) applyPreviewGraphToReactFlow(preview, options.reactFlowInstance);
+    return preview;
+}
+function applyPreviewGraphToReactFlow(preview, reactFlowInstance) {
+    const removedEdgeIds = new Set(preview.removedEdgeIds ?? []);
+    setTimeout(()=>{
+        reactFlowInstance.setNodes((nodes)=>[
+                ...nodes.filter((node)=>node.id !== PREVIEW_NODE_ID).map((node)=>({
+                        ...node,
+                        selected: false
+                    })),
+                preview.node
+            ]);
+        reactFlowInstance.setEdges((edges)=>[
+                ...edges.filter((edge)=>!isPreviewEdge(edge) && !removedEdgeIds.has(edge.id)),
+                ...preview.edges
+            ]);
+    }, 0);
+}
+export { applyPreviewGraphToReactFlow, createPreviewGraph, reparentPreviewNodeToContainer, showPreviewGraph };

package/dist/canvas/utils/createPreviewNode.cjs

@@ -24,13 +24,25 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    applyPreviewToReactFlow: ()=>applyPreviewToReactFlow,
+    PREVIEW_EDGE_STYLE: ()=>PREVIEW_EDGE_STYLE,
+    isPreviewEdge: ()=>isPreviewEdge,
     removePreviewFromReactFlow: ()=>removePreviewFromReactFlow,
+    applyPreviewToReactFlow: ()=>applyPreviewToReactFlow,
+    getOppositePosition: ()=>getOppositePosition,
     createPreviewNode: ()=>createPreviewNode
 });
 const react_cjs_namespaceObject = require("../xyflow/react.cjs");
 const external_constants_cjs_namespaceObject = require("../constants.cjs");
 const external_NodeUtils_cjs_namespaceObject = require("./NodeUtils.cjs");
+const PREVIEW_EDGE_STYLE = {
+    strokeDasharray: '5,5',
+    opacity: 0.8,
+    stroke: 'var(--canvas-selection-indicator)',
+    strokeWidth: 2
+};
+function isPreviewEdge(edge) {
+    return edge.id === external_constants_cjs_namespaceObject.PREVIEW_EDGE_ID || edge.source === external_constants_cjs_namespaceObject.PREVIEW_NODE_ID || edge.target === external_constants_cjs_namespaceObject.PREVIEW_NODE_ID;
+}
 function getOppositePosition(position) {
     switch(position){
         case react_cjs_namespaceObject.Position.Left:
@@ -74,6 +86,12 @@ function calculatePositionFromDrop(dropPosition, handlePosition, previewNodeSize
             };
     }
 }
+function calculateCenteredPosition(centerPosition, previewNodeSize) {
+    return {
+        x: centerPosition.x - previewNodeSize.width / 2,
+        y: centerPosition.y - previewNodeSize.height / 2
+    };
+}
 function computeSpreadOffset(handle, size) {
     const index = handle?.index ?? null;
     const count = handle?.count ?? 1;
@@ -139,7 +157,7 @@ function calculateAutoPosition(sourceNode, handlePosition, previewNodeSize, exis
 function createPreviewNode(sourceNodeId, sourceHandleId, reactFlowInstance, position, data, sourceHandleType = 'source', previewNodeSize = {
     width: external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE,
     height: external_constants_cjs_namespaceObject.DEFAULT_NODE_SIZE
-}, handlePosition = react_cjs_namespaceObject.Position.Right, ignoredNodeTypes = []) {
+}, handlePosition = react_cjs_namespaceObject.Position.Right, ignoredNodeTypes = [], positionMode = 'drop') {
     const sourceNode = reactFlowInstance.getNode(sourceNodeId);
     if (!sourceNode) {
         console.warn(`Source node ${sourceNodeId} not found`);
@@ -149,7 +167,7 @@ function createPreviewNode(sourceNodeId, sourceHandleId, reactFlowInstance, posi
     const existingNodes = reactFlowInstance.getNodes().filter((n)=>n.id !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID);
     const internalNode = void 0 === position ? reactFlowInstance.getInternalNode(sourceNodeId) : void 0;
     const handle = internalNode ? (0, external_NodeUtils_cjs_namespaceObject.resolveHandleContext)(internalNode, sourceHandleId, handlePosition) : void 0;
-    const nodePosition = position ? calculatePositionFromDrop(position, handlePosition, previewNodeSize) : calculateAutoPosition(sourceNode, handlePosition, previewNodeSize, existingNodes, void 0, ignoredNodeTypes, handle);
+    const nodePosition = position ? 'center' === positionMode ? calculateCenteredPosition(position, previewNodeSize) : calculatePositionFromDrop(position, handlePosition, previewNodeSize) : calculateAutoPosition(sourceNode, handlePosition, previewNodeSize, existingNodes, void 0, ignoredNodeTypes, handle);
     const handleFacingSource = getOppositePosition(handlePosition);
     const finalData = {
         ...data ?? {}
@@ -179,12 +197,7 @@ function createPreviewNode(sourceNodeId, sourceHandleId, reactFlowInstance, posi
         id: external_constants_cjs_namespaceObject.PREVIEW_EDGE_ID,
         ...previewSourceAndTargetData,
         type: 'default',
-        style: {
-            strokeDasharray: '5,5',
-            opacity: 0.8,
-            stroke: 'var(--canvas-selection-indicator)',
-            strokeWidth: 2
-        }
+        style: PREVIEW_EDGE_STYLE
     };
     return {
         node: previewNode,
@@ -201,21 +214,27 @@ function applyPreviewToReactFlow(preview, reactFlowInstance) {
                 preview.node
             ]);
         reactFlowInstance.setEdges((edges)=>[
-                ...edges.filter((e)=>e.id !== external_constants_cjs_namespaceObject.PREVIEW_EDGE_ID),
+                ...edges.filter((edge)=>!isPreviewEdge(edge)),
                 preview.edge
             ]);
     }, 0);
 }
 function removePreviewFromReactFlow(reactFlowInstance) {
     reactFlowInstance.setNodes((nodes)=>nodes.filter((n)=>n.id !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID));
-    reactFlowInstance.setEdges((edges)=>edges.filter((e)=>e.id !== external_constants_cjs_namespaceObject.PREVIEW_EDGE_ID));
+    reactFlowInstance.setEdges((edges)=>edges.filter((edge)=>!isPreviewEdge(edge)));
 }
+exports.PREVIEW_EDGE_STYLE = __webpack_exports__.PREVIEW_EDGE_STYLE;
 exports.applyPreviewToReactFlow = __webpack_exports__.applyPreviewToReactFlow;
 exports.createPreviewNode = __webpack_exports__.createPreviewNode;
+exports.getOppositePosition = __webpack_exports__.getOppositePosition;
+exports.isPreviewEdge = __webpack_exports__.isPreviewEdge;
 exports.removePreviewFromReactFlow = __webpack_exports__.removePreviewFromReactFlow;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "PREVIEW_EDGE_STYLE",
     "applyPreviewToReactFlow",
     "createPreviewNode",
+    "getOppositePosition",
+    "isPreviewEdge",
     "removePreviewFromReactFlow"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {

package/dist/canvas/utils/createPreviewNode.d.ts

@@ -1,11 +1,19 @@
 import { type Edge, type Node, Position, type ReactFlowInstance } from '../xyflow/react.ts';
+export type PreviewNodePositionMode = 'drop' | 'center';
+export declare const PREVIEW_EDGE_STYLE: Edge['style'];
+export declare function isPreviewEdge(edge: {
+    id?: string;
+    source?: string;
+    target?: string;
+}): boolean;
+export declare function getOppositePosition(position: Position): Position;
 export declare function createPreviewNode(sourceNodeId: string, sourceHandleId: string, reactFlowInstance: ReactFlowInstance, position?: {
     x: number;
     y: number;
-}, data?: Record<string, any>, sourceHandleType?: 'source' | 'target', previewNodeSize?: {
+}, data?: Record<string, unknown>, sourceHandleType?: 'source' | 'target', previewNodeSize?: {
     width: number;
     height: number;
-}, handlePosition?: Position, ignoredNodeTypes?: string[]): {
+}, handlePosition?: Position, ignoredNodeTypes?: string[], positionMode?: PreviewNodePositionMode): {
     node: Node;
     edge: Edge;
 } | null;

package/dist/canvas/utils/createPreviewNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createPreviewNode.d.ts","sourceRoot":"","sources":["../../../src/canvas/utils/createPreviewNode.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,IAAI,EACT,KAAK,IAAI,EACT,QAAQ,EACR,KAAK,iBAAiB,EACvB,MAAM,0CAA0C,CAAC;AAiMlD,wBAAgB,iBAAiB,CAC/B,YAAY,EAAE,MAAM,EACpB,cAAc,EAAE,MAAM,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,QAAQ,CAAC,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EACnC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1B,gBAAgB,GAAE,QAAQ,GAAG,QAAmB,EAChD,eAAe,GAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAG/C,EACD,cAAc,GAAE,QAAyB,EACzC,gBAAgB,GAAE,MAAM,EAAO,GAC9B;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,GAAG,IAAI,CA2FnC;AAMD,wBAAgB,uBAAuB,CACrC,OAAO,EAAE;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,EACnC,iBAAiB,EAAE,iBAAiB,GACnC,IAAI,CAcN;AAKD,wBAAgB,0BAA0B,CAAC,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAGrF"}
+{"version":3,"file":"createPreviewNode.d.ts","sourceRoot":"","sources":["../../../src/canvas/utils/createPreviewNode.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,IAAI,EACT,KAAK,IAAI,EACT,QAAQ,EACR,KAAK,iBAAiB,EACvB,MAAM,0CAA0C,CAAC;AASlD,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,QAAQ,CAAC;AAExD,eAAO,MAAM,kBAAkB,EAAE,IAAI,CAAC,OAAO,CAK5C,CAAC;AAEF,wBAAgB,aAAa,CAAC,IAAI,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAM9F;AAMD,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,GAAG,QAAQ,CAahE;AAiLD,wBAAgB,iBAAiB,CAC/B,YAAY,EAAE,MAAM,EACpB,cAAc,EAAE,MAAM,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,QAAQ,CAAC,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EACnC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,gBAAgB,GAAE,QAAQ,GAAG,QAAmB,EAChD,eAAe,GAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAG/C,EACD,cAAc,GAAE,QAAyB,EACzC,gBAAgB,GAAE,MAAM,EAAO,EAC/B,YAAY,GAAE,uBAAgC,GAC7C;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,GAAG,IAAI,CAwFnC;AAMD,wBAAgB,uBAAuB,CACrC,OAAO,EAAE;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,EACnC,iBAAiB,EAAE,iBAAiB,GACnC,IAAI,CAcN;AAKD,wBAAgB,0BAA0B,CAAC,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAGrF"}

package/dist/canvas/utils/createPreviewNode.js

@@ -1,6 +1,15 @@
 import { Position } from "../xyflow/react.js";
 import { DEFAULT_NODE_SIZE, GRID_SPACING, PREVIEW_EDGE_ID, PREVIEW_NODE_ID } from "../constants.js";
 import { getAbsolutePosition, getNonOverlappingPositionForDirection, resolveHandleContext } from "./NodeUtils.js";
+const PREVIEW_EDGE_STYLE = {
+    strokeDasharray: '5,5',
+    opacity: 0.8,
+    stroke: 'var(--canvas-selection-indicator)',
+    strokeWidth: 2
+};
+function isPreviewEdge(edge) {
+    return edge.id === PREVIEW_EDGE_ID || edge.source === PREVIEW_NODE_ID || edge.target === PREVIEW_NODE_ID;
+}
 function getOppositePosition(position) {
     switch(position){
         case Position.Left:
@@ -44,6 +53,12 @@ function calculatePositionFromDrop(dropPosition, handlePosition, previewNodeSize
             };
     }
 }
+function calculateCenteredPosition(centerPosition, previewNodeSize) {
+    return {
+        x: centerPosition.x - previewNodeSize.width / 2,
+        y: centerPosition.y - previewNodeSize.height / 2
+    };
+}
 function computeSpreadOffset(handle, size) {
     const index = handle?.index ?? null;
     const count = handle?.count ?? 1;
@@ -109,7 +124,7 @@ function calculateAutoPosition(sourceNode, handlePosition, previewNodeSize, exis
 function createPreviewNode(sourceNodeId, sourceHandleId, reactFlowInstance, position, data, sourceHandleType = 'source', previewNodeSize = {
     width: DEFAULT_NODE_SIZE,
     height: DEFAULT_NODE_SIZE
-}, handlePosition = Position.Right, ignoredNodeTypes = []) {
+}, handlePosition = Position.Right, ignoredNodeTypes = [], positionMode = 'drop') {
     const sourceNode = reactFlowInstance.getNode(sourceNodeId);
     if (!sourceNode) {
         console.warn(`Source node ${sourceNodeId} not found`);
@@ -119,7 +134,7 @@ function createPreviewNode(sourceNodeId, sourceHandleId, reactFlowInstance, posi
     const existingNodes = reactFlowInstance.getNodes().filter((n)=>n.id !== PREVIEW_NODE_ID);
     const internalNode = void 0 === position ? reactFlowInstance.getInternalNode(sourceNodeId) : void 0;
     const handle = internalNode ? resolveHandleContext(internalNode, sourceHandleId, handlePosition) : void 0;
-    const nodePosition = position ? calculatePositionFromDrop(position, handlePosition, previewNodeSize) : calculateAutoPosition(sourceNode, handlePosition, previewNodeSize, existingNodes, void 0, ignoredNodeTypes, handle);
+    const nodePosition = position ? 'center' === positionMode ? calculateCenteredPosition(position, previewNodeSize) : calculatePositionFromDrop(position, handlePosition, previewNodeSize) : calculateAutoPosition(sourceNode, handlePosition, previewNodeSize, existingNodes, void 0, ignoredNodeTypes, handle);
     const handleFacingSource = getOppositePosition(handlePosition);
     const finalData = {
         ...data ?? {}
@@ -149,12 +164,7 @@ function createPreviewNode(sourceNodeId, sourceHandleId, reactFlowInstance, posi
         id: PREVIEW_EDGE_ID,
         ...previewSourceAndTargetData,
         type: 'default',
-        style: {
-            strokeDasharray: '5,5',
-            opacity: 0.8,
-            stroke: 'var(--canvas-selection-indicator)',
-            strokeWidth: 2
-        }
+        style: PREVIEW_EDGE_STYLE
     };
     return {
         node: previewNode,
@@ -171,13 +181,13 @@ function applyPreviewToReactFlow(preview, reactFlowInstance) {
                 preview.node
             ]);
         reactFlowInstance.setEdges((edges)=>[
-                ...edges.filter((e)=>e.id !== PREVIEW_EDGE_ID),
+                ...edges.filter((edge)=>!isPreviewEdge(edge)),
                 preview.edge
             ]);
     }, 0);
 }
 function removePreviewFromReactFlow(reactFlowInstance) {
     reactFlowInstance.setNodes((nodes)=>nodes.filter((n)=>n.id !== PREVIEW_NODE_ID));
-    reactFlowInstance.setEdges((edges)=>edges.filter((e)=>e.id !== PREVIEW_EDGE_ID));
+    reactFlowInstance.setEdges((edges)=>edges.filter((edge)=>!isPreviewEdge(edge)));
 }
-export { applyPreviewToReactFlow, createPreviewNode, removePreviewFromReactFlow };
+export { PREVIEW_EDGE_STYLE, applyPreviewToReactFlow, createPreviewNode, getOppositePosition, isPreviewEdge, removePreviewFromReactFlow };