@likec4/diagram 1.19.2 → 1.20.0

package/dist/{xyflow/nodes/element/ElementShapeSvg.js → base/primitives/element/ElementShape.js}

@@ -1,7 +1,7 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { nonexhaustive } from "@likec4/core";
-import { toDomPrecision } from "../../utils.js";
-import { fillMixStroke, fillElementFill } from "./element.css.js";
+import { toDomPrecision } from "../../../utils/xyflow.js";
+import { shapeSvgMultiple, shapeSvg, indicator, fillMixStroke, fillElementFill } from "./ElementShape.css.js";
 function cylinderSVGPath(diameter, height, tilt = 0.065) {
   const radius = Math.round(diameter / 2);
   const rx = radius;
@@ -146,16 +146,30 @@ function ElementShapeSvg({ shape, w, h }) {
     }
   }
 }
+function ElementShape({ data, width, height, isMultiple = false, withSelectedIndicator = true }) {
+  let w = !!width && width > 10 ? width : data.width;
+  let h = !!height && height > 10 ? height : data.height;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isMultiple && /* @__PURE__ */ jsx("svg", { className: shapeSvgMultiple, viewBox: `0 0 ${w} ${h}`, children: /* @__PURE__ */ jsx(ElementShapeSvg, { shape: data.shape, w, h }) }),
+    /* @__PURE__ */ jsxs("svg", { className: shapeSvg, viewBox: `0 0 ${w} ${h}`, children: [
+      withSelectedIndicator && /* @__PURE__ */ jsx(SelectedIndicator, { shape: data.shape, w, h }),
+      /* @__PURE__ */ jsx(ElementShapeSvg, { shape: data.shape, w, h })
+    ] })
+  ] });
+}
 function SelectedIndicator({ shape, w, h }) {
+  let svg;
   switch (shape) {
     case "queue":
-      return /* @__PURE__ */ jsx("path", { d: queueSVGPath(w, h).path });
+      svg = /* @__PURE__ */ jsx("path", { d: queueSVGPath(w, h).path });
+      break;
     case "storage":
     case "cylinder": {
-      return /* @__PURE__ */ jsx("path", { d: cylinderSVGPath(w, h).path });
+      svg = /* @__PURE__ */ jsx("path", { d: cylinderSVGPath(w, h).path });
+      break;
     }
     default: {
-      return /* @__PURE__ */ jsx(
+      svg = /* @__PURE__ */ jsx(
         "rect",
         {
           x: -1,
@@ -165,11 +179,13 @@ function SelectedIndicator({ shape, w, h }) {
           rx: 6
         }
       );
+      break;
     }
   }
+  return /* @__PURE__ */ jsx("g", { className: indicator, children: svg });
 }
 export {
-  ElementShapeSvg,
+  ElementShape,
   SelectedIndicator,
   cylinderSVGPath
 };

package/dist/base/primitives/element/ElementTitle.css.d.ts

@@ -0,0 +1,8 @@
+export declare const hasIcon: string;
+export declare const iconSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const title: string;
+export declare const description: string;
+export declare const technology: string;
+export declare const elementDataContainer: string;
+export declare const elementTextData: string;
+export declare const elementIcon: string;

package/dist/base/primitives/element/ElementTitle.css.js

@@ -0,0 +1,19 @@
+/* empty css                                */
+var hasIcon = "fo05290";
+var iconSize = "var(--fo05292)";
+var title = "fo05293";
+var description = "fo05294";
+var technology = "fo05295";
+var elementDataContainer = "fo05296";
+var elementTextData = "fo05297";
+var elementIcon = "fo05298";
+export {
+  description,
+  elementDataContainer,
+  elementIcon,
+  elementTextData,
+  hasIcon,
+  iconSize,
+  technology,
+  title
+};

package/dist/base/primitives/element/ElementTitle.d.ts

@@ -0,0 +1,10 @@
+import { DiagramNode } from '@likec4/core';
+import { NodeProps } from '../../types';
+type Data = Pick<DiagramNode, 'title' | 'technology' | 'description' | 'color'> & {
+    icon?: string | null;
+};
+type ElementTitleProps = NodeProps<Data> & {
+    iconSize?: number;
+};
+export declare function ElementTitle({ id, data, iconSize }: ElementTitleProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/base/primitives/element/ElementTitle.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Box, Text } from "@mantine/core";
+import { assignInlineVars } from "../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js";
+import clsx from "clsx";
+import { isTruthy, isNumber } from "remeda";
+import { IconRenderer } from "../../../context/IconRenderer.js";
+import { elementIcon, elementDataContainer, hasIcon, elementTextData, title, technology, description, iconSize } from "./ElementTitle.css.js";
+function ElementTitle({ id, data, iconSize: iconSize$1 }) {
+  const elementIcon$1 = IconRenderer({
+    element: {
+      id,
+      title: data.title,
+      icon: data.icon
+    },
+    className: elementIcon
+  });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: clsx(
+        elementDataContainer,
+        isTruthy(elementIcon$1) && hasIcon,
+        "likec4-element"
+      ),
+      style: {
+        ...isNumber(iconSize$1) && assignInlineVars({
+          [iconSize]: `${iconSize$1}px`
+        })
+      },
+      children: [
+        elementIcon$1,
+        /* @__PURE__ */ jsxs(Box, { className: clsx(elementTextData, "likec4-element-main-props"), children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              component: "h3",
+              className: clsx(title, "likec4-element-title"),
+              lineClamp: 3,
+              children: data.title
+            }
+          ),
+          data.technology && /* @__PURE__ */ jsx(
+            Text,
+            {
+              component: "div",
+              className: clsx(technology, "likec4-element-technology"),
+              children: data.technology
+            }
+          ),
+          data.description && /* @__PURE__ */ jsx(
+            Text,
+            {
+              component: "div",
+              className: clsx(description, "likec4-element-description"),
+              lineClamp: 5,
+              children: data.description
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ElementTitle
+};

package/dist/base/primitives/index.d.ts

@@ -0,0 +1,17 @@
+export { CompoundActionButton } from './compound/CompoundActionButton';
+export { CompoundDetailsButton } from './compound/CompoundDetailsButton';
+export { CompoundNodeContainer } from './compound/CompoundNodeContainer';
+export { CompoundTitle } from './compound/CompoundTitle';
+export { customEdge } from './customEdge';
+export { customNode } from './customNode';
+export { EdgeActionButton } from './edge/EdgeActionButton';
+export { EdgeContainer } from './edge/EdgeContainer';
+export { EdgeLabel } from './edge/EdgeLabel';
+export { arrowTypeToMarker, EdgeMarkers, type EdgeMarkerType } from './edge/EdgeMarkers';
+export { EdgePath } from './edge/EdgePath';
+export { ElementActionButtons } from './element/ElementActionButtons';
+export { ElementDetailsButton } from './element/ElementDetailsButton';
+export { ElementNodeContainer } from './element/ElementNodeContainer';
+export { ElementShape } from './element/ElementShape';
+export { ElementTitle } from './element/ElementTitle';
+export { DefaultHandles } from './NodeHandles';

package/dist/base/types.d.ts

@@ -0,0 +1,90 @@
+import { Edge as RFEdge, EdgeProps as ReactFlowEdgeProps, Node as RFNode, NodeProps as ReactFlowNodeProps } from '@xyflow/react';
+import { OptionalKeysOf, SetRequired, Simplify } from 'type-fest';
+/**
+
+To cooperate with `exactOptionalPropertyTypes` in `tsconfig.json`
+
+@example
+```
+interface User {
+    name: string;
+    surname?: string;
+    luckyNumber?: number;
+}
+
+type NonOptionalUser = NonOptional<User>
+
+// NonOptionalUser = {
+//   name: string
+//   surname: string | undefined
+//   luckyNumber: number | undefined
+// }
+```
+ */
+export type NonOptional<T extends object, Keys extends OptionalKeysOf<T> = OptionalKeysOf<T>> = Simplify<{
+    [P in Exclude<keyof T, Keys>]: T[P];
+} & {
+    [P in Keys]-?: T[P] | undefined;
+}>;
+/**
+ * ReactFlow Custom Node properties with BaseNodeData at least
+ */
+export type NodeProps<T extends Record<string, unknown> = {}> = ReactFlowNodeProps<RFNode<Base.NodeData & T, any>>;
+/**
+ * ReactFlow Custom Edge properties with BaseEdgeData at least
+ */
+export type EdgeProps<T extends Record<string, unknown> = {}> = SetRequired<ReactFlowEdgeProps<RFEdge<Base.EdgeData & T, any>>, 'data'>;
+export type ReactFlowNode<Data extends Record<string, unknown>, NodeType extends string> = SetRequired<RFNode<Data, NodeType>, 'type' | 'initialWidth' | 'initialHeight'>;
+export type ReactFlowEdge<Data extends Record<string, unknown>, EdgeType extends string> = SetRequired<RFEdge<Data, EdgeType>, 'type' | 'data'>;
+export declare namespace Base {
+    export type Dimmed = 'immediate' | boolean;
+    export type NodeData<Data extends Record<string, unknown> = {}> = Simplify<Data & {
+        /**
+         * Whether the cursor is hovering over the node
+         */
+        hovered?: boolean;
+        /**
+         * Whether the node is dimmed
+         * 'immediate' means that the node is dimmed without delay
+         */
+        dimmed?: Dimmed;
+    }>;
+    export type Node = RFNode<NodeData>;
+    export type NodeProps = ReactFlowNodeProps<RFNode<Base.NodeData, any>>;
+    export type EdgeData<Data extends Record<string, unknown> = {}> = Simplify<Data & {
+        /**
+         * Whether the cursor is hovering over the edge
+         */
+        hovered?: boolean;
+        /**
+         * Whether the edge is active (animated and highlighted)
+         */
+        active?: boolean;
+        /**
+         * Whether the edge is dimmed
+         * 'immediate' means that the edge is dimmed without delay
+         */
+        dimmed?: Dimmed;
+    }>;
+    export type Edge = SetRequired<RFEdge<EdgeData>, 'data'>;
+    type WithDimmed = {
+        data: {
+            dimmed?: Dimmed;
+        };
+    };
+    type WithHovered = {
+        data: {
+            hovered?: boolean;
+        };
+    };
+    export function setDimmed<T extends WithDimmed>(value: T, dimmed: 'immediate' | boolean): T;
+    export function setDimmed(dimmed: 'immediate' | boolean): <T extends WithDimmed>(value: T) => T;
+    export function setHovered<T extends WithHovered>(value: T, hovered: boolean): T;
+    export function setHovered(hovered: boolean): <T extends WithHovered>(value: T) => T;
+    type WithData<D> = {
+        data: D;
+    };
+    export function setData<E extends WithData<any>>(value: E, state: Partial<E['data']>): E;
+    export function setData<E extends WithData<any>>(state: Partial<E['data']>): (value: E) => E;
+    export {};
+}

package/dist/base/types.js

@@ -0,0 +1,54 @@
+import { hasSubObject } from "remeda";
+var Base;
+((Base2) => {
+  const _setDimmed = (v, dimmed) => v.data.dimmed === dimmed ? v : {
+    ...v,
+    data: {
+      ...v.data,
+      dimmed
+    }
+  };
+  function setDimmed(arg1, arg2) {
+    if (arg2 !== void 0) {
+      return _setDimmed(arg1, arg2);
+    }
+    return (v) => _setDimmed(v, arg1);
+  }
+  Base2.setDimmed = setDimmed;
+  const _setHovered = (v, hovered) => v.data.hovered === hovered ? v : {
+    ...v,
+    data: {
+      ...v.data,
+      hovered
+    }
+  };
+  function setHovered(arg1, arg2) {
+    if (arg2 !== void 0) {
+      return _setHovered(arg1, arg2);
+    }
+    return (v) => _setHovered(v, arg1);
+  }
+  Base2.setHovered = setHovered;
+  function _setData(value, state) {
+    if (hasSubObject(value.data, state)) {
+      return value;
+    }
+    return {
+      ...value,
+      data: {
+        ...value.data,
+        ...state
+      }
+    };
+  }
+  function setData(arg1, arg2) {
+    if (arg2 !== void 0) {
+      return _setData(arg1, arg2);
+    }
+    return (edge) => _setData(edge, arg1);
+  }
+  Base2.setData = setData;
+})(Base || (Base = {}));
+export {
+  Base
+};

package/dist/base/updateEdges.d.ts

@@ -0,0 +1,3 @@
+import { Base } from './types';
+export declare function updateEdges<E extends Base.Edge>(current: E[], update: E[]): E[];
+export declare function updateEdges<E extends Base.Edge>(update: E[]): (current: E[]) => E[];

package/dist/base/updateEdges.js

@@ -0,0 +1,31 @@
+import { deepEqual } from "fast-equals";
+import { isDefined } from "remeda";
+function _update(current, update) {
+  return update.map((next) => {
+    const existing = current.find((n) => n.id === next.id);
+    if (existing && existing.type === next.type) {
+      if (deepEqual(existing.hidden ?? false, next.hidden ?? false) && deepEqual(existing.source, next.source) && deepEqual(existing.sourceHandle ?? null, next.sourceHandle ?? null) && deepEqual(existing.target, next.target) && deepEqual(existing.targetHandle ?? null, next.targetHandle ?? null) && deepEqual(existing.data, next.data)) {
+        return existing;
+      }
+      return {
+        ...existing,
+        ...next,
+        data: {
+          ...existing.data,
+          ...next.data
+        }
+      };
+    }
+    return next;
+  });
+}
+function updateEdges(current, update) {
+  if (isDefined(update)) {
+    return _update(current, update);
+  }
+  update = current;
+  return (current2) => _update(current2, update);
+}
+export {
+  updateEdges
+};

package/dist/base/updateNodes.d.ts

@@ -0,0 +1,3 @@
+import { Base } from './types';
+export declare function updateNodes<N extends Base.Node>(current: N[], update: N[]): N[];
+export declare function updateNodes<N extends Base.Node>(update: N[]): (current: N[]) => N[];

package/dist/base/updateNodes.js

@@ -0,0 +1,36 @@
+import { getNodeDimensions } from "@xyflow/system";
+import { deepEqual } from "fast-equals";
+import { isDefined, omit } from "remeda";
+function _update(current, updated) {
+  return updated.map((update) => {
+    const existing = current.find((n) => n.id === update.id);
+    if (existing) {
+      const { width: existingWidth, height: existingHeight } = getNodeDimensions(existing);
+      if (deepEqual(existing.type, update.type) && deepEqual(existingWidth, update.initialWidth) && deepEqual(existingHeight, update.initialHeight) && deepEqual(existing.hidden ?? false, update.hidden ?? false) && deepEqual(existing.position, update.position) && deepEqual(existing.data, update.data) && deepEqual(existing.parentId ?? null, update.parentId ?? null)) {
+        return existing;
+      }
+      return {
+        ...omit(existing, ["measured", "parentId"]),
+        ...update,
+        // Force dimensions from update
+        width: update.initialWidth,
+        height: update.initialHeight,
+        data: {
+          ...existing.data,
+          ...update.data
+        }
+      };
+    }
+    return update;
+  });
+}
+function updateNodes(current, update) {
+  if (isDefined(update)) {
+    return _update(current, update);
+  }
+  update = current;
+  return (current2) => _update(current2, update);
+}
+export {
+  updateNodes
+};

package/dist/base/xyflowMachine.d.ts

@@ -0,0 +1,212 @@
+import { BBox } from '@likec4/core';
+import { ReactFlowInstance, Viewport } from '@xyflow/react';
+import { ActorRefFrom, StateMachine, NonReducibleUnknown, EventObject, MetaObject, ActorRefFromLogic, AnyActorLogic, ConditionalRequired, InputFrom, RequiredLogicInput, IsNotNever, ActorRef, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionArgs } from 'xstate';
+import { Base } from './types';
+export interface TodoItem {
+    id: string;
+    title: string;
+    completed: boolean;
+}
+export type TodosFilter = 'all' | 'active' | 'completed';
+export declare const xyflowMachine: StateMachine<{
+    xyflow: ReactFlowInstance<Base.Node, Base.Edge>;
+    fitViewPadding: number;
+}, {
+    type: "fitBounds";
+    bounds: BBox;
+    duration?: number;
+} | {
+    type: "fitView";
+    duration?: number;
+} | {
+    type: "setCenter";
+    center: {
+        x: number;
+        y: number;
+    };
+    duration?: number;
+} | {
+    type: "setViewport";
+    viewport: Viewport;
+    duration?: number;
+}, {}, never, never, never, never, {}, string, {
+    xyflow: ReactFlowInstance<Base.Node, Base.Edge>;
+    fitViewPadding?: number;
+}, NonReducibleUnknown, EventObject, MetaObject, {
+    readonly id: "xyflow";
+    readonly context: ({ input }: {
+        spawn: {
+            <TSrc extends never>(logic: TSrc, ...[options]: never): ActorRefFromLogic<never>;
+            <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: {
+            xyflow: ReactFlowInstance<Base.Node, Base.Edge>;
+            fitViewPadding?: number;
+        };
+        self: ActorRef<MachineSnapshot<{
+            xyflow: ReactFlowInstance<Base.Node, Base.Edge>;
+            fitViewPadding: number;
+        }, {
+            type: "fitBounds";
+            bounds: BBox;
+            duration?: number;
+        } | {
+            type: "fitView";
+            duration?: number;
+        } | {
+            type: "setCenter";
+            center: {
+                x: number;
+                y: number;
+            };
+            duration?: number;
+        } | {
+            type: "setViewport";
+            viewport: Viewport;
+            duration?: number;
+        }, Record<string, AnyActorRef | undefined>, StateValue, string, unknown, any, any>, {
+            type: "fitBounds";
+            bounds: BBox;
+            duration?: number;
+        } | {
+            type: "fitView";
+            duration?: number;
+        } | {
+            type: "setCenter";
+            center: {
+                x: number;
+                y: number;
+            };
+            duration?: number;
+        } | {
+            type: "setViewport";
+            viewport: Viewport;
+            duration?: number;
+        }, AnyEventObject>;
+    }) => {
+        xyflow: ReactFlowInstance<Base.Node, Base.Edge>;
+        fitViewPadding: number;
+    };
+    readonly on: {
+        readonly fitBounds: {
+            readonly actions: ({ context, event }: ActionArgs<{
+                xyflow: ReactFlowInstance<Base.Node, Base.Edge>;
+                fitViewPadding: number;
+            }, {
+                type: "fitBounds";
+                bounds: BBox;
+                duration?: number;
+            }, {
+                type: "fitBounds";
+                bounds: BBox;
+                duration?: number;
+            } | {
+                type: "fitView";
+                duration?: number;
+            } | {
+                type: "setCenter";
+                center: {
+                    x: number;
+                    y: number;
+                };
+                duration?: number;
+            } | {
+                type: "setViewport";
+                viewport: Viewport;
+                duration?: number;
+            }>) => void;
+        };
+        readonly fitView: {
+            readonly actions: ({ context, event }: ActionArgs<{
+                xyflow: ReactFlowInstance<Base.Node, Base.Edge>;
+                fitViewPadding: number;
+            }, {
+                type: "fitView";
+                duration?: number;
+            }, {
+                type: "fitBounds";
+                bounds: BBox;
+                duration?: number;
+            } | {
+                type: "fitView";
+                duration?: number;
+            } | {
+                type: "setCenter";
+                center: {
+                    x: number;
+                    y: number;
+                };
+                duration?: number;
+            } | {
+                type: "setViewport";
+                viewport: Viewport;
+                duration?: number;
+            }>) => void;
+        };
+        readonly setCenter: {
+            readonly actions: ({ context, event }: ActionArgs<{
+                xyflow: ReactFlowInstance<Base.Node, Base.Edge>;
+                fitViewPadding: number;
+            }, {
+                type: "setCenter";
+                center: {
+                    x: number;
+                    y: number;
+                };
+                duration?: number;
+            }, {
+                type: "fitBounds";
+                bounds: BBox;
+                duration?: number;
+            } | {
+                type: "fitView";
+                duration?: number;
+            } | {
+                type: "setCenter";
+                center: {
+                    x: number;
+                    y: number;
+                };
+                duration?: number;
+            } | {
+                type: "setViewport";
+                viewport: Viewport;
+                duration?: number;
+            }>) => void;
+        };
+        readonly setViewport: {
+            readonly actions: ({ context, event }: ActionArgs<{
+                xyflow: ReactFlowInstance<Base.Node, Base.Edge>;
+                fitViewPadding: number;
+            }, {
+                type: "setViewport";
+                viewport: Viewport;
+                duration?: number;
+            }, {
+                type: "fitBounds";
+                bounds: BBox;
+                duration?: number;
+            } | {
+                type: "fitView";
+                duration?: number;
+            } | {
+                type: "setCenter";
+                center: {
+                    x: number;
+                    y: number;
+                };
+                duration?: number;
+            } | {
+                type: "setViewport";
+                viewport: Viewport;
+                duration?: number;
+            }>) => void;
+        };
+    };
+}>;
+export type XYFlowActorRef = ActorRefFrom<typeof xyflowMachine>;

package/dist/context/DiagramEventHandlers.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+import { LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props';
+type RequiredOrNull<T> = {
+    [P in keyof T]-?: NonNullable<T[P]> | null;
+};
+export declare function DiagramEventHandlers({ handlers, children, }: PropsWithChildren<{
+    handlers: LikeC4DiagramEventHandlers;
+}>): import("react/jsx-runtime").JSX.Element;
+export declare function useDiagramEventHandlers(): RequiredOrNull<LikeC4DiagramEventHandlers>;
+export {};

package/dist/context/DiagramEventHandlers.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import { useSyncedRef } from "@react-hookz/web";
+import { createContext, useMemo, useContext } from "react";
+import { mapToObj, isFunction } from "remeda";
+const HandlerNames = [
+  "onBurgerMenuClick",
+  "onNavigateTo",
+  "onOpenSource",
+  "onCanvasClick",
+  "onCanvasContextMenu",
+  "onEdgeClick",
+  "onEdgeContextMenu",
+  "onNodeClick",
+  "onNodeContextMenu",
+  "onChange",
+  "onCanvasDblClick"
+];
+const DiagramEventHandlersContext = createContext(
+  mapToObj(HandlerNames, (name) => [name, null])
+);
+function DiagramEventHandlers({
+  handlers,
+  children
+}) {
+  const handlersRef = useSyncedRef(handlers);
+  const deps = HandlerNames.map((name) => isFunction(handlers[name]));
+  return /* @__PURE__ */ jsx(
+    DiagramEventHandlersContext.Provider,
+    {
+      value: useMemo(() => mapToObj(HandlerNames, (name) => {
+        if (handlersRef.current[name]) {
+          return [name, (...args) => {
+            var _a, _b;
+            return (_b = (_a = handlersRef.current)[name]) == null ? void 0 : _b.call(_a, ...args);
+          }];
+        }
+        return [name, null];
+      }), [handlersRef, ...deps]),
+      children
+    }
+  );
+}
+function useDiagramEventHandlers() {
+  return useContext(DiagramEventHandlersContext);
+}
+export {
+  DiagramEventHandlers,
+  useDiagramEventHandlers
+};