@likec4/diagram 1.26.2 → 1.27.1

package/dist/overlays/relationship-details/custom/nodeTypes.js

@@ -1,15 +1,16 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { ElementActions } from "./ElementActions.js";
-import { Handle } from "@xyflow/react";
-import { Position } from "@xyflow/system";
-import { useDiagram } from "../../../hooks/useDiagram.js";
-import { customNode } from "../../../base/primitives/customNode.js";
-import { CompoundNodeContainer } from "../../../base/primitives/compound/CompoundNodeContainer.js";
-import { CompoundTitle } from "../../../base/primitives/compound/CompoundTitle.js";
-import { ElementNodeContainer } from "../../../base/primitives/element/ElementNodeContainer.js";
-import { ElementShape } from "../../../base/primitives/element/ElementShape.js";
-import { ElementTitle } from "../../../base/primitives/element/ElementTitle.js";
-import { ElementDetailsButton } from "../../../base/primitives/element/ElementDetailsButton.js";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { ElementActions } from './ElementActions.js';
+import { Handle } from '@xyflow/react';
+import { Position } from '@xyflow/system';
+import { useDiagram } from '../../../hooks/useDiagram.js';
+import { customNode } from '../../../base/primitives/customNode.js';
+import { CompoundNodeContainer } from '../../../base/primitives/compound/CompoundNodeContainer.js';
+import { CompoundTitle } from '../../../base/primitives/compound/CompoundTitle.js';
+import { ElementNodeContainer } from '../../../base/primitives/element/ElementNodeContainer.js';
+import { ElementShape } from '../../../base/primitives/element/ElementShape.js';
+import { ElementTitle } from '../../../base/primitives/element/ElementTitle.js';
+import { ElementDetailsButton } from '../../../base/primitives/element/ElementDetailsButton.js';
+
 const ElementDetailsButtonWithHandler = (props) => {
   const diagram = useDiagram();
   return /* @__PURE__ */ jsx(
@@ -23,24 +24,22 @@ const ElementDetailsButtonWithHandler = (props) => {
     }
   );
 };
-const nodeTypes = {
-  element: customNode((props) => {
-    return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
-      /* @__PURE__ */ jsx(ElementShape, { ...props }),
-      /* @__PURE__ */ jsx(ElementTitle, { ...props, iconSize: 40 }),
-      /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
-      /* @__PURE__ */ jsx(ElementActions, { ...props }),
-      /* @__PURE__ */ jsx(ElementPorts, { ...props })
-    ] });
-  }),
-  compound: customNode((props) => {
-    return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
-      /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
-      /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
-      /* @__PURE__ */ jsx(CompoundPorts, { ...props })
-    ] });
-  })
-};
+const ElementNode = customNode((props) => {
+  return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
+    /* @__PURE__ */ jsx(ElementShape, { ...props }),
+    /* @__PURE__ */ jsx(ElementTitle, { ...props, iconSize: 40 }),
+    /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
+    /* @__PURE__ */ jsx(ElementActions, { ...props }),
+    /* @__PURE__ */ jsx(ElementPorts, { ...props })
+  ] });
+});
+const CompoundNode = customNode((props) => {
+  return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
+    /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
+    /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+    /* @__PURE__ */ jsx(CompoundPorts, { ...props })
+  ] });
+});
 const ElementPorts = ({ data: { ports, height: h } }) => {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     ports.in.map((id, i) => /* @__PURE__ */ jsx(
@@ -99,8 +98,5 @@ const CompoundPorts = ({ data }) => /* @__PURE__ */ jsxs(Fragment, { children: [
     id
   ))
 ] });
-export {
-  CompoundPorts,
-  ElementPorts,
-  nodeTypes
-};
+
+export { CompoundNode, CompoundPorts, ElementNode, ElementPorts };

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

@@ -1,8 +1,9 @@
-import { nonNullable } from "@likec4/core";
-import { useCallbackRef } from "@mantine/hooks";
-import { useSelector } from "@xstate/react";
-import { shallowEqual } from "fast-equals";
-import { createContext, useTransition, useMemo, useContext } from "react";
+import { nonNullable } from '@likec4/core';
+import { useCallbackRef } from '@mantine/hooks';
+import { useSelector } from '@xstate/react';
+import { shallowEqual } from 'fast-equals';
+import { createContext, useTransition, useMemo, useContext } from 'react';
+
 const RelationshipDetailsActorContext = createContext(null);
 function useRelationshipDetailsActor() {
   return nonNullable(useContext(RelationshipDetailsActorContext), "No RelationshipDetailsActorContext");
@@ -33,18 +34,13 @@ function useRelationshipDetails() {
       });
     },
     close: () => {
-      var _a;
       if (actor._parent) {
-        (_a = actor._parent) == null ? void 0 : _a.send({ type: "close", actorId: actor.id });
+        actor._parent?.send({ type: "close", actorId: actor.id });
       } else {
         actor.send({ type: "close" });
       }
     }
   }), [actor]);
 }
