@neo4j-nvl/interaction-handlers 2.0.0 → 2.1.0

package/lib/interaction-handlers/box-select-interaction.js

@@ -1,128 +1,134 @@
-import { NODE_EDGE_WIDTH } from '../constants';
-import { OverlayRenderer } from '../overlay-renderer/overlay-renderer';
-import { BaseInteraction } from './base';
-import { getCanvasPosition, getWorldPosition, isDraggingMovement } from './utils';
+import "../constants.js";
+import { OverlayRenderer } from "../overlay-renderer/overlay-renderer.js";
+import { BaseInteraction } from "./base.js";
+import { getCanvasPosition, getWorldPosition, isDraggingMovement } from "./utils.js";
+// src/interaction-handlers/box-select-interaction.ts
 /**
- * An interaction handler for multi-selecting nodes and relationships.
- * When dragging the cursor, it draws a box on the scene and all nodes and relationships inside the box are selected.
- *
- * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_boxselectinteraction Box Select Interaction documentation page}.
- */
-export class BoxSelectInteraction extends BaseInteraction {
-    mousePosition = { x: 0, y: 0 };
-    startWorldPosition = { x: 0, y: 0 };
-    startClientPosition = { x: 0, y: 0 };
-    overlayRenderer;
-    isBoxSelecting = false;
-    boxSelectPending = false;
-    /**
-     * Creates a new instance of the multi-select interaction handler.
-     * @param nvl - The NVL instance to attach the interaction handler to.
-     * @param options - Options for the multi-select interaction handler to customize its behavior.
-     */
-    constructor(nvl, options = { selectOnRelease: false }) {
-        super(nvl, options);
-        this.overlayRenderer = new OverlayRenderer(this.containerInstance);
-        this.addEventListener('mousedown', this.handleMouseDown, true);
-        this.addEventListener('mousemove', this.handleDrag, true);
-        this.addEventListener('mouseup', this.endBoxSelect, true);
-    }
-    handleMouseDown = (event) => {
-        if (event.button !== 0) {
-            this.isBoxSelecting = false;
-            this.boxSelectPending = false;
-            return;
-        }
-        this.turnOnBoxSelect(event);
-    };
-    handleDrag = (event) => {
-        if (this.isBoxSelecting) {
-            const curPos = getCanvasPosition(this.containerInstance, event);
-            this.overlayRenderer.drawBox(this.mousePosition.x, this.mousePosition.y, curPos.x, curPos.y);
-            return;
-        }
-        if (this.boxSelectPending && event.buttons === 1) {
-            if (isDraggingMovement(event, this.startClientPosition)) {
-                this.activateBoxSelect(event);
-            }
-        }
-    };
-    getHitsInBox = (startPos, endPos) => {
-        const inside = (pos, start, end) => {
-            const minX = Math.min(start.x, end.x);
-            const maxX = Math.max(start.x, end.x);
-            const minY = Math.min(start.y, end.y);
-            const maxY = Math.max(start.y, end.y);
-            return pos.x >= minX && pos.x <= maxX && pos.y >= minY && pos.y <= maxY;
-        };
-        const positions = this.nvlInstance.getNodePositions();
-        const hitNodes = new Set();
-        for (const pos of positions) {
-            if (inside(pos, startPos, endPos)) {
-                hitNodes.add(pos.id);
-            }
-        }
-        const rels = this.nvlInstance.getRelationships();
-        const hitRels = [];
-        for (const rel of rels) {
-            if (hitNodes.has(rel.from) && hitNodes.has(rel.to)) {
-                hitRels.push(rel);
-            }
-        }
-        const hitNodeArray = Array.from(hitNodes).map((id) => this.nvlInstance.getNodeById(id));
-        return {
-            nodes: hitNodeArray,
-            rels: hitRels
-        };
-    };
-    endBoxSelect = (event) => {
-        if (!this.isBoxSelecting) {
-            this.boxSelectPending = false;
-            return;
-        }
-        this.isBoxSelecting = false;
-        this.overlayRenderer.clear();
-        const endPosition = getCanvasPosition(this.containerInstance, event);
-        const endWorldPosition = getWorldPosition(this.nvlInstance, endPosition);
-        const { nodes, rels } = this.getHitsInBox(this.startWorldPosition, endWorldPosition);
-        if (this.currentOptions.selectOnRelease === true) {
-            this.nvlInstance.updateElementsInGraph(nodes.map((node) => ({ id: node.id, selected: true })), rels.map((rel) => ({ id: rel.id, selected: true })));
-        }
-        this.callCallbackIfRegistered('onBoxSelect', { nodes, rels }, event);
-        this.toggleGlobalTextSelection(true, this.endBoxSelect);
-    };
-    /**
-     * Removes all related event listeners and the overlay renderer for the box.
-     */
-    destroy() {
-        this.toggleGlobalTextSelection(true, this.endBoxSelect);
-        this.removeEventListener('mousedown', this.handleMouseDown, true);
-        this.removeEventListener('mousemove', this.handleDrag, true);
-        this.removeEventListener('mouseup', this.endBoxSelect, true);
-        this.overlayRenderer.destroy();
-    }
-    activateBoxSelect = (event) => {
-        this.boxSelectPending = false;
-        this.isBoxSelecting = true;
-        this.toggleGlobalTextSelection(false, this.endBoxSelect);
-        this.callCallbackIfRegistered('onBoxStarted', event);
-        if (this.currentOptions.selectOnRelease === true) {
-            this.nvlInstance.deselectAll();
-        }
-        const curPos = getCanvasPosition(this.containerInstance, event);
-        this.overlayRenderer.drawBox(this.mousePosition.x, this.mousePosition.y, curPos.x, curPos.y);
-    };
-    turnOnBoxSelect(event) {
-        this.mousePosition = getCanvasPosition(this.containerInstance, event);
-        this.startWorldPosition = getWorldPosition(this.nvlInstance, this.mousePosition);
-        const hits = this.nvlInstance.getHits(event, ['node'], { hitNodeMarginWidth: NODE_EDGE_WIDTH });
-        if (hits.nvlTargets.nodes.length > 0) {
-            this.isBoxSelecting = false;
-            this.boxSelectPending = false;
-        }
-        else {
-            this.startClientPosition = { x: event.clientX, y: event.clientY };
-            this.boxSelectPending = true;
-        }
-    }
-}
+* An interaction handler for multi-selecting nodes and relationships.
+* When dragging the cursor, it draws a box on the scene and all nodes and relationships inside the box are selected.
+*
+* For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_boxselectinteraction Box Select Interaction documentation page}.
+*/
+var BoxSelectInteraction = class extends BaseInteraction {
+	mousePosition = {
+		x: 0,
+		y: 0
+	};
+	startWorldPosition = {
+		x: 0,
+		y: 0
+	};
+	startClientPosition = {
+		x: 0,
+		y: 0
+	};
+	overlayRenderer;
+	isBoxSelecting = false;
+	boxSelectPending = false;
+	/**
+	* Creates a new instance of the multi-select interaction handler.
+	* @param nvl - The NVL instance to attach the interaction handler to.
+	* @param options - Options for the multi-select interaction handler to customize its behavior.
+	*/
+	constructor(nvl, options = { selectOnRelease: false }) {
+		super(nvl, options);
+		this.overlayRenderer = new OverlayRenderer(this.containerInstance);
+		this.addEventListener("mousedown", this.handleMouseDown, true);
+		this.addEventListener("mousemove", this.handleDrag, true);
+		this.addEventListener("mouseup", this.endBoxSelect, true);
+	}
+	handleMouseDown = (event) => {
+		if (event.button !== 0) {
+			this.isBoxSelecting = false;
+			this.boxSelectPending = false;
+			return;
+		}
+		this.turnOnBoxSelect(event);
+	};
+	handleDrag = (event) => {
+		if (this.isBoxSelecting) {
+			const curPos = getCanvasPosition(this.containerInstance, event);
+			this.overlayRenderer.drawBox(this.mousePosition.x, this.mousePosition.y, curPos.x, curPos.y);
+			return;
+		}
+		if (this.boxSelectPending && event.buttons === 1) {
+			if (isDraggingMovement(event, this.startClientPosition)) this.activateBoxSelect(event);
+		}
+	};
+	getHitsInBox = (startPos, endPos) => {
+		const inside = (pos, start, end) => {
+			const minX = Math.min(start.x, end.x);
+			const maxX = Math.max(start.x, end.x);
+			const minY = Math.min(start.y, end.y);
+			const maxY = Math.max(start.y, end.y);
+			return pos.x >= minX && pos.x <= maxX && pos.y >= minY && pos.y <= maxY;
+		};
+		const positions = this.nvlInstance.getNodePositions();
+		const hitNodes = /* @__PURE__ */ new Set();
+		for (const pos of positions) if (inside(pos, startPos, endPos)) hitNodes.add(pos.id);
+		const rels = this.nvlInstance.getRelationships();
+		const hitRels = [];
+		for (const rel of rels) if (hitNodes.has(rel.from) && hitNodes.has(rel.to)) hitRels.push(rel);
+		return {
+			nodes: Array.from(hitNodes).map((id) => this.nvlInstance.getNodeById(id)),
+			rels: hitRels
+		};
+	};
+	endBoxSelect = (event) => {
+		if (!this.isBoxSelecting) {
+			this.boxSelectPending = false;
+			return;
+		}
+		this.isBoxSelecting = false;
+		this.overlayRenderer.clear();
+		const endPosition = getCanvasPosition(this.containerInstance, event);
+		const endWorldPosition = getWorldPosition(this.nvlInstance, endPosition);
+		const { nodes, rels } = this.getHitsInBox(this.startWorldPosition, endWorldPosition);
+		if (this.currentOptions.selectOnRelease === true) this.nvlInstance.updateElementsInGraph(nodes.map((node) => ({
+			id: node.id,
+			selected: true
+		})), rels.map((rel) => ({
+			id: rel.id,
+			selected: true
+		})));
+		this.callCallbackIfRegistered("onBoxSelect", {
+			nodes,
+			rels
+		}, event);
+		this.toggleGlobalTextSelection(true, this.endBoxSelect);
+	};
+	/**
+	* Removes all related event listeners and the overlay renderer for the box.
+	*/
+	destroy() {
+		this.toggleGlobalTextSelection(true, this.endBoxSelect);
+		this.removeEventListener("mousedown", this.handleMouseDown, true);
+		this.removeEventListener("mousemove", this.handleDrag, true);
+		this.removeEventListener("mouseup", this.endBoxSelect, true);
+		this.overlayRenderer.destroy();
+	}
+	activateBoxSelect = (event) => {
+		this.boxSelectPending = false;
+		this.isBoxSelecting = true;
+		this.toggleGlobalTextSelection(false, this.endBoxSelect);
+		this.callCallbackIfRegistered("onBoxStarted", event);
+		if (this.currentOptions.selectOnRelease === true) this.nvlInstance.deselectAll();
+		const curPos = getCanvasPosition(this.containerInstance, event);
+		this.overlayRenderer.drawBox(this.mousePosition.x, this.mousePosition.y, curPos.x, curPos.y);
+	};
+	turnOnBoxSelect(event) {
+		this.mousePosition = getCanvasPosition(this.containerInstance, event);
+		this.startWorldPosition = getWorldPosition(this.nvlInstance, this.mousePosition);
+		if (this.nvlInstance.getHits(event, ["node"], { hitNodeMarginWidth: 10 }).nvlTargets.nodes.length > 0) {
+			this.isBoxSelecting = false;
+			this.boxSelectPending = false;
+		} else {
+			this.startClientPosition = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			this.boxSelectPending = true;
+		}
+	}
+};
+export { BoxSelectInteraction };

