@likec4/diagram 1.46.3 → 1.47.0

package/dist/projects-overview/actor.d.ts

@@ -0,0 +1,121 @@
+import { NodeId, ProjectId, BBox } from '@likec4/core';
+import { LayoutedProjectsView } from '@likec4/core/compute-view';
+import { EdgeChange, NodeChange } from '@xyflow/system';
+import { MouseEvent } from 'react';
+import { Simplify } from 'type-fest';
+import { ActorRef, SnapshotFrom, StateMachine, ActionFunction, Values } from 'xstate';
+import { ViewPadding } from '../custom';
+import { ProjectsOverviewTypes, ProjectsOverviewXYFLowInstance, ProjectsOverviewXYStoreApi } from './_types';
+export type Input = {
+    view: LayoutedProjectsView;
+    fitViewPadding: ViewPadding;
+};
+export interface Context {
+    initialized: {
+        xydata: boolean;
+        xyflow: boolean;
+    };
+    xystore: ProjectsOverviewXYStoreApi | null;
+    xyflow: ProjectsOverviewXYFLowInstance | null;
+    view: LayoutedProjectsView;
+    fitViewPadding: ViewPadding;
+    xynodes: ProjectsOverviewTypes.Node[];
+    xyedges: ProjectsOverviewTypes.Edge[];
+    navigateTo?: ProjectsOverviewTypes.Node;
+}
+export type EmittedEvents = {
+    type: 'navigate.to';
+    projectId: ProjectId;
+};
+/**
+ * Converts a union of events to a union of events with a prefix.
+ */
+type EmitEach<T extends {
+    type: string;
+}> = {
+    [Key in T['type']]: Simplify<{
+        type: `emit.${Key}`;
+    } & Omit<Extract<T, {
+        type: Key;
+    }>, 'type'>>;
+}[T['type']];
+export type Events = {
+    type: 'navigate.to';
+    projectId: ProjectId;
+    fromNode: NodeId;
+} | {
+    type: 'xyflow.init';
+    xyflow: ProjectsOverviewXYFLowInstance;
+    xystore: ProjectsOverviewXYStoreApi;
+} | {
+    type: 'xyflow.click.node';
+    node: ProjectsOverviewTypes.Node;
+} | {
+    type: 'xyflow.click.edge';
+    edge: ProjectsOverviewTypes.Edge;
+} | {
+    type: 'xyflow.click.pane';
+} | {
+    type: 'xyflow.click.double';
+} | {
+    type: 'xyflow.mouse.enter.node';
+    node: ProjectsOverviewTypes.Node;
+} | {
+    type: 'xyflow.mouse.leave.node';
+    node: ProjectsOverviewTypes.Node;
+} | {
+    type: 'xyflow.mouse.enter.edge';
+    edge: ProjectsOverviewTypes.Edge;
+    event: MouseEvent;
+} | {
+    type: 'xyflow.mouse.leave.edge';
+    edge: ProjectsOverviewTypes.Edge;
+    event: MouseEvent;
+} | {
+    type: 'xyflow.applyNodeChanges';
+    changes: NodeChange<ProjectsOverviewTypes.Node>[];
+} | {
+    type: 'xyflow.applyEdgeChanges';
+    changes: EdgeChange<ProjectsOverviewTypes.Edge>[];
+} | {
+    type: 'xyflow.fitDiagram';
+    bounds?: BBox;
+    duration?: number;
+} | {
+    type: 'update.view';
+    view: LayoutedProjectsView;
+} | EmitEach<EmittedEvents> | {
+    type: 'close';
+};
+type Tags = 'active';
+export declare const onMouseEnterOrLeave: () => ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
+export declare const fitDiagram: (params?: {
+    duration?: number;
+    bounds?: BBox;
+}) => ActionFunction<Context, Events, Events, undefined, never, never, Values<{
+    isReady: {
+        type: "isReady";
+        params: unknown;
+    };
+    "click: selected node": {
+        type: "click: selected node";
+        params: unknown;
+    };
+}>, never, EmittedEvents>;
+export declare const restoreViewport: () => ActionFunction<Context, Events, Events, undefined, never, never, Values<{
+    isReady: {
+        type: "isReady";
+        params: unknown;
+    };
+    "click: selected node": {
+        type: "click: selected node";
+        params: unknown;
+    };
+}>, never, EmittedEvents>;
+export interface ProjectsOverviewLogic extends StateMachine<Context, Events, {}, any, any, any, any, any, Tags, Input, any, EmittedEvents, any, any> {
+}
+export declare const projectOverviewLogic: ProjectsOverviewLogic;
+export type ProjectsOverviewSnapshot = SnapshotFrom<ProjectsOverviewLogic>;
+export interface ProjectsOverviewActorRef extends ActorRef<ProjectsOverviewSnapshot, Events, EmittedEvents> {
+}
+export type { Input as ProjectsOverviewInput, };

