@html-graph/html-graph 9.0.0 → 9.1.0

package/dist/html-graph.d.ts

@@ -259,13 +259,15 @@ export declare interface CenterConfig {
 export declare type CenterFn = (width: number, height: number) => Point;
 
 export declare interface ConnectablePortsConfig {
-    readonly edgeShape?: EdgeShapeConfig;
-    readonly connectionTypeResolver?: ConnectionTypeResolver;
-    readonly connectionAllowedVerifier?: ConnectionAllowedVerifier;
-    readonly connectionPreprocessor?: ConnectionPreprocessor;
-    readonly mouseDownEventVerifier?: MouseEventVerifier;
-    readonly mouseUpEventVerifier?: MouseEventVerifier;
-    readonly dragPortDirection?: DraggingPortDirectionConfig;
+    readonly edgeShape?: EdgeShapeConfig | undefined;
+    readonly connectionTypeResolver?: ConnectionTypeResolver | undefined;
+    readonly connectionAllowedVerifier?: ConnectionAllowedVerifier | undefined;
+    readonly connectionPreprocessor?: ConnectionPreprocessor | undefined;
+    readonly mouseDownEventVerifier?: MouseEventVerifier | undefined;
+    readonly mouseUpEventVerifier?: MouseEventVerifier | undefined;
+    readonly dragPortDirection?: DraggingPortDirectionConfig | undefined;
+    readonly grabbedPortIdResolver?: PortIdResolver | undefined;
+    readonly releasedPortIdResolver?: PortIdResolver | undefined;
     readonly events?: {
         readonly onAfterEdgeCreated?: (edgeId: Identifier) => void;
         readonly onEdgeCreationInterrupted?: (params: EdgeCreationInProgressParams) => void;
@@ -343,13 +345,15 @@ declare interface DotsRenderer {
 }
 
 export declare interface DraggableEdgesConfig {
-    readonly connectionPreprocessor?: ConnectionPreprocessor;
-    readonly connectionAllowedVerifier?: ConnectionAllowedVerifier;
-    readonly mouseDownEventVerifier?: MouseEventVerifier;
-    readonly mouseUpEventVerifier?: MouseEventVerifier;
-    readonly draggingEdgeResolver?: DraggingEdgeResolver;
-    readonly draggingEdgeShape?: EdgeShapeConfig;
-    readonly dragPortDirection?: DraggingPortDirectionConfig;
+    readonly connectionPreprocessor?: ConnectionPreprocessor | undefined;
+    readonly connectionAllowedVerifier?: ConnectionAllowedVerifier | undefined;
+    readonly mouseDownEventVerifier?: MouseEventVerifier | undefined;
+    readonly mouseUpEventVerifier?: MouseEventVerifier | undefined;
+    readonly draggingEdgeResolver?: DraggingEdgeResolver | undefined;
+    readonly draggingEdgeShape?: EdgeShapeConfig | undefined;
+    readonly dragPortDirection?: DraggingPortDirectionConfig | undefined;
+    readonly grabbedPortIdResolver?: PortIdResolver | undefined;
+    readonly releasedPortIdResolver?: PortIdResolver | undefined;
     readonly events?: {
         readonly onAfterEdgeReattached?: (edgeId: Identifier) => void;
         readonly onEdgeReattachInterrupted?: (edge: GraphEdge & {
@@ -802,6 +806,8 @@ export declare interface Point {
 
 export declare type PortElement = HTMLElement | SVGElement;
 
+export declare type PortIdResolver = (portIds: readonly Identifier[]) => Identifier | null;
+
 export declare type PortOffset = number | PortOffsetFn | "box";
 
 export declare type PortOffsetFn = (params: PortOffsetFnParams) => number;

package/dist/html-graph.js

@@ -1097,10 +1097,10 @@ var createAddNodeOverlayRequest = (payload) => {
 };
 //#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
@@ -1124,10 +1124,10 @@ function* getElementsAtPoint(root, point) {
 }
 //#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;
 	}
@@ -3333,7 +3333,9 @@ var DraggablePortsConfigurator = class DraggablePortsConfigurator {
 		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
@@ -3634,6 +3636,12 @@ var ConstantDraggingPortDirectionResolver = class {
 	}
 };
 //#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;
@@ -4299,7 +4307,8 @@ var UserConnectablePortsConfigurator = class UserConnectablePortsConfigurator {
 				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);
 	}
@@ -4353,7 +4362,7 @@ var UserConnectablePortsConfigurator = class UserConnectablePortsConfigurator {
 		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;
@@ -4434,7 +4443,8 @@ var UserDraggableEdgesConfigurator = class UserDraggableEdgesConfigurator {
 					shape: edge.shape,
 					priority: edge.priority
 				});
-			}
+			},
+			grabbedPortIdResolver: this.params.grabbedPortIdResolver
 		};
 		DraggablePortsConfigurator.configure(this.canvas, this.window, this.pointInsideVerifier, this.eventTagger, draggablePortsParams);
 	}
@@ -4524,7 +4534,7 @@ var UserDraggableEdgesConfigurator = class UserDraggableEdgesConfigurator {
 		}).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;
@@ -4711,19 +4721,17 @@ var AnimatedLayoutApplier = class {
 //#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);
@@ -5192,7 +5200,9 @@ var createConnectablePortsParams = (config, defaultEdgeShapeFactory, graph) => {
 		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
@@ -5222,7 +5232,9 @@ var createDraggableEdgeParams = (config, graph) => {
 		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