@likec4/diagram 1.17.1 → 1.19.0

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

@@ -0,0 +1,194 @@
+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

@@ -0,0 +1,5 @@
+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/EmptyNode.js

@@ -0,0 +1,18 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box } from "@mantine/core";
+import "@xyflow/react";
+import { emptyNode } from "./styles.css.js";
+import { Text } from "../../../controls/Text.js";
+function EmptyNode({
+  data: {
+    column
+  }
+}) {
+  return /* @__PURE__ */ jsx(Box, { className: emptyNode, children: /* @__PURE__ */ jsxs(Text, { c: "dimmed", fz: "lg", fw: 500, children: [
+    "No ",
+    column === "incomers" ? "incoming" : "outgoing"
+  ] }) });
+}
+export {
+  EmptyNode
+};

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,123 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,24 @@
+/* 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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,12 @@
+/* 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

@@ -0,0 +1,77 @@
+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'>;
+}