package/dist/projects-overview/actor.js

@@ -0,0 +1,382 @@
+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 }) => {
+      assertEvent(event, ["xyflow.click.node"]);
+      return 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
+  };
+});
+const 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)
+  };
+});
+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);
+  }
+});
+const 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(cancelFitDiagram());
+    enqueue(raiseFitDiagram());
+    return;
+  }
+  if (event.type === "xyflow.click.pane") {
+    enqueue(cancelFitDiagram());
+    return;
+  }
+  console.warn("Unknown event", event);
+});
+const cancelFitDiagram = () => machine.cancel("fitDiagram");
+const raiseFitDiagram = (params) => {
+  const { delay = 30, ...rest } = {};
+  return machine.raise(
+    {
+      type: "xyflow.fitDiagram",
+      ...rest
+    },
+    {
+      id: "fitDiagram",
+      delay
+    }
+  );
+};
+const fitDiagram = (params) => machine.enqueueActions(({ context, event, enqueue }) => {
+  enqueue(cancelFitDiagram());
+  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);
+});
+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 }));
+});
+const 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
+  };
+});
+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.node": [
+          {
+            guard: "click: selected node",
+            actions: assignNavigateTo(),
+            target: "navigate"
+          }
+        ],
+        "xyflow.click.*": {
+          actions: handleClick()
+        },
+        "xyflow.fitDiagram": {
+          actions: fitDiagram()
+        },
+        "update.view": {
+          actions: updateView()
+        }
+      }
+    },
+    navigate: {
+      tags: "active",
+      entry: [
+        cancelFitDiagram(),
+        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 * 2 / 3 / 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()
+    }
+  }
+});
+const projectOverviewLogic = _projectOverviewLogic;
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export { fitDiagram, onMouseEnterOrLeave, projectOverviewLogic, restoreViewport };

package/dist/projects-overview/context.d.ts

@@ -0,0 +1,4 @@
+import { ProjectsOverviewActorRef } from './actor';
+import { Context } from 'react';
+export declare const ProjectsOverviewActorContext: Context<ProjectsOverviewActorRef | null>;
+export declare function useProjectsOverviewActor(): ProjectsOverviewActorRef;

package/dist/projects-overview/context.js

@@ -0,0 +1,9 @@
+import { nonNullable } from '@likec4/core';
+import { createContext, useContext } from 'react';
+
+const ProjectsOverviewActorContext = createContext(null);
+function useProjectsOverviewActor() {
+  return nonNullable(useContext(ProjectsOverviewActorContext), "No ProjectsOverviewActorContext");
+}
+
+export { ProjectsOverviewActorContext, useProjectsOverviewActor };

package/dist/projects-overview/custom/edgeTypes.d.ts

@@ -0,0 +1,3 @@
+import { ProjectsOverviewTypes } from '../_types';
+import { FunctionComponent } from 'react';
+export declare const RelationshipEdge: FunctionComponent<ProjectsOverviewTypes.EdgeProps>;

package/dist/projects-overview/custom/edgeTypes.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { bezierPath } from '../../utils/xyflow.js';
+import { memoEdge } from '../../base-primitives/memoEdge.js';
+import { EdgeContainer } from '../../base-primitives/edge/EdgeContainer.js';
+import { EdgePath } from '../../base-primitives/edge/EdgePath.js';
+import { EdgeLabelContainer } from '../../base-primitives/edge/EdgeLabelContainer.js';
+import { EdgeLabel } from '../../base-primitives/edge/EdgeLabel.js';
+
+const RelationshipEdge = memoEdge((edgeProps) => {
+  const path = bezierPath(edgeProps.data.points);
+  return /* @__PURE__ */ jsxs(EdgeContainer, { ...edgeProps, children: [
+    /* @__PURE__ */ jsx(
+      EdgePath,
+      {
+        edgeProps,
+        svgPath: path
+      }
+    ),
+    /* @__PURE__ */ jsx(EdgeLabelContainer, { edgeProps, children: /* @__PURE__ */ jsx(EdgeLabel, { edgeProps }) })
+  ] });
+});
+
+export { RelationshipEdge };

package/dist/projects-overview/custom/index.d.ts

@@ -0,0 +1,2 @@
+export { RelationshipEdge } from './edgeTypes';
+export { ProjectNode } from './nodeTypes';

package/dist/projects-overview/custom/nodeTypes.d.ts

@@ -0,0 +1,2 @@
+import { ProjectsOverviewTypes } from '../_types';
+export declare function ProjectNode(props: ProjectsOverviewTypes.NodeProps<'project'>): import("react/jsx-runtime").JSX.Element;

