@likec4/diagram 1.44.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,7 +1,6 @@
 import { LayoutedView, ViewChange, ViewId } from '@likec4/core/types';
-import { ActorLogicFrom, ActorRef, ActorRefFromLogic, MachineSnapshot, SnapshotFrom, StateMachine, NonReducibleUnknown, EventObject, MetaObject, ConditionalRequired, InputFrom, RequiredActorOptions, IsNotNever, GetConcreteByKey, AnyActorLogic, RequiredLogicInput, AnyActorRef, StateValue, AnyEventObject, ActionFunction } from 'xstate';
+import { ActorRef, MachineSnapshot, StateMachine } from 'xstate';
 import { Types } from '../types';
-import { UndoHotKeyActorLogic } from './hotkeyActor';
 export type Input = {
     viewId: ViewId;
 };
@@ -34,247 +33,14 @@ export type Events = {
 } | {
     type: 'stop';
 };
-declare const _syncManualLayoutActorLogic: StateMachine<Readonly<Input & {
-    history: ReadonlyArray<HistorySnapshot>;
-    beforeEditing: HistorySnapshot | null;
-    editing: "node" | "edge" | null;
-}>, Events, {
-    undoHotKey?: ActorRefFromLogic< UndoHotKeyActorLogic>;
-}, {
-    src: "undoHotKeyActorLogic";
-    logic: UndoHotKeyActorLogic;
-    id: "undoHotKey";
-}, never, {
-    type: "can undo";
-    params: unknown;
-}, "timeout", "stopped" | "editing" | "pending" | "idle" | "paused", "pending" | "ready", Input, NonReducibleUnknown, EventObject, MetaObject, {
-    readonly initial: "idle";
-    readonly context: ({ input }: {
-        spawn: {
-            <TSrc extends "undoHotKeyActorLogic">(logic: TSrc, ...[options]: {
-                src: "undoHotKeyActorLogic";
-                logic: UndoHotKeyActorLogic;
-                id: "undoHotKey";
-            } extends infer T ? T extends {
-                src: "undoHotKeyActorLogic";
-                logic: UndoHotKeyActorLogic;
-                id: "undoHotKey";
-            } ? T extends {
-                src: TSrc;
-            } ? ConditionalRequired<[options?: {
-                id?: T["id"];
-                systemId?: string;
-                input?: InputFrom<T["logic"]>;
-                syncSnapshot?: boolean;
-            } & { [K in RequiredActorOptions<T>]: unknown; }], IsNotNever<RequiredActorOptions<T>>> : never : never : never): ActorRefFromLogic< GetConcreteByKey<{
-                src: "undoHotKeyActorLogic";
-                logic: UndoHotKeyActorLogic;
-                id: "undoHotKey";
-            }, "src", TSrc>["logic"]>;
-            <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 & {
-            history: ReadonlyArray<HistorySnapshot>;
-            beforeEditing: HistorySnapshot | null;
-            editing: "node" | "edge" | null;
-        }>, Events, Record<string, AnyActorRef | undefined>, StateValue, string, unknown, any, any>, Events, AnyEventObject>;
-    }) => {
-        history: never[];
-        beforeEditing: null;
-        editing: null;
-        viewId: ViewId;
-    };
-    readonly states: {
-        readonly idle: {
-            tags: "ready";
-            entry: ActionFunction<Readonly<Input & {
-                history: ReadonlyArray<HistorySnapshot>;
-                beforeEditing: HistorySnapshot | null;
-                editing: "node" | "edge" | null;
-            }>, Events, Events, undefined, {
-                src: "undoHotKeyActorLogic";
-                logic: UndoHotKeyActorLogic;
-                id: "undoHotKey";
-            }, never, never, never, never>[];
-            on: {
-                sync: {
-                    target: string;
-                };
-                'editing.start': {
-                    actions: ActionFunction<Readonly<Input & {
-                        history: ReadonlyArray<HistorySnapshot>;
-                        beforeEditing: HistorySnapshot | null;
-                        editing: "node" | "edge" | null;
-                    }>, Events, Events, undefined, {
-                        src: "undoHotKeyActorLogic";
-                        logic: UndoHotKeyActorLogic;
-                        id: "undoHotKey";
-                    }, never, never, never, never>;
-                    target: string;
-                };
-                undo: {
-                    guard: "can undo";
-                    actions: ActionFunction<Readonly<Input & {
-                        history: ReadonlyArray<HistorySnapshot>;
-                        beforeEditing: HistorySnapshot | null;
-                        editing: "node" | "edge" | null;
-                    }>, Events, Events, undefined, {
-                        src: "undoHotKeyActorLogic";
-                        logic: UndoHotKeyActorLogic;
-                        id: "undoHotKey";
-                    }, never, {
-                        type: "can undo";
-                        params: unknown;
-                    }, "timeout", EventObject>;
-                };
-            };
-        };
-        readonly editing: {
-            on: {
-                'editing.stop': {
-                    actions: ActionFunction<Readonly<Input & {
-                        history: ReadonlyArray<HistorySnapshot>;
-                        beforeEditing: HistorySnapshot | null;
-                        editing: "node" | "edge" | null;
-                    }>, Events, Events, undefined, {
-                        src: "undoHotKeyActorLogic";
-                        logic: UndoHotKeyActorLogic;
-                        id: "undoHotKey";
-                    }, never, {
-                        type: "can undo";
-                        params: unknown;
-                    }, "timeout", EventObject>[];
-                    target: string;
-                };
-                undo: {};
-            };
-        };
-        readonly pending: {
-            tags: "pending";
-            on: {
-                sync: {
-                    target: string;
-                    reenter: true;
-                };
-                'editing.start': {
-                    target: string;
-                    actions: ActionFunction<Readonly<Input & {
-                        history: ReadonlyArray<HistorySnapshot>;
-                        beforeEditing: HistorySnapshot | null;
-                        editing: "node" | "edge" | null;
-                    }>, Events, Events, undefined, {
-                        src: "undoHotKeyActorLogic";
-                        logic: UndoHotKeyActorLogic;
-                        id: "undoHotKey";
-                    }, never, never, never, never>;
-                };
-                undo: {
-                    guard: "can undo";
-                    actions: ActionFunction<Readonly<Input & {
-                        history: ReadonlyArray<HistorySnapshot>;
-                        beforeEditing: HistorySnapshot | null;
-                        editing: "node" | "edge" | null;
-                    }>, Events, Events, undefined, {
-                        src: "undoHotKeyActorLogic";
-                        logic: UndoHotKeyActorLogic;
-                        id: "undoHotKey";
-                    }, never, {
-                        type: "can undo";
-                        params: unknown;
-                    }, "timeout", EventObject>;
-                    target: string;
-                };
-            };
-            after: {
-                timeout: {
-                    target: string;
-                    actions: ActionFunction<Readonly<Input & {
-                        history: ReadonlyArray<HistorySnapshot>;
-                        beforeEditing: HistorySnapshot | null;
-                        editing: "node" | "edge" | null;
-                    }>, Events, Events, undefined, never, never, never, "timeout", never>;
-                };
-            };
-        };
-        readonly paused: {
-            tags: "pending";
-            on: {
-                'editing.stop': {
-                    actions: ActionFunction<Readonly<Input & {
-                        history: ReadonlyArray<HistorySnapshot>;
-                        beforeEditing: HistorySnapshot | null;
-                        editing: "node" | "edge" | null;
-                    }>, Events, Events, undefined, {
-                        src: "undoHotKeyActorLogic";
-                        logic: UndoHotKeyActorLogic;
-                        id: "undoHotKey";
-                    }, never, {
-                        type: "can undo";
-                        params: unknown;
-                    }, "timeout", EventObject>[];
-                    target: string;
-                };
-                undo: {};
-            };
-        };
-        readonly stopped: {
-            readonly entry: readonly [ ActionFunction<Readonly<Input & {
-                history: ReadonlyArray<HistorySnapshot>;
-                beforeEditing: HistorySnapshot | null;
-                editing: "node" | "edge" | null;
-            }>, Events, Events, undefined, {
-                src: "undoHotKeyActorLogic";
-                logic: UndoHotKeyActorLogic;
-                id: "undoHotKey";
-            }, never, never, never, never>, ActionFunction<Readonly<Input & {
-                history: ReadonlyArray<HistorySnapshot>;
-                beforeEditing: HistorySnapshot | null;
-                editing: "node" | "edge" | null;
-            }>, Events, Events, undefined, {
-                src: "undoHotKeyActorLogic";
-                logic: UndoHotKeyActorLogic;
-                id: "undoHotKey";
-            }, never, {
-                type: "can undo";
-                params: unknown;
-            }, "timeout", EventObject>];
-            readonly type: "final";
-        };
-    };
-    readonly on: {
-        readonly cancel: {
-            readonly target: ".idle";
-        };
-        readonly synced: {
-            readonly actions: ActionFunction<Readonly<Input & {
-                history: ReadonlyArray<HistorySnapshot>;
-                beforeEditing: HistorySnapshot | null;
-                editing: "node" | "edge" | null;
-            }>, Events, Events, undefined, {
-                src: "undoHotKeyActorLogic";
-                logic: UndoHotKeyActorLogic;
-                id: "undoHotKey";
-            }, never, never, never, never>;
-            readonly target: ".idle";
-        };
-        readonly stop: {
-            readonly target: ".stopped";
-        };
-    };
-}>;
+type Tags = 'pending' | 'ready';
 /**
  * Here is a trick to reduce inference types
  */
-type InferredMachine = ActorLogicFrom<typeof _syncManualLayoutActorLogic>;
-export interface SyncLayoutActorLogic extends InferredMachine {
+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 type SyncLayoutActorRef = ActorRefFromLogic<SyncLayoutActorLogic>;
-export type SyncLayoutActorSnapshot = SnapshotFrom<SyncLayoutActorLogic>;
 export declare const syncManualLayoutActorLogic: SyncLayoutActorLogic;
 export {};

package/dist/likec4diagram/state/syncManualLayoutActor.js

@@ -1,9 +1,22 @@
-import { deepEqual } from 'fast-equals';
-import { last, map } from 'remeda';
-import { setup, assign, assertEvent } from 'xstate';
+import { getHotkeyHandler } from '@mantine/hooks';
+import { last, omit } from 'remeda';
+import { setup, assign, stopChild, fromCallback, assertEvent } from 'xstate';
 import { createViewChange } from './createViewChange.js';
-import { undoHotKeyActorLogic } from './hotkeyActor.js';
 
+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");
 };
@@ -25,49 +38,36 @@ const syncManualLayout = setup({
     undoHotKeyActorLogic
   }
 });
