@likec4/diagram 1.55.0 → 1.56.0

package/dist/projects-overview/actor.js

@@ -1,359 +1,266 @@
-import { invariant, nonNullable, nonexhaustive } from '@likec4/core';
-import { getViewportForBounds, applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
-import { animate, stagger, motionValue, mapValue, styleEffect } from 'motion';
-import { clamp } from 'remeda';
-import { setup, assertEvent } from 'xstate';
-import { Base } from '../base/Base.js';
-import { layoutedProjectsViewToXYFlow } from './layouted-to-xyflow.js';
-import { ProjectsOverviewViewportPersistence } from './persistence.js';
-import { x as xstateActions_cjsExports } from '../_virtual/xstate-actions.cjs.js';
-import { MinZoom } from '../base/const.js';
-
-const machine = setup({
-  types: {
-    context: {},
-    tags: "",
-    input: {},
-    events: {},
-    emitted: {}
-  },
-  guards: {
-    isReady: ({ context }) => context.initialized.xydata && context.initialized.xyflow && !!context.xystore && !!context.xyflow,
-    "click: selected node": ({ event }) => {
-      return event.type === "xyflow.click.node" && event.node.selected === true;
-    }
-  }
+import "../_virtual/_rolldown/runtime.js";
+import { Base } from "../base/Base.js";
+import { MinZoom } from "../base/const.js";
+import { layoutedProjectsViewToXYFlow } from "./layouted-to-xyflow.js";
+import { ProjectsOverviewViewportPersistence } from "./persistence.js";
+import { applyEdgeChanges, applyNodeChanges, getViewportForBounds } from "@xyflow/react";
+import { clamp } from "remeda";
+import { invariant, nonNullable, nonexhaustive } from "@likec4/core";
+import { assertEvent, setup } from "xstate";
+import { animate, mapValue, motionValue, stagger, styleEffect } from "motion";
+import { assign as assign$1, emit as emit$1 } from "xstate/actions";
+//#region src/projects-overview/actor.ts
+var machine = setup({
+	types: {
+		context: {},
+		tags: "",
+		input: {},
+		events: {},
+		emitted: {}
+	},
+	guards: {
+		isReady: ({ context }) => context.initialized.xydata && context.initialized.xyflow && !!context.xystore && !!context.xyflow,
+		"click: selected node": ({ event }) => {
+			return event.type === "xyflow.click.node" && event.node.selected === true;
+		}
+	}
 });
-const updateView = () => machine.assign(({ event }) => {
-  assertEvent(event, "update.view");
-  const { xynodes, xyedges } = layoutedProjectsViewToXYFlow(event.view);
-  return {
-    view: event.view,
-    xynodes,
-    xyedges
-  };
+var updateView = () => machine.assign(({ event }) => {
+	assertEvent(event, "update.view");
+	const { xynodes, xyedges } = layoutedProjectsViewToXYFlow(event.view);
+	return {
+		view: event.view,
+		xynodes,
+		xyedges
+	};
 });
-const xyflowApplyNodeChanges = () => machine.assign(({ context, event }) => {
-  assertEvent(event, "xyflow.applyNodeChanges");
-  return {
-    xynodes: applyNodeChanges(event.changes, context.xynodes)
-  };
+var xyflowApplyNodeChanges = () => machine.assign(({ context, event }) => {
+	assertEvent(event, "xyflow.applyNodeChanges");
+	return { xynodes: applyNodeChanges(event.changes, context.xynodes) };
 });
-const xyflowApplyEdgeChanges = () => machine.assign(({ context, event }) => {
-  assertEvent(event, "xyflow.applyEdgeChanges");
-  return {
-    xyedges: applyEdgeChanges(event.changes, context.xyedges)
-  };
+var xyflowApplyEdgeChanges = () => machine.assign(({ context, event }) => {
+	assertEvent(event, "xyflow.applyEdgeChanges");
+	return { xyedges: applyEdgeChanges(event.changes, context.xyedges) };
 });
-const onMouseEnterOrLeave = () => machine.assign(({ context, event }) => {
-  assertEvent(event, [
-    "xyflow.mouse.enter.edge",
-    "xyflow.mouse.leave.edge",
-    "xyflow.mouse.enter.node",
-    "xyflow.mouse.leave.node"
-  ]);
-  const isEnter = event.type.startsWith("xyflow.mouse.enter");
-  switch (event.type) {
-    case "xyflow.mouse.enter.edge":
-    case "xyflow.mouse.leave.edge": {
-      const edgeId = event.edge.id;
-      return {
-        xyedges: context.xyedges.map((e) => {
-          if (e.id === edgeId) {
-            return Base.setHovered(e, isEnter);
-          }
-          return e;
-        })
-      };
-    }
-    case "xyflow.mouse.enter.node":
-    case "xyflow.mouse.leave.node": {
-      const nodeId = event.node.id;
-      return {
-        xynodes: context.xynodes.map((n) => {
-          if (n.id === nodeId) {
-            return Base.setHovered(n, isEnter);
-          }
-          return n;
-        })
-      };
-    }
-    default:
-      nonexhaustive(event);
-  }
+var onMouseEnterOrLeave = () => machine.assign(({ context, event }) => {
+	assertEvent(event, [
+		"xyflow.mouse.enter.edge",
+		"xyflow.mouse.leave.edge",
+		"xyflow.mouse.enter.node",
+		"xyflow.mouse.leave.node"
+	]);
+	const isEnter = event.type.startsWith("xyflow.mouse.enter");
+	switch (event.type) {
+		case "xyflow.mouse.enter.edge":
+		case "xyflow.mouse.leave.edge": {
+			const edgeId = event.edge.id;
+			return { xyedges: context.xyedges.map((e) => {
+				if (e.id === edgeId) return Base.setHovered(e, isEnter);
+				return e;
+			}) };
+		}
+		case "xyflow.mouse.enter.node":
+		case "xyflow.mouse.leave.node": {
+			const nodeId = event.node.id;
+			return { xynodes: context.xynodes.map((n) => {
+				if (n.id === nodeId) return Base.setHovered(n, isEnter);
+				return n;
+			}) };
+		}
+		default: nonexhaustive(event);
+	}
 });
-const saveViewport = () => machine.createAction(({ context }) => {
-  const xyflow = context.xyflow;
-  if (xyflow) {
-    ProjectsOverviewViewportPersistence.write(xyflow.getViewport());
-  }
+var saveViewport = () => machine.createAction(({ context }) => {
+	const xyflow = context.xyflow;
+	if (xyflow) ProjectsOverviewViewportPersistence.write(xyflow.getViewport());
 });
-const handleClick = () => machine.enqueueActions(({ event, enqueue }) => {
-  if (event.type === "xyflow.click.double") {
-    enqueue(fitDiagram());
-    return;
-  }
+var handleClick = () => machine.enqueueActions(({ event, enqueue }) => {
+	if (event.type === "xyflow.click.double") {
+		enqueue(fitDiagram());
+		return;
+	}
 });
-const fitDiagram = (params) => machine.enqueueActions(({ context, event }) => {
-  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;
-  }
-  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 });
-  });
-  ProjectsOverviewViewportPersistence.write(null);
+var fitDiagram = (params) => machine.enqueueActions(({ context, event }) => {
+	let bounds = context.view.bounds;
+	let 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;
+	}
+	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 });
+	});
+	ProjectsOverviewViewportPersistence.write(null);
 });
-const restoreViewport = () => machine.enqueueActions(({ context, enqueue }) => {
-  const viewport = ProjectsOverviewViewportPersistence.read();
-  if (viewport) {
-    const xyflow = nonNullable(context.xyflow);
-    xyflow.setViewport(viewport, {
-      duration: 0
-    });
-    return;
-  }
-  enqueue(fitDiagram({ duration: 0 }));
+var restoreViewport = () => machine.enqueueActions(({ context, enqueue }) => {
+	const viewport = ProjectsOverviewViewportPersistence.read();
+	if (viewport) {
+		nonNullable(context.xyflow).setViewport(viewport, { duration: 0 });
+		return;
+	}
+	enqueue(fitDiagram({ duration: 0 }));
 });
-const dispose = () => machine.assign({
-  xyflow: null,
-  xystore: null,
-  initialized: {
-    xyflow: false,
-    xydata: false
-  },
-  xyedges: [],
-  xynodes: []
+var dispose = () => machine.assign({
+	xyflow: null,
+	xystore: null,
+	initialized: {
+		xyflow: false,
+		xydata: false
+	},
+	xyedges: [],
+	xynodes: []
 });
-const assignNavigateTo = () => machine.assign(({ event, context }) => {
-  let navigateTo;
-  switch (event.type) {
-    case "xyflow.click.node": {
-      navigateTo = event.node;
-      break;
-    }
-    case "navigate.to": {
-      navigateTo = nonNullable(context.xynodes.find((n) => n.id === event.fromNode), `Node ${event.fromNode} not found`);
-      break;
-    }
-    default: {
-      console.warn(`Unexpected event ${event.type} in assignNavigateTo`);
-      return {};
-    }
-  }
-  return {
-    navigateTo
-  };
+var assignNavigateTo = () => machine.assign(({ event, context }) => {
+	let navigateTo;
+	switch (event.type) {
+		case "xyflow.click.node":
+			navigateTo = event.node;
+			break;
+		case "navigate.to":
+			navigateTo = nonNullable(context.xynodes.find((n) => n.id === event.fromNode), `Node ${event.fromNode} not found`);
+			break;
+		default:
+			console.warn(`Unexpected event ${event.type} in assignNavigateTo`);
+			return {};
+	}
+	return { navigateTo };
 });
-const _projectOverviewLogic = machine.createMachine({
-  id: "projects-overview",
-  context: ({ input }) => ({
-    ...input,
-    initialized: {
-      xydata: false,
-      xyflow: false
-    },
-    xyflow: null,
-    xystore: null,
-    xynodes: [],
-    xyedges: []
-  }),
-  initial: "init",
-  on: {
-    "close": {
-      target: ".closed"
-    }
-  },
-  states: {
-    init: {
-      on: {
-        "update.view": {
-          actions: [
-            updateView(),
-            xstateActions_cjsExports.assign(({ context }) => ({
-              initialized: {
-                ...context.initialized,
-                xydata: true
-              }
-            }))
-          ],
-          target: "isReady"
-        },
-        "xyflow.init": {
-          actions: [
-            xstateActions_cjsExports.assign(({ context, event }) => ({
-              initialized: {
-                ...context.initialized,
-                xyflow: true
-              },
-              xyflow: event.xyflow,
-              xystore: event.xystore
-            }))
-          ],
-          target: "isReady"
-        }
-      }
-    },
-    isReady: {
-      always: [{
-        guard: "isReady",
-        target: "active"
-      }, {
-        target: "init"
-      }]
-    },
-    active: {
-      tags: "active",
-      entry: [
-        restoreViewport()
-      ],
-      on: {
-        "navigate.to": {
-          actions: assignNavigateTo(),
-          target: "navigate"
-        },
-        "xyflow.applyNodeChanges": {
-          actions: xyflowApplyNodeChanges()
-        },
-        "xyflow.applyEdgeChanges": {
-          actions: xyflowApplyEdgeChanges()
-        },
-        "xyflow.mouse.*": {
-          actions: onMouseEnterOrLeave()
-        },
-        "xyflow.click.*": [
-          {
-            guard: "click: selected node",
-            actions: assignNavigateTo(),
-            target: "navigate"
-          },
-          {
-            actions: handleClick()
-          }
-        ],
-        "xyflow.fitDiagram": {
-          actions: fitDiagram()
-        },
-        "update.view": {
-          actions: updateView()
-        }
-      }
-    },
-    navigate: {
-      tags: "active",
-      entry: [
-        saveViewport(),
-        xstateActions_cjsExports.assign({
-          xyedges: []
-        }),
-        ({ context: { navigateTo, xyflow, xystore }, self }) => {
-          invariant(xyflow && navigateTo, "Invalid state, xyflow is undefined");
-          const { width, domNode } = nonNullable(xystore).getState();
-          const nextZoom = clamp(
-            Math.min(
-              width * 7 / 9 / navigateTo.data.width
-              // (height - 200) / (navigateTo.data.height),
-            ),
-            { min: MinZoom, max: 2.5 }
-          );
-          const next = {
-            x: Math.round(
-              -nextZoom * navigateTo.position.x + (width - nextZoom * navigateTo.data.width) / 2
-            ),
-            y: Math.round(-nextZoom * navigateTo.position.y) + 50
-          };
-          const current = xyflow.getViewport();
-          const otherNodes = domNode.querySelectorAll(
-            `.react-flow__node-project:not([data-id="${navigateTo.id}"]) > *`
-          );
-          const otherNodesAnimation = animate(otherNodes, {
-            opacity: 0,
-            scale: 0.9
-          }, {
-            visualDuration: 0.25,
-            delay: stagger(0.08, { from: "center" })
-          });
-          const v = motionValue(1);
-          const transform = mapValue(
-            v,
-            [1, 0],
-            [
-              `translate(${current.x}px, ${current.y}px) scale(${current.zoom})`,
-              `translate(${next.x}px, ${next.y}px) scale(${nextZoom})`
-            ]
-          );
-          const cancelViewportAnimation = styleEffect(
-            domNode.querySelector(".xyflow__viewport"),
-            { transform }
-          );
-          const cancelOpacityAnimation = styleEffect(
-            domNode.querySelector(`.react-flow__node-project:is([data-id="${navigateTo.id}"]) > *`),
-            { opacity: v }
-          );
-          const targetAnimation = animate(
-            v,
-            0,
-            {
-              delay: otherNodes.length > 3 ? 0.25 : 0,
-              type: "spring",
-              stiffness: 350,
-              damping: 40,
-              mass: 1.5,
-              visualDuration: 0.55
-            }
-          );
-          Promise.race([
-            targetAnimation.finished,
-            sleep(750)
-          ]).then(() => {
-            cancelViewportAnimation();
-            cancelOpacityAnimation();
-            targetAnimation.stop();
-            otherNodesAnimation.stop();
-            self.send({
-              type: "emit.navigate.to",
-              projectId: navigateTo.data.projectId
-            });
-          });
-        }
-      ],
-      on: {
-        "emit.navigate.to": {
-          actions: xstateActions_cjsExports.emit(({ event }) => ({
-            ...event,
-            type: "navigate.to"
-          }))
-        }
-      }
-    },
-    closed: {
-      id: "closed",
-      type: "final",
-      entry: dispose()
-    }
-  }
+var projectOverviewLogic = machine.createMachine({
+	id: "projects-overview",
+	context: ({ input }) => ({
+		...input,
+		initialized: {
+			xydata: false,
+			xyflow: false
+		},
+		xyflow: null,
+		xystore: null,
+		xynodes: [],
+		xyedges: []
+	}),
+	initial: "init",
+	on: { "close": { target: ".closed" } },
+	states: {
+		init: { on: {
+			"update.view": {
+				actions: [updateView(), assign$1(({ context }) => ({ initialized: {
+					...context.initialized,
+					xydata: true
+				} }))],
+				target: "isReady"
+			},
+			"xyflow.init": {
+				actions: [assign$1(({ context, event }) => ({
+					initialized: {
+						...context.initialized,
+						xyflow: true
+					},
+					xyflow: event.xyflow,
+					xystore: event.xystore
+				}))],
+				target: "isReady"
+			}
+		} },
+		isReady: { always: [{
+			guard: "isReady",
+			target: "active"
+		}, { target: "init" }] },
+		active: {
+			tags: "active",
+			entry: [restoreViewport()],
+			on: {
+				"navigate.to": {
+					actions: assignNavigateTo(),
+					target: "navigate"
+				},
+				"xyflow.applyNodeChanges": { actions: xyflowApplyNodeChanges() },
+				"xyflow.applyEdgeChanges": { actions: xyflowApplyEdgeChanges() },
+				"xyflow.mouse.*": { actions: onMouseEnterOrLeave() },
+				"xyflow.click.*": [{
+					guard: "click: selected node",
+					actions: assignNavigateTo(),
+					target: "navigate"
+				}, { actions: handleClick() }],
+				"xyflow.fitDiagram": { actions: fitDiagram() },
+				"update.view": { actions: updateView() }
+			}
+		},
+		navigate: {
+			tags: "active",
+			entry: [
+				saveViewport(),
+				assign$1({ xyedges: [] }),
+				({ context: { navigateTo, xyflow, xystore }, self }) => {
+					invariant(xyflow && navigateTo, "Invalid state, xyflow is undefined");
+					const { width, domNode } = nonNullable(xystore).getState();
+					const nextZoom = clamp(Math.min(width * 7 / 9 / navigateTo.data.width), {
+						min: MinZoom,
+						max: 2.5
+					});
+					const next = {
+						x: Math.round(-nextZoom * navigateTo.position.x + (width - nextZoom * navigateTo.data.width) / 2),
+						y: Math.round(-nextZoom * navigateTo.position.y) + 50
+					};
+					const current = xyflow.getViewport();
+					const otherNodes = domNode.querySelectorAll(`.react-flow__node-project:not([data-id="${navigateTo.id}"]) > *`);
+					const otherNodesAnimation = animate(otherNodes, {
+						opacity: 0,
+						scale: .9
+					}, {
+						visualDuration: .25,
+						delay: stagger(.08, { from: "center" })
+					});
+					const v = motionValue(1);
+					const transform = mapValue(v, [1, 0], [`translate(${current.x}px, ${current.y}px) scale(${current.zoom})`, `translate(${next.x}px, ${next.y}px) scale(${nextZoom})`]);
+					const cancelViewportAnimation = styleEffect(domNode.querySelector(".xyflow__viewport"), { transform });
+					const cancelOpacityAnimation = styleEffect(domNode.querySelector(`.react-flow__node-project:is([data-id="${navigateTo.id}"]) > *`), { opacity: v });
+					const targetAnimation = animate(v, 0, {
+						delay: otherNodes.length > 3 ? .25 : 0,
+						type: "spring",
+						stiffness: 350,
+						damping: 40,
+						mass: 1.5,
+						visualDuration: .55
+					});
+					Promise.race([targetAnimation.finished, sleep(750)]).then(() => {
+						cancelViewportAnimation();
+						cancelOpacityAnimation();
+						targetAnimation.stop();
+						otherNodesAnimation.stop();
+						self.send({
+							type: "emit.navigate.to",
+							projectId: navigateTo.data.projectId
+						});
+					});
+				}
+			],
+			on: { "emit.navigate.to": { actions: emit$1(({ event }) => ({
+				...event,
+				type: "navigate.to"
+			})) } }
+		},
+		closed: {
+			id: "closed",
+			type: "final",
+			entry: dispose()
+		}
+	}
 });
-const projectOverviewLogic = _projectOverviewLogic;
 function sleep(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
+	return new Promise((resolve) => setTimeout(resolve, ms));
 }
-
-export { fitDiagram, onMouseEnterOrLeave, projectOverviewLogic, restoreViewport };
+//#endregion
+export { projectOverviewLogic };

package/dist/projects-overview/context.js

@@ -1,10 +1,11 @@
-import { nonNullable } from '@likec4/core';
-import { createContext, useContext } from 'react';
-
-const ProjectsOverviewActorContext = createContext(null);
-const ProjectsOverviewActorContextProvider = ProjectsOverviewActorContext.Provider;
+import "../_virtual/_rolldown/runtime.js";
+import { createContext, useContext } from "react";
+import { nonNullable } from "@likec4/core";
+//#region src/projects-overview/context.ts
+var ProjectsOverviewActorContext = createContext(null);
+var ProjectsOverviewActorContextProvider = ProjectsOverviewActorContext.Provider;
 function useProjectsOverviewActor() {
-  return nonNullable(useContext(ProjectsOverviewActorContext), "No ProjectsOverviewActorContext");
+	return nonNullable(useContext(ProjectsOverviewActorContext), "No ProjectsOverviewActorContext");
 }
-
+//#endregion
 export { ProjectsOverviewActorContextProvider, useProjectsOverviewActor };