@likec4/diagram 1.27.1 → 1.27.2

package/dist/overlays/relationship-details/hooks.d.ts

@@ -1,14 +1,23 @@
-import { EdgeId, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
-import { RelationshipDetailsActorRef, RelationshipDetailsSnapshot, Input, Events } from './actor';
+import { EdgeId, Fqn, ViewId, RelationId, Color, RelationshipLineType, BBox } from '@likec4/core';
+import { RelationshipDetailsActorRef, RelationshipDetailsSnapshot, Events } from './actor';
 import { Context, ReactNode, CSSProperties } from 'react';
-import { GeneralHelpers, ViewportHelperFunctions } from '@xyflow/react';
+import { GeneralHelpers, ViewportHelperFunctions, ReactFlowState } from '@xyflow/react';
 import { EdgeMarkerType, HandleType } from '@xyflow/system';
 export declare const RelationshipDetailsActorContext: Context<RelationshipDetailsActorRef | null>;
 export declare function useRelationshipDetailsActor(): RelationshipDetailsActorRef;
 export declare function useRelationshipDetailsState<T = unknown>(selector: (state: RelationshipDetailsSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
 export declare function useRelationshipDetails(): {
     actor: RelationshipDetailsActorRef;
-    getState: () => Readonly< Input & {
+    readonly rootElementId: string;
+    getState: () => Readonly<{
+        subject: {
+            edgeId: EdgeId;
+        } | {
+            source: Fqn;
+            target: Fqn;
+            edgeId?: never;
+        };
+        viewId: ViewId;
         xyflow: ( GeneralHelpers<import("./_types").RelationshipDetailsTypes.Node, {
             id: string;
             source: string;
@@ -51,12 +60,333 @@ export declare function useRelationshipDetails(): {
         }> & Omit< ViewportHelperFunctions, "initialized"> & {
             viewportInitialized: boolean;
         }) | null;
-        initialized: boolean;
+        xystore: {
+            getState: () => ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
+                id: string;
+                source: string;
+                target: string;
+                sourceHandle?: string | null;
+                targetHandle?: string | null;
+                animated?: boolean;
+                hidden?: boolean;
+                deletable?: boolean;
+                selectable?: boolean;
+                selected?: boolean;
+                markerStart?: EdgeMarkerType;
+                markerEnd?: EdgeMarkerType;
+                zIndex?: number;
+                ariaLabel?: string;
+                interactionWidth?: number;
+                label?: ReactNode;
+                labelStyle?: CSSProperties;
+                labelShowBg?: boolean;
+                labelBgStyle?: CSSProperties;
+                labelBgPadding?: [number, number];
+                labelBgBorderRadius?: number;
+                style?: CSSProperties;
+                className?: string;
+                reconnectable?: boolean | HandleType;
+                focusable?: boolean;
+                type: "relationship";
+                data: {
+                    relationId: RelationId;
+                    color: Color | undefined;
+                    label: string | null;
+                    technology?: string | undefined | undefined;
+                    description?: string | undefined | undefined;
+                    navigateTo: ViewId | null;
+                    line: RelationshipLineType;
+                    hovered?: boolean;
+                    active?: boolean;
+                    dimmed?: import("../../base").Base.Dimmed;
+                };
+            }>;
+            setState: (partial: ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
+                id: string;
+                source: string;
+                target: string;
+                sourceHandle?: string | null;
+                targetHandle?: string | null;
+                animated?: boolean;
+                hidden?: boolean;
+                deletable?: boolean;
+                selectable?: boolean;
+                selected?: boolean;
+                markerStart?: EdgeMarkerType;
+                markerEnd?: EdgeMarkerType;
+                zIndex?: number;
+                ariaLabel?: string;
+                interactionWidth?: number;
+                label?: ReactNode;
+                labelStyle?: CSSProperties;
+                labelShowBg?: boolean;
+                labelBgStyle?: CSSProperties;
+                labelBgPadding?: [number, number];
+                labelBgBorderRadius?: number;
+                style?: CSSProperties;
+                className?: string;
+                reconnectable?: boolean | HandleType;
+                focusable?: boolean;
+                type: "relationship";
+                data: {
+                    relationId: RelationId;
+                    color: Color | undefined;
+                    label: string | null;
+                    technology?: string | undefined | undefined;
+                    description?: string | undefined | undefined;
+                    navigateTo: ViewId | null;
+                    line: RelationshipLineType;
+                    hovered?: boolean;
+                    active?: boolean;
+                    dimmed?: import("../../base").Base.Dimmed;
+                };
+            }> | Partial< ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
+                id: string;
+                source: string;
+                target: string;
+                sourceHandle?: string | null;
+                targetHandle?: string | null;
+                animated?: boolean;
+                hidden?: boolean;
+                deletable?: boolean;
+                selectable?: boolean;
+                selected?: boolean;
+                markerStart?: EdgeMarkerType;
+                markerEnd?: EdgeMarkerType;
+                zIndex?: number;
+                ariaLabel?: string;
+                interactionWidth?: number;
+                label?: ReactNode;
+                labelStyle?: CSSProperties;
+                labelShowBg?: boolean;
+                labelBgStyle?: CSSProperties;
+                labelBgPadding?: [number, number];
+                labelBgBorderRadius?: number;
+                style?: CSSProperties;
+                className?: string;
+                reconnectable?: boolean | HandleType;
+                focusable?: boolean;
+                type: "relationship";
+                data: {
+                    relationId: RelationId;
+                    color: Color | undefined;
+                    label: string | null;
+                    technology?: string | undefined | undefined;
+                    description?: string | undefined | undefined;
+                    navigateTo: ViewId | null;
+                    line: RelationshipLineType;
+                    hovered?: boolean;
+                    active?: boolean;
+                    dimmed?: import("../../base").Base.Dimmed;
+                };
+            }>> | ((state: ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
+                id: string;
+                source: string;
+                target: string;
+                sourceHandle?: string | null;
+                targetHandle?: string | null;
+                animated?: boolean;
+                hidden?: boolean;
+                deletable?: boolean;
+                selectable?: boolean;
+                selected?: boolean;
+                markerStart?: EdgeMarkerType;
+                markerEnd?: EdgeMarkerType;
+                zIndex?: number;
+                ariaLabel?: string;
+                interactionWidth?: number;
+                label?: ReactNode;
+                labelStyle?: CSSProperties;
+                labelShowBg?: boolean;
+                labelBgStyle?: CSSProperties;
+                labelBgPadding?: [number, number];
+                labelBgBorderRadius?: number;
+                style?: CSSProperties;
+                className?: string;
+                reconnectable?: boolean | HandleType;
+                focusable?: boolean;
+                type: "relationship";
+                data: {
+                    relationId: RelationId;
+                    color: Color | undefined;
+                    label: string | null;
+                    technology?: string | undefined | undefined;
+                    description?: string | undefined | undefined;
+                    navigateTo: ViewId | null;
+                    line: RelationshipLineType;
+                    hovered?: boolean;
+                    active?: boolean;
+                    dimmed?: import("../../base").Base.Dimmed;
+                };
+            }>) => ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
+                id: string;
+                source: string;
+                target: string;
+                sourceHandle?: string | null;
+                targetHandle?: string | null;
+                animated?: boolean;
+                hidden?: boolean;
+                deletable?: boolean;
+                selectable?: boolean;
+                selected?: boolean;
+                markerStart?: EdgeMarkerType;
+                markerEnd?: EdgeMarkerType;
+                zIndex?: number;
+                ariaLabel?: string;
+                interactionWidth?: number;
+                label?: ReactNode;
+                labelStyle?: CSSProperties;
+                labelShowBg?: boolean;
+                labelBgStyle?: CSSProperties;
+                labelBgPadding?: [number, number];
+                labelBgBorderRadius?: number;
+                style?: CSSProperties;
+                className?: string;
+                reconnectable?: boolean | HandleType;
+                focusable?: boolean;
+                type: "relationship";
+                data: {
+                    relationId: RelationId;
+                    color: Color | undefined;
+                    label: string | null;
+                    technology?: string | undefined | undefined;
+                    description?: string | undefined | undefined;
+                    navigateTo: ViewId | null;
+                    line: RelationshipLineType;
+                    hovered?: boolean;
+                    active?: boolean;
+                    dimmed?: import("../../base").Base.Dimmed;
+                };
+            }> | Partial< ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
+                id: string;
+                source: string;
+                target: string;
+                sourceHandle?: string | null;
+                targetHandle?: string | null;
+                animated?: boolean;
+                hidden?: boolean;
+                deletable?: boolean;
+                selectable?: boolean;
+                selected?: boolean;
+                markerStart?: EdgeMarkerType;
+                markerEnd?: EdgeMarkerType;
+                zIndex?: number;
+                ariaLabel?: string;
+                interactionWidth?: number;
+                label?: ReactNode;
+                labelStyle?: CSSProperties;
+                labelShowBg?: boolean;
+                labelBgStyle?: CSSProperties;
+                labelBgPadding?: [number, number];
+                labelBgBorderRadius?: number;
+                style?: CSSProperties;
+                className?: string;
+                reconnectable?: boolean | HandleType;
+                focusable?: boolean;
+                type: "relationship";
+                data: {
+                    relationId: RelationId;
+                    color: Color | undefined;
+                    label: string | null;
+                    technology?: string | undefined | undefined;
+                    description?: string | undefined | undefined;
+                    navigateTo: ViewId | null;
+                    line: RelationshipLineType;
+                    hovered?: boolean;
+                    active?: boolean;
+                    dimmed?: import("../../base").Base.Dimmed;
+                };
+            }>>), replace?: boolean | undefined) => void;
+            subscribe: (listener: (state: ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
+                id: string;
+                source: string;
+                target: string;
+                sourceHandle?: string | null;
+                targetHandle?: string | null;
+                animated?: boolean;
+                hidden?: boolean;
+                deletable?: boolean;
+                selectable?: boolean;
+                selected?: boolean;
+                markerStart?: EdgeMarkerType;
+                markerEnd?: EdgeMarkerType;
+                zIndex?: number;
+                ariaLabel?: string;
+                interactionWidth?: number;
+                label?: ReactNode;
+                labelStyle?: CSSProperties;
+                labelShowBg?: boolean;
+                labelBgStyle?: CSSProperties;
+                labelBgPadding?: [number, number];
+                labelBgBorderRadius?: number;
+                style?: CSSProperties;
+                className?: string;
+                reconnectable?: boolean | HandleType;
+                focusable?: boolean;
+                type: "relationship";
+                data: {
+                    relationId: RelationId;
+                    color: Color | undefined;
+                    label: string | null;
+                    technology?: string | undefined | undefined;
+                    description?: string | undefined | undefined;
+                    navigateTo: ViewId | null;
+                    line: RelationshipLineType;
+                    hovered?: boolean;
+                    active?: boolean;
+                    dimmed?: import("../../base").Base.Dimmed;
+                };
+            }>, prevState: ReactFlowState<import("./_types").RelationshipDetailsTypes.Node, {
+                id: string;
+                source: string;
+                target: string;
+                sourceHandle?: string | null;
+                targetHandle?: string | null;
+                animated?: boolean;
+                hidden?: boolean;
+                deletable?: boolean;
+                selectable?: boolean;
+                selected?: boolean;
+                markerStart?: EdgeMarkerType;
+                markerEnd?: EdgeMarkerType;
+                zIndex?: number;
+                ariaLabel?: string;
+                interactionWidth?: number;
+                label?: ReactNode;
+                labelStyle?: CSSProperties;
+                labelShowBg?: boolean;
+                labelBgStyle?: CSSProperties;
+                labelBgPadding?: [number, number];
+                labelBgBorderRadius?: number;
+                style?: CSSProperties;
+                className?: string;
+                reconnectable?: boolean | HandleType;
+                focusable?: boolean;
+                type: "relationship";
+                data: {
+                    relationId: RelationId;
+                    color: Color | undefined;
+                    label: string | null;
+                    technology?: string | undefined | undefined;
+                    description?: string | undefined | undefined;
+                    navigateTo: ViewId | null;
+                    line: RelationshipLineType;
+                    hovered?: boolean;
+                    active?: boolean;
+                    dimmed?: import("../../base").Base.Dimmed;
+                };
+            }>) => void) => () => void;
+        } | null;
+        initialized: {
+            xydata: boolean;
+            xyflow: boolean;
+        };
         xynodes: import("./_types").RelationshipDetailsTypes.Node[];
         xyedges: import("./_types").RelationshipDetailsTypes.Edge[];
