@weasel-js/diagram 1.8.0 → 1.9.0

package/dist/index.d.ts

@@ -1,6 +1,7 @@
-import { P as Port, a as PortsOptions, D as DiagramNodeLike, b as DiagramNodeReader, L as LayoutFn, c as LayoutOptions, F as ForceOptions, d as LayoutResult, G as GraphSource, e as Graph } from './layout.entry-BvR06k9j.js';
-export { B as BodyFloor, f as BodyNodeSpec, g as BodySpec, h as Bounds, i as BuildBodyOptions, j as BuildGraphOptions, C as COMPASS, k as DEFAULT_NODE_GAP, l as DEFAULT_PORTS, m as DEFAULT_RANK_GAP, n as DIAGRAM_TRAIT_KEY, o as DiagramNode, p as DiagramNodeEntry, q as ForceBody, r as ForceRelaxation, s as GraphEdge, t as GraphNode, u as GraphNodeLike, v as LayoutAxes, w as LayoutDirection, M as MeasureRowText, O as Outline, x as PortAnchor, y as PortSpec, R as Row, z as RowBox, A as RowNodeData, E as RowPort, H as RowPortBox, I as RowTextStyle, S as Slot, J as axesFor, K as backEdges, N as bodyOutline, Q as bodyTrait, T as boxForContent, U as buildBody, V as buildGraph, W as canvasMeasure, X as contentBox, Y as createDiagramNodes, Z as dataKeyReader, _ as diagramNodeOf, $ as force, a0 as forceRelaxation, a1 as forestOf, a2 as graphOrder, a3 as isPinned, a4 as layered, a5 as layoutBody, a6 as layoutRowPorts, a7 as measureBody, a8 as outlinePath, a9 as outlinePolyline, aa as packAcross, ab as pinnedSet, ac as portOf, ad as portsOf, ae as portsOnOutline, af as ranksOf, ag as rayHit, ah as seededOrder, ai as settle, aj as sizeToBody, ak as translated, al as tree } from './layout.entry-BvR06k9j.js';
-import { Vec2, DerivedDep, Path, SceneRegistry, PoseDescriptor, ChromeState, FillStyle, Stroke, CursorSpec, Affordance, InvocationCtx, GestureBinding, Action, Contribution, RenderLayer, EasingFn, NodeId, Scene, NodeShapeEntry } from '@weasel-js/core';
+import { P as Port, a as PortsOptions, D as DiagramNodeLike, b as DiagramNodeReader, c as DiagramNode, L as LayoutFn, d as LayoutOptions, F as ForceOptions, e as LayoutResult, G as GraphSource, f as Graph } from './layout.entry-ClWUwH16.js';
+export { B as BodyFloor, g as BodyNodeSpec, h as BodySpec, i as Bounds, j as BuildBodyOptions, k as BuildGraphOptions, C as COMPASS, l as DEFAULT_NODE_GAP, m as DEFAULT_PORTS, n as DEFAULT_RANK_GAP, o as DIAGRAM_TRAIT_KEY, p as DiagramNodeEntry, q as ForceBody, r as ForceRelaxation, s as GraphEdge, t as GraphNode, u as GraphNodeLike, v as LayoutAxes, w as LayoutDirection, M as MeasureRowText, O as Outline, x as PortAnchor, y as PortSpec, R as Row, z as RowBox, A as RowNodeData, E as RowPort, H as RowPortBox, I as RowTextStyle, S as Slot, J as axesFor, K as backEdges, N as bodyOutline, Q as bodyTrait, T as boxForContent, U as buildBody, V as buildGraph, W as canvasMeasure, X as contentBox, Y as createDiagramNodes, Z as dataKeyReader, _ as diagramNodeOf, $ as force, a0 as forceRelaxation, a1 as forestOf, a2 as graphOrder, a3 as isPinned, a4 as layered, a5 as layoutBody, a6 as layoutRowPorts, a7 as measureBody, a8 as outlinePath, a9 as outlinePolyline, aa as packAcross, ab as pinnedSet, ac as portOf, ad as portsOf, ae as portsOnOutline, af as ranksOf, ag as rayHit, ah as seededOrder, ai as settle, aj as sizeToBody, ak as translated, al as tree } from './layout.entry-ClWUwH16.js';
+import { Vec2, DerivedDep, Path, SceneRegistry, PoseDescriptor, ChromeState, FillStyle, Stroke, CursorSpec, Affordance, InvocationCtx, GestureBinding, Action, Contribution, RenderLayer, AddNodeSpec, RectPose, EasingFn, NodeId, Scene, NodeShapeEntry, SelectionApi } from '@weasel-js/core';
+import * as react from 'react';
 import '@weasel-js/geom';
 import '@weasel-js/core/math';
 
