@likec4/diagram 1.31.0 → 1.32.0

package/dist/state/diagram-machine.js

@@ -1,19 +1,20 @@
-import { nonNullable, invariant, DiagramNode, nonexhaustive, getBBoxCenter, isStepEdgeId, getParallelStepsPrefix } from '@likec4/core';
+import { nonNullable, invariant, nonexhaustive, BBox, isStepEdgeId, getParallelStepsPrefix } from '@likec4/core';
 import { getViewportForBounds, applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
 import { nodeToRect } from '@xyflow/system';
 import { hasAtLeast, prop, clamp, first } from 'remeda';
 import { setup, assign, enqueueActions, sendTo, 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 { overlaysActorLogic } from '../overlays/overlaysActor.js';
+import { searchActorLogic } from '../search/searchActor.js';
 import { getAligner, toNodeRect } from './aligners.js';
-import { lastClickedNode, updateNavigationHistory, mergeXYNodesEdges, updateEdgeData, updateNodeData, unfocusNodesEdges, updateActiveWalkthrough, focusNodesEdges, resetEdgeControlPoints, navigateForward, navigateBack } from './assign.js';
+import { updateActiveWalkthrough, focusNodesEdges, lastClickedNode, updateNavigationHistory, mergeXYNodesEdges, updateEdgeData, updateNodeData, resetEdgeControlPoints, navigateForward, navigateBack } from './assign.js';
 import { hotkeyActorLogic } from './hotkeyActor.js';
 import { DiagramToggledFeaturesPersistence } from './persistence.js';
 import { syncManualLayoutActorLogic } from './syncManualLayoutActor.js';
 import { findDiagramNode, typedSystem, focusedBounds } from './utils.js';
+import { setData, setDimmed, setHovered } from '../base/types.Base.js';
 
 const _diagramMachine = setup({
   types: {
@@ -25,7 +26,8 @@ const _diagramMachine = setup({
   actors: {
     syncManualLayoutActorLogic,
     hotkeyActorLogic,
-    overlaysActorLogic
+    overlaysActorLogic,
+    searchActorLogic
   },
   guards: {
     "isReady": ({ context }) => context.initialized.xydata && context.initialized.xyflow,
@@ -33,8 +35,9 @@ const _diagramMachine = setup({
     "enabled: FocusMode": ({ context }) => context.features.enableFocusMode,
     "enabled: Readonly": ({ context }) => context.features.enableReadOnly,
     "enabled: RelationshipDetails": ({ context }) => context.features.enableRelationshipDetails,
+    "enabled: Search": ({ context }) => context.features.enableSearch,
     "not readonly": ({ context }) => !context.features.enableReadOnly,
-    "is dynamic view": ({ context }) => context.view.__ === "dynamic",
+    "is dynamic view": ({ context }) => context.view._type === "dynamic",
     "is another view": ({ context, event }) => {
       assertEvent(event, ["update.view", "navigate.to"]);
       if (event.type === "update.view") {
@@ -84,10 +87,10 @@ const _diagramMachine = setup({
       if (!nodeId || !context.features.enableVscode) return;
       const diagramNode = findDiagramNode(context, nodeId);
       if (!diagramNode) return;
-      if (DiagramNode.deploymentRef(diagramNode)) {
-        enqueue.raise({ type: "open.source", deployment: DiagramNode.deploymentRef(diagramNode) });
-      } else if (DiagramNode.modelRef(diagramNode)) {
-        enqueue.raise({ type: "open.source", element: DiagramNode.modelRef(diagramNode) });
+      if (diagramNode.deploymentRef) {
+        enqueue.raise({ type: "open.source", deployment: diagramNode.deploymentRef });
+      } else if (diagramNode.modelRef) {
+        enqueue.raise({ type: "open.source", element: diagramNode.modelRef });
       }
     }),
     "xyflow:fitDiagram": ({ context }, params) => {
@@ -95,7 +98,7 @@ const _diagramMachine = setup({
         bounds = context.view.bounds,
         duration = 450
       } = params ?? {};
-      const { width, height, panZoom, transform } = context.xystore.getState();
+      const { width, height, panZoom, transform } = nonNullable(context.xystore).getState();
       const maxZoom = Math.max(1, transform[2]);
       const viewport = getViewportForBounds(
         bounds,
@@ -111,7 +114,7 @@ const _diagramMachine = setup({
     },
     "xyflow:fitFocusedBounds": ({ context }) => {
       const { bounds, duration = 450 } = focusedBounds({ context });
-      const { width, height, panZoom, transform } = context.xystore.getState();
+      const { width, height, panZoom, transform } = nonNullable(context.xystore).getState();
       const maxZoom = Math.max(1, transform[2]);
       const viewport = getViewportForBounds(
         bounds,
@@ -136,7 +139,7 @@ const _diagramMachine = setup({
         viewport,
         duration = 350
       } = params;
-      const { panZoom } = context.xystore.getState();
+      const panZoom = context.xystore?.getState().panZoom;
       panZoom?.setViewport(viewport, duration > 0 ? { duration } : void 0);
     },
     "xyflow:alignNodeFromToAfterNavigate": ({ context }, params) => {
@@ -156,7 +159,7 @@ const _diagramMachine = setup({
     },
     "layout.align": ({ context }, params) => {
       const { mode } = params;
-      const { xystore } = context;
+      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()))];
@@ -179,12 +182,7 @@ const _diagramMachine = setup({
       }
       constraints.updateXYFlowNodes();
     },
-    "updateFeatures": enqueueActions(({ enqueue, system, event }) => {
-      assertEvent(event, "update.features");
-      const { features } = event;
-      enqueue.assign({
-        features: { ...features }
-      });
+    "ensure overlays actor state": enqueueActions(({ enqueue, context: { features }, system }) => {
       const enableOverlays = features.enableElementDetails || features.enableRelationshipDetails || features.enableRelationshipBrowser;
       const hasRunning = typedSystem(system).overlaysActorRef;
       if (enableOverlays && !hasRunning) {
@@ -198,6 +196,31 @@ const _diagramMachine = setup({
         enqueue.stopChild("overlays");
       }
     }),
+    "ensure search actor state": 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");
+      }
+    }),
+    "updateFeatures": assign(({ event }) => {
+      assertEvent(event, "update.features");
+      return {
+        features: { ...event.features }
+      };
+    }),
+    "closeSearch": sendTo(
+      ({ system }) => typedSystem(system).searchActorRef,
+      {
+        type: "close"
+      }
+    ),
     "closeAllOverlays": sendTo(
       ({ system }) => typedSystem(system).overlaysActorRef,
       {
@@ -221,7 +244,7 @@ const _diagramMachine = setup({
       return {
         xynodes: context.xynodes.map((n) => {
           if (n.id === params.node.id) {
-            return Base.setHovered(n, true);
+            return setHovered(n, true);
           }
           return n;
         })
@@ -231,7 +254,7 @@ const _diagramMachine = setup({
       return {
         xynodes: context.xynodes.map((n) => {
           if (n.id === params.node.id) {
-            return Base.setHovered(n, false);
+            return setHovered(n, false);
           }
           return n;
         })
@@ -241,7 +264,7 @@ const _diagramMachine = setup({
       return {
         xyedges: context.xyedges.map((e) => {
           if (e.id === params.edge.id) {
-            return Base.setHovered(e, true);
+            return setHovered(e, true);
           }
           return e;
         })
@@ -251,30 +274,50 @@ const _diagramMachine = setup({
       return {
         xyedges: context.xyedges.map((e) => {
           if (e.id === params.edge.id) {
-            return Base.setHovered(e, false);
+            return setHovered(e, false);
           }
           return e;
         })
       };
     }),
+    "focus on nodes and edges": assign(focusNodesEdges),
     "notations.highlight": assign(({ context }, params) => {
       const kinds = params.kind ? [params.kind] : params.notation.kinds;
       const xynodes = context.xynodes.map((n) => {
         const node = findDiagramNode(context, n.id);
         if (node && node.notation === params.notation.title && node.shape === params.notation.shape && node.color === params.notation.color && kinds.includes(node.kind)) {
-          return Base.setDimmed(n, false);
+          return setDimmed(n, false);
         }
-        return Base.setDimmed(n, "immediate");
+        return setDimmed(n, "immediate");
       });
       return {
         xynodes,
-        xyedges: context.xyedges.map(Base.setDimmed("immediate"))
+        xyedges: context.xyedges.map(setDimmed("immediate"))
       };
-    })
+    }),
+    "tag.highlight": assign(({ context, event }) => {
+      assertEvent(event, "tag.highlight");
+      return {
+        xynodes: context.xynodes.map((n) => {
+          if (n.data.tags?.includes(event.tag)) {
+            return setDimmed(n, false);
+          }
+          return setDimmed(n, "immediate");
+        })
+      };
+    }),
+    "undim everything": assign(({ context }) => ({
+      xynodes: context.xynodes.map(setDimmed(false)),
+      xyedges: context.xyedges.map(setData({
+        dimmed: false,
+        active: false
+      }))
+    })),
+    "update active walkthrough": assign(updateActiveWalkthrough)
   }
 }).createMachine({
   initial: "initializing",
-  context: ({ input, self, spawn }) => ({
+  context: ({ input }) => ({
     ...input,
     xyedges: [],
     xynodes: [],
@@ -329,7 +372,7 @@ const _diagramMachine = setup({
         }
       }
     },
-    "isReady": {
+    isReady: {
       always: [{
         guard: "isReady",
         actions: [
@@ -405,8 +448,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) => DiagramNode.modelRef(n) === event.fqn)?.id;
-            const internalNode = fromNodeId ? context.xystore.getState().nodeLookup.get(fromNodeId) : 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();
@@ -497,10 +540,13 @@ const _diagramMachine = setup({
           }
         },
         "notations.unhighlight": {
-          actions: assign(({ context }) => ({
-            xynodes: context.xynodes.map(Base.setDimmed(false)),
-            xyedges: context.xyedges.map(Base.setDimmed(false))
-          }))
+          actions: "undim everything"
+        },
+        "tag.highlight": {
+          actions: "tag.highlight"
+        },
+        "tag.unhighlight": {
+          actions: "undim everything"
         },
         "saveManualLayout.*": {
           guard: "not readonly",
@@ -513,6 +559,13 @@ const _diagramMachine = setup({
             }
             nonexhaustive(event);
           })
+        },
+        "open.search": {
+          guard: "enabled: Search",
+          actions: sendTo(({ system }) => typedSystem(system).searchActorRef, ({ event }) => ({
+            type: "open",
+            search: event.search
+          }))
         }
       },
       exit: [
@@ -592,8 +645,8 @@ const _diagramMachine = setup({
         },
         focused: {
           entry: [
+            "focus on nodes and edges",
             assign((s) => ({
-              ...focusNodesEdges(s),
               viewportBeforeFocus: { ...s.context.viewport }
             })),
             "open source of focused or last clicked node",
@@ -605,10 +658,10 @@ const _diagramMachine = setup({
             if (context.viewportBeforeFocus) {
               enqueue({ type: "xyflow:setViewport", params: { viewport: context.viewportBeforeFocus } });
             } else {
-              enqueue({ type: "xyflow:fitDiagram" });
+              enqueue("xyflow:fitDiagram");
             }
+            enqueue("undim everything");
             enqueue.assign({
-              ...unfocusNodesEdges({ context}),
               viewportBeforeFocus: null,
               focusedNode: null
             });
@@ -636,7 +689,7 @@ const _diagramMachine = setup({
                 assign({
                   focusedNode: ({ event }) => event.nodeId
                 }),
-                assign(focusNodesEdges),
+                "focus on nodes and edges",
                 "open source of focused or last clicked node",
                 "xyflow:fitFocusedBounds"
               ]
@@ -651,9 +704,10 @@ const _diagramMachine = setup({
               target: "idle"
             },
             "notations.unhighlight": {
-              actions: assign((s) => ({
-                ...focusNodesEdges(s)
-              }))
+              actions: "focus on nodes and edges"
+            },
+            "tag.unhighlight": {
+              actions: "focus on nodes and edges"
             }
           }
         },
@@ -671,7 +725,7 @@ const _diagramMachine = setup({
                 };
               }
             }),
-            assign(updateActiveWalkthrough),
+            "update active walkthrough",
             "xyflow:fitFocusedBounds"
           ],
           on: {
@@ -702,7 +756,7 @@ const _diagramMachine = setup({
                     parallelPrefix: getParallelStepsPrefix(nextStepId)
                   }
                 });
-                enqueue.assign(updateActiveWalkthrough);
+                enqueue("update active walkthrough");
                 enqueue("xyflow:fitFocusedBounds");
               })
             },
@@ -719,14 +773,15 @@ const _diagramMachine = setup({
                     }
                   };
                 }),
-                assign(updateActiveWalkthrough),
+                "update active walkthrough",
                 "xyflow:fitFocusedBounds"
               ]
             },
             "notations.unhighlight": {
-              actions: assign((s) => ({
-                ...updateActiveWalkthrough(s)
-              }))
+              actions: "update active walkthrough"
+            },
+            "tag.unhighlight": {
+              actions: "update active walkthrough"
             },
             "walkthrough.end": {
               target: "idle"
@@ -746,11 +801,11 @@ const _diagramMachine = setup({
             if (context.viewportBeforeFocus) {
               enqueue({ type: "xyflow:setViewport", params: { viewport: context.viewportBeforeFocus } });
             } else {
-              enqueue({ type: "xyflow:fitDiagram" });
+              enqueue("xyflow:fitDiagram");
             }
+            enqueue("undim everything");
             enqueue.assign({
               activeWalkthrough: null,
-              ...unfocusNodesEdges({ context}),
               viewportBeforeFocus: null
             });
           })
@@ -762,6 +817,7 @@ const _diagramMachine = setup({
       id: "navigating",
       entry: [
         "closeAllOverlays",
+        "closeSearch",
         "stopSyncLayout",
         {
           type: "trigger:NavigateTo",
@@ -788,7 +844,7 @@ const _diagramMachine = setup({
             } else {
               enqueue({
                 type: "xyflow:setViewportCenter",
-                params: getBBoxCenter(event.view.bounds)
+                params: BBox.center(event.view.bounds)
               });
             }
             enqueue.assign(updateNavigationHistory);
@@ -841,6 +897,7 @@ const _diagramMachine = setup({
           const isAnotherView = check("is another view");
           if (isAnotherView) {
             enqueue("closeAllOverlays");
+            enqueue("closeSearch");
             enqueue("stopSyncLayout");
             enqueue.assign({
               focusedNode: null
@@ -861,7 +918,7 @@ const _diagramMachine = setup({
             } else {
               enqueue({
                 type: "xyflow:setViewportCenter",
-                params: getBBoxCenter(event.view.bounds)
+                params: BBox.center(event.view.bounds)
               });
               enqueue.raise({ type: "fitDiagram", duration: 200 }, { id: "fitDiagram", delay: 25 });
             }
@@ -885,13 +942,19 @@ const _diagramMachine = setup({
       actions: assign(({ event }) => ({ ...event.inputs }))
     },
     "update.features": {
-      actions: "updateFeatures"
+      actions: [
+        "updateFeatures",
+        "ensure overlays actor state",
+        "ensure search actor state"
+      ]
     }
   },
   exit: [
     "stopSyncLayout",
     cancel("fitDiagram"),
     stopChild("hotkey"),
+    stopChild("overlays"),
+    stopChild("search"),
     assign({
       xyflow: null,
       xystore: null,
@@ -905,7 +968,9 @@ const _diagramMachine = setup({
     })
   ]
 });
-const nodeRef = (node) => DiagramNode.modelRef(node) ?? DiagramNode.deploymentRef(node);
+function nodeRef(node) {
+  return node.modelRef ?? node.deploymentRef;
+}
 function findCorrespondingNode(context, event) {
   const fromNodeId = context.lastOnNavigate?.fromNode;
   const fromNode = fromNodeId && context.view.nodes.find((n) => n.id === fromNodeId);

package/dist/state/syncManualLayoutActor.d.ts

@@ -1,4 +1,4 @@
-import { ViewChange, ViewId } from '@likec4/core';
+import { ViewChange, ViewId } from '@likec4/core/types';
 import { ActorLogicFrom, ActorRef, MachineSnapshot, StateMachine, NonReducibleUnknown, EventObject, MetaObject, ActorRefFromLogic, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, AnyActorRef, StateValue, AnyEventObject, ActionFunction } from 'xstate';
 import { Context as DiagramContext, Events as DiagramEvents } from './diagram-machine';
 export type Input = {
@@ -27,7 +27,7 @@ declare const _syncManualLayoutActorLogic: StateMachine<Readonly<Input>, Events,
 }, {
     type: "same view";
     params: unknown;
-}, "timeout", "paused" | "synced" | "pending" | "stopped" | "idle", "pending" | "ready", Input, NonReducibleUnknown, EventObject, MetaObject, {
+}, "timeout", "paused" | "stopped" | "synced" | "pending" | "idle", "pending" | "ready", Input, NonReducibleUnknown, EventObject, MetaObject, {
     readonly initial: "idle";
     readonly context: ({ input }: {
         spawn: {

package/dist/state/types.d.ts

@@ -1,11 +1,13 @@
 import { ActorRefFromLogic, ActorSystem, EventFromLogic, SnapshotFrom } from 'xstate';
 import { OverlaysActorRef } from '../overlays/overlaysActor';
+import { SearchActorRef } from '../search/searchActor';
 import { DiagramMachineLogic } from './diagram-machine';
 import { SyncLayoutActorLogic } from './syncManualLayoutActor';
 export type System = ActorSystem<{
     actors: {
         diagram: ActorRefFromLogic<DiagramMachineLogic>;
         overlays: OverlaysActorRef;
+        search: SearchActorRef;
     };
 }>;
 export interface DiagramActorRef extends ActorRefFromLogic<DiagramMachineLogic> {

package/dist/state/utils.d.ts

@@ -1,11 +1,13 @@
 import { BBox, DiagramEdge, DiagramNode } from '@likec4/core/types';
 import { ActorSystem } from 'xstate';
 import { OverlaysActorRef } from '../overlays/overlaysActor';
+import { SearchActorRef } from '../search/searchActor';
 import { Context } from './diagram-machine';
 import { DiagramActorRef } from './types';
 export declare function typedSystem(system: ActorSystem<any>): {
     readonly overlaysActorRef: OverlaysActorRef | null;
     readonly diagramActorRef: DiagramActorRef | null;
+    readonly searchActorRef: SearchActorRef | null;
 };
 export declare function findDiagramNode(ctx: Context, xynodeId: string): DiagramNode | null;
 export declare function findDiagramEdge(ctx: Context, xyedgeId: string): DiagramEdge | null;

package/dist/state/utils.js

@@ -5,6 +5,9 @@ function typedSystem(system) {
     },
     get diagramActorRef() {
       return system.get("diagram") ?? null;
+    },
+    get searchActorRef() {
+      return system.get("search") ?? null;
     }
   };
 }