@weasel-js/diagram 1.10.0 → 1.10.1

package/dist/index.js

@@ -1,5 +1,5 @@
-import { insetOf, layered, portsOf, portOf, outlinePath, diagramNodeOf, expandGroupEdges, forceRelaxation, center, force, tree, DIAGRAM_TRAIT_KEY, DEFAULT_GROUP_INSET, sizeToBody, measureBody, buildBody } from './chunk-BWQJYEA3.js';
-export { COMPASS, DEFAULT_GROUP_INSET, DEFAULT_NODE_GAP, DEFAULT_PORTS, DEFAULT_RANK_GAP, DIAGRAM_TRAIT_KEY, axesFor, backEdges, bodyOutline, bodyTrait, boxForContent, buildBody, canvasMeasure, contentBox, createDiagramNodes, dataKeyReader, diagramNodeOf, expandGroupEdges, force, forceRelaxation, forestOf, graphOrder, insetOf, isPinned, layered, layoutBody, layoutRowPorts, measureBody, outlinePath, outlinePolyline, packAcross, packClusters, pinnedSet, portOf, portsOf, portsOnOutline, rankGaps, ranksOf, rayHit, seededOrder, settle, sizeToBody, translated, tree, untilSettled } from './chunk-BWQJYEA3.js';
+import { layered, insetOf, portsOf, portOf, outlinePath, diagramNodeOf, expandGroupEdges, forceRelaxation, center, force, tree, DIAGRAM_TRAIT_KEY, axesFor, ranksOf, backEdges, DEFAULT_GROUP_INSET, sizeToBody, measureBody, buildBody, DEFAULT_NODE_GAP } from './chunk-JZ4CVLAB.js';
+export { COMPASS, DEFAULT_GROUP_INSET, DEFAULT_NODE_GAP, DEFAULT_PORTS, DEFAULT_RANK_GAP, DIAGRAM_TRAIT_KEY, axesFor, backEdges, bodyOutline, bodyTrait, boxForContent, buildBody, canvasMeasure, contentBox, createDiagramNodes, dataKeyReader, diagramNodeOf, expandGroupEdges, force, forceRelaxation, forestOf, graphOrder, insetOf, isPinned, layered, layoutBody, layoutRowPorts, measureBody, outlinePath, outlinePolyline, packAcross, packClusters, pinnedSet, portOf, portsOf, portsOnOutline, rankGaps, ranksOf, rayHit, seededOrder, settle, sizeToBody, translated, tree, untilSettled } from './chunk-JZ4CVLAB.js';
 import { dragPanContribution, WeaselProvider, useScene, useSelection, useLatest, reconcileSpecs, SceneCanvas, fitViewToBounds, AUTO_POSE_DESCRIPTOR, translatePoseViaDescriptor, pointAlongPath, polylineFromPoints, registerNodeShape, effectivePose, usePoseRun, RECT_POSE_DESCRIPTOR, commandFill, commandStroke, composeAffordanceLayer } from '@weasel-js/core';
 import { portCurvePoints } from '@weasel-js/geom';
 import { AUTO_POSE_DESCRIPTOR as AUTO_POSE_DESCRIPTOR$1 } from '@weasel-js/core/math';
@@ -39,16 +39,18 @@ function groupDerivePose(opts = {}) {
       y1 = Math.max(y1, b.y + b.height);
     }
     if (!Number.isFinite(x0)) return null;