@@ -67,8 +68,6 @@ declare const straight: Router;
  * across the corner, which reads as aimed at nothing.
  */
 declare const orthogonal: Router;
-/** How far a bezier reaches along each end's normal, as a fraction of the
- *  straight-line distance between the two points it joins. */
 /**
  * A smooth route, sampled into points.
  *
@@ -119,10 +118,10 @@ declare const DIAGRAM_EDGE = "diagram:edge";
  *  `edgeDerivePath(...)` under a key of their choosing. */
 declare const EDGE_DERIVE_PATH: (node: {
     data: unknown;
-}, deps: readonly (DerivedDep<unknown> | undefined)[]) => Path | null;
+}, deps: readonly (DerivedDep<unknown, unknown, string> | undefined)[]) => Path | null;
 /** Merge this package's registry entries under a consumer's, so an edge
  *  round-trips through `toJSON` without the consumer wiring the key. */
-declare function withDiagramRegistry<TPose>(registry?: SceneRegistry<TPose>): SceneRegistry<TPose>;
+declare function withDiagramRegistry<TPose, TData = unknown, TLayer extends string = string>(registry?: SceneRegistry<TPose, TData, TLayer>): SceneRegistry<TPose, TData, TLayer>;
 
 /**
  * Ports as affordances — what makes a painted port a grabbable one.
@@ -416,7 +415,69 @@ declare const DIAGRAM_LABEL = "diagram:label";
 declare const LABEL_DERIVE_POSE: (node: {
     pose: unknown;
     data: unknown;
-}, deps: readonly (DerivedDep<unknown> | undefined)[]) => unknown;
+}, deps: readonly (DerivedDep<unknown, unknown, string> | undefined)[]) => unknown;
+
+/**
+ * `diagramScene` — a laid-out diagram from plain `{ nodes, edges }`.
+ *
+ * Sizes are estimated from character counts, not measured, so layout runs
+ * without a canvas and gives the same answer in node and in a browser.
+ */
+
+interface DataNode {
+    id: string;
+    lines: readonly string[];
+}
+interface DataEdge {
+    from: string;
+    to: string;
+    label?: string;
+}
+interface DiagramData {
+    nodes: readonly DataNode[];
+    edges: readonly DataEdge[];
+}
+interface NodeStyle {
+    fill: string;
+    stroke: string;
+    text: string;
+    strokeWidth?: number;
+}
+interface EdgeStyle {
+    stroke: string;
+    width?: number;
+}
+interface DiagramSceneData {
+    diagram?: DiagramNode | DiagramEdge | {
+        label: DiagramLabel;
+    };
+    fill?: {
+        color: string;
+    };
+    stroke?: Stroke;
+    text?: string;
+    style?: {
+        fontFamily: string;
+        fontSize: number;
+    };
+}
+type DiagramSpec = AddNodeSpec<DiagramSceneData, 'main', RectPose>;
+interface DiagramSceneOptions {
+    layout?: LayoutFn;
+    layoutOptions?: LayoutOptions;
+    router?: 'straight' | 'bezier' | 'orthogonal';
+    font?: {
+        fontFamily: string;
+        fontSize: number;
+    };
+    nodeStyle?: (node: DataNode) => NodeStyle;
+    edgeStyle?: (edge: DataEdge) => EdgeStyle;
+}
+declare const edgeIdOf: (e: DataEdge) => string;
+/** Throws on a repeated node id, which names two nodes as one. An edge whose
+ *  end is not a node is dropped, and so is a repeat of an earlier edge with
+ *  the same ends and label: it would draw exactly on top of the first. */
+declare function diagramScene(data: DiagramData, opts?: DiagramSceneOptions): DiagramSpec[];
 
 /** What a live producer is told, and what it answers with. */
 interface LiveLayoutCtx<TPose> {
@@ -691,4 +752,35 @@ declare function diagramShape<TPose>(opts?: DiagramShapeOptions<TPose>): NodeSha
  */
 declare function registerDiagramShape<TPose>(opts?: DiagramShapeOptions<TPose>): () => void;
 
-export { type ApplyLayoutOptions, CONNECT_ACTION_ID, type CanConnect, type ConnectActionOptions, DEFAULT_EDGE_STROKE, DIAGRAM_EDGE, DIAGRAM_LABEL, type DiagramContributionOptions, type DiagramEdge, type DiagramLabel, DiagramNodeLike, DiagramNodeReader, type DiagramShapeOptions, EASED_LAYOUTS, EDGE_DERIVE_PATH, type EasedProducerOptions, type EdgeEnd, type EdgeRouteOptions, ForceOptions, type ForceProducerOptions, GRAB_PORT_ACTION_ID, Graph, GraphSource, LABEL_DERIVE_POSE, LAYOUTS, LAYOUT_ACTION_ID, type LabelPoseOptions, type LayoutActionOptions, LayoutFn, LayoutOptions, LayoutResult, type LiveLayout, type LiveLayoutCtx, type LiveLayoutFrame, type LiveLayoutProducer, PORT_AFFORDANCE_KIND, PORT_LAYER_ID, type ParticipantPose, type ParticipantScene, type ParticipantSource, type PendingEdge, Port, type PortAffordanceOptions, type PortScratch, PortsOptions, ROUTERS, type RouteRequest, type Router, type UseLiveLayoutOptions, applyLayout, bezier, 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 };
+interface DiagramViewProps {
+    specs: readonly DiagramSpec[];
+    width: number;
+    height: number;
+    /** A participant id, or null for none. */
+    selected?: string | null;
+    /** Reports what each click leaves picked, `null` for none — a re-click on the
+     *  picked node reports it again. The canvas keeps the pick even if
+     *  `selected` does not follow it; only a change to `selected` is pushed in. */
+    onSelect?: (id: string | null) => void;
+    /** The smallest scale the initial fit may use. Unset, the whole diagram fits
+     *  however small that makes it; set, it stops here and the rest is a pan away. */
+    minScale?: number;
+    /** Which part of a diagram too big for the box it opens on: its middle
+     *  (default) or its top-left, where a layered flow begins. */
+    anchor?: 'center' | 'start';
+    className?: string;
+}
+/** A read-only diagram: drag or wheel to pan, zoom, and pick a node, nothing else. A new `specs`
+ *  array is a new scene, fitted to the box, so memoize it: one built inline
+ *  remounts the scene on every render. Labels paint only in a registered font
+ *  family; `diagramScene` defaults to sans-serif, so call
+ *  `registerCanvasFont('sans-serif')` or text renders blank. */
+declare function DiagramView(props: DiagramViewProps): react.JSX.Element;
+
+/** Keeps a canvas selection and a controlled `selected` prop in step: a prop
+ *  change is pushed in, and every click reports what the selection holds after
+ *  it — a re-click on the picked node included. Wire the returned handler to
+ *  `<SceneCanvas onClick>`. */
+declare function useMirroredSelection(selection: Pick<SelectionApi, 'get' | 'set'>, selected: string | null | undefined, onSelect: ((id: string | null) => void) | undefined): () => void;
+
+export { type ApplyLayoutOptions, CONNECT_ACTION_ID, type CanConnect, type ConnectActionOptions, DEFAULT_EDGE_STROKE, DIAGRAM_EDGE, DIAGRAM_LABEL, type DataEdge, type DataNode, type DiagramContributionOptions, type DiagramData, type DiagramEdge, type DiagramLabel, DiagramNode, DiagramNodeLike, DiagramNodeReader, type DiagramSceneData, type DiagramSceneOptions, type DiagramShapeOptions, type DiagramSpec, DiagramView, type DiagramViewProps, EASED_LAYOUTS, EDGE_DERIVE_PATH, type EasedProducerOptions, type EdgeEnd, type EdgeRouteOptions, type EdgeStyle, ForceOptions, type ForceProducerOptions, GRAB_PORT_ACTION_ID, Graph, GraphSource, LABEL_DERIVE_POSE, LAYOUTS, LAYOUT_ACTION_ID, type LabelPoseOptions, type LayoutActionOptions, LayoutFn, LayoutOptions, LayoutResult, type LiveLayout, type LiveLayoutCtx, type LiveLayoutFrame, type LiveLayoutProducer, type NodeStyle, PORT_AFFORDANCE_KIND, PORT_LAYER_ID, type ParticipantPose, type ParticipantScene, type ParticipantSource, type PendingEdge, Port, type PortAffordanceOptions, type PortScratch, PortsOptions, ROUTERS, type RouteRequest, type Router, type UseLiveLayoutOptions, applyLayout, bezier, 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 };

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