@likec4/diagram 1.19.2 → 1.20.0

package/dist/overlays/edge-details/xyflow/CompoundNode.js

@@ -1,76 +0,0 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Handle, Position } from "@xyflow/react";
-import clsx from "clsx";
-import { m } from "framer-motion";
-import { compoundNodeBody, compoundNodeTitle } from "./styles.css.js";
-import { Text } from "../../../controls/Text.js";
-function CompoundNode({
-  data: {
-    element,
-    ports,
-    ...data
-  },
-  width = 200,
-  selectable = true
-}) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      m.div,
-      {
-        className: clsx([
-          compoundNodeBody,
-          "likec4-compound-node"
-        ]),
-        "data-compound-depth": 3,
-        "data-likec4-color": element.color,
-        animate: {
-          opacity: data.dimmed ? 0.15 : 1,
-          transition: {
-            delay: data.dimmed === true ? 0.4 : 0
-          }
-        },
-        ...selectable && {
-          whileHover: {
-            scale: 1.04,
-            transition: {
-              delay: 0.15
-            }
-          },
-          whileTap: {
-            scale: 1
-          }
-        },
-        children: /* @__PURE__ */ jsx(Text, { className: compoundNodeTitle, maw: width - 20, children: element.title })
-      }
-    ),
-    ports.out.map((id, i) => /* @__PURE__ */ jsx(
-      Handle,
-      {
-        id,
-        type: "source",
-        position: Position.Right,
-        style: {
-          visibility: "hidden",
-          top: `${16 + 20 * i}px`
-        }
-      },
-      id
-    )),
-    ports.in.map((id, i) => /* @__PURE__ */ jsx(
-      Handle,
-      {
-        id,
-        type: "target",
-        position: Position.Left,
-        style: {
-          visibility: "hidden",
-          top: `${16 + 20 * i}px`
-        }
-      },
-      id
-    ))
-  ] });
-}
-export {
-  CompoundNode
-};

package/dist/overlays/edge-details/xyflow/ElementNode.d.ts

