@likec4/diagram 1.43.0 → 1.45.0

package/dist/likec4diagram/state/assign.js

@@ -1,91 +1,28 @@
-import { nonNullable, invariant } from '@likec4/core';
+import { nonNullable } from '@likec4/core';
 import { getNodeDimensions } from '@xyflow/system';
 import { deepEqual } from 'fast-equals';
-import { omit, mergeDeep, isEmpty } from 'remeda';
+import { mergeDeep } from 'remeda';
 import { assertEvent } from 'xstate';
-import { Base } from '../../base/types.js';
-import { VectorImpl, vector } from '../../utils/vector.js';
-import { SeqParallelAreaColor } from '../xyflow-sequence/const.js';
+import { vector } from '../../utils/vector.js';
+import { getNodeCenter } from '../../utils/xyflow.js';
+import { updateNodes } from '../../base/updateNodes.js';
+import { updateEdges } from '../../base/updateEdges.js';
+import { Base } from '../../base/Base.js';
 
-function lastClickedNode(params) {
-  const { lastClickedNode: lastClickedNode2 } = params.context;
-  if (!lastClickedNode2 || lastClickedNode2.id !== params.event.node.id) {
+function mergeXYNodesEdges(context, event) {
+  const nextView = event.view;
+  const currentView = context.view;
+  const isSameView = currentView.id === nextView.id;
+  const isDynamicViewUpdate = nextView._type === "dynamic" && nextView.variant === "sequence";
+  if (isDynamicViewUpdate) {
     return {
-      id: params.event.node.id,
-      clicks: 1,
-      timestamp: Date.now()
+      xynodes: event.xynodes,
+      xyedges: event.xyedges,
+      view: nextView
     };
   }
-  return {
-    id: lastClickedNode2.id,
-    clicks: lastClickedNode2.clicks + 1,
-    timestamp: Date.now()
-  };
-}
-function mergeXYNodesEdges({ context, event }) {
-  assertEvent(event, "update.view");
-  const nextView = event.view;
-  const isSameView = context.view.id === nextView.id;
-  const currentNodes = context.xynodes;
-  const xynodes = event.xynodes.map((update) => {
-    const existing = currentNodes.find((n) => n.id === update.id);
-    if (existing) {
-      const { width: existingWidth, height: existingHeight } = getNodeDimensions(existing);
-      if (deepEqual(existing.type, update.type) && deepEqual(existingWidth, update.initialWidth) && deepEqual(existingHeight, update.initialHeight) && deepEqual(existing.hidden ?? false, update.hidden ?? false) && deepEqual(existing.position, update.position) && deepEqual(existing.data, update.data) && deepEqual(existing.parentId ?? null, update.parentId ?? null)) {
-        return existing;
-      }
-      return {
-        ...omit(existing, ["measured", "parentId"]),
-        ...update,
-        // Force dimensions from update
-        width: update.initialWidth,
-        height: update.initialHeight,
-        data: {
-          ...existing.data,
-          ...update.data
-        }
-      };
-    }
-    return update;
-  });
-  let xyedges = event.xyedges;
-  if (isSameView && !nextView.hasLayoutDrift) {
-    const currentEdges = context.xyedges;
-    xyedges = event.xyedges.map((update) => {
-      const existing = currentEdges.find((n) => n.id === update.id);
-      if (existing && existing.type === update.type) {
-        if (deepEqual(existing.hidden ?? false, update.hidden ?? false) && deepEqual(existing.data, update.data) && deepEqual(existing.source, update.source) && deepEqual(existing.target, update.target) && deepEqual(existing.sourceHandle, update.sourceHandle) && deepEqual(existing.targetHandle, update.targetHandle)) {
-          return existing;
-        }
-        return {
-          ...omit(existing, ["sourceHandle", "targetHandle"]),
-          ...update,
-          data: {
-            ...existing.data,
-            ...update.data
-          }
-        };
-      }
-      return update;
-    });
-  }
-  if (!isSameView) {
-    for (const node of xynodes) {
-      node.data = {
-        ...node.data,
-        dimmed: false,
-        hovered: false
-      };
-    }
-    for (const edge of xyedges) {
-      edge.data = {
-        ...edge.data,
-        dimmed: false,
-        hovered: false,
-        active: false
-      };
-    }
-  }
+  const xynodes = updateNodes(context.xynodes, event.xynodes);
+  const xyedges = isSameView ? updateEdges(context.xyedges, event.xyedges) : event.xyedges;
   return {
     xynodes,
     xyedges,
@@ -117,125 +54,8 @@ function focusNodesEdges(params) {
     xyedges
   };
 }
-function updateNavigationHistory({ context, event }) {
-  assertEvent(event, "update.view");
-  let {
-    navigationHistory: {
-      currentIndex,
-      history
-    },
-    lastOnNavigate,
-    viewport
-  } = context;
-  const stepCurrent = history[currentIndex];
-  if (!stepCurrent) {
-    return {
-      navigationHistory: {
-        currentIndex: 0,
-        history: [
-          {
-            viewId: event.view.id,
-            fromNode: null,
-            viewport: { ...viewport }
-          }
-        ]
-      }
-    };
-  }
-  if (stepCurrent.viewId !== event.view.id) {
-    if (!lastOnNavigate) {
-      const stepBack = currentIndex > 0 ? nonNullable(history[currentIndex - 1]) : null;
-      if (stepBack && stepBack.viewId === event.view.id) {
-        return {
-          navigationHistory: {
-            currentIndex: currentIndex - 1,
-            history
-          },
-          lastOnNavigate: {
-            fromView: stepCurrent.viewId,
-            toView: stepBack.viewId,
-            fromNode: stepCurrent.fromNode
-          }
-        };
-      }
-      const stepForward = currentIndex < history.length - 1 ? nonNullable(history[currentIndex + 1]) : null;
-      if (stepForward && stepForward.viewId === event.view.id) {
-        return {
-          navigationHistory: {
-            currentIndex: currentIndex + 1,
-            history
-          },
-          lastOnNavigate: {
-            fromView: stepCurrent.viewId,
-            toView: stepForward.viewId,
-            fromNode: stepForward.fromNode
-          }
-        };
-      }
-    }
-    history = [
-      ...history.slice(0, currentIndex + 1),
-      {
-        viewId: event.view.id,
-        fromNode: lastOnNavigate?.fromNode ?? null,
-        viewport: { ...viewport }
-      }
-    ];
-    currentIndex = history.length - 1;
-    return {
-      navigationHistory: {
-        currentIndex,
-        history
-      }
-    };
-  }
-  return {};
-}
-function navigateBack({ context }) {
-  const {
-    navigationHistory: {
-      currentIndex,
-      history
-    }
-  } = context;
-  invariant(currentIndex > 0, "Cannot navigate back");
-  const stepCurrent = history[currentIndex];
-  const stepBack = history[currentIndex - 1];
-  return {
-    navigationHistory: {
-      currentIndex: currentIndex - 1,
-      history
-    },
-    lastOnNavigate: {
-      fromView: stepCurrent.viewId,
-      toView: stepBack.viewId,
-      fromNode: stepCurrent.fromNode
-    }
-  };
-}
-function navigateForward({ context }) {
-  const {
-    navigationHistory: {
-      currentIndex,
-      history
-    }
-  } = context;
-  invariant(currentIndex < history.length - 1, "Cannot navigate forward");
-  const stepCurrent = history[currentIndex];
-  const stepForward = history[currentIndex + 1];
-  return {
-    navigationHistory: {
-      currentIndex: currentIndex + 1,
-      history
-    },
-    lastOnNavigate: {
-      fromView: stepCurrent.viewId,
-      toView: stepForward.viewId,
-      fromNode: stepForward.fromNode
-    }
-  };
-}
 function updateNodeData({ context, event }) {
+  console.log("updateNodeData called", event);
   assertEvent(event, "update.nodeData");
   const xynodes = context.xynodes.map((node) => {
     if (node.id !== event.nodeId) {
@@ -269,89 +89,30 @@ function updateEdgeData({ context, event }) {
   });
   return { xyedges };
 }
-function resetEdgeControlPoints({ context }) {
-  const { xynodes } = context;
-  function getNodeCenter(node, nodes) {
-    const dimensions = vector({ x: node.width || 0, y: node.height || 0 });
-    let position = vector(node.position).add(dimensions.mul(0.5));
-    let currentNode = node;
-    do {
-      const parent = currentNode.parentId && nodes.find((x) => x.id == currentNode.parentId);
-      if (!parent) {
-        break;
-      }
-      currentNode = parent;
-      position = position.add(parent.position);
-    } while (true);
-    return position;
-  }
-  function getControlPointForEdge(edge) {
-    const source = xynodes.find((x) => x.id == edge.source);
-    const target = xynodes.find((x) => x.id == edge.target);
-    if (!source || !target) {
-      return [];
-    }
-    const sourceCenter = getNodeCenter(source, xynodes);
-    const targetCenter = getNodeCenter(target, xynodes);
-    if (!sourceCenter || !targetCenter) {
-      return [];
-    }
-    if (source === target) {
-      const loopSize = 80;
-      const centerOfTopBoundary = new VectorImpl(0, source.height || 0).mul(-0.5).add(sourceCenter);
-      return [
-        centerOfTopBoundary.add(new VectorImpl(-loopSize / 2.5, -loopSize)),
-        centerOfTopBoundary.add(new VectorImpl(loopSize / 2.5, -loopSize))
-      ];
-    }
-    const sourceToTargetVector = targetCenter.sub(sourceCenter);
-    const sourceBorderPoint = getBorderPointOnVector(source, sourceCenter, sourceToTargetVector);
-    const targetBorderPoint = getBorderPointOnVector(target, targetCenter, sourceToTargetVector.mul(-1));
-    return [sourceBorderPoint.add(targetBorderPoint.sub(sourceBorderPoint).mul(0.3))];
-  }
-  function getBorderPointOnVector(node, nodeCenter, v) {
-    const xScale = (node.width || 0) / 2 / v.x;
-    const yScale = (node.height || 0) / 2 / v.y;
-    const scale = Math.min(Math.abs(xScale), Math.abs(yScale));
-    return vector(v).mul(scale).add(nodeCenter);
-  }
-  return {
-    xyedges: context.xyedges.map((edge) => {
-      if (!edge.data.controlPoints || isEmpty(edge.data.controlPoints)) {
-        return edge;
-      }
-      return {
-        ...edge,
-        data: {
-          ...edge.data,
-          controlPoints: getControlPointForEdge(edge)
-        }
-      };
-    })
-  };
+function getBorderPointOnVector(node, nodeCenter, v) {
+  const dimensions = getNodeDimensions(node);
+  const xScale = dimensions.width / 2 / v.x;
+  const yScale = dimensions.height / 2 / v.y;
+  const scale = Math.min(Math.abs(xScale), Math.abs(yScale));
+  return vector(v).multiply(scale).add(nodeCenter);
 }
-function updateActiveWalkthrough({ context }) {
-  const { stepId, parallelPrefix } = nonNullable(context.activeWalkthrough, "activeWalkthrough is null");
-  const step = nonNullable(context.xyedges.find((x) => x.id === stepId));
-  return {
-    xyedges: context.xyedges.map((edge) => {
-      const active = stepId === edge.id || !!parallelPrefix && edge.id.startsWith(parallelPrefix);
-      return Base.setData(edge, {
-        active,
-        dimmed: stepId !== edge.id
-      });
-    }),
-    xynodes: context.xynodes.map((node) => {
-      const dimmed = step.source !== node.id && step.target !== node.id;
-      if (node.type === "seq-parallel") {
-        return Base.setData(node, {
-          color: parallelPrefix === node.data.parallelPrefix ? SeqParallelAreaColor.active : SeqParallelAreaColor.default,
-          dimmed
-        });
-      }
-      return Base.setDimmed(node, dimmed);
-    })
-  };
+function resetEdgeControlPoints(nodeLookup, edge) {
+  const source = nonNullable(nodeLookup.get(edge.source), `Source node ${edge.source} not found`);
+  const target = nonNullable(nodeLookup.get(edge.target), `Target node ${edge.target} not found`);
+  const sourceCenter = vector(getNodeCenter(source));
+  const targetCenter = vector(getNodeCenter(target));
+  if (source === target) {
+    const loopSize = 80;
+    const centerOfTopBoundary = vector(0, source.height || 0).multiply(-0.5).add(sourceCenter);
+    return [
+      centerOfTopBoundary.add(vector(-loopSize / 2.5, -loopSize)),
+      centerOfTopBoundary.add(vector(loopSize / 2.5, -loopSize))
+    ];
+  }
+  const sourceToTargetVector = targetCenter.subtract(sourceCenter);
+  const sourceBorderPoint = getBorderPointOnVector(source, sourceCenter, sourceToTargetVector);
+  const targetBorderPoint = getBorderPointOnVector(target, targetCenter, sourceToTargetVector.multiply(-1));
+  return [sourceBorderPoint.add(targetBorderPoint.subtract(sourceBorderPoint).multiply(0.4))];
 }
 
-export { focusNodesEdges, lastClickedNode, mergeXYNodesEdges, navigateBack, navigateForward, resetEdgeControlPoints, updateActiveWalkthrough, updateEdgeData, updateNavigationHistory, updateNodeData };
+export { focusNodesEdges, mergeXYNodesEdges, resetEdgeControlPoints, updateEdgeData, updateNodeData };

package/dist/likec4diagram/state/createViewChange.d.ts

@@ -0,0 +1,3 @@
+import { ViewChange } from '@likec4/core/types';
+import { DiagramContext } from './types';
+export declare function createViewChange(parentContext: Pick<DiagramContext, 'view' | 'xynodes' | 'xyedges' | 'xystore'>): ViewChange.SaveViewSnapshot;

package/dist/likec4diagram/state/createViewChange.js

@@ -0,0 +1,79 @@
+import { getNodeDimensions } from '@xyflow/system';
+import { map, omit, hasAtLeast } from 'remeda';
+import { calcViewBounds } from '../../utils/view-bounds.js';
+import { isSamePoint, bezierControlPoints } from '../../utils/xyflow.js';
+
+function createViewChange(parentContext) {
+  const {
+    view: {
+      drifts: _1,
+      // Ignore drifts from view
+      _layout: _2,
+      // Ignore layout type from view
+      ...view
+    },
+    xystore
+  } = parentContext;
+  const { nodeLookup, edgeLookup } = xystore.getState();
+  const movedNodes = /* @__PURE__ */ new Set();
+  const nodes = map(view.nodes, (node) => {
+    const internal = nodeLookup.get(node.id);
+    if (!internal) {
+      console.error(`Internal node not found for ${node.id}`);
+      return node;
+    }
+    const dimensions = getNodeDimensions(internal);
+    const isChanged = !isSamePoint(internal.internals.positionAbsolute, node) || node.width !== dimensions.width || node.height !== dimensions.height;
+    if (isChanged) {
+      movedNodes.add(node.id);
+    }
+    return {
+      ...node,
+      shape: internal.data.shape,
+      color: internal.data.color,
+      style: {
+        ...internal.data.style
+      },
+      x: Math.floor(internal.internals.positionAbsolute.x),
+      y: Math.floor(internal.internals.positionAbsolute.y),
+      width: Math.ceil(dimensions.width),
+      height: Math.ceil(dimensions.height)
+    };
+  });
+  const edges = map(view.edges, (edge) => {
+    const xyedge = edgeLookup.get(edge.id);
+    if (!xyedge) {
+      console.error(`Internal edge not found for ${edge.id}`);
+      return edge;
+    }
+    const data = xyedge.data;
+    let controlPoints = data.controlPoints ?? [];
+    const sourceOrTargetMoved = movedNodes.has(xyedge.source) || movedNodes.has(xyedge.target);
+    if (controlPoints.length === 0 && sourceOrTargetMoved) {
+      controlPoints = bezierControlPoints(data.points);
+    }
+    const _updated = {
+      ...omit(edge, ["controlPoints", "labelBBox"]),
+      points: data.points
+    };
+    if (data.labelBBox) {
+      _updated.labelBBox = data.labelBBox;
+    }
+    if (hasAtLeast(controlPoints, 1)) {
+      _updated.controlPoints = controlPoints;
+    }
+    return _updated;
+  });
+  const snapshot = {
+    ...view,
+    bounds: calcViewBounds({ nodes, edges }),
+    nodes,
+    edges
+  };
+  return {
+    op: "save-view-snapshot",
+    layout: snapshot
+  };
+}
+
+export { createViewChange };

package/dist/likec4diagram/state/diagram-api.d.ts

@@ -0,0 +1,109 @@
+import { DynamicViewDisplayVariant, NodeNotation as ElementNotation, ViewChange } from '@likec4/core/types';
+import { PartialDeep } from 'type-fest';
+import { FeatureName } from '../../context/DiagramFeatures';
+import { OpenSourceParams } from '../../LikeC4Diagram.props';
+import { Types } from '../types';
+import { AlignmentMode } from './aligners';
+import { DiagramActorRef, DiagramContext, DiagramEvents } from './types';
+import type * as t from '@likec4/core/types';
+type Any = t.aux.Any;
+type Unknown = t.aux.UnknownLayouted;
+type ViewId<A> = t.aux.ViewId<A>;
+type Fqn<A> = t.aux.Fqn<A>;
+type NodeId = t.aux.NodeId;
+type EdgeId = t.aux.EdgeId;
+export interface DiagramApi<A extends Any = Unknown> {
+    readonly actor: DiagramActorRef;
+    /**
+     * @warning Do not use in render phase
+     */
+    readonly currentView: t.DiagramView<A>;
+    /**
+     * Send event to diagram actor
+     */
+    send(event: DiagramEvents): void;
+    /**
+     * Navigate to view
+     */
+    navigateTo(viewId: ViewId<A>, fromNode?: NodeId): void;
+    /**
+     * Navigate back or forward in history
+     */
+    navigate(direction: 'back' | 'forward'): void;
+    /**
+     * Fit diagram to view
+     */
+    fitDiagram(duration?: number): void;
+    /**
+     * Open relationships browser
+     */
+    openRelationshipsBrowser(fqn: Fqn<A>): void;
+    /**
+     * If running in editor, trigger opening source file
+     */
+    openSource(params: OpenSourceParams<A>): void;
+    /**
+     * Open element details card
+     */
+    openElementDetails(fqn: Fqn<A>, fromNode?: NodeId): void;
+    openRelationshipDetails(...params: [edgeId: EdgeId] | [source: Fqn<A>, target: Fqn<A>]): void;
+    updateNodeData(nodeId: NodeId, data: PartialDeep<Types.NodeData>): void;
+    updateEdgeData(edgeId: EdgeId, data: PartialDeep<Types.EdgeData>): void;
+    /**
+     * Start editing, either node or edge
+     */
+    startEditing(subject: 'node' | 'edge'): void;
+    /**
+     * Stop editing
+     * @param wasChanged - whether there were changes made during editing
+     * @default false
+     */
+    stopEditing(wasChanged?: boolean): void;
+    /**
+     * Undo last editing operation
+     * @returns true if there was something to undo
+     */
+    undoEditing(): boolean;
+    /**
+     * Align nodes
+     */
+    align(mode: AlignmentMode): void;
+    /**
+     * Reset edge control points
+     */
+    resetEdgeControlPoints(): void;
+    /**
+     * Focus node
+     */
+    focusNode(nodeId: NodeId): void;
+    /**
+     * @warning Do not use in render phase
+     */
+    getContext(): DiagramContext;
+    /**
+     * @warning Do not use in render phase
+     */
+    findDiagramNode(xynodeId: string): t.DiagramNode<A> | null;
+    /**
+     * @warning Do not use in render phase
+     */
+    findEdge(xyedgeId: string): Types.Edge | null;
+    /**
+     * @warning Do not use in render phase
+     */
+    findDiagramEdge(xyedgeId: string): t.DiagramEdge<A> | null;
+    startWalkthrough(): void;
+    walkthroughStep(direction?: 'next' | 'previous'): void;
+    stopWalkthrough(): void;
+    toggleFeature(feature: FeatureName, forceValue?: boolean): void;
+    highlightNotation(notation: ElementNotation, kind?: string): void;
+    unhighlightNotation(): void;
+    openSearch(searchValue?: string): void;
+    triggerChange(viewChange: ViewChange): void;
+    /**
+     * Switch dynamic view display variant
+     */
+    switchDynamicViewVariant(variant: DynamicViewDisplayVariant): void;
+}
+export declare function makeDiagramApi<A extends Any = Unknown>(actor: DiagramActorRef): DiagramApi<A>;
+export {};

package/dist/likec4diagram/state/diagram-api.js

@@ -0,0 +1,126 @@
+import { invariant } from '@likec4/core/utils';
+import { findDiagramEdge, findDiagramNode, typedSystem } from './utils.js';
+
+function makeDiagramApi(actor) {
+  return {
+    actor,
+    send: (event) => actor.send(event),
+    navigateTo: (viewId, fromNode) => {
+      actor.send({
+        type: "navigate.to",
+        viewId,
+        ...fromNode && { fromNode }
+      });
+    },
+    navigate: (direction) => {
+      actor.send({ type: `navigate.${direction}` });
+    },
+    fitDiagram: (duration = 350) => {
+      actor.send({ type: "xyflow.fitDiagram", duration });
+    },
+    openRelationshipsBrowser: (fqn) => {
+      actor.send({ type: "open.relationshipsBrowser", fqn });
+    },
+    openSource: (params) => {
+      actor.send({ type: "open.source", ...params });
+    },
+    openElementDetails: (fqn, fromNode) => {
+      actor.send({ type: "open.elementDetails", fqn, fromNode });
+    },
+    openRelationshipDetails: (...params) => {
+      if (params.length === 1) {
+        actor.send({ type: "open.relationshipDetails", params: { edgeId: params[0] } });
+      } else {
+        actor.send({ type: "open.relationshipDetails", params: { source: params[0], target: params[1] } });
+      }
+    },
+    updateNodeData: (nodeId, data) => {
+      actor.send({ type: "update.nodeData", nodeId, data });
+    },
+    updateEdgeData: (edgeId, data) => {
+      actor.send({ type: "update.edgeData", edgeId, data });
+    },
+    startEditing: (subject) => {
+      const syncActor = typedSystem(actor.system).syncLayoutActorRef;
+      invariant(syncActor, "No sync layout actor found in diagram actor system");
+      syncActor.send({ type: "editing.start", subject });
+    },
+    stopEditing: (wasChanged = false) => {
+      const syncActor = typedSystem(actor.system).syncLayoutActorRef;
+      invariant(syncActor, "No sync layout actor found in diagram actor system");
+      syncActor.send({ type: "editing.stop", wasChanged });
+    },
+    undoEditing: () => {
+      const syncActor = typedSystem(actor.system).syncLayoutActorRef;
+      invariant(syncActor, "No sync layout actor found in diagram actor system");
+      const hasUndo = syncActor.getSnapshot().context.history.length > 0;
+      if (hasUndo) {
+        syncActor.send({ type: "undo" });
+      }
+      return hasUndo;
+    },
+    align: (mode) => {
+      actor.send({ type: "layout.align", mode });
+    },
+    resetEdgeControlPoints: () => {
+      actor.send({ type: "layout.resetEdgeControlPoints" });
+    },
+    focusNode: (nodeId) => {
+      actor.send({ type: "focus.node", nodeId });
+    },
+    /**
+     * @warning Do not use in render phase
+     */
+    get currentView() {
+      return actor.getSnapshot().context.view;
+    },
+    /**
+     * @warning Do not use in render phase
+     */
+    getContext: () => actor.getSnapshot().context,
+    /**
+     * @warning Do not use in render phase
+     */
+    findDiagramNode: (xynodeId) => {
+      return findDiagramNode(actor.getSnapshot().context, xynodeId);
+    },
+    findEdge: (xyedgeId) => {
+      return actor.getSnapshot().context.xyedges.find((e) => e.data.id === xyedgeId) ?? null;
+    },
+    /**
+     * @warning Do not use in render phase
+     */
+    findDiagramEdge: (xyedgeId) => {
+      return findDiagramEdge(actor.getSnapshot().context, xyedgeId);
+    },
+    startWalkthrough: () => {
+      actor.send({ type: "walkthrough.start" });
+    },
+    walkthroughStep: (direction = "next") => {
+      actor.send({ type: "walkthrough.step", direction });
+    },
+    stopWalkthrough: () => {
+      actor.send({ type: "walkthrough.end" });
+    },
+    toggleFeature: (feature, forceValue) => {
+      actor.send({ type: "toggle.feature", feature, ...forceValue !== void 0 && { forceValue } });
+    },
+    highlightNotation: (notation, kind) => {
+      actor.send({ type: "notations.highlight", notation, ...kind && { kind } });
+    },
+    unhighlightNotation: () => {
+      actor.send({ type: "notations.unhighlight" });
+    },
+    openSearch: (searchValue) => {
+      actor.send({ type: "open.search", ...searchValue && { search: searchValue } });
+    },
+    triggerChange: (change) => {
+      actor.send({ type: "emit.onChange", change });
+    },
+    switchDynamicViewVariant: (variant) => {
+      actor.send({ type: "switch.dynamicViewVariant", variant });
+    }
+  };
+}
+
+export { makeDiagramApi };