-const pushHistory = syncManualLayout.assign(({ context }) => {
-  const snapshot = context.beforeEditing;
-  if (!snapshot) {
-    return {};
-  }
-  const prevHistoryItem = last(context.history);
-  if (deepEqual(prevHistoryItem?.xyedges, snapshot.xyedges) && deepEqual(prevHistoryItem?.xynodes, snapshot.xynodes)) {
-    return {
-      beforeEditing: null
-    };
-  }
-  return {
-    beforeEditing: null,
-    history: [
-      ...context.history,
-      snapshot
-    ]
-  };
-});
-const popHistory = syncManualLayout.assign(({ context }) => {
-  if (context.history.length === 0) {
-    return {};
-  }
-  return {
-    history: context.history.slice(0, -1)
-  };
-});
-const startEditing = syncManualLayout.assign(({ system, event }) => {
+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;
-  return {
+  enqueue.assign({
     editing: event.subject,
     beforeEditing: {
-      xynodes: map(parentContext.xynodes, (n) => ({ ...n })),
-      xyedges: map(parentContext.xyedges, (e) => ({ ...e })),
+      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, enqueue, self }) => {
-  const hasUndo = check("can undo");
+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);
@@ -79,42 +79,56 @@ const ensureHotKey = syncManualLayout.enqueueActions(({ check, enqueue, self })
     });
   }
 });
