@likec4/diagram 1.18.0 → 1.19.0

package/dist/ui/top-left/ManualLayoutToolsButton.d.ts

@@ -0,0 +1,2 @@
+import { PopoverProps } from '@mantine/core';
+export declare const ManualLayoutToolsButton: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui/top-left/ManualLayoutToolsButton.js

@@ -0,0 +1,137 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Popover, PopoverTarget, PopoverDropdown, Group, ActionIconGroup } from "@mantine/core";
+import { IconLayoutCollage, IconLayoutBoardSplit, IconLayoutAlignLeft, IconLayoutAlignCenter, IconLayoutAlignRight, IconLayoutAlignTop, IconLayoutAlignMiddle, IconLayoutAlignBottom, IconRouteOff } from "@tabler/icons-react";
+import { useDiagramStoreApi } from "../../hooks/useDiagramState.js";
+import { Tooltip, ActionIcon } from "./_shared.js";
+const Action = ({
+  label,
+  icon,
+  onClick
+}) => /* @__PURE__ */ jsx(Tooltip, { label, withinPortal: false, position: "top", children: /* @__PURE__ */ jsx(ActionIcon, { onClick, children: icon }) });
+const ManualLayoutToolsButton = (props) => {
+  const store = useDiagramStoreApi();
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      position: "right-start",
+      clickOutsideEvents: [
+        "pointerdown"
+      ],
+      radius: "xs",
+      shadow: "lg",
+      offset: {
+        mainAxis: 10
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Tooltip, { label: "Manual layouting tools", withinPortal: false, position: "top-end", children: /* @__PURE__ */ jsx(ActionIcon, { children: /* @__PURE__ */ jsx(IconLayoutCollage, {}) }) }) }),
+        /* @__PURE__ */ jsx(PopoverDropdown, { p: 0, children: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+          /* @__PURE__ */ jsxs(ActionIconGroup, { pos: "relative", children: [
+            /* @__PURE__ */ jsx(
+              Action,
+              {
+                label: "Align in columns",
+                icon: /* @__PURE__ */ jsx(IconLayoutBoardSplit, {}),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  store.getState().align("Column");
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Action,
+              {
+                label: "Align left",
+                icon: /* @__PURE__ */ jsx(IconLayoutAlignLeft, {}),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  store.getState().align("Left");
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Action,
+              {
+                label: "Align center",
+                icon: /* @__PURE__ */ jsx(IconLayoutAlignCenter, {}),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  store.getState().align("Center");
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Action,
+              {
+                label: "Align right",
+                icon: /* @__PURE__ */ jsx(IconLayoutAlignRight, {}),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  store.getState().align("Right");
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Action,
+              {
+                label: "Align in rows",
+                icon: /* @__PURE__ */ jsx(IconLayoutBoardSplit, { style: { transform: "rotate(90deg)" } }),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  store.getState().align("Row");
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Action,
+              {
+                label: "Align top",
+                icon: /* @__PURE__ */ jsx(IconLayoutAlignTop, {}),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  store.getState().align("Top");
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Action,
+              {
+                label: "Align middle",
+                icon: /* @__PURE__ */ jsx(IconLayoutAlignMiddle, {}),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  store.getState().align("Middle");
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Action,
+              {
+                label: "Align bottom",
+                icon: /* @__PURE__ */ jsx(IconLayoutAlignBottom, {}),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  store.getState().align("Bottom");
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            Action,
+            {
+              label: "Reset all control points",
+              icon: /* @__PURE__ */ jsx(IconRouteOff, {}),
+              onClick: (e) => {
+                e.stopPropagation();
+                store.getState().resetEdgeControlPoints();
+              }
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+};
+export {
+  ManualLayoutToolsButton
+};

package/dist/ui/top-left/TopLeftPanel.d.ts

@@ -0,0 +1,4 @@
+export declare const TopLeftPanel: {
+    (): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/ui/top-left/TopLeftPanel.js

@@ -0,0 +1,211 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TooltipGroup, Stack, ActionIconGroup, Group, HoverCard, HoverCardTarget, Overlay, HoverCardDropdown, Notification, Text, Code } from "@mantine/core";
+import { openSpotlight } from "@mantine/spotlight";
+import { IconSearch, IconFileSymlink, IconFocusCentered, IconMenu2, IconChevronLeft, IconChevronRight, IconAlertTriangle } from "@tabler/icons-react";
+import clsx from "clsx";
+import { LayoutGroup, AnimatePresence, m } from "framer-motion";
+import { isNullish } from "remeda";
+import { useDiagramStoreApi, useDiagramState } from "../../hooks/useDiagramState.js";
+import { useMantinePortalProps } from "../../hooks/useMantinePortalProps.js";
+import { mantine } from "../../theme-vars.js";
+import { Tooltip, ActionIcon } from "./_shared.js";
+import { ChangeAutoLayoutButton } from "./ChangeAutoLayoutButton.js";
+import { ManualLayoutToolsButton } from "./ManualLayoutToolsButton.js";
+import { panel, actionIconGroup, backwardForwardButtons } from "./styles.css.js";
+const historySelector = (s) => ({
+  showBurgerMenu: !!s.onBurgerMenuClick,
+  hasStepBack: s.showNavigationButtons && !!s.onNavigateTo && s.navigationHistoryIndex > 0,
+  hasStepForward: s.showNavigationButtons && !!s.onNavigateTo && s.navigationHistoryIndex < s.navigationHistory.length - 1
+});
+const BackwardForwardButtons = () => {
+  const store = useDiagramStoreApi();
+  const {
+    showBurgerMenu,
+    hasStepBack,
+    hasStepForward
+  } = useDiagramState(historySelector);
+  return /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsxs(
+    Group,
+    {
+      className: clsx(backwardForwardButtons, "likec4-navigation-webview"),
+      align: "flex-start",
+      gap: "xs",
+      children: [
+        showBurgerMenu && /* @__PURE__ */ jsx(
+          ActionIcon,
+          {
+            onClick: (e) => {
+              var _a, _b;
+              e.stopPropagation();
+              (_b = (_a = store.getState()).onBurgerMenuClick) == null ? void 0 : _b.call(_a);
+            },
+            children: /* @__PURE__ */ jsx(IconMenu2, {})
+          }
+        ),
+        /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+          hasStepBack && /* @__PURE__ */ jsx(
+            m.div,
+            {
+              layout: true,
+              initial: { opacity: 0.05, transform: "translateX(-10px)" },
+              animate: { opacity: 1, transform: "translateX(0)" },
+              exit: {
+                opacity: 0.05,
+                transform: "translateX(-10px)"
+              },
+              children: /* @__PURE__ */ jsx(
+                ActionIcon,
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    store.getState().goBack();
+                  },
+                  children: /* @__PURE__ */ jsx(IconChevronLeft, {})
+                }
+              )
+            },
+            "back"
+          ),
+          hasStepForward && /* @__PURE__ */ jsx(
+            m.div,
+            {
+              layout: true,
+              initial: { opacity: 0.05, transform: "translateX(10px)" },
+              animate: { opacity: 1, transform: "translateX(0)" },
+              exit: {
+                opacity: 0,
+                transform: "translateX(10px)"
+              },
+              children: /* @__PURE__ */ jsx(
+                ActionIcon,
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    store.getState().goForward();
+                  },
+                  children: /* @__PURE__ */ jsx(IconChevronRight, {})
+                }
+              )
+            },
+            "forward"
+          )
+        ] })
+      ]
+    }
+  ) });
+};
+const LayoutDriftNotification = (props) => /* @__PURE__ */ jsxs(
+  HoverCard,
+  {
+    position: "right-start",
+    openDelay: 200,
+    closeDelay: 100,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(HoverCardTarget, { children: /* @__PURE__ */ jsxs(ActionIcon, { c: "orange", children: [
+        /* @__PURE__ */ jsx(Overlay, { color: mantine.colors.orange.lightHover, backgroundOpacity: 1 }),
+        /* @__PURE__ */ jsx(IconAlertTriangle, {})
+      ] }) }),
+      /* @__PURE__ */ jsx(HoverCardDropdown, { p: "0", children: /* @__PURE__ */ jsxs(
+        Notification,
+        {
+          color: "orange",
+          withBorder: false,
+          withCloseButton: false,
+          title: "Manual layout issues",
+          children: [
+            /* @__PURE__ */ jsxs(Text, { mt: 2, size: "sm", lh: "xs", children: [
+              "View contains new elements or their sizes have changed,",
+              /* @__PURE__ */ jsx("br", {}),
+              "last manual layout can not be applied."
+            ] }),
+            /* @__PURE__ */ jsxs(Text, { mt: "xs", size: "sm", lh: "xs", children: [
+              "Update view predicates or remove ",
+              /* @__PURE__ */ jsx(Code, { children: "@likec4-generated" })
+            ] })
+          ]
+        }
+      ) })
+    ]
+  }
+);
+const TopLeftPanel = () => {
+  const store = useDiagramStoreApi();
+  const {
+    enableSearch,
+    showNavigationButtons,
+    showFitDiagram,
+    showLayoutDriftWarning,
+    showChangeAutoLayout,
+    showGoToSource,
+    viewportChanged,
+    showManualLayoutTools
+  } = useDiagramState((s) => {
+    const isNotWalkthrough = isNullish(s.activeWalkthrough);
+    const isNotFocused = isNullish(s.focusedNodeId);
+    const isNotActive = isNotWalkthrough && isNotFocused;
+    return {
+      enableSearch: s.enableSearch,
+      showNavigationButtons: !!s.onBurgerMenuClick || s.showNavigationButtons && !!s.onNavigateTo,
+      showFitDiagram: s.controls && s.fitViewEnabled && s.zoomable && isNotWalkthrough,
+      showLayoutDriftWarning: s.controls && !s.readonly && s.view.hasLayoutDrift === true && isNotActive,
+      showChangeAutoLayout: s.controls && s.isEditable() && isNotActive,
+      showGoToSource: s.controls && !!s.onOpenSource && isNotWalkthrough,
+      viewportChanged: s.viewportChanged,
+      showManualLayoutTools: s.controls && s.readonly !== true && s.experimentalEdgeEditing === true
+    };
+  });
+  const portalProps = useMantinePortalProps();
+  return /* @__PURE__ */ jsx(TooltipGroup, { openDelay: 600, closeDelay: 150, children: /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      className: clsx(
+        "react-flow__panel",
+        panel,
+        "likec4-top-left-panel"
+      ),
+      align: "flex-start",
+      onClick: (e) => e.stopPropagation(),
+      gap: "xs",
+      children: [
+        showNavigationButtons && /* @__PURE__ */ jsx(BackwardForwardButtons, {}),
+        /* @__PURE__ */ jsxs(ActionIconGroup, { className: actionIconGroup, orientation: "vertical", children: [
+          enableSearch && /* @__PURE__ */ jsx(Tooltip, { label: "Search (Ctrl+F or ⌘+F)", children: /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              onClick: () => openSpotlight(),
+              children: /* @__PURE__ */ jsx(IconSearch, {})
+            }
+          ) }),
+          showGoToSource && /* @__PURE__ */ jsx(Tooltip, { label: "Open source", ...portalProps, children: /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                store.getState().onOpenSourceView();
+              },
+              children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.5 })
+            }
+          ) }),
+          showChangeAutoLayout && /* @__PURE__ */ jsx(ChangeAutoLayoutButton, { ...portalProps }),
+          showLayoutDriftWarning && /* @__PURE__ */ jsx(LayoutDriftNotification, { ...portalProps }),
+          showManualLayoutTools && /* @__PURE__ */ jsx(ManualLayoutToolsButton, { ...portalProps }),
+          showFitDiagram && /* @__PURE__ */ jsx(Tooltip, { label: viewportChanged ? "Center camera" : "Camera is centered", ...portalProps, children: /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                store.getState().fitDiagram();
+              },
+              children: /* @__PURE__ */ jsx(IconFocusCentered, {})
+            }
+          ) })
+        ] })
+      ]
+    }
+  ) });
+};
+TopLeftPanel.displayName = "TopLeftPanel";
+export {
+  TopLeftPanel
+};

