@particle-academy/fancy-flow 0.5.2 → 0.5.4

package/dist/index.js

@@ -1,9 +1,9 @@
-import { useFlowState, useFlowRun, applyStatusesToNodes } from './chunk-4PZQRN5Y.js';
-export { applyStatusesToNodes, useFlowRun, useFlowState } from './chunk-4PZQRN5Y.js';
-export { runFlow } from './chunk-DW66NGU5.js';
-import { registerBuiltinKinds, buildNodeTypes } from './chunk-35OXF6W3.js';
-export { BUILTIN_KINDS, RegistryNode, buildNodeTypes, registerBuiltinKinds } from './chunk-35OXF6W3.js';
-import { Position, Handle, index, BackgroundVariant, Background, Controls, MiniMap, ReactFlowProvider, addEdge, applyEdgeChanges, applyNodeChanges, useReactFlow } from './chunk-2BZ6OE5H.js';
+import { useFlowState, useFlowRun, applyStatusesToNodes } from './chunk-QSSQRQN4.js';
+export { applyStatusesToNodes, useFlowRun, useFlowState } from './chunk-QSSQRQN4.js';
+export { runFlow } from './chunk-NVULCEDX.js';
+import { registerBuiltinKinds, buildNodeTypes } from './chunk-M2XKGQQL.js';
+export { BUILTIN_KINDS, RegistryNode, buildNodeTypes, registerBuiltinKinds } from './chunk-M2XKGQQL.js';
+import { Position, Handle, index, BackgroundVariant, Background, Controls, MiniMap, ReactFlowProvider, addEdge, applyEdgeChanges, applyNodeChanges, useReactFlow } from './chunk-NF6NPY5N.js';
 import { exportWorkflow, workflowToBlob, importWorkflow } from './chunk-BCXECQUC.js';
 export { WORKFLOW_SCHEMA_URL, WORKFLOW_SCHEMA_VERSION, exportWorkflow, importWorkflow, workflowToBlob } from './chunk-BCXECQUC.js';
 import { onNodeKindsChanged, listNodeKinds, categoryAccent, getNodeKind, validateConfig, defaultConfigFor } from './chunk-WNVBXXOL.js';

package/dist/registry.cjs

@@ -3055,7 +3055,7 @@ function zoom_default2() {
 
 // node_modules/@xyflow/system/dist/esm/index.js
 var errorMessages = {
-  error001: (lib = "react") => `Seems like you have not used zustand provider as an ancestor. Help: https://${lib}flow.dev/error#001`,
+  error001: (lib = "react") => `Seems like you have not used ${lib === "svelte" ? "SvelteFlowProvider" : "ReactFlowProvider"} as an ancestor. Help: https://${lib}flow.dev/error#001`,
   error002: () => "It looks like you've created a new nodeTypes or edgeTypes object. If this wasn't on purpose please define the nodeTypes/edgeTypes outside of the component or memoize them.",
   error003: (nodeType) => `Node type "${nodeType}" not found. Using fallback type "default".`,
   error004: () => "The parent container needs a width and a height to render the graph.",
@@ -3194,21 +3194,21 @@ var getInternalNodesBounds = (nodeLookup, params = {}) => {
   return hasVisibleNodes ? boxToRect(box) : { x: 0, y: 0, width: 0, height: 0 };
 };
 var getNodesInside = (nodes, rect, [tx, ty, tScale] = [0, 0, 1], partially = false, excludeNonSelectableNodes = false) => {
-  const paneRect = {
-    ...pointToRendererPoint(rect, [tx, ty, tScale]),
-    width: rect.width / tScale,
-    height: rect.height / tScale
-  };
+  const paneX = (rect.x - tx) / tScale;
+  const paneY = (rect.y - ty) / tScale;
+  const paneWidth = rect.width / tScale;
+  const paneHeight = rect.height / tScale;
   const visibleNodes = [];
   for (const node of nodes.values()) {
     const { measured, selectable = true, hidden = false } = node;
     if (excludeNonSelectableNodes && !selectable || hidden) {
       continue;
     }
-    const width = measured.width ?? node.width ?? node.initialWidth ?? null;
-    const height = measured.height ?? node.height ?? node.initialHeight ?? null;
-    const overlappingArea = getOverlappingArea(paneRect, nodeToRect(node));
-    const area = (width ?? 0) * (height ?? 0);
+    const width = measured.width ?? node.width ?? node.initialWidth ?? 0;
+    const height = measured.height ?? node.height ?? node.initialHeight ?? 0;
+    const { x, y } = node.internals.positionAbsolute;
+    const overlappingArea = getRectsOverlappingArea(paneX, paneY, paneWidth, paneHeight, x, y, width, height);
+    const area = width * height;
     const partiallyVisible = partially && overlappingArea > 0;
     const forceInitialRender = !node.internals.handleBounds;
     const isVisible = forceInitialRender || partiallyVisible || overlappingArea >= area;
@@ -3388,11 +3388,12 @@ var nodeToBox = (node, nodeOrigin = [0, 0]) => {
   };
 };
 var getBoundsOfRects = (rect1, rect2) => boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)));
