@likec4/diagram 1.42.1 → 1.44.0

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

@@ -0,0 +1,134 @@
+import { invariant } from '@likec4/core/utils';
+import { findDiagramEdge, findDiagramNode, typedSystem } from './utils.js';
+
+function makeDiagramApi(actor) {
+  return {
+    actor,
+    send: (event) => actor.send(event),
+    navigateTo: (viewId, fromNode) => {
+      actor.send({
+        type: "navigate.to",
+        viewId,
+        ...fromNode && { fromNode }
+      });
+    },
+    navigate: (direction) => {
+      actor.send({ type: `navigate.${direction}` });
+    },
+    fitDiagram: (duration = 350) => {
+      actor.send({ type: "fitDiagram", duration });
+    },
+    openRelationshipsBrowser: (fqn) => {
+      actor.send({ type: "open.relationshipsBrowser", fqn });
+    },
+    openSource: (params) => {
+      actor.send({ type: "open.source", ...params });
+    },
+    openElementDetails: (fqn, fromNode) => {
+      actor.send({ type: "open.elementDetails", fqn, fromNode });
+    },
+    openRelationshipDetails: (...params) => {
+      if (params.length === 1) {
+        actor.send({ type: "open.relationshipDetails", params: { edgeId: params[0] } });
+      } else {
+        actor.send({ type: "open.relationshipDetails", params: { source: params[0], target: params[1] } });
+      }
+    },
+    updateNodeData: (nodeId, data) => {
+      actor.send({ type: "update.nodeData", nodeId, data });
+    },
+    updateEdgeData: (edgeId, data) => {
+      actor.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 });
+    },
+    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 });
+    },
+    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;
+      if (hasUndo) {
+        syncActor.send({ type: "undo" });
+      }
+      return hasUndo;
+    },
+    align: (mode) => {
+      actor.send({ type: "layout.align", mode });
+    },
+    resetEdgeControlPoints: () => {
+      actor.send({ type: "layout.resetEdgeControlPoints" });
+    },
+    focusNode: (nodeId) => {
+      actor.send({ type: "focus.node", nodeId });
+    },
+    /**
+     * @warning Do not use in render phase
+     */
+    get currentView() {
+      return actor.getSnapshot().context.view;
+    },
+    /**
+     * @warning Do not use in render phase
+     */
+    getSnapshot: () => actor.getSnapshot(),
+    /**
+     * @warning Do not use in render phase
+     */
+    getContext: () => actor.getSnapshot().context,
+    /**
+     * @warning Do not use in render phase
+     */
+    findDiagramNode: (xynodeId) => {
+      return findDiagramNode(actor.getSnapshot().context, xynodeId);
+    },
+    findEdge: (xyedgeId) => {
+      return actor.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);
+    },
+    startWalkthrough: () => {
+      actor.send({ type: "walkthrough.start" });
+    },
+    walkthroughStep: (direction = "next") => {
+      actor.send({ type: "walkthrough.step", direction });
+    },
+    stopWalkthrough: () => {
+      actor.send({ type: "walkthrough.end" });
+    },
+    toggleFeature: (feature, forceValue) => {
+      actor.send({ type: "toggle.feature", feature, ...forceValue !== void 0 && { forceValue } });
+    },
+    highlightNotation: (notation, kind) => {
+      actor.send({ type: "notations.highlight", notation, ...kind && { kind } });
+    },
+    unhighlightNotation: () => {
+      actor.send({ type: "notations.unhighlight" });
+    },
+    openSearch: (searchValue) => {
+      actor.send({ type: "open.search", ...searchValue && { search: searchValue } });
+    },
+    triggerChange: (change) => {
+      actor.send({ type: "emit.onChange", change });
+    },
+    switchDynamicViewVariant: (variant) => {
+      actor.send({ type: "switch.dynamicViewVariant", variant });
+    }
+  };
+}
+
+export { makeDiagramApi };

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

@@ -5,3 +5,10 @@ export type HotKeyEvent = {
 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,6 +5,7 @@ const hotkeyActorLogic = fromCallback(({ sendBack }) => {
   const escHandler = getHotkeyHandler([
     ["Escape", (event) => {
       event.stopPropagation();
+      console.log("Escape karsarsey pressed");
       sendBack({ type: "key.esc" });
     }, {
       preventDefault: true
@@ -31,5 +32,20 @@ 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 };
+export { hotkeyActorLogic, undoHotKeyActorLogic };