@weasel-js/diagram 1.13.0 → 1.14.0

package/dist/{chunk-QU4QZUC6.js → chunk-ZWXM5F4I.js}

@@ -1,6 +1,7 @@
-import { grownBy, labelCenter, diagramEdgeOf, DIAGRAM_TRAIT_KEY, insetOf, subpathOf, portsOf, portSitesOf, routeHolds, sizeToBody, measureBody, layoutBody, layoutOwnsRoute, diagramNodeOf, expandGroupEdges, DEFAULT_GROUP_INSET, bodyTrait, authoredOver, chain, force, tree, layered, planOf, buildBody } from './chunk-L4H444QI.js';
-import { bodyPredicate, AUTO_POSE_DESCRIPTOR, translatePoseViaDescriptor, createTransformOp, polylineFromPoints, PathBuilder, documentDepOf, documentPose, composeAffordanceLayer, ActionDisabledReason, pageName, pageOfBounds, layoutPages, RECT_POSE_DESCRIPTOR, resolveFill, resolveStroke, commandFill, commandStroke, transformPath, registerNodeShape, pathFromD } from '@weasel-js/core';
-import { PathBuilder as PathBuilder$1, polylineFromPoints as polylineFromPoints$1, portCurvePoints } from '@weasel-js/geom';
+import { grownBy, labelCenter, diagramEdgeOf, DIAGRAM_TRAIT_KEY, insetOf, subpathOf, portsOf, portSitesOf, routeHolds, rowHeights, sizeToBody, measureBody, layoutBody, layoutOwnsRoute, diagramNodeOf, expandGroupEdges, DEFAULT_GROUP_INSET, bodyTrait, authoredOver, chain, force, tree, layered, planOf, buildBody } from './chunk-VB6HUKNG.js';
+import { bodyPredicate, AUTO_POSE_DESCRIPTOR, translatePoseViaDescriptor, createTransformOp, polylineFromPoints, PathBuilder, documentDepOf, documentPose, composeAffordanceLayer, ActionDisabledReason, pageName, pageOfBounds, layoutPages, RECT_POSE_DESCRIPTOR, resolveFill, resolveStroke, commandFill, commandStroke, transformPath, registerNodeShape, RIGID_POSE_COMPOSITION, localizeWorldPoses, pathFromD } from '@weasel-js/core';
+import { createSettledCache, createBvh } from '@weasel-js/geom/nd';
+import { worldCoords, PathBuilder as PathBuilder$1, polylineFromPoints as polylineFromPoints$1, portCurvePoints } from '@weasel-js/geom';
 import { AUTO_POSE_DESCRIPTOR as AUTO_POSE_DESCRIPTOR$1 } from '@weasel-js/core/math';
 
 function traitOf(node) {
@@ -102,6 +103,9 @@ function titlePose(bounds, header) {
   const cy = h.y + h.height / 2;
   return { x: cx - h.height / 2, y: cy - h.width / 2, width: h.height, height: h.width, rotation: -Math.PI / 2 };
 }
+function titleInFrame(size, header) {
+  return titlePose({ x: 0, y: 0, width: size.width, height: size.height }, header);
+}
 var center = (p) => ({ x: p.x + p.width / 2, y: p.y + p.height / 2 });
 function titlePoses(container, children, header) {
   const out = /* @__PURE__ */ new Map();
@@ -282,6 +286,34 @@ function labelDerivePose(opts = {}) {
 }
 var DIAGRAM_LABEL = "diagram:label";
 var LABEL_DERIVE_POSE = labelDerivePose();
+function keyedIndex(key, build) {
+  const cache = createSettledCache();
+  return () => {
+    const now = key();
+    return now === void 0 ? null : cache.read(now, build);
+  };
+}
+function boxIndex(boxes) {
+  const entries = [];
+  const always = [];
+  boxes.forEach((b, i) => {
+    if (b.every(Number.isFinite) && b[0] <= b[2] && b[1] <= b[3]) entries.push([i, b]);
+    else always.push(i);
+  });
+  return { tree: createBvh(2, entries), always };
+}
+function boxesMeeting(index, x0, y0, x1, y1) {
+  const q = [x0, y0, x1, y1];
+  if (q.some(Number.isNaN)) return null;
+  const e = 1e-9 * (1 + Math.max(0, ...q.filter(Number.isFinite).map(Math.abs)));
+  const found = [...index.always];
+  index.tree.queryBox([x0 - e, y0 - e, x1 + e, y1 + e], (i) => {
+    found.push(i);
+  });
+  return found.sort((a, b) => a - b);
+}
+
+// src/labelDragLayer.ts
 var LABEL_DRAG_LAYER_ID = "diagram-edge-labels";
 var LABEL_DRAG_AFFORDANCE_KIND = `layer:${LABEL_DRAG_LAYER_ID}`;
 function labelScratchOf(hit) {
@@ -309,31 +341,62 @@ function* draggableLabels(scene) {
   }
 }
 var holds = (b, at) => at.x >= b.x && at.x <= b.x + b.width && at.y >= b.y && at.y <= b.y + b.height;
+var INDEXES = /* @__PURE__ */ new WeakMap();
+function labelIndexOf(scene) {
+  let index = INDEXES.get(scene);
+  if (index === void 0) {
+    index = keyedIndex(
+      () => typeof scene.getVersion === "function" ? [scene.getVersion()] : void 0,
+      () => {
+        const labels = [...draggableLabels(scene)];
+        return {
+          labels,
+          boxes: boxIndex(labels.map(({ box: b }) => [
+            Math.min(b.x, b.x + b.width),
+            Math.min(b.y, b.y + b.height),
+            Math.max(b.x, b.x + b.width),
+            Math.max(b.y, b.y + b.height)
+          ]))
+        };
+      }
+    );
+    INDEXES.set(scene, index);
+  }
+  return index;
+}
+function labelsAt(scene, at) {
+  const built = labelIndexOf(scene)();
+  const near = built && boxesMeeting(built.boxes, at.x, at.y, at.x, at.y);
+  if (!built || !near) return draggableLabels(scene);
+  return near.map((i) => built.labels[i]);
+}
 function labelUnder(scene, at) {
   let found = null;
-  for (const { labelId, edgeId, box } of draggableLabels(scene)) {
+  for (const { labelId, edgeId, box } of labelsAt(scene, at)) {
     if (holds(box, at)) found = { targetId: labelId, labelId, edgeId };
   }
   return found;
 }
 function createLabelDragAffordance(scene, cursor) {
+  const regionsOf = (labels) => {
+    const out = [];
+    for (const { labelId, edgeId, box } of labels) {
+      out.push({
+        id: labelId,
+        targetId: null,
+        shape: { kind: "rect", x: box.x, y: box.y, width: box.width, height: box.height },
+        cursor,
+        strength: "exclusive",
+        claimedKinds: ["pointer"],
+        bind: () => ({ initialScratch: { targetId: labelId, labelId, edgeId } })
+      });
+    }
+    return out;
+  };
   return {
     id: LABEL_DRAG_LAYER_ID,
-    regions() {
-      const out = [];
-      for (const { labelId, edgeId, box } of draggableLabels(scene)) {
-        out.push({
-          id: labelId,
-          targetId: null,
-          shape: { kind: "rect", x: box.x, y: box.y, width: box.width, height: box.height },
-          cursor,
-          strength: "exclusive",
-          claimedKinds: ["pointer"],
-          bind: () => ({ initialScratch: { targetId: labelId, labelId, edgeId } })
-        });
-      }
-      return out;
-    }
+    regions: () => regionsOf(draggableLabels(scene)),
+    regionsAt: (_state, wx, wy) => regionsOf(labelsAt(scene, { x: wx, y: wy }))
   };
 }
 function labelDragLayer(scene, opts = {}) {
@@ -413,8 +476,10 @@ function editEdgeLabelAction(opts = {}) {
     invoker: {
       timing: "immediate",
       run(deps, params) {
-        const world = { x: Number(params?.worldX), y: Number(params?.worldY) };
-        const pressed = labelScratchOf(params?.affordance);
+        const p = params;
+        const world = p?.world;
+        if (!world) return;
+        const pressed = labelScratchOf(p.affordance);
         const edgeId = pressed?.edgeId ?? edgeUnder(deps, world);
         if (edgeId === null) return;
         const ctx = { world, modifiers: { alt: false, shift: false, meta: false, ctrl: false }, deps };
@@ -665,7 +730,7 @@ function offPageTagSpecs(edgeId, split, pages, look) {
 function stubTip(path, end) {
   const stub = subpathOf(path, end === "from" ? 0 : 1);
   if (stub === null || stub.kind !== "polygon" || stub.coords.length < 4) return null;
-  const c = stub.coords;
+  const c = worldCoords(stub);
   const n = c.length;
   const [tip, base] = end === "from" ? [{ x: c[n - 2], y: c[n - 1] }, { x: c[0], y: c[1] }] : [{ x: c[0], y: c[1] }, { x: c[n - 2], y: c[n - 1] }];
   const len = Math.hypot(tip.x - base.x, tip.y - base.y);
@@ -944,16 +1009,37 @@ function withDiagramRegistry(registry = {}) {
 }
 
 // src/bodyRelayout.ts
-function bodyLayoutOf(spec, trait) {
-  if (trait.margin !== void 0 || !spec.rows.every((r) => r.kind === "label" || r.kind === "field")) return {};
+function bodyLayoutOf(spec, trait, measure) {
+  if (trait.margin !== void 0 || !spec.rows.every((r) => r.kind === "label" || r.kind === "field" || r.kind === "divider")) return {};
+  const dividers = dividersOf(spec.rows);
   return {
-    body: { padding: spec.padding ?? 8, gap: spec.gap ?? 4, verticalAlign: spec.verticalAlign ?? "center", rows: spec.rows.length }
+    body: {
+      padding: spec.padding ?? 8,
+      gap: spec.gap ?? 4,
+      verticalAlign: spec.verticalAlign ?? "center",
+      rows: spec.rows.length,
+      heights: rowHeights(spec, measure),
+      ...dividers.length > 0 ? { dividers } : {}
+    }
   };
 }
+var dividerRow = (d) => d.inset === void 0 ? { kind: "divider" } : { kind: "divider", inset: d.inset };
+function dividersOf(rows) {
+  return rows.flatMap((r, index) => r.kind !== "divider" ? [] : [r.inset === void 0 ? { index } : { index, inset: r.inset }]);
+}
+function recordedRows(layout) {
+  if (layout.heights === void 0) return null;
+  const dividers = new Map((layout.dividers ?? []).map((d) => [d.index, d]));
+  return layout.heights.map((height, i) => {
+    const d = dividers.get(i);
+    return d === void 0 ? { kind: "slot", height } : dividerRow(d);
+  });
+}
 var rowStyle = (s) => ({
   ...s?.fontSize !== void 0 ? { fontSize: s.fontSize } : {},
   ...s?.fontFamily !== void 0 ? { fontFamily: s.fontFamily } : {},
-  ...(s?.fontWeight ?? 400) >= 700 ? { bold: true } : {}
+  ...(s?.fontWeight ?? 400) >= 700 ? { bold: true } : {},
+  ...s?.fontStyle === "italic" ? { italic: true } : {}
 });
 var same = (a, b) => a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
 function relayoutBodies(scene, ids, measure) {
@@ -967,15 +1053,23 @@ function relayoutBodies(scene, ids, measure) {
       const index = scene.get(child)?.data?.bodyRow;
       if (typeof index === "number") rowNodes.set(index, child);
     }
+    const dividers = new Map((layout.dividers ?? []).map((d) => [d.index, d]));
     const rows = Array.from({ length: layout.rows }, (_, i) => {
+      const divider = dividers.get(i);
+      if (divider !== void 0) return dividerRow(divider);
       const data = scene.get(rowNodes.get(i))?.data;
       return { kind: "label", text: typeof data?.text === "string" ? data.text : "", style: rowStyle(data?.style) };
     });
     const spec = { outline: trait.outline, rows, padding: layout.padding, gap: layout.gap, verticalAlign: layout.verticalAlign };
+    const heights = rowHeights(spec, measure);
+    if (layout.heights === void 0 || heights.some((h, i) => h !== layout.heights[i])) {
+      const data = node.data;
+      scene.update(id, { data: { ...data, diagram: { ...trait, body: { ...layout, heights } } } });
+    }
     const pose = node.pose;
     const grown = sizeToBody(pose, measureBody(spec, measure));
     if (grown !== pose) scene.setPose(id, grown);
-    for (const box of layoutBody(spec, grown, measure)) {
+    for (const box of layoutBody(spec, { x: 0, y: 0, width: grown.width, height: grown.height }, measure)) {
       const child = rowNodes.get(box.index);
       const at = child === void 0 ? void 0 : scene.get(child)?.pose;
       if (at === void 0) continue;
@@ -995,8 +1089,13 @@ var EDGE_STROKE_WIDTH = 1.5;
 
 // src/containers/regionSpecs.ts
 var NEW_POOL_LANES = 2;
-function regionData(role, axis, style, fitted) {
-  const container = { role, header: containerShape(role, axis).header, ...fitted ? { fitted: true } : {} };
+function regionData(role, axis, style, fitted, reorder) {
+  const container = {
+    role,
+    header: containerShape(role, axis).header,
+    ...fitted ? { fitted: true } : {},
+    ...reorder !== void 0 ? { reorder } : {}
+  };
   return {
     diagram: { outline: "rect", container },
     ...role === "lane" ? {} : { fill: { paint: { color: style.fill } } },
@@ -1018,7 +1117,7 @@ function regionSpecs(role, axis, pose, title, opts) {
     layer: opts.layer,
     pose,
     parent: opts.parent ?? null,
-    data: regionData(role, axis, style, opts.fitted === true),
+    data: regionData(role, axis, style, opts.fitted === true, opts.reorder),
     layout: CONTAINER_LAYOUTS[layout]
   };
   if (title === null) return [region];
@@ -1321,7 +1420,8 @@ function push(index, key, edge) {
 var textFace = (s, font) => ({
   fontFamily: s?.fontFamily ?? font.fontFamily,
   fontSize: s?.fontSize ?? font.fontSize,
-  ...s?.bold === true ? { fontWeight: 700 } : {}
+  ...s?.bold === true ? { fontWeight: 700 } : {},
+  ...s?.italic === true ? { fontStyle: "italic" } : {}
 });
 function rowTextStyle(row, font) {
   const face = textFace(row?.kind === "label" || row?.kind === "field" ? row.style : void 0, font);
@@ -1453,7 +1553,8 @@ function resolveContainers(containers, ids, nodeIds) {
       ...c.label !== void 0 ? { label: c.label } : {},
       ...c.style !== void 0 ? { style: c.style } : {},
       ...c.colors !== void 0 ? { colors: c.colors } : {},
-      ...c.box !== void 0 ? { box: { ...c.box } } : {}
+      ...c.box !== void 0 ? { box: { ...c.box } } : {},
+      ...c.role === "container" && c.reorder !== void 0 ? { reorder: c.reorder } : {}
     });
     if (c.role !== "pool") continue;
     (c.lanes ?? []).forEach((l, index) => {
@@ -1646,7 +1747,8 @@ function containerSpecs({ regions }, boxes, theme, fontFamily) {
       parent: r.parent ?? null,
       style: dataRegionStyle(r, theme, r.index),
       fitted: r.fitted,
-      fontFamily
+      fontFamily,
+      ...r.reorder !== void 0 ? { reorder: r.reorder } : {}
     });
     const marks = { ...r.pinned ? { pinned: true } : {}, ...ownNodeStyle(r.colors) };
     if (Object.keys(marks).length === 0) return specs;
@@ -1891,7 +1993,7 @@ function nodeSpecs(n, body, box, look) {
     body: (trait) => ({
       diagram: {
         ...trait,
-        ...bodyLayoutOf(body, trait),
+        ...bodyLayoutOf(body, trait, look.measure),
         ...n.pinned === true ? { pinned: true } : {},
         ...n.style !== void 0 ? { style: n.style } : {},
         ...ownNodeStyle(n.colors)
@@ -1905,8 +2007,8 @@ function nodeSpecs(n, body, box, look) {
   return built.specs.map((s, k) => ({ ...s, ...s.id !== void 0 ? {} : { id: `${n.id}/${k}` } }));
 }
 function diagramScene(data, opts = {}) {
-  const { layer, ...rest } = opts;
-  const specs = mainSpecs(data, rest);
+  const { layer, composition = RIGID_POSE_COMPOSITION, ...rest } = opts;
+  const specs = localizeWorldPoses(mainSpecs(data, rest), composition);
   return layer === void 0 ? specs : specs.map((s) => ({ ...s, layer }));
 }
 function mainSpecs(data, opts) {
@@ -2050,6 +2152,6 @@ function layOut(seeds, edges, groups, boxes, opts, room) {
   return { placed, plan: layout?.plan === void 0 ? null : plan, remapped };
 }
 
-export { ANCHOR_DERIVE_POSE, CONTAINER_HEADER, CONTAINER_LAYOUTS, DEFAULT_EDGE_STYLE, DEFAULT_FONT, DEFAULT_GROUP_STYLE, DEFAULT_LANE_SIZE, DEFAULT_NODE_STYLE, DEFAULT_POOL_ACROSS, DIAGRAM_ANCHOR, DIAGRAM_CONTAINER_LAYOUT, DIAGRAM_EDGE, DIAGRAM_GROUP, DIAGRAM_LABEL, DIAGRAM_LANE_COLUMNS_LAYOUT, DIAGRAM_LANE_ROWS_LAYOUT, DIAGRAM_OFF_PAGE_TAG, DIAGRAM_POOL_COLUMNS_LAYOUT, DIAGRAM_POOL_ROWS_LAYOUT, DIAGRAM_ROLES, DIAGRAM_THEMES, DIAGRAM_THEME_KEY, EDGE_DERIVE_PATH, EDGE_STROKE_WIDTH, EDIT_EDGE_LABEL_ACTION_ID, GROUP_DERIVE_POSE, LABEL_DERIVE_POSE, LABEL_DRAG_AFFORDANCE_KIND, LABEL_DRAG_LAYER_ID, LABEL_PLACEMENT, LANE_HEADER_SIZE, LANE_STROKE_WIDTH, MIN_LANE_SIZE, NODE_STROKE_WIDTH, OFF_PAGE_STUB, OFF_PAGE_TAG_DERIVE_POSE, OFF_PAGE_TAG_PADDING, POOL_HEADER_SIZE, ROUTERS, anchorDerivePose, avoid, bezier, bodyBox, bodyLayoutOf, boxAround, boxCenter, buildGraph, containerShape, dataEdgeStyle, dataNodeStyle, dataOffPage, dataRegionStyle, diagramAnchorOf, diagramContainerLayout, diagramContainerOf, diagramGroupOf, diagramLabelOf, diagramMarkOf, diagramPages, diagramScene, diagramThemeFrom, diagramThemeOf, draggableLabels, dropEmptyEdgeLabel, edgeDerivePath, edgeIdOf, edgeLabelSpec, edgeRouter, editEdgeLabelAction, editEdgeLabelBinding, editableLabels, endAims, firstLanes, groupDerivePose, groupLabelIdOf, groupMinWidth, headerBox, labelDerivePose, labelDragLayer, labelFollowsLayout, labelScratchOf, labelSize, labelStyleOf, labelUnder, laneHeader, laneOutlineOf, laneStackLayout, markShape, nestGroups, nextOffPageRef, offPageFarText, offPageSplits, offPageTagData, offPageTagDerivePose, offPageTagId, offPageTagLook, offPageTagOf, offPageTagSize, offPageTagSpec, offPageTagSpecs, offPageTagText, orthogonal, poolHeader, regionSpecs, registerMarkShape, relayoutBodies, resolveEnd, roleEdgeStyle, roleStyle, routerOf, rowTextStyle, selfLoop, stackedLanes, straight, themeDocValue, themeEdgeStroke, themeFont, themeLabelFamily, themeLabelFont, themeLabelStyle, titleIdOf, titlePose, withDiagramRegistry, withHops };
-//# sourceMappingURL=chunk-QU4QZUC6.js.map
-//# sourceMappingURL=chunk-QU4QZUC6.js.map
+export { ANCHOR_DERIVE_POSE, CONTAINER_HEADER, CONTAINER_LAYOUTS, DEFAULT_EDGE_STYLE, DEFAULT_FONT, DEFAULT_GROUP_STYLE, DEFAULT_LANE_SIZE, DEFAULT_NODE_STYLE, DEFAULT_POOL_ACROSS, DIAGRAM_ANCHOR, DIAGRAM_CONTAINER_LAYOUT, DIAGRAM_EDGE, DIAGRAM_GROUP, DIAGRAM_LABEL, DIAGRAM_LANE_COLUMNS_LAYOUT, DIAGRAM_LANE_ROWS_LAYOUT, DIAGRAM_OFF_PAGE_TAG, DIAGRAM_POOL_COLUMNS_LAYOUT, DIAGRAM_POOL_ROWS_LAYOUT, DIAGRAM_ROLES, DIAGRAM_THEMES, DIAGRAM_THEME_KEY, EDGE_DERIVE_PATH, EDGE_STROKE_WIDTH, EDIT_EDGE_LABEL_ACTION_ID, GROUP_DERIVE_POSE, LABEL_DERIVE_POSE, LABEL_DRAG_AFFORDANCE_KIND, LABEL_DRAG_LAYER_ID, LABEL_PLACEMENT, LANE_HEADER_SIZE, LANE_STROKE_WIDTH, MIN_LANE_SIZE, NODE_STROKE_WIDTH, OFF_PAGE_STUB, OFF_PAGE_TAG_DERIVE_POSE, OFF_PAGE_TAG_PADDING, POOL_HEADER_SIZE, ROUTERS, anchorDerivePose, avoid, bezier, bodyBox, bodyLayoutOf, boxAround, boxCenter, boxIndex, boxesMeeting, buildGraph, containerShape, dataEdgeStyle, dataNodeStyle, dataOffPage, dataRegionStyle, diagramAnchorOf, diagramContainerLayout, diagramContainerOf, diagramGroupOf, diagramLabelOf, diagramMarkOf, diagramPages, diagramScene, diagramThemeFrom, diagramThemeOf, draggableLabels, dropEmptyEdgeLabel, edgeDerivePath, edgeIdOf, edgeLabelSpec, edgeRouter, editEdgeLabelAction, editEdgeLabelBinding, editableLabels, endAims, firstLanes, groupDerivePose, groupLabelIdOf, groupMinWidth, headerBox, keyedIndex, labelDerivePose, labelDragLayer, labelFollowsLayout, labelScratchOf, labelSize, labelStyleOf, labelUnder, laneHeader, laneOutlineOf, laneStackLayout, markShape, nestGroups, nextOffPageRef, offPageFarText, offPageSplits, offPageTagData, offPageTagDerivePose, offPageTagId, offPageTagLook, offPageTagOf, offPageTagSize, offPageTagSpec, offPageTagSpecs, offPageTagText, orthogonal, poolHeader, recordedRows, regionSpecs, registerMarkShape, relayoutBodies, resolveEnd, roleEdgeStyle, roleStyle, routerOf, rowTextStyle, selfLoop, stackedLanes, straight, themeDocValue, themeEdgeStroke, themeFont, themeLabelFamily, themeLabelFont, themeLabelStyle, titleIdOf, titleInFrame, titlePose, withDiagramRegistry, withHops };
+//# sourceMappingURL=chunk-ZWXM5F4I.js.map
+//# sourceMappingURL=chunk-ZWXM5F4I.js.map