@likec4/diagram 1.55.0 → 1.56.0

package/dist/navigationpanel/editorpanel/ChangeAutoLayoutButton.js

@@ -1,158 +1,186 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Popover, PopoverTarget, PopoverDropdown, Box, FloatingIndicator, Text, Flex, UnstyledButton } from '@mantine/core';
-import { useHover, useUncontrolled, clampUseMovePosition, useMove, useMergedRef } from '@mantine/hooks';
-import { useDebouncedCallback } from '@react-hookz/web';
-import { useState, forwardRef } from 'react';
-import { useDiagramContext } from '../../hooks/useDiagram.js';
-import { PanelActionIcon } from '../_common.js';
-import { Tooltip } from './_common.js';
-import { autolayoutIndicator, autolayoutButton, spacingSliderBody, spacingSliderThumb } from './styles.js';
-import { useDiagram } from '../../hooks/safeContext.js';
-import IconLayoutDashboard from '../../node_modules/.pnpm/@tabler_icons-react@3.40.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconLayoutDashboard.js';
-
-const selector = (state) => ({
-  viewId: state.view.id,
-  isManualLayout: state.view._layout === "manual",
-  autoLayout: state.view.autoLayout
+import "../../_virtual/_rolldown/runtime.js";
+import { useDiagram } from "../../hooks/safeContext.js";
+import { useDiagramContext } from "../../hooks/useDiagram.js";
+import { PanelActionIcon } from "../_common.js";
+import { Tooltip as Tooltip$1 } from "./_common.js";
+import { autolayoutButton, autolayoutIndicator, spacingSliderBody, spacingSliderThumb } from "./styles.js";
+import { IconLayoutDashboard } from "@tabler/icons-react";
+import { forwardRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDebouncedCallback } from "@react-hookz/web";
+import { Box, Flex, FloatingIndicator, Popover, PopoverDropdown, PopoverTarget, Text, UnstyledButton } from "@mantine/core";
+import { clampUseMovePosition, useHover, useMergedRef, useMove, useUncontrolled } from "@mantine/hooks";
+//#region src/navigationpanel/editorpanel/ChangeAutoLayoutButton.tsx
+var selector = (state) => ({
+	viewId: state.view.id,
+	isManualLayout: state.view._layout === "manual",
+	autoLayout: state.view.autoLayout
 });
-const ChangeAutoLayoutButton = () => {
-  const diagram = useDiagram();
-  const [rootRef, setRootRef] = useState(null);
-  const [controlsRefs, setControlsRefs] = useState({});
-  const {
-    autoLayout,
-    viewId,
-    isManualLayout
-  } = useDiagramContext(selector);
-  const { ref, hovered: isSpacingHovered } = useHover();
-  const setControlRef = (name) => (node) => {
-    controlsRefs[name] = node;
-    setControlsRefs(controlsRefs);
-  };
-  const setAutoLayout = (direction) => (event) => {
-    event.stopPropagation();
-    diagram.fitDiagram();
-    diagram.triggerChange({
-      op: "change-autolayout",
-      layout: {
-        ...autoLayout,
-        direction
-      }
-    });
-  };
-  const setSpacing = (nodeSep, rankSep) => {
-    diagram.fitDiagram();
-    diagram.triggerChange({
-      op: "change-autolayout",
-      layout: {
-        ...autoLayout,
-        nodeSep,
-        rankSep
-      }
-    });
-  };
-  if (isManualLayout) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(
-    Popover,
-    {
-      position: "right-start",
-      clickOutsideEvents: [
-        "pointerdown"
-      ],
-      radius: "xs",
-      shadow: "lg",
-      offset: {
-        mainAxis: 10
-      },
-      children: [
-        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Tooltip, { label: "Change Auto Layout", children: /* @__PURE__ */ jsx(PanelActionIcon, { children: /* @__PURE__ */ jsx(IconLayoutDashboard, {}) }) }) }),
-        /* @__PURE__ */ jsx(PopoverDropdown, { className: "likec4-top-left-panel", p: 8, pt: 6, opacity: isSpacingHovered ? 0.6 : 1, children: /* @__PURE__ */ jsxs(Box, { pos: "relative", ref: setRootRef, children: [
-          /* @__PURE__ */ jsx(
-            FloatingIndicator,
-            {
-              target: controlsRefs[autoLayout.direction],
-              parent: rootRef,
-              className: autolayoutIndicator
-            }
-          ),
-          /* @__PURE__ */ jsx(Box, { mb: 10, children: /* @__PURE__ */ jsx(Text, { inline: true, fz: "xs", c: "dimmed", fw: 500, children: "Auto layout:" }) }),
-          /* @__PURE__ */ jsxs(Flex, { gap: 2, wrap: "wrap", justify: "stretch", maw: 160, children: [
-            /* @__PURE__ */ jsx(UnstyledButton, { className: autolayoutButton, ref: setControlRef("TB"), onClick: setAutoLayout("TB"), children: "Top-Bottom" }),
-            /* @__PURE__ */ jsx(UnstyledButton, { className: autolayoutButton, ref: setControlRef("BT"), onClick: setAutoLayout("BT"), children: "Bottom-Top" }),
-            /* @__PURE__ */ jsx(UnstyledButton, { className: autolayoutButton, ref: setControlRef("LR"), onClick: setAutoLayout("LR"), children: "Left-Right" }),
-            /* @__PURE__ */ jsx(UnstyledButton, { className: autolayoutButton, ref: setControlRef("RL"), onClick: setAutoLayout("RL"), children: "Right-Left" })
-          ] }),
-          /* @__PURE__ */ jsx(Box, { my: 10, children: /* @__PURE__ */ jsx(Text, { inline: true, fz: "xs", c: "dimmed", fw: 500, children: "Spacing:" }) }),
-          /* @__PURE__ */ jsx(
-            SpacingSliders,
-            {
-              ref,
-              isVertical: autoLayout.direction === "TB" || autoLayout.direction === "BT",
-              nodeSep: autoLayout.nodeSep,
-              rankSep: autoLayout.rankSep,
-              onChange: setSpacing
-            },
-            viewId
-          )
-        ] }) })
-      ]
-    }
-  );
+var ChangeAutoLayoutButton = () => {
+	const diagram = useDiagram();
+	const [rootRef, setRootRef] = useState(null);
+	const [controlsRefs, setControlsRefs] = useState({});
+	const { autoLayout, viewId, isManualLayout } = useDiagramContext(selector);
+	const { ref, hovered: isSpacingHovered } = useHover();
+	const setControlRef = (name) => (node) => {
+		controlsRefs[name] = node;
+		setControlsRefs(controlsRefs);
+	};
+	const setAutoLayout = (direction) => (event) => {
+		event.stopPropagation();
+		diagram.fitDiagram();
+		diagram.triggerChange({
+			op: "change-autolayout",
+			layout: {
+				...autoLayout,
+				direction
+			}
+		});
+	};
+	const setSpacing = (nodeSep, rankSep) => {
+		diagram.fitDiagram();
+		diagram.triggerChange({
+			op: "change-autolayout",
+			layout: {
+				...autoLayout,
+				nodeSep,
+				rankSep
+			}
+		});
+	};
+	if (isManualLayout) return null;
+	return /* @__PURE__ */ jsxs(Popover, {
+		position: "right-start",
+		clickOutsideEvents: ["pointerdown"],
+		radius: "xs",
+		shadow: "lg",
+		offset: { mainAxis: 10 },
+		children: [/* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Tooltip$1, {
+			label: "Change Auto Layout",
+			children: /* @__PURE__ */ jsx(PanelActionIcon, { children: /* @__PURE__ */ jsx(IconLayoutDashboard, {}) })
+		}) }), /* @__PURE__ */ jsx(PopoverDropdown, {
+			className: "likec4-top-left-panel",
+			p: 8,
+			pt: 6,
+			opacity: isSpacingHovered ? .6 : 1,
+			children: /* @__PURE__ */ jsxs(Box, {
+				pos: "relative",
+				ref: setRootRef,
+				children: [
+					/* @__PURE__ */ jsx(FloatingIndicator, {
+						target: controlsRefs[autoLayout.direction],
+						parent: rootRef,
+						className: autolayoutIndicator
+					}),
+					/* @__PURE__ */ jsx(Box, {
+						mb: 10,
+						children: /* @__PURE__ */ jsx(Text, {
+							inline: true,
+							fz: "xs",
+							c: "dimmed",
+							fw: 500,
+							children: "Auto layout:"
+						})
+					}),
+					/* @__PURE__ */ jsxs(Flex, {
+						gap: 2,
+						wrap: "wrap",
+						justify: "stretch",
+						maw: 160,
+						children: [
+							/* @__PURE__ */ jsx(UnstyledButton, {
+								className: autolayoutButton,
+								ref: setControlRef("TB"),
+								onClick: setAutoLayout("TB"),
+								children: "Top-Bottom"
+							}),
+							/* @__PURE__ */ jsx(UnstyledButton, {
+								className: autolayoutButton,
+								ref: setControlRef("BT"),
+								onClick: setAutoLayout("BT"),
+								children: "Bottom-Top"
+							}),
+							/* @__PURE__ */ jsx(UnstyledButton, {
+								className: autolayoutButton,
+								ref: setControlRef("LR"),
+								onClick: setAutoLayout("LR"),
+								children: "Left-Right"
+							}),
+							/* @__PURE__ */ jsx(UnstyledButton, {
+								className: autolayoutButton,
+								ref: setControlRef("RL"),
+								onClick: setAutoLayout("RL"),
+								children: "Right-Left"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(Box, {
+						my: 10,
+						children: /* @__PURE__ */ jsx(Text, {
+							inline: true,
+							fz: "xs",
+							c: "dimmed",
+							fw: 500,
+							children: "Spacing:"
+						})
+					}),
+					/* @__PURE__ */ jsx(SpacingSliders, {
+						ref,
+						isVertical: autoLayout.direction === "TB" || autoLayout.direction === "BT",
+						nodeSep: autoLayout.nodeSep,
+						rankSep: autoLayout.rankSep,
+						onChange: setSpacing
+					}, viewId)
+				]
+			})
+		})]
+	});
 };
-const MAX_SPACING = 400;
-const SpacingSliders = forwardRef(({
-  isVertical,
-  nodeSep,
-  rankSep,
-  onChange
-}, _ref) => {
-  if (!isVertical) {
-    [nodeSep, rankSep] = [rankSep, nodeSep];
-  }
-  const propagateChange = useDebouncedCallback(
-    ({ x, y }) => {
-      if (!isVertical) {
-        [x, y] = [y, x];
-      }
-      onChange(Math.round(x * MAX_SPACING), Math.round(y * MAX_SPACING));
-    },
-    [onChange, isVertical],
-    250,
-    2e3
-  );
-  const [value, setValue] = useUncontrolled({
-    defaultValue: clampUseMovePosition({
-      x: (nodeSep ?? 100) / MAX_SPACING,
-      y: (rankSep ?? 120) / MAX_SPACING
-    }),
-    onChange: propagateChange
-  });
-  const { ref } = useMove(setValue);
-  let nodeSepValue = Math.round(value.x * MAX_SPACING);
-  let rankSepValue = Math.round(value.y * MAX_SPACING);
-  if (!isVertical) {
-    [nodeSepValue, rankSepValue] = [rankSepValue, nodeSepValue];
-  }
-  const mergedRef = useMergedRef(ref, _ref);
-  return /* @__PURE__ */ jsxs(Box, { ref: mergedRef, className: spacingSliderBody, pt: "100%", children: [
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        className: spacingSliderThumb,
-        style: {
-          left: `${value.x * 100}%`,
-          top: `${value.y * 100}%`
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(Box, { pos: "absolute", left: 2, bottom: 2, children: /* @__PURE__ */ jsxs(Text, { component: "div", fz: 8, c: "dimmed", fw: 500, children: [
-      rankSepValue,
-      ", ",
-      nodeSepValue
-    ] }) })
-  ] });
+var MAX_SPACING = 400;
+var SpacingSliders = forwardRef(({ isVertical, nodeSep, rankSep, onChange }, _ref) => {
+	if (!isVertical) [nodeSep, rankSep] = [rankSep, nodeSep];
+	const propagateChange = useDebouncedCallback(({ x, y }) => {
+		if (!isVertical) [x, y] = [y, x];
+		onChange(Math.round(x * MAX_SPACING), Math.round(y * MAX_SPACING));
+	}, [onChange, isVertical], 250, 2e3);
+	const [value, setValue] = useUncontrolled({
+		defaultValue: clampUseMovePosition({
+			x: (nodeSep ?? 100) / MAX_SPACING,
+			y: (rankSep ?? 120) / MAX_SPACING
+		}),
+		onChange: propagateChange
+	});
+	const { ref } = useMove(setValue);
+	let nodeSepValue = Math.round(value.x * MAX_SPACING);
+	let rankSepValue = Math.round(value.y * MAX_SPACING);
+	if (!isVertical) [nodeSepValue, rankSepValue] = [rankSepValue, nodeSepValue];
+	return /* @__PURE__ */ jsxs(Box, {
+		ref: useMergedRef(ref, _ref),
+		className: spacingSliderBody,
+		pt: "100%",
+		children: [/* @__PURE__ */ jsx(Box, {
+			className: spacingSliderThumb,
+			style: {
+				left: `${value.x * 100}%`,
+				top: `${value.y * 100}%`
+			}
+		}), /* @__PURE__ */ jsx(Box, {
+			pos: "absolute",
+			left: 2,
+			bottom: 2,
+			children: /* @__PURE__ */ jsxs(Text, {
+				component: "div",
+				fz: 8,
+				c: "dimmed",
+				fw: 500,
+				children: [
+					rankSepValue,
+					", ",
+					nodeSepValue
+				]
+			})
+		})]
+	});
 });
-
+//#endregion
 export { ChangeAutoLayoutButton };

package/dist/navigationpanel/editorpanel/EditorPanel.js

@@ -1,48 +1,50 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { vstack } from '@likec4/styles/patterns';
-import { TooltipGroup } from '@mantine/core';
-import { AnimatePresence } from 'motion/react';
-import * as m from 'motion/react-m';
-import { CenterCamera } from './CenterCamera.js';
-import { ChangeAutoLayoutButton } from './ChangeAutoLayoutButton.js';
-import { ManualLayoutToolsButton } from './ManualLayoutToolsButton.js';
-import { ToggleReadonly } from './ToggleReadonly.js';
-import { useEnabledFeatures } from '../../context/DiagramFeatures.js';
-
+import "../../_virtual/_rolldown/runtime.js";
+import { useEnabledFeatures } from "../../context/DiagramFeatures.js";
+import { CenterCamera } from "./CenterCamera.js";
+import { ChangeAutoLayoutButton } from "./ChangeAutoLayoutButton.js";
+import { ManualLayoutToolsButton } from "./ManualLayoutToolsButton.js";
+import { ToggleReadonly } from "./ToggleReadonly.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TooltipGroup } from "@mantine/core";
+import { AnimatePresence } from "motion/react";
+import { vstack } from "@likec4/styles/patterns";
+import * as m$1 from "motion/react-m";
+//#region src/navigationpanel/editorpanel/EditorPanel.tsx
 function EditorPanel() {
-  const { enableReadOnly } = useEnabledFeatures();
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: !enableReadOnly && /* @__PURE__ */ jsx(
-    m.div,
-    {
-      layout: "position",
-      className: vstack({
-        gap: "xs",
-        layerStyle: "likec4.panel",
-        position: "relative",
-        cursor: "pointer",
-        padding: "xxs",
-        pointerEvents: "all"
-      }),
-      initial: {
-        opacity: 0,
-        translateX: -20
-      },
-      animate: {
-        opacity: 1,
-        translateX: 0
-      },
-      exit: {
-        opacity: 0,
-        translateX: -20
-      },
-      children: /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 600, closeDelay: 120, children: [
-        /* @__PURE__ */ jsx(ChangeAutoLayoutButton, {}),
-        /* @__PURE__ */ jsx(ManualLayoutToolsButton, {}),
-        /* @__PURE__ */ jsx(CenterCamera, {}),
-        /* @__PURE__ */ jsx(ToggleReadonly, {})
-      ] })
-    }
-  ) });
+	const { enableReadOnly } = useEnabledFeatures();
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: !enableReadOnly && /* @__PURE__ */ jsx(m$1.div, {
+		layout: "position",
+		className: vstack({
+			gap: "xs",
+			layerStyle: "likec4.panel",
+			position: "relative",
+			cursor: "pointer",
+			padding: "xxs",
+			pointerEvents: "all"
+		}),
+		initial: {
+			opacity: 0,
+			translateX: -20
+		},
+		animate: {
+			opacity: 1,
+			translateX: 0
+		},
+		exit: {
+			opacity: 0,
+			translateX: -20
+		},
+		children: /* @__PURE__ */ jsxs(TooltipGroup, {
+			openDelay: 600,
+			closeDelay: 120,
+			children: [
+				/* @__PURE__ */ jsx(ChangeAutoLayoutButton, {}),
+				/* @__PURE__ */ jsx(ManualLayoutToolsButton, {}),
+				/* @__PURE__ */ jsx(CenterCamera, {}),
+				/* @__PURE__ */ jsx(ToggleReadonly, {})
+			]
+		})
+	}) });
 }
-
+//#endregion
 export { EditorPanel };