@@ -1,5 +0,0 @@
-import { NodeProps } from '@xyflow/react';
-import { SharedFlowTypes } from '../../shared/xyflow/_types';
-type ElementNodeProps = NodeProps<SharedFlowTypes.ElementNode>;
-export declare function ElementNode({ data: { element, ports, navigateTo, ...data }, selectable, width: w, height: h }: ElementNodeProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/overlays/edge-details/xyflow/ElementNode.js

@@ -1,159 +0,0 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { ActionIcon, Box, Group } from "@mantine/core";
-import { IconZoomScan, IconTransform, IconFileSymlink } from "@tabler/icons-react";
-import { Handle, Position } from "@xyflow/react";
-import clsx from "clsx";
-import { m } from "framer-motion";
-import { ElementShapeSvg } from "../../../xyflow/nodes/element/ElementShapeSvg.js";
-import { stopPropagation } from "../../../xyflow/utils.js";
-import { useOverlayDialog } from "../../OverlayContext.js";
-import { navigateBtn, elementNode, cssShapeSvg, elementNodeContent, elementNodeTitle, elementNodeDescription, navigateBtnBox } from "./styles.css.js";
-import { Text } from "../../../controls/Text.js";
-import { useDiagramState } from "../../../hooks/useDiagramState.js";
-const Action = ActionIcon.withProps({
-  className: "nodrag nopan " + navigateBtn,
-  radius: "md",
-  role: "button",
-  onDoubleClick: stopPropagation,
-  onPointerDownCapture: stopPropagation
-});
-function selector(s) {
-  return {
-    currentViewId: s.view.id,
-    enableRelationshipBrowser: s.enableRelationshipBrowser,
-    onNavigateTo: s.onNavigateTo,
-    onOpenSource: s.onOpenSource
-  };
-}
-function ElementNode({
-  data: {
-    element,
-    ports,
-    navigateTo,
-    ...data
-  },
-  selectable = true,
-  width: w = 100,
-  height: h = 100
-}) {
-  const overlay = useOverlayDialog();
-  const {
-    currentViewId,
-    onNavigateTo,
-    onOpenSource,
-    enableRelationshipBrowser
-  } = useDiagramState(selector);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      m.div,
-      {
-        className: clsx([
-          elementNode,
-          "likec4-element-node"
-        ]),
-        "data-likec4-color": element.color,
-        "data-likec4-shape": element.shape,
-        animate: {
-          opacity: data.dimmed ? 0.15 : 1,
-          transition: {
-            delay: data.dimmed === true ? 0.4 : 0
-          }
-        },
-        ...selectable && {
-          whileHover: {
-            scale: 1.045,
-            transition: {
-              delay: 0.15
-            }
-          },
-          whileTap: {
-            scale: 0.97
-          }
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "svg",
-            {
-              className: clsx(
-                cssShapeSvg
-              ),
-              viewBox: `0 0 ${w} ${h}`,
-              width: w,
-              height: h,
-              children: /* @__PURE__ */ jsx(ElementShapeSvg, { shape: element.shape, w, h })
-            }
-          ),
-          /* @__PURE__ */ jsxs(Box, { className: elementNodeContent, children: [
-            /* @__PURE__ */ jsx(Text, { className: elementNodeTitle, lineClamp: 2, children: element.title }),
-            element.description && /* @__PURE__ */ jsx(Text, { className: elementNodeDescription, lineClamp: 4, children: element.description })
-          ] }),
-          /* @__PURE__ */ jsxs(Group, { className: navigateBtnBox, children: [
-            navigateTo && onNavigateTo && navigateTo !== currentViewId && /* @__PURE__ */ jsx(
-              Action,
-              {
-                onClick: (event) => {
-                  event.stopPropagation();
-                  overlay.close(() => onNavigateTo(navigateTo));
-                },
-                children: /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8, style: { width: "75%" } })
-              }
-            ),
-            enableRelationshipBrowser && /* @__PURE__ */ jsx(
-              Action,
-              {
-                onClick: (event) => {
-                  event.stopPropagation();
-                  overlay.openOverlay({
-                    relationshipsOf: data.fqn
-                  });
-                },
-                children: /* @__PURE__ */ jsx(IconTransform, { stroke: 1.8, style: { width: "72%" } })
-              }
-            ),
-            onOpenSource && /* @__PURE__ */ jsx(
-              Action,
-              {
-                onClick: (event) => {
-                  event.stopPropagation();
-                  onOpenSource({
-                    element: data.fqn
-                  });
-                },
-                children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.8, style: { width: "72%" } })
-              }
-            )
-          ] })
-        ]
-      }
-    ),
-    ports.out.map((id, i) => /* @__PURE__ */ jsx(
-      Handle,
-      {
-        id,
-        type: "source",
-        position: Position.Right,
-        style: {
-          visibility: "hidden",
-          top: `${15 + (i + 1) * ((h - 30) / (ports.out.length + 1))}px`
-        }
-      },
-      id
-    )),
-    ports.in.map((id, i) => /* @__PURE__ */ jsx(
-      Handle,
-      {
-        id,
-        type: "target",
-        position: Position.Left,
-        style: {
-          visibility: "hidden",
-          top: `${15 + (i + 1) * ((h - 30) / (ports.in.length + 1))}px`
-        }
-      },
-      id
-    ))
-  ] });
-}
-export {
-  ElementNode
-};

package/dist/overlays/edge-details/xyflow/RelationshipEdge.d.ts

@@ -1,3 +0,0 @@
-import { EdgeProps } from '@xyflow/react';
-import { EdgeDetailsFlowTypes } from '../_types';
-export declare function RelationshipEdge({ data, label, ...props }: EdgeProps<EdgeDetailsFlowTypes.Edge>): import("react/jsx-runtime").JSX.Element;

package/dist/overlays/edge-details/xyflow/RelationshipEdge.js

