@likec4/diagram 1.18.0 → 1.19.0

package/dist/xyflow/nodes/shared/Toolbar.js

@@ -0,0 +1,436 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { defaultTheme, DiagramNode, ElementShapes } from "@likec4/core";
+import { keys, Tooltip as Tooltip$1, Menu, MenuTarget, Button, MenuDropdown, MenuItem, ActionIcon, Popover, PopoverTarget, ColorSwatch, PopoverDropdown, Space, Divider, Stack, TooltipGroup, Flex, CheckIcon, rem, Slider, Paper, Box, Text, Group, SegmentedControl } from "@mantine/core";
+import { IconSelector, IconCheck, IconFileSymlink, IconTransform } from "@tabler/icons-react";
+import { NodeToolbar } from "@xyflow/react";
+import clsx from "clsx";
+import { useState, useEffect } from "react";
+import { stopPropagation } from "../../utils.js";
+import { useDiagramStoreApi, useDiagramState } from "../../../hooks/useDiagramState.js";
+import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
+import { useUpdateEffect } from "../../../hooks/useUpdateEffect.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
+});
+function CompoundToolbar({
+  element,
+  onColorPreview,
+  ...props
+}) {
+  var _a;
+  const modelRef = DiagramNode.modelRef(element);
+  const deploymentRef = DiagramNode.deploymentRef(element);
+  const targets = [element.id];
+  const diagramApi = useDiagramStoreApi();
+  const {
+    hasGoToSource,
+    enableRelationshipBrowser
+  } = useDiagramState((s) => ({
+    hasGoToSource: !!s.onOpenSource,
+    enableRelationshipBrowser: s.enableRelationshipBrowser
+  }));
+  const onChange = (style) => {
+    diagramApi.getState().triggerChangeElementStyle({
+      op: "change-element-style",
+      style,
+      targets
+    });
+  };
+  return /* @__PURE__ */ jsxs(Toolbar, { element, ...props, children: [
+    /* @__PURE__ */ jsx(
+      ColorButton,
+      {
+        element,
+        isOpacityEditable: true,
+        onColorPreview,
+        onChange,
+        position: "left-start"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      BorderStyleOption,
+      {
+        elementBorderStyle: (_a = element.style) == null ? void 0 : _a.border,
+        onChange
+      }
+    ),
+    hasGoToSource && modelRef && /* @__PURE__ */ jsx(GoToSourceButton, { elementId: modelRef }),
+    hasGoToSource && !modelRef && deploymentRef && /* @__PURE__ */ jsx(GoToSourceButton, { deploymentId: deploymentRef }),
+    enableRelationshipBrowser && !!modelRef && /* @__PURE__ */ jsx(BrowseRelationshipsButton, { elementId: modelRef })
+  ] });
+}
+function Toolbar({ element, children, ...props }) {
+  return /* @__PURE__ */ jsx(NodeToolbar, { ...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: 4, children: [
+        /* @__PURE__ */ jsx(Box, { pl: 2, children: /* @__PURE__ */ jsx(Text, { c: "dimmed", fz: 10, fw: 500, children: element.id }) }),
+        /* @__PURE__ */ jsx(Group, { gap: 3, children })
+      ] })
+    }
+  ) });
+}
+function ElementToolbar({
+  element,
+  onColorPreview,
+  ...props
+}) {
+  const modelRef = DiagramNode.modelRef(element);
+  const deploymentRef = DiagramNode.deploymentRef(element);
+  const targets = [element.id];
+  const diagramApi = useDiagramStoreApi();
+  const {
+    hasGoToSource,
+    enableRelationshipBrowser
+  } = useDiagramState((s) => ({
+    hasGoToSource: !!s.onOpenSource,
+    enableRelationshipBrowser: s.enableRelationshipBrowser
+  }));
+  const portalProps = useMantinePortalProps();
+  const onChange = (style) => {
+    diagramApi.getState().triggerChangeElementStyle({
+      op: "change-element-style",
+      style,
+      targets
+    });
+  };
+  return /* @__PURE__ */ jsxs(Toolbar, { element, ...props, children: [
+    /* @__PURE__ */ jsxs(
+      Menu,
+      {
+        openDelay: 300,
+        closeDelay: 450,
+        floatingStrategy: "fixed",
+        closeOnClickOutside: true,
+        clickOutsideEvents: ["pointerdown", "mousedown", "click"],
+        closeOnEscape: true,
+        closeOnItemClick: false,
+        position: "bottom-start",
+        offset: 2,
+        styles: {
+          item: {
+            padding: "calc(var(--mantine-spacing-xs) / 1.5) var(--mantine-spacing-xs)"
+          }
+        },
+        ...portalProps,
+        children: [
+          /* @__PURE__ */ jsx(MenuTarget, { children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "light",
+              color: "gray",
+              size: "compact-xs",
+              rightSection: /* @__PURE__ */ jsx(IconSelector, { size: 12 }),
+              children: element.shape
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            MenuDropdown,
+            {
+              onDoubleClick: stopPropagation,
+              onClick: stopPropagation,
+              children: ElementShapes.map((shape) => /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  fz: 12,
+                  fw: 500,
+                  value: shape,
+                  rightSection: element.shape === shape ? /* @__PURE__ */ jsx(IconCheck, { size: 12 }) : void 0,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onChange({ shape });
+                  },
+                  children: shape
+                },
+                shape
+              ))
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ColorButton,
+      {
+        element,
+        onColorPreview,
+        onChange,
+        position: "right-end"
+      }
+    ),
+    hasGoToSource && modelRef && /* @__PURE__ */ jsx(GoToSourceButton, { elementId: modelRef }),
+    hasGoToSource && !modelRef && deploymentRef && /* @__PURE__ */ jsx(GoToSourceButton, { deploymentId: deploymentRef }),
+    enableRelationshipBrowser && !!modelRef && /* @__PURE__ */ jsx(BrowseRelationshipsButton, { elementId: modelRef })
+  ] });
+}
+function GoToSourceButton(props) {
+  const diagramApi = useDiagramStoreApi();
+  const portalProps = useMantinePortalProps();
+  return /* @__PURE__ */ jsx(Tooltip, { label: "Open source", ...portalProps, children: /* @__PURE__ */ jsx(
+    ActionIcon,
+    {
+      size: "sm",
+      variant: "subtle",
+      color: "gray",
+      onClick: (e) => {
+        var _a, _b, _c, _d;
+        e.stopPropagation();
+        if (props.elementId) {
+          (_b = (_a = diagramApi.getState()).onOpenSource) == null ? void 0 : _b.call(_a, {
+            element: props.elementId
+          });
+        } else if (props.deploymentId) {
+          (_d = (_c = diagramApi.getState()).onOpenSource) == null ? void 0 : _d.call(_c, {
+            deployment: props.deploymentId
+          });
+        }
+      },
+      children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.8, style: { width: "70%" } })
+    }
+  ) });
+}
+function ColorButton({
+  element,
+  onColorPreview,
+  isOpacityEditable = false,
+  onChange,
+  ...props
+}) {
+  var _a, _b;
+  const elementColor = element.color ?? "primary";
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      clickOutsideEvents: ["pointerdown", "mousedown", "click"],
+      position: "right-end",
+      offset: 2,
+      ...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: (_b = element.style) == null ? void 0 : _b.opacity,
+                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$1,
+      {
+        label: key,
+        fz: "xs",
+        color: "dark",
+        offset: 2,
+        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$1,
+          {
+            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 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" }
+      ]
+    }
+  ) });
+}
+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
+    }
+  );
+}
+function BrowseRelationshipsButton({ elementId }) {
+  const diagramApi = useDiagramStoreApi();
+  const portalProps = useMantinePortalProps();
+  return /* @__PURE__ */ jsx(Tooltip, { label: "Browse relationships", ...portalProps, children: /* @__PURE__ */ jsx(
+    ActionIcon,
+    {
+      size: "sm",
+      variant: "subtle",
+      color: "gray",
+      onClick: (e) => {
+        e.stopPropagation();
+        diagramApi.getState().openOverlay({
+          relationshipsOf: elementId
+        });
+      },
+      children: /* @__PURE__ */ jsx(
+        IconTransform,
+        {
+          stroke: 2,
+          style: {
+            width: "72%",
+            height: "72%"
+          }
+        }
+      )
+    }
+  ) });
+}
+export {
+  CompoundToolbar,
+  ElementToolbar
+};

