@likec4/diagram 1.18.0 → 1.19.1

package/dist/overlays/relationships-of/use-layouted-relationships.js

@@ -0,0 +1,496 @@
+import dagre from "@dagrejs/dagre";
+import { compareNatural, compareByFqnHierarchically, compareRelations, nonNullable, invariant, isAncestor, parentFqn } from "@likec4/core";
+import { MarkerType } from "@xyflow/system";
+import { useMemo } from "react";
+import { forEach, pipe, map, sort, reverse, flatMap, filter, isNonNullish, groupBy, prop, forEachObj, mapToObj, takeWhile, find, only, tap, reduce, sortBy, isTruthy, first } from "remeda";
+import { useLikeC4Model } from "../../likec4model/useLikeC4Model.js";
+const columns = ["incomers", "subjects", "outgoers"];
+const Sizes = {
+  dagre: {
+    ranksep: 60,
+    nodesep: 35,
+    edgesep: 25
+  },
+  edgeLabel: {
+    width: 120,
+    height: 10,
+    minlen: 1,
+    weight: 1
+  },
+  emptyNodeOffset: 120,
+  nodeWidth: 320,
+  hodeHeight: 180,
+  // Spacer between elements in a compound node
+  // 0 means no spacer
+  spacerHeight: 0,
+  compound: {
+    labelHeight: 1,
+    paddingTop: 50,
+    paddingBottom: 32
+  }
+};
+const ZIndexes = {
+  empty: 2,
+  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 ?? (ctx.scope === "view" ? pipe(
+    element.ancestors().toArray(),
+    map((ancestor2) => ctx.diagramNodes.get(ancestor2.id)),
+    filter(isTruthy),
+    first()
+  ) : void 0);
+  return {
+    fqn: element.id,
+    existsInCurrentView: ctx.diagramNodes.has(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 = element.defaultView) == null ? void 0 : _a.id) ?? null,
+    ports: {
+      in: [],
+      out: []
+    }
+  };
+}
+function createEmptyNode(column, ctx) {
+  const id = `${column}__empty`;
+  const xynodes = ctx.columns[column];
+  let node = xynodes.get(id);
+  if (node) {
+    invariant(node.type === "empty", "Node is not empty");
+    return node;
+  }
+  const xynode = {
+    type: "empty",
+    id,
+    position: { x: 0, y: 0 },
+    data: {
+      column,
+      existsInCurrentView: true
+    },
+    zIndex: ZIndexes.empty
+  };
+  xynodes.set(id, xynode);
+  const k = graphId(xynode);
+  const emptyContainer = id + "__container";
+  ctx.g.setNode(emptyContainer, {});
+  ctx.g.setNode(k.id, {
+    width: Sizes.nodeWidth - 20,
+    height: Sizes.hodeHeight
+  });
+  ctx.g.setParent(k.id, emptyContainer);
+  return xynode;
+}
+function createNode(column, nodeType, element, ctx, depth = 0) {
+  const xynodes = ctx.columns[column];
+  let node = xynodes.get(element.id);
+  if (node) {
+    invariant(node.type !== "empty", `Unexpected empty Node type ${element.id}: ${node.type}, expect ${nodeType}`);
+    if (node.type === "element" && nodeType === "compound") {
+      throw new Error(`Unexpected Node type ${element.id}: ${node.type}, expect ${nodeType}`);
+    }
+    return node;
+  }
+  const g = ctx.g;
+  const parent = pipe(
+    element.ancestors().toArray(),
+    takeWhile((ancestor) => !isAncestor(ancestor.id, ctx.subjectId)),
+    find(
+      (ancestor) => ctx.diagramNodes.has(ancestor.id) || ctx.connected[column].has(ancestor.id) || ctx.scope === "global" && ctx.subjectElement.ascendingSiblings().some((s) => s.id === ancestor.id)
+    ),
+    (found) => found ? createNode(column, "compound", found, ctx, depth + 2) : null
+  );
+  const xynode = {
+    type: nodeType,
+    id: `${column}::${element.id}`,
+    position: { x: 0, y: 0 },
+    data: {
+      ...nodeData(element, ctx),
+      column
+    },
+    zIndex: ZIndexes[nodeType],
+    ...!!parent && { parentId: parent.id }
+  };
+  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.compound.labelHeight
+    });
+    g.setParent(k.port, k.id);
+  }
+  if (parent) {
+    parent.data.depth = Math.min(Math.max(parent.data.depth ?? 0, depth + 1), 6);
+    g.setParent(k.id, graphId(parent).body);
+  }
+  return xynode;
+}
+function applyDagreLayout(g) {
+  dagre.layout(g);
+  return function nodeBounds(nodeId) {
+    const { x, y, width, height } = g.node(nodeId);
+    return {
+      position: {
+        x: x - Math.round(width / 2),
+        y: y - Math.round(height / 2)
+      },
+      width,
+      height
+    };
+  };
+}
+function addEdge(ctx, props) {
+  var _a;
+  const { source, target, relations, existsInCurrentView } = props;
+  const ids = relations.map((r) => r.id).join("_");
+  const label = ((_a = only(relations)) == null ? void 0 : _a.title) ?? "untitled";
+  const isMultiple = relations.length > 1;
+  const edge = {
+    id: `rel${ctx.edges.length + 1}_${ids}`,
+    type: "relation",
+    source,
+    target,
+    sourceHandle: target,
+    targetHandle: source,
+    data: {
+      existsInCurrentView,
+      relations
+    },
+    label: isMultiple ? `${relations.length} relationships` : label,
+    zIndex: ZIndexes.edge,
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      width: isMultiple ? 7 : 9
+    },
+    style: {
+      strokeWidth: isMultiple ? 5 : 2.8,
+      strokeDasharray: isMultiple ? void 0 : "5, 5"
+    }
+  };
+  ctx.edges.push(edge);
+}
+function findNodeOrFirstAncestor(fqn, nodes) {
+  let node = nodes.get(fqn);
+  let parent = fqn;
+  while (!node && !!(parent = parentFqn(parent))) {
+    node = nodes.get(parent);
+  }
+  return node;
+}
+function layout(subjectId, view, likec4model, scope) {
+  const diagramNodes = new Map(view.nodes.map((n) => [n.id, n]));
+  const subjectElement = likec4model.element(subjectId);
+  const viewIncludesSubject = diagramNodes.has(subjectId);
+  const viewRelationships = new Set(
+    view.edges.flatMap((e) => e.relations)
+  );
+  const notIncludedRelations = /* @__PURE__ */ new Set();
+  if (!viewIncludesSubject) {
+    scope = "global";
+  } else {
+    forEach([
+      ...subjectElement.incoming().map((r) => r.id),
+      ...subjectElement.outgoing().map((r) => r.id)
+    ], (relationId) => {
+      if (!viewRelationships.has(relationId)) {
+        notIncludedRelations.add(relationId);
+      }
+    });
+  }
+  let relationships;
+  if (scope === "global") {
+    relationships = {
+      incoming: subjectElement.incoming().map((r) => r.$relationship).toArray(),
+      outgoing: subjectElement.outgoing().map((r) => r.$relationship).toArray()
+    };
+  } else {
+    const subjectViewModel = likec4model.view(view.id).node(subjectId);
+    relationships = {
+      incoming: subjectViewModel.incoming().flatMap((c) => c.relationships("model").map((r) => r.$relationship)).toArray(),
+      outgoing: subjectViewModel.outgoing().flatMap((c) => c.relationships("model").map((r) => r.$relationship)).toArray()
+    };
+  }
+  const g = createGraph();
+  const ctx = {
+    scope,
+    g,
+    diagramNodes,
+    subjectElement,
+    subjectId,
+    connected: {
+      incomers: /* @__PURE__ */ new Set(),
+      outgoers: /* @__PURE__ */ new Set(),
+      subjects: /* @__PURE__ */ new Set([subjectId])
+    },
+    columns: {
+      incomers: /* @__PURE__ */ new Map(),
+      subjects: /* @__PURE__ */ new Map(),
+      outgoers: /* @__PURE__ */ new Map()
+    },
+    edges: []
+  };
+  relationships.incoming.forEach((incoming) => {
+    ctx.connected.incomers.add(incoming.source);
+    ctx.connected.subjects.add(incoming.target);
+  });
+  relationships.outgoing.forEach((outgoing) => {
+    ctx.connected.subjects.add(outgoing.source);
+    ctx.connected.outgoers.add(outgoing.target);
+  });
+  if (viewIncludesSubject) {
+    const subjectViewModel = likec4model.view(view.id).node(subjectId);
+    subjectViewModel.incomers().forEach((incomer) => {
+      ctx.connected.incomers.add(incomer.id);
+    });
+    subjectViewModel.outgoers().forEach((outgoer) => {
+      ctx.connected.outgoers.add(outgoer.id);
+    });
+  }
+  columns.forEach((column) => {
+    pipe(
+      [...ctx.connected[column].values()],
+      map((id) => likec4model.element(id)),
+      sort((a, b) => -1 * compareNatural(a.title, b.title)),
+      sort(compareByFqnHierarchically),
+      reverse(),
+      forEach((element) => {
+        createNode(column, "element", element, ctx);
+      })
+    );
+  });
+  pipe(
+    [
+      // Process incoming
+      {
+        sources: ctx.columns.incomers,
+        targets: ctx.columns.subjects,
+        relationships: relationships.incoming.sort(compareRelations).reverse()
+      },
+      // Process outgoing
+      {
+        sources: ctx.columns.subjects,
+        targets: ctx.columns.outgoers,
+        relationships: relationships.outgoing.sort(compareRelations).reverse()
+      }
+    ],
+    /**
+     * We select relationships, sources and targets
+     * If sourece or target of the relationship is not found - take first ancestor
+     */
+    flatMap(({ sources, targets, relationships: relationships2 }) => {
+      return relationships2.map((relation) => {
+        const source = findNodeOrFirstAncestor(relation.source, sources);
+        if (!source || source.type === "empty") {
+          return null;
+        }
+        const target = findNodeOrFirstAncestor(relation.target, targets);
+        if (!target || target.type === "empty") {
+          return null;
+        }
+        return {
+          relation,
+          source,
+          target,
+          existsInCurrentView: viewRelationships.has(relation.id),
+          id: `${source.id}:${target.id}`
+        };
+      });
+    }),
+    filter(isNonNullish),
+    // Group relations with saame source and target - make them one edge
+    groupBy(prop("id")),
+    forEachObj((grouped) => {
+      const { source, target } = grouped[0];
+      const relations = map(grouped, (g2) => g2.relation);
+      source.data.ports.out.push(target.id);
+      target.data.ports.in.push(source.id);
+      source.type === "compound" || target.type === "compound";
+      g.setEdge(graphId(source).port, graphId(target).port, {
+        ...Sizes.edgeLabel
+        // weight: isAnyCompound ? 1 : 2
+      });
+      addEdge(ctx, {
+        // if view does not include subject - do not highlight
+        existsInCurrentView: !viewIncludesSubject || grouped.every((g2) => g2.existsInCurrentView),
+        source: source.id,
+        target: target.id,
+        relations
+      });
+    })
+  );
+  const subjectPort = graphId(ctx.columns.subjects.get(subjectId)).port;
+  if (ctx.columns.incomers.size == 0) {
+    const source = createEmptyNode("incomers", ctx);
+    g.setEdge(graphId(source).port, subjectPort);
+  }
+  if (ctx.columns.outgoers.size == 0) {
+    const target = createEmptyNode("outgoers", ctx);
+    g.setEdge(subjectPort, graphId(target).port);
+  }
+  for (const subject of ctx.columns.subjects.values()) {
+    if (subject.type !== "element") {
+      continue;
+    }
+    const subjectPortsCount = Math.max(subject.data.ports.in.length, subject.data.ports.out.length);
+    if (subjectPortsCount > 2) {
+      g.node(subject.id).height = Sizes.hodeHeight + (subjectPortsCount - 3) * 14;
+    }
+  }
+  const dagreBounds = applyDagreLayout(ctx.g);
+  const xynodes = [
+    ...ctx.columns.incomers.values(),
+    ...ctx.columns.subjects.values(),
+    ...ctx.columns.outgoers.values()
+  ];
+  const _calculatedNodeBounds = pipe(
+    xynodes,
+    filter((n) => n.type !== "compound"),
+    mapToObj((n) => [n.id, dagreBounds(n.id)])
+  );
+  function nodeBounds(nodeId) {
+    return _calculatedNodeBounds[nodeId] ?? (_calculatedNodeBounds[nodeId] = pipe(
+      xynodes,
+      filter((n) => n.parentId === nodeId),
+      map((n) => nodeBounds(n.id)),
+      tap((bounds) => {
+        invariant(bounds.length > 0, `Node ${nodeId} has no nested nodes`);
+      }),
+      reduce((acc, bounds) => {
+        return {
+          minY: Math.min(acc.minY, bounds.position.y),
+          maxY: Math.max(acc.maxY, bounds.position.y + bounds.height)
+        };
+      }, { minY: Infinity, maxY: -Infinity }),
+      ({ minY, maxY }) => {
+        const {
+          position: { x },
+          width
+        } = dagreBounds(nodeId);
+        minY = minY - Sizes.compound.paddingTop;
+        maxY = maxY + Sizes.compound.paddingBottom;
+        return {
+          position: {
+            x,
+            y: minY
+          },
+          width,
+          height: maxY - minY
+        };
+      }
+    ));
+  }
+  for (const node of xynodes) {
+    const { position, width, height } = nodeBounds(node.id);
+    node.width = width;
+    node.height = height;
+    node.position = position;
+    if (node.parentId) {
+      const parentPos = nodeBounds(node.parentId).position;
+      node.position = {
+        x: position.x - parentPos.x,
+        y: position.y - parentPos.y
+      };
+    }
+  }
+  const sortedPorts = (ports) => {
+    return pipe(
+      ports,
+      map((port) => {
+        return {
+          port,
+          topY: nodeBounds(port).position.y
+        };
+      }),
+      sortBy(prop("topY")),
+      map(prop("port"))
+    );
+  };
+  for (const node of xynodes) {
+    if (node.type === "empty") {
+      const subjectBounds = nodeBounds(nonNullable(ctx.columns.subjects.get(subjectId), "Subject node is missing").id);
+      node.height = Math.min(subjectBounds.height, 300);
+      node.position.y = subjectBounds.position.y + subjectBounds.height / 2 - node.height / 2;
+      if (node.data.column === "incomers") {
+        node.width = subjectBounds.position.x - Sizes.emptyNodeOffset - node.position.x;
+      } else {
+        const rightX = node.position.x + node.width;
+        node.position.x = subjectBounds.position.x + subjectBounds.width + Sizes.emptyNodeOffset;
+        node.width = rightX - node.position.x;
+      }
+      continue;
+    }
+    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 {
+    viewIncludesSubject,
+    notIncludedRelations: notIncludedRelations.size,
+    subject: subjectElement,
+    edges: ctx.edges,
+    nodes: xynodes,
+    bounds: {
+      x: 0,
+      y: 0,
+      width: g.graph().width ?? 100,
+      height: g.graph().height ?? 100
+    }
+  };
+}
+function useLayoutedRelationships(subjectId, view, scope) {
+  const likec4model = useLikeC4Model(true);
+  return useMemo(() => layout(
+    subjectId,
+    view,
+    likec4model,
+    scope
+  ), [
+    subjectId,
+    view,
+    likec4model,
+    layout,
+    scope
+  ]);
+}
+export {
+  ZIndexes,
+  useLayoutedRelationships
+};

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

@@ -0,0 +1,6 @@
+import { NodeProps } from '@xyflow/react';
+import { RelationshipsOfFlowTypes } from '../_types';
+import { NamedExoticComponent } from 'react';
+type CompoundNodeProps = NodeProps<RelationshipsOfFlowTypes.CompoundNode>;
+export declare const CompoundNode: NamedExoticComponent<CompoundNodeProps>;
+export {};

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

@@ -0,0 +1,120 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useStore, Handle, Position } from "@xyflow/react";
+import clsx from "clsx";
+import { shallowEqual, deepEqual } from "fast-equals";
+import { m } from "framer-motion";
+import { memo, useCallback } from "react";
+import { compoundNodeBody, compoundNodeTitle } from "./styles.css.js";
+import { Text } from "../../../controls/Text.js";
+const CompoundNode = memo(({
+  id,
+  data: {
+    element,
+    ports,
+    layoutId = id,
+    leaving = false,
+    entering = true,
+    ...data
+  },
+  width = 200,
+  height = 100,
+  ...props
+}) => {
+  const scale = (diff) => ({
+    scaleX: (width + diff) / width,
+    scaleY: (height + diff) / height
+  });
+  let opacity = 1;
+  if (data.dimmed) {
+    opacity = data.dimmed === "immediate" ? 0.05 : 0.15;
+  }
+  if (leaving) {
+    opacity = 0;
+  }
+  const {
+    elementsSelectable
+  } = useStore(
+    useCallback((s) => ({
+      elementsSelectable: s.elementsSelectable
+    }), []),
+    shallowEqual
+  );
+  const selectable = props.selectable ?? elementsSelectable;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      m.div,
+      {
+        className: clsx([
+          compoundNodeBody,
+          "likec4-compound-node"
+        ]),
+        layoutId,
+        "data-compound-depth": data.depth ?? 1,
+        "data-likec4-color": element.color,
+        initial: layoutId === id && entering ? {
+          ...scale(-20),
+          opacity: 0,
+          width,
+          height
+        } : false,
+        animate: {
+          ...scale(0),
+          opacity,
+          width,
+          height,
+          transition: {
+            opacity: {
+              delay: !leaving && data.dimmed === true ? 0.4 : 0,
+              ...(leaving || data.dimmed === "immediate") && {
+                duration: 0.09
+              }
+            }
+          }
+        },
+        ...selectable && {
+          whileHover: {
+            ...scale(12),
+            transition: {
+              delay: 0.1
+            }
+          },
+          whileTap: {
+            ...scale(-8)
+          }
+        },
+        children: /* @__PURE__ */ jsx(Text, { className: compoundNodeTitle, maw: width - 20, children: element.title })
+      }
+    ),
+    ports.in.map((id2, i) => /* @__PURE__ */ jsx(
+      Handle,
+      {
+        id: id2,
+        type: "target",
+        position: Position.Left,
+        style: {
+          visibility: "hidden",
+          top: `${20 * (i + 1)}px`
+        }
+      },
+      id2
+    )),
+    ports.out.map((id2, i) => /* @__PURE__ */ jsx(
+      Handle,
+      {
+        id: id2,
+        type: "source",
+        position: Position.Right,
+        style: {
+          visibility: "hidden",
+          top: `${20 * (i + 1)}px`
+        }
+      },
+      id2
+    ))
+  ] });
+}, (prev, next) => {
+  return deepEqual(prev.data, next.data);
+});
+export {
+  CompoundNode
+};

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

@@ -0,0 +1,6 @@
+import { NodeProps } from '@xyflow/react';
+import { RelationshipsOfFlowTypes } from '../_types';
+import { NamedExoticComponent } from 'react';
+type ElementNodeProps = NodeProps<RelationshipsOfFlowTypes.ElementNode>;
+export declare const ElementNode: NamedExoticComponent<ElementNodeProps>;
+export {};