@weasel-js/diagram 1.11.1 → 1.13.0-rc.0

package/README.md

@@ -415,7 +415,7 @@ the `insert` dep it displaced, so core's rect, ellipse and text tools keep worki
 ### Containers and pools
 
 A container is a titled box that holds other shapes; a pool is a header and a
-stack of lanes, each holding shapes. Both are core `ContainerNode`s carrying a
+stack of lanes, each holding shapes. Both are core `GroupNode`s carrying a
 `container` trait (`diagramContainerOf`): a role of `container`, `pool`, or
 `lane`, and a header. A region's title is a text child named
 `<id>/title`, so double-clicking a header renames it.

package/dist/{chunk-CI3I3I6T.js → chunk-ESFIS7BB.js}

@@ -1,9 +1,9 @@
-import { createAvoidRouter, placeLabels, edgeHops, DEFAULT_HOP_SIZE, HOPS_DOC_KEY, simplifyStops } from './chunk-T6DQT553.js';
-import { edgeRouter, registerMarkShape, withDiagramRegistry, diagramGroupOf, diagramLabelOf, editEdgeLabelBinding, editEdgeLabelAction, diagramContainerOf, headerBox, labelFollowsLayout, buildGraph, LABEL_DRAG_AFFORDANCE_KIND, EDIT_EDGE_LABEL_ACTION_ID, labelDragLayer, laneOutlineOf, routerOf, labelScratchOf, ROUTERS, avoid, LABEL_PLACEMENT, editableLabels, titleIdOf, orthogonal, diagramAnchorOf, MIN_LANE_SIZE, endAims, resolveEnd, EDGE_DERIVE_PATH, titlePose, regionSpecs, DIAGRAM_THEME_KEY, diagramThemeOf, boxCenter, themeLabelFamily, roleEdgeStyle, roleStyle, themeLabelFont, firstLanes, DEFAULT_LANE_SIZE, bodyBox } from './chunk-43LDZ6L4.js';
-import { diagramEdgeOf, isPromise, dataKeyReader, diagramNodeOf, portsOf, portSitesOf, outlinePath, samePoints, layoutWritesRoute, plannerPlan, planOf, layered, forceRelaxation, center, layoutOwnsPort, chain, force, tree, portOf, labelCenter, labelSpotAt, isPinned, layoutOwnsRoute } from './chunk-IM6DHWZO.js';
-import { bodyPredicate, dragPanContribution, WeaselProvider, useScene, useSelection, useLatest, SceneCanvas, useDepSource, fitViewToBounds, registerNodeShape, reconcileSpecs, nodeGates, effectivePose, pagesBounds, pagesLayer, AUTO_POSE_DESCRIPTOR, usePoseRun, drawnBoundsScene, pointAlongPath, drawnAABBOf, RECT_POSE_DESCRIPTOR, commandFill, commandStroke, translatePoseViaDescriptor, composeAffordanceLayer, createResizeAction, createDeleteAction, polylineFromPoints, SNAP_ROLES, ActionDisabledReason, paintsLayer, viewToTransform, ellipsePath, snapMods, documentDepOf, carriedDescendants, sceneCarrySource, derivedDepOf, PathBuilder, createInsertOp, createSetDataOp, documentPose } from '@weasel-js/core';
+import { createAvoidRouter, placeLabels, edgeHops, DEFAULT_HOP_SIZE, HOPS_DOC_KEY, simplifyStops } from './chunk-Y72FK3Y7.js';
+import { edgeRouter, registerMarkShape, withDiagramRegistry, diagramLabelOf, editEdgeLabelBinding, editEdgeLabelAction, diagramGroupOf, diagramContainerOf, headerBox, labelFollowsLayout, buildGraph, LABEL_DRAG_AFFORDANCE_KIND, EDIT_EDGE_LABEL_ACTION_ID, labelDragLayer, laneOutlineOf, routerOf, labelScratchOf, ROUTERS, avoid, LABEL_PLACEMENT, editableLabels, titleIdOf, orthogonal, diagramAnchorOf, MIN_LANE_SIZE, endAims, resolveEnd, EDGE_DERIVE_PATH, titlePose, regionSpecs, DIAGRAM_THEME_KEY, diagramThemeOf, boxCenter, themeLabelFamily, roleEdgeStyle, roleStyle, themeLabelFont, firstLanes, DEFAULT_LANE_SIZE, bodyBox } from './chunk-QU4QZUC6.js';
+import { diagramEdgeOf, isPromise, dataKeyReader, diagramNodeOf, portsOf, portSitesOf, outlinePath, samePoints, layoutWritesRoute, plannerPlan, planOf, layered, forceRelaxation, center, layoutOwnsPort, chain, force, tree, portOf, labelCenter, labelSpotAt, isPinned, layoutOwnsRoute } from './chunk-L4H444QI.js';
+import { bodyPredicate, dragPanContribution, WeaselProvider, useScene, useSelection, useLatest, SceneCanvas, useDepSource, registerNodeShape, reconcileSpecs, nodeGates, effectivePose, pagesBounds, pagesLayer, AUTO_POSE_DESCRIPTOR, usePoseRun, drawnBoundsScene, pointAlongPath, drawnAABBOf, RECT_POSE_DESCRIPTOR, resolveFill, resolveStroke, commandFill, commandStroke, fitViewToBounds, translatePoseViaDescriptor, composeAffordanceLayer, createResizeAction, createDeleteAction, polylineFromPoints, SNAP_ROLES, ActionDisabledReason, paintsLayer, viewToTransform, ellipsePath, snapMods, documentDepOf, carriedDescendants, sceneCarrySource, derivedDepOf, PathBuilder, createInsertOp, createSetDataOp, documentPose } from '@weasel-js/core';
 import { AUTO_POSE_DESCRIPTOR as AUTO_POSE_DESCRIPTOR$1, rotatePoint } from '@weasel-js/core/math';
