@likec4/diagram 1.18.0 → 1.19.0

package/dist/overlays/edge-details/EdgeDetailsXYFlow.js

@@ -0,0 +1,185 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "@likec4/core";
+import { Group, Box, Text } from "@mantine/core";
+import { useSyncedRef, useDebouncedCallback, useUpdateEffect } from "@react-hookz/web";
+import { useReactFlow, useStoreApi, getViewportForBounds, ReactFlow, Panel, ViewportPortal } from "@xyflow/react";
+import { memo, useEffect } from "react";
+import { only } from "remeda";
+import { useDiagramStoreApi } from "../../hooks/useDiagramState.js";
+import { SelectEdge } from "./SelectEdge.js";
+import { edgeDataGrid } from "./SelectEdge.css.js";
+import { useLayoutedEdgeDetails, ZIndexes } from "./use-layouted-edge-details.js";
+import { CompoundNode } from "./xyflow/CompoundNode.js";
+import { ElementNode } from "./xyflow/ElementNode.js";
+import { RelationshipEdge } from "./xyflow/RelationshipEdge.js";
+const nodeTypes = {
+  element: ElementNode,
+  compound: CompoundNode
+};
+const edgeTypes = {
+  relation: RelationshipEdge
+};
+const resetDimmedAndHovered = (xyflow) => {
+  xyflow.setEdges(
+    (edges) => edges.map((edge) => ({
+      ...edge,
+      data: {
+        ...edge.data,
+        dimmed: false,
+        hovered: false
+      },
+      animated: false
+    }))
+  );
+  xyflow.setNodes(
+    (nodes) => nodes.map(
+      (n) => ({
+        ...n,
+        data: {
+          ...n.data,
+          dimmed: false,
+          hovered: false
+        }
+      })
+    )
+  );
+};
+const EdgeDetailsXYFlow = memo(function EdgeDetailsXYFlow2({ edgeId }) {
+  const diagramStore = useDiagramStoreApi();
+  const {
+    view,
+    edge,
+    edges,
+    nodes,
+    bounds
+  } = useLayoutedEdgeDetails(edgeId);
+  const boundsRef = useSyncedRef(bounds);
+  const xyflow = useReactFlow();
+  const xystore = useStoreApi();
+  const fitview = useDebouncedCallback(
+    () => {
+      const {
+        width,
+        height
+      } = xystore.getState();
+      const viewport = getViewportForBounds(
+        {
+          ...boundsRef.current,
+          height: Math.max(boundsRef.current.height + 100, height - 200)
+          // Add some padding to the bottom
+        },
+        width,
+        height,
+        0.2,
+        1,
+        0.2
+      );
+      xyflow.setViewport(viewport, { duration: 350 });
+    },
+    [xyflow],
+    150
+  );
+  useEffect(() => {
+    xyflow.setNodes(nodes);
+    xyflow.setEdges(edges);
+  }, [nodes, edges]);
+  const zoomable = true;
+  useUpdateEffect(() => fitview(), [edge.id]);
+  return /* @__PURE__ */ jsxs(
+    ReactFlow,
+    {
+      defaultEdges: [],
+      defaultNodes: [],
+      nodeTypes,
+      edgeTypes,
+      defaultMarkerColor: "var(--xy-edge-stroke)",
+      zoomOnPinch: zoomable,
+      zoomOnScroll: false,
+      zoomOnDoubleClick: false,
+      maxZoom: 1.5,
+      minZoom: 0.1,
+      fitView: true,
+      fitViewOptions: {
+        padding: 0.2,
+        maxZoom: 1,
+        minZoom: 0.1,
+        includeHiddenNodes: true
+      },
+      preventScrolling: true,
+      noDragClassName: "nodrag",
+      noPanClassName: "nopan",
+      panOnScroll: true,
+      panOnDrag: true,
+      elementsSelectable: true,
+      nodesFocusable: false,
+      edgesFocusable: false,
+      nodesDraggable: false,
+      onEdgeMouseEnter: (_, edge2) => {
+        xyflow.setEdges(
+          (edges2) => edges2.map((e) => ({
+            ...e,
+            data: {
+              ...e.data,
+              dimmed: e.id !== edge2.id,
+              hovered: e.id === edge2.id
+            },
+            zIndex: e.id === edge2.id ? ZIndexes.max : ZIndexes.edge,
+            animated: e.id === edge2.id
+          }))
+        );
+        xyflow.setNodes(
+          (nodes2) => nodes2.map((n) => ({
+            ...n,
+            data: {
+              ...n.data,
+              dimmed: n.id !== edge2.source && n.id !== edge2.target
+            }
+          }))
+        );
+      },
+      onEdgeMouseLeave: () => {
+        resetDimmedAndHovered(xyflow);
+      },
+      onEdgeClick: (e, edge2) => {
+        var _a, _b, _c;
+        e.stopPropagation();
+        let relationId = (_a = only(edge2.data.relations)) == null ? void 0 : _a.id;
+        if (relationId) {
+          (_c = (_b = diagramStore.getState()).onOpenSource) == null ? void 0 : _c.call(_b, {
+            relation: relationId
+          });
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(Panel, { position: "top-center", children: /* @__PURE__ */ jsx(Group, { gap: "xs", wrap: "nowrap", children: /* @__PURE__ */ jsx(
+          SelectEdge,
+          {
+            view,
+            edge
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx(EdgeData, { edge, top: bounds.height, width: bounds.width })
+      ]
+    }
+  );
+});
+const EdgeData = ({ edge, top, width }) => {
+  return /* @__PURE__ */ jsx(ViewportPortal, { children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      maw: width,
+      style: {
+        transform: `translate(100px, ${top + 32}px)`
+      },
+      children: /* @__PURE__ */ jsxs(Box, { className: edgeDataGrid, children: [
+        /* @__PURE__ */ jsx(Text, { size: "xs", fw: 500, c: "dimmed", children: "technology" }),
+        /* @__PURE__ */ jsx(Text, { children: edge.technology || "unknown" }),
+        /* @__PURE__ */ jsx(Text, { size: "xs", fw: 500, c: "dimmed", children: "description" }),
+        /* @__PURE__ */ jsx(Text, { children: edge.description || "no description" })
+      ] })
+    }
+  ) });
+};
+export {
+  EdgeDetailsXYFlow
+};

package/dist/overlays/edge-details/SelectEdge.css.d.ts

@@ -0,0 +1,7 @@
+export declare const edgeSource: string;
+export declare const edgeArrow: string;
+export declare const edgeTarget: string;
+export declare const edgeLabel: string;
+export declare const edgeRow: string;
+export declare const edgeGrid: string;
+export declare const edgeDataGrid: string;

package/dist/overlays/edge-details/SelectEdge.css.js

@@ -0,0 +1,17 @@
+/* empty css                              */
+var edgeSource = "_1n45dyn1 _1n45dyn0";
+var edgeArrow = "_1n45dyn2 _1n45dyn0";
+var edgeTarget = "_1n45dyn3 _1n45dyn0";
+var edgeLabel = "_1n45dyn4";
+var edgeRow = "_1n45dyn5";
+var edgeGrid = "_1n45dyn6";
+var edgeDataGrid = "_1n45dyn7";
+export {
+  edgeArrow,
+  edgeDataGrid,
+  edgeGrid,
+  edgeLabel,
+  edgeRow,
+  edgeSource,
+  edgeTarget
+};

package/dist/overlays/edge-details/SelectEdge.d.ts

@@ -0,0 +1,5 @@
+import { DiagramEdge, DiagramView } from '@likec4/core';
+export declare const SelectEdge: ({ edge, view }: {
+    edge: DiagramEdge;
+    view: DiagramView;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/overlays/edge-details/SelectEdge.js

@@ -0,0 +1,129 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "@likec4/core";
+import { useComputedColorScheme, Popover, PopoverTarget, Button, Box, Text, ThemeIcon, PopoverDropdown, ScrollAreaAutosize } from "@mantine/core";
+import { IconSelector, IconArrowRight } from "@tabler/icons-react";
+import { useRef } from "react";
+import { useOverlayDialog } from "../OverlayContext.js";
+import { edgeSource, edgeTarget, edgeGrid, edgeRow, edgeArrow, edgeLabel } from "./SelectEdge.css.js";
+const SelectEdge = ({
+  edge,
+  view
+}) => {
+  const overlay = useOverlayDialog();
+  const viewport = useRef(null);
+  const theme = useComputedColorScheme();
+  const edgeSource$1 = view.nodes.find((n) => n.id === edge.source);
+  const edgeTarget$1 = view.nodes.find((n) => n.id === edge.target);
+  const edges = view.edges.map((edge2) => {
+    const source = view.nodes.find((n) => n.id === edge2.source);
+    const target = view.nodes.find((n) => n.id === edge2.target);
+    return {
+      id: edge2.id,
+      source,
+      target,
+      label: edge2.label
+    };
+  });
+  return /* @__PURE__ */ jsxs(
+    Popover,
+    {
+      position: "bottom",
+      shadow: "md",
+      keepMounted: true,
+      withinPortal: false,
+      closeOnClickOutside: true,
+      clickOutsideEvents: ["pointerdown", "mousedown", "click"],
+      onOpen: () => {
+        setTimeout(() => {
+          var _a;
+          const item = (_a = viewport.current) == null ? void 0 : _a.querySelector(`[data-edge-id="${edge.id}"]`);
+          item == null ? void 0 : item.scrollIntoView({ behavior: "instant", block: "nearest" });
+        }, 100);
+      },
+      children: [
+        /* @__PURE__ */ jsx(PopoverTarget, { children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            size: "xs",
+            variant: "light",
+            color: theme === "light" ? "dark" : "gray",
+            fw: "500",
+            style: { padding: "0.25rem 0.75rem" },
+            rightSection: /* @__PURE__ */ jsx(IconSelector, { size: 16 }),
+            children: [
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  className: edgeSource,
+                  maw: 160,
+                  p: 0,
+                  mod: {
+                    "likec4-color": edgeSource$1.color
+                  },
+                  children: /* @__PURE__ */ jsx(Text, { component: "span", truncate: true, children: edgeSource$1.title })
+                }
+              ),
+              /* @__PURE__ */ jsx(ThemeIcon, { color: "dark", variant: "transparent", size: "xs", children: /* @__PURE__ */ jsx(IconArrowRight, { style: { width: "80%" } }) }),
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  className: edgeTarget,
+                  maw: 160,
+                  p: 0,
+                  mod: {
+                    "likec4-color": edgeTarget$1.color
+                  },
+                  children: /* @__PURE__ */ jsx(Text, { component: "span", truncate: true, children: edgeTarget$1.title })
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(PopoverDropdown, { p: 0, miw: 250, maw: 420, children: /* @__PURE__ */ jsx(ScrollAreaAutosize, { mah: "70vh", scrollbars: "y", type: "never", viewportRef: viewport, children: /* @__PURE__ */ jsx(Box, { className: edgeGrid, p: "xs", children: edges.map((e) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: edgeRow,
+            "data-selected": e.id === edge.id,
+            onClick: (event) => {
+              event.stopPropagation();
+              overlay.openOverlay({
+                edgeDetails: e.id
+              });
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  className: edgeSource,
+                  maw: 160,
+                  mod: {
+                    "edge-id": e.id,
+                    "likec4-color": e.source.color
+                  },
+                  children: /* @__PURE__ */ jsx(Text, { component: "span", truncate: true, children: e.source.title })
+                }
+              ),
+              /* @__PURE__ */ jsx(Box, { className: edgeArrow, children: /* @__PURE__ */ jsx(ThemeIcon, { color: "dark", variant: "transparent", size: "xs", children: /* @__PURE__ */ jsx(IconArrowRight, { style: { width: "80%" } }) }) }),
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  className: edgeTarget,
+                  maw: 160,
+                  mod: {
+                    "likec4-color": e.target.color
+                  },
+                  children: /* @__PURE__ */ jsx(Text, { component: "span", truncate: true, children: e.target.title })
+                }
+              ),
+              /* @__PURE__ */ jsx(Box, { className: edgeLabel, children: /* @__PURE__ */ jsx(Text, { component: "span", truncate: true, children: e.label || "untitled" }) })
+            ]
+          },
+          e.id
+        )) }) }) })
+      ]
+    }
+  );
+};
+export {
+  SelectEdge
+};

package/dist/overlays/edge-details/_types.d.ts

@@ -0,0 +1,14 @@
+import { AddEdgeData } from '../../utils/types';
+import { SharedFlowTypes } from '../shared/xyflow/_types';
+export declare namespace EdgeDetailsFlowTypes {
+    /**
+     * Data that is exclusive to the edge-details overlay. It will be merged into the edge types
+     * provided by SharedFlowTypes.
+     */
+    type EdgeDetailsEdgeData = {
+        technology: string | null;
+        description: string | null;
+    };
+    export type Edge = AddEdgeData<SharedFlowTypes.Edge, EdgeDetailsEdgeData>;
+    export {};
+}

package/dist/overlays/edge-details/use-layouted-edge-details.d.ts

@@ -0,0 +1,21 @@
+import { DiagramEdge, DiagramView, EdgeId } from '@likec4/core';
+import { SharedFlowTypes } from '../shared/xyflow/_types';
+import { EdgeDetailsFlowTypes } from './_types';
+export declare const ZIndexes: {
+    compound: number;
+    edge: number;
+    element: number;
+    max: number;
+};
+export declare function useLayoutedEdgeDetails(edgeId: EdgeId): {
+    view: DiagramView;
+    edge: DiagramEdge;
+    nodes: SharedFlowTypes.Node[];
+    edges: EdgeDetailsFlowTypes.Edge[];
+    bounds: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+};

package/dist/overlays/edge-details/use-layouted-edge-details.js

@@ -0,0 +1,270 @@
+import dagre from "@dagrejs/dagre";
+import { invariant, compareRelations, compareFqnHierarchically, isAncestor } from "@likec4/core";
+import { MarkerType } from "@xyflow/system";
+import { useMemo } from "react";
+import { pipe, sort, reverse, forEach, takeWhile, first, map, sortBy, prop, filter, isTruthy } from "remeda";
+import { useDiagramState } from "../../hooks/useDiagramState.js";
+import { useLikeC4Model } from "../../likec4model/useLikeC4Model.js";
+const Sizes = {
+  dagre: {
+    ranksep: 40,
+    nodesep: 25,
+    edgesep: 15
+  },
+  edgeLabel: {
+    width: 120
+  },
+  nodeWidth: 270,
+  hodeHeight: 160,
+  // Spacer between elements in a compound node
+  // 0 means no spacer
+  spacerHeight: 0,
+  compoundLabelHeight: 5
+};
+const ZIndexes = {
+  compound: 2,
+  edge: 3,
+  element: 4,
+  max: 5
+};
+function createGraph() {
+  const g = new dagre.graphlib.Graph({
+    directed: true,
+    compound: true
+  });
+  g.setGraph({
+    ...Sizes.dagre,
+    rankdir: "LR"
+  });
+  g.setDefaultEdgeLabel(() => ({ ...Sizes.edgeLabel }));
+  g.setDefaultNodeLabel(() => ({}));
+  return g;
+}
+const sized = (height = Sizes.hodeHeight) => ({
+  width: Sizes.nodeWidth,
+  height
+});
+const graphId = (node) => ({
+  id: node.id,
+  port: node.type === "compound" ? `${node.id}::port` : node.id,
+  body: `${node.id}`,
+  spacer: `${node.id}:spacer`
+});
+function nodeData(element, ctx) {
+  var _a;
+  let diagramNode = ctx.diagramNodes.get(element.id);
+  const ancestor = diagramNode ?? pipe(
+    element.ancestors().toArray(),
+    map((ancestor2) => ctx.diagramNodes.get(ancestor2.id)),
+    filter(isTruthy),
+    first()
+  );
+  return {
+    fqn: element.id,
+    element: {
+      kind: element.kind,
+      title: (diagramNode == null ? void 0 : diagramNode.title) ?? element.title,
+      description: (diagramNode == null ? void 0 : diagramNode.description) ?? element.description,
+      color: (diagramNode == null ? void 0 : diagramNode.color) ?? (ancestor == null ? void 0 : ancestor.color) ?? element.color,
+      shape: (diagramNode == null ? void 0 : diagramNode.shape) ?? element.shape
+    },
+    navigateTo: (diagramNode == null ? void 0 : diagramNode.navigateTo) ?? ((_a = first(element.scopedViews().take(1).toArray())) == null ? void 0 : _a.id) ?? null,
+    ports: {
+      in: [],
+      out: []
+    }
+  };
+}
+function createNode(nodeType, element, ctx) {
+  let node = ctx.xynodes.get(element.id);
+  if (node) {
+    return node;
+  }
+  const g = ctx.g;
+  const parent = pipe(
+    element.ancestors().toArray(),
+    takeWhile((ancestor) => !isAncestor(ancestor.id, ctx.edge.source) && !isAncestor(ancestor.id, ctx.edge.target)),
+    first(),
+    (found) => found ? createNode("compound", found, ctx) : null
+  );
+  const xynode = {
+    type: nodeType,
+    id: element.id,
+    position: { x: 0, y: 0 },
+    data: {
+      ...nodeData(element, ctx)
+    },
+    zIndex: ZIndexes[nodeType],
+    ...!!parent && { parentId: parent.id }
+  };
+  ctx.xynodes.set(element.id, xynode);
+  const k = graphId(xynode);
+  g.setNode(k.id, sized());
+  if (xynode.type === "compound") {
+    g.setNode(k.port, {
+      width: Sizes.nodeWidth - Sizes.dagre.ranksep,
+      height: Sizes.compoundLabelHeight
+    });
+    g.setParent(k.port, k.id);
+  }
+  if (parent) {
+    const parentGraphId = graphId(parent).body;
+    g.setParent(k.id, parentGraphId);
+  }
+  return xynode;
+}
+function applyDagreLayout(g) {
+  dagre.layout(g);
+  return function nodeBounds(nodeId, relativeTo) {
+    const { x, y, width, height } = g.node(nodeId);
+    const pos = {
+      position: {
+        x: x - Math.round(width / 2),
+        y: y - Math.round(height / 2)
+      },
+      width,
+      height
+    };
+    if (!relativeTo) {
+      return pos;
+    }
+    const offset = nodeBounds(relativeTo).position;
+    return {
+      position: {
+        x: pos.position.x - offset.x,
+        y: pos.position.y - offset.y
+      },
+      width: pos.width,
+      height: pos.height
+    };
+  };
+}
+function layout(edgeId, view, likec4model) {
+  const edge = view.edges.find((e) => e.id === edgeId);
+  invariant(edge, "edge not found");
+  const all = /* @__PURE__ */ new Set([edge.source, edge.target]);
+  const relations = edge.relations.map((r) => {
+    const relation = likec4model.relationship(r);
+    all.add(relation.source.id);
+    all.add(relation.target.id);
+    return {
+      source: relation.source.id,
+      target: relation.target.id,
+      relation: relation.$relationship
+    };
+  }).sort(compareRelations).reverse();
+  const diagramNodes = new Map(view.nodes.map((n) => [n.id, n]));
+  const g = createGraph();
+  const ctx = {
+    g,
+    xynodes: /* @__PURE__ */ new Map(),
+    edge,
+    diagramNodes,
+    edges: []
+  };
+  pipe(
+    [...all],
+    sort(compareFqnHierarchically),
+    reverse(),
+    forEach((id) => {
+      const element = likec4model.element(id);
+      createNode("element", element, ctx);
+    })
+  );
+  if (relations.length === 1 && all.size < 4) {
+    g.setDefaultEdgeLabel(() => ({ width: 250 }));
+  }
+  for (const { relation, ...points } of relations) {
+    const source = ctx.xynodes.get(points.source);
+    invariant(source, "source node not found");
+    const target = ctx.xynodes.get(points.target);
+    invariant(target, "target node not found");
+    source.data.ports.out.push(target.id);
+    target.data.ports.in.push(source.id);
+    g.setEdge(graphId(source).port, graphId(target).port);
+    const edge2 = {
+      id: relation.id,
+      type: "relation",
+      source: source.id,
+      target: target.id,
+      sourceHandle: target.id,
+      targetHandle: source.id,
+      data: {
+        relations: [relation],
+        navigateTo: relation.navigateTo ?? null,
+        technology: relation.technology ?? null,
+        description: relation.description ?? null
+      },
+      label: relation.title,
+      zIndex: ZIndexes.edge,
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+        width: 10
+      },
+      style: {
+        strokeWidth: 2.2,
+        strokeDasharray: "5, 5"
+      }
+    };
+    ctx.edges.push(edge2);
+  }
+  const nodebounds = applyDagreLayout(ctx.g);
+  const sortedPorts = (ports) => {
+    if (ports.length < 2) {
+      return ports;
+    }
+    return pipe(
+      ports,
+      map((port) => {
+        return {
+          port,
+          topY: nodebounds(port).position.y
+        };
+      }),
+      sortBy(prop("topY")),
+      map(prop("port"))
+    );
+  };
+  const xynodes = [...ctx.xynodes.values()].map((node) => {
+    if (node.data.ports.in.length > 1) {
+      node.data.ports.in = sortedPorts(node.data.ports.in);
+    }
+    if (node.data.ports.out.length > 1) {
+      node.data.ports.out = sortedPorts(node.data.ports.out);
+    }
+    return {
+      ...node,
+      ...nodebounds(node.id, node.parentId)
+    };
+  });
+  return {
+    view,
+    edge,
+    edges: ctx.edges,
+    nodes: xynodes,
+    bounds: {
+      x: 0,
+      y: 0,
+      width: g.graph().width ?? 0,
+      height: g.graph().height ?? 0
+    }
+  };
+}
+function useLayoutedEdgeDetails(edgeId) {
+  const view = useDiagramState((s) => s.view);
+  const likec4model = useLikeC4Model(true);
+  return useMemo(() => layout(
+    edgeId,
+    view,
+    likec4model
+  ), [
+    edgeId,
+    view,
+    likec4model,
+    layout
+  ]);
+}
+export {
+  ZIndexes,
+  useLayoutedEdgeDetails
+};

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

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