@particle-academy/fancy-flow 0.20.0 → 0.21.0

package/dist/{chunk-XETAGLH6.js → chunk-ZB4HHQMR.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import ReactExports, { createContext, forwardRef, memo, useMemo, useState, useRef, useEffect, useCallback, useContext, useSyncExternalStore, useDebugValue, useLayoutEffect } from 'react';
-import 'react-dom';
+import { createPortal } from 'react-dom';
 
 // node_modules/d3-dispatch/src/dispatch.js
 var noop = { value: () => {
@@ -109,9 +109,9 @@ function creator_default(name) {
 // node_modules/d3-selection/src/selector.js
 function none() {
 }
-function selector_default(selector) {
-  return selector == null ? none : function() {
-    return this.querySelector(selector);
+function selector_default(selector2) {
+  return selector2 == null ? none : function() {
+    return this.querySelector(selector2);
   };
 }
 
@@ -138,9 +138,9 @@ function array(x) {
 function empty() {
   return [];
 }
-function selectorAll_default(selector) {
-  return selector == null ? empty : function() {
-    return this.querySelectorAll(selector);
+function selectorAll_default(selector2) {
+  return selector2 == null ? empty : function() {
+    return this.querySelectorAll(selector2);
   };
 }
 
@@ -165,14 +165,14 @@ function selectAll_default(select) {
 }
 
 // node_modules/d3-selection/src/matcher.js
-function matcher_default(selector) {
+function matcher_default(selector2) {
   return function() {
-    return this.matches(selector);
+    return this.matches(selector2);
   };
 }
-function childMatcher(selector) {
+function childMatcher(selector2) {
   return function(node) {
-    return node.matches(selector);
+    return node.matches(selector2);
   };
 }
 
@@ -241,11 +241,11 @@ EnterNode.prototype = {
   insertBefore: function(child, next) {
     return this._parent.insertBefore(child, next);
   },
-  querySelector: function(selector) {
-    return this._parent.querySelector(selector);
+  querySelector: function(selector2) {
+    return this._parent.querySelector(selector2);
   },
-  querySelectorAll: function(selector) {
-    return this._parent.querySelectorAll(selector);
+  querySelectorAll: function(selector2) {
+    return this._parent.querySelectorAll(selector2);
   }
 };
 
@@ -856,8 +856,8 @@ Selection.prototype = selection.prototype = {
 var selection_default = selection;
 
 // node_modules/d3-selection/src/select.js
-function select_default2(selector) {
-  return typeof selector === "string" ? new Selection([[document.querySelector(selector)]], [document.documentElement]) : new Selection([[selector]], root);
+function select_default2(selector2) {
+  return typeof selector2 === "string" ? new Selection([[document.querySelector(selector2)]], [document.documentElement]) : new Selection([[selector2]], root);
 }
 
 // node_modules/d3-selection/src/sourceEvent.js
@@ -3871,6 +3871,40 @@ function createMarkerIds(edges, { id: id2, defaultColor, defaultMarkerStart, def
     return markers;
   }, []).sort((a, b) => a.id.localeCompare(b.id));
 }
+function getNodeToolbarTransform(nodeRect, viewport, position, offset, align) {
+  let alignmentOffset = 0.5;
+  if (align === "start") {
+    alignmentOffset = 0;
+  } else if (align === "end") {
+    alignmentOffset = 1;
+  }
+  let pos = [
+    (nodeRect.x + nodeRect.width * alignmentOffset) * viewport.zoom + viewport.x,
+    nodeRect.y * viewport.zoom + viewport.y - offset
+  ];
+  let shift = [-100 * alignmentOffset, -100];
+  switch (position) {
+    case Position.Right:
+      pos = [
+        (nodeRect.x + nodeRect.width) * viewport.zoom + viewport.x + offset,
+        (nodeRect.y + nodeRect.height * alignmentOffset) * viewport.zoom + viewport.y
+      ];
+      shift = [0, -100 * alignmentOffset];
+      break;
+    case Position.Bottom:
+      pos[1] = (nodeRect.y + nodeRect.height) * viewport.zoom + viewport.y + offset;
+      shift[1] = 0;
+      break;
+    case Position.Left:
+      pos = [
+        nodeRect.x * viewport.zoom + viewport.x - offset,
+        (nodeRect.y + nodeRect.height * alignmentOffset) * viewport.zoom + viewport.y
+      ];
+      shift = [-100, -100 * alignmentOffset];
+      break;
+  }
+  return `translate(${pos[0]}px, ${pos[1]}px) translate(${shift[0]}%, ${shift[1]}%)`;
+}
 var SELECTED_NODE_Z = 1e3;
 var ROOT_PARENT_Z_INCREMENT = 10;
 var defaultOptions = {
@@ -4238,10 +4272,10 @@ function isParentSelected(node, nodeLookup) {
   }
   return isParentSelected(parentNode, nodeLookup);
 }
-function hasSelector(target, selector, domNode) {
+function hasSelector(target, selector2, domNode) {
   let current = target;
   do {
-    if (current?.matches?.(selector))
+    if (current?.matches?.(selector2))
       return true;
     if (current === domNode)
       return false;
@@ -5199,6 +5233,8 @@ var ResizeControlVariant;
   ResizeControlVariant2["Line"] = "line";
   ResizeControlVariant2["Handle"] = "handle";
 })(ResizeControlVariant || (ResizeControlVariant = {}));
+var XY_RESIZER_HANDLE_POSITIONS = ["top-left", "top-right", "bottom-left", "bottom-right"];
+var XY_RESIZER_LINE_POSITIONS = ["top", "right", "bottom", "left"];
 function getResizeDirection({ width, prevWidth, height, prevHeight, affectsX, affectsY }) {
   const deltaWidth = width - prevWidth;
   const deltaHeight = height - prevHeight;
@@ -5573,7 +5609,7 @@ function cc(names) {
   }
   return out;
 }
-function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
+function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector2, isEqual) {
   const instRef = useRef(null);
   let inst;
   if (instRef.current === null) {
@@ -5590,7 +5626,7 @@ function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnaps
       if (!hasMemo) {
         hasMemo = true;
         memoizedSnapshot = nextSnapshot;
-        const nextSelection2 = selector(nextSnapshot);
+        const nextSelection2 = selector2(nextSnapshot);
         if (isEqual !== void 0 && inst.hasValue) {
           const currentSelection = inst.value;
           if (isEqual(currentSelection, nextSelection2)) {
@@ -5606,7 +5642,7 @@ function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnaps
       if (Object.is(prevSnapshot, nextSnapshot)) {
         return prevSelection;
       }
-      const nextSelection = selector(nextSnapshot);
+      const nextSelection = selector2(nextSnapshot);
       if (isEqual !== void 0 && isEqual(prevSelection, nextSelection)) {
         memoizedSnapshot = nextSnapshot;
         return prevSelection;
@@ -5619,7 +5655,7 @@ function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnaps
     const getSnapshotWithSelector = () => memoizedSelector(getSnapshot());
     const getServerSnapshotWithSelector = maybeGetServerSnapshot === null ? void 0 : () => memoizedSelector(maybeGetServerSnapshot());
     return [getSnapshotWithSelector, getServerSnapshotWithSelector];
-  }, [getSnapshot, getServerSnapshot, selector, isEqual]);
+  }, [getSnapshot, getServerSnapshot, selector2, isEqual]);
   const value = useSyncExternalStore(subscribe, getSelection, getServerSelection);
   useEffect(() => {
     inst.hasValue = true;
@@ -5666,12 +5702,12 @@ var createStore = (createState) => createState ? createStoreImpl(createState) :
 var { useDebugValue: useDebugValue2 } = ReactExports;
 var { useSyncExternalStoreWithSelector: useSyncExternalStoreWithSelector2 } = use_sync_external_store_with_selector_default;
 var identity3 = (arg) => arg;
-function useStoreWithEqualityFn(api, selector = identity3, equalityFn) {
+function useStoreWithEqualityFn(api, selector2 = identity3, equalityFn) {
   const slice = useSyncExternalStoreWithSelector2(
     api.subscribe,
     api.getState,
     api.getServerState || api.getInitialState,
-    selector,
+    selector2,
     equalityFn
   );
   useDebugValue2(slice);
@@ -5679,7 +5715,7 @@ function useStoreWithEqualityFn(api, selector = identity3, equalityFn) {
 }
 var createWithEqualityFnImpl = (createState, defaultEqualityFn) => {
   const api = createStore(createState);
-  const useBoundStoreWithEqualityFn = (selector, equalityFn = defaultEqualityFn) => useStoreWithEqualityFn(api, selector, equalityFn);
+  const useBoundStoreWithEqualityFn = (selector2, equalityFn = defaultEqualityFn) => useStoreWithEqualityFn(api, selector2, equalityFn);
   Object.assign(useBoundStoreWithEqualityFn, api);
   return useBoundStoreWithEqualityFn;
 };
@@ -5725,12 +5761,12 @@ function shallow$1(objA, objB) {
 var StoreContext = createContext(null);
 var Provider$1 = StoreContext.Provider;
 var zustandErrorMessage = errorMessages["error001"]("react");
-function useStore(selector, equalityFn) {
+function useStore(selector2, equalityFn) {
   const store = useContext(StoreContext);
   if (store === null) {
     throw new Error(zustandErrorMessage);
   }
-  return useStoreWithEqualityFn(store, selector, equalityFn);
+  return useStoreWithEqualityFn(store, selector2, equalityFn);
 }
 function useStoreApi() {
   const store = useContext(StoreContext);
@@ -8928,8 +8964,70 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
     ...color2 && { [isHandleControl ? "backgroundColor" : "borderColor"]: color2 }
   }, children: children2 });
 }
-memo(ResizeControl);
+var NodeResizeControl = memo(ResizeControl);
+function NodeResizer({ nodeId, isVisible = true, handleClassName, handleStyle, lineClassName, lineStyle, color: color2, minWidth = 10, minHeight = 10, maxWidth = Number.MAX_VALUE, maxHeight = Number.MAX_VALUE, keepAspectRatio = false, autoScale = true, shouldResize, onResizeStart, onResize, onResizeEnd }) {
+  if (!isVisible) {
+    return null;
+  }
+  return jsxs(Fragment, { children: [XY_RESIZER_LINE_POSITIONS.map((position) => jsx(NodeResizeControl, { className: lineClassName, style: lineStyle, nodeId, position, variant: ResizeControlVariant.Line, color: color2, minWidth, minHeight, maxWidth, maxHeight, onResizeStart, keepAspectRatio, autoScale, shouldResize, onResize, onResizeEnd }, position)), XY_RESIZER_HANDLE_POSITIONS.map((position) => jsx(NodeResizeControl, { className: handleClassName, style: handleStyle, nodeId, position, color: color2, minWidth, minHeight, maxWidth, maxHeight, onResizeStart, keepAspectRatio, autoScale, shouldResize, onResize, onResizeEnd }, position))] });
+}
+var selector = (state) => state.domNode?.querySelector(".react-flow__renderer");
+function NodeToolbarPortal({ children: children2 }) {
+  const wrapperRef = useStore(selector);
+  if (!wrapperRef) {
+    return null;
+  }
+  return createPortal(children2, wrapperRef);
+}
+var nodeEqualityFn = (a, b) => a?.internals.positionAbsolute.x !== b?.internals.positionAbsolute.x || a?.internals.positionAbsolute.y !== b?.internals.positionAbsolute.y || a?.measured.width !== b?.measured.width || a?.measured.height !== b?.measured.height || a?.selected !== b?.selected || a?.internals.z !== b?.internals.z;
+var nodesEqualityFn = (a, b) => {
+  if (a.size !== b.size) {
+    return false;
+  }
+  for (const [key, node] of a) {
+    if (nodeEqualityFn(node, b.get(key))) {
+      return false;
+    }
+  }
+  return true;
+};
+var storeSelector = (state) => ({
+  x: state.transform[0],
+  y: state.transform[1],
+  zoom: state.transform[2],
+  selectedNodesCount: state.nodes.filter((node) => node.selected).length
+});
+function NodeToolbar({ nodeId, children: children2, className, style: style2, isVisible, position = Position.Top, offset = 10, align = "center", ...rest }) {
+  const contextNodeId = useNodeId();
+  const nodesSelector = useCallback((state) => {
+    const nodeIds = Array.isArray(nodeId) ? nodeId : [nodeId || contextNodeId || ""];
+    const internalNodes = nodeIds.reduce((res, id2) => {
+      const node = state.nodeLookup.get(id2);
+      if (node) {
+        res.set(node.id, node);
+      }
+      return res;
+    }, /* @__PURE__ */ new Map());
+    return internalNodes;
+  }, [nodeId, contextNodeId]);
+  const nodes = useStore(nodesSelector, nodesEqualityFn);
+  const { x, y, zoom, selectedNodesCount } = useStore(storeSelector, shallow$1);
+  const isActive = typeof isVisible === "boolean" ? isVisible : nodes.size === 1 && nodes.values().next().value?.selected && selectedNodesCount === 1;
+  if (!isActive || !nodes.size) {
+    return null;
+  }
+  const nodeRect = getInternalNodesBounds(nodes);
+  const nodesArray = Array.from(nodes.values());
+  const zIndex = Math.max(...nodesArray.map((node) => node.internals.z + 1));
+  const wrapperStyle2 = {
+    position: "absolute",
+    transform: getNodeToolbarTransform(nodeRect, { x, y, zoom }, position, offset, align),
+    zIndex,
+    ...style2
+  };
+  return jsx(NodeToolbarPortal, { children: jsx("div", { style: wrapperStyle2, className: cc(["react-flow__node-toolbar", className]), ...rest, "data-id": nodesArray.reduce((acc, node) => `${acc}${node.id} `, "").trim(), children: children2 }) });
+}
 
-export { Background, BackgroundVariant, Controls, Handle, MiniMap, Position, ReactFlowProvider, addEdge2 as addEdge, applyEdgeChanges, applyNodeChanges, index, reconnectEdge2 as reconnectEdge, useReactFlow };
-//# sourceMappingURL=chunk-XETAGLH6.js.map
-//# sourceMappingURL=chunk-XETAGLH6.js.map
+export { Background, BackgroundVariant, Controls, Handle, MiniMap, NodeResizer, NodeToolbar, Position, ReactFlowProvider, addEdge2 as addEdge, applyEdgeChanges, applyNodeChanges, index, reconnectEdge2 as reconnectEdge, useReactFlow };
+//# sourceMappingURL=chunk-ZB4HHQMR.js.map
+//# sourceMappingURL=chunk-ZB4HHQMR.js.map