@likec4/diagram 1.19.1 → 1.20.0

package/dist/likec4diagram/custom/nodes/CompoundActions.d.ts

@@ -0,0 +1,5 @@
+import { NodeProps } from '../../../base/types';
+import { Types } from '../../types';
+type CompoundActionsProps = NodeProps<Types.CompoundElementNodeData | Types.CompoundDeploymentNodeData>;
+export declare const CompoundActions: (props: CompoundActionsProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/likec4diagram/custom/nodes/CompoundActions.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { useDiagram } from "../../../hooks/useDiagram.js";
+import { useEnabledFeature } from "../../../context/DiagramFeatures.js";
+import { CompoundActionButton } from "../../../base/primitives/compound/CompoundActionButton.js";
+const CompoundActions = (props) => {
+  const { enableNavigateTo } = useEnabledFeature("NavigateTo");
+  const diagram = useDiagram();
+  const { navigateTo } = props.data;
+  if (navigateTo && enableNavigateTo) {
+    return /* @__PURE__ */ jsx(
+      CompoundActionButton,
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          diagram.navigateTo(navigateTo, props.id);
+        },
+        ...props
+      }
+    );
+  }
+  return null;
+};
+export {
+  CompoundActions
+};

package/dist/likec4diagram/custom/nodes/ElementActions.d.ts