+        bounds: BBox;
     }>;
     send: (event: Events) => void;
-    navigateTo: (edgeId: EdgeId) => void;
+    navigateTo: (...params: [edgeId: EdgeId] | [source: Fqn, target: Fqn]) => void;
     fitDiagram: () => void;
     close: () => void;
 };

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

@@ -18,15 +18,17 @@ function useRelationshipDetails() {
   const [, startTransition] = useTransition();
   return useMemo(() => ({
     actor,
+    get rootElementId() {
+      return `relationship-details-${actor.sessionId.replaceAll(":", "_")}`;
+    },
     getState: () => actor.getSnapshot().context,
     send: actor.send,
-    navigateTo: (edgeId) => {
-      startTransition(() => {
-        actor.send({
-          type: "navigate.to",
-          edgeId
-        });
-      });
+    navigateTo: (...params) => {
+      if (params.length === 1) {
+        actor.send({ type: "navigate.to", params: { edgeId: params[0] } });
+      } else {
+        actor.send({ type: "navigate.to", params: { source: params[0], target: params[1] } });
+      }
     },
     fitDiagram: () => {
       startTransition(() => {

package/dist/overlays/relationship-details/layout-to-xyflow.d.ts

@@ -0,0 +1,12 @@
+import { RelationshipDetailsTypes } from './_types';
+import { LayoutResult } from './layout';
+export declare function layoutResultToXYFlow(layout: LayoutResult): {
+    xynodes: RelationshipDetailsTypes.Node[];
+    xyedges: RelationshipDetailsTypes.Edge[];
+    bounds: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+};

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

@@ -0,0 +1,149 @@
+import '@dagrejs/dagre';
+import { Queue, nonNullable } from '@likec4/core';
+import '@xstate/react';
+import 'fast-equals';
+import 'react';
+import { hasAtLeast } from 'remeda';
+import { ZIndexes } from '../../base/const.js';
+
+function layoutResultToXYFlow(layout) {
+  const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map();
+  const queue = Queue.from(layout.nodes.reduce(
+    (acc, node) => {
+      nodeLookup.set(node.id, node);
+      if (!node.parent) {
+        acc.push({ node, parent: null });
+      }
+      return acc;
+    },
+    []
+  ));
+  const ns = "";
+  const nodeById = (id) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`);
+  let next;
+  while (next = queue.dequeue()) {
+    const { node, parent } = next;
+    const isCompound = hasAtLeast(node.children, 1);
+    if (isCompound) {
+      for (const child of node.children) {
+        queue.enqueue({ node: nodeById(child), parent: node });
+      }
+    }
+    const position = {
+      x: node.position[0],
+      y: node.position[1]
+    };
+    if (parent) {
+      position.x -= parent.position[0];
+      position.y -= parent.position[1];
+    }
+    const id = ns + node.id;
+    const base = {
+      id,
+      draggable: false,
+      selectable: true,
+      focusable: true,
+      deletable: false,
+      position,
+      zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
+      style: {
+        width: node.width,
+        height: node.height
+      },
+      initialWidth: node.width,
+      initialHeight: node.height,
+      ...parent && {
+        parentId: ns + parent.id
+      }
+    };
+    const fqn = node.modelRef;
+    const navigateTo = { navigateTo: node.navigateTo ?? null };
+    switch (true) {
+      case isCompound: {
+        xynodes.push(
+          {
+            ...base,
+            type: "compound",
+            data: {
+              column: node.column,
+              title: node.title,
+              color: node.color,
+              style: node.style,
+              depth: node.depth ?? 0,
+              icon: node.icon ?? "none",
+              ports: node.ports,
+              fqn,
+              ...navigateTo
+            }
+          }
+        );
+        break;
+      }
+      default: {
+        xynodes.push(
+          {
+            ...base,
+            type: "element",
+            data: {
+              column: node.column,
+              fqn,
+              title: node.title,
+              technology: node.technology,
+              description: node.description,
+              height: node.height,
+              width: node.width,
+              color: node.color,
+              shape: node.shape,
+              icon: node.icon ?? "none",
+              ports: node.ports,
+              style: node.style,
+              ...navigateTo
+            }
+          }
+        );
+      }
+    }
+  }
+  for (const {
+    source,
+    target,
+    relationId,
+    label,
+    technology,
+    description,
+    navigateTo = null,
+    color = "gray",
+    line = "dashed",
+    ...edge
+  } of layout.edges) {
+    const id = ns + edge.id;
+    xyedges.push({
+      id,
+      type: "relationship",
+      source: ns + source,
+      target: ns + target,
+      sourceHandle: edge.sourceHandle,
+      targetHandle: edge.targetHandle,
+      zIndex: ZIndexes.Edge,
+      // selectable: selectable,
+      // hidden: !visiblePredicate(edge),
+      deletable: false,
+      data: {
+        relationId,
+        label,
+        color,
+        navigateTo,
+        line,
+        ...technology && { technology },
+        ...description && { description }
+      }
+    });
+  }
+  return {
+    xynodes,
+    xyedges,
+    bounds: layout.bounds
+  };
+}
+
+export { layoutResultToXYFlow };

package/dist/overlays/relationship-details/layout.d.ts

@@ -0,0 +1,22 @@
+import { DiagramEdge, DiagramNode, DiagramView, Fqn, RelationId } from '@likec4/core/types';
+import { AnyAux, LikeC4ViewModel } from '@likec4/core/model';
+import { RelationshipDetailsTypes } from './_types';
+import { RelationshipDetailsViewData } from './compute';
+export type LayoutResult = {
+    nodes: LayoutResult.Node[];
+    edges: LayoutResult.Edge[];
+    bounds: DiagramView['bounds'];
+};
+export declare namespace LayoutResult {
+    type Node = Omit<DiagramNode, 'modelRef' | 'deploymentRef' | 'inEdges' | 'outEdges'> & {
+        modelRef: Fqn;
+        column: RelationshipDetailsTypes.Column;
+        ports: RelationshipDetailsTypes.Ports;
+    };
+    type Edge = Omit<DiagramEdge, 'relations'> & {
+        relationId: RelationId;
+        sourceHandle: string;
+        targetHandle: string;
+    };
+}
+export declare function layoutRelationshipDetails(data: RelationshipDetailsViewData, scope: LikeC4ViewModel<AnyAux> | null): LayoutResult;