@likec4/diagram 1.44.0 → 1.46.0

package/dist/likec4diagram/state/diagram-api.d.ts

@@ -1,10 +1,12 @@
 import { DynamicViewDisplayVariant, NodeNotation as ElementNotation, ViewChange } from '@likec4/core/types';
+import { RefObject } from 'react';
 import { PartialDeep } from 'type-fest';
 import { FeatureName } from '../../context/DiagramFeatures';
 import { OpenSourceParams } from '../../LikeC4Diagram.props';
+import { OverlaysActorRef } from '../../overlays/overlaysActor';
 import { Types } from '../types';
 import { AlignmentMode } from './aligners';
-import { DiagramActorEvent, DiagramActorRef, DiagramActorSnapshot, DiagramContext } from './types';
+import { DiagramActorRef, DiagramContext, DiagramEvents } from './types';
 import type * as t from '@likec4/core/types';
 type Any = t.aux.Any;
 type Unknown = t.aux.UnknownLayouted;
@@ -13,19 +15,30 @@ type Fqn<A> = t.aux.Fqn<A>;
 type NodeId = t.aux.NodeId;
 type EdgeId = t.aux.EdgeId;
 export interface DiagramApi<A extends Any = Unknown> {
+    /**
+     * React ref to the diagram actor
+     */
+    readonly ref: RefObject<DiagramActorRef>;
+    /**
+     * @warning Do not use in render phase
+     */
     readonly actor: DiagramActorRef;
     /**
      * @warning Do not use in render phase
      */
     readonly currentView: t.DiagramView<A>;
+    overlays(): OverlaysActorRef;
     /**
      * Send event to diagram actor
      */
-    send(event: DiagramActorEvent): void;
+    send(event: DiagramEvents): void;
     /**
      * Navigate to view
+     * @param viewId - Target view ID
+     * @param fromNode - Node from which navigation was triggered
+     * @param focusOnElement - Element FQN to focus after navigation (from search)
      */
-    navigateTo(viewId: ViewId<A>, fromNode?: NodeId): void;
+    navigateTo(viewId: ViewId<A>, fromNode?: NodeId, focusOnElement?: Fqn<A>): void;
     /**
      * Navigate back or forward in history
      */
@@ -77,9 +90,10 @@ export interface DiagramApi<A extends Any = Unknown> {
      */
     focusNode(nodeId: NodeId): void;
     /**
-     * @warning Do not use in render phase
+     * Focus on element by FQN (finds the node and focuses on it).
+     * Used by search to highlight an element on the current view.
      */
-    getSnapshot(): DiagramActorSnapshot;
+    focusOnElement(elementFqn: Fqn<A>): void;
     /**
      * @warning Do not use in render phase
      */
@@ -109,5 +123,5 @@ export interface DiagramApi<A extends Any = Unknown> {
      */
     switchDynamicViewVariant(variant: DynamicViewDisplayVariant): void;
 }
-export declare function makeDiagramApi<A extends Any = Unknown>(actor: DiagramActorRef): DiagramApi<A>;
+export declare function makeDiagramApi<A extends Any = Unknown>(actorRef: RefObject<DiagramActorRef>): DiagramApi<A>;
 export {};

package/dist/likec4diagram/state/diagram-api.js

@@ -1,132 +1,138 @@
-import { invariant } from '@likec4/core/utils';
-import { findDiagramEdge, findDiagramNode, typedSystem } from './utils.js';
+import { invariant, nonNullable } from '@likec4/core/utils';
+import { findDiagramEdge, findDiagramNode, findNodeByModelFqn, typedSystem } from './utils.js';
 
-function makeDiagramApi(actor) {
+function makeDiagramApi(actorRef) {
   return {
-    actor,
-    send: (event) => actor.send(event),
-    navigateTo: (viewId, fromNode) => {
-      actor.send({
+    ref: actorRef,
+    get actor() {
+      return actorRef.current;
+    },
+    overlays() {
+      return nonNullable(actorRef.current.getSnapshot().children.overlays, "Overlays actor not found");
+    },
+    send: (event) => actorRef.current.send(event),
+    navigateTo: (viewId, fromNode, focusOnElement) => {
+      actorRef.current.send({
         type: "navigate.to",
         viewId,
-        ...fromNode && { fromNode }
+        ...fromNode && { fromNode },
+        ...focusOnElement && { focusOnElement }
       });
     },
     navigate: (direction) => {
-      actor.send({ type: `navigate.${direction}` });
+      actorRef.current.send({ type: `navigate.${direction}` });
     },
     fitDiagram: (duration = 350) => {
-      actor.send({ type: "fitDiagram", duration });
+      actorRef.current.send({ type: "xyflow.fitDiagram", duration });
     },
     openRelationshipsBrowser: (fqn) => {
-      actor.send({ type: "open.relationshipsBrowser", fqn });
+      actorRef.current.send({ type: "open.relationshipsBrowser", fqn });
     },
     openSource: (params) => {
-      actor.send({ type: "open.source", ...params });
+      actorRef.current.send({ type: "open.source", ...params });
     },
     openElementDetails: (fqn, fromNode) => {
-      actor.send({ type: "open.elementDetails", fqn, fromNode });
+      actorRef.current.send({ type: "open.elementDetails", fqn, fromNode });
     },
     openRelationshipDetails: (...params) => {
       if (params.length === 1) {
-        actor.send({ type: "open.relationshipDetails", params: { edgeId: params[0] } });
+        actorRef.current.send({ type: "open.relationshipDetails", params: { edgeId: params[0] } });
       } else {
-        actor.send({ type: "open.relationshipDetails", params: { source: params[0], target: params[1] } });
+        actorRef.current.send({ type: "open.relationshipDetails", params: { source: params[0], target: params[1] } });
       }
     },
     updateNodeData: (nodeId, data) => {
-      actor.send({ type: "update.nodeData", nodeId, data });
+      actorRef.current.send({ type: "update.nodeData", nodeId, data });
     },
     updateEdgeData: (edgeId, data) => {
-      actor.send({
-        type: "update.edgeData",
-        edgeId,
-        data
-      });
+      actorRef.current.send({ type: "update.edgeData", edgeId, data });
     },
     startEditing: (subject) => {
-      const syncActor = typedSystem(actor.system).syncLayoutActorRef;
-      invariant(syncActor, "No sync layout actor found in diagram actor system");
-      syncActor.send({ type: "editing.start", subject });
+      const editorActor = typedSystem(actorRef.current.system).editorActorRef;
+      invariant(editorActor, "No editor actor found in diagram actor system");
+      editorActor.send({ type: "edit.start", subject });
     },
     stopEditing: (wasChanged = false) => {
-      const syncActor = typedSystem(actor.system).syncLayoutActorRef;
-      invariant(syncActor, "No sync layout actor found in diagram actor system");
-      syncActor.send({ type: "editing.stop", wasChanged });
+      const editorActor = typedSystem(actorRef.current.system).editorActorRef;
+      invariant(editorActor, "No editor actor found in diagram actor system");
+      editorActor.send({ type: "edit.finish", wasChanged });
     },
     undoEditing: () => {
-      const syncActor = typedSystem(actor.system).syncLayoutActorRef;
-      invariant(syncActor, "No sync layout actor found in diagram actor system");
-      const hasUndo = syncActor.getSnapshot().context.history.length > 0;
+      const editorActor = typedSystem(actorRef.current.system).editorActorRef;
+      invariant(editorActor, "No editor actor found in diagram actor system");
+      const hasUndo = editorActor.getSnapshot().context.history.length > 0;
       if (hasUndo) {
-        syncActor.send({ type: "undo" });
+        editorActor.send({ type: "undo" });
       }
       return hasUndo;
     },
     align: (mode) => {
-      actor.send({ type: "layout.align", mode });
+      actorRef.current.send({ type: "layout.align", mode });
     },
     resetEdgeControlPoints: () => {
-      actor.send({ type: "layout.resetEdgeControlPoints" });
+      actorRef.current.send({ type: "layout.resetEdgeControlPoints" });
     },
     focusNode: (nodeId) => {
-      actor.send({ type: "focus.node", nodeId });
+      actorRef.current.send({ type: "focus.node", nodeId });
+    },
+    focusOnElement: (elementFqn) => {
+      const context = actorRef.current.getSnapshot().context;
+      const node = findNodeByModelFqn(context.xynodes, elementFqn);
+      if (node) {
+        actorRef.current.send({ type: "focus.node", nodeId: node.id, autoUnfocus: true });
+      }
     },
     /**
      * @warning Do not use in render phase
      */
     get currentView() {
-      return actor.getSnapshot().context.view;
+      return actorRef.current.getSnapshot().context.view;
     },
     /**
      * @warning Do not use in render phase
      */
-    getSnapshot: () => actor.getSnapshot(),
-    /**
-     * @warning Do not use in render phase
-     */
-    getContext: () => actor.getSnapshot().context,
+    getContext: () => actorRef.current.getSnapshot().context,
     /**
      * @warning Do not use in render phase
      */
     findDiagramNode: (xynodeId) => {
-      return findDiagramNode(actor.getSnapshot().context, xynodeId);
+      return findDiagramNode(actorRef.current.getSnapshot().context, xynodeId);
     },
     findEdge: (xyedgeId) => {
-      return actor.getSnapshot().context.xyedges.find((e) => e.data.id === xyedgeId) ?? null;
+      return actorRef.current.getSnapshot().context.xyedges.find((e) => e.data.id === xyedgeId) ?? null;
     },
     /**
      * @warning Do not use in render phase
      */
     findDiagramEdge: (xyedgeId) => {
-      return findDiagramEdge(actor.getSnapshot().context, xyedgeId);
+      return findDiagramEdge(actorRef.current.getSnapshot().context, xyedgeId);
     },
     startWalkthrough: () => {
-      actor.send({ type: "walkthrough.start" });
+      actorRef.current.send({ type: "walkthrough.start" });
     },
     walkthroughStep: (direction = "next") => {
-      actor.send({ type: "walkthrough.step", direction });
+      actorRef.current.send({ type: "walkthrough.step", direction });
     },
     stopWalkthrough: () => {
-      actor.send({ type: "walkthrough.end" });
+      actorRef.current.send({ type: "walkthrough.end" });
     },
     toggleFeature: (feature, forceValue) => {
-      actor.send({ type: "toggle.feature", feature, ...forceValue !== void 0 && { forceValue } });
+      actorRef.current.send({ type: "toggle.feature", feature, ...forceValue !== void 0 && { forceValue } });
     },
     highlightNotation: (notation, kind) => {
-      actor.send({ type: "notations.highlight", notation, ...kind && { kind } });
+      actorRef.current.send({ type: "notations.highlight", notation, ...kind && { kind } });
     },
     unhighlightNotation: () => {
-      actor.send({ type: "notations.unhighlight" });
+      actorRef.current.send({ type: "notations.unhighlight" });
     },
     openSearch: (searchValue) => {
-      actor.send({ type: "open.search", ...searchValue && { search: searchValue } });
+      actorRef.current.send({ type: "open.search", ...searchValue && { search: searchValue } });
     },
     triggerChange: (change) => {
-      actor.send({ type: "emit.onChange", change });
+      actorRef.current.send({ type: "trigger.change", change });
     },
     switchDynamicViewVariant: (variant) => {
-      actor.send({ type: "switch.dynamicViewVariant", variant });
+      actorRef.current.send({ type: "switch.dynamicViewVariant", variant });
     }
   };
 }

package/dist/likec4diagram/state/hotkeyActor.d.ts

@@ -1,14 +1,7 @@
 import { AnyEventObject, CallbackActorLogic, NonReducibleUnknown } from 'xstate';
 export type HotKeyEvent = {
-    type: 'key.esc' | `key.arrow.${'left' | 'right'}`;
+    type: 'key.esc' | `key.arrow.${'left' | 'right' | 'up' | 'down'}`;
 };
 export interface HotkeyActorLogic extends CallbackActorLogic<AnyEventObject, NonReducibleUnknown, HotKeyEvent> {
 }
 export declare const hotkeyActorLogic: HotkeyActorLogic;
-type UndoEvent = {
-    type: 'undo';
-};
-export interface UndoHotKeyActorLogic extends CallbackActorLogic<AnyEventObject, NonReducibleUnknown, UndoEvent> {
-}
-export declare const undoHotKeyActorLogic: UndoHotKeyActorLogic;
-export {};

package/dist/likec4diagram/state/hotkeyActor.js

@@ -5,7 +5,6 @@ const hotkeyActorLogic = fromCallback(({ sendBack }) => {
   const escHandler = getHotkeyHandler([
     ["Escape", (event) => {
       event.stopPropagation();
-      console.log("Escape karsarsey pressed");
       sendBack({ type: "key.esc" });
     }, {
       preventDefault: true
@@ -18,11 +17,23 @@ const hotkeyActorLogic = fromCallback(({ sendBack }) => {
     }, {
       preventDefault: true
     }],
+    ["ArrowUp", (event) => {
+      event.stopPropagation();
+      sendBack({ type: "key.arrow.up" });
+    }, {
+      preventDefault: true
+    }],
     ["ArrowRight", (event) => {
       event.stopPropagation();
       sendBack({ type: "key.arrow.right" });
     }, {
       preventDefault: true
+    }],
+    ["ArrowDown", (event) => {
+      event.stopPropagation();
+      sendBack({ type: "key.arrow.down" });
+    }, {
+      preventDefault: true
     }]
   ]);
   document.body.addEventListener("keydown", escHandler);
@@ -32,20 +43,5 @@ const hotkeyActorLogic = fromCallback(({ sendBack }) => {
     document.body.removeEventListener("keydown", arrowshandler, { capture: true });
   };
 });
-const undoHotKeyActorLogic = fromCallback(({ sendBack }) => {
-  const ctrlZHandler = getHotkeyHandler([
-    ["mod + z", (event) => {
-      console.log("Undo hotkey pressed");
-      event.stopPropagation();
-      sendBack({ type: "undo" });
-    }, {
-      preventDefault: true
-    }]
-  ]);
-  document.body.addEventListener("keydown", ctrlZHandler, { capture: true });
-  return () => {
-    document.body.removeEventListener("keydown", ctrlZHandler, { capture: true });
-  };
-});
 
-export { hotkeyActorLogic, undoHotKeyActorLogic };
+export { hotkeyActorLogic };