+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");
-  if (event.wasChanged) {
-    enqueue.cancel("sync");
+  assertEvent(event, ["editing.stop", "cancel", "undo"]);
+  if (event.type === "editing.stop" && event.wasChanged) {
     enqueue(pushHistory);
-    enqueue.raise({ type: "sync" }, { id: "sync", delay: 50 });
+    enqueue(ensureHotKey);
+    enqueue(raiseSync);
+    return;
   }
   enqueue.assign({
     beforeEditing: null,
     editing: null
   });
 });
-const emitOnChange = syncManualLayout.sendTo(
-  ({ system }) => diagramActorRef(system),
-  ({ system }) => {
-    const parentContext = diagramActorRef(system).getSnapshot().context;
-    return {
-      type: "emit.onChange",
-      change: createViewChange(parentContext)
-    };
-  }
-);
 const markHistoryAsSynched = syncManualLayout.assign(({ context, event }) => {
   assertEvent(event, "synced");
   return {
     history: context.history.map((i) => ({
       ...i,
       synched: true
-    })),
-    beforeEditing: context.beforeEditing ? {
-      ...context.beforeEditing,
-      synched: true
-    } : null
+    }))
+  };
+});
+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;
@@ -126,23 +140,37 @@ const undo = syncManualLayout.enqueueActions(({ context, enqueue, system }) => {
     type: "update.view",
     view: lastHistoryItem.view,
     xyedges: lastHistoryItem.xyedges,
-    xynodes: lastHistoryItem.xynodes
+    xynodes: lastHistoryItem.xynodes,
+    source: "internal"
   });
   if (lastHistoryItem.synched) {
-    enqueue.sendTo(diagramActor, {
-      type: "emit.onChange",
-      change: lastHistoryItem.change
-    });
+    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",
-  entry: [
-    assign({
-      beforeEditing: null,
-      editing: null
-    })
-  ],
   on: {
     sync: {
       target: "pending"
@@ -150,28 +178,40 @@ const idle = syncManualLayout.createStateConfig({
     "editing.start": {
       actions: startEditing,
       target: "editing"
-    },
-    undo: {
-      guard: "can undo",
-      actions: undo
     }
   }
 });
 const editing = syncManualLayout.createStateConfig({
+  entry: [
+    cancelSync
+  ],
   on: {
+    cancel: {
+      actions: stopEditing,
+      target: "idle"
+    },
     "editing.stop": {
-      actions: [
-        stopEditing,
-        ensureHotKey
-      ],
+      actions: stopEditing,
       target: "idle"
     },
-    undo: {}
+    undo: {
+      actions: stopEditing,
+      target: "idle"
+    },
+    synced: {
+      actions: [
+        markHistoryAsSynched
+      ]
+    }
   }
 });
 const pending = syncManualLayout.createStateConfig({
   tags: "pending",
   on: {
+    cancel: {
+      actions: cancelSync,
+      target: "idle"
+    },
     sync: {
       target: "pending",
       reenter: true
@@ -179,11 +219,6 @@ const pending = syncManualLayout.createStateConfig({
     "editing.start": {
       target: "paused",
       actions: startEditing
-    },
-    undo: {
-      guard: "can undo",
-      actions: undo,
-      target: "idle"
     }
   },
   after: {
@@ -195,15 +230,30 @@ const pending = syncManualLayout.createStateConfig({
 });
 const paused = syncManualLayout.createStateConfig({
   tags: "pending",
+  entry: [
+    cancelSync
+  ],
   on: {
+    cancel: {
+      actions: stopEditing,
+      target: "idle"
+    },
     "editing.stop": {
-      actions: [
-        stopEditing,
-        ensureHotKey
-      ],
+      actions: stopEditing,
       target: "pending"
     },
-    undo: {}
+    undo: {
+      actions: stopEditing,
+      target: "idle"
+    },
+    // 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({
@@ -225,17 +275,28 @@ const _syncManualLayoutActorLogic = syncManualLayout.createMachine({
           beforeEditing: null,
           history: []
         }),
-        ensureHotKey
+        stopChild("undoHotKey")
       ],
       type: "final"
     }
   },
   on: {
     cancel: {
+      actions: [
+        cancelSync
+      ],
       target: ".idle"
     },
     synced: {
-      actions: markHistoryAsSynched,
+      actions: [
+        markHistoryAsSynched,
+        cancelSync
+      ],
+      target: ".idle"
+    },
+    undo: {
+      guard: "can undo",
+      actions: undo,
       target: ".idle"
     },
     stop: {

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

@@ -1,19 +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 './machine';
+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 './machine.setup';
+export type { DiagramContext, DiagramEmittedEvents, DiagramEvents, DiagramMachineSnapshot as DiagramActorSnapshot, } from './machine';

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

@@ -1,10 +1,13 @@
-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 { 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;
@@ -23,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;