@likec4/diagram 1.19.2 → 1.20.0

package/dist/likec4diagram/DiagramActor.js

@@ -0,0 +1,71 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useCallbackRef } from "@mantine/hooks";
+import { useStoreApi } from "@xyflow/react";
+import { useEffect } from "react";
+import { useDiagramActor } from "../hooks/useDiagramActor.js";
+import { useUpdateEffect } from "../hooks/useUpdateEffect.js";
+import { LikeC4ViewMachineContextProvider } from "./state/actorContext.js";
+import { diagramMachine } from "./state/machine.js";
+import { syncManualLayoutActor } from "./state/syncManualLayoutActor.js";
+import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.js";
+import { useEnabledFeatures } from "../context/DiagramFeatures.js";
+function DiagramActor({ input, children }) {
+  const { onNavigateTo, onOpenSource, onChange } = useDiagramEventHandlers();
+  const xystore = useStoreApi();
+  return /* @__PURE__ */ jsxs(
+    LikeC4ViewMachineContextProvider,
+    {
+      logic: diagramMachine.provide({
+        actions: {
+          "trigger:NavigateTo": useCallbackRef((_, { viewId }) => {
+            onNavigateTo == null ? void 0 : onNavigateTo(viewId);
+          }),
+          "trigger:OnChange": useCallbackRef((_, params) => {
+            onChange == null ? void 0 : onChange(params);
+          }),
+          "trigger:OpenSource": useCallbackRef((_, params) => {
+            onOpenSource == null ? void 0 : onOpenSource(params);
+          })
+        },
+        actors: {
+          syncManualLayoutActor: syncManualLayoutActor.provide({
+            actions: {
+              "trigger:OnChange": useCallbackRef((_, params) => {
+                onChange == null ? void 0 : onChange(params);
+              })
+            }
+          })
+        }
+      }),
+      options: {
+        // ...inspector,
+        id: `diagram:${input.view.id}`,
+        input: {
+          xystore,
+          ...input
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(SyncStore, { input }),
+        children
+      ]
+    }
+  );
+}
+const SyncStore = ({ input: { view, xyedges, xynodes, ...inputs } }) => {
+  const features = useEnabledFeatures();
+  const { send } = useDiagramActor();
+  useUpdateEffect(() => {
+    send({ type: "update.inputs", inputs });
+  }, [send, inputs]);
+  useEffect(() => {
+    send({ type: "update.features", features });
+  }, [send, features]);
+  useUpdateEffect(() => {
+    send({ type: "update.view", view, xyedges, xynodes });
+  }, [send, view, xyedges, xynodes]);
+  return null;
+};
+export {
+  DiagramActor
+};

package/dist/likec4diagram/DiagramUI.d.ts

@@ -0,0 +1,2 @@
+import { MemoExoticComponent } from 'react';
+export declare const DiagramUI: MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/likec4diagram/DiagramUI.js

@@ -0,0 +1,22 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { LikeC4Search } from "../LikeC4Search.js";
+import { Overlays } from "../overlays/Overlays.js";
+import { DynamicViewWalkthrough } from "./ui/walkthrough/DynamicViewWalkthrough.js";
+import { Controls } from "./ui/controls/Controls.js";
+import { IfEnabled } from "../context/DiagramFeatures.js";
+import { DiagramTitlePanel } from "./ui/diagram-title/DiagramTitlePanel.js";
+import { NotationPanel } from "./ui/notation/NotationPanel.js";
+const DiagramUI = memo(() => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Controls, {}),
+    /* @__PURE__ */ jsx(Overlays, {}),
+    /* @__PURE__ */ jsx(IfEnabled, { feature: "Search", children: /* @__PURE__ */ jsx(LikeC4Search, {}) }),
+    /* @__PURE__ */ jsx(IfEnabled, { feature: "ViewTitle", children: /* @__PURE__ */ jsx(DiagramTitlePanel, {}) }),
+    /* @__PURE__ */ jsx(IfEnabled, { feature: "Notations", children: /* @__PURE__ */ jsx(NotationPanel, {}) }),
+    /* @__PURE__ */ jsx(IfEnabled, { feature: "DynamicViewWalkthrough", children: /* @__PURE__ */ jsx(DynamicViewWalkthrough, {}) })
+  ] });
+});
+export {
+  DiagramUI
+};

