@likec4/diagram 1.45.0 → 1.46.2

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

@@ -1,124 +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: "xyflow.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
      */
-    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,6 +1,6 @@
 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> {
 }

package/dist/likec4diagram/state/hotkeyActor.js

@@ -17,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);