-    const inset = insetOf(group.inset);
-    return geometry.fromBounds(
-      {
-        x: x0 - inset.left,
-        y: y0 - inset.top,
-        width: x1 - x0 + inset.left + inset.right,
-        height: y1 - y0 + inset.top + inset.bottom
-      },
-      node.pose
-    );
+    return geometry.fromBounds(boxAround({ x: x0, y: y0, width: x1 - x0, height: y1 - y0 }, group), node.pose);
+  };
+}
+function boxAround(union, group) {
+  const inset = insetOf(group.inset);
+  const width = union.width + inset.left + inset.right;
+  const grow = Math.max(0, (group.minWidth ?? 0) - width);
+  return {
+    x: union.x - inset.left - grow / 2,
+    y: union.y - inset.top,
+    width: width + grow,
+    height: union.height + inset.top + inset.bottom
   };
 }
 function anchorDerivePose(opts = {}) {
@@ -89,10 +91,13 @@ function labelDerivePose(opts = {}) {
     const t = typeof label.at === "number" ? label.at : NAMED[label.at] ?? 0.5;
     const station = pointAlongPath(path, t);
     if (station === null) return null;
-    const offset = label.offset ?? 0;
-    const x = station.point.x + station.tangent.y * offset;
-    const y = station.point.y - station.tangent.x * offset;
     const bounds = geometry.getBounds(node.pose);
+    const nx = station.tangent.y;
+    const ny = -station.tangent.x;
+    const offset = label.offset ?? 0;
+    const reach = offset + Math.sign(offset) * (Math.abs(nx) * bounds.width + Math.abs(ny) * bounds.height) / 2;
+    const x = station.point.x + nx * reach;
+    const y = station.point.y + ny * reach;
     return translatePoseViaDescriptor(
       node.pose,
       x - (bounds.x + bounds.width / 2),
@@ -163,8 +168,8 @@ var bezier = (req) => {
   for (let i = 1; i < stops.length; i++) {
     const a = stops[i - 1];
     const b = stops[i];
-    const outN = i === 1 ? req.from.normal : null;
-    const inN = i === stops.length - 1 ? req.to.normal : null;
+    const outN = i === 1 ? req.from.normal : through(stops, i - 1);
+    const inN = i === stops.length - 1 ? req.to.normal : negated(through(stops, i));
     const leg = portCurvePoints(
       a.x,
       a.y,
@@ -179,6 +184,13 @@ var bezier = (req) => {
   return out;
 };
 var BEZIER_SAMPLES = 16;
+function through(stops, i) {
+  const dx = stops[i + 1].x - stops[i - 1].x;
+  const dy = stops[i + 1].y - stops[i - 1].y;
+  const len = Math.hypot(dx, dy);
+  return len === 0 ? null : { x: dx / len, y: dy / len };
+}
+var negated = (v) => v === null ? null : { x: -v.x, y: -v.y };
 var ROUTERS = Object.freeze({
   straight,
   orthogonal,
@@ -560,7 +572,8 @@ function buildGraph(source, opts = {}) {
       groupNodes.push({
         id: node.id,
         members: Array.isArray(deps) ? deps : [],
-        inset: insetOf(trait.group.inset)
+        inset: insetOf(trait.group.inset),
+        ...trait.group.minWidth !== void 0 ? { minWidth: trait.group.minWidth } : {}
       });
       continue;
     }
@@ -572,7 +585,7 @@ function buildGraph(source, opts = {}) {
     nodes.push(entry);
     byId.set(entry.id, entry);
   }
-  const insets = new Map(groupNodes.map((g) => [g.id, g.inset]));
+  const declared = new Map(groupNodes.map((g) => [g.id, g]));
   const live = nestGroups(groupNodes, (id) => byId.has(id)).map((g) => {
     for (const id of g.direct) {
       const node = byId.get(id);
@@ -581,7 +594,8 @@ function buildGraph(source, opts = {}) {
     return {
       id: g.id,
       members: g.members,
-      inset: insets.get(g.id),
+      inset: declared.get(g.id).inset,
+      ...declared.get(g.id).minWidth !== void 0 ? { minWidth: declared.get(g.id).minWidth } : {},
       ...g.parent !== void 0 ? { parent: g.parent } : {}
     };
   });
@@ -637,11 +651,12 @@ function resolveGroups(groups, ids, nodeIds, opts) {
       inset,
       pad,
       title,
+      ...title ? { minWidth: title.width + 2 * pad } : {},
       ...g.parent !== void 0 ? { parent: g.parent } : {}
     };
   });
 }
-function groupSpecs(groups, placedAt, styleOf) {
+function groupBoxes(groups, placedAt) {
   const byId = new Map(groups.map((g) => [g.group.id, g]));
   const boxes = /* @__PURE__ */ new Map();
   const boxOf = (id) => {
@@ -649,28 +664,33 @@ function groupSpecs(groups, placedAt, styleOf) {
     if (known !== void 0) return known;
     const g = byId.get(id);
     const rs = g.direct.map((m) => byId.has(m) ? boxOf(m) : placedAt.get(m));
-    const x = Math.min(...rs.map((r) => r.x)) - g.inset.left;
-    const y = Math.min(...rs.map((r) => r.y)) - g.inset.top;
-    const box = {
+    const x = Math.min(...rs.map((r) => r.x));
+    const y = Math.min(...rs.map((r) => r.y));
+    const box = boxAround({
       x,
       y,
-      width: Math.max(...rs.map((r) => r.x + r.width)) + g.inset.right - x,
-      height: Math.max(...rs.map((r) => r.y + r.height)) + g.inset.bottom - y
-    };
+      width: Math.max(...rs.map((r) => r.x + r.width)) - x,
+      height: Math.max(...rs.map((r) => r.y + r.height)) - y
+    }, g);
     boxes.set(id, box);
     return box;
   };
+  for (const g of groups) boxOf(g.group.id);
+  return boxes;
+}
+function groupSpecs(groups, placedAt, styleOf) {
+  const boxes = groupBoxes(groups, placedAt);
   const specs = [];
   for (const g of groups) {
     const { style, text } = styleOf(g.group);
-    const { x, y, width, height } = boxOf(g.group.id);
+    const { x, y, width, height } = boxes.get(g.group.id);
     specs.push({
       id: g.group.id,
       kind: "leaf",
       layer: "main",
       pose: { x, y, width, height },
       data: {
-        diagram: { outline: "rect", group: { inset: g.inset } },
+        diagram: { outline: "rect", group: { inset: g.inset, ...g.minWidth !== void 0 ? { minWidth: g.minWidth } : {} } },
         fill: { paint: { color: style.fill } },
         stroke: {
           paint: { color: style.stroke },
@@ -697,6 +717,102 @@ function groupSpecs(groups, placedAt, styleOf) {
   return specs;
 }
 
+// src/route.ts
+var FACES = {
+  down: { out: "s", in: "n" },
+  up: { out: "n", in: "s" },
+  right: { out: "e", in: "w" },
+  left: { out: "w", in: "e" }
+};
+function layeredRoutes(input) {
+  const { graph, boxes, members, compass, clearance } = input;
+  const direction = input.direction ?? "down";
+  const axes = axesFor(direction);
+  const faces = FACES[direction];
+  const ranks = ranksOf(graph, backEdges(graph));
+  const span = (id) => {
+    const ids = members.get(id) ?? [id];
+    const rs = ids.map((m) => ranks.get(m)).filter((r) => r !== void 0);
+    return rs.length === 0 ? null : [Math.min(...rs), Math.max(...rs)];
+  };
+  const lo = (r, axis) => axis === "x" ? r.x : r.y;
+  const hi = (r, axis) => axis === "x" ? r.x + r.width : r.y + r.height;
+  const mid = (r, axis) => (lo(r, axis) + hi(r, axis)) / 2;
+  const byRank = /* @__PURE__ */ new Map();
+  for (const node of graph.nodes) {
+    const rank = ranks.get(node.id);
+    const box = boxes.get(node.id);
+    if (rank === void 0 || box === void 0) continue;
+    byRank.set(rank, [...byRank.get(rank) ?? [], box]);
+  }
+  const routes = /* @__PURE__ */ new Map();
+  for (const edge of input.edges) {
+    const from = span(edge.from);
+    const to = span(edge.to);
+    const a = boxes.get(edge.from);
+    const b = boxes.get(edge.to);
+    if (from === null || to === null || a === void 0 || b === void 0 || from[1] >= to[0]) continue;
+    const route = {};
+    if (compass.has(edge.from)) route.fromPort = faces.out;
+    if (compass.has(edge.to)) route.toPort = faces.in;
+    const near = axes.sign === 1 ? hi : lo;
+    const far = axes.sign === 1 ? lo : hi;
+    const start = { cross: mid(a, axes.cross), rank: near(a, axes.rank) };
+    const end = { cross: mid(b, axes.cross), rank: far(b, axes.rank) };
+    const ends = /* @__PURE__ */ new Set([edge.from, edge.to, ...members.get(edge.from) ?? [], ...members.get(edge.to) ?? []]);
+    const groupsInWay = [...members].filter(([g, ms]) => !ends.has(g) && !ms.some((m) => ends.has(m)));
+    const stops = [];
+    let blocked = false;
+    for (let k = from[1] + 1; k < to[0]; k++) {
+      const row = byRank.get(k) ?? [];
+      if (row.length === 0) continue;
+      const bandLo = Math.min(...row.map((r) => lo(r, axes.rank)));
+      const bandHi = Math.max(...row.map((r) => hi(r, axes.rank)));
+      const obstacles = [...row];
+      for (const [g] of groupsInWay) {
+        const box = boxes.get(g);
+        if (box !== void 0 && lo(box, axes.rank) < bandHi && hi(box, axes.rank) > bandLo) obstacles.push(box);
+      }
+      const t = ((bandLo + bandHi) / 2 - start.rank) / (end.rank - start.rank);
+      const ideal = start.cross + (end.cross - start.cross) * t;
+      const cross = freeAt(ideal, obstacles.map((r) => [lo(r, axes.cross) - clearance, hi(r, axes.cross) + clearance]));
+      if (cross !== ideal) blocked = true;
+      const [first, last] = axes.sign === 1 ? [bandLo, bandHi] : [bandHi, bandLo];
+      stops.push({ cross, rank: first }, { cross, rank: last });
+    }
+    if (blocked) {
+      route.waypoints = stops.map((s) => axes.rank === "y" ? { x: s.cross, y: s.rank } : { x: s.rank, y: s.cross });
+    }
+    if (route.fromPort !== void 0 || route.toPort !== void 0 || route.waypoints !== void 0) {
+      routes.set(edge.id, route);
+    }
+  }
+  return routes;
+}
+function authoredOver(edges, input) {
+  const routes = layeredRoutes({ ...input, edges });
+  return new Map(edges.map((e) => {
+    const r = routes.get(e.id);
+    const fromPort = e.fromPort ?? r?.fromPort;
+    const toPort = e.toPort ?? r?.toPort;
+    const waypoints = e.waypoints ?? r?.waypoints;
+    return [e.id, { ...fromPort ? { fromPort } : {}, ...toPort ? { toPort } : {}, ...waypoints ? { waypoints } : {} }];
+  }));
+}
+function freeAt(at, spans) {
+  const sorted = [...spans].sort((p, q) => p[0] - q[0]);
+  const merged = [];
+  for (const [s, e] of sorted) {
+    const top = merged[merged.length - 1];
+    if (top !== void 0 && s < top[1]) top[1] = Math.max(top[1], e);
+    else merged.push([s, e]);
+  }
+  for (const [s, e] of merged) {
+    if (at > s && at < e) return at - s <= e - at ? s : e;
+  }
+  return at;
+}
+
 // src/fromData.ts
 var FONT = { fontFamily: "sans-serif", fontSize: 12 };
 var NODE = { fill: "#16222c", stroke: "#7ba7c7", text: "#dbe7f2" };
@@ -725,6 +841,23 @@ function graphOf(nodes, edges, groups = []) {
     incoming: (id) => inc.get(id) ?? []
   };
 }
+function routed(data, edges, graph, groups, placedAt, layoutOptions) {
+  return authoredOver(edges.map((e) => ({ ...e, id: edgeIdOf(e) })), {
+    graph,
+    boxes: new Map([...placedAt, ...groupBoxes(groups, placedAt)]),
+    members: new Map(groups.map((g) => [g.group.id, g.members])),
+    compass: /* @__PURE__ */ new Set([...data.nodes.filter((n) => n.ports === void 0).map((n) => n.id), ...groups.map((g) => g.group.id)]),
+    clearance: (layoutOptions.nodeGap ?? DEFAULT_NODE_GAP) / 2,
+    ...layoutOptions.direction ? { direction: layoutOptions.direction } : {}
+  });
+}
+function placed(data, seeds, moved) {
+  return new Map(data.nodes.map((n, i) => {
+    const seed = seeds[i].bounds;
+    const at = moved.get(n.id) ?? seed;
+    return [n.id, { x: at.x, y: at.y, width: seed.width, height: seed.height }];
+  }));
+}
 function diagramScene(data, opts = {}) {
   const font = opts.font ?? FONT;
   const styleOf = (s) => ({
@@ -773,6 +906,7 @@ function diagramScene(data, opts = {}) {
     id: g.group.id,
     members: g.members,
     inset: g.inset,
+    ...g.minWidth !== void 0 ? { minWidth: g.minWidth } : {},
     ...g.parent !== void 0 ? { parent: g.parent } : {}
   }));
   const seedOf = new Map(seeds.map((n) => [n.id, n]));
@@ -788,13 +922,11 @@ function diagramScene(data, opts = {}) {
     graphGroups
   );
   const layout = typeof opts.layout === "function" ? opts.layout : opts.layout === "none" ? null : LAYOUTS[opts.layout ?? "layered"];
-  const moved = layout === null ? /* @__PURE__ */ new Map() : layout(graph, { order: "barycenter", ...opts.layoutOptions });
+  const layoutOptions = { order: "barycenter", ...opts.layoutOptions };
+  const moved = layout === null ? /* @__PURE__ */ new Map() : layout(graph, layoutOptions);
   const specs = [];
-  const placedAt = new Map(data.nodes.map((n, i) => {
-    const seed = seeds[i].bounds;
-    const at = moved.get(n.id) ?? seed;
-    return [n.id, { x: at.x, y: at.y, width: seed.width, height: seed.height }];
-  }));
+  const placedAt = placed(data, seeds, moved);
+  const routes = layout === layered ? routed(data, edges, graph, groups, placedAt, layoutOptions) : null;
   specs.push(...groupSpecs(groups, placedAt, (g) => ({
     style: opts.groupStyle?.(g) ?? GROUP,
     text: styleOf(titleStyle)
@@ -830,6 +962,7 @@ function diagramScene(data, opts = {}) {
   }
   for (const e of edges) {
     const id = edgeIdOf(e);
+    const { fromPort, toPort, waypoints } = routes?.get(id) ?? e;
     const style = opts.edgeStyle?.(e) ?? EDGE;
     const markerStart = style.markerStart ?? null;
     const markerEnd = style.markerEnd === void 0 ? "arrow" : style.markerEnd;
@@ -841,10 +974,10 @@ function diagramScene(data, opts = {}) {
       pose: { x: 0, y: 0, width: 0, height: 0 },
       data: {
         diagram: {
-          from: e.fromPort ? { port: e.fromPort } : {},
-          to: e.toPort ? { port: e.toPort } : {},
+          from: fromPort ? { port: fromPort } : {},
+          to: toPort ? { port: toPort } : {},
           router: e.router ?? opts.router ?? "bezier",
-          ...e.waypoints ? { waypoints: e.waypoints } : {}
+          ...waypoints ? { waypoints } : {}
         },
         stroke: {
           paint: { color: style.stroke },
@@ -1053,13 +1186,13 @@ function useLiveLayout(opts) {
       pinned: ctx.pinned,
       frame: producerFrame.current++
     });
-    let placed = result;
+    let placed2 = result;
     if (ctx.pinned.size > 0) {
       const held = new Map(result);
       for (const id of ctx.pinned.keys()) held.delete(id);
-      placed = held;
+      placed2 = held;
     }
-    const poses = layoutPoses(o.scene, placed, o.geometry);
+    const poses = layoutPoses(o.scene, placed2, o.geometry);
     return { poses: [...poses], done };
   }, [optsRef]);
   const run = usePoseRun({
@@ -1154,6 +1287,7 @@ function useMirroredSelection(selection, selected, onSelect) {
   }, [selection, onSelectRef]);
 }
 var AMBIENT = [dragPanContribution()];
+var NO_MARQUEE = { areaSelect: null };
 var DiagramView = forwardRef(function DiagramView2(props, ref) {
   return /* @__PURE__ */ jsx(WeaselProvider, { children: /* @__PURE__ */ jsx(Inner, { ...props, apiRef: ref }) });
 });
@@ -1266,6 +1400,7 @@ function Inner({
       features: onMove ? ["view", "pick", "move"] : ["view", "pick"],
       enableKeybindings: enableKeybindings ?? (onMove !== void 0 || onConnect !== void 0),
       ambient,
+      actions: NO_MARQUEE,
       onClick,
       width,
       height,
@@ -1296,6 +1431,6 @@ function fitDiagram(specs, size, fit = {}) {
   });
 }
 
-export { ANCHOR_DERIVE_POSE, CONNECT_ACTION_ID, DEFAULT_EDGE_STROKE, DIAGRAM_ANCHOR, DIAGRAM_EDGE, DIAGRAM_GROUP, DIAGRAM_LABEL, DiagramView, EASED_LAYOUTS, EDGE_DERIVE_PATH, GRAB_PORT_ACTION_ID, GROUP_DERIVE_POSE, LABEL_DERIVE_POSE, LAYOUTS2 as LAYOUTS, LAYOUT_ACTION_ID, PORT_AFFORDANCE_KIND, PORT_LAYER_ID, ROUTERS, anchorDerivePose, applyLayout, bezier, buildGraph, commitEdgeToScene, connectBinding, createConnectAction, createDiagramContribution, createLayoutAction, createPortAffordance, defaultCanConnect, diagramAnchorOf, diagramEdgeOf, diagramGroupOf, diagramLabelOf, diagramPorts, diagramScene, diagramShape, easedProducer, edgeDerivePath, edgeIdOf, forceProducer, grabPortAction, grabPortBindings, groupDerivePose, labelDerivePose, layoutPoses, orthogonal, portLayer, portScratchOf, registerDiagramShape, resolveEnd, sceneParticipants, selfLoop, straight, useLiveLayout, useMirroredSelection, withDiagramRegistry };
+export { ANCHOR_DERIVE_POSE, CONNECT_ACTION_ID, DEFAULT_EDGE_STROKE, DIAGRAM_ANCHOR, DIAGRAM_EDGE, DIAGRAM_GROUP, DIAGRAM_LABEL, DiagramView, EASED_LAYOUTS, EDGE_DERIVE_PATH, GRAB_PORT_ACTION_ID, GROUP_DERIVE_POSE, LABEL_DERIVE_POSE, LAYOUTS2 as LAYOUTS, LAYOUT_ACTION_ID, PORT_AFFORDANCE_KIND, PORT_LAYER_ID, ROUTERS, anchorDerivePose, applyLayout, bezier, boxAround, buildGraph, commitEdgeToScene, connectBinding, createConnectAction, createDiagramContribution, createLayoutAction, createPortAffordance, defaultCanConnect, diagramAnchorOf, diagramEdgeOf, diagramGroupOf, diagramLabelOf, diagramPorts, diagramScene, diagramShape, easedProducer, edgeDerivePath, edgeIdOf, forceProducer, grabPortAction, grabPortBindings, groupDerivePose, labelDerivePose, layeredRoutes, layoutPoses, orthogonal, portLayer, portScratchOf, registerDiagramShape, resolveEnd, sceneParticipants, selfLoop, straight, useLiveLayout, useMirroredSelection, withDiagramRegistry };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map