@html-graph/html-graph 8.23.0 → 8.24.0

package/dist/html-graph.umd.cjs

@@ -85,7 +85,7 @@
 			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);
@@ -127,7 +127,7 @@
 		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);
 		}
@@ -152,7 +152,7 @@
 		}
 		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({
@@ -761,7 +761,7 @@
 			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);
@@ -902,7 +902,7 @@
 					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);
@@ -917,7 +917,7 @@
 			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
@@ -2135,6 +2135,7 @@
 	//#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;
@@ -2147,8 +2148,9 @@
 			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) {
@@ -2162,7 +2164,7 @@
 		}
 		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,
@@ -2320,6 +2322,7 @@
 	//#endregion
 	//#region src/edges/shapes/bezier-edge-shape/bezier-edge-shape.ts
 	var BezierEdgeShape = class {
+		element;
 		svg;
 		group;
 		line;
@@ -2386,7 +2389,8 @@
 				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;
@@ -2409,6 +2413,7 @@
 	* use OrthogonalEdgeShape instead
 	*/
 	var HorizontalEdgeShape = class {
+		element;
 		svg;
 		group;
 		line;
@@ -2476,7 +2481,8 @@
 				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;
@@ -2501,6 +2507,7 @@
 	//#endregion
 	//#region src/edges/shapes/straight-edge-shape/straight-edge-shape.ts
 	var StraightEdgeShape = class {
+		element;
 		svg;
 		group;
 		line;
@@ -2571,7 +2578,8 @@
 				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;
@@ -2595,6 +2603,7 @@
 	* use OrthogonalEdgeShape instead
 	*/
 	var VerticalEdgeShape = class {
+		element;
 		svg;
 		group;
 		line;
@@ -2662,7 +2671,8 @@
 				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;
@@ -2700,6 +2710,7 @@
 	//#endregion
 	//#region src/edges/shapes/orthogonal-edge-shape/orthogonal-edge-shape.ts
 	var OrthogonalEdgeShape = class {
+		element;
 		svg;
 		group;
 		line;
@@ -2767,7 +2778,8 @@
 				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;
@@ -2813,6 +2825,7 @@
 	//#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;
@@ -2834,8 +2847,9 @@
 			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) {
@@ -2849,7 +2863,7 @@
 		}
 		render(params) {
 			const { x, y, width, height, from, to } = createEdgeRectangle(params.from, params.to, 50);
-			setSvgRectangle(this.svg, {
+			setSvgRectangle(this.element, {
 				x,
 				y,
 				width,
@@ -3014,6 +3028,7 @@
 	//#region src/edges/shapes/interactive-edge-shape/interactive-edge-shape.ts
 	var InteractiveEdgeShape = class InteractiveEdgeShape {
 		baseEdge;
+		element;
 		svg;
 		group;
 		line;
@@ -3031,7 +3046,8 @@
 		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;
@@ -3069,17 +3085,19 @@
 		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)`;
@@ -5085,16 +5103,16 @@
 		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/package.json

@@ -2,7 +2,7 @@
   "name": "@html-graph/html-graph",
   "author": "Dmitry Marov <d.marov94@gmail.com>",
   "private": false,
-  "version": "8.23.0",
+  "version": "8.24.0",
   "type": "module",
   "main": "dist/html-graph.js",
   "types": "dist/html-graph.d.ts",