@html-graph/html-graph 9.0.0 → 9.1.0

package/dist/html-graph.umd.cjs

@@ -1101,10 +1101,10 @@
 	};
 	//#endregion
 	//#region src/configurators/shared/find-port-at-point/find-port-for-element/find-port-for-element.ts
-	var findPortForElement = (graph, element) => {
+	var findPortForElement = (graph, element, portIdResolver) => {
 		let elementBuf = element;
 		while (elementBuf !== null) {
-			const portId = graph.findPortIdsByElement(elementBuf)[0] ?? null;
+			const portId = portIdResolver(graph.findPortIdsByElement(elementBuf));
 			if (portId !== null) return {
 				status: "portFound",
 				portId
@@ -1128,10 +1128,10 @@
 	}
 	//#endregion
 	//#region src/configurators/shared/find-port-at-point/find-port-at-point.ts
-	var findPortAtPoint = (graph, point) => {
+	var findPortAtPoint = (graph, point, portIdResolver) => {
 		const elements = getElementsAtPoint(document, point);
 		for (const element of elements) {
-			const result = findPortForElement(graph, element);
+			const result = findPortForElement(graph, element, portIdResolver);
 			if (result.status === "portFound") return result.portId;
 			if (result.status === "nodeEncountered") return null;
 		}
@@ -3337,7 +3337,9 @@
 			const mouseEvent = event;
 			if (!this.params.mouseDownEventVerifier(mouseEvent)) return;
 			const target = event.currentTarget;
-			const portId = this.canvas.graph.findPortIdsByElement(target)[0];
+			const portIds = this.canvas.graph.findPortIdsByElement(target);
+			const portId = this.params.grabbedPortIdResolver(portIds);
+			if (portId === null) return;
 			if (!this.params.onPointerDownVerifier(portId, {
 				x: mouseEvent.clientX,
 				y: mouseEvent.clientY
@@ -3638,6 +3640,12 @@
 		}
 	};
 	//#endregion
+	//#region src/configurators/shared/port-id-resolver/default-port-id-resolver/default-port-id-resolver.ts
+	var defaultPortIdResolver = (portIds) => {
+		if (portIds.length > 0) return portIds[0];
+		return null;
+	};
+	//#endregion
 	//#region src/configurators/user-draggable-nodes-configurator/user-draggable-nodes-configurator.ts
 	var UserDraggableNodesConfigurator = class UserDraggableNodesConfigurator {
 		canvas;
@@ -4303,7 +4311,8 @@
 					const params = this.edgeInProgress;
 					this.resetDragState();
 					this.params.onEdgeCreationInterrupted(params);
-				}
+				},
+				grabbedPortIdResolver: this.params.grabbedPortIdResolver
 			};
 			DraggablePortsConfigurator.configure(this.canvas, this.window, this.pointInsideVerifier, this.eventTagger, draggablePortsParams);
 		}
@@ -4357,7 +4366,7 @@
 			this.overlayCanvas.clear();
 		}
 		tryCreateConnection(cursor) {
-			const targetPortId = findPortAtPoint(this.canvas.graph, cursor);
+			const targetPortId = findPortAtPoint(this.canvas.graph, cursor, this.params.releasedPortIdResolver);
 			if (targetPortId === null) {
 				this.params.onEdgeCreationInterrupted(this.edgeInProgress);
 				return;
@@ -4438,7 +4447,8 @@
 						shape: edge.shape,
 						priority: edge.priority
 					});
-				}
+				},
+				grabbedPortIdResolver: this.params.grabbedPortIdResolver
 			};
 			DraggablePortsConfigurator.configure(this.canvas, this.window, this.pointInsideVerifier, this.eventTagger, draggablePortsParams);
 		}
@@ -4528,7 +4538,7 @@
 			}).updatePort(OverlayId.DraggingNodeId, { direction });
 		}
 		tryCreateConnection(cursor) {
-			const draggingPortId = findPortAtPoint(this.canvas.graph, cursor);
+			const draggingPortId = findPortAtPoint(this.canvas.graph, cursor, this.params.releasedPortIdResolver);
 			this.overlayCanvas.removeEdge(OverlayId.EdgeId);
 			if (draggingPortId === null) {
 				const edge = this.draggingEdgePayload;
@@ -4715,19 +4725,17 @@
 	//#endregion
 	//#region src/configurators/animated-layout-configurator/animated-layout-configurator.ts
 	var AnimatedLayoutConfigurator = class AnimatedLayoutConfigurator {
-		win;
 		applier;
 		step = (dt) => {
 			this.applier.apply(dt);
 		};
 		constructor(canvas, params, win) {
-			this.win = win;
 			this.applier = new AnimatedLayoutApplier(canvas, params.algorithm, {
 				staticNodeResolver: params.staticNodeResolver,
 				onBeforeApplied: params.onBeforeApplied,
 				onAfterApplied: params.onAfterApplied
 			});
-			new AnimationSeries(this.win, this.step);
+			new AnimationSeries(win, this.step);
 		}
 		static configure(canvas, params, win) {
 			new AnimatedLayoutConfigurator(canvas, params, win);
@@ -5196,7 +5204,9 @@
 			mouseUpEventVerifier: config.mouseUpEventVerifier ?? defaults$3.mouseEventVerifier,
 			onAfterEdgeCreated: config.events?.onAfterEdgeCreated ?? noopFn,
 			onEdgeCreationInterrupted: config.events?.onEdgeCreationInterrupted ?? noopFn,
-			onEdgeCreationPrevented: config.events?.onEdgeCreationPrevented ?? noopFn
+			onEdgeCreationPrevented: config.events?.onEdgeCreationPrevented ?? noopFn,
+			grabbedPortIdResolver: config.grabbedPortIdResolver ?? defaultPortIdResolver,
+			releasedPortIdResolver: config.releasedPortIdResolver ?? defaultPortIdResolver
 		};
 	};
 	//#endregion
@@ -5226,7 +5236,9 @@
 			onAfterEdgeReattached: config.events?.onAfterEdgeReattached ?? noopFn,
 			onEdgeReattachInterrupted: config.events?.onEdgeReattachInterrupted ?? noopFn,
 			onEdgeReattachPrevented: config.events?.onEdgeReattachPrevented ?? noopFn,
-			draggingPortDirectionResolver: resolveDraggingPortDirectionResolver(config.dragPortDirection, graph, connectionAllowedVerifier)
+			draggingPortDirectionResolver: resolveDraggingPortDirectionResolver(config.dragPortDirection, graph, connectionAllowedVerifier),
+			grabbedPortIdResolver: config.grabbedPortIdResolver ?? defaultPortIdResolver,
+			releasedPortIdResolver: config.releasedPortIdResolver ?? defaultPortIdResolver
 		};
 	};
 	//#endregion

package/package.json

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