package/dist/ui/top-left/_shared.d.ts

@@ -0,0 +1,7 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { TooltipProps, PolymorphicComponentProps, ActionIconProps } from '@mantine/core';
+export declare const Tooltip: ForwardRefExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & {
+    component?: any;
+    renderRoot?: (props: Record<string, any>) => React.ReactNode;
+}>;
+export declare const ActionIcon: <L = "button">(props: PolymorphicComponentProps<L, ActionIconProps>) => React.ReactElement;

package/dist/ui/top-left/_shared.js

@@ -0,0 +1,22 @@
+import { Tooltip as Tooltip$1, ActionIcon as ActionIcon$1 } from "@mantine/core";
+const Tooltip = Tooltip$1.withProps({
+  color: "dark",
+  fz: "xs",
+  position: "right",
+  openDelay: 600,
+  closeDelay: 120,
+  label: "",
+  children: null,
+  offset: 8
+});
+const ActionIcon = ActionIcon$1.withProps({
+  classNames: {
+    root: "action-icon"
+  },
+  variant: "default",
+  color: "gray"
+});
+export {
+  ActionIcon,
+  Tooltip
+};

package/dist/ui/top-left/styles.css.d.ts

@@ -0,0 +1,8 @@
+export declare const backwardForwardButtons: string;
+export declare const panel: string;
+export declare const actionIconGroup: string;
+export declare const autolayoutIcon: string;
+export declare const autolayoutButton: string;
+export declare const autolayoutIndicator: string;
+export declare const spacingSliderBody: string;
+export declare const spacingSliderThumb: string;