@@ -1,84 +0,0 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Stack, Text, Box, ActionIcon } from "@mantine/core";
-import { IconZoomScan } from "@tabler/icons-react";
-import { getBezierPath, BaseEdge, EdgeLabelRenderer } from "@xyflow/react";
-import clsx from "clsx";
-import { useDiagramState } from "../../../hooks/useDiagramState.js";
-import { stopPropagation } from "../../../xyflow/utils.js";
-import { useOverlayDialog } from "../../OverlayContext.js";
-import { edgeContainer, edgeLabel, edgeLabelText, edgeLabelTechnology } from "../../shared/xyflow/RelationshipEdge.css.js";
-import { ZIndexes } from "../use-layouted-edge-details.js";
-function RelationshipEdge({
-  data,
-  label,
-  ...props
-}) {
-  const overlay = useOverlayDialog();
-  const onNavigateTo = useDiagramState((s) => s.onNavigateTo);
-  const [edgePath, labelX, labelY] = getBezierPath(props);
-  const navigateTo = data.navigateTo;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "g",
-      {
-        className: edgeContainer,
-        "data-edge-dimmed": data.dimmed,
-        "data-edge-hovered": data.hovered,
-        children: /* @__PURE__ */ jsx(
-          BaseEdge,
-          {
-            path: edgePath,
-            ...props
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxs(
-      Stack,
-      {
-        gap: 2,
-        style: {
-          position: "absolute",
-          transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
-          maxWidth: Math.abs(props.targetX - props.sourceX - 40),
-          zIndex: ZIndexes.max
-        },
-        className: clsx([
-          edgeLabel,
-          "nodrag nopan"
-        ]),
-        "data-edge-dimmed": data.dimmed,
-        "data-edge-hovered": data.hovered,
-        children: [
-          label && /* @__PURE__ */ jsx(Text, { component: "div", className: edgeLabelText, lineClamp: 3, children: label }),
-          data.technology && /* @__PURE__ */ jsxs(Text, { component: "div", className: edgeLabelTechnology, children: [
-            "[ ",
-            data.technology,
-            " ]"
-          ] }),
-          navigateTo && onNavigateTo && /* @__PURE__ */ jsx(Box, { ta: "center", mt: 4, children: /* @__PURE__ */ jsx(
-            ActionIcon,
-            {
-              variant: "default",
-              size: "sm",
-              radius: "sm",
-              onPointerDownCapture: stopPropagation,
-              onClick: (event) => {
-                event.stopPropagation();
-                overlay.close(() => {
-                  onNavigateTo(navigateTo);
-                });
-              },
-              role: "button",
-              onDoubleClick: stopPropagation,
-              children: /* @__PURE__ */ jsx(IconZoomScan, {})
-            }
-          ) })
-        ]
-      }
-    ) })
-  ] });
-}
-export {
-  RelationshipEdge
-};

package/dist/overlays/edge-details/xyflow/styles.css.d.ts

@@ -1,9 +0,0 @@
-export declare const elementNode: string;
-export declare const elementNodeContent: string;
-export declare const elementNodeTitle: string;
-export declare const elementNodeDescription: string;
-export declare const compoundNodeBody: string;
-export declare const compoundNodeTitle: string;
-export declare const cssShapeSvg: string;
-export declare const navigateBtnBox: string;
-export declare const navigateBtn: string;

package/dist/overlays/edge-details/xyflow/styles.css.js

@@ -1,21 +0,0 @@
-/* empty css                          */
-var elementNode = "_144zcea0";
-var elementNodeContent = "_144zcea1";
-var elementNodeTitle = "_144zcea2";
-var elementNodeDescription = "_144zcea3";
-var compoundNodeBody = "_144zcea4";
-var compoundNodeTitle = "_144zcea5";
-var cssShapeSvg = "_144zcea6";
-var navigateBtnBox = "_144zcea7";
-var navigateBtn = "_144zcea8";
-export {
-  compoundNodeBody,
-  compoundNodeTitle,
-  cssShapeSvg,
-  elementNode,
-  elementNodeContent,
-  elementNodeDescription,
-  elementNodeTitle,
-  navigateBtn,
-  navigateBtnBox
-};

