@likec4/diagram 1.27.1 → 1.27.2

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

@@ -6,6 +6,7 @@ import { setup, assign, fromPromise, assertEvent, enqueueActions, cancel, raise
 import { MinZoom, ZIndexes } from '../../base/const.js';
 import { updateEdges } from '../../base/updateEdges.js';
 import { updateNodes } from '../../base/updateNodes.js';
+import { typedSystem } from '../../state/utils.js';
 import { ViewPadding } from './const.js';
 import { viewToNodesEdge } from './useViewToNodesEdges.js';
 import { Base } from '../../base/types.js';
@@ -129,6 +130,7 @@ const relationshipsBrowserLogic = setup({
     layouter
   },
   guards: {
+    hasViewId: ({ context }) => context.viewId !== null,
     isReady: ({ context }) => context.xyflow !== null && context.xystore !== null && context.layouted !== null,
     anotherSubject: ({ context, event }) => {
       if (event.type === "update.view") {
@@ -271,10 +273,24 @@ const relationshipsBrowserLogic = setup({
             }
           })
         },
+        "xyflow.edgeClick": {
+          guard: "hasViewId",
+          actions: enqueueActions(({ event, context, system, enqueue }) => {
+            if (event.edge.selected || event.edge.data.relations.length > 1) {
+              enqueue.sendTo(typedSystem(system).overlaysActorRef, {
+                type: "open.relationshipDetails",
+                viewId: context.viewId,
+                source: event.edge.data.sourceFqn,
+                target: event.edge.data.targetFqn
+              });
+            }
+          })
+        },
         "navigate.to": {
           actions: [
             assign({
               subject: ({ event }) => event.subject,
+              viewId: ({ event, context }) => event.viewId ?? context.viewId ?? null,
               navigateFromNode: ({ event }) => event.fromNode ?? null
             })
           ]
@@ -321,7 +337,7 @@ const relationshipsBrowserLogic = setup({
               actions: [
                 assign({
                   xyedges: ({ context, event }) => {
-                    const hasDimmed = context.xyedges.some((edge) => edge.data.dimmed === true);
+                    const hasDimmed = context.xyedges.some((edge) => edge.data.dimmed !== false || edge.selected);
                     return context.xyedges.map((edge) => {
                       if (edge.id === event.edge.id) {
                         return Base.setData(edge, {
@@ -329,24 +345,26 @@ const relationshipsBrowserLogic = setup({
                           dimmed: false
                         });
                       }
-                      return hasDimmed && !edge.data.dimmed && !edge.selected ? Base.setDimmed(edge, "immediate") : edge;
+                      return hasDimmed && !edge.selected ? Base.setDimmed(edge, "immediate") : edge;
                     });
                   }
                 }),
                 cancel("undim.edges"),
                 cancel("dim.nonhovered.edges"),
-                raise({ type: "dim.nonhovered.edges" }, { id: "dim.nonhovered.edges", delay: 100 })
+                raise({ type: "dim.nonhovered.edges" }, { id: "dim.nonhovered.edges", delay: 200 })
               ]
             },
             "xyflow.edgeMouseLeave": {
               actions: [
                 assign({
-                  xyedges: ({ context, event }) => context.xyedges.map((edge) => {
-                    if (edge.id === event.edge.id) {
-                      return Base.setHovered(edge, false);
-                    }
-                    return edge;
-                  })
+                  xyedges: ({ context, event }) => {
+                    return context.xyedges.map((edge) => {
+                      if (edge.id === event.edge.id) {
+                        return Base.setHovered(edge, false);
+                      }
+                      return edge;
+                    });
+                  }
                 }),
                 cancel("dim.nonhovered.edges"),
                 raise({ type: "undim.edges" }, { id: "undim.edges", delay: 400 })
@@ -354,18 +372,14 @@ const relationshipsBrowserLogic = setup({
             },
             "dim.nonhovered.edges": {
               actions: assign({
-                xyedges: ({ context }) => context.xyedges.map((edge) => Base.setDimmed(edge, edge.data.hovered !== true))
+                xyedges: ({ context }) => context.xyedges.map(
+                  (edge) => edge.data.hovered ? edge : Base.setDimmed(edge, edge.data.dimmed === "immediate" ? "immediate" : true)
+                )
               })
             },
             "undim.edges": {
               actions: assign({
                 xyedges: ({ context }) => {
-                  const hasSelected = context.xyedges.some((edge) => edge.selected === true);
-                  if (hasSelected) {
-                    return context.xyedges.map(
-                      (edge) => Base.setDimmed(edge, edge.selected !== true ? edge.data.dimmed || "immediate" : false)
-                    );
-                  }
                   return context.xyedges.map(Base.setDimmed(false));
                 }
               })

package/dist/overlays/relationships-browser/custom/ElementActions.js

@@ -1,18 +1,20 @@
 import { jsx } from 'react/jsx-runtime';
 import { IconZoomScan, IconTransform, IconFileSymlink } from '@tabler/icons-react';
-import { useEnabledFeature } from '../../../context/DiagramFeatures.js';
+import { useEnabledFeatures } from '../../../context/DiagramFeatures.js';
+import { useCurrentViewId } from '../../../hooks/useCurrentViewId.js';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from '../hooks.js';
 import { ElementActionButtons } from '../../../base/primitives/element/ElementActionButtons.js';
 
 const ElementActions = (props) => {
-  const { enableNavigateTo, enableVscode } = useEnabledFeature("NavigateTo", "Vscode");
+  const { enableNavigateTo, enableVscode } = useEnabledFeatures();
   const diagram = useDiagram();
+  const currentViewId = useCurrentViewId();
   const browser = useRelationshipsBrowser();
   const subject = useRelationshipsBrowserState((s) => s.context.subject);
   const buttons = [];
   const { navigateTo, fqn } = props.data;
-  if (navigateTo && enableNavigateTo) {
+  if (navigateTo && enableNavigateTo && currentViewId !== navigateTo) {
     buttons.push({
       key: "navigate",
       icon: /* @__PURE__ */ jsx(IconZoomScan, {}),

package/dist/overlays/relationships-browser/custom/edgeTypes.d.ts

@@ -1,6 +1,6 @@
 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 RelationshipEdge: NamedExoticComponent<{
     id: string;
     selected?: boolean;
@@ -33,6 +33,8 @@ export declare const RelationshipEdge: NamedExoticComponent<{
         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/custom/edgeTypes.js

@@ -61,7 +61,7 @@ const RelationshipEdge = customEdge((props) => {
         c: "black",
         label: "This relationship is not included in the current view",
         portalProps: {
-          target: `#${browser.rootElementId.replaceAll(":", "\\:")}`
+          target: `#${browser.rootElementId}`
         },
         openDelay: 800,
         children: label

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

@@ -1,6 +1,6 @@
 import { Fqn, ViewId, NonEmptyArray, RelationId, Color, RelationshipLineType } from '@likec4/core';
-import { LayoutRelationshipsViewResult } from './-useRelationshipsView';
 import { RelationshipsBrowserActorRef, RelationshipsBrowserSnapshot, XYStoreApi, Events } from './actor';
+import { LayoutRelationshipsViewResult } from './layout';
 import { Context, ReactNode, CSSProperties } from 'react';
 import { GeneralHelpers, ViewportHelperFunctions } from '@xyflow/react';
 import { EdgeMarkerType, HandleType } from '@xyflow/system';
@@ -45,6 +45,8 @@ export declare function useRelationshipsBrowser(): {
             focusable?: boolean;
             type: "relationship";
             data: {
+                sourceFqn: Fqn;
+                targetFqn: Fqn;
                 relations: NonEmptyArray<RelationId>;
                 color: Color | undefined;
                 label: string | null;

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

@@ -18,7 +18,7 @@ function useRelationshipsBrowser() {
   return useMemo(() => ({
     actor,
     get rootElementId() {
-      return `relationships-browser-${actor.sessionId}`;
+      return `relationships-browser-${actor.sessionId.replaceAll(":", "_")}`;
     },
     getState: () => actor.getSnapshot().context,
     send: actor.send,

package/dist/overlays/relationships-browser/{-useRelationshipsView.d.ts → layout.d.ts}

@@ -17,6 +17,8 @@ export declare namespace LayoutRelationshipsViewResult {
         existsInCurrentView: boolean;
     };
     type Edge = DiagramEdge & {
+        sourceFqn: Fqn;
+        targetFqn: Fqn;
         sourceHandle: string;
         targetHandle: string;
         existsInCurrentView: boolean;

package/dist/overlays/relationships-browser/{-useRelationshipsView.js → layout.js}

@@ -128,6 +128,8 @@ function layoutRelationshipsView(data, scope) {
         toArray(data.incoming),
         map((r) => ({
           id: r.source.id,
+          sourceFqn: r.source.id,
+          targetFqn: r.target.id,
           source: incomers.byId(r.source.id).graph,
           target: subjects.byId(r.target.id).graph,
           relation: r
@@ -137,6 +139,8 @@ function layoutRelationshipsView(data, scope) {
         toArray(data.outgoing),
         map((r) => ({
           id: r.target.id,
+          sourceFqn: r.source.id,
+          targetFqn: r.target.id,
           source: subjects.byId(r.source.id).graph,
           target: outgoers.byId(r.target.id).graph,
           relation: r
@@ -160,6 +164,8 @@ function layoutRelationshipsView(data, scope) {
       }, name);
       edges.push({
         name,
+        sourceFqn: grouped[0].sourceFqn,
+        targetFqn: grouped[0].targetFqn,
         source: source.id,
         sourceHandle: source.id + "_out" + (g.node(source.id).outPorts.length - 1),
         target: target.id,
@@ -357,7 +363,7 @@ function layoutRelationshipsView(data, scope) {
     const children = (g.children(id) ?? []).filter((c) => !c.endsWith(PortSuffix));
     minX = Math.min(minX, position.x);
     minY = Math.min(minY, position.y);
-    const navigateTo = element.defaultView?.id ?? null;
+    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));
@@ -416,15 +422,26 @@ function layoutRelationshipsView(data, scope) {
       if (!ename) {
         return acc;
       }
-      const { name, source, target, relations, sourceHandle, targetHandle } = find(edges, (e2) => e2.name === ename);
+      const {
+        name,
+        source,
+        sourceFqn,
+        target,
+        targetFqn,
+        relations,
+        sourceHandle,
+        targetHandle
+      } = find(edges, (e2) => e2.name === ename);
       const onlyRelation = only(relations);
       const label = onlyRelation?.title ?? "untitled";
       const isMultiple = relations.length > 1;
       const navigateTo = only(unique(relations.flatMap((r) => r.navigateTo?.id ? r.navigateTo.id : [])));
       acc.push({
         id: name,
+        sourceFqn,
         source,
         sourceHandle,
+        targetFqn,
         target,
         targetHandle,
         label: isMultiple ? `${relations.length} relationships` : label,

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

@@ -1,5 +1,5 @@
-import { LayoutRelationshipsViewResult } from './-useRelationshipsView';
 import { RelationshipsBrowserTypes } from './_types';
+import { LayoutRelationshipsViewResult } from './layout';
 export declare function viewToNodesEdge(view: Pick<LayoutRelationshipsViewResult, 'nodes' | 'edges'>): {
     xynodes: RelationshipsBrowserTypes.Node[];
     xyedges: RelationshipsBrowserTypes.Edge[];

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

@@ -2,7 +2,7 @@ import { Queue, ElementKind, nonNullable, DiagramNode, invariant } from '@likec4
 import '@react-hookz/web';
 import { hasAtLeast } from 'remeda';
 import { ZIndexes } from '../../base/const.js';
-import { LayoutRelationshipsViewResult } from './-useRelationshipsView.js';
+import { LayoutRelationshipsViewResult } from './layout.js';
 
 function viewToNodesEdge(view) {
   const xynodes = [], xyedges = [], nodeLookup = /* @__PURE__ */ new Map();
@@ -142,6 +142,8 @@ function viewToNodesEdge(view) {
       // hidden: !visiblePredicate(edge),
       deletable: false,
       data: {
+        sourceFqn: edge.sourceFqn,
+        targetFqn: edge.targetFqn,
         relations: edge.relations,
         color: edge.color ?? "gray",
         label: edge.label,

package/dist/packages/core/src/compute-view/relationships-view/compute.js

@@ -1,6 +1,6 @@
 import { pipe } from 'remeda';
 import { invariant } from '../../errors/index.js';
-import { sortParentsFirst, isDescendantOf } from '../../utils/fqn.js';
+import { isDescendantOf, sortParentsFirst } from '../../utils/fqn.js';
 import { treeFromElements } from './utils.js';
 import { toSet, toArray } from '../../utils/iterable/to.js';
 import { ifilter } from '../../utils/iterable/filter.js';

package/dist/packages/core/src/model/connection/model/ConnectionModel.js

@@ -0,0 +1,121 @@
+import { isNot } from 'remeda';
+import { invariant } from '../../../errors/index.js';
+import { customInspectSymbol } from '../../../utils/const.js';
+import { union, difference, intersection, equals } from '../../../utils/set.js';
+import { stringHash } from '../../../utils/string-hash.js';
+import { hasSameSourceTarget } from '../ops.js';
+import { findConnection } from './find.js';
+import { isome } from '../../../utils/iterable/some.js';
+import { ifilter } from '../../../utils/iterable/filter.js';
+
+class ConnectionModel {
+  constructor(source, target, relations = /* @__PURE__ */ new Set()) {
+    this.source = source;
+    this.target = target;
+    this.relations = relations;
+    this.id = stringHash(`model:${source.id}:${target.id}`);
+  }
+  id;
+  _boundary;
+  /**
+   * Common ancestor of the source and target elements.
+   * Represents the boundary of the connection.
+   */
+  get boundary() {
+    return this._boundary ??= this.source.commonAncestor(this.target);
+  }
+  /**
+   * Human readable expression of the connection
+   * Mostly used for testing and debugging
+   */
+  get expression() {
+    return `${this.source.id} -> ${this.target.id}`;
+  }
+  /**
+   * Returns true if only includes relations between the source and target elements.
+   */
+  get isDirect() {
+    return this.nonEmpty() && !this.isImplicit;
+  }
+  /**
+   * Returns true if includes relations between nested elements of the source and target elements.
+   */
+  get isImplicit() {
+    return this.nonEmpty() && isome(this.relations, isNot(hasSameSourceTarget(this)));
+  }
+  get directRelations() {
+    return new Set(ifilter(this.relations, hasSameSourceTarget(this)));
+  }
+  nonEmpty() {
+    return this.relations.size > 0;
+  }
+  mergeWith(other) {
+    invariant(this.source.id === other.source.id, "Cannot merge connections with different sources");
+    invariant(this.target.id === other.target.id, "Cannot merge connections with different targets");
+    return new ConnectionModel(
+      this.source,
+      this.target,
+      union(this.relations, other.relations)
+    );
+  }
+  difference(other) {
+    return new ConnectionModel(
+      this.source,
+      this.target,
+      difference(this.relations, other.relations)
+    );
+  }
+  intersect(other) {
+    invariant(other instanceof ConnectionModel, "Cannot intersect connection with different type");
+    return new ConnectionModel(
+      this.source,
+      this.target,
+      intersection(this.relations, other.relations)
+    );
+  }
+  equals(other) {
+    invariant(other instanceof ConnectionModel, "Cannot merge connection with different type");
+    return this.id === other.id && this.source.id === other.source.id && this.target.id === other.target.id && equals(this.relations, other.relations);
+  }
+  /**
+   * Returns a new instance with the updated relations.
+   *
+   * @param relations - A readonly set of `RelationshipModel` instances representing the new relations.
+   * @returns A new `ConnectionModel` instance with the updated relations.
+   */
+  update(relations) {
+    return new ConnectionModel(
+      this.source,
+      this.target,
+      relations
+    );
+  }
+  [customInspectSymbol](depth, inspectOptions, inspect) {
+    const asString = this.toString();
+    Object.defineProperty(asString, "constructor", {
+      value: ConnectionModel,
+      enumerable: false
+    });
+    return asString;
+  }
+  toString() {
+    return [
+      this.expression,
+      this.relations.size ? "  relations:" : "  relations: [ ]",
+      ...[...this.relations].map((c) => "    " + c.expression)
+    ].join("\n");
+  }
+  /**
+   * Creates a new connection with reversed direction (target becomes source and vice versa)
+   * @param search - When true, attempts to find an existing connection between the reversed nodes
+   */
+  reversed(search = false) {
+    if (!search) {
+      return new ConnectionModel(this.target, this.source);
+    }
+    const [found] = findConnection(this.target, this.source, "directed");
+    return found ?? new ConnectionModel(this.target, this.source, /* @__PURE__ */ new Set());
+  }
+}
+
+export { ConnectionModel };

package/dist/packages/core/src/model/connection/model/find.js

@@ -0,0 +1,39 @@
+import { isSameHierarchy } from '../../../utils/fqn.js';
+import { intersection } from '../../../utils/set.js';
+import { ConnectionModel } from './ConnectionModel.js';
+
+function findConnection(source, target, direction = "directed") {
+  if (source === target) {
+    return [];
+  }
+  if (isSameHierarchy(source, target)) {
+    return [];
+  }
+  const directedIntersection = intersection(source.allOutgoing, target.allIncoming);
+  const directed = directedIntersection.size > 0 ? new ConnectionModel(
+    source,
+    target,
+    directedIntersection
+  ) : null;
+  if (direction === "directed") {
+    return directed ? [directed] : [];
+  }
+  const reverseIntersection = intersection(source.allIncoming, target.allOutgoing);
+  const reverse = reverseIntersection.size > 0 ? new ConnectionModel(
+    target,
+    source,
+    reverseIntersection
+  ) : null;
+  if (directed && reverse) {
+    return [directed, reverse];
+  }
+  if (directed) {
+    return [directed];
+  }
+  if (reverse) {
+    return [reverse];
+  }
+  return [];
+}
+
+export { findConnection };

package/dist/packages/core/src/model/connection/ops.js

@@ -0,0 +1,7 @@
+import 'remeda';
+
+function hasSameSourceTarget(a, b) {
+  return (b2) => a.source === b2.source && a.target === b2.target;
+}
+
+export { hasSameSourceTarget };

package/dist/packages/core/src/utils/const.js

@@ -0,0 +1,3 @@
+const customInspectSymbol = Symbol.for("nodejs.util.inspect.custom");
+
+export { customInspectSymbol };

package/dist/packages/core/src/utils/fqn.js

@@ -12,6 +12,14 @@ function isAncestor(arg1, arg2) {
     return arg1Id.startsWith(ancestorId + ".");
   };
 }
+function isSameHierarchy(one, another) {
+  if (!another) {
+    return (b) => isSameHierarchy(one, b);
+  }
+  const first = asString(one);
+  const second = asString(another);
+  return first === second || second.startsWith(first + ".") || first.startsWith(second + ".");
+}
 function isDescendantOf(descedant, ancestor) {
   {
     return (d) => isAncestor(descedant, d);
@@ -40,4 +48,4 @@ function sortParentsFirst(array) {
   return result;
 }
 
-export { isAncestor, isDescendantOf, sortParentsFirst };
+export { isAncestor, isDescendantOf, isSameHierarchy, sortParentsFirst };

package/dist/packages/core/src/utils/iterable/find.js

@@ -0,0 +1,21 @@
+import { isFunction } from 'remeda';
+import { invariant } from '../../errors/index.js';
+
+function ifind(arg1, arg2) {
+  const pred = arg2 ?? arg1;
+  invariant(isFunction(pred));
+  function _find(iter) {
+    for (const value of iter) {
+      if (pred(value)) {
+        return value;
+      }
+    }
+    return;
+  }
+  if (!arg2) {
+    return _find;
+  }
+  return _find(arg1);
+}
+
+export { ifind };

package/dist/packages/core/src/utils/iterable/some.js

@@ -0,0 +1,21 @@
+import { isFunction } from 'remeda';
+import { invariant } from '../../errors/index.js';
+
+function isome(arg1, arg2) {
+  const pred = arg2 ?? arg1;
+  invariant(isFunction(pred));
+  function _some(iter) {
+    for (const value of iter) {
+      if (pred(value)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  if (!arg2) {
+    return _some;
+  }
+  return _some(arg1);
+}
+
+export { isome };

package/dist/packages/core/src/utils/set.js

@@ -0,0 +1,48 @@
+import { hasAtLeast } from 'remeda';
+import { s as setExports } from '../../../../_virtual/set.js';
+
+function union(...sets) {
+  let result = /* @__PURE__ */ new Set();
+  for (const set of sets) {
+    for (const value of set) {
+      result.add(value);
+    }
+  }
+  return result;
+}
+function intersection(first, ...sets) {
+  let result = /* @__PURE__ */ new Set();
+  if (first.size === 0) {
+    return result;
+  }
+  let other = hasAtLeast(sets, 2) ? setExports.intersection(...sets) : sets[0];
+  if (other.size === 0) {
+    return result;
+  }
+  for (const value of first) {
+    if (other.has(value)) {
+      result.add(value);
+    }
+  }
+  return result;
+}
+function difference(a, b) {
+  if (a.size === 0) {
+    return /* @__PURE__ */ new Set();
+  }
+  if (b.size === 0) {
+    return new Set(a);
+  }
+  let result = /* @__PURE__ */ new Set();
+  for (const value of a) {
+    if (!b.has(value)) {
+      result.add(value);
+    }
+  }
+  return result;
+}
+function equals(a, b) {
+  return a.size === b.size && [...a].every((value) => b.has(value));
+}
+
+export { difference, equals, intersection, union };

package/dist/packages/core/src/utils/string-hash.js

@@ -0,0 +1,13 @@
+import { invariant } from '../errors/index.js';
+
+function stringHash(str) {
+  let hash = 5381;
+  const len = str.length;
+  invariant(len > 0, "stringHash: empty string");
+  for (let i = 0; i < len; i++) {
+    hash = hash * 33 ^ str.charCodeAt(i);
+  }
+  return (hash >>> 0).toString(36);
+}
+
+export { stringHash };