@likec4/diagram 1.43.0 → 1.45.0

package/dist/likec4diagram/state/mediaPrintActor.js

@@ -0,0 +1,18 @@
+import { fromCallback } from 'xstate';
+
+const mediaPrintActorLogic = fromCallback(({ sendBack }) => {
+  const beforePrint = () => {
+    sendBack({ type: "media.print.on" });
+  };
+  const afterPrint = () => {
+    sendBack({ type: "media.print.off" });
+  };
+  window.addEventListener("beforeprint", beforePrint);
+  window.addEventListener("afterprint", afterPrint);
+  return () => {
+    window.removeEventListener("beforeprint", beforePrint);
+    window.removeEventListener("afterprint", afterPrint);
+  };
+});
+
+export { mediaPrintActorLogic };

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

@@ -1,123 +1,46 @@
-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';
+import { LayoutedView, ViewChange, ViewId } from '@likec4/core/types';
+import { ActorRef, MachineSnapshot, StateMachine } from 'xstate';
+import { Types } from '../types';
 export type Input = {
-    /**
-     * Actually this is DiagramActorRef
-     * But we can't use it here due to circular type inference
-     */
-    parent: ActorRef<MachineSnapshot<DiagramContext, DiagramEvents, any, any, any, any, any, any>, DiagramEvents, any>;
     viewId: ViewId;
 };
-export type Context = Readonly<Input & {}>;
+type HistorySnapshot = {
+    view: LayoutedView;
+    change: ViewChange.SaveViewSnapshot;
+    xynodes: Types.Node[];
+    xyedges: Types.Edge[];
+    synched: boolean;
+};
+export type Context = Readonly<Input & {
+    history: ReadonlyArray<HistorySnapshot>;
+    beforeEditing: HistorySnapshot | null;
+    editing: 'node' | 'edge' | null;
+}>;
 export type Events = {
     type: 'sync';
 } | {
     type: 'synced';
+} | {
+    type: 'editing.start';
+    subject: 'node' | 'edge';
+} | {
+    type: 'editing.stop';
+    wasChanged?: boolean;
 } | {
     type: 'cancel';
+} | {
+    type: 'undo';
 } | {
     type: 'stop';
 };
