@likec4/diagram 1.27.0 → 1.27.2

package/dist/overlays/relationship-details/layout.js

@@ -0,0 +1,314 @@
+import dagre from '@dagrejs/dagre';
+import { invariant } from '@likec4/core';
+import { pipe, filter, mapToObj, find, map, tap, reduce, sortBy, prop } from 'remeda';
+import { ifind } from '../../packages/core/src/utils/iterable/find.js';
+import DefaultMap from '../../_virtual/default-map.js';
+import { treeFromElements } from '../../packages/core/src/compute-view/relationships-view/utils.js';
+
+const Sizes = {
+  dagre: {
+    ranksep: 60,
+    nodesep: 35,
+    edgesep: 25
+  },
+  edgeLabel: {
+    width: 220,
+    height: 14
+    // minlen: 1,
+  },
+  nodeWidth: 330,
+  nodeHeight: 180,
+  compound: {
+    labelHeight: 2,
+    paddingTop: 50,
+    paddingBottom: 32
+  }
+};
+function createGraph() {
+  const g = new dagre.graphlib.Graph({
+    directed: true,
+    compound: true,
+    multigraph: true
+  });
+  g.setGraph({
+    ...Sizes.dagre,
+    rankdir: "LR"
+  });
+  g.setDefaultEdgeLabel(() => ({ ...Sizes.edgeLabel }));
+  g.setDefaultNodeLabel(() => ({}));
+  return g;
+}
+const PortSuffix = "-port";
+function createNodes(column, elements, g) {
+  const graphNodes = new DefaultMap((key) => ({
+    id: `${column}-${key}`,
+    portId: `${column}-${key}`
+  }));
+  const tree = treeFromElements(elements);
+  for (const element of tree.sorted) {
+    const isCompound = tree.children(element).length > 0;
+    const fqn = element.id;
+    const id = `${column}-${fqn}`;
+    const portId = isCompound ? `${id}${PortSuffix}` : id;
+    graphNodes.set(fqn, {
+      id,
+      portId
+    });
+    g.setNode(id, {
+      column,
+      element,
+      isCompound,
+      portId,
+      inPorts: [],
+      outPorts: [],
+      width: Sizes.nodeWidth,
+      height: Sizes.nodeHeight
+    });
+    if (isCompound) {
+      g.setNode(portId, {
+        element,
+        portId,
+        isCompound,
+        inPorts: [],
+        outPorts: [],
+        width: Sizes.nodeWidth - Sizes.dagre.ranksep,
+        height: Sizes.compound.labelHeight
+      });
+      g.setParent(portId, id);
+    }
+    const parent = tree.parent(element);
+    if (parent) {
+      g.setParent(id, `${column}-${parent.id}`);
+    }
+  }
+  return {
+    ...tree,
+    byId: (id) => {
+      const element = tree.byId(id);
+      const graph = graphNodes.get(element.id);
+      return {
+        element,
+        graph
+      };
+    },
+    graphNodes
+  };
+}
+function applyDagreLayout(g) {
+  dagre.layout(g, {
+    // disableOptimalOrderHeuristic: true,
+  });
+  return (nodeId) => {
+    const node = g.node(nodeId);
+    const { x, y, width, height } = node;
+    return {
+      position: {
+        x: x - Math.round(width / 2),
+        y: y - Math.round(height / 2)
+      },
+      width,
+      height
+    };
+  };
+}
+function layoutRelationshipDetails(data, scope) {
+  const g = createGraph();
+  const sources = createNodes("sources", data.sources, g), targets = createNodes("targets", data.targets, g);
+  const edges = Array.from(data.relationships).map((r) => {
+    const source = sources.byId(r.source.id).graph;
+    const target = targets.byId(r.target.id).graph;
+    const name = r.id;
+    g.node(source.id).outPorts.push(target.id);
+    g.node(target.id).inPorts.push(source.id);
+    g.setEdge(source.portId, target.portId, {
+      ...Sizes.edgeLabel
+    }, name);
+    return {
+      name,
+      source: source.id,
+      sourceHandle: source.id + "_out" + (g.node(source.id).outPorts.length - 1),
+      target: target.id,
+      targetHandle: target.id + "_in" + (g.node(target.id).inPorts.length - 1),
+      relationship: r
+    };
+  });
+  const nodeIds = [
+    ...sources.graphNodes.values(),
+    ...targets.graphNodes.values()
+  ];
+  for (const { id: nodeId } of nodeIds) {
+    const node = g.node(nodeId);
+    if (node.isCompound) {
+      continue;
+    }
+    const edgeCount2 = Math.max(g.inEdges(nodeId)?.length ?? 0, g.outEdges(nodeId)?.length ?? 0);
+    if (edgeCount2 > 3) {
+      node.height = node.height + (edgeCount2 - 4) * 14;
+    }
+  }
+  const edgeCount = g.edgeCount();
+  if (edgeCount > 5) {
+    for (const edge of g.edges()) {
+      g.setEdge(edge, {
+        ...Sizes.edgeLabel,
+        width: edgeCount > 10 ? 800 : 400
+      });
+    }
+  }
+  const dagreBounds = applyDagreLayout(g);
+  const _calculatedNodeBounds = pipe(
+    nodeIds,
+    // Compound nodes have different portId
+    filter((n) => n.id === n.portId),
+    mapToObj((n) => [n.id, dagreBounds(n.id)])
+  );
+  function nodeBounds(nodeId) {
+    return _calculatedNodeBounds[nodeId] ??= pipe(
+      g.children(nodeId) ?? [],
+      filter((id) => !id.endsWith(PortSuffix)),
+      map((id) => nodeBounds(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: minY2, maxY }) => {
+        const {
+          position: { x },
+          width
+        } = dagreBounds(nodeId);
+        minY2 = minY2 - Sizes.compound.paddingTop;
+        maxY = maxY + Sizes.compound.paddingBottom;
+        return {
+          position: {
+            x,
+            y: minY2
+          },
+          width,
+          height: maxY - minY2
+        };
+      }
+    );
+  }
+  function nodeLevel(nodeId) {
+    const parent = g.parent(nodeId);
+    if (parent) {
+      return nodeLevel(parent) + 1;
+    }
+    return 0;
+  }
+  function nodeDepth(nodeId) {
+    const children = g.children(nodeId) ?? [];
+    if (children.length === 0) {
+      return 0;
+    }
+    return 1 + Math.max(...children.map(nodeDepth));
+  }
+  const sortedPorts = (nodeId, type, ports) => {
+    return pipe(
+      ports,
+      map((port, index) => {
+        return {
+          port: nodeId + "_" + type + index,
+          topY: nodeBounds(port).position.y
+        };
+      }),
+      sortBy(prop("topY")),
+      map(prop("port"))
+    );
+  };
+  let minX = 0;
+  let minY = 0;
+  const nodes = nodeIds.map(({ id }) => {
+    const { element, inPorts, outPorts, column } = g.node(id);
+    let { position, width, height } = nodeBounds(id);
+    const parentId = g.parent(id);
+    const children = (g.children(id) ?? []).filter((c) => !c.endsWith(PortSuffix));
+    minX = Math.min(minX, position.x);
+    minY = Math.min(minY, position.y);
+    const navigateTo = scope ? ifind(element.scopedViews(), (v) => v.id !== scope.id)?.id ?? null : null;
+    const inheritFromNode = scope?.findNodeWithElement(element.id);
+    const scopedAncestor = scope && !inheritFromNode ? ifind(element.ancestors(), (a) => !!scope.findNodeWithElement(a.id))?.id : null;
+    const inheritFromNodeOrAncestor = inheritFromNode ?? (scopedAncestor && scope?.findNodeWithElement(scopedAncestor));
+    return {
+      id,
+      parent: parentId ?? null,
+      position: [position.x, position.y],
+      title: element.title,
+      description: element.description,
+      technology: element.technology,
+      tags: null,
+      links: null,
+      color: inheritFromNodeOrAncestor?.color ?? element.color,
+      shape: inheritFromNode?.shape ?? element.shape,
+      icon: inheritFromNode?.icon ?? element.icon ?? "none",
+      modelRef: element.id,
+      kind: element.kind,
+      level: nodeLevel(id),
+      labelBBox: {
+        x: position.x,
+        y: position.y,
+        width,
+        height
+      },
+      style: {
+        ...(inheritFromNode ?? inheritFromNodeOrAncestor)?.style,
+        ...element.$element.style
+      },
+      navigateTo,
+      ...children.length > 0 && { depth: nodeDepth(id) },
+      children,
+      width,
+      height,
+      column,
+      ports: {
+        in: sortedPorts(id, "in", inPorts),
+        out: sortedPorts(id, "out", outPorts)
+      }
+    };
+  });
+  return {
+    bounds: {
+      x: Math.min(minX, 0),
+      y: Math.min(minY, 0),
+      width: g.graph().width ?? 100,
+      height: g.graph().height ?? 100
+    },
+    nodes,
+    edges: g.edges().reduce((acc, e) => {
+      const edge = g.edge(e);
+      const ename = e.name;
+      if (!ename) {
+        return acc;
+      }
+      const { name, source, target, relationship, sourceHandle, targetHandle } = find(edges, (e2) => e2.name === ename);
+      const label = relationship.title ?? "untitled";
+      const navigateTo = relationship.navigateTo?.id ?? null;
+      const description = relationship.description ?? null;
+      const technology = relationship.technology ?? null;
+      acc.push({
+        id: name,
+        source,
+        sourceHandle,
+        target,
+        targetHandle,
+        label,
+        color: relationship.color,
+        ...navigateTo && { navigateTo },
+        ...description && { description },
+        ...technology && { technology },
+        points: edge.points.map((p) => [p.x, p.y]),
+        line: relationship.line,
+        relationId: relationship.id,
+        parent: null
+      });
+      return acc;
+    }, [])
+  };
+}
+
+export { layoutRelationshipDetails };