package/dist/xyflow/types.d.ts

@@ -0,0 +1,36 @@
+import { BBox, DiagramEdge, DiagramNode, XYPoint } from '@likec4/core';
+import { Edge as ReactFlowEdge, InternalNode as ReactFlowInternalNode, Node as ReactFlowNode, ReactFlowInstance, ReactFlowState } from '@xyflow/react';
+import { SetRequired, Simplify } from 'type-fest';
+import { SharedFlowTypes } from '../overlays/shared/xyflow/_types';
+export declare namespace DiagramFlowTypes {
+    type NodeData = {
+        /**
+         * The DiagramNode backing this node.
+         */
+        element: DiagramNode;
+    };
+    type CompoundNodeData = NodeData & {
+        /**
+         * Whether this node is a view group.
+         */
+        isViewGroup: boolean;
+    };
+    type ElementNode = SetRequired<ReactFlowNode<SharedFlowTypes.NonEmptyNodeData & NodeData, 'element'>, 'type'>;
+    type CompoundNode = SetRequired<ReactFlowNode<SharedFlowTypes.NonEmptyNodeData & CompoundNodeData, 'compound'>, 'type'>;
+    type Node = ElementNode | CompoundNode;
+    type InternalNode = ReactFlowInternalNode<Node>;
+    type XYFlowInstance = ReactFlowInstance<Node, Edge>;
+    type XYFlowState = ReactFlowState<Node, Edge>;
+    type DiagramEdgeData = {
+        edge: DiagramEdge;
+        controlPoints: XYPoint[] | null;
+        label: null | {
+            bbox: BBox;
+            text: string;
+        };
+    };
+    type Edge = Simplify<ReactFlowEdge<DiagramEdgeData, 'relationship'> & {
+        type: 'relationship';
+        data: DiagramEdgeData;
+    }>;
+}