@@ -0,0 +1,7 @@
+import { NodeProps } from '../../../base/types';
+import { Types } from '../../types';
+type ElementActionsProps = NodeProps<Types.ElementNodeData>;
+export declare const ElementActions: (props: ElementActionsProps) => import("react/jsx-runtime").JSX.Element;
+type DeploymentElementActionsProps = NodeProps<Types.DeploymentElementNodeData>;
+export declare const DeploymentElementActions: (props: DeploymentElementActionsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/likec4diagram/custom/nodes/ElementActions.js

@@ -0,0 +1,69 @@
+import { jsx } from "react/jsx-runtime";
+import { IconZoomScan, IconTransform } from "@tabler/icons-react";
+import { useDiagram } from "../../../hooks/useDiagram.js";
+import { useEnabledFeature } from "../../../context/DiagramFeatures.js";
+import { ElementActionButtons } from "../../../base/primitives/element/ElementActionButtons.js";
+const ElementActions = (props) => {
+  const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeature("RelationshipBrowser", "NavigateTo");
+  const diagram = useDiagram();
+  const buttons = [];
+  const { navigateTo, modelFqn } = props.data;
+  if (navigateTo && enableNavigateTo) {
+    buttons.push({
+      key: "navigate",
+      icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
+      onClick: (e) => {
+        e.stopPropagation();
+        diagram.navigateTo(navigateTo, props.id);
+      }
+    });
+  }
+  if (enableRelationshipBrowser) {
+    buttons.push({
+      key: "relationships",
+      icon: /* @__PURE__ */ jsx(IconTransform, {}),
+      onClick: (e) => {
+        e.stopPropagation();
+        diagram.openRelationshipsBrowser(modelFqn);
+      }
+    });
+  }
+  return /* @__PURE__ */ jsx(
+    ElementActionButtons,
+    {
+      buttons,
+      ...props
+    }
+  );
+};
+const DeploymentElementActions = (props) => {
+  const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeature("NavigateTo", "RelationshipBrowser");
+  const diagram = useDiagram();
+  const buttons = [];
+  const { navigateTo, modelFqn } = props.data;
+  if (navigateTo && enableNavigateTo) {
+    buttons.push({
+      key: "navigate",
+      icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
+      onClick: (e) => {
+        e.stopPropagation();
+        diagram.navigateTo(navigateTo, props.id);
+      }
+    });
+  }
+  if (enableRelationshipBrowser && !!modelFqn) {
+    buttons.push({
+      key: "relationships",
+      icon: /* @__PURE__ */ jsx(IconTransform, {}),
+      onClick: (e) => {
+        e.stopPropagation();
+        diagram.openRelationshipsBrowser(modelFqn);
+      }
+    });
+  }
+  return /* @__PURE__ */ jsx(ElementActionButtons, { buttons, ...props });
+};
+export {
+  DeploymentElementActions,
+  ElementActions
+};

package/dist/likec4diagram/custom/nodes/nodeTypes.d.ts

@@ -0,0 +1,10 @@
+import { NodeProps } from '../../../base';
+import { Types } from '../../types';
+import { NamedExoticComponent } from 'react';
+export declare const nodeTypes: {
+    element: NamedExoticComponent<NodeProps<Types.ElementNodeData>>;
+    deployment: NamedExoticComponent<NodeProps<Types.DeploymentElementNodeData>>;
+    'compound-element': NamedExoticComponent<NodeProps<Types.CompoundElementNodeData>>;
+    'compound-deployment': NamedExoticComponent<NodeProps<Types.CompoundDeploymentNodeData>>;
+    'view-group': NamedExoticComponent<NodeProps<Types.ViewGroupNodeData>>;
+};

package/dist/likec4diagram/custom/nodes/nodeTypes.js

@@ -0,0 +1,94 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "@likec4/core";
+import { useDiagram } from "../../../hooks/useDiagram.js";
+import { CompoundActions } from "./CompoundActions.js";
+import { ElementActions, DeploymentElementActions } from "./ElementActions.js";
+import { CompoundElementToolbar, CompoundDeploymentToolbar } from "./toolbar/CompoundToolbar.js";
+import { ElementToolbar, DeploymentElementToolbar } from "./toolbar/ElementToolbar.js";
+import { customNode } from "../../../base/primitives/customNode.js";
+import { ElementNodeContainer } from "../../../base/primitives/element/ElementNodeContainer.js";
+import { ElementShape } from "../../../base/primitives/element/ElementShape.js";
+import { ElementTitle } from "../../../base/primitives/element/ElementTitle.js";
+import { IfNotEnabled, IfEnabled, useEnabledFeature } from "../../../context/DiagramFeatures.js";
+import { DefaultHandles } from "../../../base/primitives/NodeHandles.js";
+import { CompoundNodeContainer } from "../../../base/primitives/compound/CompoundNodeContainer.js";
+import { CompoundTitle } from "../../../base/primitives/compound/CompoundTitle.js";
+import { CompoundDetailsButton } from "../../../base/primitives/compound/CompoundDetailsButton.js";
+import { ElementDetailsButton } from "../../../base/primitives/element/ElementDetailsButton.js";
+const ElementDetailsButtonWithHandler = ({ fqn, ...props }) => {
+  const { enableElementDetails } = useEnabledFeature("ElementDetails");
+  const diagram = useDiagram();
+  if (!enableElementDetails) return null;
+  return /* @__PURE__ */ jsx(
+    ElementDetailsButton,
+    {
+      ...props,
+      onClick: (e) => {
+        e.stopPropagation();
+        diagram.openElementDetails(fqn, props.id);
+      }
+    }
+  );
+};
+const nodeTypes = {
+  element: customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
+    /* @__PURE__ */ jsx(ElementShape, { ...props }),
+    /* @__PURE__ */ jsx(ElementTitle, { ...props }),
+    /* @__PURE__ */ jsx(ElementActions, { ...props }),
+    /* @__PURE__ */ jsx(
+      ElementDetailsButtonWithHandler,
+      {
+        fqn: props.data.modelFqn,
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(ElementToolbar, { ...props }) }),
+    /* @__PURE__ */ jsx(DefaultHandles, {})
+  ] })),
+  deployment: customNode((props) => /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
+    /* @__PURE__ */ jsx(ElementShape, { ...props }),
+    /* @__PURE__ */ jsx(ElementTitle, { ...props }),
+    /* @__PURE__ */ jsx(DeploymentElementActions, { ...props }),
+    !!props.data.modelFqn && /* @__PURE__ */ jsx(
+      ElementDetailsButtonWithHandler,
+      {
+        fqn: props.data.modelFqn,
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(DeploymentElementToolbar, { ...props }) }),
+    /* @__PURE__ */ jsx(DefaultHandles, {})
+  ] })),
+  "compound-element": customNode((props) => {
+    const diagram = useDiagram();
+    return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
+      /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+      /* @__PURE__ */ jsx(CompoundActions, { ...props }),
+      /* @__PURE__ */ jsx(IfEnabled, { feature: "ElementDetails", children: /* @__PURE__ */ jsx(
+        CompoundDetailsButton,
+        {
+          ...props,
+          onClick: (e) => {
+            e.stopPropagation();
+            diagram.openElementDetails(props.data.modelFqn, props.id);
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(CompoundElementToolbar, { ...props }) }),
+      /* @__PURE__ */ jsx(DefaultHandles, {})
+    ] });
+  }),
+  "compound-deployment": customNode((props) => /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
+    /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+    /* @__PURE__ */ jsx(CompoundActions, { ...props }),
+    /* @__PURE__ */ jsx(IfNotEnabled, { feature: "ReadOnly", children: /* @__PURE__ */ jsx(CompoundDeploymentToolbar, { ...props }) }),
+    /* @__PURE__ */ jsx(DefaultHandles, {})
+  ] })),
+  "view-group": customNode((props) => /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
+    /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+    /* @__PURE__ */ jsx(DefaultHandles, {})
+  ] }))
+};
+export {
+  nodeTypes
+};

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

