@likec4/diagram 1.44.0 → 1.46.0

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

@@ -0,0 +1,141 @@
+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({
+    x: Math.round(viewport.x),
+    y: Math.round(viewport.y),
+    zoom: viewport.zoom
+  }, 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);
+  const animationProps = duration > 0 ? { duration, interpolate: "smooth" } : void 0;
+  panZoom?.setViewport(viewport, animationProps).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);
+  const animationProps = duration > 0 ? { duration, interpolate: "smooth" } : void 0;
+  panZoom?.setViewport(viewport, animationProps).catch((err) => {
+    console.error("Error during fitFocusedBounds panZoom setViewport", { err });
+  });
+});
+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 raiseUpdateView = (view) => machine.raise(({ context }) => ({
+  type: "update.view",
+  view: context.view
+}), { delay: DEFAULT_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, raiseUpdateView, returnViewportBefore, setViewport };