@likec4/diagram 1.27.1 → 1.27.3

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

@@ -1,10 +1,26 @@
 import { invariant } from '@likec4/core';
-import { applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
-import { prop } from 'remeda';
-import { setup, assign, cancel, raise, enqueueActions } from 'xstate';
+import { getViewportForBounds, applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
+import { shallowEqual } from 'fast-equals';
+import { prop, isString } from 'remeda';
+import { setup, assign, assertEvent, cancel, raise, enqueueActions } from 'xstate';
 import { MinZoom } from '../../base/const.js';
+import { updateEdges } from '../../base/updateEdges.js';
+import { updateNodes } from '../../base/updateNodes.js';
+import { layoutResultToXYFlow } from './layout-to-xyflow.js';
 import { Base } from '../../base/types.js';
 
+function inputToSubject(input) {
+  if ("edgeId" in input) {
+    invariant(isString(input.edgeId), "edgeId is required");
+    return {
+      edgeId: input.edgeId
+    };
+  }
+  return {
+    source: input.source,
+    target: input.target
+  };
+}
 const relationshipDetailsLogic = setup({
   types: {
     context: {},
@@ -13,16 +29,18 @@ const relationshipDetailsLogic = setup({
   },
   actions: {
     "xyflow:fitDiagram": ({ context }, params) => {
-      const {
-        duration = 450,
-        bounds
-      } = params ?? {};
-      const { xyflow } = context;
+      let { duration, bounds } = params ?? {};
+      duration ??= 450;
+      const { xyflow, xystore } = context;
       invariant(xyflow, "xyflow is not initialized");
+      invariant(xystore, "xystore is not initialized");
+      bounds ??= context.bounds;
+      const maxZoom = Math.max(xyflow.getZoom(), 1);
       if (bounds) {
-        xyflow.fitBounds(bounds, duration > 0 ? { duration } : void 0);
+        const { width, height } = xystore.getState();
+        const viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, 0.1);
+        xyflow.setViewport(viewport, duration > 0 ? { duration } : void 0);
       } else {
-        const maxZoom = Math.max(xyflow.getZoom(), 1);
         xyflow.fitView({
           minZoom: MinZoom,
           maxZoom,
@@ -30,46 +48,117 @@ const relationshipDetailsLogic = setup({
           ...duration > 0 && { duration }
         });
       }
-    }
+    },
+    "xyflow:updateNodeInternals": ({ context }) => {
+      invariant(context.xystore, "xystore is not initialized");
+      const { domNode, updateNodeInternals } = context.xystore.getState();
+      const nodeIds = new Set(context.xyedges.flatMap((e) => [e.source, e.target]));
+      if (nodeIds.size === 0 || !domNode) {
+        return;
+      }
+      const updates = /* @__PURE__ */ new Map();
+      for (const updateId of nodeIds) {
+        const nodeElement = domNode.querySelector(`.react-flow__node[data-id="${updateId}"]`);
+        if (nodeElement) {
+          updates.set(updateId, { id: updateId, nodeElement, force: true });
+        }
+      }
+      updateNodeInternals(updates, { triggerFitView: false });
+    },
+    "updateXYFlow": assign(({ context, event }) => {
+      assertEvent(event, "xyflow.init");
+      let initialized = context.initialized;
+      if (!initialized.xyflow) {
+        initialized = {
+          ...initialized,
+          xyflow: true
+        };
+      }
+      return {
+        initialized,
+        xyflow: event.instance,
+        xystore: event.store
+      };
+    }),
+    "updateLayoutData": assign(({ context, event }) => {
+      assertEvent(event, "update.layoutData");
+      const { xynodes, xyedges, bounds } = layoutResultToXYFlow(event.data);
+      let initialized = context.initialized;
+      if (!initialized.xydata) {
+        initialized = {
+          ...initialized,
+          xydata: true
+        };
+      }
+      return {
+        initialized,
+        xynodes: updateNodes(context.xynodes, xynodes),
+        xyedges: updateEdges(context.xyedges, xyedges),
+        bounds: shallowEqual(context.bounds, bounds) ? context.bounds : bounds
+      };
+    })
   },
   guards: {
+    "isReady": ({ context }) => context.initialized.xydata && context.initialized.xyflow,
     "enable: navigate.to": () => true
   }
 }).createMachine({
-  initial: "opening",
+  initial: "initializing",
   context: ({ input }) => ({
-    ...input,
-    initialized: false,
+    subject: inputToSubject(input),
+    viewId: input.viewId,
+    bounds: {
+      x: 0,
+      y: 0,
+      width: 200,
+      height: 200
+    },
+    initialized: {
+      xydata: false,
+      xyflow: false
+    },
     xyflow: null,
+    xystore: null,
     xynodes: [],
     xyedges: []
   }),
   states: {
-    "opening": {
+    "initializing": {
       on: {
         "xyflow.init": {
-          actions: assign({
-            initialized: true,
-            xyflow: ({ event }) => event.instance
-          }),
-          target: "active"
+          actions: "updateXYFlow",
+          target: "isReady"
+        },
+        "update.layoutData": {
+          actions: "updateLayoutData",
+          target: "isReady"
         },
         "close": {
           target: "closed"
         }
       }
     },
-    "active": {
-      entry: {
-        type: "xyflow:fitDiagram",
-        params: { duration: 0 }
-      },
+    "isReady": {
+      always: [{
+        guard: "isReady",
+        actions: [
+          { type: "xyflow:fitDiagram", params: { duration: 0 } },
+          raise({ type: "xyflow.updateNodeInternals" }, { delay: 50 })
+        ],
+        target: "ready"
+      }, {
+        target: "initializing"
+      }]
+    },
+    "ready": {
       on: {
         "xyflow.edgeMouseEnter": {
           actions: [
             assign({
               xyedges: ({ context, event }) => {
-                const hasDimmed = context.xyedges.some((edge) => edge.data.dimmed === true);
+                const hasDimmed = context.xyedges.some(
+                  (edge) => edge.data.dimmed === true || edge.data.dimmed === "immediate"
+                );
                 return context.xyedges.map((edge) => {
                   if (edge.id === event.edge.id) {
                     return Base.setData(edge, {
@@ -77,7 +166,7 @@ const relationshipDetailsLogic = setup({
                       dimmed: false
                     });
                   }
-                  return hasDimmed && !edge.data.dimmed && !edge.selected ? Base.setDimmed(edge, "immediate") : edge;
+                  return hasDimmed && !edge.selected ? Base.setDimmed(edge, "immediate") : edge;
                 });
               }
             }),
@@ -125,21 +214,53 @@ const relationshipDetailsLogic = setup({
             }
           })
         },
-        "navigate.to": {
+        "update.layoutData": {
           actions: [
-            assign({
-              edgeId: ({ event }) => event.edgeId
-            }),
-            raise({ type: "fitDiagram" }, { delay: 50 })
+            "updateLayoutData",
+            cancel("fitDiagram"),
+            raise({ type: "fitDiagram", duration: 0 }, { id: "fitDiagram", delay: 50 }),
+            raise({ type: "xyflow.updateNodeInternals" }, { delay: 75 })
           ]
         },
+        "xyflow.init": {
+          actions: "updateXYFlow"
+        },
+        "xyflow.applyNodeChanges": {
+          actions: assign({
+            xynodes: ({ context, event }) => {
+              return applyNodeChanges(event.changes, context.xynodes);
+            }
+          })
+        },
+        "xyflow.applyEdgeChanges": {
+          actions: assign({
+            xyedges: ({ context, event }) => {
+              return applyEdgeChanges(event.changes, context.xyedges);
+            }
+          })
+        },
+        "xyflow.paneDblClick": {
+          actions: "xyflow:fitDiagram"
+        },
+        "navigate.to": {
+          actions: assign({
+            subject: ({ event }) => inputToSubject(event.params),
+            viewId: ({ context, event }) => event.params.viewId ?? context.viewId
+          })
+        },
         "close": {
           target: "closed"
         }
       },
       exit: assign({
-        initialized: false,
-        xyflow: null
+        xyedges: [],
+        xynodes: [],
+        initialized: {
+          xydata: false,
+          xyflow: false
+        },
+        xyflow: null,
+        xystore: null
       })
     },
     "closed": {
@@ -159,25 +280,8 @@ const relationshipDetailsLogic = setup({
         raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 200 })
       ]
     },
-    "update.xydata": {
-      actions: assign({
-        xynodes: ({ event }) => event.xynodes,
-        xyedges: ({ event }) => event.xyedges
-      })
-    },
-    "xyflow.applyNodeChanges": {
-      actions: assign({
-        xynodes: ({ context, event }) => {
-          return applyNodeChanges(event.changes, context.xynodes);
-        }
-      })
-    },
-    "xyflow.applyEdgeChanges": {
-      actions: assign({
-        xyedges: ({ context, event }) => {
-          return applyEdgeChanges(event.changes, context.xyedges);
-        }
-      })
+    "xyflow.updateNodeInternals": {
+      actions: "xyflow:updateNodeInternals"
     }
   }
 });

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

@@ -0,0 +1,12 @@
+import { EdgeId, NonEmptyReadonlyArray } from '@likec4/core';
+import { AnyAux, ElementModel, LikeC4ViewModel, RelationshipModel } from '@likec4/core/model';
+export interface RelationshipDetailsViewData {
+    sources: ReadonlySet<ElementModel>;
+    relationships: ReadonlySet<RelationshipModel>;
+    targets: ReadonlySet<ElementModel>;
+}
+export declare function computeEdgeDetailsViewData(edges: NonEmptyReadonlyArray<EdgeId>, view: LikeC4ViewModel<AnyAux>): RelationshipDetailsViewData;
+export declare function computeRelationshipDetailsViewData({ source, target, }: {
+    source: ElementModel;
+    target: ElementModel;
+}): RelationshipDetailsViewData;

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

@@ -0,0 +1,139 @@
+import { hasAtLeast, invariant, isAncestor, sortParentsFirst } from '@likec4/core';
+import { treeFromElements } from '../../packages/core/src/compute-view/relationships-view/utils.js';
+import { findConnection } from '../../packages/core/src/model/connection/model/find.js';
+
+const finalize = (elements, explicits) => {
+  if (elements.size > 2 && explicits.size !== elements.size) {
+    return new Set(sortParentsFirst([
+      ...treeFromElements(elements).flatten(),
+      ...explicits
+    ]));
+  }
+  if (elements.size > 1) {
+    return new Set(sortParentsFirst([...elements]));
+  }
+  return elements;
+};
+function computeEdgeDetailsViewData(edges, view) {
+  const sources = /* @__PURE__ */ new Set();
+  const relationships = /* @__PURE__ */ new Set();
+  const targets = /* @__PURE__ */ new Set();
+  const explicit = {
+    sources: /* @__PURE__ */ new Set(),
+    targets: /* @__PURE__ */ new Set()
+  };
+  const addExplicit = (el, type) => {
+    if (type === "source") {
+      sources.add(el);
+      explicit.sources.add(el);
+    } else {
+      targets.add(el);
+      explicit.targets.add(el);
+    }
+  };
+  for (const edgeId of edges) {
+    const edge = view.findEdge(edgeId);
+    const _relationships = edge ? [...edge.relationships("model")] : [];
+    if (!edge || !hasAtLeast(_relationships, 1) || !edge.source.hasElement() || !edge.target.hasElement()) {
+      continue;
+    }
+    const source = edge.source.element;
+    const target = edge.target.element;
+    addExplicit(source, "source");
+    addExplicit(target, "target");
+    for (const relationship of _relationships) {
+      relationships.add(relationship);
+      if (relationship.source !== source) {
+        addExplicit(relationship.source, "source");
+        for (const parent of relationship.source.ancestors()) {
+          if (parent === source) {
+            break;
+          }
+          sources.add(parent);
+        }
+      }
+      if (relationship.target !== target) {
+        addExplicit(relationship.target, "target");
+        for (const parent of relationship.target.ancestors()) {
+          if (parent === target) {
+            break;
+          }
+          targets.add(parent);
+        }
+      }
+    }
+  }
+  return {
+    sources: finalize(sources, explicit.sources),
+    targets: finalize(targets, explicit.targets),
+    relationships
+  };
+}
+function computeRelationshipDetailsViewData({
+  // relationships: _relationships,
+  source,
+  target
+}) {
+  const sources = /* @__PURE__ */ new Set();
+  const relationships = /* @__PURE__ */ new Set();
+  const targets = /* @__PURE__ */ new Set();
+  const explicit = {
+    sources: /* @__PURE__ */ new Set(),
+    targets: /* @__PURE__ */ new Set()
+  };
+  const addExplicit = (el, type) => {
+    if (type === "source") {
+      sources.add(el);
+      explicit.sources.add(el);
+    } else {
+      targets.add(el);
+      explicit.targets.add(el);
+    }
+  };
+  if (source) {
+    addExplicit(source, "source");
+  }
+  if (target) {
+    addExplicit(target, "target");
+  }
+  const [connection] = findConnection(source, target, "directed");
+  if (!connection) {
+    return {
+      sources,
+      targets,
+      relationships
+    };
+  }
+  for (const relationship of connection.relations) {
+    const relationSource = relationship.source;
+    const relationTarget = relationship.target;
+    addExplicit(relationSource, "source");
+    addExplicit(relationTarget, "target");
+    relationships.add(relationship);
+    if (source !== relationSource) {
+      invariant(isAncestor(source, relationSource), `${source.id} is not an ancestor of ${relationSource.id}`);
+      for (const parent of relationSource.ancestors()) {
+        if (parent === source) {
+          break;
+        }
+        sources.add(parent);
+      }
+    }
+    if (target !== relationTarget) {
+      invariant(isAncestor(target, relationTarget), `${target.id} is not an ancestor of ${relationTarget.id}`);
+      for (const parent of relationTarget.ancestors()) {
+        if (parent === target) {
+          break;
+        }
+        targets.add(parent);
+      }
+    }
+  }
+  return {
+    sources: finalize(sources, explicit.sources),
+    targets: finalize(targets, explicit.targets),
+    relationships
+  };
+}
+
+export { computeEdgeDetailsViewData, computeRelationshipDetailsViewData };

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

@@ -1,15 +1,17 @@
 import { jsx } from 'react/jsx-runtime';
-import { IconZoomScan } from '@tabler/icons-react';
-import { useEnabledFeature } from '../../../context/DiagramFeatures.js';
+import { IconZoomScan, IconTransform, IconFileSymlink } from '@tabler/icons-react';
+import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
+import { useCurrentViewId } from '../../../hooks/useCurrentViewId.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { ElementActionButtons } from '../../../base/primitives/element/ElementActionButtons.js';
 
 const ElementActions = (props) => {
-  const { enableNavigateTo } = useEnabledFeature("NavigateTo");
+  const { enableNavigateTo, enableVscode } = useEnabledFeatures();
   const diagram = useDiagram();
+  const currentViewId = useCurrentViewId();
   const buttons = [];
-  const { navigateTo } = props.data;
-  if (navigateTo && enableNavigateTo) {
+  const { navigateTo, fqn } = props.data;
+  if (navigateTo && enableNavigateTo && currentViewId !== navigateTo) {
     buttons.push({
       key: "navigate",
       icon: /* @__PURE__ */ jsx(IconZoomScan, {}),
@@ -19,6 +21,26 @@ const ElementActions = (props) => {
       }
     });
   }
+  if (fqn) {
+    buttons.push({
+      key: "relationships",
+      icon: /* @__PURE__ */ jsx(IconTransform, {}),
+      onClick: (e) => {
+        e.stopPropagation();
+        diagram.openRelationshipsBrowser(fqn);
+      }
+    });
+  }
+  if (fqn && enableVscode) {
+    buttons.push({
+      key: "goToSource",
+      icon: /* @__PURE__ */ jsx(IconFileSymlink, {}),
+      onClick: (e) => {
+        e.stopPropagation();
+        diagram.openSource({ element: fqn });
+      }
+    });
+  }
   return /* @__PURE__ */ jsx(
     ElementActionButtons,
     {

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

@@ -30,7 +30,7 @@ const RelationshipEdge = customEdge((props) => {
           translate: "translate(-50%, 0)"
         },
         style: {
-          maxWidth: Math.abs(props.targetX - props.sourceX - 70)
+          maxWidth: Math.abs(props.targetX - props.sourceX - 100)
         },
         children: /* @__PURE__ */ jsx(EdgeLabel, { edgeProps: props, children: enableNavigateTo && navigateTo && /* @__PURE__ */ jsx(
           EdgeActionButton,

package/dist/overlays/relationship-details/custom/nodeTypes.d.ts

@@ -12,6 +12,7 @@ export declare const ElementNode: NamedExoticComponent<NodeProps<{
     color: Color;
     shape: "rectangle" | "person" | "browser" | "mobile" | "cylinder" | "storage" | "queue";
     navigateTo: ViewId<string> | null | undefined;
+    column: RelationshipDetailsTypes.Column;
     fqn: Fqn;
     icon: IconUrl;
     ports: RelationshipDetailsTypes.Ports;
@@ -22,7 +23,7 @@ export declare const CompoundNode: NamedExoticComponent<NodeProps<{
     style: ElementStyle;
     title: string;
     color: Color;
-    shape: "rectangle" | "person" | "browser" | "mobile" | "cylinder" | "storage" | "queue";
+    column: RelationshipDetailsTypes.Column;
     fqn: Fqn;
     depth: number;
     icon?: IconUrl;