@likec4/diagram 1.36.1 → 1.37.0

package/dist/state/diagram-machine.js

@@ -2,7 +2,7 @@ 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, assign, enqueueActions, sendTo, emit, assertEvent, cancel, stopChild, raise, spawnChild, and, or } from 'xstate';
+import { setup, emit, assign, enqueueActions, sendTo, assertEvent, cancel, stopChild, raise, spawnChild, and, or } from 'xstate';
 import { MinZoom } from '../base/const.js';
 import { AllDisabled } from '../context/DiagramFeatures.js';
 import { createLayoutConstraints } from '../likec4diagram/useLayoutConstraints.js';
@@ -222,6 +222,10 @@ const _diagramMachine = setup({
         features: { ...event.features }
       };
     }),
+    "updateInputs": assign(({ event }) => {
+      assertEvent(event, "update.inputs");
+      return { ...event.inputs };
+    }),
     "closeSearch": sendTo(
       ({ system }) => typedSystem(system).searchActorRef,
       {
@@ -267,25 +271,41 @@ const _diagramMachine = setup({
         })
       };
     }),
-    "onEdgeMouseEnter": assign(({ context }, params) => {
-      return {
+    "onEdgeMouseEnter": enqueueActions(({ enqueue, context, event }) => {
+      assertEvent(event, "xyflow.edgeMouseEnter");
+      let edge = event.edge;
+      enqueue.assign({
         xyedges: context.xyedges.map((e) => {
-          if (e.id === params.edge.id) {
-            return setHovered(e, true);
+          if (e.id === event.edge.id) {
+            edge = setHovered(e, true);
+            return edge;
           }
           return e;
         })
-      };
+      });
+      enqueue.emit({
+        type: "edgeMouseEnter",
+        edge,
+        event: event.event
+      });
     }),
-    "onEdgeMouseLeave": assign(({ context }, params) => {
-      return {
+    "onEdgeMouseLeave": enqueueActions(({ enqueue, context, event }) => {
+      assertEvent(event, "xyflow.edgeMouseLeave");
+      let edge = event.edge;
+      enqueue.assign({
         xyedges: context.xyedges.map((e) => {
-          if (e.id === params.edge.id) {
-            return setHovered(e, false);
+          if (e.id === event.edge.id) {
+            edge = setHovered(e, false);
+            return edge;
           }
           return e;
         })
-      };
+      });
+      enqueue.emit({
+        type: "edgeMouseLeave",
+        edge,
+        event: event.event
+      });
     }),
     "focus on nodes and edges": assign(focusNodesEdges),
     "notations.highlight": assign(({ context }, params) => {
@@ -320,7 +340,34 @@ const _diagramMachine = setup({
         active: false
       }))
     })),
-    "update active walkthrough": assign(updateActiveWalkthrough)
+    "update active walkthrough": assign(updateActiveWalkthrough),
+    "emit: walkthroughStarted": emit(({ context }) => {
+      const edge = context.xyedges.find((x) => x.id === context.activeWalkthrough?.stepId);
+      invariant(edge, "Invalid walkthrough state");
+      return {
+        type: "walkthroughStarted",
+        edge
+      };
+    }),
+    "emit: walkthroughStep": emit(({ context }) => {
+      const edge = context.xyedges.find((x) => x.id === context.activeWalkthrough?.stepId);
+      invariant(edge, "Invalid walkthrough state");
+      return {
+        type: "walkthroughStep",
+        edge
+      };
+    }),
+    "emit: walkthroughStopped": emit(() => ({
+      type: "walkthroughStopped"
+    })),
+    "emit: edgeEditingStarted": emit(({ context, event }) => {
+      assertEvent(event, "xyflow.edgeEditingStarted");
+      const edge = nonNullable(context.xyedges.find((x) => x.id === event.edge.id), `Edge ${event.edge.id} not found`);
+      return {
+        type: "edgeEditingStarted",
+        edge
+      };
+    })
   }
 }).createMachine({
   initial: "initializing",
@@ -529,16 +576,10 @@ const _diagramMachine = setup({
           }
         },
         "xyflow.edgeMouseEnter": {
-          actions: {
-            type: "onEdgeMouseEnter",
-            params: prop("event")
-          }
+          actions: "onEdgeMouseEnter"
         },
         "xyflow.edgeMouseLeave": {
-          actions: {
-            type: "onEdgeMouseLeave",
-            params: prop("event")
-          }
+          actions: "onEdgeMouseLeave"
         },
         "notations.highlight": {
           actions: {
@@ -628,7 +669,7 @@ const _diagramMachine = setup({
               }),
               target: "focused"
             },
-            "xyflow.edgeClick": [{
+            "xyflow.edgeClick": {
               guard: and([
                 "is dynamic view",
                 "click: selected edge"
@@ -637,17 +678,7 @@ const _diagramMachine = setup({
                 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: {
@@ -733,7 +764,8 @@ const _diagramMachine = setup({
               }
             }),
             "update active walkthrough",
-            "xyflow:fitFocusedBounds"
+            "xyflow:fitFocusedBounds",
+            "emit: walkthroughStarted"
           ],
           on: {
             "key.esc": {
@@ -746,26 +778,29 @@ const _diagramMachine = setup({
               actions: raise({ type: "walkthrough.step", direction: "next" })
             },
             "walkthrough.step": {
-              actions: enqueueActions(({ enqueue, context, event }) => {
-                const { stepId } = context.activeWalkthrough;
-                const stepIndex = context.xyedges.findIndex((e) => e.id === stepId);
-                const nextStepIndex = clamp(event.direction === "next" ? stepIndex + 1 : stepIndex - 1, {
-                  min: 0,
-                  max: context.xyedges.length - 1
-                });
-                if (nextStepIndex === stepIndex) {
-                  return;
-                }
-                const nextStepId = context.xyedges[nextStepIndex].id;
-                enqueue.assign({
-                  activeWalkthrough: {
-                    stepId: nextStepId,
-                    parallelPrefix: getParallelStepsPrefix(nextStepId)
+              actions: [
+                assign(({ context, event }) => {
+                  const { stepId } = context.activeWalkthrough;
+                  const stepIndex = context.xyedges.findIndex((e) => e.id === stepId);
+                  const nextStepIndex = clamp(event.direction === "next" ? stepIndex + 1 : stepIndex - 1, {
+                    min: 0,
+                    max: context.xyedges.length - 1
+                  });
+                  if (nextStepIndex === stepIndex) {
+                    return {};
                   }
-                });
-                enqueue("update active walkthrough");
-                enqueue("xyflow:fitFocusedBounds");
-              })
+                  const nextStepId = context.xyedges[nextStepIndex].id;
+                  return {
+                    activeWalkthrough: {
+                      stepId: nextStepId,
+                      parallelPrefix: getParallelStepsPrefix(nextStepId)
+                    }
+                  };
+                }),
+                "update active walkthrough",
+                "xyflow:fitFocusedBounds",
+                "emit: walkthroughStep"
+              ]
             },
             "xyflow.edgeClick": {
               actions: [
@@ -781,7 +816,8 @@ const _diagramMachine = setup({
                   };
                 }),
                 "update active walkthrough",
-                "xyflow:fitFocusedBounds"
+                "xyflow:fitFocusedBounds",
+                "emit: walkthroughStep"
               ]
             },
             "notations.unhighlight": {
@@ -815,6 +851,7 @@ const _diagramMachine = setup({
               activeWalkthrough: null,
               viewportBeforeFocus: null
             });
+            enqueue("emit: walkthroughStopped");
           })
         }
       }
@@ -879,6 +916,9 @@ const _diagramMachine = setup({
         viewport: ({ event }) => event.viewport
       })
     },
+    "xyflow.edgeEditingStarted": {
+      actions: "emit: edgeEditingStarted"
+    },
     "fitDiagram": {
       guard: "enabled: FitView",
       actions: {
@@ -941,7 +981,7 @@ const _diagramMachine = setup({
       ]
     },
     "update.inputs": {
-      actions: assign(({ event }) => ({ ...event.inputs }))
+      actions: "updateInputs"
     },
     "update.features": {
       actions: [

package/dist/state/types.d.ts

@@ -15,7 +15,7 @@ export interface DiagramActorRef extends ActorRefFromLogic<DiagramMachineLogic>
 }
 export type DiagramActorSnapshot = SnapshotFrom<DiagramMachineLogic>;
 export type DiagramActorEvent = EventFromLogic<DiagramMachineLogic>;
-export type { Context as DiagramContext } from './diagram-machine';
+export type { Context as DiagramContext, EmittedEvents as DiagramEmittedEvents, } from './diagram-machine';
 export type SyncLayoutActorRef = Omit<ActorRefFromLogic<SyncLayoutActorLogic>, 'system'> & {
     system: System;
 };