@likec4/diagram 1.19.1 → 1.20.0

package/dist/state/diagramStore.js

@@ -1,808 +0,0 @@
-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
-};