-import { placeRect, pathContainsPoint } from '@weasel-js/geom';
+import { clampRectWithin, placeRect, pathContainsPoint } from '@weasel-js/geom';
 import { useLatest as useLatest$1, adoptCssOnce } from '@weasel-js/react';
 import { forwardRef, useMemo, useEffect, useState, useRef, useCallback, useImperativeHandle, useLayoutEffect } from 'react';
 import '@weasel-js/animator';
@@ -181,7 +181,8 @@ var DEFAULT_ROUTER = "straight";
 function connectBinding(actionId = CONNECT_ACTION_ID) {
   return {
     spec: { kind: "drag", target: `affordance:${PORT_AFFORDANCE_KIND}` },
-    actionId
+    actionId,
+    opts: { id: `${actionId}.drag` }
   };
 }
 var GRAB_PORT_ACTION_ID = "diagram.grabPort";
@@ -197,8 +198,8 @@ function grabPortAction(id = GRAB_PORT_ACTION_ID) {
 }
 function grabPortBindings(actionId = GRAB_PORT_ACTION_ID, kind = PORT_AFFORDANCE_KIND) {
   return [
-    { spec: { kind: "pointerDown", target: `affordance:${kind}` }, actionId },
-    { spec: { kind: "click", target: `affordance:${kind}` }, actionId }
+    { spec: { kind: "pointerDown", target: `affordance:${kind}` }, actionId, opts: { id: `${actionId}.pointerDown` } },
+    { spec: { kind: "click", target: `affordance:${kind}` }, actionId, opts: { id: `${actionId}.click` } }
   ];
 }
 function commitEdgeToScene(edge, ctx, opts = {}) {
@@ -211,7 +212,7 @@ function commitEdgeToScene(edge, ctx, opts = {}) {
   };
   const source = scene.get(edge.from.nodeId);
   scene.add({
-    kind: "leaf",
+    kind: "mark",
     layer: source?.layer ?? scene.layers[0].id,
     pose: { x: 0, y: 0, width: 0, height: 0 },
     data: { diagram: trait, stroke: opts.stroke ?? DEFAULT_EDGE_STROKE },
@@ -314,7 +315,7 @@ function diagramDropParentAt(scene, point, role) {
   const walk = (ids) => {
     for (const id of ids) {
       const node = scene.get(id);
-      if (node === void 0 || node.kind !== "container") continue;
+      if (node === void 0) continue;
       const trait = diagramContainerOf(node);
       const b = bodyBox(node.pose, trait?.header);
       const inside2 = point.x >= b.x && point.x < b.x + b.width && point.y >= b.y && point.y < b.y + b.height;
@@ -772,8 +773,8 @@ function diagramContainers(opts) {
         grabPortAction(GRAB_LANE_ACTION_ID)
       ],
       bindings: [
-        { spec: { kind: "drag", target }, actionId: LANE_RESIZE_ACTION_ID },
-        { spec: { kind: "click", target }, actionId: ADD_LANE_ACTION_ID },
+        { spec: { kind: "drag", target }, actionId: LANE_RESIZE_ACTION_ID, opts: { id: "weasel-diagram-containers.drag" } },
+        { spec: { kind: "click", target }, actionId: ADD_LANE_ACTION_ID, opts: { id: "weasel-diagram-containers.click" } },
         ...grabPortBindings(GRAB_LANE_ACTION_ID, LANE_AFFORDANCE_KIND).filter((b) => b.spec.kind !== "click")
       ]
     }
@@ -798,7 +799,7 @@ function editContainerTitleAction(commit) {
     label: "Edit container title",
     group: "diagram",
     requires: ["scene", "nodeAtPoint"],
-    eligible: { mode: { in: ["normal", "isolation"] } },
+    eligible: { mode: "normal" },
     invoker: {
       timing: "immediate",
       run(deps, params) {
@@ -811,7 +812,11 @@ function editContainerTitleAction(commit) {
 }
 var onBody = bodyPredicate((target) => target === "selected-body" || target === "unselected-body");
 function editContainerTitleBinding() {
-  return { spec: { kind: "doubleClick", target: { kindOf: onBody } }, actionId: EDIT_CONTAINER_TITLE_ACTION_ID };
+  return {
+    spec: { kind: "doubleClick", target: { kindOf: onBody } },
+    actionId: EDIT_CONTAINER_TITLE_ACTION_ID,
+    opts: { id: `${EDIT_CONTAINER_TITLE_ACTION_ID}.doubleClick` }
+  };
 }
 
 // src/hops/hopsAction.ts
@@ -886,7 +891,7 @@ function createLabelDragAction(opts = {}) {
     label: "Move label",
     group: "diagram",
     requires: ["scene"],
-    eligible: { mode: { in: ["normal", "isolation"] } },
+    eligible: { mode: "normal" },
     invoker: {
       timing: "ongoing",
       start(ctx) {
@@ -1573,8 +1578,8 @@ function diagramWaypoints(opts) {
         grabPortAction(GRAB_WAYPOINT_ACTION_ID)
       ],
       bindings: [
-        { spec: { kind: "drag", target }, actionId },
-        { spec: { kind: "doubleClick", target }, actionId: REMOVE_WAYPOINT_ACTION_ID },
+        { spec: { kind: "drag", target }, actionId, opts: { id: "weasel-diagram-waypoints.drag" } },
+        { spec: { kind: "doubleClick", target }, actionId: REMOVE_WAYPOINT_ACTION_ID, opts: { id: "weasel-diagram-waypoints.doubleClick" } },
         ...grabPortBindings(GRAB_WAYPOINT_ACTION_ID, WAYPOINT_AFFORDANCE_KIND)
       ]
     }
@@ -1616,10 +1621,10 @@ function diagramLabelDrag(opts) {
         selectLabelEdgeAction()
       ],
       bindings: [
-        { spec: { kind: "drag", target }, actionId },
-        { spec: { kind: "pointerDown", target }, actionId: GRAB_LABEL_ACTION_ID },
-        { spec: { kind: "click", target, mods: ANY_MODIFIERS }, actionId: SELECT_LABEL_EDGE_ACTION_ID },
-        { spec: { kind: "doubleClick", target }, actionId: EDIT_EDGE_LABEL_ACTION_ID }
+        { spec: { kind: "drag", target }, actionId, opts: { id: "weasel-diagram-label-drag.drag" } },
+        { spec: { kind: "pointerDown", target }, actionId: GRAB_LABEL_ACTION_ID, opts: { id: "weasel-diagram-label-drag.pointerDown" } },
+        { spec: { kind: "click", target, mods: ANY_MODIFIERS }, actionId: SELECT_LABEL_EDGE_ACTION_ID, opts: { id: "weasel-diagram-label-drag.click" } },
+        { spec: { kind: "doubleClick", target }, actionId: EDIT_EDGE_LABEL_ACTION_ID, opts: { id: "weasel-diagram-label-drag.doubleClick" } }
       ]
     }
   };
@@ -1957,7 +1962,7 @@ function createReconnectAction(opts) {
   };
 }
 function reconnectBinding(actionId = RECONNECT_ACTION_ID) {
-  return { spec: { kind: "drag", target: `affordance:${EDGE_END_AFFORDANCE_KIND}` }, actionId };
+  return { spec: { kind: "drag", target: `affordance:${EDGE_END_AFFORDANCE_KIND}` }, actionId, opts: { id: `${actionId}.drag` } };
 }
 function diagramEdgeEnds(opts) {
   const actionId = opts.id ?? RECONNECT_ACTION_ID;
@@ -2150,7 +2155,7 @@ function createReorderAction(opts) {
 }
 var ANYWHERE = bodyPredicate(() => true);
 function reorderBinding(actionId = REORDER_ACTION_ID, on = ANYWHERE) {
-  return { spec: { kind: "drag", target: { kindOf: on } }, actionId };
+  return { spec: { kind: "drag", target: { kindOf: on } }, actionId, opts: { id: on === ANYWHERE ? `${actionId}.drag` : `${actionId}.bodyDrag` } };
 }
 function reorderContribution(opts) {
   const actionId = opts.id ?? REORDER_ACTION_ID;
@@ -2179,16 +2184,10 @@ function screenRectOf(rect, view) {
   };
 }
 var CENTER = "center";
-function place(el, overlay, anchor, width, height) {
+function place(el, overlay, anchor, view) {
   const size = { width: el.offsetWidth, height: el.offsetHeight };
   const placement = overlay.placement ?? CENTER;
-  const at = placement === CENTER ? { x: anchor.x + (anchor.width - size.width) / 2, y: anchor.y + (anchor.height - size.height) / 2 } : placeRect({
-    anchor,
-    overlay: size,
-    boundary: { x: 0, y: 0, width, height },
-    placement,
-    offset: overlay.offset ?? 0
-  }).rect;
+  const at = placement === CENTER ? { x: anchor.x + (anchor.width - size.width) / 2, y: anchor.y + (anchor.height - size.height) / 2 } : clampRectWithin(placeRect({ anchor, overlay: size, boundary: view, placement, offset: overlay.offset ?? 0 }).rect, view);
   el.style.transform = `translate(${Math.round(at.x)}px, ${Math.round(at.y)}px)`;
 }
 function useOverlayPlacement(canvasRef, scene, overlays) {
@@ -2207,7 +2206,12 @@ function useOverlayPlacement(canvasRef, scene, overlays) {
       if (world === null) continue;
       const rect = screenRectOf(world, view);
       const anchor = { ...rect, x: rect.x + surface.offsetLeft, y: rect.y + surface.offsetTop };
-      place(el, overlay, anchor, surface.offsetWidth, surface.offsetHeight);
+      place(el, overlay, anchor, {
+        x: surface.offsetLeft,
+        y: surface.offsetTop,
+        width: surface.offsetWidth,
+        height: surface.offsetHeight
+      });
     }
   }, [canvasRef, scene, current]);
   useLayoutEffect(() => {
@@ -2309,10 +2313,10 @@ function groupReorderSlots(deps, at) {
   })));
 }
 var STEPS = [
-  { key: "ArrowUp", axis: "y", step: -1 },
-  { key: "ArrowDown", axis: "y", step: 1 },
-  { key: "ArrowLeft", axis: "x", step: -1 },
-  { key: "ArrowRight", axis: "x", step: 1 }
+  { key: "ArrowUp", role: "up", axis: "y", step: -1 },
+  { key: "ArrowDown", role: "down", axis: "y", step: 1 },
+  { key: "ArrowLeft", role: "left", axis: "x", step: -1 },
+  { key: "ArrowRight", role: "right", axis: "x", step: 1 }
 ];
 function createStepReorderAction(report) {
   const selectedTarget = (deps) => targetAt(deps, deps?.selection?.get()[0]);
@@ -2320,9 +2324,9 @@ function createStepReorderAction(report) {
     id: STEP_REORDER_ACTION_ID,
     label: "Move along",
     group: "diagram",
-    defaultBinding: STEPS.map(({ key, axis, step }) => ({
+    defaultBinding: STEPS.map(({ key, role, axis, step }) => ({
       spec: { kind: "key", key, mods: { alt: true } },
-      opts: { params: { axis, step } }
+      opts: { id: `${STEP_REORDER_ACTION_ID}.${role}`, params: { axis, step } }
     })),
     requires: ["scene", "selection"],
     invoker: {
@@ -2786,14 +2790,14 @@ function pathHold(scene) {
   const held = /* @__PURE__ */ new Map();
   const release = (id, entry) => {
     held.delete(id);
-    if (scene.overrides.get(id) === entry) scene.overrides.clear(id);
+    scene.overrides.clear(id, entry);
   };
   return {
     show(paths) {
       for (const [id, entry] of held) if (!paths.has(id)) release(id, entry);
       for (const [id, path] of paths) {
         const entry = held.get(id);
-        if (entry !== void 0 && scene.overrides.get(id) === entry) {
+        if (entry !== void 0 && scene.overrides.has(id, entry)) {
           entry.path = path;
           continue;
         }
@@ -2967,13 +2971,13 @@ function diagramShape(opts = {}) {
   return {
     id: opts.id ?? "diagram:outline",
     matches: (node) => outlineOf(node) !== void 0,
-    paint: (node, pose) => {
+    paint: (node, pose, ctx) => {
       const outline = outlineOf(node);
       if (outline === void 0) return [];
       const d = node.data;
       const box = geometry.getBounds(pose);
-      const declaredFill = d.fill === void 0 ? opts.defaultFill : d.fill;
-      const declaredStroke = d.stroke === void 0 ? opts.defaultStroke : d.stroke;
+      const declaredFill = resolveFill(d.fill, ctx?.inherited?.fill);
+      const declaredStroke = resolveStroke(d.stroke, ctx?.inherited?.stroke);
       const fill = declaredFill && commandFill(declaredFill, box);
       const stroke = declaredStroke && commandStroke(declaredStroke, box);
       const header = headerBox(box, diagramContainerOf(node)?.header);
@@ -2999,6 +3003,10 @@ function dividerPath(box, header) {
 function registerDiagramShape(opts = {}) {
   return registerNodeShape(diagramShape(opts), { priority: "high" });
 }
+
+// src/bodyNode.ts
+var isDiagramBody = (node) => diagramContainerOf(node) === null && diagramGroupOf(node) === null && dataKeyReader(node) !== null;
+var isBodyOrRegion = (node) => diagramContainerOf(node) !== null || isDiagramBody(node);
 function useMirroredSelection(selection, selected, onSelect) {
   const want = selected ?? null;
   const pushed = useRef(void 0);
@@ -3079,10 +3087,11 @@ function readScene(scene) {
   const nodes = /* @__PURE__ */ new Map();
   const routes = /* @__PURE__ */ new Map();
   for (const n of scene.renderOrderNodes()) {
-    if (n.kind === "container") {
-      if (diagramContainerOf(n) === null) nodes.set(n.id, { x: n.pose.x, y: n.pose.y, parent: n.parent });
+    if (isDiagramBody(n)) {
+      nodes.set(n.id, { x: n.pose.x, y: n.pose.y, parent: n.parent });
       continue;
     }
+    if (diagramContainerOf(n) !== null) continue;
     const edge = diagramEdgeOf(n);
     if (edge !== null) routes.set(n.id, routeOf2(edge));
   }
@@ -3095,7 +3104,7 @@ function diagramLayoutOf(specs) {
   for (const s of specs) {
     const id = s.id;
     if (id === void 0) continue;
-    if (s.kind === "container") {
+    if (isBodyOrRegion(s)) {
       const region = diagramContainerOf(s);
       const pinned = isPinned({ id, kind: s.kind, data: s.data });
       if (region !== null) {
@@ -3103,7 +3112,7 @@ function diagramLayoutOf(specs) {
           const { x, y, width, height } = s.pose;
           containers.push({ kind: "box", id, box: { x, y, width, height } });
         }
-      } else if (diagramGroupOf(s) === null && !pinned) moves.push({ id, x: s.pose.x, y: s.pose.y });
+      } else if (!pinned) moves.push({ id, x: s.pose.x, y: s.pose.y });
       continue;
     }
     const edge = diagramEdgeOf(s);
@@ -3175,7 +3184,7 @@ function laneResizeReports(scene, resize) {
     const { x, y, width, height } = pose;
     if (region !== null) {
       if (region.role === "container" && region.fitted !== true) boxes.push({ kind: "box", id, box: { x, y, width, height } });
-    } else if (node.kind === "container" && dataKeyReader(node) !== null) moves.push({ id, x, y });
+    } else if (isDiagramBody(node)) moves.push({ id, x, y });
   }
   return { lanes: { kind: "lanes", pool: pool.id, lanes }, moves, boxes };
 }
@@ -3357,12 +3366,94 @@ function usePagesView(pages) {
     };
   }, [placed, fill]);
 }
+function diagramBounds(specs, extra) {
+  const boxes = specs.filter((s) => isBodyOrRegion(s) || diagramGroupOf(s) !== null).map((s) => s.pose);
+  if (extra !== void 0) boxes.push(extra);
+  if (boxes.length === 0) return null;
+  const x = Math.min(...boxes.map((b) => b.x));
+  const y = Math.min(...boxes.map((b) => b.y));
+  return {
+    x,
+    y,
+    width: Math.max(...boxes.map((b) => b.x + b.width)) - x,
+    height: Math.max(...boxes.map((b) => b.y + b.height)) - y
+  };
+}
+function fitDiagram(specs, size, fit = {}, extra) {
+  const bounds = diagramBounds(specs, extra);
+  if (bounds === null) return void 0;
+  return fitViewToBounds(bounds, size, { x: 0, y: 0, scale: { x: 1, y: 1 } }, {
+    maxScale: fit.maxScale ?? 1,
+    ...fit.minScale !== void 0 ? { minScale: fit.minScale } : {},
+    ...fit.anchor !== void 0 ? { anchor: fit.anchor } : {},
+    ...fit.padding !== void 0 ? { padding: fit.padding } : {}
+  });
+}
+var IDENTITY = { x: 0, y: 0, scale: { x: 1, y: 1 } };
+var sameView = (a, b) => a.x === b.x && a.y === b.y && a.scale.x === b.scale.x && a.scale.y === b.scale.y;
+function inView(inner, view, size) {
+  const x1 = view.x + size.width / view.scale.x;
+  const y1 = view.y + size.height / view.scale.y;
+  return inner.x >= view.x && inner.y >= view.y && inner.x + inner.width <= x1 && inner.y + inner.height <= y1;
+}
+function useDiagramFit(args) {
+  const { canvasRef, specs, controlled, size, fit, extra } = args;
+  const unsized = size.width === 0 || size.height === 0;
+  const defaultView = useMemo(
+    () => controlled || unsized ? void 0 : fitDiagram(specs, size, fit, extra),
+    // A later `specs` is the overflow check's to answer.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [controlled, unsized, size.width, size.height, fit.minScale, fit.maxScale, fit.anchor, fit.padding, extra]
+  );
+  const [later, setLater] = useState(null);
+  const target = later !== null && later.over === defaultView ? later.view : defaultView;
+  const fitted = useRef(target);
+  const opts = useLatest({ controlled, unsized, size, fit, extra, defaultView, current: args.current });
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const was = fitted.current;
+    if (canvas === null || target === void 0 || was === target) return;
+    if (!sameView(canvas.getView(), was ?? IDENTITY)) return;
+    fitted.current = target;
+    canvas.setView(target);
+  }, [canvasRef, target]);
+  const first = useRef(true);
+  useEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    const { controlled: c, unsized: u, size: box, fit: f, extra: more, defaultView: over } = opts.current;
+    const canvas = canvasRef.current;
+    const bounds = diagramBounds(specs, more);
+    if (c || u || canvas === null || bounds === null || inView(bounds, canvas.getView(), box)) return;
+    setLater({ view: fitDiagram(specs, box, f, more), over });
+  }, [specs, canvasRef, opts]);
+  return useMemo(() => {
+    const now = () => {
+      const { size: box, fit: f, extra: more, current } = opts.current;
+      return fitDiagram(current(), box, f, more);
+    };
+    return {
+      defaultView,
+      settle: () => {
+        if (opts.current.controlled) return;
+        setLater({ view: now(), over: opts.current.defaultView });
+      },
+      fitNow: () => {
+        const canvas = canvasRef.current;
+        const view = now();
+        if (canvas === null || view === void 0) return;
+        fitted.current = view;
+        canvas.setView(view);
+      }
+    };
+  }, [defaultView, canvasRef, opts]);
+}
 var VIEW_RULE = ':where([data-wzl-diagram]) { position: relative; width: fit-content; } :where([data-wzl-diagram~="fill-x"]) { width: 100%; } :where([data-wzl-diagram~="fill-y"]) { height: 100%; } :where([data-wzl-diagram]) > canvas { display: block; } :where([data-wzl-diagram-overlay]) { position: absolute; left: 0; top: 0; } :where([data-wzl-diagram-overlay][hidden]) { display: none; }';
 var adoptViewRule = (el) => {
   if (el !== null) adoptCssOnce(el, VIEW_RULE);
 };
-var IDENTITY = { x: 0, y: 0, scale: { x: 1, y: 1 } };
-var sameView = (a, b) => a.x === b.x && a.y === b.y && a.scale.x === b.scale.x && a.scale.y === b.scale.y;
 var DiagramView = forwardRef(function DiagramView2(props, ref) {
   return /* @__PURE__ */ jsx(WeaselProvider, { children: /* @__PURE__ */ jsx(Inner, { ...props, apiRef: ref }) });
 });
@@ -3433,24 +3524,22 @@ function Inner({
   const controlled = view !== void 0;
   const fills = width === void 0 || height === void 0;
   const [measured, setMeasured] = useState(null);
-  const boxWidth = width ?? measured?.width ?? 0;
-  const boxHeight = height ?? measured?.height ?? 0;
-  const unsized = boxWidth === 0 || boxHeight === 0;
-  const fitOpts = { minScale, maxScale, anchor, padding: fitPadding };
   const { layers, box: pagesBox } = usePagesView(pages);
-  const defaultView = useMemo(
-    () => controlled || unsized ? void 0 : fitDiagram(specs, { width: boxWidth, height: boxHeight }, fitOpts, pagesBox),
-    // A later `specs` keeps the view it has.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [controlled, unsized, boxWidth, boxHeight, minScale, maxScale, anchor, fitPadding, pagesBox]
-  );
-  const [settledFit, setSettledFit] = useState(null);
-  const fit = settledFit !== null && settledFit.over === defaultView ? settledFit.view : defaultView;
+  const canvasRef = useRef(null);
+  const current = useCallback(() => Array.from(source(), ({ node, pose }) => ({ ...node, pose })), [source]);
+  const fitting = useDiagramFit({
+    canvasRef,
+    specs,
+    current,
+    controlled,
+    size: { width: width ?? measured?.width ?? 0, height: height ?? measured?.height ?? 0 },
+    fit: { minScale, maxScale, anchor, padding: fitPadding },
+    extra: pagesBox
+  });
+  const { defaultView } = fitting;
   const settled = useLatest((moved) => {
     liveOpts?.onSettle?.(moved);
-    if (controlled || moved === 0) return;
-    const boxes = Array.from(source(), ({ node, pose }) => ({ ...node, pose }));
-    setSettledFit({ view: fitDiagram(boxes, { width: boxWidth, height: boxHeight }, fitOpts, pagesBox), over: defaultView });
+    if (moved !== 0) fitting.settle();
   });
   const live = useLiveLayout({
     ...liveOpts,
@@ -3462,8 +3551,7 @@ function Inner({
   useEffect(() => {
     if (run !== null) live.restart();
   }, [run, live]);
-  const canvasRef = useRef(null);
-  useDiagramApi(apiRef, canvasRef, scene, live, setRun);
+  useDiagramApi(apiRef, canvasRef, scene, live, setRun, fitting.fitNow);
   const selectedIds = useCallback(() => selection.get(), [selection]);
   const editing = useDiagramEditing({
     scene,
@@ -3496,7 +3584,6 @@ function Inner({
   const edits = moves || onConnect !== void 0 || onReorder !== void 0 || resizes || edgesPick;
   const features = useMemo(() => ["view", "pick", ...moves ? ["move"] : [], ...resizes ? ["resize"] : []], [moves, resizes]);
   const selectTool = useMemo(() => ({ resize: { resizable: diagramResizable(scene) } }), [scene]);
-  useRefit(canvasRef, fit);
   const overlayRef = useOverlayPlacement(canvasRef, scene, overlays);
   const fillsOn = [width === void 0 ? "fill-x" : "", height === void 0 ? "fill-y" : ""].join(" ").trim();
   return /* @__PURE__ */ jsxs("div", { ref: adoptViewRule, "data-wzl-diagram": fillsOn, className, children: [
@@ -3536,9 +3623,10 @@ function DropRules({ scene }) {
   useDepSource("canDropInto", () => canDropInto);
   return null;
 }
-function useDiagramApi(apiRef, canvasRef, scene, live, setRun) {
+function useDiagramApi(apiRef, canvasRef, scene, live, setRun, fitNow) {
   useImperativeHandle(apiRef, () => ({
     layout: (algorithm = "force") => setRun({ algorithm }),
+    fit: fitNow,
     live,
     worldAt: (clientX, clientY) => {
       const [x, y] = canvasRef.current?.clientToWorld(clientX, clientY) ?? [clientX, clientY];
@@ -3562,39 +3650,9 @@ function useDiagramApi(apiRef, canvasRef, scene, live, setRun) {
     },
     subscribeFrame: (fn) => canvasRef.current?.subscribeFrame(() => fn()) ?? (() => {
     })
-  }), [canvasRef, live, scene, setRun]);
-}
-function useRefit(canvasRef, fit) {
-  const fitted = useRef(fit);
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    const was = fitted.current;
-    if (canvas === null || fit === void 0 || was === fit) return;
-    if (!sameView(canvas.getView(), was ?? IDENTITY)) return;
-    fitted.current = fit;
-    canvas.setView(fit);
-  }, [canvasRef, fit]);
-}
-function fitDiagram(specs, size, fit = {}, extra) {
-  const boxes = specs.filter((s) => s.kind === "container" || diagramGroupOf(s) !== null).map((s) => s.pose);
-  if (extra !== void 0) boxes.push({ ...extra });
-  if (boxes.length === 0) return void 0;
-  const x = Math.min(...boxes.map((b) => b.x));
-  const y = Math.min(...boxes.map((b) => b.y));
-  const bounds = {
-    x,
-    y,
-    width: Math.max(...boxes.map((b) => b.x + b.width)) - x,
-    height: Math.max(...boxes.map((b) => b.y + b.height)) - y
-  };
-  return fitViewToBounds(bounds, size, { x: 0, y: 0, scale: { x: 1, y: 1 } }, {
-    maxScale: fit.maxScale ?? 1,
-    ...fit.minScale !== void 0 ? { minScale: fit.minScale } : {},
-    ...fit.anchor !== void 0 ? { anchor: fit.anchor } : {},
-    ...fit.padding !== void 0 ? { padding: fit.padding } : {}
-  });
+  }), [canvasRef, live, scene, setRun, fitNow]);
 }
 
-export { ADD_LANE_ACTION_ID, ANYWHERE, CONNECT_ACTION_ID, CONTAINER_STENCILS, DEFAULT_EDGE_STROKE, DiagramView, EASED_LAYOUTS, EDGE_END_AFFORDANCE_KIND, EDGE_END_LAYER_ID, EDIT_CONTAINER_TITLE_ACTION_ID, GRAB_EDGE_END_ACTION_ID, GRAB_LABEL_ACTION_ID, GRAB_PORT_ACTION_ID, GRAB_WAYPOINT_ACTION_ID, LANE_AFFORDANCE_KIND, LANE_LAYER_ID, LANE_RESIZE_ACTION_ID, LAYOUTS, LAYOUT_ACTION_ID, MOVE_LABEL_ACTION_ID, PORT_AFFORDANCE_KIND, PORT_LAYER_ID, RECONNECT_ACTION_ID, RELEASE_MEMBERS_ACTION_ID, REMOVE_WAYPOINT_ACTION_ID, REORDER_ACTION_ID, RESET_LABEL_ACTION_ID, RESET_ROUTE_ACTION_ID, ROUTER_LABELS, ROUTE_EDIT_ACTION_ID, SELECT_LABEL_EDGE_ACTION_ID, SET_HOPS_ACTION_ID, SET_ROUTER_ACTION_IDS, STEP_REORDER_ACTION_ID, WAYPOINT_AFFORDANCE_KIND, WAYPOINT_HIT_PX, WAYPOINT_LAYER_ID, addLane, applyLayout, avoidSceneInput, bodyAt, commitEdgeToScene, commitLabelToScene, commitLaneResizeToScene, commitReconnectToScene, commitRouteToScene, commitRouterToScene, connectBinding, containerBuild, createAddLaneAction, createConnectAction, createDiagramContribution, createEdgeEndAffordance, createLabelDragAction, createLaneAffordance, createLaneResizeAction, createLayoutAction, createPortAffordance, createReconnectAction, createReleaseMembersAction, createRemoveWaypointAction, createReorderAction, createResetLabelAction, createResetRouteAction, createRouteEditAction, createSetHopsAction, createSetRouterAction, createSpecHops, createSpecLabelPlacer, createSpecRouter, createStepReorderAction, createWaypointAffordance, defaultCanConnect, diagramCanDropInto, diagramContainers, diagramDropParentAt, diagramEdgeEnds, diagramLabelDrag, diagramLayoutOf, diagramPorts, diagramResizable, diagramShape, diagramWaypoints, dragSegment, dragVertex, easedProducer, edgeEndLayer, edgeEndScratchOf, edgePolylines, editContainerTitleAction, editContainerTitleBinding, forceProducer, grabPortAction, grabPortBindings, groupReorderContribution, groupReorderSlots, headerIdOf, hopDataOps, inOrUnder, insertWaypoint, isBodyEnd, laneLayer, laneResizeFrame, laneScratchOf, lanesOf, layoutPoses, movedLabelData, pinSegment, poolAxisOf, poolsOf, portLayer, portScratchOf, reconnectBinding, regionHeaderAt, registerDiagramShape, releaseMembers, removeSegment, removeWaypoint, reorderBinding, reorderContribution, routeHandles, routeStateOf, routeWrites, routedData, routerActions, routesOf, sceneEdges, sceneParticipants, segmentAxis, sequenceSlots, themeWrites, unpinSegment, useLiveLayout, useMirroredSelection, waypointLayer, waypointScratchOf, withHopsData, withRouter };
-//# sourceMappingURL=chunk-CI3I3I6T.js.map
-//# sourceMappingURL=chunk-CI3I3I6T.js.map
+export { ADD_LANE_ACTION_ID, ANYWHERE, CONNECT_ACTION_ID, CONTAINER_STENCILS, DEFAULT_EDGE_STROKE, DiagramView, EASED_LAYOUTS, EDGE_END_AFFORDANCE_KIND, EDGE_END_LAYER_ID, EDIT_CONTAINER_TITLE_ACTION_ID, GRAB_EDGE_END_ACTION_ID, GRAB_LABEL_ACTION_ID, GRAB_PORT_ACTION_ID, GRAB_WAYPOINT_ACTION_ID, LANE_AFFORDANCE_KIND, LANE_LAYER_ID, LANE_RESIZE_ACTION_ID, LAYOUTS, LAYOUT_ACTION_ID, MOVE_LABEL_ACTION_ID, PORT_AFFORDANCE_KIND, PORT_LAYER_ID, RECONNECT_ACTION_ID, RELEASE_MEMBERS_ACTION_ID, REMOVE_WAYPOINT_ACTION_ID, REORDER_ACTION_ID, RESET_LABEL_ACTION_ID, RESET_ROUTE_ACTION_ID, ROUTER_LABELS, ROUTE_EDIT_ACTION_ID, SELECT_LABEL_EDGE_ACTION_ID, SET_HOPS_ACTION_ID, SET_ROUTER_ACTION_IDS, STEP_REORDER_ACTION_ID, WAYPOINT_AFFORDANCE_KIND, WAYPOINT_HIT_PX, WAYPOINT_LAYER_ID, addLane, applyLayout, avoidSceneInput, bodyAt, commitEdgeToScene, commitLabelToScene, commitLaneResizeToScene, commitReconnectToScene, commitRouteToScene, commitRouterToScene, connectBinding, containerBuild, createAddLaneAction, createConnectAction, createDiagramContribution, createEdgeEndAffordance, createLabelDragAction, createLaneAffordance, createLaneResizeAction, createLayoutAction, createPortAffordance, createReconnectAction, createReleaseMembersAction, createRemoveWaypointAction, createReorderAction, createResetLabelAction, createResetRouteAction, createRouteEditAction, createSetHopsAction, createSetRouterAction, createSpecHops, createSpecLabelPlacer, createSpecRouter, createStepReorderAction, createWaypointAffordance, defaultCanConnect, diagramCanDropInto, diagramContainers, diagramDropParentAt, diagramEdgeEnds, diagramLabelDrag, diagramLayoutOf, diagramPorts, diagramResizable, diagramShape, diagramWaypoints, dragSegment, dragVertex, easedProducer, edgeEndLayer, edgeEndScratchOf, edgePolylines, editContainerTitleAction, editContainerTitleBinding, forceProducer, grabPortAction, grabPortBindings, groupReorderContribution, groupReorderSlots, headerIdOf, hopDataOps, inOrUnder, insertWaypoint, isBodyEnd, isBodyOrRegion, isDiagramBody, laneLayer, laneResizeFrame, laneScratchOf, lanesOf, layoutPoses, movedLabelData, pinSegment, poolAxisOf, poolsOf, portLayer, portScratchOf, reconnectBinding, regionHeaderAt, registerDiagramShape, releaseMembers, removeSegment, removeWaypoint, reorderBinding, reorderContribution, routeHandles, routeStateOf, routeWrites, routedData, routerActions, routesOf, sceneEdges, sceneParticipants, segmentAxis, sequenceSlots, themeWrites, unpinSegment, useLiveLayout, useMirroredSelection, waypointLayer, waypointScratchOf, withHopsData, withRouter };
+//# sourceMappingURL=chunk-ESFIS7BB.js.map
+//# sourceMappingURL=chunk-ESFIS7BB.js.map