-export {
-  RelationshipDetailsActorContext,
-  useRelationshipDetails,
-  useRelationshipDetailsActor,
-  useRelationshipDetailsState
-};
+
+export { RelationshipDetailsActorContext, useRelationshipDetails, useRelationshipDetailsActor, useRelationshipDetailsState };

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

@@ -1,8 +1,9 @@
-import dagre from "@dagrejs/dagre";
-import { invariant, compareRelations, compareFqnHierarchically, isAncestor } from "@likec4/core";
-import { useMemo } from "react";
-import { pipe, sort, reverse, forEach, takeWhile, first, map, sortBy, prop, filter, isTruthy } from "remeda";
-import { useLikeC4Model } from "../../likec4model/useLikeC4Model.js";
+import dagre from '@dagrejs/dagre';
+import { invariant, compareRelations, compareFqnHierarchically, isAncestor } from '@likec4/core';
+import { useMemo } from 'react';
+import { pipe, sort, reverse, forEach, takeWhile, first, map, sortBy, prop, filter, isTruthy } from 'remeda';
+import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
+
 const Sizes = {
   dagre: {
     ranksep: 60,
@@ -47,24 +48,23 @@ const graphId = (node) => ({
   port: node.type === "compound" ? `${node.id}::port` : node.id
 });
 function nodeData(element, ctx) {
-  var _a;
   let diagramNode = ctx.diagramNodes.get(element.id);
   const ancestor = diagramNode ?? pipe(
-    element.ancestors().toArray(),
+    [...element.ancestors()],
     map((ancestor2) => ctx.diagramNodes.get(ancestor2.id)),
     filter(isTruthy),
     first()
   );
   return {
     fqn: element.id,
-    title: (diagramNode == null ? void 0 : diagramNode.title) ?? element.title,
-    technology: (diagramNode == null ? void 0 : diagramNode.technology) ?? element.technology,
-    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,
-    icon: (diagramNode == null ? void 0 : diagramNode.icon) ?? element.icon ?? "none",
-    style: (diagramNode == null ? void 0 : diagramNode.style) ?? element.$element.style ?? {},
-    navigateTo: (diagramNode == null ? void 0 : diagramNode.navigateTo) ?? ((_a = first(element.scopedViews().take(1).toArray())) == null ? void 0 : _a.id) ?? null,
+    title: diagramNode?.title ?? element.title,
+    technology: diagramNode?.technology ?? element.technology,
+    description: diagramNode?.description ?? element.description,
+    color: diagramNode?.color ?? ancestor?.color ?? element.color,
+    shape: diagramNode?.shape ?? element.shape,
+    icon: diagramNode?.icon ?? element.icon ?? "none",
+    style: diagramNode?.style ?? element.$element.style ?? {},
+    navigateTo: diagramNode?.navigateTo ?? first(element.scopedViews().take(1).toArray())?.id ?? null,
     width: 0,
     height: 0,
     depth: 1,
@@ -263,7 +263,5 @@ function useLayoutedDetails(edgeId, view) {
     layout
   ]);
 }
-export {
-  ZIndexes,
-  useLayoutedDetails
-};
+
+export { ZIndexes, useLayoutedDetails };

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

@@ -1,14 +1,10 @@
+import { RelationshipsViewData } from '@likec4/core/compute-view/relationships';
 import { DiagramEdge, DiagramNode, DiagramView, ElementKind, Fqn, ViewId } from '@likec4/core/types';
-import { ElementModel, RelationshipModel } from '@likec4/core';
+import { AnyAux, LikeC4ViewModel } from '@likec4/core/model';
 import { RelationshipsBrowserTypes } from './_types';
-export type RelationshipsViewData = {
-    incomers: ReadonlySet<ElementModel>;
-    incoming: ReadonlySet<RelationshipModel>;
-    subjects: ReadonlySet<ElementModel>;
-    outgoing: ReadonlySet<RelationshipModel>;
-    outgoers: ReadonlySet<ElementModel>;
-};
 export type LayoutRelationshipsViewResult = {
+    subject: Fqn;
+    subjectExistsInScope: boolean;
     nodes: LayoutRelationshipsViewResult.Node[];
     edges: LayoutRelationshipsViewResult.Edge[];
     bounds: DiagramView['bounds'];
@@ -18,25 +14,13 @@ export declare namespace LayoutRelationshipsViewResult {
     type Node = DiagramNode & {
         column: RelationshipsBrowserTypes.Column;
         ports: RelationshipsBrowserTypes.Ports;
+        existsInCurrentView: boolean;
     };
     type Edge = DiagramEdge & {
         sourceHandle: string;
         targetHandle: string;
+        existsInCurrentView: boolean;
     };
 }
-export declare function layoutRelationshipsView(data: RelationshipsViewData): LayoutRelationshipsViewResult;
-export declare function useRelationshipsView(fqn: Fqn): {
-    nodes: LayoutRelationshipsViewResult.Node[];
-    edges: LayoutRelationshipsViewResult.Edge[];
-    bounds: DiagramView["bounds"];
-    id: ViewId;
-    title: string;
-    description: null;
-    autoLayout: {
-        direction: string;
-    };
-    tags: null;
-    links: null;
-    hash: string;
-    customColorDefinitions: {};
-};
+export declare function layoutRelationshipsView(data: RelationshipsViewData, scope: LikeC4ViewModel<AnyAux> | null): Omit<LayoutRelationshipsViewResult, 'subject'>;
+export declare function useRelationshipsView(subject: Fqn, viewId: ViewId | null, scope: 'global' | 'view'): LayoutRelationshipsViewResult;

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

@@ -1,8 +1,11 @@
-import { computeRelationshipsView, toArray, sortParentsFirst, invariant, DefaultMap, isDescendantOf, isAncestor, nonNullable } from "@likec4/core";
-import { useMemo } from "react";
-import dagre from "@dagrejs/dagre";
-import { pipe, concat, map, groupBy, prop, forEachObj, filter, mapToObj, find, only, hasAtLeast, tap, reduce, sortBy } from "remeda";
-import { useLikeC4Model } from "../../likec4model/useLikeC4Model.js";
+import { useMemo } from 'react';
+import dagre from '@dagrejs/dagre';
+import { toArray, invariant, ifind, DefaultMap } from '@likec4/core';
+import { pipe, concat, map, groupBy, prop, forEachObj, filter, mapToObj, find, only, unique, tap, reduce, sortBy } from 'remeda';
+import { useLikeC4Model } from '../../likec4model/useLikeC4Model.js';
+import { computeRelationshipsView } from '../../packages/core/src/compute-view/relationships-view/compute.js';
+import { treeFromElements } from '../../packages/core/src/compute-view/relationships-view/utils.js';
+
 const Sizes = {
   dagre: {
     ranksep: 60,
@@ -39,35 +42,6 @@ function createGraph() {
   return g;
 }
 const PortSuffix = "-port";
-function treeFromElements(elements) {
-  const sorted = sortParentsFirst([...elements]);
-  const root = new Set(sorted);
-  const map2 = new Map(sorted.map((e) => [e.id, e]));
-  const parents = new DefaultMap(() => null);
-  const children = sorted.reduce((acc, parent, index, all) => {
-    acc.set(
-      parent,
-      all.slice(index + 1).filter(isDescendantOf(parent)).map((e) => {
-        root.delete(e);
-        return e;
-      }).reduce((acc2, el) => {
-        if (!acc2.some(isAncestor(el))) {
-          acc2.push(el);
-          parents.set(el, parent);
-        }
-        return acc2;
-      }, [])
-    );
-    return acc;
-  }, new DefaultMap(() => []));
-  return {
-    sorted,
-    byId: (id) => nonNullable(map2.get(id), `Element not found by id: ${id}`),
-    root,
-    parent: (el) => parents.get(el),
-    children: (el) => children.get(el)
-  };
-}
 function createNodes(column, elements, g) {
   const graphNodes = new DefaultMap((key) => ({
     id: `${column}-${key}`,
@@ -144,8 +118,7 @@ var LayoutRelationshipsViewResult;
 ((LayoutRelationshipsViewResult2) => {
   LayoutRelationshipsViewResult2.Empty = "@empty";
 })(LayoutRelationshipsViewResult || (LayoutRelationshipsViewResult = {}));
-function layoutRelationshipsView(data) {
-  var _a, _b;
+function layoutRelationshipsView(data, scope) {
   const g = createGraph();
   const incomers = createNodes("incomers", data.incomers, g), subjects = createNodes("subjects", data.subjects, g), outgoers = createNodes("outgoers", data.outgoers, g);
   const edges = [];
@@ -158,9 +131,7 @@ function layoutRelationshipsView(data) {
           source: incomers.byId(r.source.id).graph,
           target: subjects.byId(r.target.id).graph,
           relation: r
-        })),
-        // Sort by source
-        sortParentsFirst
+        }))
       ),
       pipe(
         toArray(data.outgoing),
@@ -169,9 +140,7 @@ function layoutRelationshipsView(data) {
           source: subjects.byId(r.source.id).graph,
           target: outgoers.byId(r.target.id).graph,
           relation: r
-        })),
-        // Sort by target
-        sortParentsFirst
+        }))
       )
     ),
     map((r) => ({
@@ -205,7 +174,7 @@ function layoutRelationshipsView(data) {
     if (node.isCompound) {
       continue;
     }
-    const edgeCount2 = Math.max(((_a = g.inEdges(nodeId)) == null ? void 0 : _a.length) ?? 0, ((_b = g.outEdges(nodeId)) == null ? void 0 : _b.length) ?? 0);
+    const edgeCount2 = Math.max(g.inEdges(nodeId)?.length ?? 0, g.outEdges(nodeId)?.length ?? 0);
     if (edgeCount2 > 2) {
       node.height = node.height + (edgeCount2 - 3) * 14;
     }
@@ -272,7 +241,7 @@ function layoutRelationshipsView(data) {
     mapToObj((n) => [n.id, dagreBounds(n.id)])
   );
   function nodeBounds(nodeId) {
-    return _calculatedNodeBounds[nodeId] ?? (_calculatedNodeBounds[nodeId] = pipe(
+    return _calculatedNodeBounds[nodeId] ??= pipe(
       g.children(nodeId) ?? [],
       filter((id) => !id.endsWith(PortSuffix)),
       map((id) => nodeBounds(id)),
@@ -301,7 +270,7 @@ function layoutRelationshipsView(data) {
           height: maxY - minY2
         };
       }
-    ));
+    );
   }
   function nodeLevel(nodeId) {
     const parent = g.parent(nodeId);
@@ -336,7 +305,6 @@ function layoutRelationshipsView(data) {
   invariant(subject, "Subjects should not be empty");
   let subjectBounds = nodeBounds(subjects.graphNodes.get(subject.id).id);
   const nodes = nodeIds.map(({ id }) => {
-    var _a2;
     const { element, inPorts, outPorts, column } = g.node(id);
     let { position, width, height } = nodeBounds(id);
     if (!element) {
@@ -381,14 +349,18 @@ function layoutRelationshipsView(data) {
         ports: {
           in: [],
           out: []
-        }
+        },
+        existsInCurrentView: false
       };
     }
     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 = ((_a2 = element.defaultView) == null ? void 0 : _a2.id) ?? null;
+    const navigateTo = element.defaultView?.id ?? 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,
@@ -398,9 +370,9 @@ function layoutRelationshipsView(data) {
       technology: element.technology,
       tags: null,
       links: null,
-      color: element.color,
-      shape: element.shape,
-      icon: element.icon ?? "none",
+      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),
@@ -411,6 +383,7 @@ function layoutRelationshipsView(data) {
         height
       },
       style: {
+        ...(inheritFromNode ?? inheritFromNodeOrAncestor)?.style,
         ...element.$element.style
       },
       navigateTo,
@@ -424,10 +397,12 @@ function layoutRelationshipsView(data) {
       ports: {
         in: sortedPorts(id, "in", inPorts),
         out: sortedPorts(id, "out", outPorts)
-      }
+      },
+      existsInCurrentView: !!inheritFromNode
     };
   });
   return {
+    subjectExistsInScope: !scope || scope.includesElement(subject.id),
     bounds: {
       x: Math.min(minX, 0),
       y: Math.min(minY, 0),
@@ -436,7 +411,6 @@ function layoutRelationshipsView(data) {
     },
     nodes,
     edges: g.edges().reduce((acc, e) => {
-      var _a2;
       const edge = g.edge(e);
       const ename = e.name;
       if (!ename) {
@@ -444,13 +418,9 @@ function layoutRelationshipsView(data) {
       }
       const { name, source, target, relations, sourceHandle, targetHandle } = find(edges, (e2) => e2.name === ename);
       const onlyRelation = only(relations);
-      const label = (onlyRelation == null ? void 0 : onlyRelation.title) ?? "untitled";
+      const label = onlyRelation?.title ?? "untitled";
       const isMultiple = relations.length > 1;
-      const points = edge.points.map((p) => [p.x, p.y]);
-      if (!hasAtLeast(points, 1)) {
-        return acc;
-      }
-      const navigateTo = ((_a2 = onlyRelation == null ? void 0 : onlyRelation.navigateTo) == null ? void 0 : _a2.id) ?? null;
+      const navigateTo = only(unique(relations.flatMap((r) => r.navigateTo?.id ? r.navigateTo.id : [])));
       acc.push({
         id: name,
         source,
@@ -458,38 +428,33 @@ function layoutRelationshipsView(data) {
         target,
         targetHandle,
         label: isMultiple ? `${relations.length} relationships` : label,
-        relations: relations.map((r) => r.id),
-        parent: null,
-        points,
         ...navigateTo && { navigateTo },
-        head: "normal",
-        tail: "none",
-        line: (onlyRelation == null ? void 0 : onlyRelation.$relationship.line) ?? "dashed"
+        existsInCurrentView: !scope || relations.every((r) => scope.includesRelation(r.id)),
+        points: edge.points.map((p) => [p.x, p.y]),
+        line: onlyRelation?.$relationship.line ?? "dashed",
+        relations: relations.map((r) => r.id),
+        parent: null
       });
       return acc;
     }, [])
   };
 }
-function useRelationshipsView(fqn) {
+function useRelationshipsView(subject, viewId, scope) {
   const model = useLikeC4Model(true);
   return useMemo(() => {
-    return {
-      id: `relationships-${fqn}`,
-      title: `Relationships of ${fqn}`,
-      description: null,
-      autoLayout: {
-        direction: "LR"
-      },
-      tags: null,
-      links: null,
-      hash: "empty",
-      customColorDefinitions: {},
-      ...layoutRelationshipsView(computeRelationshipsView(fqn, model))
-    };
-  }, [model, fqn, computeRelationshipsView]);
+    const view = viewId ? model.findView(viewId) : null;
+    const data = layoutRelationshipsView(
+      computeRelationshipsView(subject, model, viewId, scope),
+      scope === "view" ? view : null
+    );
+    if (view && (scope === "global" || !data.subjectExistsInScope)) {
+      data.edges = data.edges.map((edge) => {
+        edge.existsInCurrentView = edge.relations.every((r) => view.includesRelation(r));
+        return edge;
+      });
+    }
+    return Object.assign(data, { subject });
+  }, [model, subject, viewId, scope, computeRelationshipsView]);
 }
-export {
-  LayoutRelationshipsViewResult,
-  layoutRelationshipsView,
-  useRelationshipsView
-};
+
+export { LayoutRelationshipsViewResult, layoutRelationshipsView, useRelationshipsView };

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

@@ -1,4 +1,52 @@
 import { RelationshipsBrowserActorRef } from './actor';
+import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
+import { Position } from '@xyflow/system';
+import { NonEmptyArray, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
+export declare const edgeTypes: {
+    relationship: NamedExoticComponent<{
+        id: string;
+        selected?: boolean;
+        selectable?: boolean;
+        deletable?: boolean;
+        style?: CSSProperties;
+        source: string;
+        target: string;
+        animated?: boolean;
+        sourceX: number;
+        sourceY: number;
+        targetX: number;
+        targetY: number;
+        sourcePosition: Position;
+        targetPosition: Position;
+        label?: ReactNode;
+        labelStyle?: CSSProperties;
+        labelShowBg?: boolean;
+        labelBgStyle?: CSSProperties;
+        labelBgPadding?: [number, number];
+        labelBgBorderRadius?: number;
+        sourceHandleId?: string | null;
+        targetHandleId?: string | null;
+        markerStart?: string;
+        markerEnd?: string;
+        pathOptions?: any;
+        interactionWidth?: number;
+        data: {
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: import("../../base").Base.Dimmed;
+        } & {
+            relations: NonEmptyArray<RelationId>;
+            color: Color | undefined;
+            label: string | null;
+            navigateTo: ViewId | null;
+            line: RelationshipLineType;
+            existsInCurrentView: boolean;
+            hovered?: boolean;
+            active?: boolean;
+            dimmed?: import("../../base").Base.Dimmed;
+        };
+    }>;
+};
 export type RelationshipsBrowserProps = {
     actorRef: RelationshipsBrowserActorRef;
 };