@likec4/diagram 1.20.0 → 1.20.2

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

@@ -1,9 +1,10 @@
 import { BBox, DiagramView, Fqn } from '@likec4/core';
-import { EdgeChange, NodeChange, ReactFlowInstance } from '@xyflow/react';
+import { EdgeChange, NodeChange, ReactFlowInstance, useStoreApi } from '@xyflow/react';
 import { ActorLogic, ActorRefFromLogic, MachineSnapshot, SnapshotFrom } from 'xstate';
 import { LayoutRelationshipsViewResult } from './-useRelationshipsView';
 import { RelationshipsBrowserTypes } from './_types';
 type XYFLowInstance = ReactFlowInstance<RelationshipsBrowserTypes.Node, RelationshipsBrowserTypes.Edge>;
+export type XYStoreApi = ReturnType<typeof useStoreApi<RelationshipsBrowserTypes.Node, RelationshipsBrowserTypes.Edge>>;
 export type Input = {
     subject: Fqn;
     scope?: DiagramView | null;
@@ -14,14 +15,17 @@ export type Context = Readonly<Input & {
     closeable: boolean;
     enableNavigationMenu: boolean;
     xyflow: XYFLowInstance | null;
+    xystore: XYStoreApi | null;
     initialized: boolean;
     layouted: LayoutRelationshipsViewResult | null;
+    navigateFromNode: string | null;
     xynodes: RelationshipsBrowserTypes.Node[];
     xyedges: RelationshipsBrowserTypes.Edge[];
 }>;
 export type Events = {
     type: 'xyflow.init';
     instance: XYFLowInstance;
+    store: XYStoreApi;
 } | {
     type: 'xyflow.nodeClick';
     node: RelationshipsBrowserTypes.Node;
@@ -46,6 +50,8 @@ export type Events = {
 } | {
     type: 'xyflow.edgeMouseLeave';
     edge: RelationshipsBrowserTypes.Edge;
+} | {
+    type: 'xyflow.updateNodeInternals';
 } | {
     type: 'fitDiagram';
     duration?: number;
@@ -53,13 +59,20 @@ export type Events = {
 } | {
     type: 'navigate.to';
     subject: Fqn;
+    fromNode?: string | undefined;
+} | {
+    type: 'update.xydata';
+    xynodes: RelationshipsBrowserTypes.Node[];
+    xyedges: RelationshipsBrowserTypes.Edge[];
 } | {
     type: 'update.view';
     layouted: LayoutRelationshipsViewResult;
 } | {
     type: 'close';
 };
-export declare const relationshipsBrowserActor: ActorLogic<MachineSnapshot<Context, Events, any, "opening" | "active" | "closed", any, any, any, any>, Events, Input, any, any>;
+export declare const relationshipsBrowserActor: ActorLogic<MachineSnapshot<Context, Events, any, "initializing" | "waiting-data" | "closed" | {
+    active: "idle" | "layouting";
+}, "active", any, any, any>, Events, Input, any, any>;
 export type RelationshipsBrowserLogic = typeof relationshipsBrowserActor;
 export type RelationshipsBrowserActorRef = ActorRefFromLogic<typeof relationshipsBrowserActor>;
 export type RelationshipsBrowserSnapshot = SnapshotFrom<RelationshipsBrowserActorRef>;

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

@@ -1,85 +1,276 @@
-import { invariant } from "@likec4/core";
+import { invariant, nonNullable, delay } from "@likec4/core";
 import { applyNodeChanges, applyEdgeChanges } from "@xyflow/react";
-import { prop } from "remeda";
-import { setup, assign, enqueueActions, cancel, raise } from "xstate";
-import { MinZoom } from "../../base/const.js";
+import { getViewportForBounds, getNodeDimensions } from "@xyflow/system";
+import { omit, prop, isNullish } from "remeda";
+import { setup, fromPromise, assign, raise, enqueueActions, cancel } from "xstate";
+import { MinZoom, ZIndexes } from "../../base/const.js";
 import { updateEdges } from "../../base/updateEdges.js";
 import { updateNodes } from "../../base/updateNodes.js";
+import { ViewPadding } from "./const.js";
 import { viewToNodesEdge } from "./useViewToNodesEdges.js";
+import { centerXYInternalNode } from "../../utils/xyflow.js";
+import { Base } from "../../base/types.js";
+const findRootSubject = (nodes) => nodes.find(
+  (n) => n.data.column === "subjects" && isNullish(n.parentId)
+);
 const relationshipsBrowserActor = setup({
   types: {
     context: {},
+    tags: "",
     input: {},
     events: {}
   },
   actions: {
+    "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 });
+        }
+      }
+      requestAnimationFrame(() => updateNodeInternals(updates, { triggerFitView: false }));
+    },
     "xyflow:fitDiagram": ({ context }, params) => {
-      const {
+      var _a;
+      let {
         duration = 450,
         bounds
       } = params ?? {};
-      const { xyflow } = context;
+      const { xyflow, xystore } = context;
       invariant(xyflow, "xyflow is not initialized");
+      invariant(xystore, "xystore is not initialized");
+      bounds ?? (bounds = (_a = context.layouted) == null ? void 0 : _a.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, ViewPadding);
+        requestAnimationFrame(() => xyflow.setViewport(viewport, duration > 0 ? { duration } : void 0));
       } else {
-        const maxZoom = Math.max(xyflow.getZoom(), 1);
-        xyflow.fitView({
-          minZoom: MinZoom,
-          maxZoom,
-          padding: 0.1,
-          ...duration > 0 && { duration }
-        });
+        requestAnimationFrame(
+          () => xyflow.fitView({
+            minZoom: MinZoom,
+            maxZoom,
+            padding: ViewPadding,
+            ...duration > 0 && { duration }
+          })
+        );
       }
     }
   },
   guards: {
-    "enable: navigate.to": () => true
+    "enable: navigate.to": () => true,
+    "closeable": ({ context }) => context.closeable
+  },
+  actors: {
+    layouter: fromPromise(async ({ input, self, signal }) => {
+      const {
+        subjectId,
+        navigateFromNode,
+        xyflow,
+        xystore,
+        update
+      } = input;
+      let {
+        nodes: currentNodes,
+        setNodes,
+        setEdges,
+        width,
+        height
+      } = xystore.getState();
+      const next = viewToNodesEdge(update);
+      const updateXYData = () => {
+        const { nodes, edges } = xystore.getState();
+        return {
+          xynodes: updateNodes(nodes, next.xynodes),
+          xyedges: updateEdges(edges, next.xyedges)
+        };
+      };
+      const parent = nonNullable(self._parent);
+      let zoom = xyflow.getZoom();
+      const maxZoom = Math.max(zoom, 1);
+      const nextviewport = getViewportForBounds(update.bounds, width, height, MinZoom, maxZoom, ViewPadding);
+      const nextSubjectNode = next.xynodes.find(
+        (n) => n.type !== "empty" && n.data.column === "subjects" && n.data.fqn === subjectId
+      ) ?? findRootSubject(next.xynodes);
+      const currentSubjectNode = findRootSubject(currentNodes);
+      const existingNode = navigateFromNode ? currentNodes.find((n) => n.id === navigateFromNode) : currentNodes.find((n) => n.type !== "empty" && n.data.column !== "subjects" && n.data.fqn === subjectId);
+      if (!nextSubjectNode || !existingNode || nextSubjectNode.type === "empty" || !currentSubjectNode || nextSubjectNode.data.fqn === currentSubjectNode.data.fqn) {
+        xyflow.setViewport(nextviewport);
+        return updateXYData();
+      }
+      const nextSubjectCenter = {
+        x: nextSubjectNode.position.x + (nextSubjectNode.initialWidth ?? 0) / 2,
+        y: nextSubjectNode.position.y + (nextSubjectNode.initialHeight ?? 0) / 2
+      };
+      const currentSubjectInternalNode = xyflow.getInternalNode(currentSubjectNode.id);
+      const currentSubjectCenter = centerXYInternalNode(currentSubjectInternalNode);
+      const existingInternalNode = xyflow.getInternalNode(existingNode.id);
+      const existingDimensions = getNodeDimensions(existingInternalNode);
+      const nested = /* @__PURE__ */ new Set();
+      currentNodes.forEach((n) => {
+        if (n.id === existingNode.id) {
+          return;
+        }
+        if (n.data.column === "subjects") {
+          nested.add(n.id);
+          return;
+        }
+        if (n.parentId && (n.parentId === existingNode.id || nested.has(n.parentId))) {
+          nested.add(n.id);
+        }
+      });
+      currentNodes = updateNodes(
+        currentNodes,
+        currentNodes.flatMap((n) => {
+          if (nested.has(n.id)) {
+            return [];
+          }
+          if (n.id !== existingNode.id) {
+            return {
+              ...n,
+              data: {
+                ...n.data,
+                dimmed: n.data.column === "subjects" ? "immediate" : true
+              }
+            };
+          }
+          return {
+            ...omit(n, ["parentId"]),
+            position: {
+              x: currentSubjectCenter.x - existingDimensions.width / 2,
+              y: currentSubjectCenter.y - existingDimensions.height / 2
+            },
+            zIndex: ZIndexes.Max,
+            hidden: false,
+            data: {
+              ...n.data,
+              dimmed: false
+            }
+          };
+        })
+      );
+      parent.send({
+        type: "update.xydata",
+        xynodes: currentNodes,
+        xyedges: []
+      });
+      zoom = Math.min(
+        zoom,
+        nextviewport.zoom
+      );
+      await delay(180);
+      next.xynodes = next.xynodes.map(Base.setDimmed(false));
+      if (signal.aborted) {
+        return updateXYData();
+      }
+      await xyflow.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, { zoom, duration: 350 });
+      xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom });
+      return updateXYData();
+    })
   }
 }).createMachine({
-  initial: "waiting-data",
+  initial: "initializing",
   context: ({ input }) => ({
     ...input,
     closeable: input.closeable ?? true,
     enableNavigationMenu: input.enableNavigationMenu ?? true,
     initialized: false,
     xyflow: null,
+    xystore: null,
     layouted: null,
+    navigateFromNode: null,
     xynodes: [],
     xyedges: []
   }),
   states: {
-    "waiting-data": {
+    "initializing": {
       on: {
-        "update.view": {
-          actions: assign(({ event }) => {
-            return {
-              layouted: event.layouted,
-              ...viewToNodesEdge(event.layouted)
-            };
-          }),
-          target: "opening"
+        "xyflow.init": {
+          actions: [
+            assign({
+              initialized: true,
+              xyflow: ({ event }) => event.instance,
+              xystore: ({ event }) => event.store
+            })
+          ],
+          target: "waiting-data"
+        },
+        "close": {
+          target: "closed"
         }
       }
     },
-    "opening": {
+    "waiting-data": {
       on: {
-        "xyflow.init": {
-          actions: assign({
-            initialized: true,
-            xyflow: ({ event }) => event.instance
-          }),
+        "update.view": {
+          actions: [
+            assign(({ event }) => {
+              return {
+                layouted: event.layouted,
+                ...viewToNodesEdge(event.layouted)
+              };
+            }),
+            raise({ type: "fitDiagram", duration: 0 })
+          ],
           target: "active"
-        },
-        "close": {
-          target: "closed"
         }
       }
     },
     "active": {
-      entry: {
-        type: "xyflow:fitDiagram",
-        params: { duration: 0 }
+      initial: "idle",
+      tags: ["active"],
+      states: {
+        "idle": {},
+        "layouting": {
+          invoke: {
+            id: "layouter",
+            src: "layouter",
+            input: ({ context }) => {
+              return {
+                subjectId: context.subject,
+                navigateFromNode: context.navigateFromNode,
+                xyflow: nonNullable(context.xyflow),
+                xystore: nonNullable(context.xystore),
+                update: nonNullable(context.layouted)
+              };
+            },
+            onDone: {
+              target: "idle",
+              actions: [
+                assign({
+                  xynodes: ({ event }) => event.output.xynodes,
+                  xyedges: ({ event }) => event.output.xyedges,
+                  navigateFromNode: null
+                }),
+                raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 80 }),
+                raise({ type: "xyflow.updateNodeInternals" }, { delay: 100 }),
+                raise({ type: "xyflow.updateNodeInternals" }, { delay: 250 }),
+                raise({ type: "xyflow.updateNodeInternals" }, { delay: 500 })
+              ]
+            }
+          },
+          on: {
+            "update.xydata": {
+              actions: assign({
+                xynodes: ({ event }) => event.xynodes,
+                xyedges: ({ event }) => event.xyedges
+              })
+            },
+            "xyflow.applyEdgeChages": {
+              // actions: log('layouting: ignore xyflow.applyEdgeChages'),
+            },
+            "xyflow.applyNodeChages": {
+              // actions: log('layouting: ignore xyflow.applyNodeChages'),
+            }
+          }
+        }
       },
       on: {
         "xyflow.nodeClick": {
@@ -87,8 +278,10 @@ const relationshipsBrowserActor = setup({
           actions: enqueueActions(({ event, enqueue }) => {
             if ("fqn" in event.node.data) {
               const fqn = event.node.data.fqn;
-              enqueue.assign({
-                subject: fqn
+              enqueue.raise({
+                type: "navigate.to",
+                subject: fqn,
+                fromNode: event.node.id
               });
             }
           })
@@ -97,7 +290,8 @@ const relationshipsBrowserActor = setup({
           guard: "enable: navigate.to",
           actions: [
             assign({
-              subject: ({ event }) => event.subject
+              subject: ({ event }) => event.subject,
+              navigateFromNode: ({ event }) => event.fromNode ?? null
             })
           ]
         },
@@ -105,24 +299,35 @@ const relationshipsBrowserActor = setup({
           actions: "xyflow:fitDiagram"
         },
         "update.view": {
-          actions: enqueueActions(({ context, event, enqueue }) => {
-            const updated = viewToNodesEdge(event.layouted);
-            enqueue.assign({
-              layouted: event.layouted,
-              xynodes: updateNodes(context.xynodes, updated.xynodes),
-              xyedges: updateEdges(context.xyedges, updated.xyedges)
-            });
-            enqueue.raise({ type: "fitDiagram" }, { delay: 50 });
-          })
+          actions: assign({
+            layouted: ({ event }) => event.layouted
+          }),
+          target: ".layouting"
+        },
+        "xyflow.updateNodeInternals": {
+          actions: "xyflow:updateNodeInternals"
+        },
+        "fitDiagram": {
+          actions: {
+            type: "xyflow:fitDiagram",
+            params: prop("event")
+          }
+        },
+        "xyflow.resized": {
+          actions: [
+            cancel("fitDiagram"),
+            raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 300 })
+          ]
         },
         "close": {
-          guard: ({ context }) => context.closeable,
+          guard: "closeable",
           target: "closed"
         }
       },
       exit: assign({
         initialized: false,
-        xyflow: null
+        xyflow: null,
+        xystore: null
       })
     },
     "closed": {
@@ -130,26 +335,18 @@ const relationshipsBrowserActor = setup({
     }
   },
   on: {
-    "fitDiagram": {
-      actions: {
-        type: "xyflow:fitDiagram",
-        params: prop("event")
-      }
-    },
-    "xyflow.resized": {
-      actions: [
-        cancel("fitDiagram"),
-        raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 200 })
-      ]
-    },
     "xyflow.applyNodeChages": {
       actions: assign({
-        xynodes: ({ context, event }) => applyNodeChanges(event.changes, context.xynodes)
+        xynodes: ({ context, event }) => {
+          return applyNodeChanges(event.changes, context.xynodes);
+        }
       })
     },
     "xyflow.applyEdgeChages": {
       actions: assign({
-        xyedges: ({ context, event }) => applyEdgeChanges(event.changes, context.xyedges)
+        xyedges: ({ context, event }) => {
+          return applyEdgeChanges(event.changes, context.xyedges);
+        }
       })
     }
   }

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

@@ -0,0 +1 @@
+export declare const ViewPadding = 0.08;

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

@@ -0,0 +1,4 @@
+const ViewPadding = 0.08;
+export {
+  ViewPadding
+};

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

@@ -26,7 +26,7 @@ const ElementActions = (props) => {
       icon: /* @__PURE__ */ jsx(IconTransform, {}),
       onClick: (e) => {
         e.stopPropagation();
-        browser.navigateTo(fqn);
+        browser.navigateTo(fqn, props.id);
       }
     });
   }

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

@@ -1,15 +1,15 @@
 import { NamedExoticComponent, CSSProperties, ReactNode } from 'react';
 import { Position } from '@xyflow/system';
-import { Color, ViewId, RelationshipLineType } from '@likec4/core';
+import { NonEmptyArray, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
 export declare const edgeTypes: {
     relationships: NamedExoticComponent<{
         source: string;
         target: string;
         style?: CSSProperties;
         id: string;
-        selected?: boolean;
         selectable?: boolean;
         deletable?: boolean;
+        selected?: boolean;
         animated?: boolean;
         sourceX: number;
         sourceY: number;
@@ -34,6 +34,7 @@ export declare const edgeTypes: {
             active?: boolean;
             dimmed?: import("../../../base").Base.Dimmed;
         } & {
+            relations: NonEmptyArray<RelationId>;
             color: Color | undefined;
             label: string | null;
             navigateTo: ViewId | null;

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

@@ -11,18 +11,36 @@ const edgeTypes = {
   relationships: customEdge((props) => {
     const { enableNavigateTo } = useEnabledFeature("NavigateTo");
     const {
-      sourceX,
-      targetY,
-      data: { navigateTo }
+      data: {
+        navigateTo,
+        relations
+      }
     } = props;
     const [svgPath, labelX, labelY] = getBezierPath(props);
     const diagram = useDiagram();
-    return /* @__PURE__ */ jsxs(EdgeContainer, { ...props, children: [
-      /* @__PURE__ */ jsx(EdgePath, { ...props, svgPath }),
+    const edgeProps = relations.length > 1 ? {
+      ...props,
+      data: {
+        ...props.data,
+        line: "solid",
+        color: "amber"
+      }
+    } : props;
+    return /* @__PURE__ */ jsxs(EdgeContainer, { ...edgeProps, children: [
+      /* @__PURE__ */ jsx(
+        EdgePath,
+        {
+          ...edgeProps,
+          svgPath,
+          ...relations.length > 1 && {
+            strokeWidth: 5
+          }
+        }
+      ),
       /* @__PURE__ */ jsx(
         EdgeLabel,
         {
-          edgeProps: props,
+          edgeProps,
           labelPosition: {
             x: labelX,
             y: labelY,

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

@@ -1,6 +1,7 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { Handle } from "@xyflow/react";
 import { Position } from "@xyflow/system";
+import { m } from "framer-motion";
 import { ElementActions } from "./ElementActions.js";
 import { EmptyNode } from "./EmptyNode.js";
 import { customNode } from "../../../base/primitives/customNode.js";
@@ -11,7 +12,7 @@ import { CompoundNodeContainer } from "../../../base/primitives/compound/Compoun
 import { CompoundTitle } from "../../../base/primitives/compound/CompoundTitle.js";
 const nodeTypes = {
   element: customNode((props) => {
-    return /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
+    return /* @__PURE__ */ jsxs(ElementNodeContainer, { component: m.div, layoutId: props.id, nodeProps: props, children: [
       /* @__PURE__ */ jsx(ElementShape, { ...props }),
       /* @__PURE__ */ jsx(ElementTitle, { ...props, iconSize: 40 }),
       /* @__PURE__ */ jsx(ElementActions, { ...props }),
@@ -19,7 +20,7 @@ const nodeTypes = {
     ] });
   }),
   compound: customNode((props) => {
-    return /* @__PURE__ */ jsxs(CompoundNodeContainer, { nodeProps: props, children: [
+    return /* @__PURE__ */ jsxs(CompoundNodeContainer, { component: m.div, layoutId: props.id, nodeProps: props, children: [
       /* @__PURE__ */ jsx(CompoundTitle, { ...props }),
       /* @__PURE__ */ jsx(CompoundPorts, { ...props })
     ] });

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

@@ -1,5 +1,5 @@
-import { Fqn, Color, ViewId, RelationshipLineType } from '@likec4/core';
-import { RelationshipsBrowserActorRef, RelationshipsBrowserSnapshot, Input, Events } from './actor';
+import { Fqn, NonEmptyArray, RelationId, Color, ViewId, RelationshipLineType } from '@likec4/core';
+import { RelationshipsBrowserActorRef, RelationshipsBrowserSnapshot, Input, XYStoreApi, Events } from './actor';
 import { Context, ReactNode, CSSProperties } from 'react';
 import { GeneralHelpers, ViewportHelperFunctions } from '@xyflow/react';
 import { EdgeMarkerType, HandleType } from '@xyflow/system';
@@ -39,6 +39,7 @@ export declare function useRelationshipsBrowser(): {
             focusable?: boolean;
             type: "relationships";
             data: {
+                relations: NonEmptyArray<RelationId>;
                 color: Color | undefined;
                 label: string | null;
                 navigateTo: ViewId | null;
@@ -50,13 +51,15 @@ export declare function useRelationshipsBrowser(): {
         }> & Omit< ViewportHelperFunctions, "initialized"> & {
             viewportInitialized: boolean;
         }) | null;
+        xystore: XYStoreApi | null;
         initialized: boolean;
         layouted: LayoutRelationshipsViewResult | null;
+        navigateFromNode: string | null;
         xynodes: import("./_types").RelationshipsBrowserTypes.Node[];
         xyedges: import("./_types").RelationshipsBrowserTypes.Edge[];
     }>;
     send: (event: Events) => void;
-    navigateTo: (subject: Fqn) => void;
+    navigateTo: (subject: Fqn, fromNode?: string) => void;
     fitDiagram: () => void;
     close: () => void;
 };

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

@@ -1,6 +1,7 @@
 import { nonNullable } from "@likec4/core";
 import { useCallbackRef } from "@mantine/hooks";
 import { useSelector } from "@xstate/react";
+import "@xyflow/react";
 import { shallowEqual } from "fast-equals";
 import { createContext, useTransition, useMemo, useContext } from "react";
 const RelationshipsBrowserActorContext = createContext(null);
@@ -18,11 +19,12 @@ function useRelationshipsBrowser() {
   return useMemo(() => ({
     getState: () => actor.getSnapshot().context,
     send: actor.send,
-    navigateTo: (subject) => {
+    navigateTo: (subject, fromNode) => {
       startTransition(() => {
         actor.send({
           type: "navigate.to",
-          subject
+          subject,
+          fromNode
         });
       });
     },

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

@@ -122,18 +122,23 @@ function viewToNodesEdge(view) {
       console.error("edge should have at least 2 points", edge);
       continue;
     }
+    if (!hasAtLeast(edge.relations, 1)) {
+      console.error("edge should have at least 1 relation", edge);
+      continue;
+    }
     xyedges.push({
       id,
       type: "relationships",
       source: ns + source,
       target: ns + target,
-      sourceHandle: ns + target,
-      targetHandle: ns + source,
+      sourceHandle: edge.sourceHandle,
+      targetHandle: edge.targetHandle,
       zIndex: ZIndexes.Edge,
       // selectable: selectable,
       // hidden: !visiblePredicate(edge),
       deletable: false,
       data: {
+        relations: edge.relations,
         color: edge.color ?? "gray",
         label: edge.label,
         navigateTo: edge.navigateTo ?? null,