package/dist/overlays/relationships-browser/RelationshipsBrowser.d.ts

@@ -1,7 +1,7 @@
 import { RelationshipsBrowserActorRef } from './actor';
 import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
 import { Position } from '@xyflow/system';
-import { NonEmptyArray, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
+import { Fqn, NonEmptyArray, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
 export declare const edgeTypes: {
     relationship: NamedExoticComponent<{
         id: string;
@@ -35,6 +35,8 @@ export declare const edgeTypes: {
             active?: boolean;
             dimmed?: import("../../base").Base.Dimmed;
         } & {
+            sourceFqn: Fqn;
+            targetFqn: Fqn;
             relations: NonEmptyArray<RelationId>;
             color: Color | undefined;
             label: string | null;

package/dist/overlays/relationships-browser/RelationshipsBrowser.js

@@ -8,9 +8,9 @@ import { shallowEqual } from 'fast-equals';
 import { LayoutGroup, AnimatePresence, m } from 'framer-motion';
 import { useRef, memo, useEffect } from 'react';
 import { BaseXYFlow } from '../../base/BaseXYFlow.js';
-import { useRelationshipsView } from './-useRelationshipsView.js';
 import { ViewPadding } from './const.js';
 import { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserState } from './hooks.js';
+import { useRelationshipsView } from './layout.js';
 import { SelectElement } from './SelectElement.js';
 import { RelationshipEdge } from './custom/edgeTypes.js';
 import { EmptyNode, CompoundNode, ElementNode } from './custom/nodeTypes.js';
@@ -124,7 +124,7 @@ const RelationshipsBrowserInner = memo(() => {
     if (instance.viewportInitialized) {
       browser.send({ type: "xyflow.init", instance, store });
     }
-  }, [store, instance, browser]);
+  }, [store, instance.viewportInitialized, browser]);
   const layouted = useRelationshipsView(subjectId, viewId, scope);
   const [historySubjectId, historyOps, { history, current }] = useStateHistory(subjectId);
   useEffect(() => {

package/dist/overlays/relationships-browser/SelectElement.js

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { ancestorsFqn } from '@likec4/core';
 import { useTree, Group, Box, Popover, PopoverTarget, Button, Text, PopoverDropdown, ScrollAreaAutosize, Tree, ActionIcon, Tooltip, SegmentedControl } from '@mantine/core';
 import { IconSelector, IconChevronRight } from '@tabler/icons-react';
@@ -44,8 +44,8 @@ const SelectElement = memo(() => {
     });
     tree.select(subjectId);
   }, [subjectId]);
-  return /* @__PURE__ */ jsxs(Group, { ref: root, gap: "xs", wrap: "nowrap", pos: "relative", children: [
-    enableSelectSubject && /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Group, { ref: root, gap: "xs", pos: "relative", children: [
+    enableSelectSubject && /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", children: [
       /* @__PURE__ */ jsx(
         Box,
         {
@@ -153,7 +153,7 @@ const SelectElement = memo(() => {
         }
       ) })
     ] }),
-    enableChangeScope && /* @__PURE__ */ jsxs(Fragment, { children: [
+    enableChangeScope && /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", children: [
       enableSelectSubject && /* @__PURE__ */ jsx(
         Box,
         {

package/dist/overlays/relationships-browser/_types.d.ts

@@ -33,6 +33,8 @@ export declare namespace RelationshipsBrowserTypes {
     type Node = ElementNode | CompoundNode | EmptyNode;
     type NodeData = Node['data'];
     type EdgeData = Base.EdgeData<{
+        sourceFqn: Fqn;
+        targetFqn: Fqn;
         relations: NonEmptyArray<RelationId>;
         color: Color | undefined;
         label: string | null;