package/dist/likec4diagram/XYFlow.d.ts

@@ -0,0 +1,6 @@
+import { EnforceOptional } from 'type-fest/source/enforce-optional';
+import { LikeC4DiagramProperties } from '../LikeC4Diagram.props';
+type Picked = EnforceOptional<Pick<LikeC4DiagramProperties, 'background' | 'nodesDraggable' | 'nodesSelectable'>>;
+export type LikeC4DiagramXYFlowProps = Required<Picked>;
+export declare const LikeC4DiagramXYFlow: ({ background, ...rest }: LikeC4DiagramXYFlowProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/likec4diagram/XYFlow.js

@@ -0,0 +1,122 @@
+import { jsx } from "react/jsx-runtime";
+import { nonNullable } from "@likec4/core";
+import { useCallbackRef } from "@mantine/hooks";
+import clsx from "clsx";
+import { useDiagram } from "../hooks/useDiagram.js";
+import { useDiagramContext } from "../hooks/useDiagramContext.js";
+import { edgeTypes } from "./custom/index.js";
+import { useLayoutConstraints } from "./useLayoutConstraints.js";
+import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.js";
+import { useEnabledFeature } from "../context/DiagramFeatures.js";
+import { BaseXYFlow } from "../base/BaseXYFlow.js";
+import { nodeTypes } from "./custom/nodes/nodeTypes.js";
+const selectXYProps = (ctx) => ({
+  initialized: ctx.initialized,
+  nodes: ctx.xynodes,
+  edges: ctx.xyedges,
+  pannable: ctx.pannable,
+  zoomable: ctx.zoomable,
+  fitViewPadding: ctx.fitViewPadding
+});
+const LikeC4DiagramXYFlow = ({ background, ...rest }) => {
+  const diagram = useDiagram();
+  const {
+    initialized,
+    nodes,
+    edges,
+    ...props
+  } = useDiagramContext(selectXYProps);
+  const {
+    onNodeContextMenu,
+    onCanvasContextMenu,
+    onEdgeContextMenu,
+    onNodeClick,
+    onEdgeClick,
+    onCanvasClick,
+    onCanvasDblClick
+  } = useDiagramEventHandlers();
+  const {
+    enableFitView,
+    enableReadOnly
+  } = useEnabledFeature("ReadOnly", "FitView");
+  const notReadOnly = !enableReadOnly;
+  const layoutConstraints = useLayoutConstraints();
+  return /* @__PURE__ */ jsx(
+    BaseXYFlow,
+    {
+      nodes,
+      edges,
+      className: clsx(initialized ? "initialized" : "not-initialized"),
+      nodeTypes,
+      edgeTypes,
+      onNodesChange: useCallbackRef((changes) => {
+        diagram.send({ type: "xyflow.applyNodeChages", changes });
+      }),
+      onEdgesChange: useCallbackRef((changes) => {
+        diagram.send({ type: "xyflow.applyEdgeChages", changes });
+      }),
+      background: initialized ? background : "transparent",
+      fitView: false,
+      onNodeClick: useCallbackRef((e, node) => {
+        e.stopPropagation();
+        diagram.send({ type: "xyflow.nodeClick", node });
+        onNodeClick == null ? void 0 : onNodeClick(diagram.findDiagramNode(node.id), e);
+      }),
+      onEdgeClick: useCallbackRef((e, edge) => {
+        e.stopPropagation();
+        diagram.send({ type: "xyflow.edgeClick", edge });
+        onEdgeClick == null ? void 0 : onEdgeClick(diagram.findDiagramEdge(edge.id), e);
+      }),
+      onPaneClick: useCallbackRef((e) => {
+        e.stopPropagation();
+        diagram.send({ type: "xyflow.paneClick" });
+        onCanvasClick == null ? void 0 : onCanvasClick(e);
+      }),
+      onDoubleClick: useCallbackRef((e) => {
+        e.stopPropagation();
+        diagram.send({ type: "xyflow.paneDblClick" });
+        onCanvasDblClick == null ? void 0 : onCanvasDblClick(e);
+      }),
+      onMoveEnd: useCallbackRef((event, viewport) => {
+        diagram.send({ type: "xyflow.viewportMoved", viewport, manually: !!event });
+      }),
+      onInit: useCallbackRef((instance) => {
+        diagram.send({ type: "xyflow.init", instance });
+      }),
+      ...onNodeContextMenu && {
+        onNodeContextMenu: useCallbackRef((event, node) => {
+          const diagramNode = nonNullable(
+            diagram.findDiagramNode(node.id),
+            `diagramNode ${node.id} not found`
+          );
+          onNodeContextMenu(diagramNode, event);
+        })
+      },
+      ...onEdgeContextMenu && {
+        onEdgeContextMenu: useCallbackRef((event, edge) => {
+          const diagramEdge = nonNullable(
+            diagram.findDiagramEdge(edge.id),
+            `diagramEdge ${edge.id} not found`
+          );
+          onEdgeContextMenu(diagramEdge, event);
+        })
+      },
+      ...onCanvasContextMenu && {
+        onPaneContextMenu: useCallbackRef((event) => {
+          onCanvasContextMenu(event);
+        })
+      },
+      ...enableFitView && {
+        onViewportResize: () => {
+          diagram.send({ type: "xyflow.resized" });
+        }
+      },
+      ...notReadOnly && rest.nodesDraggable && layoutConstraints,
+      ...props,
+      ...rest
+    }
+  );
+};
+export {
+  LikeC4DiagramXYFlow
+};

package/dist/likec4diagram/custom/edges/NotePopover.css.d.ts

@@ -0,0 +1,2 @@
+export declare const edgeNoteCloseButton: string;
+export declare const edgeNoteText: string;

package/dist/likec4diagram/custom/edges/NotePopover.css.js

@@ -0,0 +1,7 @@
+/* empty css                               */
+var edgeNoteCloseButton = "_1xfux2o0";
+var edgeNoteText = "_1xfux2o1";
+export {
+  edgeNoteCloseButton,
+  edgeNoteText
+};

package/dist/likec4diagram/custom/edges/NotePopover.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from 'react';
+export declare const NotePopover: ({ notes, children }: PropsWithChildren<{
+    notes: string;
+}>) => import("react/jsx-runtime").JSX.Element;

package/dist/likec4diagram/custom/edges/NotePopover.js

@@ -0,0 +1,101 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Popover, PopoverTarget, PopoverDropdown, Stack, ScrollAreaAutosize, Text, CloseButton, Group, Button } from "@mantine/core";
+import { useDebouncedEffect } from "@react-hookz/web";
+import { useState } from "react";
+import { isNonNull, isTruthy } from "remeda";
+import { useDiagram } from "../../../hooks/useDiagram.js";
+import { useDiagramContext } from "../../../hooks/useDiagramContext.js";
+import { edgeNoteText, edgeNoteCloseButton } from "./NotePopover.css.js";
+import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
+import { stopPropagation } from "../../../utils/xyflow.js";
+const NotePopover = ({ notes, children }) => {
+  const {
+    isActive,
+    isParallel,
+    hasNext,
+    hasPrevious
+  } = useDiagramContext((s) => {
+    var _a;
+    return {
+      isActive: isNonNull(s.activeWalkthrough),
+      isParallel: isTruthy((_a = s.activeWalkthrough) == null ? void 0 : _a.parallelPrefix),
+      hasNext: s.xyedges.findIndex((e) => {
+        var _a2;
+        return e.id === ((_a2 = s.activeWalkthrough) == null ? void 0 : _a2.stepId);
+      }) < s.xyedges.length - 1,
+      hasPrevious: s.xyedges.findIndex((e) => {
+        var _a2;
+        return e.id === ((_a2 = s.activeWalkthrough) == null ? void 0 : _a2.stepId);
+      }) > 0
+    };
+  });
+  const diagram = useDiagram();
+  const [isOpened, setIsOpened] = useState(false);
+  const portalProps = useMantinePortalProps();
+  useDebouncedEffect(
+    () => {
+      setIsOpened(true);
+    },
+    [],
+    300
+  );
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      shadow: "xs",
+      offset: 16,
+      opened: isOpened,
+      closeOnClickOutside: false,
+      ...portalProps,
+      children: [
+        /* @__PURE__ */ jsx(PopoverTarget, { children }),
+        /* @__PURE__ */ jsxs(
+          PopoverDropdown,
+          {
+            component: Stack,
+            p: "xs",
+            onPointerDownCapture: stopPropagation,
+            onClick: stopPropagation,
+            onDoubleClick: stopPropagation,
+            children: [
+              /* @__PURE__ */ jsx(ScrollAreaAutosize, { miw: 180, maw: 450, mah: 350, type: "scroll", mx: "auto", mt: 2, children: /* @__PURE__ */ jsx(Text, { component: "div", className: edgeNoteText, p: 4, children: notes }) }),
+              /* @__PURE__ */ jsx(
+                CloseButton,
+                {
+                  size: "xs",
+                  className: edgeNoteCloseButton,
+                  onClick: () => setIsOpened(false)
+                }
+              ),
+              (hasPrevious || hasNext) && /* @__PURE__ */ jsxs(Group, { gap: 0, justify: hasPrevious ? "flex-start" : "flex-end", children: [
+                hasPrevious && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "subtle",
+                    radius: "xs",
+                    size: "compact-xs",
+                    onClick: () => diagram.walkthroughStep("previous"),
+                    children: "back"
+                  }
+                ),
+                hasNext && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "subtle",
+                    radius: "xs",
+                    size: "compact-xs",
+                    onClick: () => diagram.walkthroughStep("next"),
+                    children: "next"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  NotePopover
+};

package/dist/likec4diagram/custom/edges/RelationshipEdge.d.ts

@@ -0,0 +1,55 @@
+import { EdgeId, NonEmptyArray, Point, Color, ViewId, RelationshipArrowType, RelationshipLineType, BBox } from '@likec4/core';
+import { XYPosition } from '@xyflow/react';
+import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
+import { Position } from '@xyflow/system';
+export declare const RelationshipEdge: NamedExoticComponent<{
+    source: string;
+    target: string;
+    style?: CSSProperties;
+    id: string;
+    selected?: boolean;
+    selectable?: boolean;
+    deletable?: boolean;
+    animated?: boolean;
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    sourcePosition: Position;
+    targetPosition: Position;
+    label?: ReactNode;
+    labelStyle?: CSSProperties;
+    labelShowBg?: boolean;
+    labelBgStyle?: CSSProperties;
+    labelBgPadding?: [number, number];
+    labelBgBorderRadius?: number;
+    sourceHandleId?: string | null;
+    targetHandleId?: string | null;
+    markerStart?: string;
+    markerEnd?: string;
+    pathOptions?: any;
+    interactionWidth?: number;
+    data: {
+        hovered?: boolean;
+        active?: boolean;
+        dimmed?: import("../../../base").Base.Dimmed;
+    } & {
+        id: EdgeId;
+        label: string | null;
+        points: NonEmptyArray<Point>;
+        technology: string | undefined;
+        color: Color | undefined;
+        navigateTo: ViewId<string> | undefined;
+        dir: "forward" | "back" | "both" | undefined;
+        head: RelationshipArrowType | undefined;
+        tail: RelationshipArrowType | undefined;
+        line: RelationshipLineType | undefined;
+        notes: string | undefined;
+        labelBBox: BBox | null | undefined;
+        labelXY: XYPosition | null;
+        controlPoints: XYPosition[] | undefined | null;
+        hovered?: boolean;
+        active?: boolean;
+        dimmed?: import("../../../base").Base.Dimmed;
+    };
+}>;