package/dist/projects-overview/custom/nodeTypes.js

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCallbackRef } from '@mantine/hooks';
+import { useProjectsOverviewActor } from '../context.js';
+import { ElementNodeContainer } from '../../base-primitives/element/ElementNodeContainer.js';
+import { ElementShape } from '../../base-primitives/element/ElementShape.js';
+import { ElementData } from '../../base-primitives/element/ElementData.js';
+import { ElementActionButtons } from '../../base-primitives/element/ElementActionButtons.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.3/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import { DefaultHandles } from '../../base-primitives/NodeHandles.js';
+
+function ProjectNode(props) {
+  const actor = useProjectsOverviewActor();
+  const navigateTo = useCallbackRef((e) => {
+    e.stopPropagation();
+    actor.send({ type: "navigate.to", fromNode: props.data.id, projectId: props.data.projectId });
+  });
+  return /* @__PURE__ */ jsxs(
+    ElementNodeContainer,
+    {
+      layout: true,
+      nodeProps: props,
+      children: [
+        /* @__PURE__ */ jsx(ElementShape, { ...props }),
+        /* @__PURE__ */ jsx(ElementData, { ...props }),
+        /* @__PURE__ */ jsx(
+          ElementActionButtons,
+          {
+            ...props,
+            buttons: [
+              {
+                key: "navigate",
+                icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
+                onClick: navigateTo
+              }
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(DefaultHandles, {})
+      ]
+    },
+    props.id
+  );
+}
+
+export { ProjectNode };

package/dist/projects-overview/custom/styles.css.d.ts

@@ -0,0 +1 @@
+export declare const emptyNode: string;

package/dist/projects-overview/hooks.d.ts

@@ -0,0 +1,5 @@
+import { ProjectsOverviewXYFLowInstance, ProjectsOverviewXYStoreApi } from './_types';
+import { ProjectsOverviewSnapshot } from './actor';
+export declare function useProjectsOverviewState<T>(selector: (state: ProjectsOverviewSnapshot) => T, compare?: (a: T, b: T) => boolean): T;
+export declare function useProjectsOverviewXYFlow(): ProjectsOverviewXYFLowInstance;
+export declare function useProjectsOverviewXYStoreApi(): ProjectsOverviewXYStoreApi;

package/dist/projects-overview/hooks.js

@@ -0,0 +1,14 @@
+import { useSelector } from '@xstate/react';
+import { useStoreApi } from '@xyflow/react';
+import { shallowEqual } from 'fast-equals';
+import { useProjectsOverviewActor } from './context.js';
+
+function useProjectsOverviewState(selector, compare = shallowEqual) {
+  const actor = useProjectsOverviewActor();
+  return useSelector(actor, selector, compare);
+}
+function useProjectsOverviewXYStoreApi() {
+  return useStoreApi();
+}
+
+export { useProjectsOverviewState, useProjectsOverviewXYStoreApi };

package/dist/projects-overview/index.d.ts

@@ -0,0 +1 @@
+export { ProjectsOverview, type ProjectsOverviewProps, } from './ProjectsOverview';

package/dist/projects-overview/layouted-to-xyflow.d.ts

@@ -0,0 +1,6 @@
+import { LayoutedProjectsView } from '@likec4/core/compute-view';
+import { ProjectsOverviewTypes } from './_types';
+export declare function layoutedProjectsViewToXYFlow(view: LayoutedProjectsView): {
+    xynodes: ProjectsOverviewTypes.Node[];
+    xyedges: ProjectsOverviewTypes.Edge[];
+};

package/dist/projects-overview/layouted-to-xyflow.js

@@ -0,0 +1,49 @@
+import { map } from 'remeda';
+import { ZIndexes } from '../base/const.js';
+
+function layoutedProjectsViewToXYFlow(view) {
+  return {
+    xynodes: map(view.nodes, projectNodeToXY),
+    xyedges: map(view.edges, projectEdgeToXY)
+  };
+}
+function projectNodeToXY({ id, x, y, width, height, ...node }) {
+  return {
+    id,
+    position: { x, y },
+    type: "project",
+    initialWidth: width,
+    initialHeight: height,
+    draggable: false,
+    deletable: false,
+    zIndex: ZIndexes.Element,
+    style: {
+      width,
+      height
+    },
+    data: {
+      id,
+      width,
+      height,
+      ...node
+    }
+  };
+}
+function projectEdgeToXY({ id, source, target, ...edge }) {
+  return {
+    id,
+    source,
+    target,
+    type: "relationship",
+    zIndex: ZIndexes.Edge,
+    deletable: false,
+    data: {
+      id,
+      technology: null,
+      labelBBox: null,
+      ...edge
+    }
+  };
+}
+
+export { layoutedProjectsViewToXYFlow };

package/dist/projects-overview/panel/ProjectsOverviewPanel.d.ts

@@ -0,0 +1 @@
+export declare const ProjectsOverviewPanel: () => import("react/jsx-runtime").JSX.Element;