@octaviaflow/core 3.0.18-beta.10 → 3.0.18-beta.12

package/dist/index.cjs

@@ -29749,7 +29749,7 @@ function findContainingGroup(point, nodes, exclude = []) {
   for (let i = nodes.length - 1; i >= 0; i--) {
     const n = nodes[i];
     if (exclude.includes(n.id)) continue;
-    if (n.type !== "group") continue;
+    if (n.type !== "group" && n.type !== "forEach") continue;
     if (n.data && typeof n.data === "object" && n.data.collapsed) {
       continue;
     }
@@ -29797,6 +29797,9 @@ function createHandleRegistry() {
     resolve(nodeId, type, handleId) {
       return map.get(key(nodeId, type, handleId));
     },
+    all() {
+      return Array.from(map.values());
+    },
     subscribe(listener) {
       listeners.add(listener);
       return () => {
@@ -30192,10 +30195,12 @@ function Handle({
       type,
       side: position,
       index,
-      total
+      total,
+      canStart,
+      canEnd
     });
     return dispose;
-  }, [registry, node.id, id, type, position, index, total]);
+  }, [registry, node.id, id, type, position, index, total, canStart, canEnd]);
   const handlePointerDown = (e) => {
     if (!canStart) return;
     e.stopPropagation();
@@ -30920,6 +30925,8 @@ function FlowCanvas2(props) {
     reparentOnDrag = false,
     autoResizeContainers = false,
     containerAutoResizePadding = 32,
+    containerMinWidth = 320,
+    containerMinHeight = 200,
     height = "100%",
     width = "100%",
     className,
@@ -31056,7 +31063,9 @@ function FlowCanvas2(props) {
         id: d.id,
         startPosition: d.position
       }));
-      const wantsReparent = altKey || reparentOnDragRef.current;
+      const evaluateReparent = altKey || reparentOnDragRef.current;
+      const hasParent = !!node.parentId;
+      const skipClamp = altKey || reparentOnDragRef.current && !hasParent;
       dragRef.current = {
         pointerId,
         nodeId,
@@ -31064,7 +31073,8 @@ function FlowCanvas2(props) {
         startClientY: clientY,
         startPosition: node.position,
         descendants: kids,
-        altDetach: wantsReparent,
+        skipClamp,
+        evaluateReparent,
         rafScheduled: false,
         nextDelta: null
       };
@@ -31124,6 +31134,8 @@ function FlowCanvas2(props) {
   const reparentOnDragRef = (0, import_react154.useRef)(reparentOnDrag);
   const autoResizeContainersRef = (0, import_react154.useRef)(autoResizeContainers);
   const containerAutoResizePaddingRef = (0, import_react154.useRef)(containerAutoResizePadding);
+  const containerMinWidthRef = (0, import_react154.useRef)(containerMinWidth);
+  const containerMinHeightRef = (0, import_react154.useRef)(containerMinHeight);
   (0, import_react154.useEffect)(() => {
     edgesRef.current = edges;
   }, [edges]);
@@ -31157,6 +31169,12 @@ function FlowCanvas2(props) {
   (0, import_react154.useEffect)(() => {
     containerAutoResizePaddingRef.current = containerAutoResizePadding;
   }, [containerAutoResizePadding]);
+  (0, import_react154.useEffect)(() => {
+    containerMinWidthRef.current = containerMinWidth;
+  }, [containerMinWidth]);
+  (0, import_react154.useEffect)(() => {
+    containerMinHeightRef.current = containerMinHeight;
+  }, [containerMinHeight]);
   const onNodesChangeRef = (0, import_react154.useRef)(onNodesChange);
   const onConnectRef = (0, import_react154.useRef)(onConnect);
   const onConnectEndRef = (0, import_react154.useRef)(onConnectEnd);
@@ -31201,7 +31219,7 @@ function FlowCanvas2(props) {
               x: d.startPosition.x + delta.dx,
               y: d.startPosition.y + delta.dy
             };
-            const clamped = d.altDetach ? proposed : clampToParentExtent(dragNode, proposed, nodesRef.current);
+            const clamped = d.skipClamp ? proposed : clampToParentExtent(dragNode, proposed, nodesRef.current);
             const isContainer = dragNode.type === "group" || dragNode.type === "forEach";
             const gap = isContainer ? subflowCollisionGapRef.current : nodeCollisionGapRef.current;
             const excludeIds = /* @__PURE__ */ new Set([d.nodeId, ...d.descendants.map((kid) => kid.id)]);
@@ -31253,7 +31271,7 @@ function FlowCanvas2(props) {
               y: Math.round(proposed.y / g) * g
             };
           }
-          const clamped = drag.altDetach ? proposed : clampToParentExtent(dragNode, proposed, nodesRef.current);
+          const clamped = drag.skipClamp ? proposed : clampToParentExtent(dragNode, proposed, nodesRef.current);
           const isContainer = dragNode.type === "group" || dragNode.type === "forEach";
           const gap = isContainer ? subflowCollisionGapRef.current : nodeCollisionGapRef.current;
           const excludeIds = /* @__PURE__ */ new Set([
@@ -31276,7 +31294,7 @@ function FlowCanvas2(props) {
               )
             );
           }
-          if (drag.altDetach) {
+          if (drag.evaluateReparent) {
             const targetGroup = findContainingGroup(
               {
                 x: finalPos.x + (dragNode.width ?? 0) / 2,
@@ -31291,8 +31309,10 @@ function FlowCanvas2(props) {
                 ...dragNode,
                 position: finalPos,
                 parentId: nextParentId,
-                // Preserve extent only when staying in a group.
-                extent: nextParentId ? dragNode.extent : void 0
+                // Adopting into a container always pins the child with
+                // `extent: 'parent'` so it's clamped from the next drag
+                // on. Detaching clears it.
+                extent: nextParentId ? "parent" : void 0
               };
               changes.push(change.node.replace(drag.nodeId, updated));
             }
@@ -31303,7 +31323,9 @@ function FlowCanvas2(props) {
               // Projected children: apply the position + reparent
               // changes we just built before measuring bboxes.
               changes,
-              containerAutoResizePaddingRef.current
+              containerAutoResizePaddingRef.current,
+              containerMinWidthRef.current,
+              containerMinHeightRef.current
             );
             for (const c2 of containerChanges) changes.push(c2);
           }
@@ -31314,49 +31336,54 @@ function FlowCanvas2(props) {
       }
       const c = connRef.current;
       if (c && c.pointerId === e.pointerId) {
-        let handleEl = null;
-        if (typeof document !== "undefined") {
-          const stack = document.elementsFromPoint(e.clientX, e.clientY);
-          for (const el of stack) {
-            const candidate = el.closest(
-              "[data-handle-id]"
-            );
-            if (!candidate) continue;
-            if (candidate.dataset.handleNodeId === c.from.nodeId) continue;
-            handleEl = candidate;
-            break;
+        const rect = containerRef.current?.getBoundingClientRect();
+        const flowPos = rect ? screenToFlow({ x: e.clientX - rect.left, y: e.clientY - rect.top }, vp) : { x: 0, y: 0 };
+        const snapRadius = 26 / Math.max(0.1, vp.zoom);
+        let bestDesc = null;
+        let bestDist = snapRadius;
+        for (const desc of handleRegistry.all()) {
+          if (desc.nodeId === c.from.nodeId) continue;
+          if (desc.type === c.from.handleType) continue;
+          if (!desc.canEnd) continue;
+          const targetNode = nodesRef.current.find((n) => n.id === desc.nodeId);
+          if (!targetNode || targetNode.hidden) continue;
+          const centre = handleCentre(targetNode, desc.side, desc.index, desc.total);
+          const dist = Math.hypot(centre.x - flowPos.x, centre.y - flowPos.y);
+          if (dist < bestDist) {
+            bestDist = dist;
+            bestDesc = desc;
           }
         }
         let connection = null;
         let connectedTo;
-        if (handleEl) {
-          const targetNodeId = handleEl.dataset.handleNodeId;
-          const targetHandleId = handleEl.dataset.handleId;
-          const targetType = handleEl.dataset.handleType;
-          const connectableEnd = handleEl.dataset.handleConnectableEnd === "true";
-          if (connectableEnd && (targetNodeId !== c.from.nodeId || targetHandleId !== c.from.handleId) && targetType !== c.from.handleType) {
-            const source = c.from.handleType === "source" ? c.from : { nodeId: targetNodeId, handleId: targetHandleId, handleType: "source" };
-            const target2 = c.from.handleType === "target" ? c.from : { nodeId: targetNodeId, handleId: targetHandleId, handleType: "target" };
-            connection = {
-              source: source.nodeId,
-              sourceHandle: source.handleId,
-              target: target2.nodeId,
-              targetHandle: target2.handleId
-            };
-            connectedTo = {
-              nodeId: targetNodeId,
-              handleId: targetHandleId,
-              handleType: targetType
-            };
-            const validator = isValidConnectionRef.current;
-            if (validator && !validator(connection)) {
-              connection = null;
-              connectedTo = void 0;
-            }
+        if (bestDesc) {
+          const source = c.from.handleType === "source" ? c.from : {
+            nodeId: bestDesc.nodeId,
+            handleId: bestDesc.handleId,
+            handleType: "source"
+          };
+          const target2 = c.from.handleType === "target" ? c.from : {
+            nodeId: bestDesc.nodeId,
+            handleId: bestDesc.handleId,
+            handleType: "target"
+          };
+          connection = {
+            source: source.nodeId,
+            sourceHandle: source.handleId,
+            target: target2.nodeId,
+            targetHandle: target2.handleId
+          };
+          connectedTo = {
+            nodeId: bestDesc.nodeId,
+            handleId: bestDesc.handleId,
+            handleType: bestDesc.type
+          };
+          const validator = isValidConnectionRef.current;
+          if (validator && !validator(connection)) {
+            connection = null;
+            connectedTo = void 0;
           }
         }
-        const rect = containerRef.current?.getBoundingClientRect();
-        const flowPos = rect ? screenToFlow({ x: e.clientX - rect.left, y: e.clientY - rect.top }, vp) : { x: 0, y: 0 };
         const endState = {
           cancelled: !connection,
           position: { x: e.clientX, y: e.clientY },
@@ -31389,6 +31416,25 @@ function FlowCanvas2(props) {
       window.removeEventListener("pointercancel", onPointerCancel);
     };
   }, [store]);
+  (0, import_react154.useEffect)(() => {
+    if (!autoResizeContainers || draggingId) return;
+    const resizeChanges = computeContainerAutoResize(
+      nodes,
+      [],
+      containerAutoResizePadding,
+      containerMinWidth,
+      containerMinHeight
+    );
+    if (resizeChanges.length > 0) onNodesChange?.(resizeChanges);
+  }, [
+    nodes,
+    draggingId,
+    autoResizeContainers,
+    containerAutoResizePadding,
+    containerMinWidth,
+    containerMinHeight,
+    onNodesChange
+  ]);
   const panRef = (0, import_react154.useRef)(null);
   const onCanvasPointerDown = (e) => {
     if (e.button !== 0) return;
@@ -31851,7 +31897,9 @@ function FlowCanvas2(props) {
 function onEdgesChangeRef(id, cb) {
   cb?.([change.edge.remove(id)]);
 }
-function computeContainerAutoResize(nodes, pending, padding) {
+var CONTAINER_DROP_HEADROOM_W = 220;
+var CONTAINER_DROP_HEADROOM_H = 2 * 128;
+function computeContainerAutoResize(nodes, pending, padding, minWidth, minHeight) {
   const projected = /* @__PURE__ */ new Map();
   for (const n of nodes) projected.set(n.id, n);
   for (const c of pending) {
@@ -31872,7 +31920,14 @@ function computeContainerAutoResize(nodes, pending, padding) {
     for (const n of projected.values()) {
       if (n.parentId === parent.id) children.push(n);
     }
-    if (children.length === 0) continue;
+    if (children.length === 0) {
+      const curW2 = parent.width ?? 480;
+      const curH2 = parent.height ?? 240;
+      if (curW2 !== minWidth || curH2 !== minHeight) {
+        out.push(change.node.dimensions(parent.id, { width: minWidth, height: minHeight }));
+      }
+      continue;
+    }
     let minX = Number.POSITIVE_INFINITY;
     let minY = Number.POSITIVE_INFINITY;
     let maxX = Number.NEGATIVE_INFINITY;
@@ -31887,12 +31942,12 @@ function computeContainerAutoResize(nodes, pending, padding) {
     }
     const targetX = minX - padding;
     const targetY = minY - padding - HEADER;
-    const targetW = maxX - minX + padding * 2;
-    const targetH = maxY - minY + padding * 2 + HEADER;
     const curW = parent.width ?? 480;
     const curH = parent.height ?? 240;
-    const nextW = Math.max(curW, targetW);
-    const nextH = Math.max(curH, targetH);
+    const fitW = maxX - minX + padding * 2 + CONTAINER_DROP_HEADROOM_W;
+    const fitH = maxY - minY + padding * 2 + HEADER + CONTAINER_DROP_HEADROOM_H;
+    const nextW = Math.max(minWidth, fitW);
+    const nextH = Math.max(minHeight, fitH);
     const positionDirty = parent.position.x !== targetX || parent.position.y !== targetY;
     const sizeDirty = curW !== nextW || curH !== nextH;
     if (positionDirty) {