package/dist/ui/top-left/styles.css.js

@@ -0,0 +1,17 @@
+/* empty css                          */
+var backwardForwardButtons = "_1snasyb0";
+var panel = "_1snasyb1";
+var actionIconGroup = "_1snasyb2";
+var autolayoutButton = "_1snasyb4";
+var autolayoutIndicator = "_1snasyb5";
+var spacingSliderBody = "_1snasyb6";
+var spacingSliderThumb = "_1snasyb7";
+export {
+  actionIconGroup,
+  autolayoutButton,
+  autolayoutIndicator,
+  backwardForwardButtons,
+  panel,
+  spacingSliderBody,
+  spacingSliderThumb
+};

package/dist/utils/types.d.ts

@@ -0,0 +1,8 @@
+import { Edge, Node } from '@xyflow/react';
+import { Merge } from 'type-fest';
+export type AddNodeData<T extends Node, Data> = Omit<T, 'data'> & {
+    data: Merge<T['data'], Data>;
+};
+export type AddEdgeData<T extends Edge, Data> = Omit<T, 'data'> & {
+    data: Merge<T['data'], Data>;
+};

package/dist/utils/vector.d.ts

@@ -0,0 +1,24 @@
+export interface Vector {
+    x: number;
+    y: number;
+}
+export declare class VectorImpl implements Vector {
+    x: number;
+    y: number;
+    constructor(x: number, y: number);
+    static create(position: Vector): VectorImpl;
+    static add(a: Vector, b: Vector): Vector;
+    static sub(a: Vector, b: Vector): Vector;
+    static mul(a: Vector, b: number): Vector;
+    static dot(a: Vector, b: Vector): number;
+    static cross(a: Vector, b: Vector): VectorImpl;
+    static setLength(a: Vector, length: number): Vector;
+    add(b: Vector): VectorImpl;
+    sub(b: Vector): VectorImpl;
+    mul(b: number): VectorImpl;
+    dot(b: Vector): number;
+    cross(b: Vector): VectorImpl;
+    abs(): number;
+    setLength(length: number): VectorImpl;
+}
+export declare function vector(source: Vector): VectorImpl;

