@likec4/diagram 1.19.2 → 1.20.1

package/dist/overlays/relationships-of/xyflow/ElementNode.js

@@ -1,194 +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 { deepEqual } from "fast-equals";
-import { m } from "framer-motion";
-import { memo } from "react";
-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,
-    onNavigateTo: s.onNavigateTo,
-    onOpenSource: s.onOpenSource
-  };
-}
-const ElementNode = memo(({
-  id,
-  data: {
-    element,
-    ports,
-    navigateTo,
-    layoutId = id,
-    leaving = false,
-    entering = true,
-    ...data
-  },
-  selectable = true,
-  width: w = 100,
-  height: h = 100
-}) => {
-  const overlay = useOverlayDialog();
-  const {
-    currentViewId,
-    onNavigateTo,
-    onOpenSource
-  } = useDiagramState(selector);
-  const maxWH = Math.max(w, h);
-  const scale = (diff) => {
-    const s = (maxWH + diff) / maxWH;
-    return {
-      scaleX: s,
-      scaleY: s
-    };
-  };
-  let opacity = 1;
-  if (data.dimmed) {
-    opacity = data.dimmed === "immediate" ? 0.05 : 0.15;
-  }
-  if (leaving) {
-    opacity = 0;
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      m.div,
-      {
-        className: clsx([
-          elementNode,
-          "likec4-element-node"
-        ]),
-        layoutId,
-        "data-likec4-color": element.color,
-        initial: layoutId === id && entering ? {
-          ...scale(-20),
-          opacity: 0,
-          width: w,
-          height: h
-        } : false,
-        animate: {
-          ...scale(0),
-          opacity,
-          width: w,
-          height: h,
-          transition: {
-            opacity: {
-              delay: !leaving && data.dimmed === true ? 0.4 : 0,
-              ...(leaving || data.dimmed === "immediate") && {
-                duration: 0.09
-              }
-            }
-          }
-        },
-        ...selectable && {
-          whileHover: {
-            ...scale(16)
-            // transition: {
-            //   delay: 0.1
-            // }
-          },
-          whileTap: {
-            ...scale(-8)
-          }
-        },
-        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%" } })
-              }
-            ),
-            data.column !== "subjects" && /* @__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 == null ? void 0 : onOpenSource({
-                    element: data.fqn
-                  });
-                },
-                children: /* @__PURE__ */ jsx(IconFileSymlink, { stroke: 1.8, style: { width: "72%" } })
-              }
-            )
-          ] })
-        ]
-      }
-    ),
-    ports.in.map((id2, i) => /* @__PURE__ */ jsx(
-      Handle,
-      {
-        id: id2,
-        type: "target",
-        position: Position.Left,
-        style: {
-          visibility: "hidden",
-          top: `${15 + (i + 1) * ((h - 30) / (ports.in.length + 1))}px`
-        }
-      },
-      id2
-    )),
-    ports.out.map((id2, i) => /* @__PURE__ */ jsx(
-      Handle,
-      {
-        id: id2,
-        type: "source",
-        position: Position.Right,
-        style: {
-          visibility: "hidden",
-          top: `${15 + (i + 1) * ((h - 30) / (ports.out.length + 1))}px`
-        }
-      },
-      id2
-    ))
-  ] });
-}, (prev, next) => {
-  return deepEqual(prev.data, next.data);
-});
-export {
-  ElementNode
-};

package/dist/overlays/relationships-of/xyflow/EmptyNode.d.ts