@@ -0,0 +1,21 @@
+import { ThemeColor } from '@likec4/core';
+import { PopoverProps } from '@mantine/core';
+import { OnStyleChange } from './_shared';
+type ColorButtonProps = Omit<PopoverProps, 'onChange'> & {
+    elementColor: ThemeColor;
+    elementOpacity?: number | undefined;
+    isOpacityEditable?: boolean;
+    onColorPreview: (color: ThemeColor | null) => void;
+    onChange: OnStyleChange;
+};
+export declare function ColorButton({ elementColor, elementOpacity, onColorPreview, isOpacityEditable, onChange, ...props }: ColorButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function ColorSwatches({ elementColor, onColorPreview, onChange, }: {
+    elementColor: ThemeColor;
+    onColorPreview: (color: ThemeColor | null) => void;
+    onChange: (color: ThemeColor) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function OpacityOption({ elementOpacity, onOpacityChange, }: {
+    elementOpacity: number | undefined;
+    onOpacityChange: (opacity: number) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,159 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { defaultTheme } from "@likec4/core";
+import { Popover, PopoverTarget, Button, ColorSwatch, PopoverDropdown, Space, Divider, Stack, TooltipGroup, Flex, Tooltip, CheckIcon, rem, Slider } from "@mantine/core";
+import { useUpdateEffect } from "@react-hookz/web";
+import { useState } from "react";
+import { themedColors, colors } from "./_shared.js";
+function ColorButton({
+  elementColor,
+  elementOpacity,
+  onColorPreview,
+  isOpacityEditable = false,
+  onChange,
+  ...props
+}) {
+  var _a;
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      clickOutsideEvents: ["pointerdown", "mousedown", "click"],
+      position: "right-end",
+      offset: 2,
+      withinPortal: false,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsx(Button, { variant: "subtle", color: "gray", size: "compact-xs", px: 3, children: /* @__PURE__ */ jsx(
+          ColorSwatch,
+          {
+            color: (_a = defaultTheme.elements[elementColor]) == null ? void 0 : _a.fill,
+            size: 14,
+            withShadow: true,
+            style: { color: "#fff", cursor: "pointer" }
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxs(PopoverDropdown, { p: "xs", children: [
+          /* @__PURE__ */ jsx(
+            ColorSwatches,
+            {
+              elementColor,
+              onColorPreview,
+              onChange: (color) => onChange({ color })
+            }
+          ),
+          isOpacityEditable && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Space, { h: "xs" }),
+            /* @__PURE__ */ jsx(Divider, { label: "opacity", labelPosition: "left" }),
+            /* @__PURE__ */ jsx(Space, { h: "xs" }),
+            /* @__PURE__ */ jsx(
+              OpacityOption,
+              {
+                elementOpacity,
+                onOpacityChange: (opacity) => {
+                  onChange({ opacity });
+                }
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function ColorSwatches({
+  elementColor,
+  onColorPreview,
+  onChange
+}) {
+  const changeColor = (color) => (e) => {
+    e.stopPropagation();
+    onColorPreview(null);
+    if (elementColor === color) {
+      return;
+    }
+    onChange(color);
+  };
+  return /* @__PURE__ */ jsx(Stack, { gap: 2, onMouseLeave: () => onColorPreview(null), children: /* @__PURE__ */ jsxs(TooltipGroup, { openDelay: 1e3, closeDelay: 300, children: [
+    /* @__PURE__ */ jsx(Flex, { maw: 120, gap: "6", justify: "flex-start", align: "flex-start", direction: "row", wrap: "wrap", children: themedColors.map(({ key, value }) => /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        label: key,
+        fz: "xs",
+        color: "dark",
+        offset: 2,
+        withinPortal: false,
+        transitionProps: { duration: 140, transition: "slide-up" },
+        children: /* @__PURE__ */ jsx(
+          ColorSwatch,
+          {
+            color: value,
+            size: 18,
+            withShadow: true,
+            onMouseEnter: () => onColorPreview(key),
+            onClick: changeColor(key),
+            style: { color: "#fff", cursor: "pointer" },
+            children: elementColor === key && /* @__PURE__ */ jsx(CheckIcon, { style: { width: rem(10), height: rem(10) } })
+          }
+        )
+      },
+      key
+    )) }),
+    /* @__PURE__ */ jsx(
+      Flex,
+      {
+        mt: "sm",
+        maw: 110,
+        gap: "6",
+        justify: "flex-start",
+        align: "flex-start",
+        direction: "row",
+        wrap: "wrap",
+        children: colors.map(({ key, value }) => /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            label: key,
+            fz: "xs",
+            color: "dark",
+            offset: 2,
+            transitionProps: { duration: 140, transition: "slide-up" },
+            children: /* @__PURE__ */ jsx(
+              ColorSwatch,
+              {
+                color: value,
+                size: 18,
+                onMouseEnter: () => onColorPreview(key),
+                onClick: changeColor(key),
+                style: { color: "#fff", cursor: "pointer" },
+                children: elementColor === key && /* @__PURE__ */ jsx(CheckIcon, { style: { width: rem(10), height: rem(10) } })
+              }
+            )
+          },
+          key
+        ))
+      }
+    )
+  ] }) });
+}
+function OpacityOption({
+  elementOpacity = 100,
+  onOpacityChange
+}) {
+  const [value, setValue] = useState(elementOpacity);
+  useUpdateEffect(() => {
+    setValue(elementOpacity);
+  }, [elementOpacity]);
+  return /* @__PURE__ */ jsx(
+    Slider,
+    {
+      size: "sm",
+      color: "dark",
+      value,
+      onChange: setValue,
+      onChangeEnd: onOpacityChange
+    }
+  );
+}
+export {
+  ColorButton,
+  ColorSwatches,
+  OpacityOption
+};

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

@@ -0,0 +1,7 @@
+import { NodeProps } from '../../../../base/types';
+import { Types } from '../../../types';
+type CompoundElementToolbarProps = NodeProps<Types.CompoundElementNodeData>;
+export declare function CompoundElementToolbar(props: CompoundElementToolbarProps): import("react/jsx-runtime").JSX.Element;
+type CompoundDeploymentToolbarProps = NodeProps<Types.CompoundDeploymentNodeData>;
+export declare function CompoundDeploymentToolbar(props: CompoundDeploymentToolbarProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,128 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "@likec4/core";
+import { Box, SegmentedControl } from "@mantine/core";
+import { useState, useEffect } from "react";
+import { useHandlers, GoToSourceButton, BrowseRelationshipsButton } from "./_shared.js";
+import { ColorButton } from "./ColorButton.js";
+import { Toolbar } from "./Toolbar.js";
+import { useEnabledFeature } from "../../../../context/DiagramFeatures.js";
+function CompoundElementToolbar(props) {
+  const { enableVscode, enableRelationshipBrowser } = useEnabledFeature("RelationshipBrowser", "Vscode");
+  const {
+    data: {
+      style,
+      modelFqn
+    }
+  } = props;
+  const { elementColor, onColorPreview, onChange } = useHandlers(modelFqn, props);
+  return /* @__PURE__ */ jsxs(
+    Toolbar,
+    {
+      nodeProps: props,
+      title: modelFqn,
+      align: "start",
+      children: [
+        /* @__PURE__ */ jsx(
+          ColorButton,
+          {
+            elementColor,
+            onColorPreview,
+            isOpacityEditable: true,
+            elementOpacity: style == null ? void 0 : style.opacity,
+            onChange,
+            position: "left-start"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          BorderStyleOption,
+          {
+            elementBorderStyle: style == null ? void 0 : style.border,
+            onChange
+          }
+        ),
+        enableVscode && /* @__PURE__ */ jsx(GoToSourceButton, { elementId: modelFqn }),
+        enableRelationshipBrowser && /* @__PURE__ */ jsx(BrowseRelationshipsButton, { fqn: modelFqn })
+      ]
+    }
+  );
+}
+function CompoundDeploymentToolbar(props) {
+  const { enableVscode, enableRelationshipBrowser } = useEnabledFeature("RelationshipBrowser", "Vscode");
+  const {
+    data: {
+      deploymentFqn,
+      style,
+      modelFqn
+    }
+  } = props;
+  const { elementColor, onColorPreview, onChange } = useHandlers(deploymentFqn, props);
+  return /* @__PURE__ */ jsxs(
+    Toolbar,
+    {
+      nodeProps: props,
+      title: deploymentFqn,
+      align: "start",
+      children: [
+        /* @__PURE__ */ jsx(
+          ColorButton,
+          {
+            elementColor,
+            onColorPreview,
+            isOpacityEditable: true,
+            elementOpacity: style == null ? void 0 : style.opacity,
+            onChange,
+            position: "left-start"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          BorderStyleOption,
+          {
+            elementBorderStyle: style == null ? void 0 : style.border,
+            onChange
+          }
+        ),
+        enableVscode && /* @__PURE__ */ jsx(GoToSourceButton, { deploymentId: deploymentFqn }),
+        enableRelationshipBrowser && modelFqn && /* @__PURE__ */ jsx(BrowseRelationshipsButton, { fqn: modelFqn })
+      ]
+    }
+  );
+}
+function BorderStyleOption({
+  elementBorderStyle = "dashed",
+  onChange
+}) {
+  const [value, setValue] = useState(elementBorderStyle);
+  useEffect(() => {
+    setValue(elementBorderStyle);
+  }, [elementBorderStyle]);
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+    SegmentedControl,
+    {
+      size: "xs",
+      fullWidth: true,
+      withItemsBorders: false,
+      value,
+      onChange: (v) => {
+        const border = v;
+        setValue(border);
+        onChange({ border });
+      },
+      styles: {
+        label: {
+          paddingTop: 2,
+          paddingBottom: 2
+        }
+      },
+      data: [
+        { label: "Solid", value: "solid" },
+        { label: "Dashed", value: "dashed" },
+        { label: "Dotted", value: "dotted" },
+        { label: "None", value: "none" }
+      ]
+    }
+  ) });
+}
+export {
+  CompoundDeploymentToolbar,
+  CompoundElementToolbar
+};

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

@@ -0,0 +1,7 @@
+import { NodeProps } from '../../../../base/types';
+import { Types } from '../../../types';
+type ElementToolbarProps = NodeProps<Types.ElementNodeData>;
+export declare function ElementToolbar(props: ElementToolbarProps): import("react/jsx-runtime").JSX.Element;
+type DeploymentElementToolbarProps = NodeProps<Types.DeploymentElementNodeData>;
+export declare function DeploymentElementToolbar(props: DeploymentElementToolbarProps): import("react/jsx-runtime").JSX.Element;
+export {};