-var getOverlappingArea = (rectA, rectB) => {
-  const xOverlap = Math.max(0, Math.min(rectA.x + rectA.width, rectB.x + rectB.width) - Math.max(rectA.x, rectB.x));
-  const yOverlap = Math.max(0, Math.min(rectA.y + rectA.height, rectB.y + rectB.height) - Math.max(rectA.y, rectB.y));
+var getRectsOverlappingArea = (aX, aY, aWidth, aHeight, bX, bY, bWidth, bHeight) => {
+  const xOverlap = Math.max(0, Math.min(aX + aWidth, bX + bWidth) - Math.max(aX, bX));
+  const yOverlap = Math.max(0, Math.min(aY + aHeight, bY + bHeight) - Math.max(aY, bY));
   return Math.ceil(xOverlap * yOverlap);
 };
+var getOverlappingArea = (rectA, rectB) => getRectsOverlappingArea(rectA.x, rectA.y, rectA.width, rectA.height, rectB.x, rectB.y, rectB.width, rectB.height);
 var isRectObject = (obj) => isNumeric(obj.width) && isNumeric(obj.height) && isNumeric(obj.x) && isNumeric(obj.y);
 var isNumeric = (n) => !isNaN(n) && isFinite(n);
 var createDevWarn = (lib, helpUrl) => (id2, message) => {
@@ -5854,11 +5855,12 @@ var Panel = ReactExports.forwardRef(({ position = "top-left", children: children
   return jsxRuntime.jsx("div", { className: cc(["react-flow__panel", className, ...positionClasses]), style: style2, ref, ...rest, children: children2 });
 });
 Panel.displayName = "Panel";
+var link = `https://reactflow.dev${process.env.NODE_ENV === "production" ? "?utm_source=attribution" : "/attribution"}`;
 function Attribution({ proOptions, position = "bottom-right" }) {
   if (proOptions?.hideAttribution) {
     return null;
   }
-  return jsxRuntime.jsx(Panel, { position, className: "react-flow__attribution", "data-message": "Please only hide this attribution when you are subscribed to React Flow Pro: https://pro.reactflow.dev", children: jsxRuntime.jsx("a", { href: "https://reactflow.dev", target: "_blank", rel: "noopener noreferrer", "aria-label": "React Flow attribution", children: "React Flow" }) });
+  return jsxRuntime.jsx(Panel, { position, className: "react-flow__attribution", "data-message": `Please only hide this attribution when you are subscribed to React Flow Pro: ${link}`, children: jsxRuntime.jsx("a", { href: link, target: "_blank", rel: "noopener noreferrer", "aria-label": "React Flow attribution", children: "React Flow" }) });
 }
 var selector$m = (s) => {
   const selectedNodes = [];
@@ -6785,7 +6787,6 @@ var wrapHandler = (handler, containerRef) => {
 var selector$h = (s) => ({
   userSelectionActive: s.userSelectionActive,
   elementsSelectable: s.elementsSelectable,
-  connectionInProgress: s.connection.inProgress,
   dragging: s.paneDragging,
   panBy: s.panBy,
   autoPanSpeed: s.autoPanSpeed
@@ -6793,18 +6794,20 @@ var selector$h = (s) => ({
 function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, autoPanOnSelection, paneClickDistance, selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, onPaneContextMenu, onPaneScroll, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, children: children2 }) {
   const autoPanId = ReactExports.useRef(0);
   const store = useStoreApi();
-  const { userSelectionActive, elementsSelectable, dragging, connectionInProgress, panBy: panBy2, autoPanSpeed } = useStore(selector$h, shallow$1);
+  const { userSelectionActive, elementsSelectable, dragging, panBy: panBy2, autoPanSpeed } = useStore(selector$h, shallow$1);
   const isSelectionEnabled = elementsSelectable && (isSelecting || userSelectionActive);
   const container = ReactExports.useRef(null);
   const containerBounds = ReactExports.useRef();
   const selectedNodeIds = ReactExports.useRef(/* @__PURE__ */ new Set());
   const selectedEdgeIds = ReactExports.useRef(/* @__PURE__ */ new Set());
+  const connectionEndedOnPane = ReactExports.useRef(false);
   const selectionInProgress = ReactExports.useRef(false);
   const position = ReactExports.useRef({ x: 0, y: 0 });
   const autoPanStarted = ReactExports.useRef(false);
   const onClick = (event) => {
-    if (selectionInProgress.current || connectionInProgress) {
+    if (selectionInProgress.current || connectionEndedOnPane.current || store.getState().connection.inProgress) {
       selectionInProgress.current = false;
+      connectionEndedOnPane.current = false;
       return;
     }
     onPaneClick?.(event);
@@ -6949,6 +6952,12 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
     commitUserSelectionRect(mouseX, mouseY);
   };
   const onPointerUp = (event) => {
+    if (!isSelectionEnabled) {
+      if (event.target === container.current && store.getState().connection.inProgress) {
+        connectionEndedOnPane.current = true;
+      }
+      return;
+    }
     if (event.button !== 0) {
       return;
     }
@@ -6973,7 +6982,7 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
     cleanupAutoPan();
   };
   const draggable = panOnDrag === true || Array.isArray(panOnDrag) && panOnDrag.includes(0);
-  return jsxRuntime.jsxs("div", { className: cc(["react-flow__pane", { draggable, dragging, selection: isSelecting }]), onClick: isSelectionEnabled ? void 0 : wrapHandler(onClick, container), onContextMenu: wrapHandler(onContextMenu, container), onWheel: wrapHandler(onWheel, container), onPointerEnter: isSelectionEnabled ? void 0 : onPaneMouseEnter, onPointerMove: isSelectionEnabled ? onPointerMove : onPaneMouseMove, onPointerUp: isSelectionEnabled ? onPointerUp : void 0, onPointerCancel: isSelectionEnabled ? onPointerCancel : void 0, onPointerDownCapture: isSelectionEnabled ? onPointerDownCapture : void 0, onClickCapture: isSelectionEnabled ? onClickCapture : void 0, onPointerLeave: onPaneMouseLeave, ref: container, style: containerStyle, children: [children2, jsxRuntime.jsx(UserSelection, {})] });
+  return jsxRuntime.jsxs("div", { className: cc(["react-flow__pane", { draggable, dragging, selection: isSelecting }]), onClick: isSelectionEnabled ? void 0 : wrapHandler(onClick, container), onContextMenu: wrapHandler(onContextMenu, container), onWheel: wrapHandler(onWheel, container), onPointerEnter: isSelectionEnabled ? void 0 : onPaneMouseEnter, onPointerMove: isSelectionEnabled ? onPointerMove : onPaneMouseMove, onPointerUp, onPointerCancel: isSelectionEnabled ? onPointerCancel : void 0, onPointerDownCapture: isSelectionEnabled ? onPointerDownCapture : void 0, onClickCapture: isSelectionEnabled ? onClickCapture : void 0, onPointerLeave: onPaneMouseLeave, ref: container, style: containerStyle, children: [children2, jsxRuntime.jsx(UserSelection, {})] });
 }
 function handleNodeClick({ id: id2, store, unselect = false, nodeRef }) {
   const { addSelectedNodes, unselectNodesAndEdges, multiSelectionActive, nodeLookup, onError } = store.getState();
@@ -7080,9 +7089,33 @@ var selector$g = (s) => ({
   noPanClassName: s.noPanClassName,
   rfId: s.rfId
 });
+var HandleConfigContext = ReactExports.createContext(null);
+function HandleConfigProvider({ children: children2 }) {
+  const config = useStore(selector$g, shallow$1);
+  return jsxRuntime.jsx(HandleConfigContext.Provider, { value: config, children: children2 });
+}
+function useHandleConfig() {
+  const config = ReactExports.useContext(HandleConfigContext);
+  if (!config) {
+    throw new Error("useHandleConfig must be used within a HandleConfigProvider");
+  }
+  return config;
+}
+var idleConnectingState = {
+  connectingFrom: false,
+  connectingTo: false,
+  clickConnecting: false,
+  isPossibleEndHandle: true,
+  connectionInProcess: false,
+  clickConnectionInProcess: false,
+  valid: false
+};
 var connectingSelector = (nodeId, handleId, type) => (state) => {
   const { connectionClickStartHandle: clickHandle, connectionMode, connection } = state;
   const { fromHandle, toHandle, isValid } = connection;
+  if (!fromHandle && !clickHandle) {
+    return idleConnectingState;
+  }
   const connectingTo = toHandle?.nodeId === nodeId && toHandle?.id === handleId && toHandle?.type === type;
   return {
     connectingFrom: fromHandle?.nodeId === nodeId && fromHandle?.id === handleId && fromHandle?.type === type,
@@ -7099,7 +7132,7 @@ function HandleComponent({ type = "source", position = Position.Top, isValidConn
   const isTarget = type === "target";
   const store = useStoreApi();
   const nodeId = useNodeId();
-  const { connectOnClick, noPanClassName, rfId } = useStore(selector$g, shallow$1);
+  const { connectOnClick, noPanClassName, rfId } = useHandleConfig();
   const { connectingFrom, connectingTo, clickConnecting, isPossibleEndHandle, connectionInProcess, clickConnectionInProcess, valid } = useStore(connectingSelector(nodeId, handleId, type), shallow$1);
   if (!nodeId) {
     store.getState().onError?.("010", errorMessages["error010"]());
@@ -7802,7 +7835,8 @@ var nullPosition = {
   targetX: null,
   targetY: null,
   sourcePosition: null,
-  targetPosition: null
+  targetPosition: null,
+  zIndex: void 0
 };
 var shiftX = (x, shift, position) => {
   if (position === Position.Left)
@@ -7890,14 +7924,11 @@ function EdgeWrapper({ id: id2, edgesFocusable, edgesReconnectable, elementsSele
   const [updateHover, setUpdateHover] = ReactExports.useState(false);
   const [reconnecting, setReconnecting] = ReactExports.useState(false);
   const store = useStoreApi();
-  const { zIndex, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition } = useStore(ReactExports.useCallback((store2) => {
+  const { zIndex = edge.zIndex, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition } = useStore(ReactExports.useCallback((store2) => {
     const sourceNode = store2.nodeLookup.get(edge.source);
     const targetNode = store2.nodeLookup.get(edge.target);
     if (!sourceNode || !targetNode) {
-      return {
-        zIndex: edge.zIndex,
-        ...nullPosition
-      };
+      return nullPosition;
     }
     const edgePosition = getEdgePosition({
       id: id2,
@@ -7917,8 +7948,8 @@ function EdgeWrapper({ id: id2, edgesFocusable, edgesReconnectable, elementsSele
       zIndexMode: store2.zIndexMode
     });
     return {
-      zIndex: zIndex2,
-      ...edgePosition || nullPosition
+      ...edgePosition || nullPosition,
+      zIndex: zIndex2
     };
   }, [edge.source, edge.target, edge.sourceHandle, edge.targetHandle, edge.selected, edge.zIndex]), shallow$1);
   const markerStartUrl = ReactExports.useMemo(() => edge.markerStart ? `url('#${getMarkerId(edge.markerStart, rfId)}')` : void 0, [edge.markerStart, rfId]);
@@ -8516,7 +8547,7 @@ function ReactFlowProvider({ initialNodes: nodes, initialEdges: edges, defaultNo
     nodeExtent,
     zIndexMode
   }));
-  return jsxRuntime.jsx(Provider$1, { value: store, children: jsxRuntime.jsx(BatchProvider, { children: children2 }) });
+  return jsxRuntime.jsx(Provider$1, { value: store, children: jsxRuntime.jsx(BatchProvider, { children: jsxRuntime.jsx(HandleConfigProvider, { children: children2 }) }) });
 }
 function Wrapper({ children: children2, nodes, edges, defaultNodes, defaultEdges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, zIndexMode }) {
   const isWrapped = ReactExports.useContext(StoreContext);