@@ -1,5 +0,0 @@
-import { NodeProps } from '@xyflow/react';
-import { RelationshipsOfFlowTypes } from '../_types';
-type EmptyNodeProps = NodeProps<RelationshipsOfFlowTypes.EmptyNode>;
-export declare function EmptyNode({ data: { column } }: EmptyNodeProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/overlays/relationships-of/xyflow/RelationshipEdge.d.ts

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

package/dist/overlays/relationships-of/xyflow/RelationshipEdge.js

@@ -1,123 +0,0 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Tooltip as Tooltip$1, Stack, Group, ThemeIcon, Text, Box, ActionIcon } from "@mantine/core";
-import { IconBoxMultipleFilled, IconZoomScan } from "@tabler/icons-react";
-import { getBezierPath, BaseEdge, EdgeLabelRenderer } from "@xyflow/react";
-import clsx from "clsx";
-import { only } from "remeda";
-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-relationships.js";
-const Tooltip = Tooltip$1.withProps({
-  color: "dark",
-  fz: "sm",
-  openDelay: 400,
-  closeDelay: 150,
-  withinPortal: false,
-  label: "",
-  children: null,
-  offset: 4
-});
-function RelationshipEdge({
-  data,
-  label,
-  // Exclude the following props from the rest
-  animated: _animated,
-  ...props
-}) {
-  var _a, _b;
-  const {
-    viewId,
-    onNavigateTo
-  } = useDiagramState((s) => ({
-    viewId: s.view.id,
-    onNavigateTo: s.onNavigateTo
-  }));
-  const overlay = useOverlayDialog();
-  const [edgePath, labelX, labelY] = getBezierPath(props);
-  const navigateTo = onNavigateTo ? (_a = only(data.relations)) == null ? void 0 : _a.navigateTo : void 0;
-  const isMultiRelation = data.relations.length > 1;
-  const technology = (_b = only(data.relations)) == null ? void 0 : _b.technology;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "g",
-      {
-        className: edgeContainer,
-        "data-edge-dimmed": data.dimmed,
-        "data-edge-hovered": data.hovered,
-        "data-likec4-color": data.existsInCurrentView ? "gray" : "amber",
-        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 - 70),
-          zIndex: ZIndexes.max
-        },
-        className: clsx([
-          edgeLabel,
-          "nodrag nopan"
-        ]),
-        "data-edge-dimmed": data.dimmed,
-        "data-edge-hovered": data.hovered,
-        "data-likec4-color": data.existsInCurrentView ? "gray" : "amber",
-        children: [
-          label && /* @__PURE__ */ jsx(Tooltip, { label: "Not included in current view", disabled: data.existsInCurrentView, color: "orange", children: /* @__PURE__ */ jsxs(Group, { gap: 6, wrap: "nowrap", children: [
-            isMultiRelation && /* @__PURE__ */ jsx(ThemeIcon, { size: "sm", variant: "transparent", color: "orange", children: /* @__PURE__ */ jsx(IconBoxMultipleFilled, { style: { width: "80%" } }) }),
-            /* @__PURE__ */ jsx(
-              Text,
-              {
-                fw: isMultiRelation ? "500" : "400",
-                style: {
-                  whiteSpace: isMultiRelation ? "nowrap" : void 0
-                },
-                component: "div",
-                className: edgeLabelText,
-                lineClamp: 3,
-                children: label
-              }
-            )
-          ] }) }),
-          technology && /* @__PURE__ */ jsxs(Text, { component: "div", className: edgeLabelTechnology, children: [
-            "[ ",
-            technology,
-            " ]"
-          ] }),
-          navigateTo && viewId !== navigateTo && /* @__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 == null ? void 0 : onNavigateTo(navigateTo, event);
-                });
-              },
-              role: "button",
-              onDoubleClick: stopPropagation,
-              children: /* @__PURE__ */ jsx(IconZoomScan, {})
-            }
-          ) })
-        ]
-      }
-    ) })
-  ] });
-}
-export {
-  RelationshipEdge
-};

package/dist/overlays/relationships-of/xyflow/styles.css.d.ts

@@ -1,14 +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 edgeContainer: string;
-export declare const edgeLabel: string;
-export declare const edgeLabelText: string;
-export declare const edgeLabelTechnology: string;
-export declare const emptyNode: string;
-export declare const navigateBtnBox: string;
-export declare const navigateBtn: string;

package/dist/overlays/relationships-of/xyflow/styles.css.js