package/lib/interaction-handlers/click-interaction.d.ts

@@ -1,98 +1,98 @@
-import type { Cluster, HitTargets, NVL, Node, Relationship } from '@neo4j-nvl/base';
-import { BaseInteraction } from './base';
+import { BaseInteraction } from "./base.js";
+import { Cluster, HitTargets, NVL, Node, Relationship } from "@neo4j-nvl/base";
 /**
  * Options for the click interaction handler to customize its behavior.
  */
 export type ClickInteractionOptions = {
-    /**
-     * Whether to select the node, relationship, or cluster members on click.
-     * Clicking something that is already selected clears the selection.
-     * @defaultValue false
-     */
-    selectOnClick?: boolean;
+  /**
+   * Whether to select the node, relationship, or cluster members on click.
+   * Clicking something that is already selected clears the selection.
+   * @defaultValue false
+   */
+  selectOnClick?: boolean;
 };
 /**
  * Callbacks for the click interaction handler.
  */
 export type ClickInteractionCallbacks = {
-    /**
-     * Called when a node is clicked.
-     * @param node - The node that was clicked.
-     * @param hitElements - All elements that were hit by the click.
-     * @param event - The original mouse event.
-     */
-    onNodeClick?: ((node: Node, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
-    /**
-     * Called when a relationship is clicked.
-     * @param relationship - The relationship that was clicked.
-     * @param hitElements - All elements that were hit by the click.
-     * @param event - The original mouse event.
-     */
-    onRelationshipClick?: ((relationship: Relationship, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
-    /**
-     * Called when a cluster hull is clicked (empty space inside a clusterBy hull).
-     * @param cluster - The cluster that was clicked.
-     * @param hitElements - All elements that were hit by the click.
-     * @param event - The original mouse event.
-     */
-    onClusterClick?: ((cluster: Cluster, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
-    /**
-     * Called when the canvas is clicked.
-     * @param event - The original mouse event.
-     */
-    onCanvasClick?: ((event: MouseEvent) => void) | boolean;
-    /**
-     * Called when the canvas is double-clicked.
-     * @param event - The original mouse event.
-     */
-    onCanvasDoubleClick?: ((event: MouseEvent) => void) | boolean;
-    /**
-     * Called when the canvas is right-clicked.
-     * @param event - The original mouse event.
-     */
-    onCanvasRightClick?: ((event: MouseEvent) => void) | boolean;
-    /**
-     * Called when a node is double-clicked.
-     * @param node - The node that was double-clicked.
-     * @param hitElements - All elements that were hit by the double-click.
-     * @param event - The original mouse event.
-     */
-    onNodeDoubleClick?: ((node: Node, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
-    /**
-     * Called when a node is right-clicked.
-     * @param node - The node that was right-clicked.
-     * @param hitElements - All elements that were hit by the right-click.
-     * @param event - The original mouse event.
-     */
-    onNodeRightClick?: ((node: Node, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
-    /**
-     * Called when a relationship is double-clicked.
-     * @param relationship - The relationship that was double-clicked.
-     * @param hitElements - All elements that were hit by the double-click.
-     * @param event - The original mouse event.
-     */
-    onRelationshipDoubleClick?: ((relationship: Relationship, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
-    /**
-     * Called when a relationship is right-clicked.
-     * @param relationship - The relationship that was right-clicked.
-     * @param hitElements - All elements that were hit by the right-click.
-     * @param event - The original mouse event.
-     */
-    onRelationshipRightClick?: ((relationship: Relationship, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
-    /**
-     * Called when a cluster hull is double-clicked.
-     * @param cluster - The cluster that was double-clicked.
-     * @param hitElements - All elements that were hit by the double-click.
-     * @param event - The original mouse event.
-     */
-    onClusterDoubleClick?: ((cluster: Cluster, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
-    /**
-     * Called when a cluster hull is right-clicked.
-     * @param cluster - The cluster that was right-clicked.
-     * @param hitElements - All elements that were hit by the right-click.
-     * @param event - The original mouse event.
-     */
-    onClusterRightClick?: ((cluster: Cluster, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
+  /**
+   * Called when a node is clicked.
+   * @param node - The node that was clicked.
+   * @param hitElements - All elements that were hit by the click.
+   * @param event - The original mouse event.
+   */
+  onNodeClick?: ((node: Node, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
+  /**
+   * Called when a relationship is clicked.
+   * @param relationship - The relationship that was clicked.
+   * @param hitElements - All elements that were hit by the click.
+   * @param event - The original mouse event.
+   */
+  onRelationshipClick?: ((relationship: Relationship, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
+  /**
+   * Called when a cluster hull is clicked (empty space inside a clusterBy hull).
+   * @param cluster - The cluster that was clicked.
+   * @param hitElements - All elements that were hit by the click.
+   * @param event - The original mouse event.
+   */
+  onClusterClick?: ((cluster: Cluster, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
+  /**
+   * Called when the canvas is clicked.
+   * @param event - The original mouse event.
+   */
+  onCanvasClick?: ((event: MouseEvent) => void) | boolean;
+  /**
+   * Called when the canvas is double-clicked.
+   * @param event - The original mouse event.
+   */
+  onCanvasDoubleClick?: ((event: MouseEvent) => void) | boolean;
+  /**
+   * Called when the canvas is right-clicked.
+   * @param event - The original mouse event.
+   */
+  onCanvasRightClick?: ((event: MouseEvent) => void) | boolean;
+  /**
+   * Called when a node is double-clicked.
+   * @param node - The node that was double-clicked.
+   * @param hitElements - All elements that were hit by the double-click.
+   * @param event - The original mouse event.
+   */
+  onNodeDoubleClick?: ((node: Node, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
+  /**
+   * Called when a node is right-clicked.
+   * @param node - The node that was right-clicked.
+   * @param hitElements - All elements that were hit by the right-click.
+   * @param event - The original mouse event.
+   */
+  onNodeRightClick?: ((node: Node, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
+  /**
+   * Called when a relationship is double-clicked.
+   * @param relationship - The relationship that was double-clicked.
+   * @param hitElements - All elements that were hit by the double-click.
+   * @param event - The original mouse event.
+   */
+  onRelationshipDoubleClick?: ((relationship: Relationship, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
+  /**
+   * Called when a relationship is right-clicked.
+   * @param relationship - The relationship that was right-clicked.
+   * @param hitElements - All elements that were hit by the right-click.
+   * @param event - The original mouse event.
+   */
+  onRelationshipRightClick?: ((relationship: Relationship, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
+  /**
+   * Called when a cluster hull is double-clicked.
+   * @param cluster - The cluster that was double-clicked.
+   * @param hitElements - All elements that were hit by the double-click.
+   * @param event - The original mouse event.
+   */
+  onClusterDoubleClick?: ((cluster: Cluster, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
+  /**
+   * Called when a cluster hull is right-clicked.
+   * @param cluster - The cluster that was right-clicked.
+   * @param hitElements - All elements that were hit by the right-click.
+   * @param event - The original mouse event.
+   */
+  onClusterRightClick?: ((cluster: Cluster, hitElements: HitTargets, event: MouseEvent) => void) | boolean;
 };
 /**
  * Click interaction handler that handles click, double click and right click events on
@@ -101,28 +101,28 @@ export type ClickInteractionCallbacks = {
  * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_clickinteraction Click Interaction documentation page}.
  */
 export declare class ClickInteraction extends BaseInteraction<ClickInteractionOptions> {
-    private moved;
-    private mousePosition;
-    /**
-     * Creates a new click interaction handler.
-     * @param nvl - The NVL instance to attach the interaction handler to.
-     * @param options - Options for the click interaction handler.
-     */
-    constructor(nvl: NVL, options?: ClickInteractionOptions);
-    private handleMouseDown;
-    private handleRightClick;
-    private handleDoubleClick;
-    private handleClick;
-    /**
-     * Makes the given elements the entire selection, deselecting everything else.
-     *
-     * Clicking something that is already fully selected clears the selection instead, so a repeated
-     * click toggles it off. A cluster counts as selected once all of its members are, which keeps
-     * cluster clicks behaving like node and relationship clicks.
-     */
-    private setSelection;
-    /**
-     * Removes all related event listeners from the container.
-     */
-    destroy: () => void;
-}
+  private moved;
+  private mousePosition;
+  /**
+   * Creates a new click interaction handler.
+   * @param nvl - The NVL instance to attach the interaction handler to.
+   * @param options - Options for the click interaction handler.
+   */
+  constructor(nvl: NVL, options?: ClickInteractionOptions);
+  private handleMouseDown;
+  private handleRightClick;
+  private handleDoubleClick;
+  private handleClick;
+  /**
+   * Makes the given elements the entire selection, deselecting everything else.
+   *
+   * Clicking something that is already fully selected clears the selection instead, so a repeated
+   * click toggles it off. A cluster counts as selected once all of its members are, which keeps
+   * cluster clicks behaving like node and relationship clicks.
+   */
+  private setSelection;
+  /**
+   * Removes all related event listeners from the container.
+   */
+  destroy: () => void;
+}