package/dist/utils/vector.js

@@ -0,0 +1,55 @@
+class VectorImpl {
+  constructor(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+  static create(position) {
+    return new VectorImpl(position.x, position.y);
+  }
+  static add(a, b) {
+    return { x: a.x + b.x, y: a.y + b.y };
+  }
+  static sub(a, b) {
+    return { x: a.x - b.x, y: a.y - b.y };
+  }
+  static mul(a, b) {
+    return { x: a.x * b, y: a.y * b };
+  }
+  static dot(a, b) {
+    return a.x * b.x + a.y * b.y;
+  }
+  static cross(a, b) {
+    return new VectorImpl(a.y * b.x - a.x * b.y, a.x * b.y - a.y * b.x);
+  }
+  static setLength(a, length) {
+    return vector(a).setLength(length);
+  }
+  add(b) {
+    return new VectorImpl(this.x + b.x, this.y + b.y);
+  }
+  sub(b) {
+    return new VectorImpl(this.x - b.x, this.y - b.y);
+  }
+  mul(b) {
+    return new VectorImpl(this.x * b, this.y * b);
+  }
+  dot(b) {
+    return this.x * b.x + this.y * b.y;
+  }
+  cross(b) {
+    return new VectorImpl(this.y * b.x - this.x * b.y, this.x * b.y - this.y * b.x);
+  }
+  abs() {
+    return Math.sqrt(this.x * this.x + this.y * this.y);
+  }
+  setLength(length) {
+    return this.mul(length / this.abs());
+  }
+}
+function vector(source) {
+  return VectorImpl.create(source);
+}
+export {
+  VectorImpl,
+  vector
+};

package/dist/xyflow/EdgeMarkers.d.ts

@@ -0,0 +1,12 @@
+import { SVGProps } from 'react';
+export declare const EdgeMarkers: {
+    Arrow: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
+    Crow: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
+    OArrow: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
+    Open: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
+    Diamond: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
+    ODiamond: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
+    Dot: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
+    ODot: (props: SVGProps<SVGMarkerElement>) => import("react/jsx-runtime").JSX.Element;
+};
+export type EdgeMarkerType = keyof typeof EdgeMarkers;