@likec4/diagram 1.44.0 → 1.45.0

package/dist/likec4diagram/state/machine.actions.layout.d.ts

@@ -0,0 +1,579 @@
+import { BBox } from '@likec4/core';
+import { Viewport } from '@xyflow/react';
+import { ActionFunction, Values, CancelAction } from 'xstate';
+import { Context, Events, EmittedEvents } from './machine.setup';
+import { SyncLayoutActorLogic } from './syncManualLayoutActor';
+import { HotkeyActorLogic } from './hotkeyActor';
+import { OverlaysActorLogic } from '../../overlays/overlaysActor';
+import { SearchActorLogic } from '../../search/searchActor';
+import { MediaPrintActorLogic } from './mediaPrintActor';
+export declare const setViewport: (params?: {
+    viewport: Viewport;
+    duration?: number;
+}) => ActionFunction<Context, Events, Events, unknown, Values<{
+    syncManualLayoutActorLogic: {
+        src: "syncManualLayoutActorLogic";
+        logic: SyncLayoutActorLogic;
+        id: "syncLayout";
+    };
+    hotkeyActorLogic: {
+        src: "hotkeyActorLogic";
+        logic: HotkeyActorLogic;
+        id: "hotkey";
+    };
+    overlaysActorLogic: {
+        src: "overlaysActorLogic";
+        logic: OverlaysActorLogic;
+        id: "overlays";
+    };
+    searchActorLogic: {
+        src: "searchActorLogic";
+        logic: SearchActorLogic;
+        id: "search";
+    };
+    mediaPrintActorLogic: {
+        src: "mediaPrintActorLogic";
+        logic: MediaPrintActorLogic;
+        id: "mediaPrint";
+    };
+}>, never, Values<{
+    isReady: {
+        type: "isReady";
+        params: unknown;
+    };
+    "enabled: FitView": {
+        type: "enabled: FitView";
+        params: unknown;
+    };
+    "enabled: FocusMode": {
+        type: "enabled: FocusMode";
+        params: unknown;
+    };
+    "enabled: Readonly": {
+        type: "enabled: Readonly";
+        params: unknown;
+    };
+    "enabled: RelationshipDetails": {
+        type: "enabled: RelationshipDetails";
+        params: unknown;
+    };
+    "enabled: Search": {
+        type: "enabled: Search";
+        params: unknown;
+    };
+    "enabled: ElementDetails": {
+        type: "enabled: ElementDetails";
+        params: unknown;
+    };
+    "enabled: OpenSource": {
+        type: "enabled: OpenSource";
+        params: unknown;
+    };
+    "enabled: DynamicViewWalkthrough": {
+        type: "enabled: DynamicViewWalkthrough";
+        params: unknown;
+    };
+    "enabled: Overlays": {
+        type: "enabled: Overlays";
+        params: unknown;
+    };
+    "not readonly": {
+        type: "not readonly";
+        params: unknown;
+    };
+    "is dynamic view": {
+        type: "is dynamic view";
+        params: unknown;
+    };
+    "is another view": {
+        type: "is another view";
+        params: unknown;
+    };
+    "click: node has modelFqn": {
+        type: "click: node has modelFqn";
+        params: unknown;
+    };
+    "click: selected node": {
+        type: "click: selected node";
+        params: unknown;
+    };
+    "click: same node": {
+        type: "click: same node";
+        params: unknown;
+    };
+    "click: focused node": {
+        type: "click: focused node";
+        params: unknown;
+    };
+    "click: node has connections": {
+        type: "click: node has connections";
+        params: unknown;
+    };
+    "click: selected edge": {
+        type: "click: selected edge";
+        params: unknown;
+    };
+}>, never, EmittedEvents>;
+export declare const setViewportCenter: (params?: {
+    x: number;
+    y: number;
+}) => ActionFunction<Context, Events, Events, unknown, Values<{
+    syncManualLayoutActorLogic: {
+        src: "syncManualLayoutActorLogic";
+        logic: SyncLayoutActorLogic;
+        id: "syncLayout";
+    };
+    hotkeyActorLogic: {
+        src: "hotkeyActorLogic";
+        logic: HotkeyActorLogic;
+        id: "hotkey";
+    };
+    overlaysActorLogic: {
+        src: "overlaysActorLogic";
+        logic: OverlaysActorLogic;
+        id: "overlays";
+    };
+    searchActorLogic: {
+        src: "searchActorLogic";
+        logic: SearchActorLogic;
+        id: "search";
+    };
+    mediaPrintActorLogic: {
+        src: "mediaPrintActorLogic";
+        logic: MediaPrintActorLogic;
+        id: "mediaPrint";
+    };
+}>, never, Values<{
+    isReady: {
+        type: "isReady";
+        params: unknown;
+    };
+    "enabled: FitView": {
+        type: "enabled: FitView";
+        params: unknown;
+    };
+    "enabled: FocusMode": {
+        type: "enabled: FocusMode";
+        params: unknown;
+    };
+    "enabled: Readonly": {
+        type: "enabled: Readonly";
+        params: unknown;
+    };
+    "enabled: RelationshipDetails": {
+        type: "enabled: RelationshipDetails";
+        params: unknown;
+    };
+    "enabled: Search": {
+        type: "enabled: Search";
+        params: unknown;
+    };
+    "enabled: ElementDetails": {
+        type: "enabled: ElementDetails";
+        params: unknown;
+    };
+    "enabled: OpenSource": {
+        type: "enabled: OpenSource";
+        params: unknown;
+    };
+    "enabled: DynamicViewWalkthrough": {
+        type: "enabled: DynamicViewWalkthrough";
+        params: unknown;
+    };
+    "enabled: Overlays": {
+        type: "enabled: Overlays";
+        params: unknown;
+    };
+    "not readonly": {
+        type: "not readonly";
+        params: unknown;
+    };
+    "is dynamic view": {
+        type: "is dynamic view";
+        params: unknown;
+    };
+    "is another view": {
+        type: "is another view";
+        params: unknown;
+    };
+    "click: node has modelFqn": {
+        type: "click: node has modelFqn";
+        params: unknown;
+    };
+    "click: selected node": {
+        type: "click: selected node";
+        params: unknown;
+    };
+    "click: same node": {
+        type: "click: same node";
+        params: unknown;
+    };
+    "click: focused node": {
+        type: "click: focused node";
+        params: unknown;
+    };
+    "click: node has connections": {
+        type: "click: node has connections";
+        params: unknown;
+    };
+    "click: selected edge": {
+        type: "click: selected edge";
+        params: unknown;
+    };
+}>, never, EmittedEvents>;
+export declare const fitDiagram: (params?: {
+    duration?: number;
+    bounds?: BBox;
+}) => ActionFunction<Context, Events, Events, undefined, Values<{
+    syncManualLayoutActorLogic: {
+        src: "syncManualLayoutActorLogic";
+        logic: SyncLayoutActorLogic;
+        id: "syncLayout";
+    };
+    hotkeyActorLogic: {
+        src: "hotkeyActorLogic";
+        logic: HotkeyActorLogic;
+        id: "hotkey";
+    };
+    overlaysActorLogic: {
+        src: "overlaysActorLogic";
+        logic: OverlaysActorLogic;
+        id: "overlays";
+    };
+    searchActorLogic: {
+        src: "searchActorLogic";
+        logic: SearchActorLogic;
+        id: "search";
+    };
+    mediaPrintActorLogic: {
+        src: "mediaPrintActorLogic";
+        logic: MediaPrintActorLogic;
+        id: "mediaPrint";
+    };
+}>, never, Values<{
+    isReady: {
+        type: "isReady";
+        params: unknown;
+    };
+    "enabled: FitView": {
+        type: "enabled: FitView";
+        params: unknown;
+    };
+    "enabled: FocusMode": {
+        type: "enabled: FocusMode";
+        params: unknown;
+    };
+    "enabled: Readonly": {
+        type: "enabled: Readonly";
+        params: unknown;
+    };
+    "enabled: RelationshipDetails": {
+        type: "enabled: RelationshipDetails";
+        params: unknown;
+    };
+    "enabled: Search": {
+        type: "enabled: Search";
+        params: unknown;
+    };
+    "enabled: ElementDetails": {
+        type: "enabled: ElementDetails";
+        params: unknown;
+    };
+    "enabled: OpenSource": {
+        type: "enabled: OpenSource";
+        params: unknown;
+    };
+    "enabled: DynamicViewWalkthrough": {
+        type: "enabled: DynamicViewWalkthrough";
+        params: unknown;
+    };
+    "enabled: Overlays": {
+        type: "enabled: Overlays";
+        params: unknown;
+    };
+    "not readonly": {
+        type: "not readonly";
+        params: unknown;
+    };
+    "is dynamic view": {
+        type: "is dynamic view";
+        params: unknown;
+    };
+    "is another view": {
+        type: "is another view";
+        params: unknown;
+    };
+    "click: node has modelFqn": {
+        type: "click: node has modelFqn";
+        params: unknown;
+    };
+    "click: selected node": {
+        type: "click: selected node";
+        params: unknown;
+    };
+    "click: same node": {
+        type: "click: same node";
+        params: unknown;
+    };
+    "click: focused node": {
+        type: "click: focused node";
+        params: unknown;
+    };
+    "click: node has connections": {
+        type: "click: node has connections";
+        params: unknown;
+    };
+    "click: selected edge": {
+        type: "click: selected edge";
+        params: unknown;
+    };
+}>, never, EmittedEvents>;
+export declare const fitFocusedBounds: () => ActionFunction<Context, Events, Events, unknown, Values<{
+    syncManualLayoutActorLogic: {
+        src: "syncManualLayoutActorLogic";
+        logic: SyncLayoutActorLogic;
+        id: "syncLayout";
+    };
+    hotkeyActorLogic: {
+        src: "hotkeyActorLogic";
+        logic: HotkeyActorLogic;
+        id: "hotkey";
+    };
+    overlaysActorLogic: {
+        src: "overlaysActorLogic";
+        logic: OverlaysActorLogic;
+        id: "overlays";
+    };
+    searchActorLogic: {
+        src: "searchActorLogic";
+        logic: SearchActorLogic;
+        id: "search";
+    };
+    mediaPrintActorLogic: {
+        src: "mediaPrintActorLogic";
+        logic: MediaPrintActorLogic;
+        id: "mediaPrint";
+    };
+}>, never, Values<{
+    isReady: {
+        type: "isReady";
+        params: unknown;
+    };
+    "enabled: FitView": {
+        type: "enabled: FitView";
+        params: unknown;
+    };
+    "enabled: FocusMode": {
+        type: "enabled: FocusMode";
+        params: unknown;
+    };
+    "enabled: Readonly": {
+        type: "enabled: Readonly";
+        params: unknown;
+    };
+    "enabled: RelationshipDetails": {
+        type: "enabled: RelationshipDetails";
+        params: unknown;
+    };
+    "enabled: Search": {
+        type: "enabled: Search";
+        params: unknown;
+    };
+    "enabled: ElementDetails": {
+        type: "enabled: ElementDetails";
+        params: unknown;
+    };
+    "enabled: OpenSource": {
+        type: "enabled: OpenSource";
+        params: unknown;
+    };
+    "enabled: DynamicViewWalkthrough": {
+        type: "enabled: DynamicViewWalkthrough";
+        params: unknown;
+    };
+    "enabled: Overlays": {
+        type: "enabled: Overlays";
+        params: unknown;
+    };
+    "not readonly": {
+        type: "not readonly";
+        params: unknown;
+    };
+    "is dynamic view": {
+        type: "is dynamic view";
+        params: unknown;
+    };
+    "is another view": {
+        type: "is another view";
+        params: unknown;
+    };
+    "click: node has modelFqn": {
+        type: "click: node has modelFqn";
+        params: unknown;
+    };
+    "click: selected node": {
+        type: "click: selected node";
+        params: unknown;
+    };
+    "click: same node": {
+        type: "click: same node";
+        params: unknown;
+    };
+    "click: focused node": {
+        type: "click: focused node";
+        params: unknown;
+    };
+    "click: node has connections": {
+        type: "click: node has connections";
+        params: unknown;
+    };
+    "click: selected edge": {
+        type: "click: selected edge";
+        params: unknown;
+    };
+}>, never, EmittedEvents>;
+export declare const raiseSetViewport: (params: {
+    delay?: number;
+    duration?: number;
+    viewport: Viewport;
+}) => ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
+export declare const cancelFitDiagram: () => CancelAction<Context, Events, undefined, Events>;
+export declare const raiseFitDiagram: (params?: {
+    delay?: number;
+    duration?: number;
+    bounds?: BBox;
+}) => ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
+export declare const assignViewportBefore: (viewport?: Viewport | null) => ActionFunction<Context, Events, Events, undefined, Values<{
+    syncManualLayoutActorLogic: {
+        src: "syncManualLayoutActorLogic";
+        logic: SyncLayoutActorLogic;
+        id: "syncLayout";
+    };
+    hotkeyActorLogic: {
+        src: "hotkeyActorLogic";
+        logic: HotkeyActorLogic;
+        id: "hotkey";
+    };
+    overlaysActorLogic: {
+        src: "overlaysActorLogic";
+        logic: OverlaysActorLogic;
+        id: "overlays";
+    };
+    searchActorLogic: {
+        src: "searchActorLogic";
+        logic: SearchActorLogic;
+        id: "search";
+    };
+    mediaPrintActorLogic: {
+        src: "mediaPrintActorLogic";
+        logic: MediaPrintActorLogic;
+        id: "mediaPrint";
+    };
+}>, never, never, never, never>;
+export declare const returnViewportBefore: (params?: {
+    delay?: number;
+    duration?: number;
+}) => ActionFunction<Context, Events, Events, undefined, Values<{
+    syncManualLayoutActorLogic: {
+        src: "syncManualLayoutActorLogic";
+        logic: SyncLayoutActorLogic;
+        id: "syncLayout";
+    };
+    hotkeyActorLogic: {
+        src: "hotkeyActorLogic";
+        logic: HotkeyActorLogic;
+        id: "hotkey";
+    };
+    overlaysActorLogic: {
+        src: "overlaysActorLogic";
+        logic: OverlaysActorLogic;
+        id: "overlays";
+    };
+    searchActorLogic: {
+        src: "searchActorLogic";
+        logic: SearchActorLogic;
+        id: "search";
+    };
+    mediaPrintActorLogic: {
+        src: "mediaPrintActorLogic";
+        logic: MediaPrintActorLogic;
+        id: "mediaPrint";
+    };
+}>, never, Values<{
+    isReady: {
+        type: "isReady";
+        params: unknown;
+    };
+    "enabled: FitView": {
+        type: "enabled: FitView";
+        params: unknown;
+    };
+    "enabled: FocusMode": {
+        type: "enabled: FocusMode";
+        params: unknown;
+    };
+    "enabled: Readonly": {
+        type: "enabled: Readonly";
+        params: unknown;
+    };
+    "enabled: RelationshipDetails": {
+        type: "enabled: RelationshipDetails";
+        params: unknown;
+    };
+    "enabled: Search": {
+        type: "enabled: Search";
+        params: unknown;
+    };
+    "enabled: ElementDetails": {
+        type: "enabled: ElementDetails";
+        params: unknown;
+    };
+    "enabled: OpenSource": {
+        type: "enabled: OpenSource";
+        params: unknown;
+    };
+    "enabled: DynamicViewWalkthrough": {
+        type: "enabled: DynamicViewWalkthrough";
+        params: unknown;
+    };
+    "enabled: Overlays": {
+        type: "enabled: Overlays";
+        params: unknown;
+    };
+    "not readonly": {
+        type: "not readonly";
+        params: unknown;
+    };
+    "is dynamic view": {
+        type: "is dynamic view";
+        params: unknown;
+    };
+    "is another view": {
+        type: "is another view";
+        params: unknown;
+    };
+    "click: node has modelFqn": {
+        type: "click: node has modelFqn";
+        params: unknown;
+    };
+    "click: selected node": {
+        type: "click: selected node";
+        params: unknown;
+    };
+    "click: same node": {
+        type: "click: same node";
+        params: unknown;
+    };
+    "click: focused node": {
+        type: "click: focused node";
+        params: unknown;
+    };
+    "click: node has connections": {
+        type: "click: node has connections";
+        params: unknown;
+    };
+    "click: selected edge": {
+        type: "click: selected edge";
+        params: unknown;
+    };
+}>, never, EmittedEvents>;

