@likec4/diagram 1.18.0 → 1.19.1

package/dist/state/diagramStore.js

@@ -0,0 +1,808 @@
+import { nonNullable, getBBoxCenter, invariant, nonexhaustive, isStepEdgeId, getParallelStepsPrefix } from "@likec4/core";
+import { applyNodeChanges, applyEdgeChanges, getViewportForBounds } from "@xyflow/react";
+import { getNodeDimensions, getBoundsOfRects, boxToRect } from "@xyflow/system";
+import { DEV } from "esm-env";
+import { deepEqual, shallowEqual } from "fast-equals";
+import { isNullish, entries, reduce, hasAtLeast, first, map, prop } from "remeda";
+import { subscribeWithSelector, devtools } from "zustand/middleware";
+import { shallow } from "zustand/shallow";
+import { createWithEqualityFn } from "zustand/traditional";
+import { VectorImpl, vector } from "../utils/vector.js";
+import { MinZoom } from "../xyflow/const.js";
+import { toDomPrecision, isSamePoint, bezierControlPoints, isInside } from "../xyflow/utils.js";
+import { diagramViewToXYFlowData } from "./diagram-to-xyflow.js";
+import { align } from "./diagramStore.layout.js";
+const StringSet = Set;
+const DEFAULT_PROPS = {
+  xyedges: [],
+  xynodes: [],
+  isDynamicView: false,
+  viewSyncDebounceTimeout: null,
+  initialized: false,
+  navigationHistoryIndex: 0,
+  viewportChanged: false,
+  activeOverlay: null,
+  activeWalkthrough: null,
+  focusedNodeId: null,
+  hoveredEdgeId: null,
+  lastClickedNodeId: null,
+  lastClickedEdgeId: null,
+  dimmed: new StringSet(),
+  lastOnNavigate: null
+};
+const noReplace = false;
+let StoreDevId = 1;
+const EmptyStringSet = new StringSet();
+function createDiagramStore(props) {
+  const storeDevId = "DiagramStore" + String(StoreDevId++).padStart(2, "0");
+  const {
+    xynodes,
+    xyedges
+  } = diagramViewToXYFlowData(props.view, {
+    where: props.whereFilter,
+    draggable: props.nodesDraggable,
+    selectable: props.nodesSelectable
+  });
+  return createWithEqualityFn(
+    subscribeWithSelector(
+      devtools(
+        (set, get) => ({
+          ...DEFAULT_PROPS,
+          ...props,
+          storeDevId,
+          isDynamicView: props.view.__ === "dynamic",
+          xynodes,
+          xyedges,
+          navigationHistory: [{
+            viewId: props.view.id,
+            nodeId: null
+          }],
+          navigationHistoryIndex: 0,
+          onNodesChange: (changes) => {
+            set({
+              xynodes: applyNodeChanges(changes, get().xynodes)
+            });
+          },
+          onEdgesChange: (changes) => {
+            set({
+              xyedges: applyEdgeChanges(changes, get().xyedges)
+            });
+          },
+          updateView: (nextView) => {
+            let {
+              viewSyncDebounceTimeout,
+              xyflow,
+              xystore,
+              dimmed,
+              whereFilter,
+              view: current,
+              lastOnNavigate,
+              navigationHistory,
+              navigationHistoryIndex,
+              focusedNodeId,
+              lastClickedNodeId,
+              lastClickedEdgeId,
+              activeWalkthrough,
+              activeOverlay,
+              nodesDraggable,
+              nodesSelectable,
+              hoveredEdgeId,
+              xyedges: xyedges2,
+              xynodes: xynodes2
+            } = get();
+            if (viewSyncDebounceTimeout !== null) {
+              clearTimeout(viewSyncDebounceTimeout);
+              viewSyncDebounceTimeout = null;
+            }
+            const isSameView = current.id === nextView.id;
+            if (isSameView) {
+              const nodeIds = new StringSet(nextView.nodes.map((n) => n.id));
+              const edgeIds = new StringSet(nextView.edges.map((e) => e.id));
+              if (lastClickedNodeId && !nodeIds.has(lastClickedNodeId)) {
+                lastClickedNodeId = null;
+              }
+              if (focusedNodeId && !nodeIds.has(focusedNodeId)) {
+                focusedNodeId = null;
+                dimmed = EmptyStringSet;
+              }
+              if (lastClickedEdgeId && !edgeIds.has(lastClickedEdgeId)) {
+                lastClickedEdgeId = null;
+              }
+              if (hoveredEdgeId && !edgeIds.has(hoveredEdgeId)) {
+                hoveredEdgeId = null;
+              }
+              if (activeWalkthrough && !edgeIds.has(activeWalkthrough.stepId)) {
+                activeWalkthrough = null;
+                dimmed = EmptyStringSet;
+              }
+              if (dimmed.size > 0) {
+                let nextDimmed = new StringSet([...dimmed].filter((id) => nodeIds.has(id) || edgeIds.has(id)));
+                if (nextDimmed.size !== dimmed.size) {
+                  dimmed = nextDimmed;
+                }
+              }
+            } else {
+              const stepCurrent = nonNullable(navigationHistory[navigationHistoryIndex]);
+              if (stepCurrent.viewId !== nextView.id) {
+                navigationHistory = [
+                  ...navigationHistory.slice(0, navigationHistoryIndex + 1),
+                  {
+                    viewId: nextView.id,
+                    nodeId: (lastOnNavigate == null ? void 0 : lastOnNavigate.fromNode) || null
+                  }
+                ];
+                navigationHistoryIndex = navigationHistory.length - 1;
+              } else {
+                if (stepCurrent.nodeId) {
+                  lastOnNavigate ?? (lastOnNavigate = {
+                    fromView: current.id,
+                    toView: nextView.id,
+                    fromNode: stepCurrent.nodeId
+                  });
+                }
+              }
+              if (lastOnNavigate && lastOnNavigate.toView !== nextView.id) {
+                lastOnNavigate = null;
+              }
+              const elTo = lastOnNavigate && nextView.nodes.find((n) => n.id === (lastOnNavigate == null ? void 0 : lastOnNavigate.fromNode));
+              const xynodeFrom = elTo && xyflow.getInternalNode(elTo.id);
+              if (!lastOnNavigate || isNullish(elTo) || isNullish(xynodeFrom)) {
+                const zoom = xyflow.getZoom();
+                const { x, y } = getBBoxCenter(nextView.bounds);
+                xyflow.setCenter(x, y, { zoom });
+                lastOnNavigate = null;
+              }
+              if (lastOnNavigate && !!elTo && !!xynodeFrom) {
+                const fromPos = xyflow.flowToScreenPosition({
+                  x: xynodeFrom.internals.positionAbsolute.x,
+                  // + dimensions.width / 2,
+                  y: xynodeFrom.internals.positionAbsolute.y
+                  // + dimensions.height / 2
+                }), toPos = xyflow.flowToScreenPosition({
+                  x: elTo.position[0],
+                  // + elFrom.width / 2,
+                  y: elTo.position[1]
+                  // + elFrom.height / 2
+                }), diff = {
+                  x: toDomPrecision(fromPos.x - toPos.x),
+                  y: toDomPrecision(fromPos.y - toPos.y)
+                };
+                xystore.getState().panBy(diff);
+                lastOnNavigate = null;
+              }
+              lastClickedEdgeId = null;
+              lastClickedNodeId = null;
+              hoveredEdgeId = null;
+              focusedNodeId = null;
+              activeWalkthrough = null;
+              activeOverlay = null;
+              dimmed = EmptyStringSet;
+            }
+            const update = diagramViewToXYFlowData(nextView, {
+              where: whereFilter,
+              draggable: nodesDraggable,
+              selectable: nodesSelectable
+            });
+            update.xynodes = update.xynodes.map((update2) => {
+              const existing = xynodes2.find((n) => n.id === update2.id);
+              if (existing && existing.type === update2.type && deepEqual(existing.parentId ?? null, update2.parentId ?? null)) {
+                if (existing.width === update2.width && existing.height === update2.height && deepEqual(existing.hidden ?? false, update2.hidden ?? false) && deepEqual(existing.position, update2.position) && deepEqual(existing.data, update2.data)) {
+                  return existing;
+                }
+                return {
+                  ...existing,
+                  ...update2
+                };
+              }
+              return update2;
+            });
+            if (isSameView && !nextView.hasLayoutDrift) {
+              update.xyedges = update.xyedges.map((update2) => {
+                const existing = xyedges2.find((n) => n.id === update2.id);
+                if (existing) {
+                  if (deepEqual(existing.hidden ?? false, update2.hidden ?? false) && deepEqual(existing.data.label, update2.data.label) && deepEqual(existing.data.controlPoints, update2.data.controlPoints) && deepEqual(existing.data.edge, update2.data.edge)) {
+                    return existing;
+                  }
+                  return {
+                    ...existing,
+                    ...update2,
+                    data: {
+                      ...existing.data,
+                      ...update2.data
+                    }
+                  };
+                }
+                return update2;
+              });
+            }
+            set(
+              {
+                isDynamicView: nextView.__ === "dynamic",
+                viewSyncDebounceTimeout,
+                view: nextView,
+                activeWalkthrough,
+                activeOverlay,
+                lastOnNavigate,
+                lastClickedNodeId,
+                lastClickedEdgeId,
+                focusedNodeId,
+                hoveredEdgeId,
+                navigationHistory,
+                navigationHistoryIndex,
+                dimmed,
+                xynodes: !isSameView || !shallowEqual(update.xynodes, xynodes2) ? update.xynodes : xynodes2,
+                xyedges: !isSameView || !shallowEqual(update.xyedges, xyedges2) ? update.xyedges : xyedges2
+              },
+              noReplace,
+              isSameView ? "update-view [same]" : "update-view [another]"
+            );
+          },
+          focusOnNode: (nodeId) => {
+            const { focusedNodeId, view, enableFocusMode } = get();
+            invariant(enableFocusMode, "focus mode is not enabled");
+            if (nodeId === false) {
+              set(
+                {
+                  activeWalkthrough: null,
+                  activeOverlay: null,
+                  focusedNodeId: null,
+                  dimmed: EmptyStringSet
+                },
+                noReplace,
+                `unfocus`
+              );
+              return;
+            }
+            if (nodeId !== focusedNodeId) {
+              const notDimmed = new StringSet([nodeId]);
+              const dimmed = new StringSet();
+              for (const edge of view.edges) {
+                if (edge.source === nodeId || edge.target === nodeId) {
+                  notDimmed.add(edge.source);
+                  notDimmed.add(edge.target);
+                } else {
+                  dimmed.add(edge.id);
+                }
+              }
+              for (const node of view.nodes) {
+                if (notDimmed.has(node.id)) {
+                  continue;
+                }
+                dimmed.add(node.id);
+              }
+              set(
+                {
+                  activeWalkthrough: null,
+                  activeOverlay: null,
+                  focusedNodeId: nodeId,
+                  dimmed
+                },
+                noReplace,
+                `focus on node: ${nodeId}`
+              );
+            }
+          },
+          setHoveredEdge: (edgeId) => {
+            if (edgeId !== get().hoveredEdgeId) {
+              set({ hoveredEdgeId: edgeId });
+            }
+          },
+          setLastClickedNode: (nodeId) => {
+            if (nodeId !== get().lastClickedNodeId) {
+              set({ lastClickedNodeId: nodeId });
+            }
+          },
+          setLastClickedEdge: (edgeId) => {
+            if (edgeId !== get().lastClickedEdgeId) {
+              set({ lastClickedEdgeId: edgeId });
+            }
+          },
+          resetFocusAndLastClicked: () => {
+            set(
+              {
+                activeWalkthrough: null,
+                activeOverlay: null,
+                focusedNodeId: null,
+                lastClickedNodeId: null,
+                lastClickedEdgeId: null,
+                dimmed: EmptyStringSet
+              },
+              noReplace,
+              "resetLastClicked"
+            );
+            get().xystore.getState().resetSelectedElements();
+          },
+          getElement: (fqn) => {
+            const { view } = get();
+            return view.nodes.find(({ id }) => id === fqn) ?? null;
+          },
+          isEditable: () => {
+            const { readonly, onChange } = get();
+            return !readonly && !!onChange;
+          },
+          triggerChangeElementStyle: (change) => {
+            if (DEV) {
+              console.debug("triggerChangeElementStyle", change);
+            }
+            const { view, updateView, onChange } = get();
+            let hasChanges = false;
+            const nodes = view.nodes.map((origin) => {
+              var _a, _b;
+              if (!change.targets.includes(origin.id)) {
+                return origin;
+              }
+              let element = origin;
+              for (const [key, value] of entries(change.style)) {
+                switch (key) {
+                  case "shape":
+                    if (value !== element.shape) {
+                      element = {
+                        ...element,
+                        shape: value
+                      };
+                    }
+                    break;
+                  case "color":
+                    if (value !== element.color) {
+                      element = {
+                        ...element,
+                        color: value
+                      };
+                    }
+                    break;
+                  case "opacity":
+                    if (value !== ((_a = element.style) == null ? void 0 : _a.opacity)) {
+                      element = {
+                        ...element,
+                        style: {
+                          ...element.style,
+                          opacity: value
+                        }
+                      };
+                    }
+                    break;
+                  case "border":
+                    if (value !== ((_b = element.style) == null ? void 0 : _b.border)) {
+                      element = {
+                        ...element,
+                        style: {
+                          ...element.style,
+                          border: value
+                        }
+                      };
+                    }
+                    break;
+                  default:
+                    nonexhaustive(key);
+                }
+              }
+              if (element !== origin) {
+                hasChanges = true;
+                return element;
+              }
+              return origin;
+            });
+            if (hasChanges) {
+              updateView({
+                ...view,
+                nodes
+              });
+            }
+            onChange == null ? void 0 : onChange({ change });
+          },
+          cancelSaveManualLayout: () => {
+            let { viewSyncDebounceTimeout } = get();
+            if (viewSyncDebounceTimeout !== null) {
+              clearTimeout(viewSyncDebounceTimeout);
+              set({ viewSyncDebounceTimeout: null });
+              return true;
+            }
+            return false;
+          },
+          triggerSaveManualLayout: () => {
+            const { xyflow, view, onChange, xystore, viewSyncDebounceTimeout } = get();
+            if (viewSyncDebounceTimeout !== null) {
+              clearTimeout(viewSyncDebounceTimeout);
+              set({ viewSyncDebounceTimeout: null });
+            }
+            const { nodeLookup } = xystore.getState();
+            const movedNodes = new StringSet();
+            let bounds = {
+              x: 0,
+              y: 0,
+              width: 1,
+              height: 1
+            };
+            const nodes = reduce([...nodeLookup.values()], (acc, node) => {
+              const dimensions = getNodeDimensions(node);
+              if (!isSamePoint(node.internals.positionAbsolute, node.data.element.position)) {
+                movedNodes.add(node.id);
+              }
+              const rect = acc[node.data.fqn] = {
+                isCompound: node.data.element.children.length > 0,
+                x: Math.floor(node.internals.positionAbsolute.x),
+                y: Math.floor(node.internals.positionAbsolute.y),
+                width: Math.ceil(dimensions.width),
+                height: Math.ceil(dimensions.height)
+              };
+              bounds = getBoundsOfRects(bounds, rect);
+              return acc;
+            }, {});
+            const edges = reduce(xyflow.getEdges(), (acc, { source, target, data }) => {
+              var _a;
+              let controlPoints = data.controlPoints ?? [];
+              const sourceOrTargetMoved = movedNodes.has(source) || movedNodes.has(target);
+              if (controlPoints.length === 0 && sourceOrTargetMoved) {
+                controlPoints = bezierControlPoints(data.edge);
+              }
+              if (data.edge.points.length === 0 && controlPoints.length === 0) {
+                return acc;
+              }
+              const _updated = acc[data.edge.id] = {
+                points: data.edge.points
+              };
+              if ((_a = data.label) == null ? void 0 : _a.bbox) {
+                _updated.labelBBox = data.label.bbox;
+              }
+              if (data.edge.labelBBox) {
+                _updated.labelBBox ?? (_updated.labelBBox = data.edge.labelBBox);
+              }
+              if (hasAtLeast(controlPoints, 1)) {
+                _updated.controlPoints = controlPoints;
+              }
+              if (!sourceOrTargetMoved && data.edge.dotpos) {
+                _updated.dotpos = data.edge.dotpos;
+              }
+              const allX = [
+                ...data.edge.points.map((p) => p[0]),
+                ...controlPoints.map((p) => p.x),
+                ..._updated.labelBBox ? [_updated.labelBBox.x, _updated.labelBBox.x + _updated.labelBBox.width] : []
+              ];
+              const allY = [
+                ...data.edge.points.map((p) => p[1]),
+                ...controlPoints.map((p) => p.y),
+                ..._updated.labelBBox ? [_updated.labelBBox.y, _updated.labelBBox.y + _updated.labelBBox.height] : []
+              ];
+              const rect = boxToRect({
+                x: Math.floor(Math.min(...allX)),
+                y: Math.floor(Math.min(...allY)),
+                x2: Math.ceil(Math.max(...allX)),
+                y2: Math.ceil(Math.max(...allY))
+              });
+              bounds = getBoundsOfRects(bounds, rect);
+              return acc;
+            }, {});
+            const change = {
+              op: "save-manual-layout",
+              layout: {
+                hash: view.hash,
+                autoLayout: view.autoLayout,
+                nodes,
+                edges,
+                ...bounds
+              }
+            };
+            if (DEV) {
+              console.debug("triggerSaveManualLayout", change);
+            }
+            if (!isInside(bounds, view.bounds)) {
+              set(
+                {
+                  view: {
+                    ...view,
+                    bounds
+                  }
+                },
+                noReplace,
+                "update view bounds"
+              );
+            }
+            onChange == null ? void 0 : onChange({ change });
+          },
+          scheduleSaveManualLayout: () => {
+            clearTimeout(get().viewSyncDebounceTimeout ?? void 0);
+            set(
+              {
+                viewSyncDebounceTimeout: setTimeout(() => {
+                  get().triggerSaveManualLayout();
+                }, 1e3)
+                // explicit typecast to number to suppress TS error in astro build
+              },
+              noReplace,
+              "debounce sync state"
+            );
+          },
+          triggerOnNavigateTo: (xynodeId, event) => {
+            const { view, xynodes: xynodes2, onNavigateTo, cancelSaveManualLayout } = get();
+            if (!onNavigateTo) {
+              return;
+            }
+            const xynode = xynodes2.find(({ id }) => id === xynodeId);
+            invariant(xynode, `xynode not found: ${xynodeId}`);
+            const element = xynode.data.element;
+            invariant(element == null ? void 0 : element.navigateTo, `node is not navigable: ${xynodeId}`);
+            cancelSaveManualLayout();
+            set(
+              {
+                lastClickedNodeId: xynodeId,
+                lastOnNavigate: {
+                  fromView: view.id,
+                  toView: element.navigateTo,
+                  fromNode: element.id
+                }
+              },
+              noReplace,
+              "triggerOnNavigateTo"
+            );
+            onNavigateTo(
+              element.navigateTo,
+              event,
+              element
+            );
+          },
+          goBack: () => {
+            const { navigationHistory, navigationHistoryIndex, onNavigateTo } = get();
+            const { viewId, nodeId } = nonNullable(navigationHistory[navigationHistoryIndex]);
+            const stepBack = navigationHistoryIndex > 0 && navigationHistory[navigationHistoryIndex - 1] || null;
+            if (stepBack && onNavigateTo) {
+              set(
+                {
+                  lastClickedEdgeId: null,
+                  lastClickedNodeId: null,
+                  navigationHistoryIndex: navigationHistoryIndex - 1,
+                  lastOnNavigate: nodeId ? {
+                    fromView: viewId,
+                    toView: stepBack.viewId,
+                    fromNode: nodeId
+                  } : null
+                },
+                noReplace,
+                "goBack"
+              );
+              onNavigateTo(stepBack.viewId);
+            }
+          },
+          goForward: () => {
+            const { navigationHistory, navigationHistoryIndex, onNavigateTo } = get();
+            const { viewId } = nonNullable(navigationHistory[navigationHistoryIndex]);
+            const stepForward = navigationHistoryIndex < navigationHistory.length - 1 ? navigationHistory[navigationHistoryIndex + 1] : null;
+            if (stepForward && onNavigateTo) {
+              set(
+                {
+                  lastClickedEdgeId: null,
+                  lastClickedNodeId: null,
+                  navigationHistoryIndex: navigationHistoryIndex + 1,
+                  lastOnNavigate: stepForward.nodeId ? {
+                    fromView: viewId,
+                    toView: stepForward.viewId,
+                    fromNode: stepForward.nodeId
+                  } : null
+                },
+                noReplace,
+                "goForward"
+              );
+              onNavigateTo(stepForward.viewId);
+            }
+          },
+          onOpenSourceView: () => {
+            const { view, onOpenSource } = get();
+            onOpenSource == null ? void 0 : onOpenSource({
+              view: view.id
+            });
+          },
+          openOverlay: (overlay) => {
+            if (deepEqual(overlay, get().activeOverlay)) {
+              return;
+            }
+            if ("elementDetails" in overlay) {
+              const diagramNode = get().view.nodes.find(({ id }) => id === overlay.elementDetails);
+              if (!diagramNode || !diagramNode.modelRef) {
+                get().closeOverlay();
+                return;
+              }
+            }
+            set(
+              {
+                activeWalkthrough: null,
+                activeOverlay: overlay
+              },
+              noReplace,
+              "openOverlay"
+            );
+          },
+          closeOverlay: () => {
+            if (get().activeOverlay !== null) {
+              set(
+                {
+                  activeOverlay: null
+                },
+                noReplace,
+                "closeOverlay"
+              );
+            }
+          },
+          fitDiagram: (duration = 500) => {
+            const { fitViewPadding, view, xystore } = get();
+            const { width, height, panZoom, transform } = xystore.getState();
+            const bounds = view.bounds;
+            const maxZoom = Math.max(1, transform[2]);
+            const viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, fitViewPadding);
+            panZoom == null ? void 0 : panZoom.setViewport(viewport, duration > 0 ? { duration } : void 0);
+          },
+          nextDynamicStep: (increment = 1) => {
+            const { activeWalkthrough, xyedges: xyedges2, activateWalkthrough } = get();
+            const stepId = activeWalkthrough == null ? void 0 : activeWalkthrough.stepId;
+            let nextStep;
+            if (stepId) {
+              const currentIndex = xyedges2.findIndex(({ id }) => id === stepId);
+              const nextIndex = currentIndex + increment;
+              nextStep = xyedges2[nextIndex];
+            } else {
+              nextStep = first(xyedges2);
+            }
+            if (nextStep) {
+              activateWalkthrough(nextStep.data.edge.id);
+              return;
+            }
+          },
+          activateWalkthrough: (step) => {
+            const stepId = typeof step === "string" ? step : step.data.edge.id;
+            invariant(isStepEdgeId(stepId), `stepId ${stepId} is not a step edge id`);
+            let {
+              isDynamicView,
+              xyflow,
+              xyedges: xyedges2,
+              xystore,
+              fitViewPadding,
+              activeWalkthrough
+            } = get();
+            invariant(isDynamicView, "view is not dynamic");
+            const edge = typeof step === "string" ? xyedges2.find(({ id }) => id === stepId) : step;
+            invariant(edge, `edge not found: ${stepId}`);
+            const currentIndex = xyedges2.findIndex(({ id }) => id === stepId);
+            activeWalkthrough = {
+              stepId,
+              hasPrevious: currentIndex > 0,
+              hasNext: currentIndex < xyedges2.length - 1,
+              parallelPrefix: getParallelStepsPrefix(stepId)
+            };
+            const dimmed = new StringSet(
+              xyedges2.filter(
+                ({ id }) => id !== stepId && !(activeWalkthrough.parallelPrefix && id.startsWith(activeWalkthrough.parallelPrefix))
+              ).map(({ id }) => id)
+            );
+            const selected = [];
+            for (const n of xyflow.getNodes()) {
+              if (n.id === edge.source || n.id === edge.target) {
+                selected.push(n);
+                continue;
+              }
+              dimmed.add(n.id);
+            }
+            const { fitView, transform } = xystore.getState();
+            fitView({
+              duration: 400,
+              includeHiddenNodes: true,
+              maxZoom: Math.max(1, transform[2]),
+              minZoom: MinZoom,
+              padding: Math.max(fitViewPadding, 0.2),
+              nodes: selected
+            });
+            set(
+              {
+                focusedNodeId: null,
+                activeWalkthrough,
+                dimmed
+              },
+              noReplace,
+              "activateWalkthrough"
+            );
+          },
+          stopWalkthrough: () => {
+            if (get().activeWalkthrough !== null) {
+              set(
+                {
+                  activeWalkthrough: null,
+                  focusedNodeId: null,
+                  dimmed: EmptyStringSet
+                },
+                noReplace,
+                "stopWalkthrough"
+              );
+              get().fitDiagram();
+            }
+          },
+          onInit: (instance) => {
+            const { xyflow, initialized, fitViewEnabled, fitDiagram } = get();
+            if (!initialized || xyflow !== instance) {
+              if (fitViewEnabled) {
+                fitDiagram(0);
+              }
+              set(
+                {
+                  xyflow: instance,
+                  initialized: true
+                },
+                noReplace,
+                "onInit"
+              );
+            }
+          },
+          highlightByElementNotation: (notation, onlyOfKind) => {
+            const { xynodes: xynodes2, xyedges: xyedges2 } = get();
+            const dimmed = new StringSet(map(xyedges2, prop("id")));
+            xynodes2.forEach(({ id, data }) => {
+              const node = data.element;
+              if (node.shape !== notation.shape || node.color !== notation.color || !notation.kinds.includes(node.kind) || onlyOfKind && node.kind !== onlyOfKind) {
+                dimmed.add(id);
+              }
+            });
+            set({ dimmed }, noReplace, "highlightByElementNotation");
+          },
+          resetEdgeControlPoints: () => {
+            const { xyflow, scheduleSaveManualLayout, xynodes: xynodes2, xyedges: xyedges2 } = get();
+            xyedges2.forEach((edge) => {
+              xyflow.updateEdgeData(edge.id, {
+                controlPoints: getControlPointForEdge(edge)
+              });
+            });
+            scheduleSaveManualLayout();
+            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 = xynodes2.find((x) => x.id == edge.source);
+              const target = xynodes2.find((x) => x.id == edge.target);
+              if (!source || !target) {
+                return [];
+              }
+              const sourceCenter = getNodeCenter(source, xynodes2);
+              const targetCenter = getNodeCenter(target, xynodes2);
+              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);
+            }
+          },
+          align: align(get)
+        }),
+        {
+          name: `${storeDevId} - ${props.view.id}`,
+          enabled: DEV
+        }
+      )
+    ),
+    shallow
+  );
+}
+export {
+  createDiagramStore
+};