@likec4/diagram 1.19.2 → 1.20.1

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

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

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

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

@@ -1,6 +0,0 @@
-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 {};