-declare const _syncManualLayoutActorLogic: StateMachine<Readonly<Input>, Events, {}, never, {
-    type: "trigger:OnChange";
-    params: {
-        change: ViewChange;
-    };
-}, {
-    type: "same view";
-    params: unknown;
-}, "timeout", "stopped" | "synced" | "pending" | "idle" | "paused", "pending" | "ready", Input, NonReducibleUnknown, EventObject, MetaObject, {
-    readonly initial: "idle";
-    readonly context: ({ input }: {
-        spawn: {
-            <TSrc extends never>(logic: TSrc, ...[options]: never): ActorRefFromLogic<never>;
-            <TLogic extends AnyActorLogic>(src: TLogic, ...[options]: ConditionalRequired<[options?: {
-                id?: never;
-                systemId?: string;
-                input?: InputFrom<TLogic>;
-                syncSnapshot?: boolean;
-            } & { [K in RequiredLogicInput<TLogic>]: unknown; }], IsNotNever<RequiredLogicInput<TLogic>>>): ActorRefFromLogic<TLogic>;
-        };
-        input: Input;
-        self: ActorRef<MachineSnapshot<Readonly<Input>, Events, Record<string, AnyActorRef | undefined>, StateValue, string, unknown, any, any>, Events, AnyEventObject>;
-    }) => {
-        /**
-         * Actually this is DiagramActorRef
-         * But we can't use it here due to circular type inference
-         */
-        parent: ActorRef<MachineSnapshot<DiagramContext, DiagramEvents, any, any, any, any, any, any>, DiagramEvents, any>;
-        viewId: ViewId;
-    };
-    readonly states: {
-        readonly idle: {
-            readonly tags: "ready";
-            readonly on: {
-                readonly sync: {
-                    readonly target: "pending";
-                };
-            };
-        };
-        readonly paused: {
-            readonly tags: "pending";
-            readonly on: {
-                readonly sync: {
-                    readonly target: "pending";
-                };
-            };
-        };
-        readonly pending: {
-            readonly tags: "pending";
-            readonly on: {
-                readonly sync: {
-                    readonly target: "pending";
-                    readonly reenter: true;
-                };
-                readonly cancel: {
-                    readonly target: "paused";
-                };
-            };
-            readonly after: {
-                readonly timeout: readonly [{
-                    readonly guard: "same view";
-                    readonly actions: {
-                        readonly type: "trigger:OnChange";
-                        readonly params: ({ context }: {
-                            context: Readonly<Input>;
-                            event: Events;
-                        }) => {
-                            change: ViewChange.SaveManualLayout;
-                        };
-                    };
-                    readonly target: "synced";
-                }, {
-                    readonly target: "stopped";
-                }];
-            };
-        };
-        readonly synced: {
-            readonly tags: "ready";
-            readonly on: {
-                readonly sync: {
-                    readonly target: "pending";
-                };
-            };
-        };
-        readonly stopped: {
-            readonly entry: ActionFunction<Readonly<Input>, Events, Events, undefined, never, never, never, never, never>;
-            readonly type: "final";
-        };
-    };
-    readonly on: {
-        readonly synced: {
-            readonly target: ".synced";
-        };
-        readonly stop: {
-            readonly target: ".stopped";
-        };
-    };
-}>;
-export interface SyncLayoutActorLogic extends ActorLogicFrom<typeof _syncManualLayoutActorLogic> {
+type Tags = 'pending' | 'ready';
+/**
+ * Here is a trick to reduce inference types
+ */
+export interface SyncLayoutActorLogic extends StateMachine<Context, Events, {}, any, any, any, any, any, Tags, Input, any, any, any, any> {
+}
+export type SyncLayoutActorSnapshot = MachineSnapshot<Context, Events, {}, never, Tags, never, {}, {}>;
+export interface SyncLayoutActorRef extends ActorRef<SyncLayoutActorSnapshot, Events> {
 }
 export declare const syncManualLayoutActorLogic: SyncLayoutActorLogic;
 export {};

package/dist/likec4diagram/state/syncManualLayoutActor.js

@@ -1,92 +1,303 @@
-import { getNodeDimensions, getBoundsOfRects, boxToRect } from '@xyflow/system';
-import { reduce, hasAtLeast } from 'remeda';
-import { setup, assign } from 'xstate';
-import { isSamePoint, bezierControlPoints } from '../../utils/xyflow.js';
+import { getHotkeyHandler } from '@mantine/hooks';
+import { last, omit } from 'remeda';
+import { setup, assign, stopChild, fromCallback, assertEvent } from 'xstate';
+import { createViewChange } from './createViewChange.js';
 
-const _syncManualLayoutActorLogic = setup({
+const undoHotKeyActorLogic = fromCallback(({ sendBack }) => {
+  const ctrlZHandler = getHotkeyHandler([
+    ["mod + z", (event) => {
+      event.stopPropagation();
+      sendBack({ type: "undo" });
+    }, {
+      preventDefault: true
+    }]
+  ]);
+  document.body.addEventListener("keydown", ctrlZHandler, { capture: true });
+  return () => {
+    document.body.removeEventListener("keydown", ctrlZHandler, { capture: true });
+  };
+});
+const diagramActorRef = function(system) {
+  return system.get("diagram");
+};
+const syncManualLayout = setup({
   types: {
     context: {},
     input: {},
     events: {},
-    tags: ""
+    tags: "",
+    children: {}
   },
   delays: {
     "timeout": 2e3
   },
-  actions: {
-    "trigger:OnChange": (_, _params) => {
-    }
-  },
   guards: {
-    "same view": ({ context }) => context.parent.getSnapshot().context.view.id === context.viewId
+    "can undo": ({ context }) => context.history.length > 0
+  },
+  actors: {
+    undoHotKeyActorLogic
   }
-}).createMachine({
-  initial: "idle",
-  context: ({ input }) => ({
-    ...input
-  }),
-  states: {
-    idle: {
-      tags: "ready",
-      on: {
-        sync: {
-          target: "pending"
-        }
+});
+const raiseSync = syncManualLayout.raise({ type: "sync" }, { delay: 300, id: "sync" });
+const cancelSync = syncManualLayout.cancel("sync");
+const startEditing = syncManualLayout.enqueueActions(({ check, enqueue, system, event, self, context }) => {
+  assertEvent(event, "editing.start");
+  const parentContext = diagramActorRef(system).getSnapshot().context;
+  enqueue.assign({
+    editing: event.subject,
+    beforeEditing: {
+      xynodes: parentContext.xynodes.map(
+        ({ measured, style, ...n }) => ({
+          ...omit(n, ["selected", "dragging", "resizing"]),
+          data: omit(n.data, ["dimmed", "hovered"]),
+          initialWidth: measured?.width ?? n.width ?? n.initialWidth,
+          initialHeight: measured?.height ?? n.height ?? n.initialHeight
+        })
+      ),
+      xyedges: parentContext.xyedges.map(
+        (e) => ({
+          ...omit(e, ["selected"]),
+          data: omit(e.data, ["active", "dimmed", "hovered"])
+        })
+      ),
+      change: createViewChange(parentContext),
+      view: parentContext.view,
+      synched: false
+    }
+  });
+});
+const ensureHotKey = syncManualLayout.enqueueActions(({ check, context, enqueue, self }) => {
+  const hasUndo = context.history.length > 0;
+  const undoHotKey = self.getSnapshot().children["undoHotKey"];
+  if (undoHotKey && !hasUndo) {
+    enqueue.stopChild(undoHotKey);
+    return;
+  }
+  if (!undoHotKey && hasUndo) {
+    enqueue.spawnChild("undoHotKeyActorLogic", {
+      id: "undoHotKey"
+    });
+  }
+});
+const pushHistory = syncManualLayout.assign(({ context }) => {
+  const snapshot = context.beforeEditing;
+  if (!snapshot) {
+    return {
+      editing: null
+    };
+  }
+  return {
+    beforeEditing: null,
+    editing: null,
+    history: [
+      ...context.history,
+      snapshot
+    ]
+  };
+});
+const stopEditing = syncManualLayout.enqueueActions(({ event, enqueue }) => {
+  assertEvent(event, ["editing.stop", "cancel", "undo"]);
+  if (event.type === "editing.stop" && event.wasChanged) {
+    enqueue(pushHistory);
+    enqueue(ensureHotKey);
+    enqueue(raiseSync);
+    return;
+  }
+  enqueue.assign({
+    beforeEditing: null,
+    editing: null
+  });
+});
+const markHistoryAsSynched = syncManualLayout.assign(({ context, event }) => {
+  assertEvent(event, "synced");
+  return {
+    history: context.history.map((i) => ({
+      ...i,
+      synched: true
+    }))
+  };
+});
+const popHistory = syncManualLayout.assign(({ context }) => {
+  if (context.history.length === 0 || context.history.length === 1) {
+    return {
+      history: []
+    };
+  }
+  return {
+    history: context.history.slice(0, context.history.length - 1)
+  };
+});
+const undo = syncManualLayout.enqueueActions(({ context, enqueue, system }) => {
+  enqueue(cancelSync);
+  const lastHistoryItem = last(context.history);
+  if (!lastHistoryItem) {
+    return;
+  }
+  enqueue(popHistory);
+  enqueue(ensureHotKey);
+  const diagramActor = diagramActorRef(system);
+  enqueue.sendTo(diagramActor, {
+    type: "update.view",
+    view: lastHistoryItem.view,
+    xyedges: lastHistoryItem.xyedges,
+    xynodes: lastHistoryItem.xynodes,
+    source: "internal"
+  });
+  if (lastHistoryItem.synched) {
+    enqueue.sendTo(
+      diagramActor,
+      {
+        type: "emit.onChange",
+        change: lastHistoryItem.change
       }
+    );
+  } else {
+    enqueue(raiseSync);
+  }
+});
+const emitOnChange = syncManualLayout.enqueueActions(({ context, enqueue, system }) => {
+  enqueue(cancelSync);
+  const diagramActor = diagramActorRef(system);
+  const parentContext = diagramActor.getSnapshot().context;
+  const change = createViewChange(parentContext);
+  enqueue.sendTo(diagramActor, {
+    type: "update.view-bounds",
+    bounds: change.layout.bounds
+  });
+  enqueue.sendTo(diagramActor, {
+    type: "emit.onChange",
+    change
+  });
+});
+const idle = syncManualLayout.createStateConfig({
+  tags: "ready",
+  on: {
+    sync: {
+      target: "pending"
     },
-    paused: {
-      tags: "pending",
-      on: {
-        sync: {
-          target: "pending"
-        }
-      }
+    "editing.start": {
+      actions: startEditing,
+      target: "editing"
+    }
+  }
+});
+const editing = syncManualLayout.createStateConfig({
+  entry: [
+    cancelSync
+  ],
+  on: {
+    cancel: {
+      actions: stopEditing,
+      target: "idle"
     },
-    pending: {
-      tags: "pending",
-      on: {
-        sync: {
-          target: "pending",
-          reenter: true
-        },
-        cancel: {
-          target: "paused"
-        }
-      },
-      after: {
-        "timeout": [{
-          guard: "same view",
-          actions: {
-            type: "trigger:OnChange",
-            params: ({ context }) => {
-              const change = createViewChange(context.parent.getSnapshot().context);
-              return { change };
-            }
-          },
-          target: "synced"
-        }, {
-          target: "stopped"
-        }]
-      }
+    "editing.stop": {
+      actions: stopEditing,
+      target: "idle"
+    },
+    undo: {
+      actions: stopEditing,
+      target: "idle"
     },
     synced: {
-      tags: "ready",
-      on: {
-        sync: {
-          target: "pending"
-        }
-      }
+      actions: [
+        markHistoryAsSynched
+      ]
+    }
+  }
+});
+const pending = syncManualLayout.createStateConfig({
+  tags: "pending",
+  on: {
+    cancel: {
+      actions: cancelSync,
+      target: "idle"
+    },
+    sync: {
+      target: "pending",
+      reenter: true
+    },
+    "editing.start": {
+      target: "paused",
+      actions: startEditing
+    }
+  },
+  after: {
+    "timeout": {
+      target: "idle",
+      actions: emitOnChange
+    }
+  }
+});
+const paused = syncManualLayout.createStateConfig({
+  tags: "pending",
+  entry: [
+    cancelSync
+  ],
+  on: {
+    cancel: {
+      actions: stopEditing,
+      target: "idle"
+    },
+    "editing.stop": {
+      actions: stopEditing,
+      target: "pending"
+    },
+    undo: {
+      actions: stopEditing,
+      target: "idle"
     },
-    "stopped": {
-      entry: assign({
-        parent: null
-      }),
+    // When external sync is done while editing, we just mark history as synced
+    // but go to editing state (that does not return to pending)
+    synced: {
+      actions: [
+        markHistoryAsSynched
+      ],
+      target: "editing"
+    }
+  }
+});
+const _syncManualLayoutActorLogic = syncManualLayout.createMachine({
+  initial: "idle",
+  context: ({ input }) => ({
+    ...input,
+    history: [],
+    beforeEditing: null,
+    editing: null
+  }),
+  states: {
+    idle,
+    editing,
+    pending,
+    paused,
+    stopped: {
+      entry: [
+        assign({
+          beforeEditing: null,
+          history: []
+        }),
+        stopChild("undoHotKey")
+      ],
       type: "final"
     }
   },
   on: {
+    cancel: {
+      actions: [
+        cancelSync
+      ],
+      target: ".idle"
+    },
     synced: {
-      target: ".synced"
+      actions: [
+        markHistoryAsSynched,
+        cancelSync
+      ],
+      target: ".idle"
+    },
+    undo: {
+      guard: "can undo",
+      actions: undo,
+      target: ".idle"
     },
     stop: {
       target: ".stopped"
@@ -94,80 +305,5 @@ const _syncManualLayoutActorLogic = setup({
   }
 });
 const syncManualLayoutActorLogic = _syncManualLayoutActorLogic;
-function createViewChange(parentContext) {
-  const { view, xystore, xyflow } = parentContext;
-  const { nodeLookup } = xystore.getState();
-  const movedNodes = /* @__PURE__ */ new Set();
-  let bounds;
-  const nodes = reduce([...nodeLookup.values()], (acc, node) => {
-    const dimensions = getNodeDimensions(node);
-    if (!isSamePoint(node.internals.positionAbsolute, node.data) || node.initialWidth !== dimensions.width || node.initialHeight !== dimensions.height) {
-      movedNodes.add(node.id);
-    }
-    const rect = acc[node.id] = {
-      isCompound: node.type !== "element" && node.type !== "deployment",
-      x: Math.floor(node.internals.positionAbsolute.x),
-      y: Math.floor(node.internals.positionAbsolute.y),
-      width: Math.ceil(dimensions.width),
-      height: Math.ceil(dimensions.height)
-    };
-    bounds = bounds ? getBoundsOfRects(bounds, rect) : rect;
-    return acc;
-  }, {});
-  const edges = reduce(xyflow?.getEdges() ?? [], (acc, { source, target, data }) => {
-    let controlPoints = data.controlPoints ?? [];
-    const sourceOrTargetMoved = movedNodes.has(source) || movedNodes.has(target);
-    if (controlPoints.length === 0 && sourceOrTargetMoved) {
-      controlPoints = bezierControlPoints(data);
-    }
-    if (data.points.length === 0 && controlPoints.length === 0) {
-      return acc;
-    }
-    const _updated = acc[data.id] = {
-      points: data.points
-    };
-    if (data.labelXY && data.labelBBox) {
-      _updated.labelBBox = {
-        ...data.labelBBox,
-        ...data.labelXY
-      };
-    }
-    if (data.labelBBox) {
-      _updated.labelBBox ??= data.labelBBox;
-    }
-    if (hasAtLeast(controlPoints, 1)) {
-      _updated.controlPoints = controlPoints;
-    }
-    const allX = [
-      ...data.points.map((p) => p[0]),
-      ...controlPoints.map((p) => p.x),
-      ..._updated.labelBBox ? [_updated.labelBBox.x, _updated.labelBBox.x + _updated.labelBBox.width] : []
-    ];
-    const allY = [
-      ...data.points.map((p) => p[1]),
-      ...controlPoints.map((p) => p.y),
-      ..._updated.labelBBox ? [_updated.labelBBox.y, _updated.labelBBox.y + _updated.labelBBox.height] : []
-    ];
-    const rect = boxToRect({
-      x: Math.floor(Math.min(...allX)),
-      y: Math.floor(Math.min(...allY)),
-      x2: Math.ceil(Math.max(...allX)),
-      y2: Math.ceil(Math.max(...allY))
-    });
-    bounds = bounds ? getBoundsOfRects(bounds, rect) : rect;
-    return acc;
-  }, {});
-  bounds ??= view.bounds;
-  return {
-    op: "save-manual-layout",
-    layout: {
-      hash: view.hash,
-      autoLayout: view.autoLayout,
-      nodes,
-      edges,
-      ...bounds
-    }
-  };
-}
 
 export { syncManualLayoutActorLogic };

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

@@ -1,22 +1,17 @@
-import { ActorRefFromLogic, ActorSystem, EventFromLogic, SnapshotFrom } from 'xstate';
+import { ActorSystem } from 'xstate';
 import { OverlaysActorRef } from '../../overlays/overlaysActor';
 import { SearchActorRef } from '../../search/searchActor';
-import { DiagramMachineLogic } from './diagram-machine';
-import { SyncLayoutActorLogic } from './syncManualLayoutActor';
+import { DiagramMachineRef } from './machine';
+import { SyncLayoutActorRef } from './syncManualLayoutActor';
 export type System = ActorSystem<{
     actors: {
-        diagram: ActorRefFromLogic<DiagramMachineLogic>;
+        diagram: DiagramMachineRef;
         overlays: OverlaysActorRef;
         search: SearchActorRef;
+        syncLayout: SyncLayoutActorRef;
     };
 }>;
-export interface DiagramActorRef extends ActorRefFromLogic<DiagramMachineLogic> {
+export interface DiagramActorRef extends DiagramMachineRef {
     system: System;
 }
-export type DiagramActorSnapshot = SnapshotFrom<DiagramMachineLogic>;
-export type DiagramActorEvent = EventFromLogic<DiagramMachineLogic>;
-export type { Context as DiagramContext, EmittedEvents as DiagramEmittedEvents, } from './diagram-machine';
-export type SyncLayoutActorRef = Omit<ActorRefFromLogic<SyncLayoutActorLogic>, 'system'> & {
-    system: System;
-};
-export type SyncLayoutActorSnapshot = SnapshotFrom<SyncLayoutActorLogic>;
+export type { DiagramContext, DiagramEmittedEvents, DiagramEvents, DiagramMachineSnapshot as DiagramActorSnapshot, } from './machine';

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

@@ -1,12 +1,17 @@
-import { DiagramEdge, DiagramNode, BBox } from '@likec4/core/types';
+import { DiagramEdge, DiagramNode, DiagramView, BBox } from '@likec4/core/types';
+import { Viewport } from '@xyflow/system';
 import { ActorSystem } from 'xstate';
 import { OverlaysActorRef } from '../../overlays/overlaysActor';
 import { SearchActorRef } from '../../search/searchActor';
-import { Context } from './diagram-machine';
+import { Types } from '../types';
+import { Context } from './machine.setup';
+import { SyncLayoutActorRef } from './syncManualLayoutActor';
 import { DiagramActorRef } from './types';
+import { Fqn, DeploymentFqn } from '@likec4/core';
 export declare function typedSystem(system: ActorSystem<any>): {
+    readonly syncLayoutActorRef: SyncLayoutActorRef | null;
     readonly overlaysActorRef: OverlaysActorRef | null;
-    readonly diagramActorRef: DiagramActorRef | null;
+    readonly diagramActorRef: DiagramActorRef;
     readonly searchActorRef: SearchActorRef | null;
 };
 export declare function findDiagramNode(ctx: Context, xynodeId: string): DiagramNode | null;
@@ -21,5 +26,15 @@ export declare function activeSequenceBounds(params: {
     context: Context;
 }): {
     bounds: BBox;
-    duration?: number;
+    duration: number;
+};
+export declare function nodeRef(node: Types.Node): Fqn | DeploymentFqn | null;
+export declare function findCorrespondingNode(context: Pick<Context, 'lastOnNavigate' | 'xynodes'>, event: {
+    view: DiagramView;
+    xynodes: Types.Node[];
+}): {
+    fromNode: Types.Node<"element" | "deployment" | "compound-element" | "compound-deployment" | "view-group" | "seq-actor" | "seq-parallel"> | null | undefined;
+    toNode: Types.Node<"element" | "deployment" | "compound-element" | "compound-deployment" | "view-group" | "seq-actor" | "seq-parallel"> | null | undefined;
 };
+export declare function calcViewportForBounds(context: Pick<Context, 'xystore' | 'xyflow' | 'fitViewPadding'>, bounds: BBox): Viewport;
+export declare function parseAsNumber(value: string | number | undefined): number;