@weasel-js/diagram 1.8.1 → 1.9.0

package/dist/index.js

@@ -1,9 +1,10 @@
-import { portOf, portsOf, diagramNodeOf, force, tree, layered, forceRelaxation, center, outlinePath } from './chunk-4KXQABRM.js';
-export { COMPASS, DEFAULT_NODE_GAP, DEFAULT_PORTS, DEFAULT_RANK_GAP, DIAGRAM_TRAIT_KEY, axesFor, backEdges, bodyOutline, bodyTrait, boxForContent, buildBody, canvasMeasure, contentBox, createDiagramNodes, dataKeyReader, diagramNodeOf, force, forceRelaxation, forestOf, graphOrder, isPinned, layered, layoutBody, layoutRowPorts, measureBody, outlinePath, outlinePolyline, packAcross, pinnedSet, portOf, portsOf, portsOnOutline, ranksOf, rayHit, seededOrder, settle, sizeToBody, translated, tree } from './chunk-4KXQABRM.js';
-import { AUTO_POSE_DESCRIPTOR, pointAlongPath, translatePoseViaDescriptor, polylineFromPoints, effectivePose, composeAffordanceLayer, useLatest, usePoseRun, RECT_POSE_DESCRIPTOR, registerNodeShape } from '@weasel-js/core';
+import { portOf, portsOf, diagramNodeOf, layered, force, tree, forceRelaxation, center, outlinePath } from './chunk-6VYT4WCM.js';
+export { COMPASS, DEFAULT_NODE_GAP, DEFAULT_PORTS, DEFAULT_RANK_GAP, DIAGRAM_TRAIT_KEY, axesFor, backEdges, bodyOutline, bodyTrait, boxForContent, buildBody, canvasMeasure, contentBox, createDiagramNodes, dataKeyReader, diagramNodeOf, force, forceRelaxation, forestOf, graphOrder, isPinned, layered, layoutBody, layoutRowPorts, measureBody, outlinePath, outlinePolyline, packAcross, pinnedSet, portOf, portsOf, portsOnOutline, ranksOf, rayHit, seededOrder, settle, sizeToBody, translated, tree } from './chunk-6VYT4WCM.js';
+import { dragPanContribution, AUTO_POSE_DESCRIPTOR, pointAlongPath, translatePoseViaDescriptor, polylineFromPoints, effectivePose, composeAffordanceLayer, useLatest, usePoseRun, RECT_POSE_DESCRIPTOR, registerNodeShape, WeaselProvider, useScene, useSelection, SceneCanvas, fitViewToBounds } from '@weasel-js/core';
 import { portCurvePoints } from '@weasel-js/geom';
 import { AUTO_POSE_DESCRIPTOR as AUTO_POSE_DESCRIPTOR$1 } from '@weasel-js/core/math';
 import { useRef, useCallback, useEffect, useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
 
 var NAMED = { start: 0, mid: 0.5, end: 1 };
 function diagramLabelOf(node) {
@@ -260,7 +261,7 @@ function grabPortBindings(actionId = GRAB_PORT_ACTION_ID) {
   ];
 }
 function commitEdgeToScene(edge, ctx) {
-  const scene = ctx.deps["scene"];
+  const scene = ctx.deps.scene;
   if (scene === void 0) return;
   const trait = {
     from: { port: edge.from.id },
@@ -441,6 +442,128 @@ function push(index, key, edge) {
   if (list === void 0) index.set(key, [edge]);
   else list.push(edge);
 }
+
+// src/fromData.ts
+var FONT = { fontFamily: "sans-serif", fontSize: 12 };
+var NODE = { fill: "#16222c", stroke: "#7ba7c7", text: "#dbe7f2" };
+var EDGE = { stroke: "#7ba7c7" };
+var PAD = { x: 12, y: 8 };
+var LINE = 1.4;
+var GLYPH = 0.6;
+var MIN_WIDTH = 64;
+var edgeIdOf = (e) => `edge:${e.from}->${e.to}${e.label ? `:${e.label}` : ""}`;
+function sizeOf(node, fontSize) {
+  const longest = Math.max(0, ...node.lines.map((l) => l.length));
+  return {
+    width: Math.max(MIN_WIDTH, Math.ceil(longest * GLYPH * fontSize + 2 * PAD.x)),
+    height: Math.ceil(Math.max(1, node.lines.length) * LINE * fontSize + 2 * PAD.y)
+  };
+}
+function graphOf(nodes, edges) {
+  const byId = new Map(nodes.map((n) => [n.id, n]));
+  const out = /* @__PURE__ */ new Map();
+  const inc = /* @__PURE__ */ new Map();
+  for (const e of edges) {
+    out.set(e.from, [...out.get(e.from) ?? [], e]);
+    inc.set(e.to, [...inc.get(e.to) ?? [], e]);
+  }
+  return {
+    nodes,
+    edges,
+    node: (id) => byId.get(id),
+    outgoing: (id) => out.get(id) ?? [],
+    incoming: (id) => inc.get(id) ?? []
+  };
+}
+function diagramScene(data, opts = {}) {
+  const font = opts.font ?? FONT;
+  const ids = /* @__PURE__ */ new Set();
+  for (const n of data.nodes) {
+    if (ids.has(n.id)) throw new Error(`diagramScene: node id "${n.id}" appears more than once`);
+    ids.add(n.id);
+  }
+  const seen = /* @__PURE__ */ new Set();
+  const edges = data.edges.filter((e) => {
+    const id = edgeIdOf(e);
+    if (seen.has(id) || !ids.has(e.from) || !ids.has(e.to)) return false;
+    seen.add(id);
+    return true;
+  });
+  const seeds = data.nodes.map((n, i) => ({
+    id: n.id,
+    bounds: { x: i, y: i, ...sizeOf(n, font.fontSize) },
+    pinned: false
+  }));
+  const graph = graphOf(seeds, edges.map((e) => ({ id: edgeIdOf(e), from: e.from, to: e.to })));
+  const moved = (opts.layout ?? layered)(graph, opts.layoutOptions ?? { order: "barycenter" });
+  const specs = [];
+  for (const [i, n] of data.nodes.entries()) {
+    const seed = seeds[i].bounds;
+    const at = moved.get(n.id) ?? seed;
+    const pose = { x: at.x, y: at.y, width: seed.width, height: seed.height };
+    const style = opts.nodeStyle?.(n) ?? NODE;
+    specs.push({
+      id: n.id,
+      kind: "container",
+      layer: "main",
+      pose,
+      data: {
+        diagram: { outline: "rect" },
+        fill: { color: style.fill },
+        stroke: { paint: { color: style.stroke }, width: style.strokeWidth ?? 2 }
+      }
+    });
+    for (const [k, text] of n.lines.entries()) {
+      specs.push({
+        kind: "leaf",
+        layer: "main",
+        parent: n.id,
+        pickable: false,
+        pose: {
+          x: pose.x + PAD.x,
+          y: pose.y + PAD.y + k * LINE * font.fontSize,
+          width: pose.width - 2 * PAD.x,
+          height: LINE * font.fontSize
+        },
+        data: { text, style: font, fill: { color: style.text } }
+      });
+    }
+  }
+  for (const e of edges) {
+    const id = edgeIdOf(e);
+    const style = opts.edgeStyle?.(e) ?? EDGE;
+    specs.push({
+      id,
+      kind: "leaf",
+      layer: "main",
+      pickable: false,
+      pose: { x: 0, y: 0, width: 0, height: 0 },
+      data: {
+        diagram: { from: {}, to: {}, router: opts.router ?? "bezier" },
+        stroke: { paint: { color: style.stroke }, width: style.width ?? 1.5, markerEnd: "arrow" }
+      },
+      dependsOn: [e.from, e.to],
+      derivePath: EDGE_DERIVE_PATH
+    });
+    if (e.label) {
+      specs.push({
+        kind: "leaf",
+        layer: "main",
+        pickable: false,
+        pose: { x: 0, y: 0, width: e.label.length * GLYPH * (font.fontSize - 2), height: font.fontSize },
+        data: {
+          diagram: { label: { at: "mid", offset: 9 } },
+          text: e.label,
+          style: { ...font, fontSize: font.fontSize - 2 },
+          fill: { color: style.stroke }
+        },
+        dependsOn: [id],
+        derivePose: LABEL_DERIVE_POSE
+      });
+    }
+  }
+  return specs;
+}
 var LAYOUTS = Object.freeze({
   layered,
   tree,
@@ -700,7 +823,77 @@ function diagramShape(opts = {}) {
 function registerDiagramShape(opts = {}) {
   return registerNodeShape(diagramShape(opts), { priority: "high" });
 }
+function useMirroredSelection(selection, selected, onSelect) {
+  const want = selected ?? null;
+  const pushed = useRef(void 0);
+  useEffect(() => {
+    if (pushed.current === want) return;
+    pushed.current = want;
+    if ((selection.get()[0] ?? null) !== want) selection.set(want === null ? [] : [want]);
+  }, [want]);
+  const onSelectRef = useLatest(onSelect);
+  return useCallback(() => {
+    onSelectRef.current?.(selection.get()[0] ?? null);
+  }, [selection, onSelectRef]);
+}
+var made = 0;
+var keys = /* @__PURE__ */ new WeakMap();
+var keyOf = (specs) => {
+  let k = keys.get(specs);
+  if (k === void 0) keys.set(specs, k = ++made);
+  return k;
+};
+var AMBIENT = [dragPanContribution()];
+function DiagramView(props) {
+  return /* @__PURE__ */ jsx(WeaselProvider, { children: /* @__PURE__ */ jsx(Inner, { ...props }, keyOf(props.specs)) });
+}
+function Inner({ specs, width, height, selected, onSelect, minScale, anchor, className }) {
+  useEffect(() => registerDiagramShape(), []);
+  const registry = useMemo(() => withDiagramRegistry(), []);
+  const scene = useScene({
+    systemLayers: [{ id: "main" }],
+    initial: specs,
+    registry
+  });
+  const selection = useSelection({ scene, mode: "single" });
+  const onClick = useMirroredSelection(selection, selected, onSelect);
+  const defaultView = useMemo(
+    () => fitDiagram(specs, { width, height }, minScale, anchor),
+    [specs, width, height, minScale, anchor]
+  );
+  return /* @__PURE__ */ jsx(
+    SceneCanvas,
+    {
+      scene,
+      selection,
+      features: ["view", "pick"],
+      ambient: AMBIENT,
+      onClick,
+      width,
+      height,
+      className,
+      ...defaultView ? { defaultView } : {}
+    }
+  );
+}
+function fitDiagram(specs, size, minScale, anchor) {
+  const boxes = specs.filter((s) => s.kind === "container").map((s) => s.pose);
+  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: 1,
+    ...minScale !== void 0 ? { minScale } : {},
+    ...anchor !== void 0 ? { anchor } : {}
+  });
+}
 
-export { CONNECT_ACTION_ID, DEFAULT_EDGE_STROKE, DIAGRAM_EDGE, DIAGRAM_LABEL, EASED_LAYOUTS, EDGE_DERIVE_PATH, GRAB_PORT_ACTION_ID, LABEL_DERIVE_POSE, LAYOUTS, LAYOUT_ACTION_ID, PORT_AFFORDANCE_KIND, PORT_LAYER_ID, ROUTERS, applyLayout, bezier, buildGraph, commitEdgeToScene, connectBinding, createConnectAction, createDiagramContribution, createLayoutAction, createPortAffordance, defaultCanConnect, diagramEdgeOf, diagramLabelOf, diagramPorts, diagramShape, easedProducer, edgeDerivePath, forceProducer, grabPortAction, grabPortBindings, labelDerivePose, layoutPoses, orthogonal, portLayer, portScratchOf, registerDiagramShape, resolveEnd, sceneParticipants, straight, useLiveLayout, withDiagramRegistry };
+export { CONNECT_ACTION_ID, DEFAULT_EDGE_STROKE, DIAGRAM_EDGE, DIAGRAM_LABEL, DiagramView, EASED_LAYOUTS, EDGE_DERIVE_PATH, GRAB_PORT_ACTION_ID, LABEL_DERIVE_POSE, LAYOUTS, LAYOUT_ACTION_ID, PORT_AFFORDANCE_KIND, PORT_LAYER_ID, ROUTERS, applyLayout, bezier, buildGraph, commitEdgeToScene, connectBinding, createConnectAction, createDiagramContribution, createLayoutAction, createPortAffordance, defaultCanConnect, diagramEdgeOf, diagramLabelOf, diagramPorts, diagramScene, diagramShape, easedProducer, edgeDerivePath, edgeIdOf, forceProducer, grabPortAction, grabPortBindings, labelDerivePose, layoutPoses, orthogonal, portLayer, portScratchOf, registerDiagramShape, resolveEnd, sceneParticipants, straight, useLiveLayout, useMirroredSelection, withDiagramRegistry };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map