@likec4/diagram 1.19.2 → 1.20.1

package/dist/likec4diagram/custom/nodes/toolbar/ElementToolbar.js

@@ -0,0 +1,149 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { ElementShapes } from "@likec4/core";
+import { Menu, MenuTarget, Button, MenuDropdown, MenuItem } from "@mantine/core";
+import { IconSelector, IconCheck } from "@tabler/icons-react";
+import { stopPropagation } from "../../../../utils/xyflow.js";
+import { useHandlers, GoToSourceButton, BrowseRelationshipsButton } from "./_shared.js";
+import { ColorButton } from "./ColorButton.js";
+import { Toolbar } from "./Toolbar.js";
+import { useEnabledFeature } from "../../../../context/DiagramFeatures.js";
+function ElementToolbar(props) {
+  const { enableVscode, enableRelationshipBrowser } = useEnabledFeature("RelationshipBrowser", "Vscode");
+  const {
+    data: {
+      shape,
+      modelFqn
+    }
+  } = props;
+  const { elementColor, onColorPreview, onChange } = useHandlers(modelFqn, props);
+  return /* @__PURE__ */ jsxs(
+    Toolbar,
+    {
+      nodeProps: props,
+      title: modelFqn,
+      align: "start",
+      children: [
+        /* @__PURE__ */ jsx(
+          ElementShapeButton,
+          {
+            elementShape: shape,
+            onChange
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ColorButton,
+          {
+            elementColor,
+            onColorPreview,
+            onChange,
+            position: "right-end"
+          }
+        ),
+        enableVscode && /* @__PURE__ */ jsx(GoToSourceButton, { elementId: modelFqn }),
+        enableRelationshipBrowser && /* @__PURE__ */ jsx(BrowseRelationshipsButton, { fqn: modelFqn })
+      ]
+    }
+  );
+}
+function DeploymentElementToolbar(props) {
+  const { enableVscode, enableRelationshipBrowser } = useEnabledFeature("RelationshipBrowser", "Vscode");
+  const {
+    data: {
+      shape,
+      deploymentFqn,
+      modelFqn
+    }
+  } = props;
+  const { elementColor, onColorPreview, onChange } = useHandlers(deploymentFqn, props);
+  return /* @__PURE__ */ jsxs(
+    Toolbar,
+    {
+      nodeProps: props,
+      title: deploymentFqn,
+      align: "start",
+      children: [
+        /* @__PURE__ */ jsx(
+          ElementShapeButton,
+          {
+            elementShape: shape,
+            onChange
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ColorButton,
+          {
+            elementColor,
+            onColorPreview,
+            onChange,
+            position: "right-end"
+          }
+        ),
+        enableVscode && /* @__PURE__ */ jsx(GoToSourceButton, { deploymentId: deploymentFqn }),
+        enableRelationshipBrowser && modelFqn && /* @__PURE__ */ jsx(BrowseRelationshipsButton, { fqn: modelFqn })
+      ]
+    }
+  );
+}
+function ElementShapeButton({
+  elementShape,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs(
+    Menu,
+    {
+      openDelay: 300,
+      closeDelay: 450,
+      floatingStrategy: "fixed",
+      closeOnClickOutside: true,
+      clickOutsideEvents: ["pointerdown", "mousedown", "click"],
+      closeOnEscape: true,
+      closeOnItemClick: false,
+      position: "top-start",
+      offset: 2,
+      styles: {
+        item: {
+          padding: "calc(var(--mantine-spacing-xs) / 1.5) var(--mantine-spacing-xs)"
+        }
+      },
+      withinPortal: false,
+      children: [
+        /* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "light",
+            color: "gray",
+            size: "compact-xs",
+            rightSection: /* @__PURE__ */ jsx(IconSelector, { size: 12 }),
+            children: elementShape
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          MenuDropdown,
+          {
+            onDoubleClick: stopPropagation,
+            onClick: stopPropagation,
+            children: ElementShapes.map((shape) => /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                fz: 12,
+                fw: 500,
+                value: shape,
+                rightSection: elementShape === shape ? /* @__PURE__ */ jsx(IconCheck, { size: 12 }) : void 0,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onChange({ shape });
+                },
+                children: shape
+              },
+              shape
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  DeploymentElementToolbar,
+  ElementToolbar
+};

package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.d.ts

@@ -0,0 +1,8 @@
+import { NodeToolbarProps } from '@xyflow/react';
+import { ReactNode } from 'react';
+import { Base } from '../../../../base';
+export type ToolbarProps = Omit<NodeToolbarProps, 'title'> & {
+    nodeProps: Base.NodeProps;
+    title: ReactNode;
+};
+export declare function Toolbar({ title, children, nodeProps, ...props }: ToolbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Paper, Stack, Box, Text, Group } from "@mantine/core";
+import { useDebouncedValue } from "@mantine/hooks";
+import { NodeToolbar } from "@xyflow/react";
+import clsx from "clsx";
+import { useDiagramContext } from "../../../../hooks/useDiagramContext.js";
+import { stopPropagation } from "../../../../utils/xyflow.js";
+import { toolbarTitle } from "./styles.css.js";
+const useSelectedNodesCount = () => {
+  return useDiagramContext((s) => s.xynodes.filter((x) => x.selected).length);
+};
+function Toolbar({ title, children, nodeProps, ...props }) {
+  const selectedNodesCount = useSelectedNodesCount();
+  const {
+    selected = false,
+    dragging = false,
+    data: {
+      hovered = false
+    }
+  } = nodeProps;
+  const _isToolbarVisible = hovered && selectedNodesCount === 0 || selected && selectedNodesCount === 1;
+  let delay = 150;
+  if (_isToolbarVisible) {
+    if (selected) {
+      delay = 100;
+    } else {
+      delay = 1e3;
+    }
+  } else {
+    if (selectedNodesCount > 0) {
+      delay = 50;
+    }
+  }
+  const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, delay);
+  return /* @__PURE__ */ jsx(
+    NodeToolbar,
+    {
+      isVisible: !dragging && isToolbarVisible,
+      offset: 4,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        Paper,
+        {
+          className: clsx("nodrag", "nopan"),
+          px: 5,
+          pb: 8,
+          pt: 4,
+          radius: "sm",
+          shadow: "xl",
+          onDoubleClickCapture: stopPropagation,
+          onPointerDown: stopPropagation,
+          onClick: stopPropagation,
+          onDoubleClick: stopPropagation,
+          withBorder: true,
+          children: /* @__PURE__ */ jsxs(Stack, { gap: 6, children: [
+            /* @__PURE__ */ jsx(Box, { pl: 2, children: /* @__PURE__ */ jsx(Text, { c: "dimmed", className: toolbarTitle, children: title }) }),
+            /* @__PURE__ */ jsx(Group, { gap: 4, children })
+          ] })
+        }
+      )
+    }
+  );
+}
+export {
+  Toolbar
+};

package/dist/likec4diagram/custom/nodes/toolbar/_shared.d.ts

@@ -0,0 +1,40 @@
+import { Fqn, ThemeColor, ViewChange } from '@likec4/core';
+import { MergeExclusive } from 'type-fest';
+import { NodeProps } from '../../../../base';
+import { Types } from '../../../types';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { TooltipProps } from '@mantine/core';
+export type OnStyleChange = (style: ViewChange.ChangeElementStyle['style']) => void;
+export declare const themedColors: ({
+    key: "primary";
+    value: `#${string}`;
+} | {
+    key: "secondary";
+    value: `#${string}`;
+} | {
+    key: "muted";
+    value: `#${string}`;
+})[];
+export declare const colors: {
+    key: "amber" | "blue" | "gray" | "slate" | "green" | "indigo" | "red" | "sky";
+    value: `#${string}`;
+}[];
+export type ThemeColorKey = typeof themedColors[0]['key'];
+export type ColorKey = typeof colors[0]['key'];
+export declare const Tooltip: ForwardRefExoticComponent< TooltipProps & RefAttributes<HTMLDivElement> & {
+    component?: any;
+    renderRoot?: (props: Record<string, any>) => React.ReactNode;
+}>;
+export declare function useHandlers(target: Fqn, props: NodeProps<Types.NodeData>): {
+    elementColor: "amber" | "blue" | "gray" | "slate" | "green" | "indigo" | "muted" | "primary" | "red" | "secondary" | "sky";
+    onColorPreview: (color: ThemeColor | null) => void;
+    onChange: OnStyleChange;
+};
+export declare function BrowseRelationshipsButton({ fqn }: {
+    fqn: Fqn;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function GoToSourceButton(props: MergeExclusive<{
+    elementId: Fqn;
+}, {
+    deploymentId: Fqn;
+}>): import("react/jsx-runtime").JSX.Element | null;

package/dist/likec4diagram/custom/nodes/toolbar/_shared.js

@@ -0,0 +1,131 @@
+import { jsx } from "react/jsx-runtime";
+import { defaultTheme, invariant } from "@likec4/core";
+import { Tooltip as Tooltip$1, ActionIcon } from "@mantine/core";
+import { useCallbackRef } from "@mantine/hooks";
+import { IconTransform, IconFileSymlink } from "@tabler/icons-react";
+import { useState } from "react";
+import { keys } from "remeda";
+import { useDiagram } from "../../../../hooks/useDiagram.js";
+import { useDiagramEventHandlers } from "../../../../context/DiagramEventHandlers.js";
+const {
+  primary,
+  secondary,
+  muted,
+  ...otherColors
+} = defaultTheme.elements;
+const themedColors = [
+  { key: "primary", value: primary.fill },
+  { key: "secondary", value: secondary.fill },
+  { key: "muted", value: muted.fill }
+];
+const colors = keys(otherColors).map((key) => ({
+  key,
+  value: defaultTheme.elements[key].fill
+}));
+const Tooltip = Tooltip$1.withProps({
+  color: "dark",
+  fz: "xs",
+  openDelay: 400,
+  closeDelay: 150,
+  label: "",
+  children: null,
+  offset: 4,
+  withinPortal: false
+});
+function useHandlers(target, props) {
+  const { onChange: triggerOnChange } = useDiagramEventHandlers();
+  const diagram = useDiagram();
+  const [originalColor, setOriginalColor] = useState(null);
+  const onColorPreview = useCallbackRef((color) => {
+    if (color === null) {
+      invariant(originalColor, "originalColor is null");
+      setOriginalColor(null);
+      diagram.updateNodeData(props.id, {
+        color: originalColor
+      });
+      return;
+    }
+    setOriginalColor((value) => value ?? props.data.color);
+    diagram.updateNodeData(props.id, {
+      color
+    });
+  });
+  const onChange = useCallbackRef((change) => {
+    triggerOnChange == null ? void 0 : triggerOnChange({
+      change: {
+        op: "change-element-style",
+        style: change,
+        targets: [target]
+      }
+    });
+    const { shape, color, ...style } = change;
+    diagram.updateNodeData(props.id, {
+      ...shape && { shape },
+      ...color && { color },
+      style
+    });
+  });
+  return {
+    elementColor: originalColor ?? props.data.color,
+    onColorPreview,
+    onChange
+  };
+}
+function BrowseRelationshipsButton({ fqn }) {
+  const diagram = useDiagram();
+  return /* @__PURE__ */ jsx(Tooltip, { label: "Browse relationships", children: /* @__PURE__ */ jsx(
+    ActionIcon,
+    {
+      size: "sm",
+      variant: "subtle",
+      color: "gray",
+      onClick: (e) => {
+        e.stopPropagation();
+        diagram.openRelationshipsBrowser(fqn);
+      },
+      children: /* @__PURE__ */ jsx(
+        IconTransform,
+        {
+          stroke: 2,
+          style: {
+            width: "72%",
+            height: "72%"
+          }
+        }
+      )
+    }
+  ) });
+}
+function GoToSourceButton(props) {
+  const { onOpenSource } = useDiagramEventHandlers();
+  if (!onOpenSource) return null;
+  return /* @__PURE__ */ jsx(Tooltip, { label: "Open source", children: /* @__PURE__ */ jsx(
+    ActionIcon,
+    {
+      size: "sm",
+      variant: "subtle",
+      color: "gray",
+      onClick: (e) => {
+        e.stopPropagation();
+        if (props.elementId) {
+          onOpenSource == null ? void 0 : onOpenSource({
+            element: props.elementId
+          });
+        } else if (props.deploymentId) {
+          onOpenSource == null ? void 0 : onOpenSource({
+            deployment: props.deploymentId
+          });
+        }
+      },
+      children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.8, style: { width: "70%" } })
+    }
+  ) });
+}
+export {
+  BrowseRelationshipsButton,
+  GoToSourceButton,
+  Tooltip,
+  colors,
+  themedColors,
+  useHandlers
+};

package/dist/likec4diagram/custom/nodes/toolbar/styles.css.d.ts

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

package/dist/likec4diagram/custom/nodes/toolbar/styles.css.js

@@ -0,0 +1,5 @@
+/* empty css                          */
+var toolbarTitle = "_1xwo2e70";
+export {
+  toolbarTitle
+};