package/dist/xyflow/useLayoutConstraints.d.ts

@@ -0,0 +1,42 @@
+import { NonEmptyArray } from '@likec4/core';
+import { ReactFlowProps, XYPosition } from '@xyflow/react';
+import { XYStoreApi } from '../hooks/useXYFlow';
+import { DiagramFlowTypes } from './types';
+declare abstract class Rect {
+    static readonly LeftPadding = 40;
+    static readonly RightPadding = 40;
+    static readonly TopPadding = 55;
+    static readonly BottomPadding = 40;
+    id: string;
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+    get positionAbsolute(): XYPosition;
+    set positionAbsolute(pos: XYPosition);
+    get dimensions(): {
+        width: number;
+        height: number;
+    };
+    get position(): XYPosition;
+    protected abstract parent: Compound | null;
+}
+declare class Compound extends Rect {
+    protected readonly parent: Compound | null;
+    readonly children: Rect[];
+    constructor(xynode: DiagramFlowTypes.InternalNode, parent?: Compound | null);
+}
+type NodePositionUpdater = (nodes: Array<{
+    rect: Rect | Compound;
+    node: DiagramFlowTypes.InternalNode;
+}>) => void;
+export declare function createLayoutConstraints(xyflowApi: XYStoreApi, editingNodeIds: NonEmptyArray<string>): {
+    updateXYFlowNodes: () => void;
+    onMove: (updater: NodePositionUpdater) => void;
+};
+type LayoutConstraints = Required<Pick<ReactFlowProps<DiagramFlowTypes.Node>, 'onNodeDragStart' | 'onNodeDrag' | 'onNodeDragStop'>>;
+/**
+ * Keeps the layout constraints (parent nodes and children) when dragging a node
+ */
+export declare function useLayoutConstraints(): LayoutConstraints;
+export {};