package/dist/overlays/index.d.ts

@@ -1 +0,0 @@
-export { Overlays } from './Overlays';

package/dist/overlays/relationships-of/RelationshipsOverlay.d.ts

@@ -1,5 +0,0 @@
-import { Fqn } from '@likec4/core';
-import { NamedExoticComponent } from 'react';
-export declare const RelationshipsOverlay: NamedExoticComponent<{
-    subjectId: Fqn;
-}>;

package/dist/overlays/relationships-of/RelationshipsOverlay.js

@@ -1,193 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import "@likec4/core";
-import { Group, Button, Space, Box, SegmentedControl, Text } from "@mantine/core";
-import { useLocalStorage, useStateHistory } from "@mantine/hooks";
-import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react";
-import { Panel } from "@xyflow/react";
-import { memo, useEffect } from "react";
-import { useDiagramState } from "../../hooks/useDiagramState.js";
-import { useOverlayDialog } from "../OverlayContext.js";
-import { RelationshipsXYFlow } from "./RelationshipsXYFlow.js";
-import { SelectElement } from "./SelectElement.js";
-import { useLayoutedRelationships } from "./use-layouted-relationships.js";
-const RelationshipsOverlay = memo(function RelationshipsOverlay2({ subjectId }) {
-  const view = useDiagramState((s) => s.view);
-  const [_scope, setScope] = useLocalStorage({
-    key: "likec4:scope-relationships-of",
-    getInitialValueInEffect: false,
-    defaultValue: "view"
-  });
-  const {
-    notIncludedRelations,
-    viewIncludesSubject,
-    edges,
-    nodes,
-    subject,
-    bounds
-  } = useLayoutedRelationships(subjectId, view, _scope);
-  const scope = viewIncludesSubject ? _scope : "global";
-  const showSubjectWarning = !viewIncludesSubject && _scope === "view";
-  const [historySubjectId, historyOps, { history, current }] = useStateHistory(subjectId);
-  const overlay = useOverlayDialog();
-  useEffect(() => {
-    if (historySubjectId !== subjectId) {
-      historyOps.set(subjectId);
-    }
-  }, [subjectId]);
-  useEffect(() => {
-    if (historySubjectId !== subjectId) {
-      overlay.openOverlay({
-        relationshipsOf: historySubjectId
-      });
-    }
-  }, [historySubjectId]);
-  return /* @__PURE__ */ jsx(
-    RelationshipsXYFlow,
-    {
-      nodes,
-      edges,
-      bounds,
-      view,
-      subjectId,
-      viewportPadding: 0.2,
-      onNodeClick: (e, node) => {
-        e.stopPropagation();
-        if (node.type === "empty") return;
-        overlay.openOverlay({
-          relationshipsOf: node.data.fqn
-        });
-      },
-      children: /* @__PURE__ */ jsx(Panel, { position: "top-center", children: /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            leftSection: /* @__PURE__ */ jsx(IconArrowLeft, { stroke: 3, size: 14 }),
-            color: "dimmed",
-            variant: "subtle",
-            style: {
-              visibility: current > 0 ? "visible" : "hidden",
-              padding: "0.25rem 0.75rem"
-            },
-            styles: {
-              label: {
-                fontWeight: 400
-              },
-              section: {
-                marginInlineEnd: 6
-              }
-            },
-            size: "sm",
-            onClick: (e) => {
-              e.stopPropagation();
-              historyOps.back();
-            },
-            children: "Back"
-          }
-        ),
-        /* @__PURE__ */ jsx(Space, { w: 2 }),
-        /* @__PURE__ */ jsxs(Group, { gap: "xs", pos: "relative", wrap: "nowrap", flex: "1 0 auto", children: [
-          /* @__PURE__ */ jsx(Box, { fz: "sm", fw: "400", style: { whiteSpace: "nowrap", userSelect: "none" }, children: "Relationships of" }),
-          /* @__PURE__ */ jsx(Box, { flex: "1 0 auto", children: /* @__PURE__ */ jsx(
-            SelectElement,
-            {
-              scope,
-              subject: subject.$element,
-              onSelect: (fqn) => overlay.openOverlay({
-                relationshipsOf: fqn
-              }),
-              viewId: view.id
-            }
-          ) }),
-          /* @__PURE__ */ jsx(
-            SegmentedControl,
-            {
-              flex: "1 0 auto",
-              size: "xs",
-              withItemsBorders: false,
-              value: scope,
-              onChange: setScope,
-              data: [
-                { label: "Global", value: "global" },
-                { label: "Current view", value: "view", disabled: !viewIncludesSubject }
-              ]
-            }
-          ),
-          showSubjectWarning && /* @__PURE__ */ jsx(
-            Box,
-            {
-              pos: "absolute",
-              top: "calc(100% + .5rem)",
-              left: "50%",
-              w: "max-content",
-              style: {
-                transform: "translateX(-50%)",
-                textAlign: "center",
-                cursor: "pointer"
-              },
-              onClick: (e) => {
-                e.stopPropagation();
-                setScope("global");
-              },
-              children: /* @__PURE__ */ jsx(Text, { fw: 500, size: "xs", c: "orange", component: "div", children: "Current view doesn't include this element, switched to Global" })
-            }
-          ),
-          viewIncludesSubject && scope === "view" && notIncludedRelations > 0 && /* @__PURE__ */ jsx(
-            Box,
-            {
-              pos: "absolute",
-              top: "calc(100% + .5rem)",
-              left: "50%",
-              w: "max-content",
-              style: {
-                transform: "translateX(-50%)",
-                textAlign: "center",
-                cursor: "pointer"
-              },
-              onClick: (e) => {
-                e.stopPropagation();
-                setScope("global");
-              },
-              children: /* @__PURE__ */ jsxs(Text, { fw: 500, size: "xs", c: "orange", component: "div", children: [
-                "View does not include ",
-                notIncludedRelations,
-                " ",
-                "relationship",
-                notIncludedRelations > 1 ? "s" : "",
-                ". Switch to Global to compare"
-              ] })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            rightSection: /* @__PURE__ */ jsx(IconArrowRight, { stroke: 3, size: 14 }),
-            color: "dimmed",
-            variant: "subtle",
-            style: {
-              visibility: current + 1 < history.length ? "visible" : "hidden",
-              padding: "0.25rem 0.75rem"
-            },
-            styles: {
-              label: {
-                fontWeight: 400
-              },
-              section: {
-                marginInlineStart: 4
-              }
-            },
-            size: "sm",
-            onClick: (e) => {
-              e.stopPropagation();
-              historyOps.forward();
-            },
-            children: "Forward"
-          }
-        )
-      ] }) })
-    }
-  );
-});
-export {
-  RelationshipsOverlay
-};

package/dist/overlays/relationships-of/RelationshipsXYFlow.d.ts

@@ -1,19 +0,0 @@
-import { DiagramView, Fqn } from '@likec4/core';
-import { ReactFlowProps } from '@xyflow/react';
-import { PropsWithChildren } from 'react';
-import { RelationshipsOfFlowTypes } from './_types';
-type RelationshipsXYFlowProps = PropsWithChildren<{
-    subjectId: Fqn;
-    view: DiagramView;
-    nodes: RelationshipsOfFlowTypes.Node[];
-    edges: RelationshipsOfFlowTypes.Edge[];
-    bounds: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    };
-    viewportPadding?: number | undefined;
-}> & Pick<ReactFlowProps<RelationshipsOfFlowTypes.Node, RelationshipsOfFlowTypes.Edge>, 'onNodeClick' | 'elementsSelectable' | 'maxZoom' | 'minZoom'>;
-export declare function RelationshipsXYFlow(props: RelationshipsXYFlowProps): import("react/jsx-runtime").JSX.Element;
-export {};