@likec4/diagram 1.43.0 → 1.45.0

package/dist/likec4diagram/state/machine.actions.js

@@ -0,0 +1,644 @@
+import { nonNullable, nonexhaustive, invariant } from '@likec4/core';
+import { nodeToRect } from '@xyflow/system';
+import { produce } from 'immer';
+import { isTruthy, hasAtLeast } from 'remeda';
+import { assertEvent } from 'xstate';
+import { createLayoutConstraints } from '../useLayoutConstraints.js';
+import { getAligner, toNodeRect } from './aligners.js';
+import { resetEdgeControlPoints, mergeXYNodesEdges, focusNodesEdges } from './assign.js';
+import { createViewChange } from './createViewChange.js';
+import { machine } from './machine.setup.js';
+import { typedSystem, findDiagramEdge, findDiagramNode } from './utils.js';
+import { Base } from '../../base/Base.js';
+
+const disableCompareWithLatest = () => machine.assign(({ context }) => {
+  return {
+    toggledFeatures: {
+      ...context.toggledFeatures,
+      enableCompareWithLatest: false
+    },
+    viewportOnAutoLayout: null,
+    viewportOnManualLayout: null
+  };
+});
+const onEdgeDoubleClick = () => machine.assign(({ context, event }) => {
+  assertEvent(event, "xyflow.edgeDoubleClick");
+  if (!event.edge.data.controlPoints) {
+    return {};
+  }
+  const { nodeLookup } = context.xystore.getState();
+  return {
+    xyedges: context.xyedges.map((e) => {
+      if (e.id === event.edge.id) {
+        const controlPoints = resetEdgeControlPoints(nodeLookup, e);
+        const pt = controlPoints[0];
+        return {
+          ...e,
+          data: {
+            ...e.data,
+            controlPoints,
+            labelBBox: e.data.labelBBox ? { ...e.data.labelBBox, ...pt } : null,
+            labelXY: null
+          }
+        };
+      }
+      return e;
+    })
+  };
+});
+const assignLastClickedNode = () => machine.assign(({ context, event }) => {
+  assertEvent(event, "xyflow.nodeClick");
+  const { lastClickedNode } = context;
+  if (!lastClickedNode || lastClickedNode.id !== event.node.id) {
+    return {
+      lastClickedNode: {
+        id: event.node.id,
+        clicks: 1,
+        timestamp: Date.now()
+      }
+    };
+  }
+  return {
+    lastClickedNode: {
+      id: lastClickedNode.id,
+      clicks: lastClickedNode.clicks + 1,
+      timestamp: Date.now()
+    }
+  };
+});
+const assignFocusedNode = () => machine.assign(({ event }) => {
+  let focusedNode;
+  switch (event.type) {
+    case "xyflow.nodeClick":
+      focusedNode = event.node.data.id;
+      break;
+    case "focus.node":
+      focusedNode = event.nodeId;
+      break;
+    default:
+      throw new Error(`Unexpected event type: ${event.type} in action 'assign: focusedNode'`);
+  }
+  return {
+    focusedNode
+  };
+});
+const resetLastClickedNode = () => machine.assign(() => ({
+  lastClickedNode: null
+}));
+const updateFeatures = () => machine.assign(({ event }) => {
+  assertEvent(event, "update.features");
+  return {
+    features: { ...event.features }
+  };
+});
+const updateInputs = () => machine.assign(({ event }) => {
+  assertEvent(event, "update.inputs");
+  return { ...event.inputs };
+});
+const updateXYNodesEdges = () => machine.assign(({ context, event }) => {
+  assertEvent(event, "update.view");
+  const update = mergeXYNodesEdges(context, event);
+  let { lastClickedNode, focusedNode } = context;
+  if (lastClickedNode || focusedNode) {
+    const nodeIds = new Set(update.xynodes.map((n) => n.id));
+    if (lastClickedNode && !nodeIds.has(lastClickedNode.id)) {
+      lastClickedNode = null;
+    }
+    if (focusedNode && !nodeIds.has(focusedNode)) {
+      focusedNode = null;
+    }
+    return {
+      ...update,
+      lastClickedNode,
+      focusedNode
+    };
+  }
+  return update;
+});
+const focusOnNodesAndEdges = () => machine.assign(focusNodesEdges);
+const undimEverything = () => machine.assign(({ context }) => ({
+  xynodes: context.xynodes.map(Base.setDimmed(false)),
+  xyedges: context.xyedges.map(Base.setData({
+    dimmed: false,
+    active: false
+  }))
+}));
+const assignDynamicViewVariant = () => machine.assign(({ event }) => {
+  assertEvent(event, "switch.dynamicViewVariant");
+  return {
+    dynamicViewVariant: event.variant
+  };
+});
+const onNodeMouseEnter = (params) => machine.assign(({ context, event }) => {
+  let node = params?.node;
+  if (!node) {
+    assertEvent(event, "xyflow.nodeMouseEnter");
+    node = event.node;
+  }
+  return {
+    xynodes: context.xynodes.map((n) => {
+      if (n.id === node.id) {
+        return Base.setHovered(n, true);
+      }
+      return n;
+    })
+  };
+});
+const onNodeMouseLeave = (params) => machine.assign(({ context, event }) => {
+  let node = params?.node;
+  if (!node) {
+    assertEvent(event, "xyflow.nodeMouseLeave");
+    node = event.node;
+  }
+  return {
+    xynodes: context.xynodes.map((n) => {
+      if (n.id === node.id) {
+        return Base.setHovered(n, false);
+      }
+      return n;
+    })
+  };
+});
+const emitPaneClick = () => machine.emit(() => ({
+  type: "paneClick"
+}));
+const emitOpenSource = (params) => machine.emit(({ event }) => {
+  if (params) {
+    return {
+      type: "openSource",
+      params
+    };
+  }
+  assertEvent(event, "open.source");
+  return {
+    type: "openSource",
+    params: event
+  };
+});
+const emitInitialized = () => machine.emit(({ context }) => {
+  invariant(context.xyflow, "XYFlow instance not found");
+  return {
+    type: "initialized",
+    instance: context.xyflow
+  };
+});
+const emitNodeClick = () => machine.emit(({ context, event }) => {
+  assertEvent(event, "xyflow.nodeClick");
+  const node = nonNullable(findDiagramNode(context, event.node.id), `Node ${event.node.id} not found in diagram`);
+  return {
+    type: "nodeClick",
+    node,
+    xynode: event.node
+  };
+});
+const emitNavigateTo = (params) => machine.emit(({ context }) => ({
+  type: "navigateTo",
+  viewId: params?.viewId ?? nonNullable(context.lastOnNavigate, "Invalid state, lastOnNavigate is null").toView
+}));
+const emitEdgeClick = () => machine.emit(({ context, event }) => {
+  assertEvent(event, "xyflow.edgeClick");
+  const edge = nonNullable(findDiagramEdge(context, event.edge.id), `Edge ${event.edge.id} not found in diagram`);
+  return {
+    type: "edgeClick",
+    edge,
+    xyedge: event.edge
+  };
+});
+const emitOnChange = () => machine.enqueueActions(({ event, enqueue }) => {
+  assertEvent(event, "emit.onChange");
+  enqueue.assign({
+    viewportChangedManually: true
+  });
+  enqueue.emit({
+    type: "onChange",
+    change: event.change
+  });
+});
+const emitOnLayoutTypeChange = () => machine.enqueueActions(({ event, system, context, enqueue }) => {
+  if (!context.features.enableCompareWithLatest) {
+    console.warn("Layout type cannot be changed while CompareWithLatest feature is disabled");
+    return;
+  }
+  const currentLayoutType = context.view._layout;
+  let nextLayoutType = currentLayoutType === "auto" ? "manual" : "auto";
+  if (event.type === "emit.onLayoutTypeChange") {
+    nextLayoutType = event.layoutType;
+  }
+  if (currentLayoutType === nextLayoutType) {
+    console.warn("Ignoring layout type change event, layout type is already", currentLayoutType);
+    return;
+  }
+  if (context.toggledFeatures.enableCompareWithLatest === true) {
+    if (currentLayoutType === "manual" && nextLayoutType === "auto") {
+      const syncLayoutActor = typedSystem(system).syncLayoutActorRef;
+      const syncState = syncLayoutActor?.getSnapshot().value;
+      const isPending = syncLayoutActor && (syncState === "pending" || syncState === "paused");
+      if (isPending) {
+        enqueue.sendTo(syncLayoutActor, { type: "cancel" });
+        enqueue.emit({
+          type: "onChange",
+          change: createViewChange(context)
+        });
+      }
+    }
+    const currentViewport = context.viewport;
+    if (currentLayoutType === "auto") {
+      enqueue.assign({
+        viewportOnAutoLayout: currentViewport
+      });
+    }
+    if (currentLayoutType === "manual") {
+      enqueue.assign({
+        viewportOnManualLayout: currentViewport
+      });
+    }
+  }
+  enqueue.emit({
+    type: "onLayoutTypeChange",
+    layoutType: nextLayoutType
+  });
+});
+const layoutAlign = (params) => machine.createAction(({ context, event }) => {
+  let mode;
+  {
+    assertEvent(event, "layout.align");
+    mode = event.mode;
+  }
+  const xystore = nonNullable(context.xystore, "xystore is not initialized");
+  const { nodeLookup, parentLookup } = xystore.getState();
+  const selectedNodes = new Set(nodeLookup.values().filter((n) => n.selected).map((n) => n.id));
+  const nodesToAlign = [...selectedNodes.difference(new Set(parentLookup.keys()))];
+  if (!hasAtLeast(nodesToAlign, 2)) {
+    console.warn("At least 2 nodes must be selected to align");
+    return;
+  }
+  const constraints = createLayoutConstraints(xystore, nodesToAlign);
+  const aligner = getAligner(mode);
+  const nodes = nodesToAlign.map((id) => ({
+    node: nonNullable(nodeLookup.get(id)),
+    rect: nonNullable(constraints.rects.get(id))
+  }));
+  aligner.computeLayout(nodes.map(({ node }) => toNodeRect(node)));
+  for (const { rect, node } of nodes) {
+    rect.positionAbsolute = {
+      ...rect.positionAbsolute,
+      ...aligner.applyPosition(toNodeRect(node))
+    };
+  }
+  constraints.updateXYFlow();
+});
+const resetEdgesControlPoints = () => machine.assign(({ context }) => {
+  const { nodeLookup } = context.xystore.getState();
+  return {
+    xyedges: context.xyedges.map((edge) => {
+      if (!edge.data.controlPoints) {
+        return edge;
+      }
+      const controlPoints = resetEdgeControlPoints(nodeLookup, edge);
+      const pt = controlPoints[0];
+      return {
+        ...edge,
+        data: {
+          ...edge.data,
+          controlPoints,
+          labelBBox: edge.data.labelBBox ? { ...edge.data.labelBBox, x: pt.x, y: pt.y } : null,
+          labelXY: edge.data.labelXY ? pt : null
+        }
+      };
+    })
+  };
+});
+const notationsHighlight = (params) => machine.assign(({ context, event }) => {
+  if (!params) {
+    assertEvent(event, "notations.highlight");
+    params = {
+      ...event
+    };
+  }
+  const notation = params.notation;
+  const kinds = params.kind ? [params.kind] : notation.kinds;
+  const xynodes = context.xynodes.map((n) => {
+    const node = findDiagramNode(context, n.id);
+    if (node && node.notation === notation.title && node.shape === notation.shape && node.color === notation.color && kinds.includes(node.kind)) {
+      return Base.setDimmed(n, false);
+    }
+    return Base.setDimmed(n, "immediate");
+  });
+  return {
+    xynodes,
+    xyedges: context.xyedges.map(Base.setDimmed("immediate"))
+  };
+});
+const tagHighlight = () => machine.assign(({ context, event }) => {
+  assertEvent(event, "tag.highlight");
+  return {
+    xynodes: context.xynodes.map((n) => {
+      if (n.data.tags?.includes(event.tag)) {
+        return Base.setDimmed(n, false);
+      }
+      return Base.setDimmed(n, true);
+    })
+  };
+});
+const assignToggledFeatures = () => machine.assign(({ context, event }) => {
+  assertEvent(event, "toggle.feature");
+  const currentValue = context.toggledFeatures[`enable${event.feature}`] ?? context.features[`enable${event.feature}`];
+  const nextValue = event.forceValue ?? !currentValue;
+  return {
+    toggledFeatures: {
+      ...context.toggledFeatures,
+      [`enable${event.feature}`]: nextValue
+    }
+  };
+});
+const closeSearch = () => machine.sendTo(
+  ({ system }) => typedSystem(system).searchActorRef,
+  {
+    type: "close"
+  }
+);
+const closeAllOverlays = () => machine.sendTo(
+  ({ system }) => typedSystem(system).overlaysActorRef,
+  {
+    type: "close.all"
+  }
+);
+const stopSyncLayout = () => machine.enqueueActions(({ enqueue, system }) => {
+  const syncLayoutActor = typedSystem(system).syncLayoutActorRef;
+  if (!syncLayoutActor) return;
+  enqueue.stopChild(syncLayoutActor);
+});
+const ensureSyncLayoutActor = () => machine.enqueueActions(({ context, enqueue, system, check }) => {
+  const isReadOnly = check("enabled: Readonly");
+  const syncLayoutActor = typedSystem(system).syncLayoutActorRef;
+  if (isReadOnly && syncLayoutActor) {
+    enqueue.stopChild(syncLayoutActor);
+    return;
+  }
+  if (!isReadOnly && !syncLayoutActor) {
+    enqueue.spawnChild("syncManualLayoutActorLogic", {
+      id: "syncLayout",
+      systemId: "syncLayout",
+      input: {
+        viewId: context.view.id
+      },
+      syncSnapshot: true
+    });
+  }
+});
+const startEditing = (subject = "node") => machine.sendTo(
+  ({ system }) => typedSystem(system).syncLayoutActorRef,
+  {
+    type: "editing.start",
+    subject
+  }
+);
+const sendSynced = () => machine.sendTo(
+  ({ system }) => typedSystem(system).syncLayoutActorRef,
+  {
+    type: "synced"
+  }
+);
+const stopEditing = (wasChanged = true) => machine.sendTo(
+  ({ system }) => typedSystem(system).syncLayoutActorRef,
+  {
+    type: "editing.stop",
+    wasChanged
+  }
+);
+const cancelEditing = () => machine.sendTo(
+  ({ system }) => typedSystem(system).syncLayoutActorRef,
+  {
+    type: "cancel"
+  }
+);
+const hasModelFqn = (node) => "modelFqn" in node.data && isTruthy(node.data.modelFqn);
+const openElementDetails = (params) => machine.enqueueActions(({ context, event, enqueue, system }) => {
+  let initiatedFrom = null;
+  let fromNodeId, subject;
+  switch (true) {
+    // Use from params if available
+    case false: {
+      subject = params.fqn;
+      fromNodeId = params.fromNode ?? context.view.nodes.find((n) => n.modelRef === params.fqn)?.id;
+      break;
+    }
+    case event.type === "xyflow.nodeClick": {
+      if (!hasModelFqn(event.node)) {
+        console.warn("No modelFqn in clicked node data");
+        return;
+      }
+      subject = event.node.data.modelFqn;
+      fromNodeId = event.node.data.id;
+      break;
+    }
+    case event.type === "open.elementDetails": {
+      subject = event.fqn;
+      fromNodeId = event.fromNode;
+      break;
+    }
+    default: {
+      if (!context.lastClickedNode) {
+        console.warn("No last clicked node");
+        return;
+      }
+      fromNodeId = context.lastClickedNode.id;
+      const node = context.xynodes.find((n) => n.id === fromNodeId);
+      if (!node || !hasModelFqn(node)) {
+        console.warn("No modelFqn in last clicked node");
+        return;
+      }
+      subject = node.data.modelFqn;
+      break;
+    }
+  }
+  const internalNode = fromNodeId ? context.xystore.getState().nodeLookup.get(fromNodeId) : null;
+  if (fromNodeId && internalNode) {
+    const nodeRect = nodeToRect(internalNode);
+    const zoom = context.xyflow.getZoom();
+    const clientRect = {
+      ...context.xyflow.flowToScreenPosition(nodeRect),
+      width: nodeRect.width * zoom,
+      height: nodeRect.height * zoom
+    };
+    initiatedFrom = {
+      node: fromNodeId,
+      clientRect
+    };
+  }
+  enqueue.sendTo(
+    typedSystem(system).overlaysActorRef,
+    {
+      type: "open.elementDetails",
+      subject,
+      currentView: context.view,
+      ...initiatedFrom && { initiatedFrom }
+    }
+  );
+});
+const openSourceOfFocusedOrLastClickedNode = () => machine.enqueueActions(({ context, enqueue }) => {
+  const nodeId = context.focusedNode ?? context.lastClickedNode?.id;
+  if (!nodeId || !context.features.enableVscode) return;
+  const diagramNode = findDiagramNode(context, nodeId);
+  if (!diagramNode) return;
+  if (diagramNode.deploymentRef) {
+    enqueue.raise({ type: "open.source", deployment: diagramNode.deploymentRef });
+  } else if (diagramNode.modelRef) {
+    enqueue.raise({ type: "open.source", element: diagramNode.modelRef });
+  }
+});
+const ensureOverlaysActor = () => machine.enqueueActions(({ enqueue, check, system }) => {
+  const enableOverlays = check("enabled: Overlays");
+  const hasRunning = typedSystem(system).overlaysActorRef;
+  if (enableOverlays && !hasRunning) {
+    enqueue.spawnChild("overlaysActorLogic", { id: "overlays", systemId: "overlays" });
+    return;
+  }
+  if (!enableOverlays && hasRunning) {
+    enqueue.sendTo(hasRunning, {
+      type: "close.all"
+    });
+    enqueue.stopChild("overlays");
+  }
+});
+const ensureSearchActor = () => machine.enqueueActions(({ enqueue, context: { features: { enableSearch } }, system }) => {
+  const hasRunning = typedSystem(system).searchActorRef;
+  if (enableSearch && !hasRunning) {
+    enqueue.spawnChild("searchActorLogic", { id: "search", systemId: "search" });
+    return;
+  }
+  if (!enableSearch && hasRunning) {
+    enqueue.sendTo(hasRunning, {
+      type: "close"
+    });
+    enqueue.stopChild("search");
+  }
+});
+const onEdgeMouseEnter = () => machine.enqueueActions(({ enqueue, context, event }) => {
+  assertEvent(event, "xyflow.edgeMouseEnter");
+  let edge = event.edge;
+  enqueue.assign({
+    xyedges: context.xyedges.map((e) => {
+      if (e.id === event.edge.id) {
+        edge = Base.setHovered(e, true);
+        return edge;
+      }
+      return e;
+    })
+  });
+  enqueue.emit({
+    type: "edgeMouseEnter",
+    edge,
+    event: event.event
+  });
+});
+const onEdgeMouseLeave = () => machine.enqueueActions(({ enqueue, context, event }) => {
+  assertEvent(event, "xyflow.edgeMouseLeave");
+  let edge = event.edge;
+  enqueue.assign({
+    xyedges: context.xyedges.map((e) => {
+      if (e.id === event.edge.id) {
+        edge = Base.setHovered(e, false);
+        return edge;
+      }
+      return e;
+    })
+  });
+  enqueue.emit({
+    type: "edgeMouseLeave",
+    edge,
+    event: event.event
+  });
+});
+const startHotKeyActor = () => machine.spawnChild("hotkeyActorLogic", { id: "hotkey" });
+const stopHotKeyActor = () => machine.stopChild("hotkey");
+const handleNavigate = () => machine.enqueueActions(({ enqueue, context, event }) => {
+  assertEvent(event, ["navigate.to", "navigate.back", "navigate.forward"]);
+  console.log(`Handle ${event.type}`);
+  const {
+    view,
+    focusedNode,
+    activeWalkthrough,
+    dynamicViewVariant,
+    viewport,
+    viewportChangedManually,
+    viewportBefore,
+    navigationHistory: {
+      currentIndex,
+      history: _history
+    }
+  } = context;
+  let history = [..._history];
+  if (currentIndex < _history.length) {
+    const updatedEntry = produce(_history[currentIndex], (draft) => {
+      draft.viewport = { ...viewport };
+      draft.viewportChangedManually = viewportChangedManually;
+      draft.focusedNode = focusedNode;
+      if (view._type === "dynamic") {
+        draft.activeWalkthrough = activeWalkthrough?.stepId ?? null;
+        draft.dynamicViewVariant = dynamicViewVariant;
+      } else {
+        draft.activeWalkthrough = null;
+        draft.dynamicViewVariant = null;
+      }
+      if (viewportBefore) {
+        draft.viewportBefore = viewportBefore;
+      } else {
+        delete draft.viewportBefore;
+      }
+    });
+    history = [..._history];
+    history[currentIndex] = updatedEntry;
+    console.log("Update current history entry", {
+      before: _history[currentIndex],
+      after: updatedEntry
+    });
+  }
+  switch (event.type) {
+    case "navigate.to": {
+      enqueue.assign({
+        navigationHistory: {
+          currentIndex,
+          history
+        },
+        lastOnNavigate: {
+          fromView: context.view.id,
+          toView: event.viewId,
+          fromNode: event.fromNode ?? null
+        }
+      });
+      enqueue(emitNavigateTo());
+      break;
+    }
+    case "navigate.back": {
+      invariant(currentIndex > 0, "Cannot navigate back");
+      const stepBack = history[currentIndex - 1];
+      enqueue.assign({
+        navigationHistory: {
+          currentIndex: currentIndex - 1,
+          history
+        },
+        lastOnNavigate: null
+      });
+      enqueue(emitNavigateTo({ viewId: stepBack.viewId }));
+      break;
+    }
+    case "navigate.forward": {
+      invariant(currentIndex < history.length - 1, "Cannot navigate forward");
+      const stepForward = history[currentIndex + 1];
+      enqueue.assign({
+        navigationHistory: {
+          currentIndex: currentIndex + 1,
+          history
+        },
+        lastOnNavigate: null
+      });
+      enqueue(emitNavigateTo({ viewId: stepForward.viewId }));
+      break;
+    }
+    default:
+      nonexhaustive(event);
+  }
+});
+
+export { assignDynamicViewVariant, assignFocusedNode, assignLastClickedNode, assignToggledFeatures, cancelEditing, closeAllOverlays, closeSearch, disableCompareWithLatest, emitEdgeClick, emitInitialized, emitNavigateTo, emitNodeClick, emitOnChange, emitOnLayoutTypeChange, emitOpenSource, emitPaneClick, ensureOverlaysActor, ensureSearchActor, ensureSyncLayoutActor, focusOnNodesAndEdges, handleNavigate, layoutAlign, notationsHighlight, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseLeave, onNodeMouseEnter, onNodeMouseLeave, openElementDetails, openSourceOfFocusedOrLastClickedNode, resetEdgesControlPoints, resetLastClickedNode, sendSynced, startEditing, startHotKeyActor, stopEditing, stopHotKeyActor, stopSyncLayout, tagHighlight, undimEverything, updateFeatures, updateInputs, updateXYNodesEdges };