@angflow/angular 0.0.10 → 0.0.12

package/dist/esm/lib/container/edge-renderer/edge-renderer.component.js

@@ -112,6 +112,12 @@ export class EdgeRendererComponent {
         const targetNode = this.store.nodeLookup.get(edge.target);
         const sourceHandle = sourceNode?.internals?.handleBounds?.source?.find((h) => h.id === edge.sourceHandle || (!edge.sourceHandle && h.id === null)) ?? sourceNode?.internals?.handleBounds?.source?.[0];
         const targetHandle = targetNode?.internals?.handleBounds?.target?.find((h) => h.id === edge.targetHandle || (!edge.targetHandle && h.id === null)) ?? targetNode?.internals?.handleBounds?.target?.[0];
+        const enrichedSourceHandle = sourceHandle
+            ? { ...sourceHandle, data: this.store.getHandleData(edge.source, sourceHandle.id ?? null, 'source') }
+            : null;
+        const enrichedTargetHandle = targetHandle
+            ? { ...targetHandle, data: this.store.getHandleData(edge.target, targetHandle.id ?? null, 'target') }
+            : null;
         const sourcePos = sourceNode?.internals?.positionAbsolute ?? sourceNode?.position ?? { x: 0, y: 0 };
         const targetPos = targetNode?.internals?.positionAbsolute ?? targetNode?.position ?? { x: 0, y: 0 };
         const sourceW = sourceNode?.measured?.width ?? sourceNode?.width ?? 150;
@@ -160,6 +166,8 @@ export class EdgeRendererComponent {
             pathOptions: edge.pathOptions,
             sourceHandleId: edge.sourceHandle,
             targetHandleId: edge.targetHandle,
+            sourceHandle: enrichedSourceHandle,
+            targetHandle: enrichedTargetHandle,
         };
     }
     onEdgeEvent(event, edge, eventType) {
@@ -302,164 +310,164 @@ export class EdgeRendererComponent {
         return `url('#${getMarkerId(marker, this.store.rfId())}')`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: EdgeRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: EdgeRendererComponent, isStandalone: true, selector: "ng-flow-edge-renderer", inputs: { reconnectRadius: { classPropertyName: "reconnectRadius", publicName: "reconnectRadius", isSignal: true, isRequired: false, transformFunction: null }, customEdgeTypes: { classPropertyName: "customEdgeTypes", publicName: "customEdgeTypes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edgeClick: "edgeClick", edgeDoubleClick: "edgeDoubleClick", edgeContextMenu: "edgeContextMenu", edgeMouseEnter: "edgeMouseEnter", edgeMouseMove: "edgeMouseMove", edgeMouseLeave: "edgeMouseLeave", reconnect: "reconnect", reconnectStart: "reconnectStart", reconnectEnd: "reconnectEnd" }, host: { styleAttribute: "position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none;", classAttribute: "ng-flow__edges xy-flow__edges" }, ngImport: i0, template: `
-    <svg style="position: absolute; width: 100%; height: 100%; overflow: visible; pointer-events: none;">
-      <defs>
-        @for (marker of markers(); track marker.id) {
-          <marker
-            [id]="marker.id"
-            [attr.markerWidth]="marker.width ?? 12.5"
-            [attr.markerHeight]="marker.height ?? 12.5"
-            viewBox="-10 -10 20 20"
-            markerUnits="strokeWidth"
-            orient="auto-start-reverse"
-            refX="0"
-            refY="0"
-          >
-            <polyline
-              class="xy-flow__arrowhead"
-              [class.arrowclosed]="marker.type === 'arrowclosed'"
-              [attr.stroke]="marker.color || 'currentColor'"
-              [attr.fill]="marker.type === 'arrowclosed' ? (marker.color || 'currentColor') : 'none'"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1"
-              points="-5,-4 0,0 -5,4"
-            />
-          </marker>
-        }
-      </defs>
-    </svg>
-    @for (edge of visibleEdges(); track edge.id) {
-      @if (!edge.hidden) {
-      @let ei = getEdgeInputs(edge);
-      <svg
-        class="ng-flow__edge xy-flow__edge"
-        [class]="getEdgeClasses(edge)"
-        [class.selected]="edge.selected"
-        [class.animated]="edge.animated"
-        [class.selectable]="edge.selectable !== false"
-        [style.z-index]="getEdgeZIndex(edge)"
-        [attr.aria-label]="getEdgeAriaLabel(edge)"
-        [attr.tabindex]="store.edgesFocusable() ? 0 : -1"
-        role="img"
-        style="overflow: visible; position: absolute; width: 100%; height: 100%; pointer-events: none;"
-        (keydown)="onEdgeKeyDown($event, edge)"
-        (focus)="onEdgeFocus(edge)"
-      >
-        <g
-          [attr.data-id]="edge.id"
-          [class]="getEdgeGClasses(edge)"
-          [attr.aria-label]="edge.ariaLabel ? edge.ariaLabel : undefined"
-          style="pointer-events: visibleStroke;"
-          (click)="onEdgeEvent($event, edge, 'click')"
-          (dblclick)="onEdgeEvent($event, edge, 'dblclick')"
-          (contextmenu)="onEdgeEvent($event, edge, 'contextmenu')"
-          (mouseenter)="onEdgeEvent($event, edge, 'mouseenter')"
-          (mousemove)="onEdgeEvent($event, edge, 'mousemove')"
-          (mouseleave)="onEdgeEvent($event, edge, 'mouseleave')"
-        >
-          @if (isCustomEdge(edge.type)) {
-            <!--
-              For custom edges the visual (path + labels) is rendered in the
-              HTML overlay layer below, because NgComponentOutlet creates the
-              dynamic component's host in the XHTML namespace which breaks SVG
-              child rendering. We still emit a transparent interaction path
-              here so that pointer events (click/hover/etc.) fire on the
-              existing SVG <g> event handlers.
-            -->
-            <path
-              class="xy-flow__edge-interaction"
-              [attr.d]="getEdgePath(ei)"
-              fill="none"
-              stroke="transparent"
-              [attr.stroke-width]="edge.interactionWidth ?? 20"
-              style="pointer-events: all;"
-            />
-          } @else {
-            <path
-              class="xy-flow__edge-interaction"
-              [attr.d]="getEdgePath(ei)"
-              fill="none"
-              stroke="transparent"
-              [attr.stroke-width]="edge.interactionWidth ?? 20"
-              style="pointer-events: all;"
-            />
-            <path
-              class="ng-flow__edge-path xy-flow__edge-path"
-              [attr.d]="getEdgePath(ei)"
-              [attr.marker-start]="ei['markerStart']"
-              [attr.marker-end]="ei['markerEnd']"
-              [attr.style]="getEdgePathStyle(edge)"
-            />
-          }
-          @if (isEdgeReconnectable(edge)) {
-            <circle
-              class="xy-flow__edgeupdater xy-flow__edgeupdater-source"
-              [attr.cx]="shiftX(ei['sourceX'], reconnectRadius(), ei['sourcePosition'])"
-              [attr.cy]="shiftY(ei['sourceY'], reconnectRadius(), ei['sourcePosition'])"
-              [attr.r]="reconnectRadius()"
-              stroke="transparent"
-              fill="transparent"
-              (mousedown)="onReconnectSourceMouseDown($event, edge)"
-            />
-            <circle
-              class="xy-flow__edgeupdater xy-flow__edgeupdater-target"
-              [attr.cx]="shiftX(ei['targetX'], reconnectRadius(), ei['targetPosition'])"
-              [attr.cy]="shiftY(ei['targetY'], reconnectRadius(), ei['targetPosition'])"
-              [attr.r]="reconnectRadius()"
-              stroke="transparent"
-              fill="transparent"
-              (mousedown)="onReconnectTargetMouseDown($event, edge)"
-            />
-          }
-        </g>
-      </svg>
-      }
-    }
-    <!--
-      HTML overlay for custom edges. Angular's NgComponentOutlet can only
-      create host elements in the XHTML namespace, so rendering a custom
-      edge directly inside an <svg> sub-tree breaks its <path> children.
-      We render the dynamic component here in an HTML context and let
-      BaseEdgeComponent wrap its paths in an inline <svg>. Pointer events
-      are still handled on the SVG <g> layer above via a transparent
-      interaction path, so this overlay is pointer-events: none.
-    -->
-    @for (edge of visibleEdges(); track edge.id) {
-      @if (!edge.hidden && isCustomEdge(edge.type)) {
-        @let ei = getEdgeInputs(edge);
-        <div
-          class="ng-flow__custom-edge"
-          [style.position]="'absolute'"
-          [style.top]="'0'"
-          [style.left]="'0'"
-          [style.width]="'100%'"
-          [style.height]="'100%'"
-          [style.pointer-events]="'none'"
-          [style.z-index]="getEdgeZIndex(edge)"
-        >
-          <ng-container
-            *ngComponentOutlet="getEdgeComponent(edge.type); inputs: ei"
-          />
-        </div>
-      }
-    }
-    <div class="xy-flow__edgelabel-renderer" style="position: absolute; width: 100%; height: 100%; pointer-events: none; top: 0; left: 0;">
-      @for (edge of visibleEdges(); track edge.id) {
-        @if (edge.label && !edge.hidden) {
-          @let ei = getEdgeInputs(edge);
-          <div
-            class="xy-flow__edge-label"
-            [style.position]="'absolute'"
-            [style.transform]="'translate(-50%, -50%) translate(' + getEdgeCenterX(ei) + 'px, ' + getEdgeCenterY(ei) + 'px)'"
-            [style.pointer-events]="'all'"
-          >
-            {{ edge.label }}
-          </div>
-        }
-      }
-    </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: EdgeRendererComponent, isStandalone: true, selector: "ng-flow-edge-renderer", inputs: { reconnectRadius: { classPropertyName: "reconnectRadius", publicName: "reconnectRadius", isSignal: true, isRequired: false, transformFunction: null }, customEdgeTypes: { classPropertyName: "customEdgeTypes", publicName: "customEdgeTypes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edgeClick: "edgeClick", edgeDoubleClick: "edgeDoubleClick", edgeContextMenu: "edgeContextMenu", edgeMouseEnter: "edgeMouseEnter", edgeMouseMove: "edgeMouseMove", edgeMouseLeave: "edgeMouseLeave", reconnect: "reconnect", reconnectStart: "reconnectStart", reconnectEnd: "reconnectEnd" }, host: { styleAttribute: "position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none;", classAttribute: "ng-flow__edges xy-flow__edges" }, ngImport: i0, template: `
+    <svg style="position: absolute; width: 100%; height: 100%; overflow: visible; pointer-events: none;">
+      <defs>
+        @for (marker of markers(); track marker.id) {
+          <marker
+            [id]="marker.id"
+            [attr.markerWidth]="marker.width ?? 12.5"
+            [attr.markerHeight]="marker.height ?? 12.5"
+            viewBox="-10 -10 20 20"
+            markerUnits="strokeWidth"
+            orient="auto-start-reverse"
+            refX="0"
+            refY="0"
+          >
+            <polyline
+              class="xy-flow__arrowhead"
+              [class.arrowclosed]="marker.type === 'arrowclosed'"
+              [attr.stroke]="marker.color || 'currentColor'"
+              [attr.fill]="marker.type === 'arrowclosed' ? (marker.color || 'currentColor') : 'none'"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1"
+              points="-5,-4 0,0 -5,4"
+            />
+          </marker>
+        }
+      </defs>
+    </svg>
+    @for (edge of visibleEdges(); track edge.id) {
+      @if (!edge.hidden) {
+      @let ei = getEdgeInputs(edge);
+      <svg
+        class="ng-flow__edge xy-flow__edge"
+        [class]="getEdgeClasses(edge)"
+        [class.selected]="edge.selected"
+        [class.animated]="edge.animated"
+        [class.selectable]="edge.selectable !== false"
+        [style.z-index]="getEdgeZIndex(edge)"
+        [attr.aria-label]="getEdgeAriaLabel(edge)"
+        [attr.tabindex]="store.edgesFocusable() ? 0 : -1"
+        role="img"
+        style="overflow: visible; position: absolute; width: 100%; height: 100%; pointer-events: none;"
+        (keydown)="onEdgeKeyDown($event, edge)"
+        (focus)="onEdgeFocus(edge)"
+      >
+        <g
+          [attr.data-id]="edge.id"
+          [class]="getEdgeGClasses(edge)"
+          [attr.aria-label]="edge.ariaLabel ? edge.ariaLabel : undefined"
+          style="pointer-events: visibleStroke;"
+          (click)="onEdgeEvent($event, edge, 'click')"
+          (dblclick)="onEdgeEvent($event, edge, 'dblclick')"
+          (contextmenu)="onEdgeEvent($event, edge, 'contextmenu')"
+          (mouseenter)="onEdgeEvent($event, edge, 'mouseenter')"
+          (mousemove)="onEdgeEvent($event, edge, 'mousemove')"
+          (mouseleave)="onEdgeEvent($event, edge, 'mouseleave')"
+        >
+          @if (isCustomEdge(edge.type)) {
+            <!--
+              For custom edges the visual (path + labels) is rendered in the
+              HTML overlay layer below, because NgComponentOutlet creates the
+              dynamic component's host in the XHTML namespace which breaks SVG
+              child rendering. We still emit a transparent interaction path
+              here so that pointer events (click/hover/etc.) fire on the
+              existing SVG <g> event handlers.
+            -->
+            <path
+              class="xy-flow__edge-interaction"
+              [attr.d]="getEdgePath(ei)"
+              fill="none"
+              stroke="transparent"
+              [attr.stroke-width]="edge.interactionWidth ?? 20"
+              style="pointer-events: all;"
+            />
+          } @else {
+            <path
+              class="xy-flow__edge-interaction"
+              [attr.d]="getEdgePath(ei)"
+              fill="none"
+              stroke="transparent"
+              [attr.stroke-width]="edge.interactionWidth ?? 20"
+              style="pointer-events: all;"
+            />
+            <path
+              class="ng-flow__edge-path xy-flow__edge-path"
+              [attr.d]="getEdgePath(ei)"
+              [attr.marker-start]="ei['markerStart']"
+              [attr.marker-end]="ei['markerEnd']"
+              [attr.style]="getEdgePathStyle(edge)"
+            />
+          }
+          @if (isEdgeReconnectable(edge)) {
+            <circle
+              class="xy-flow__edgeupdater xy-flow__edgeupdater-source"
+              [attr.cx]="shiftX(ei['sourceX'], reconnectRadius(), ei['sourcePosition'])"
+              [attr.cy]="shiftY(ei['sourceY'], reconnectRadius(), ei['sourcePosition'])"
+              [attr.r]="reconnectRadius()"
+              stroke="transparent"
+              fill="transparent"
+              (mousedown)="onReconnectSourceMouseDown($event, edge)"
+            />
+            <circle
+              class="xy-flow__edgeupdater xy-flow__edgeupdater-target"
+              [attr.cx]="shiftX(ei['targetX'], reconnectRadius(), ei['targetPosition'])"
+              [attr.cy]="shiftY(ei['targetY'], reconnectRadius(), ei['targetPosition'])"
+              [attr.r]="reconnectRadius()"
+              stroke="transparent"
+              fill="transparent"
+              (mousedown)="onReconnectTargetMouseDown($event, edge)"
+            />
+          }
+        </g>
+      </svg>
+      }
+    }
+    <!--
+      HTML overlay for custom edges. Angular's NgComponentOutlet can only
+      create host elements in the XHTML namespace, so rendering a custom
+      edge directly inside an <svg> sub-tree breaks its <path> children.
+      We render the dynamic component here in an HTML context and let
+      BaseEdgeComponent wrap its paths in an inline <svg>. Pointer events
+      are still handled on the SVG <g> layer above via a transparent
+      interaction path, so this overlay is pointer-events: none.
+    -->
+    @for (edge of visibleEdges(); track edge.id) {
+      @if (!edge.hidden && isCustomEdge(edge.type)) {
+        @let ei = getEdgeInputs(edge);
+        <div
+          class="ng-flow__custom-edge"
+          [style.position]="'absolute'"
+          [style.top]="'0'"
+          [style.left]="'0'"
+          [style.width]="'100%'"
+          [style.height]="'100%'"
+          [style.pointer-events]="'none'"
+          [style.z-index]="getEdgeZIndex(edge)"
+        >
+          <ng-container
+            *ngComponentOutlet="getEdgeComponent(edge.type); inputs: ei"
+          />
+        </div>
+      }
+    }
+    <div class="xy-flow__edgelabel-renderer" style="position: absolute; width: 100%; height: 100%; pointer-events: none; top: 0; left: 0;">
+      @for (edge of visibleEdges(); track edge.id) {
+        @if (edge.label && !edge.hidden) {
+          @let ei = getEdgeInputs(edge);
+          <div
+            class="xy-flow__edge-label"
+            [style.position]="'absolute'"
+            [style.transform]="'translate(-50%, -50%) translate(' + getEdgeCenterX(ei) + 'px, ' + getEdgeCenterY(ei) + 'px)'"
+            [style.pointer-events]="'all'"
+          >
+            {{ edge.label }}
+          </div>
+        }
+      }
+    </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: EdgeRendererComponent, decorators: [{
@@ -474,164 +482,164 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         'class': 'ng-flow__edges xy-flow__edges',
                         'style': 'position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none;',
                     },
-                    template: `
-    <svg style="position: absolute; width: 100%; height: 100%; overflow: visible; pointer-events: none;">
-      <defs>
-        @for (marker of markers(); track marker.id) {
-          <marker
-            [id]="marker.id"
-            [attr.markerWidth]="marker.width ?? 12.5"
-            [attr.markerHeight]="marker.height ?? 12.5"
-            viewBox="-10 -10 20 20"
-            markerUnits="strokeWidth"
-            orient="auto-start-reverse"
-            refX="0"
-            refY="0"
-          >
-            <polyline
-              class="xy-flow__arrowhead"
-              [class.arrowclosed]="marker.type === 'arrowclosed'"
-              [attr.stroke]="marker.color || 'currentColor'"
-              [attr.fill]="marker.type === 'arrowclosed' ? (marker.color || 'currentColor') : 'none'"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1"
-              points="-5,-4 0,0 -5,4"
-            />
-          </marker>
-        }
-      </defs>
-    </svg>
-    @for (edge of visibleEdges(); track edge.id) {
-      @if (!edge.hidden) {
-      @let ei = getEdgeInputs(edge);
-      <svg
-        class="ng-flow__edge xy-flow__edge"
-        [class]="getEdgeClasses(edge)"
-        [class.selected]="edge.selected"
-        [class.animated]="edge.animated"
-        [class.selectable]="edge.selectable !== false"
-        [style.z-index]="getEdgeZIndex(edge)"
-        [attr.aria-label]="getEdgeAriaLabel(edge)"
-        [attr.tabindex]="store.edgesFocusable() ? 0 : -1"
-        role="img"
-        style="overflow: visible; position: absolute; width: 100%; height: 100%; pointer-events: none;"
-        (keydown)="onEdgeKeyDown($event, edge)"
-        (focus)="onEdgeFocus(edge)"
-      >
-        <g
-          [attr.data-id]="edge.id"
-          [class]="getEdgeGClasses(edge)"
-          [attr.aria-label]="edge.ariaLabel ? edge.ariaLabel : undefined"
-          style="pointer-events: visibleStroke;"
-          (click)="onEdgeEvent($event, edge, 'click')"
-          (dblclick)="onEdgeEvent($event, edge, 'dblclick')"
-          (contextmenu)="onEdgeEvent($event, edge, 'contextmenu')"
-          (mouseenter)="onEdgeEvent($event, edge, 'mouseenter')"
-          (mousemove)="onEdgeEvent($event, edge, 'mousemove')"
-          (mouseleave)="onEdgeEvent($event, edge, 'mouseleave')"
-        >
-          @if (isCustomEdge(edge.type)) {
-            <!--
-              For custom edges the visual (path + labels) is rendered in the
-              HTML overlay layer below, because NgComponentOutlet creates the
-              dynamic component's host in the XHTML namespace which breaks SVG
-              child rendering. We still emit a transparent interaction path
-              here so that pointer events (click/hover/etc.) fire on the
-              existing SVG <g> event handlers.
-            -->
-            <path
-              class="xy-flow__edge-interaction"
-              [attr.d]="getEdgePath(ei)"
-              fill="none"
-              stroke="transparent"
-              [attr.stroke-width]="edge.interactionWidth ?? 20"
-              style="pointer-events: all;"
-            />
-          } @else {
-            <path
-              class="xy-flow__edge-interaction"
-              [attr.d]="getEdgePath(ei)"
-              fill="none"
-              stroke="transparent"
-              [attr.stroke-width]="edge.interactionWidth ?? 20"
-              style="pointer-events: all;"
-            />
-            <path
-              class="ng-flow__edge-path xy-flow__edge-path"
-              [attr.d]="getEdgePath(ei)"
-              [attr.marker-start]="ei['markerStart']"
-              [attr.marker-end]="ei['markerEnd']"
-              [attr.style]="getEdgePathStyle(edge)"
-            />
-          }
-          @if (isEdgeReconnectable(edge)) {
-            <circle
-              class="xy-flow__edgeupdater xy-flow__edgeupdater-source"
-              [attr.cx]="shiftX(ei['sourceX'], reconnectRadius(), ei['sourcePosition'])"
-              [attr.cy]="shiftY(ei['sourceY'], reconnectRadius(), ei['sourcePosition'])"
-              [attr.r]="reconnectRadius()"
-              stroke="transparent"
-              fill="transparent"
-              (mousedown)="onReconnectSourceMouseDown($event, edge)"
-            />
-            <circle
-              class="xy-flow__edgeupdater xy-flow__edgeupdater-target"
-              [attr.cx]="shiftX(ei['targetX'], reconnectRadius(), ei['targetPosition'])"
-              [attr.cy]="shiftY(ei['targetY'], reconnectRadius(), ei['targetPosition'])"
-              [attr.r]="reconnectRadius()"
-              stroke="transparent"
-              fill="transparent"
-              (mousedown)="onReconnectTargetMouseDown($event, edge)"
-            />
-          }
-        </g>
-      </svg>
-      }
-    }
-    <!--
-      HTML overlay for custom edges. Angular's NgComponentOutlet can only
-      create host elements in the XHTML namespace, so rendering a custom
-      edge directly inside an <svg> sub-tree breaks its <path> children.
-      We render the dynamic component here in an HTML context and let
-      BaseEdgeComponent wrap its paths in an inline <svg>. Pointer events
-      are still handled on the SVG <g> layer above via a transparent
-      interaction path, so this overlay is pointer-events: none.
-    -->
-    @for (edge of visibleEdges(); track edge.id) {
-      @if (!edge.hidden && isCustomEdge(edge.type)) {
-        @let ei = getEdgeInputs(edge);
-        <div
-          class="ng-flow__custom-edge"
-          [style.position]="'absolute'"
-          [style.top]="'0'"
-          [style.left]="'0'"
-          [style.width]="'100%'"
-          [style.height]="'100%'"
-          [style.pointer-events]="'none'"
-          [style.z-index]="getEdgeZIndex(edge)"
-        >
-          <ng-container
-            *ngComponentOutlet="getEdgeComponent(edge.type); inputs: ei"
-          />
-        </div>
-      }
-    }
-    <div class="xy-flow__edgelabel-renderer" style="position: absolute; width: 100%; height: 100%; pointer-events: none; top: 0; left: 0;">
-      @for (edge of visibleEdges(); track edge.id) {
-        @if (edge.label && !edge.hidden) {
-          @let ei = getEdgeInputs(edge);
-          <div
-            class="xy-flow__edge-label"
-            [style.position]="'absolute'"
-            [style.transform]="'translate(-50%, -50%) translate(' + getEdgeCenterX(ei) + 'px, ' + getEdgeCenterY(ei) + 'px)'"
-            [style.pointer-events]="'all'"
-          >
-            {{ edge.label }}
-          </div>
-        }
-      }
-    </div>
+                    template: `
+    <svg style="position: absolute; width: 100%; height: 100%; overflow: visible; pointer-events: none;">
+      <defs>
+        @for (marker of markers(); track marker.id) {
+          <marker
+            [id]="marker.id"
+            [attr.markerWidth]="marker.width ?? 12.5"
+            [attr.markerHeight]="marker.height ?? 12.5"
+            viewBox="-10 -10 20 20"
+            markerUnits="strokeWidth"
+            orient="auto-start-reverse"
+            refX="0"
+            refY="0"
+          >
+            <polyline
+              class="xy-flow__arrowhead"
+              [class.arrowclosed]="marker.type === 'arrowclosed'"
+              [attr.stroke]="marker.color || 'currentColor'"
+              [attr.fill]="marker.type === 'arrowclosed' ? (marker.color || 'currentColor') : 'none'"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1"
+              points="-5,-4 0,0 -5,4"
+            />
+          </marker>
+        }
+      </defs>
+    </svg>
+    @for (edge of visibleEdges(); track edge.id) {
+      @if (!edge.hidden) {
+      @let ei = getEdgeInputs(edge);
+      <svg
+        class="ng-flow__edge xy-flow__edge"
+        [class]="getEdgeClasses(edge)"
+        [class.selected]="edge.selected"
+        [class.animated]="edge.animated"
+        [class.selectable]="edge.selectable !== false"
+        [style.z-index]="getEdgeZIndex(edge)"
+        [attr.aria-label]="getEdgeAriaLabel(edge)"
+        [attr.tabindex]="store.edgesFocusable() ? 0 : -1"
+        role="img"
+        style="overflow: visible; position: absolute; width: 100%; height: 100%; pointer-events: none;"
+        (keydown)="onEdgeKeyDown($event, edge)"
+        (focus)="onEdgeFocus(edge)"
+      >
+        <g
+          [attr.data-id]="edge.id"
+          [class]="getEdgeGClasses(edge)"
+          [attr.aria-label]="edge.ariaLabel ? edge.ariaLabel : undefined"
+          style="pointer-events: visibleStroke;"
+          (click)="onEdgeEvent($event, edge, 'click')"
+          (dblclick)="onEdgeEvent($event, edge, 'dblclick')"
+          (contextmenu)="onEdgeEvent($event, edge, 'contextmenu')"
+          (mouseenter)="onEdgeEvent($event, edge, 'mouseenter')"
+          (mousemove)="onEdgeEvent($event, edge, 'mousemove')"
+          (mouseleave)="onEdgeEvent($event, edge, 'mouseleave')"
+        >
+          @if (isCustomEdge(edge.type)) {
+            <!--
+              For custom edges the visual (path + labels) is rendered in the
+              HTML overlay layer below, because NgComponentOutlet creates the
+              dynamic component's host in the XHTML namespace which breaks SVG
+              child rendering. We still emit a transparent interaction path
+              here so that pointer events (click/hover/etc.) fire on the
+              existing SVG <g> event handlers.
+            -->
+            <path
+              class="xy-flow__edge-interaction"
+              [attr.d]="getEdgePath(ei)"
+              fill="none"
+              stroke="transparent"
+              [attr.stroke-width]="edge.interactionWidth ?? 20"
+              style="pointer-events: all;"
+            />
+          } @else {
+            <path
+              class="xy-flow__edge-interaction"
+              [attr.d]="getEdgePath(ei)"
+              fill="none"
+              stroke="transparent"
+              [attr.stroke-width]="edge.interactionWidth ?? 20"
+              style="pointer-events: all;"
+            />
+            <path
+              class="ng-flow__edge-path xy-flow__edge-path"
+              [attr.d]="getEdgePath(ei)"
+              [attr.marker-start]="ei['markerStart']"
+              [attr.marker-end]="ei['markerEnd']"
+              [attr.style]="getEdgePathStyle(edge)"
+            />
+          }
+          @if (isEdgeReconnectable(edge)) {
+            <circle
+              class="xy-flow__edgeupdater xy-flow__edgeupdater-source"
+              [attr.cx]="shiftX(ei['sourceX'], reconnectRadius(), ei['sourcePosition'])"
+              [attr.cy]="shiftY(ei['sourceY'], reconnectRadius(), ei['sourcePosition'])"
+              [attr.r]="reconnectRadius()"
+              stroke="transparent"
+              fill="transparent"
+              (mousedown)="onReconnectSourceMouseDown($event, edge)"
+            />
+            <circle
+              class="xy-flow__edgeupdater xy-flow__edgeupdater-target"
+              [attr.cx]="shiftX(ei['targetX'], reconnectRadius(), ei['targetPosition'])"
+              [attr.cy]="shiftY(ei['targetY'], reconnectRadius(), ei['targetPosition'])"
+              [attr.r]="reconnectRadius()"
+              stroke="transparent"
+              fill="transparent"
+              (mousedown)="onReconnectTargetMouseDown($event, edge)"
+            />
+          }
+        </g>
+      </svg>
+      }
+    }
+    <!--
+      HTML overlay for custom edges. Angular's NgComponentOutlet can only
+      create host elements in the XHTML namespace, so rendering a custom
+      edge directly inside an <svg> sub-tree breaks its <path> children.
+      We render the dynamic component here in an HTML context and let
+      BaseEdgeComponent wrap its paths in an inline <svg>. Pointer events
+      are still handled on the SVG <g> layer above via a transparent
+      interaction path, so this overlay is pointer-events: none.
+    -->
+    @for (edge of visibleEdges(); track edge.id) {
+      @if (!edge.hidden && isCustomEdge(edge.type)) {
+        @let ei = getEdgeInputs(edge);
+        <div
+          class="ng-flow__custom-edge"
+          [style.position]="'absolute'"
+          [style.top]="'0'"
+          [style.left]="'0'"
+          [style.width]="'100%'"
+          [style.height]="'100%'"
+          [style.pointer-events]="'none'"
+          [style.z-index]="getEdgeZIndex(edge)"
+        >
+          <ng-container
+            *ngComponentOutlet="getEdgeComponent(edge.type); inputs: ei"
+          />
+        </div>
+      }
+    }
+    <div class="xy-flow__edgelabel-renderer" style="position: absolute; width: 100%; height: 100%; pointer-events: none; top: 0; left: 0;">
+      @for (edge of visibleEdges(); track edge.id) {
+        @if (edge.label && !edge.hidden) {
+          @let ei = getEdgeInputs(edge);
+          <div
+            class="xy-flow__edge-label"
+            [style.position]="'absolute'"
+            [style.transform]="'translate(-50%, -50%) translate(' + getEdgeCenterX(ei) + 'px, ' + getEdgeCenterY(ei) + 'px)'"
+            [style.pointer-events]="'all'"
+          >
+            {{ edge.label }}
+          </div>
+        }
+      }
+    </div>
   `,
                 }]
         }], propDecorators: { reconnectRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "reconnectRadius", required: false }] }], edgeClick: [{ type: i0.Output, args: ["edgeClick"] }], edgeDoubleClick: [{ type: i0.Output, args: ["edgeDoubleClick"] }], edgeContextMenu: [{ type: i0.Output, args: ["edgeContextMenu"] }], edgeMouseEnter: [{ type: i0.Output, args: ["edgeMouseEnter"] }], edgeMouseMove: [{ type: i0.Output, args: ["edgeMouseMove"] }], edgeMouseLeave: [{ type: i0.Output, args: ["edgeMouseLeave"] }], customEdgeTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "customEdgeTypes", required: false }] }], reconnect: [{ type: i0.Output, args: ["reconnect"] }], reconnectStart: [{ type: i0.Output, args: ["reconnectStart"] }], reconnectEnd: [{ type: i0.Output, args: ["reconnectEnd"] }] } });