package/dist/likec4diagram/state/machine.actions.layout.js

@@ -0,0 +1,129 @@
+import { nonNullable } from '@likec4/core';
+import { getViewportForBounds } from '@xyflow/react';
+import { assertEvent } from 'xstate';
+import { machine } from './machine.setup.js';
+import { activeSequenceBounds, focusedBounds } from './utils.js';
+import { MinZoom } from '../../base/const.js';
+
+const setViewport = (params) => machine.createAction(({ context, event }) => {
+  let viewport, duration;
+  if (params) {
+    viewport = params.viewport;
+    duration = params.duration;
+  } else {
+    assertEvent(event, "xyflow.setViewport");
+    viewport = event.viewport;
+    duration = event.duration;
+  }
+  duration = duration ?? 400;
+  const { panZoom } = nonNullable(context.xystore).getState();
+  const animationProps = duration > 0 ? { duration, interpolate: "smooth" } : void 0;
+  panZoom?.setViewport(viewport, animationProps).catch((err) => {
+    console.error("Error during fitDiagram panZoom setViewport", { err });
+  });
+});
+const fitDiagram = (params) => machine.enqueueActions(({ context, event, enqueue }) => {
+  let bounds = context.view.bounds, duration;
+  if (params) {
+    bounds = params.bounds ?? context.view.bounds;
+    duration = params.duration;
+  } else if (event.type === "xyflow.fitDiagram") {
+    bounds = event.bounds ?? context.view.bounds;
+    duration = event.duration;
+    enqueue.assign({
+      viewportChangedManually: false
+    });
+  }
+  duration ??= 450;
+  const { width, height, panZoom, transform } = nonNullable(context.xystore).getState();
+  const maxZoom = Math.max(1, transform[2]);
+  const viewport = getViewportForBounds(
+    bounds,
+    width,
+    height,
+    MinZoom,
+    maxZoom,
+    context.fitViewPadding
+  );
+  viewport.x = Math.round(viewport.x);
+  viewport.y = Math.round(viewport.y);
+  panZoom?.setViewport(viewport, duration > 0 ? { duration, interpolate: "smooth" } : void 0).catch((err) => {
+    console.error("Error during fitDiagram panZoom setViewport", { err });
+  });
+});
+const fitFocusedBounds = () => machine.createAction(({ context }) => {
+  const isActiveSequenceWalkthrough = !!context.activeWalkthrough && context.dynamicViewVariant === "sequence";
+  const { bounds, duration = 450 } = isActiveSequenceWalkthrough ? activeSequenceBounds({ context }) : focusedBounds({ context });
+  const { width, height, panZoom, transform } = nonNullable(context.xystore).getState();
+  const maxZoom = Math.max(1, transform[2]);
+  const viewport = getViewportForBounds(
+    bounds,
+    width,
+    height,
+    MinZoom,
+    maxZoom,
+    context.fitViewPadding
+  );
+  viewport.x = Math.round(viewport.x);
+  viewport.y = Math.round(viewport.y);
+  panZoom?.setViewport(viewport, duration > 0 ? { duration, interpolate: "smooth" } : void 0);
+});
+const DEFAULT_DELAY = 30;
+const raiseSetViewport = (params) => {
+  const { delay = DEFAULT_DELAY, ...rest } = params ?? {};
+  return machine.raise(
+    {
+      type: "xyflow.setViewport",
+      ...rest
+    },
+    {
+      id: "fitDiagram",
+      delay
+    }
+  );
+};
+const cancelFitDiagram = () => machine.cancel("fitDiagram");
+const raiseFitDiagram = (params) => {
+  const { delay = DEFAULT_DELAY, ...rest } = params ?? {};
+  return machine.raise(
+    {
+      type: "xyflow.fitDiagram",
+      ...rest
+    },
+    {
+      id: "fitDiagram",
+      delay
+    }
+  );
+};
+const assignViewportBefore = (viewport) => machine.assign(({ context }) => {
+  return {
+    // We can assign
+    viewportBefore: {
+      wasChangedManually: context.viewportChangedManually,
+      value: { ...context.viewport }
+    }
+  };
+});
+const returnViewportBefore = (params) => machine.enqueueActions(({ enqueue, context: { viewportBefore } }) => {
+  enqueue(cancelFitDiagram());
+  if (viewportBefore) {
+    enqueue.assign({
+      viewportChangedManually: viewportBefore.wasChangedManually,
+      viewportBefore: null
+    });
+    if (params && params.delay === 0) {
+      enqueue(setViewport({ viewport: viewportBefore.value, ...params }));
+    } else {
+      enqueue(raiseSetViewport({ viewport: viewportBefore.value, ...params }));
+    }
+  } else {
+    if (params && params.delay === 0) {
+      enqueue(fitDiagram({ ...params }));
+    } else {
+      enqueue(raiseFitDiagram({ ...params }));
+    }
+  }
+});
+
+export { assignViewportBefore, cancelFitDiagram, fitDiagram, fitFocusedBounds, raiseFitDiagram, raiseSetViewport, returnViewportBefore, setViewport };