@html-graph/html-graph 8.23.0 → 8.24.0

package/dist/html-graph.d.ts

@@ -126,6 +126,7 @@ export declare interface BezierEdgeParams {
 }
 
 export declare class BezierEdgeShape implements StructuredEdgeShape {
+    readonly element: SVGSVGElement;
     readonly svg: SVGSVGElement;
     readonly group: SVGGElement;
     readonly line: SVGPathElement;
@@ -353,6 +354,7 @@ export declare interface DirectEdgeParams {
 }
 
 export declare class DirectEdgeShape implements StructuredEdgeShape {
+    readonly element: SVGSVGElement;
     readonly svg: SVGSVGElement;
     readonly group: SVGGElement;
     readonly line: SVGPathElement;
@@ -448,7 +450,12 @@ export declare interface EdgeRenderPort {
 }
 
 export declare interface EdgeShape {
+    /**
+     * @deprecated
+     * use element instead
+     */
     readonly svg: SVGSVGElement;
+    readonly element: SVGSVGElement;
     render(params: EdgeRenderParams): void;
 }
 
@@ -685,6 +692,7 @@ export declare interface HorizontalEdgeParams {
  * use OrthogonalEdgeShape instead
  */
 export declare class HorizontalEdgeShape implements StructuredEdgeShape {
+    readonly element: SVGSVGElement;
     readonly svg: SVGSVGElement;
     readonly group: SVGGElement;
     readonly line: SVGPathElement;
@@ -742,6 +750,7 @@ export declare interface InteractiveEdgeParams {
 
 export declare class InteractiveEdgeShape implements StructuredEdgeShape {
     private readonly baseEdge;
+    readonly element: SVGSVGElement;
     readonly svg: SVGSVGElement;
     readonly group: SVGGElement;
     readonly line: SVGPathElement;
@@ -829,6 +838,7 @@ export declare class MidpointEdgeShape implements StructuredEdgeShape {
     readonly sourceArrow: SVGPathElement | null;
     readonly targetArrow: SVGPathElement | null;
     readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
+    readonly element: SVGSVGElement;
     readonly svg: SVGSVGElement;
     constructor(baseShape: StructuredEdgeShape, midpointElement: SVGElement);
     render(params: EdgeRenderParams): void;
@@ -861,6 +871,7 @@ export declare interface OrthogonalEdgeParams {
 }
 
 export declare class OrthogonalEdgeShape implements StructuredEdgeShape {
+    readonly element: SVGSVGElement;
     readonly svg: SVGSVGElement;
     readonly group: SVGGElement;
     readonly line: SVGPathElement;
@@ -980,6 +991,7 @@ export declare interface StraightEdgeParams {
 }
 
 export declare class StraightEdgeShape implements StructuredEdgeShape {
+    readonly element: SVGSVGElement;
     readonly svg: SVGSVGElement;
     readonly group: SVGGElement;
     readonly line: SVGPathElement;
@@ -1160,6 +1172,7 @@ export declare interface VerticalEdgeParams {
  * use OrthogonalEdgeShape instead
  */
 export declare class VerticalEdgeShape implements StructuredEdgeShape {
+    readonly element: SVGSVGElement;
     readonly svg: SVGSVGElement;
     readonly group: SVGGElement;
     readonly line: SVGPathElement;

package/dist/html-graph.js

@@ -81,7 +81,7 @@ var CoreHtmlView = class {
 		this.attachedNodeIds.delete(nodeId);
 	}
 	attachEdge(edgeId) {
-		const svg = this.graphStore.getEdge(edgeId).payload.shape.svg;
+		const svg = this.graphStore.getEdge(edgeId).payload.shape.element;
 		this.edgeIdToElementMap.set(edgeId, svg);
 		this.container.appendChild(svg);
 		this.renderEdge(edgeId);
@@ -123,7 +123,7 @@ var CoreHtmlView = class {
 	updateEdgeShape(edgeId) {
 		const element = this.edgeIdToElementMap.get(edgeId);
 		this.container.removeChild(element);
-		const svg = this.graphStore.getEdge(edgeId).payload.shape.svg;
+		const svg = this.graphStore.getEdge(edgeId).payload.shape.element;
 		this.edgeIdToElementMap.set(edgeId, svg);
 		this.container.appendChild(svg);
 	}
@@ -148,7 +148,7 @@ var CoreHtmlView = class {
 	}
 	updateEdgePriority(edgeId) {
 		const edge = this.graphStore.getEdge(edgeId);
-		edge.payload.shape.svg.style.zIndex = `${edge.payload.priority}`;
+		edge.payload.shape.element.style.zIndex = `${edge.payload.priority}`;
 	}
 	createEdgeRenderPort(port, rectPort, rectCanvas, scale) {
 		const contentPoint = this.viewportStore.createContentCoords({
@@ -757,7 +757,7 @@ var GraphStore = class {
 		if (this.hasEdge(request.id)) throw new CanvasError(canvasErrorText.addEdgeWithExistingId(request.id));
 		if (!this.hasPort(request.from)) throw new CanvasError(canvasErrorText.addEdgeFromNonexistentPort(request.id, request.from));
 		if (!this.hasPort(request.to)) throw new CanvasError(canvasErrorText.addEdgeToNonexistentPort(request.id, request.to));
-		const useEdgeId = this.findEdgeIdByElement(request.shape.svg);
+		const useEdgeId = this.findEdgeIdByElement(request.shape.element);
 		if (useEdgeId !== void 0) throw new CanvasError(canvasErrorText.addEdgeWithElementInUse(request.id, useEdgeId));
 		this.addEdgeInternal(request);
 		this.afterEdgeAddedEmitter.emit(request.id);
@@ -898,7 +898,7 @@ var GraphStore = class {
 				priority: request.priority
 			}
 		});
-		this.edgesElementsMap.set(request.shape.svg, request.id);
+		this.edgesElementsMap.set(request.shape.element, request.id);
 		if (request.from !== request.to) {
 			this.portOutgoingEdges.get(request.from).add(request.id);
 			this.portIncomingEdges.get(request.to).add(request.id);
@@ -913,7 +913,7 @@ var GraphStore = class {
 		this.portOutgoingEdges.get(from).delete(edgeId);
 		this.portOutgoingEdges.get(to).delete(edgeId);
 		this.edges.delete(edgeId);
-		this.edgesElementsMap.delete(payload.shape.svg);
+		this.edgesElementsMap.delete(payload.shape.element);
 	}
 };
 //#endregion
@@ -2131,6 +2131,7 @@ var createDirectionVector = (dir) => {
 //#region src/edges/shapes/path-edge-shape/path-edge-shape.ts
 var PathEdgeShape = class {
 	params;
+	element;
 	svg;
 	group = document.createElementNS("http://www.w3.org/2000/svg", "g");
 	line;
@@ -2143,8 +2144,9 @@ var PathEdgeShape = class {
 		this.params = params;
 		[this.afterRenderEmitter, this.onAfterRender] = createPair();
 		this.arrowRenderer = this.params.arrowRenderer;
-		this.svg = createEdgeSvg(params.color);
-		this.svg.appendChild(this.group);
+		this.element = createEdgeSvg(params.color);
+		this.svg = this.element;
+		this.element.appendChild(this.group);
 		this.line = createEdgePath(params.width);
 		this.group.appendChild(this.line);
 		if (params.hasSourceArrow) {
@@ -2158,7 +2160,7 @@ var PathEdgeShape = class {
 	}
 	render(params) {
 		const { x, y, width, height, from, to } = createEdgeRectangle(params.from, params.to, this.params.padding);
-		setSvgRectangle(this.svg, {
+		setSvgRectangle(this.element, {
 			x,
 			y,
 			width,
@@ -2316,6 +2318,7 @@ var resolveArrowRenderer = (config) => {
 //#endregion
 //#region src/edges/shapes/bezier-edge-shape/bezier-edge-shape.ts
 var BezierEdgeShape = class {
+	element;
 	svg;
 	group;
 	line;
@@ -2382,7 +2385,8 @@ var BezierEdgeShape = class {
 			createLinePath: this.createLinePath,
 			padding: 50
 		});
-		this.svg = this.pathShape.svg;
+		this.element = this.pathShape.element;
+		this.svg = this.element;
 		this.group = this.pathShape.group;
 		this.line = this.pathShape.line;
 		this.sourceArrow = this.pathShape.sourceArrow;
@@ -2405,6 +2409,7 @@ var horizontalizeDirection = (direction) => {
 * use OrthogonalEdgeShape instead
 */
 var HorizontalEdgeShape = class {
+	element;
 	svg;
 	group;
 	line;
@@ -2472,7 +2477,8 @@ var HorizontalEdgeShape = class {
 			createLinePath: this.createLinePath,
 			padding: 50
 		});
-		this.svg = this.pathShape.svg;
+		this.element = this.pathShape.element;
+		this.svg = this.element;
 		this.group = this.pathShape.group;
 		this.line = this.pathShape.line;
 		this.sourceArrow = this.pathShape.sourceArrow;
@@ -2497,6 +2503,7 @@ var HorizontalEdgeShape = class {
 //#endregion
 //#region src/edges/shapes/straight-edge-shape/straight-edge-shape.ts
 var StraightEdgeShape = class {
+	element;
 	svg;
 	group;
 	line;
@@ -2567,7 +2574,8 @@ var StraightEdgeShape = class {
 			createLinePath: this.createLinePath,
 			padding: 50
 		});
-		this.svg = this.pathShape.svg;
+		this.element = this.pathShape.element;
+		this.svg = this.element;
 		this.group = this.pathShape.group;
 		this.line = this.pathShape.line;
 		this.sourceArrow = this.pathShape.sourceArrow;
@@ -2591,6 +2599,7 @@ var verticalizeDirection = (direction) => {
 * use OrthogonalEdgeShape instead
 */
 var VerticalEdgeShape = class {
+	element;
 	svg;
 	group;
 	line;
@@ -2658,7 +2667,8 @@ var VerticalEdgeShape = class {
 			createLinePath: this.createLinePath,
 			padding: 50
 		});
-		this.svg = this.pathShape.svg;
+		this.element = this.pathShape.element;
+		this.svg = this.element;
 		this.group = this.pathShape.group;
 		this.line = this.pathShape.line;
 		this.sourceArrow = this.pathShape.sourceArrow;
@@ -2696,6 +2706,7 @@ var orthogonalizeDirection = (direction) => {
 //#endregion
 //#region src/edges/shapes/orthogonal-edge-shape/orthogonal-edge-shape.ts
 var OrthogonalEdgeShape = class {
+	element;
 	svg;
 	group;
 	line;
@@ -2763,7 +2774,8 @@ var OrthogonalEdgeShape = class {
 			createLinePath: this.createLinePath,
 			padding: 50
 		});
-		this.svg = this.pathShape.svg;
+		this.element = this.pathShape.element;
+		this.svg = this.element;
 		this.group = this.pathShape.group;
 		this.line = this.pathShape.line;
 		this.sourceArrow = this.pathShape.sourceArrow;
@@ -2809,6 +2821,7 @@ var resolvePortOffsetFn = (offset) => {
 //#region src/edges/shapes/direct-edge-shape/direct-edge-shape.ts
 var defaultPortOffset = edgeConstants.portOffset;
 var DirectEdgeShape = class {
+	element;
 	svg;
 	group = document.createElementNS("http://www.w3.org/2000/svg", "g");
 	line;
@@ -2830,8 +2843,9 @@ var DirectEdgeShape = class {
 		this.arrowRenderer = resolveArrowRenderer(params?.arrowRenderer ?? {});
 		this.sourceOffsetFn = resolvePortOffsetFn(params?.sourceOffset ?? defaultPortOffset);
 		this.targetOffsetFn = resolvePortOffsetFn(params?.targetOffset ?? defaultPortOffset);
-		this.svg = createEdgeSvg(this.color);
-		this.svg.appendChild(this.group);
+		this.element = createEdgeSvg(this.color);
+		this.svg = this.element;
+		this.element.appendChild(this.group);
 		this.line = createEdgePath(this.width);
 		this.group.appendChild(this.line);
 		if (params?.hasSourceArrow) {
@@ -2845,7 +2859,7 @@ var DirectEdgeShape = class {
 	}
 	render(params) {
 		const { x, y, width, height, from, to } = createEdgeRectangle(params.from, params.to, 50);
-		setSvgRectangle(this.svg, {
+		setSvgRectangle(this.element, {
 			x,
 			y,
 			width,
@@ -3010,6 +3024,7 @@ var InteractiveEdgeError = class extends Error {
 //#region src/edges/shapes/interactive-edge-shape/interactive-edge-shape.ts
 var InteractiveEdgeShape = class InteractiveEdgeShape {
 	baseEdge;
+	element;
 	svg;
 	group;
 	line;
@@ -3027,7 +3042,8 @@ var InteractiveEdgeShape = class InteractiveEdgeShape {
 	constructor(baseEdge, params) {
 		this.baseEdge = baseEdge;
 		if (baseEdge instanceof InteractiveEdgeShape) throw new InteractiveEdgeError("interactive edge can be configured only once");
-		this.svg = this.baseEdge.svg;
+		this.element = this.baseEdge.element;
+		this.svg = this.element;
 		this.group = this.baseEdge.group;
 		this.line = this.baseEdge.line;
 		this.sourceArrow = this.baseEdge.sourceArrow;
@@ -3065,17 +3081,19 @@ var MidpointEdgeShape = class {
 	sourceArrow;
 	targetArrow;
 	onAfterRender;
+	element;
 	svg;
 	constructor(baseShape, midpointElement) {
 		this.baseShape = baseShape;
 		this.midpointElement = midpointElement;
-		this.svg = this.baseShape.svg;
+		this.element = this.baseShape.element;
+		this.svg = this.element;
 		this.group = this.baseShape.group;
 		this.line = this.baseShape.line;
 		this.sourceArrow = this.baseShape.sourceArrow;
 		this.targetArrow = this.baseShape.targetArrow;
 		this.onAfterRender = this.baseShape.onAfterRender;
-		this.svg.append(this.midpointElement);
+		this.element.append(this.midpointElement);
 		this.baseShape.onAfterRender.subscribe((model) => {
 			const midpoint = model.edgePath.midpoint;
 			const transform = `translate(${midpoint.x}px, ${midpoint.y}px)`;
@@ -5081,16 +5099,16 @@ var UserSelectableEdgesConfigurator = class UserSelectableEdgesConfigurator {
 	onEdgeSelected;
 	onAfterEdgeAdded = (edgeId) => {
 		const { shape } = this.canvas.graph.getEdge(edgeId);
-		this.configurator.enable(shape.svg);
+		this.configurator.enable(shape.element);
 	};
 	onBeforeEdgeRemoved = (edgeId) => {
 		const { shape } = this.canvas.graph.getEdge(edgeId);
-		this.configurator.disable(shape.svg);
+		this.configurator.disable(shape.element);
 	};
 	reset = () => {
 		this.canvas.graph.getAllEdgeIds().forEach((edgeId) => {
 			const { shape } = this.canvas.graph.getEdge(edgeId);
-			this.configurator.disable(shape.svg);
+			this.configurator.disable(shape.element);
 		});
 	};
 	constructor(canvas, window, pointInsideVerifier, eventTagger, params) {

package/dist/html-graph.min.js

@@ -35,7 +35,7 @@ var e = /* @__PURE__ */ function(e) {
 		i(t.element), this.container.removeChild(t.element), this.attachedNodeIds.delete(e);
 	}
 	attachEdge(e) {
-		let t = this.graphStore.getEdge(e).payload.shape.svg;
+		let t = this.graphStore.getEdge(e).payload.shape.element;
 		this.edgeIdToElementMap.set(e, t), this.container.appendChild(t), this.renderEdge(e), this.updateEdgePriority(e);
 	}
 	detachEdge(e) {
@@ -63,7 +63,7 @@ var e = /* @__PURE__ */ function(e) {
 	updateEdgeShape(e) {
 		let t = this.edgeIdToElementMap.get(e);
 		this.container.removeChild(t);
-		let n = this.graphStore.getEdge(e).payload.shape.svg;
+		let n = this.graphStore.getEdge(e).payload.shape.element;
 		this.edgeIdToElementMap.set(e, n), this.container.appendChild(n);
 	}
 	renderEdge(t) {
@@ -76,7 +76,7 @@ var e = /* @__PURE__ */ function(e) {
 	}
 	updateEdgePriority(e) {
 		let t = this.graphStore.getEdge(e);
-		t.payload.shape.svg.style.zIndex = `${t.payload.priority}`;
+		t.payload.shape.element.style.zIndex = `${t.payload.priority}`;
 	}
 	createEdgeRenderPort(e, t, n, r) {
 		let i = this.viewportStore.createContentCoords({
@@ -513,7 +513,7 @@ var e = /* @__PURE__ */ function(e) {
 		if (this.hasEdge(e.id)) throw new p(m.addEdgeWithExistingId(e.id));
 		if (!this.hasPort(e.from)) throw new p(m.addEdgeFromNonexistentPort(e.id, e.from));
 		if (!this.hasPort(e.to)) throw new p(m.addEdgeToNonexistentPort(e.id, e.to));
-		let t = this.findEdgeIdByElement(e.shape.svg);
+		let t = this.findEdgeIdByElement(e.shape.element);
 		if (t !== void 0) throw new p(m.addEdgeWithElementInUse(e.id, t));
 		this.addEdgeInternal(e), this.afterEdgeAddedEmitter.emit(e.id);
 	}
@@ -621,11 +621,11 @@ var e = /* @__PURE__ */ function(e) {
 				shape: e.shape,
 				priority: e.priority
 			}
-		}), this.edgesElementsMap.set(e.shape.svg, e.id), e.from === e.to ? this.portCycleEdges.get(e.from).add(e.id) : (this.portOutgoingEdges.get(e.from).add(e.id), this.portIncomingEdges.get(e.to).add(e.id));
+		}), this.edgesElementsMap.set(e.shape.element, e.id), e.from === e.to ? this.portCycleEdges.get(e.from).add(e.id) : (this.portOutgoingEdges.get(e.from).add(e.id), this.portIncomingEdges.get(e.to).add(e.id));
 	}
 	removeEdgeInternal(e) {
 		let { from: t, to: n, payload: r } = this.getEdge(e);
-		this.portCycleEdges.get(t).delete(e), this.portCycleEdges.get(n).delete(e), this.portIncomingEdges.get(t).delete(e), this.portIncomingEdges.get(n).delete(e), this.portOutgoingEdges.get(t).delete(e), this.portOutgoingEdges.get(n).delete(e), this.edges.delete(e), this.edgesElementsMap.delete(r.shape.svg);
+		this.portCycleEdges.get(t).delete(e), this.portCycleEdges.get(n).delete(e), this.portIncomingEdges.get(t).delete(e), this.portIncomingEdges.get(n).delete(e), this.portOutgoingEdges.get(t).delete(e), this.portOutgoingEdges.get(n).delete(e), this.edges.delete(e), this.edgesElementsMap.delete(r.shape.element);
 	}
 }, g = (e) => ({
 	scale: 1 / e.scale,
@@ -1487,6 +1487,7 @@ var re = (e, t) => {
 	y: Math.sin(e)
 }), I = class {
 	params;
+	element;
 	svg;
 	group = document.createElementNS("http://www.w3.org/2000/svg", "g");
 	line;
@@ -1496,11 +1497,11 @@ var re = (e, t) => {
 	afterRenderEmitter;
 	arrowRenderer;
 	constructor(e) {
-		this.params = e, [this.afterRenderEmitter, this.onAfterRender] = u(), this.arrowRenderer = this.params.arrowRenderer, this.svg = ce(e.color), this.svg.appendChild(this.group), this.line = le(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = A(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = A(), this.group.appendChild(this.targetArrow));
+		this.params = e, [this.afterRenderEmitter, this.onAfterRender] = u(), this.arrowRenderer = this.params.arrowRenderer, this.element = ce(e.color), this.svg = this.element, this.element.appendChild(this.group), this.line = le(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = A(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = A(), this.group.appendChild(this.targetArrow));
 	}
 	render(t) {
 		let { x: n, y: r, width: i, height: a, from: o, to: s } = ae(t.from, t.to, this.params.padding);
-		ue(this.svg, {
+		ue(this.element, {
 			x: n,
 			y: r,
 			width: i,
@@ -1614,6 +1615,7 @@ var re = (e, t) => {
 		});
 	}
 }, je = class {
+	element;
 	svg;
 	group;
 	line;
@@ -1671,12 +1673,13 @@ var re = (e, t) => {
 			createDetourPath: this.createDetourPath,
 			createLinePath: this.createLinePath,
 			padding: 50
-		}), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
+		}), this.element = this.pathShape.element, this.svg = this.element, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
 	}
 	render(e) {
 		this.pathShape.render(e);
 	}
 }, Me = (e) => Math.cos(e) > 0 ? 0 : Math.PI, Ne = class {
+	element;
 	svg;
 	group;
 	line;
@@ -1737,7 +1740,7 @@ var re = (e, t) => {
 			createDetourPath: this.createDetourPath,
 			createLinePath: this.createLinePath,
 			padding: 50
-		}), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
+		}), this.element = this.pathShape.element, this.svg = this.element, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
 	}
 	render(e) {
 		let { from: t, to: n, category: r } = e;
@@ -1754,6 +1757,7 @@ var re = (e, t) => {
 		});
 	}
 }, Pe = class {
+	element;
 	svg;
 	group;
 	line;
@@ -1816,12 +1820,13 @@ var re = (e, t) => {
 			createDetourPath: this.createDetourPath,
 			createLinePath: this.createLinePath,
 			padding: 50
-		}), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
+		}), this.element = this.pathShape.element, this.svg = this.element, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
 	}
 	render(e) {
 		this.pathShape.render(e);
 	}
 }, Fe = Math.PI / 2, Ie = (e) => Math.sin(e) > 0 ? Fe : -Fe, Le = class {
+	element;
 	svg;
 	group;
 	line;
@@ -1882,7 +1887,7 @@ var re = (e, t) => {
 			createDetourPath: this.createDetourPath,
 			createLinePath: this.createLinePath,
 			padding: 50
-		}), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
+		}), this.element = this.pathShape.element, this.svg = this.element, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
 	}
 	render(e) {
 		let { from: t, to: n, category: r } = e;
@@ -1902,6 +1907,7 @@ var re = (e, t) => {
 	let t = e + Math.PI / 4, n = Math.cos(t), r = Math.sin(t);
 	return n > 0 ? r > 0 ? 0 : -Math.PI / 2 : r > 0 ? Math.PI / 2 : Math.PI;
 }, ze = class {
+	element;
 	svg;
 	group;
 	line;
@@ -1962,7 +1968,7 @@ var re = (e, t) => {
 			createDetourPath: this.createDetourPath,
 			createLinePath: this.createLinePath,
 			padding: 50
-		}), this.svg = this.pathShape.svg, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
+		}), this.element = this.pathShape.element, this.svg = this.element, this.group = this.pathShape.group, this.line = this.pathShape.line, this.sourceArrow = this.pathShape.sourceArrow, this.targetArrow = this.pathShape.targetArrow, this.onAfterRender = this.pathShape.onAfterRender;
 	}
 	render(e) {
 		let { from: t, to: n, category: r } = e;
@@ -1982,6 +1988,7 @@ var re = (e, t) => {
 	let { direction: t, radius: n } = e, { x: r, y: i } = t, { horizontal: a, vertical: o } = n, s = i / r, c = Math.abs(o / s), l = Math.abs(a * s), u = Math.min(a, c), d = Math.min(o, l);
 	return Math.sqrt(u * u + d * d);
 }, Ve = (e) => typeof e == "number" ? () => e : e === "box" ? Be : e, He = F.portOffset, R = class {
+	element;
 	svg;
 	group = document.createElementNS("http://www.w3.org/2000/svg", "g");
 	line;
@@ -1996,11 +2003,11 @@ var re = (e, t) => {
 	afterRenderEmitter;
 	arrowRenderer;
 	constructor(e) {
-		[this.afterRenderEmitter, this.onAfterRender] = u(), this.color = e?.color ?? F.color, this.width = e?.width ?? F.width, this.arrowLength = e?.arrowLength ?? F.arrowLength, this.arrowRenderer = L(e?.arrowRenderer ?? {}), this.sourceOffsetFn = Ve(e?.sourceOffset ?? He), this.targetOffsetFn = Ve(e?.targetOffset ?? He), this.svg = ce(this.color), this.svg.appendChild(this.group), this.line = le(this.width), this.group.appendChild(this.line), e?.hasSourceArrow && (this.sourceArrow = A(), this.group.appendChild(this.sourceArrow)), e?.hasTargetArrow && (this.targetArrow = A(), this.group.appendChild(this.targetArrow));
+		[this.afterRenderEmitter, this.onAfterRender] = u(), this.color = e?.color ?? F.color, this.width = e?.width ?? F.width, this.arrowLength = e?.arrowLength ?? F.arrowLength, this.arrowRenderer = L(e?.arrowRenderer ?? {}), this.sourceOffsetFn = Ve(e?.sourceOffset ?? He), this.targetOffsetFn = Ve(e?.targetOffset ?? He), this.element = ce(this.color), this.svg = this.element, this.element.appendChild(this.group), this.line = le(this.width), this.group.appendChild(this.line), e?.hasSourceArrow && (this.sourceArrow = A(), this.group.appendChild(this.sourceArrow)), e?.hasTargetArrow && (this.targetArrow = A(), this.group.appendChild(this.targetArrow));
 	}
 	render(e) {
 		let { x: t, y: n, width: r, height: i, from: a, to: o } = ae(e.from, e.to, 50);
-		ue(this.svg, {
+		ue(this.element, {
 			x: t,
 			y: n,
 			width: r,
@@ -2113,6 +2120,7 @@ var re = (e, t) => {
 	}
 }, qe = class e {
 	baseEdge;
+	element;
 	svg;
 	group;
 	line;
@@ -2125,7 +2133,7 @@ var re = (e, t) => {
 	interactiveTargetArrow = null;
 	constructor(t, n) {
 		if (this.baseEdge = t, t instanceof e) throw new Ke("interactive edge can be configured only once");
-		this.svg = this.baseEdge.svg, this.group = this.baseEdge.group, this.line = this.baseEdge.line, this.sourceArrow = this.baseEdge.sourceArrow, this.targetArrow = this.baseEdge.targetArrow, this.onAfterRender = this.baseEdge.onAfterRender;
+		this.element = this.baseEdge.element, this.svg = this.element, this.group = this.baseEdge.group, this.line = this.baseEdge.line, this.sourceArrow = this.baseEdge.sourceArrow, this.targetArrow = this.baseEdge.targetArrow, this.onAfterRender = this.baseEdge.onAfterRender;
 		let r = n?.distance ?? F.interactiveWidth;
 		this.interactiveLine = We(r), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = Ge(r), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = Ge(r), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((e) => {
 			this.interactiveLine.setAttribute("d", e.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", e.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", e.targetArrowPath);
@@ -2142,9 +2150,10 @@ var re = (e, t) => {
 	sourceArrow;
 	targetArrow;
 	onAfterRender;
+	element;
 	svg;
 	constructor(e, t) {
-		this.baseShape = e, this.midpointElement = t, this.svg = this.baseShape.svg, this.group = this.baseShape.group, this.line = this.baseShape.line, this.sourceArrow = this.baseShape.sourceArrow, this.targetArrow = this.baseShape.targetArrow, this.onAfterRender = this.baseShape.onAfterRender, this.svg.append(this.midpointElement), this.baseShape.onAfterRender.subscribe((e) => {
+		this.baseShape = e, this.midpointElement = t, this.element = this.baseShape.element, this.svg = this.element, this.group = this.baseShape.group, this.line = this.baseShape.line, this.sourceArrow = this.baseShape.sourceArrow, this.targetArrow = this.baseShape.targetArrow, this.onAfterRender = this.baseShape.onAfterRender, this.element.append(this.midpointElement), this.baseShape.onAfterRender.subscribe((e) => {
 			let t = e.edgePath.midpoint, n = `translate(${t.x}px, ${t.y}px)`;
 			this.midpointElement.style.setProperty("transform", n);
 		});
@@ -3553,16 +3562,16 @@ var re = (e, t) => {
 	onEdgeSelected;
 	onAfterEdgeAdded = (e) => {
 		let { shape: t } = this.canvas.graph.getEdge(e);
-		this.configurator.enable(t.svg);
+		this.configurator.enable(t.element);
 	};
 	onBeforeEdgeRemoved = (e) => {
 		let { shape: t } = this.canvas.graph.getEdge(e);
-		this.configurator.disable(t.svg);
+		this.configurator.disable(t.element);
 	};
 	reset = () => {
 		this.canvas.graph.getAllEdgeIds().forEach((e) => {
 			let { shape: t } = this.canvas.graph.getEdge(e);
-			this.configurator.disable(t.svg);
+			this.configurator.disable(t.element);
 		});
 	};
 	constructor(e, t, n, r, i) {