@likec4/diagram 1.28.0 → 1.29.0

package/dist/state/diagram-machine.js

@@ -1,4 +1,4 @@
-import { nonNullable, invariant, DiagramNode, nonexhaustive, getBBoxCenter, getParallelStepsPrefix } from '@likec4/core';
+import { nonNullable, invariant, DiagramNode, nonexhaustive, getBBoxCenter, isStepEdgeId, getParallelStepsPrefix } from '@likec4/core';
 import { getViewportForBounds, applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
 import { nodeToRect } from '@xyflow/system';
 import { hasAtLeast, prop, clamp, first } from 'remeda';
@@ -32,6 +32,7 @@ const diagramMachine = setup({
     "enabled: FitView": ({ context }) => context.features.enableFitView,
     "enabled: FocusMode": ({ context }) => context.features.enableFocusMode,
     "enabled: Readonly": ({ context }) => context.features.enableReadOnly,
+    "enabled: RelationshipDetails": ({ context }) => context.features.enableRelationshipDetails,
     "not readonly": ({ context }) => !context.features.enableReadOnly,
     "is dynamic view": ({ context }) => context.view.__ === "dynamic",
     "is another view": ({ context, event }) => {
@@ -59,6 +60,10 @@ const diagramMachine = setup({
     "click: node has connections": ({ context, event }) => {
       assertEvent(event, "xyflow.nodeClick");
       return context.xyedges.some((e) => e.source === event.node.id || e.target === event.node.id);
+    },
+    "click: selected edge": ({ event }) => {
+      assertEvent(event, "xyflow.edgeClick");
+      return event.edge.selected === true || event.edge.data.active === true;
     }
   },
   actions: {
@@ -332,7 +337,6 @@ const diagramMachine = setup({
             type: "xyflow:fitDiagram",
             params: { duration: 0 }
           },
-          "startSyncLayout",
           assign(({ context }) => ({
             navigationHistory: {
               currentIndex: 0,
@@ -342,7 +346,8 @@ const diagramMachine = setup({
                 viewport: { ...context.xyflow.getViewport() }
               }]
             }
-          }))
+          })),
+          "startSyncLayout"
         ],
         target: "ready"
       }, {
@@ -562,7 +567,27 @@ const diagramMachine = setup({
                 focusedNode: ({ event }) => event.nodeId
               }),
               target: "focused"
-            }
+            },
+            "xyflow.edgeClick": [{
+              guard: and([
+                "is dynamic view",
+                "click: selected edge"
+              ]),
+              actions: raise(({ event }) => ({
+                type: "walkthrough.start",
+                stepId: event.edge.id
+              }))
+            }, {
+              guard: and([
+                "enabled: RelationshipDetails",
+                "click: selected edge"
+              ]),
+              actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef, ({ context, event }) => ({
+                type: "open.relationshipDetails",
+                viewId: context.view.id,
+                edgeId: event.edge.id
+              }))
+            }]
           }
         },
         focused: {
@@ -575,18 +600,18 @@ const diagramMachine = setup({
             spawnChild("hotkeyActorLogic", { id: "hotkey" }),
             "xyflow:fitFocusedBounds"
           ],
-          exit: enqueueActions(({ enqueue, context }) => {
+          exit: enqueueActions(({ enqueue, context, event }) => {
             enqueue.stopChild("hotkey");
             if (context.viewportBeforeFocus) {
               enqueue({ type: "xyflow:setViewport", params: { viewport: context.viewportBeforeFocus } });
             } else {
               enqueue({ type: "xyflow:fitDiagram" });
             }
-            enqueue.assign((s) => ({
-              ...unfocusNodesEdges(s),
+            enqueue.assign({
+              ...unfocusNodesEdges({ context}),
               viewportBeforeFocus: null,
               focusedNode: null
-            }));
+            });
           }),
           on: {
             "xyflow.nodeClick": [
@@ -681,6 +706,23 @@ const diagramMachine = setup({
                 enqueue("xyflow:fitFocusedBounds");
               })
             },
+            "xyflow.edgeClick": {
+              actions: [
+                assign(({ event, context }) => {
+                  if (!isStepEdgeId(event.edge.id) || event.edge.id === context.activeWalkthrough?.stepId) {
+                    return {};
+                  }
+                  return {
+                    activeWalkthrough: {
+                      stepId: event.edge.id,
+                      parallelPrefix: getParallelStepsPrefix(event.edge.id)
+                    }
+                  };
+                }),
+                assign(updateActiveWalkthrough),
+                "xyflow:fitFocusedBounds"
+              ]
+            },
             "notations.unhighlight": {
               actions: assign((s) => ({
                 ...updateActiveWalkthrough(s)
@@ -743,13 +785,11 @@ const diagramMachine = setup({
                   }
                 }
               });
-              enqueue.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 80 });
             } else {
               enqueue({
                 type: "xyflow:setViewportCenter",
                 params: getBBoxCenter(event.view.bounds)
               });
-              enqueue.raise({ type: "fitDiagram", duration: 200 }, { id: "fitDiagram", delay: 25 });
             }
             enqueue.assign(updateNavigationHistory);
             enqueue.assign({
@@ -757,6 +797,7 @@ const diagramMachine = setup({
               lastOnNavigate: null
             });
             enqueue("startSyncLayout");
+            enqueue.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 25 });
           }),
           target: "#idle"
         }