@@ -1,24 +0,0 @@
-/* empty css                                */
-/* empty css                          */
-var elementNode = "_19duq0h0";
-var elementNodeContent = "_19duq0h1";
-var elementNodeTitle = "_19duq0h2";
-var elementNodeDescription = "_19duq0h3";
-var compoundNodeBody = "_19duq0h4";
-var compoundNodeTitle = "_19duq0h5";
-var cssShapeSvg = "_19duq0h6";
-var emptyNode = "_19duq0hb";
-var navigateBtnBox = "_19duq0hc";
-var navigateBtn = "_19duq0hd";
-export {
-  compoundNodeBody,
-  compoundNodeTitle,
-  cssShapeSvg,
-  elementNode,
-  elementNodeContent,
-  elementNodeDescription,
-  elementNodeTitle,
-  emptyNode,
-  navigateBtn,
-  navigateBtnBox
-};

package/dist/overlays/shared/xyflow/RelationshipEdge.css.d.ts

@@ -1,4 +0,0 @@
-export declare const edgeContainer: string;
-export declare const edgeLabel: string;
-export declare const edgeLabelText: string;
-export declare const edgeLabelTechnology: string;

package/dist/overlays/shared/xyflow/RelationshipEdge.css.js

@@ -1,12 +0,0 @@
-/* empty css                                */
-/* empty css                                    */
-var edgeContainer = "_5hogu30";
-var edgeLabel = "_5hogu31 _5hogu30";
-var edgeLabelText = "_5hogu32";
-var edgeLabelTechnology = "_5hogu33";
-export {
-  edgeContainer,
-  edgeLabel,
-  edgeLabelTechnology,
-  edgeLabelText
-};

package/dist/overlays/shared/xyflow/_types.d.ts

@@ -1,77 +0,0 @@
-import { AbstractRelation, ComputedNode, Fqn, ViewId } from '@likec4/core';
-import { Edge as ReactFlowEdge, Node as ReactFlowNode } from '@xyflow/react';
-import { SetRequired } from 'type-fest';
-export declare namespace SharedFlowTypes {
-    type EmptyNodeData = {
-        /**
-         * Whether the cursor is hovering over the node
-         */
-        hovered?: boolean;
-        /**
-         * Whether the node is currently leaving the overlay
-         */
-        leaving?: boolean;
-        /**
-         * Whether the node is currently entering the overlay
-         * @default true
-         */
-        entering?: boolean;
-        /**
-         * Whether the node is dimmed
-         * 'immediate' means that the node is dimmed without delay
-         */
-        dimmed?: 'immediate' | boolean;
-    };
-    type NonEmptyNodeData = EmptyNodeData & {
-        /**
-         * The node's fully qualified name
-         */
-        fqn: Fqn;
-    };
-    type OverlayNodeData = NonEmptyNodeData & {
-        /**
-         * The ComputedNode backing this node
-         */
-        element: Pick<ComputedNode, 'color' | 'title' | 'description' | 'shape' | 'kind'>;
-        /**
-         * The node's incoming and outgoing ports
-         */
-        ports: {
-            in: string[];
-            out: string[];
-        };
-        /**
-         * The id of the view that should be navigated to when clicking the navigate button
-         */
-        navigateTo: ViewId | null;
-        /**
-         * The node's visual depth on the screen, 1 being the highest
-         */
-        depth?: number;
-    };
-    type ElementNode = SetRequired<ReactFlowNode<OverlayNodeData, 'element'>, 'type'>;
-    type CompoundNode = SetRequired<ReactFlowNode<OverlayNodeData, 'compound'>, 'type'>;
-    type NonEmptyNode = ElementNode | CompoundNode;
-    type EmptyNode = SetRequired<ReactFlowNode<EmptyNodeData, 'empty'>, 'type'>;
-    type Node = NonEmptyNode | EmptyNode;
-    type EdgeData = {
-        /**
-         * The model's relations represented by this edge
-         */
-        relations: [AbstractRelation, ...AbstractRelation[]];
-        /**
-         * Whether the cursor is hovering over the node
-         */
-        hovered?: boolean;
-        /**
-         * Whether the node is dimmed
-         * 'immediate' means that the node is dimmed without delay
-         */
-        dimmed?: 'immediate' | boolean;
-        /**
-         * The id of the view that should be navigated to when clicking the edge
-         */
-        navigateTo?: ViewId | null;
-    };
-    type Edge = SetRequired<ReactFlowEdge<EdgeData, 'relation'>, 'data' | 'type'>;
-}