@likec4/diagram 1.39.5 → 1.41.0

package/dist/state/diagram-machine.js

@@ -2,11 +2,12 @@ import { nonNullable, invariant, nonexhaustive, BBox, isStepEdgeId, getParallelS
 import { getViewportForBounds, applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
 import { nodeToRect } from '@xyflow/system';
 import { hasAtLeast, prop, clamp, first } from 'remeda';
-import { setup, emit, assign, enqueueActions, sendTo, assertEvent, cancel, stopChild, raise, spawnChild, and, or } from 'xstate';
+import { setup, assign, emit, sendTo, enqueueActions, assertEvent, cancel, stopChild, raise, spawnChild, and, or } from 'xstate';
 import { MinZoom } from '../base/const.js';
 import { Base } from '../base/types.js';
 import { AllDisabled } from '../context/DiagramFeatures.js';
 import { createLayoutConstraints } from '../likec4diagram/useLayoutConstraints.js';
+import { SeqParallelAreaColor } from '../likec4diagram/xyflow-sequence/const.js';
 import { overlaysActorLogic } from '../overlays/overlaysActor.js';
 import { searchActorLogic } from '../search/searchActor.js';
 import { getAligner, toNodeRect } from './aligners.js';
@@ -14,7 +15,7 @@ import { updateActiveWalkthrough, focusNodesEdges, lastClickedNode, updateNaviga
 import { hotkeyActorLogic } from './hotkeyActor.js';
 import { DiagramToggledFeaturesPersistence } from './persistence.js';
 import { syncManualLayoutActorLogic } from './syncManualLayoutActor.js';
-import { findDiagramEdge, findDiagramNode, typedSystem, focusedBounds } from './utils.js';
+import { findDiagramEdge, findDiagramNode, typedSystem, activeSequenceBounds, focusedBounds } from './utils.js';
 
 const _diagramMachine = setup({
   types: {
@@ -33,10 +34,11 @@ const _diagramMachine = setup({
   guards: {
     "isReady": ({ context }) => context.initialized.xydata && context.initialized.xyflow,
     "enabled: FitView": ({ context }) => context.features.enableFitView,
-    "enabled: FocusMode": ({ context }) => context.features.enableFocusMode,
+    "enabled: FocusMode": ({ context }) => context.features.enableFocusMode && (context.view._type !== "dynamic" || context.dynamicViewVariant !== "sequence"),
     "enabled: Readonly": ({ context }) => context.features.enableReadOnly,
     "enabled: RelationshipDetails": ({ context }) => context.features.enableRelationshipDetails,
     "enabled: Search": ({ context }) => context.features.enableSearch,
+    "enabled: ElementDetails": ({ context }) => context.features.enableElementDetails,
     "not readonly": ({ context }) => !context.features.enableReadOnly,
     "is dynamic view": ({ context }) => context.view._type === "dynamic",
     "is another view": ({ context, event }) => {
@@ -49,6 +51,10 @@ const _diagramMachine = setup({
       }
       nonexhaustive(event.type);
     },
+    "click: node has modelFqn": ({ event }) => {
+      assertEvent(event, "xyflow.nodeClick");
+      return "modelFqn" in event.node.data;
+    },
     "click: selected node": ({ event }) => {
       assertEvent(event, "xyflow.nodeClick");
       return event.node.selected === true;
@@ -85,6 +91,22 @@ const _diagramMachine = setup({
         lastClickedNode: lastClickedNode({ context, event })
       };
     }),
+    "assign: focusedNode": assign(({ context, 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
+      };
+    }),
     "reset lastClickedNode": assign(() => ({
       lastClickedNode: null
     })),
@@ -119,7 +141,8 @@ const _diagramMachine = setup({
       panZoom?.setViewport(viewport, duration > 0 ? { duration } : void 0);
     },
     "xyflow:fitFocusedBounds": ({ context }) => {
-      const { bounds, duration = 450 } = focusedBounds({ context });
+      const isActiveSequenceWalkthrough = !!context.activeWalkthrough && context.dynamicViewVariant === "sequence";
+      const { bounds, duration = 450 } = isActiveSequenceWalkthrough ? activeSequenceBounds({ context }) : focusedBounds({ context });
       const { width, height, panZoom, transform } = nonNullable(context.xystore).getState();
       const maxZoom = Math.max(1, transform[2]);
       const viewport = getViewportForBounds(
@@ -340,6 +363,50 @@ const _diagramMachine = setup({
       }))
     })),
     "update active walkthrough": assign(updateActiveWalkthrough),
+    "open element details": sendTo(
+      ({ system }) => typedSystem(system).overlaysActorRef,
+      ({ context, event }, params) => {
+        let initiatedFrom = null;
+        let fromNodeId, subject;
+        if (params) {
+          subject = params.fqn;
+          fromNodeId = params.fromNode ?? context.view.nodes.find((n) => n.modelRef === params.fqn)?.id;
+        } else if (event.type === "xyflow.nodeClick") {
+          invariant("modelFqn" in event.node.data && !!event.node.data.modelFqn, "No modelFqn in event node data");
+          subject = event.node.data.modelFqn;
+          fromNodeId = event.node.data.id;
+        } else if (event.type === "open.elementDetails") {
+          subject = event.fqn;
+          fromNodeId = event.fromNode;
+        } else {
+          invariant(context.lastClickedNode, "No last clicked node");
+          fromNodeId = nonNullable(context.lastClickedNode).id;
+          const node = nonNullable(context.xynodes.find((n) => n.id === fromNodeId));
+          invariant("modelFqn" in node.data && !!node.data.modelFqn, "No modelFqn in last clicked node");
+          subject = node.data.modelFqn;
+        }
+        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
+          };
+        }
+        return {
+          type: "open.elementDetails",
+          subject,
+          currentView: context.view,
+          ...initiatedFrom && { initiatedFrom }
+        };
+      }
+    ),
     "emit: walkthroughStarted": emit(({ context }) => {
       const edge = context.xyedges.find((x) => x.id === context.activeWalkthrough?.stepId);
       invariant(edge, "Invalid walkthrough state");
@@ -387,6 +454,12 @@ const _diagramMachine = setup({
         edge,
         xyedge: event.edge
       };
+    }),
+    "assign: dynamicViewVariant": assign(({ event }) => {
+      assertEvent(event, "switch.dynamicViewVariant");
+      return {
+        dynamicViewVariant: event.variant
+      };
     })
   }
 }).createMachine({
@@ -416,6 +489,7 @@ const _diagramMachine = setup({
     viewport: { x: 0, y: 0, zoom: 1 },
     xyflow: null,
     syncLayoutActorRef: null,
+    dynamicViewVariant: input.dynamicViewVariant ?? (input.view._type === "dynamic" ? input.view.variant : "diagram") ?? "diagram",
     activeWalkthrough: null
   }),
   // entry: ({ spawn }) => spawn(layoutActor, { id: 'layout', input: { parent: self } }),
@@ -520,30 +594,8 @@ const _diagramMachine = setup({
           ]
         },
         "open.elementDetails": {
-          actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef, ({ context, event }) => {
-            let initiatedFrom = null;
-            const fromNodeId = event.fromNode ?? context.view.nodes.find((n) => n.modelRef === event.fqn)?.id;
-            const internalNode = fromNodeId ? nonNullable(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
-              };
-            }
-            return {
-              type: "open.elementDetails",
-              subject: event.fqn,
-              currentView: context.view,
-              ...initiatedFrom && { initiatedFrom }
-            };
-          })
+          guard: "enabled: ElementDetails",
+          actions: "open element details"
         },
         "open.relationshipsBrowser": {
           actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef, ({ context, event }) => ({
@@ -655,14 +707,29 @@ const _diagramMachine = setup({
                   ])
                 ]),
                 actions: [
-                  assign({
-                    lastClickedNode,
-                    focusedNode: ({ event }) => event.node.id
-                  }),
+                  "assign lastClickedNode",
+                  "assign: focusedNode",
                   "emit: nodeClick"
                 ],
                 target: "focused"
               },
+              {
+                // TODO: xstate fails to infer the type of the guard
+                guard: and([
+                  "enabled: ElementDetails",
+                  "click: node has modelFqn",
+                  or([
+                    "click: same node",
+                    "click: selected node"
+                  ])
+                ]),
+                actions: [
+                  "assign lastClickedNode",
+                  "open source of focused or last clicked node",
+                  "open element details",
+                  "emit: nodeClick"
+                ]
+              },
               {
                 actions: [
                   "assign lastClickedNode",
@@ -686,9 +753,7 @@ const _diagramMachine = setup({
             },
             "focus.node": {
               guard: "enabled: FocusMode",
-              actions: assign({
-                focusedNode: ({ event }) => event.nodeId
-              }),
+              actions: "assign: focusedNode",
               target: "focused"
             },
             "xyflow.edgeClick": {
@@ -731,6 +796,16 @@ const _diagramMachine = setup({
           }),
           on: {
             "xyflow.nodeClick": [
+              {
+                guard: and([
+                  "click: focused node",
+                  "click: node has modelFqn"
+                ]),
+                actions: [
+                  "open element details",
+                  "emit: nodeClick"
+                ]
+              },
               {
                 guard: "click: focused node",
                 actions: "emit: nodeClick",
@@ -738,9 +813,7 @@ const _diagramMachine = setup({
               },
               {
                 actions: [
-                  assign({
-                    lastClickedNode
-                  }),
+                  "assign lastClickedNode",
                   raise(({ event }) => ({
                     type: "focus.node",
                     nodeId: event.node.id
@@ -751,9 +824,7 @@ const _diagramMachine = setup({
             ],
             "focus.node": {
               actions: [
-                assign({
-                  focusedNode: ({ event }) => event.nodeId
-                }),
+                "assign: focusedNode",
                 "focus on nodes and edges",
                 "open source of focused or last clicked node",
                 "xyflow:fitFocusedBounds"
@@ -795,6 +866,32 @@ const _diagramMachine = setup({
             "xyflow:fitFocusedBounds",
             "emit: walkthroughStarted"
           ],
+          exit: enqueueActions(({ enqueue, context, event }) => {
+            enqueue.stopChild("hotkey");
+            if (context.viewportBeforeFocus) {
+              enqueue({ type: "xyflow:setViewport", params: { viewport: context.viewportBeforeFocus } });
+            } else {
+              enqueue("xyflow:fitDiagram");
+            }
+            if (context.dynamicViewVariant === "sequence" && context.activeWalkthrough?.parallelPrefix) {
+              enqueue.assign({
+                xynodes: context.xynodes.map((n) => {
+                  if (n.type === "seq-parallel") {
+                    return Base.setData(n, {
+                      color: SeqParallelAreaColor.default
+                    });
+                  }
+                  return n;
+                })
+              });
+            }
+            enqueue("undim everything");
+            enqueue.assign({
+              activeWalkthrough: null,
+              viewportBeforeFocus: null
+            });
+            enqueue("emit: walkthroughStopped");
+          }),
           on: {
             "key.esc": {
               target: "idle"
@@ -867,21 +964,7 @@ const _diagramMachine = setup({
               actions: raise(({ event }) => event, { delay: 50 }),
               target: "idle"
             }
-          },
-          exit: enqueueActions(({ enqueue, context, event }) => {
-            enqueue.stopChild("hotkey");
-            if (context.viewportBeforeFocus) {
-              enqueue({ type: "xyflow:setViewport", params: { viewport: context.viewportBeforeFocus } });
-            } else {
-              enqueue("xyflow:fitDiagram");
-            }
-            enqueue("undim everything");
-            enqueue.assign({
-              activeWalkthrough: null,
-              viewportBeforeFocus: null
-            });
-            enqueue("emit: walkthroughStopped");
-          })
+          }
         }
       }
     },
@@ -904,8 +987,8 @@ const _diagramMachine = setup({
                 params: {
                   fromNode: fromNode.id,
                   toPosition: {
-                    x: toNode.position[0],
-                    y: toNode.position[1]
+                    x: toNode.data.position[0],
+                    y: toNode.data.position[1]
                   }
                 }
               });
@@ -989,8 +1072,8 @@ const _diagramMachine = setup({
                 params: {
                   fromNode: fromNode.id,
                   toPosition: {
-                    x: toNode.position[0],
-                    y: toNode.position[1]
+                    x: toNode.data.position[0],
+                    y: toNode.data.position[1]
                   }
                 }
               });
@@ -1002,6 +1085,14 @@ const _diagramMachine = setup({
               });
               enqueue.raise({ type: "fitDiagram", duration: 200 }, { id: "fitDiagram", delay: 25 });
             }
+          } else {
+            const nextView = event.view;
+            if (nextView._type === "dynamic" && context.view._type === "dynamic" && nextView.variant !== context.view.variant) {
+              enqueue({
+                type: "xyflow:setViewportCenter",
+                params: BBox.center(nextView.bounds)
+              });
+            }
           }
           enqueue.assign({
             ...mergeXYNodesEdges({ context, event }),
@@ -1027,6 +1118,9 @@ const _diagramMachine = setup({
         "ensure overlays actor state",
         "ensure search actor state"
       ]
+    },
+    "switch.dynamicViewVariant": {
+      actions: "assign: dynamicViewVariant"
     }
   },
   exit: [
@@ -1049,13 +1143,26 @@ const _diagramMachine = setup({
   ]
 });
 function nodeRef(node) {
-  return node.modelRef ?? node.deploymentRef;
+  switch (node.type) {
+    case "element":
+    case "compound-element":
+    case "seq-actor":
+      return node.data.modelFqn;
+    case "deployment":
+    case "compound-deployment":
+      return node.data.modelFqn ?? node.data.deploymentFqn;
+    case "seq-parallel":
+    case "view-group":
+      return null;
+    default:
+      nonexhaustive(node);
+  }
 }
 function findCorrespondingNode(context, event) {
   const fromNodeId = context.lastOnNavigate?.fromNode;
-  const fromNode = fromNodeId && context.view.nodes.find((n) => n.id === fromNodeId);
+  const fromNode = fromNodeId && context.xynodes.find((n) => n.id === fromNodeId);
   const fromRef = fromNode && nodeRef(fromNode);
-  const toNode = fromRef && event.view.nodes.find((n) => nodeRef(n) === fromRef);
+  const toNode = fromRef && event.xynodes.find((n) => nodeRef(n) === fromRef);
   return { fromNode, toNode };
 }
 const diagramMachine = _diagramMachine;

package/dist/state/utils.d.ts

@@ -1,4 +1,4 @@
-import { BBox, DiagramEdge, DiagramNode } from '@likec4/core/types';
+import { DiagramEdge, DiagramNode, BBox } from '@likec4/core/types';
 import { ActorSystem } from 'xstate';
 import { OverlaysActorRef } from '../overlays/overlaysActor';
 import { SearchActorRef } from '../search/searchActor';
@@ -17,3 +17,9 @@ export declare function focusedBounds(params: {
     bounds: BBox;
     duration?: number;
 };
+export declare function activeSequenceBounds(params: {
+    context: Context;
+}): {
+    bounds: BBox;
+    duration?: number;
+};

package/dist/state/utils.js

@@ -1,3 +1,7 @@
+import { BBox } from '@likec4/core/types';
+import { nonNullable } from '@likec4/core/utils';
+import { getNodesBounds, getNodeDimensions, getEdgePosition } from '@xyflow/system';
+
 function typedSystem(system) {
   return {
     get overlaysActorRef() {
@@ -34,12 +38,11 @@ function focusedBounds(params) {
     }
     const width = node.measured?.width ?? node.width ?? node.initialWidth;
     const height = node.measured?.height ?? node.height ?? node.initialHeight;
-    return {
-      minX: Math.min(acc.minX, position.x),
-      minY: Math.min(acc.minY, position.y),
-      maxX: Math.max(acc.maxX, position.x + width),
-      maxY: Math.max(acc.maxY, position.y + height)
-    };
+    acc.minX = Math.min(acc.minX, position.x);
+    acc.minY = Math.min(acc.minY, position.y);
+    acc.maxX = Math.max(acc.maxX, position.x + width);
+    acc.maxY = Math.max(acc.maxY, position.y + height);
+    return acc;
   }, {
     minX: Infinity,
     minY: Infinity,
@@ -61,5 +64,62 @@ function focusedBounds(params) {
     }
   };
 }
+const MARGIN = 32;
+function activeSequenceBounds(params) {
+  const activeWalkthrough = nonNullable(params.context.activeWalkthrough);
+  const stepEdge = nonNullable(params.context.xyedges.find((e) => e.id === activeWalkthrough.stepId));
+  const xystate = params.context.xystore.getState();
+  const sourceNode = nonNullable(xystate.nodeLookup.get(stepEdge.source));
+  const targetNode = nonNullable(xystate.nodeLookup.get(stepEdge.target));
+  const actorsBounds = getNodesBounds([sourceNode, targetNode], xystate);
+  let stepBounds;
+  if (activeWalkthrough.parallelPrefix) {
+    const parallelArea = params.context.xynodes.find(
+      (n) => n.type === "seq-parallel" && n.data.parallelPrefix === activeWalkthrough.parallelPrefix
+    );
+    if (parallelArea) {
+      stepBounds = {
+        x: parallelArea.position.x,
+        y: parallelArea.position.y,
+        ...getNodeDimensions(parallelArea)
+      };
+    }
+  }
+  stepBounds ??= getEdgeBounds(stepEdge, xystate);
+  if (stepBounds) {
+    stepBounds = BBox.merge(stepBounds, actorsBounds);
+  } else {
+    stepBounds = actorsBounds;
+  }
+  return {
+    duration: 350,
+    bounds: BBox.expand(
+      stepBounds,
+      MARGIN
+    )
+  };
+}
+function getEdgeBounds(edge, store) {
+  const sourceNode = store.nodeLookup.get(edge.source);
+  const targetNode = store.nodeLookup.get(edge.target);
+  if (!sourceNode || !targetNode) {
+    return null;
+  }
+  const edgePosition = getEdgePosition({
+    id: edge.id,
+    sourceNode,
+    targetNode,
+    sourceHandle: edge.sourceHandle || null,
+    targetHandle: edge.targetHandle || null,
+    connectionMode: store.connectionMode
+  });
+  if (!edgePosition) {
+    return null;
+  }
+  return BBox.fromPoints([
+    [edgePosition.sourceX, edgePosition.sourceY],
+    [edgePosition.targetX, edgePosition.targetY]
+  ]);
+}
 
-export { findDiagramEdge, findDiagramNode, focusedBounds, typedSystem };
+export { activeSequenceBounds, findDiagramEdge, findDiagramNode, focusedBounds, typedSystem };