@neo4j-nvl/interaction-handlers 2.0.0 → 2.1.0

package/lib/interaction-handlers/lasso-interaction.js

@@ -1,205 +1,183 @@
-import concaveman from 'concaveman';
-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";
+import concaveman from "concaveman";
+// src/interaction-handlers/lasso-interaction.ts
 const pointDist = 10;
 const shapeShowTime = 500;
 /**
- * Checks if two lines defined by p1->p2 and p3->p4 are crossing.
- * @internal
- * @hidden
- */
-export const checkLinesCrossing = (p1, p2, p3, p4) => {
-    const denom = (p4[1] - p3[1]) * (p2[0] - p1[0]) - (p4[0] - p3[0]) * (p2[1] - p1[1]);
-    if (denom === 0) {
-        // This means lines are parallell
-        return false;
-    }
-    const t1 = ((p1[1] - p3[1]) * (p4[0] - p3[0]) - (p1[0] - p3[0]) * (p4[1] - p3[1])) / denom;
-    const t2 = ((p3[0] - p1[0]) * (p2[1] - p1[1]) - (p3[1] - p1[1]) * (p2[0] - p1[0])) / denom;
-    return t1 > 0 && t1 < 1 && t2 > 0 && t2 < 1;
+* Checks if two lines defined by p1->p2 and p3->p4 are crossing.
+* @internal
+* @hidden
+*/
+const checkLinesCrossing = (p1, p2, p3, p4) => {
+	const denom = (p4[1] - p3[1]) * (p2[0] - p1[0]) - (p4[0] - p3[0]) * (p2[1] - p1[1]);
+	if (denom === 0) return false;
+	const t1 = ((p1[1] - p3[1]) * (p4[0] - p3[0]) - (p1[0] - p3[0]) * (p4[1] - p3[1])) / denom;
+	const t2 = ((p3[0] - p1[0]) * (p2[1] - p1[1]) - (p3[1] - p1[1]) * (p2[0] - p1[0])) / denom;
+	return t1 > 0 && t1 < 1 && t2 > 0 && t2 < 1;
 };
 /**
- * Checks if any line segments in the polygon intersect.
- * @internal
- * @hidden
- */
-export const checkIntersection = (polygon) => {
-    for (let i = 0; i < polygon.length - 1; i++) {
-        for (let j = i + 2; j < polygon.length; j++) {
-            const line1p1 = polygon[i] ?? [0, 0];
-            const line1p2 = polygon[i + 1] ?? [0, 0];
-            const line2p1 = polygon[j] ?? [0, 0];
-            // Handle segment from first to last point
-            const jNext = j < polygon.length - 1 ? j + 1 : 0;
-            const line2p2 = polygon[jNext] ?? [0, 0];
-            if (checkLinesCrossing(line1p1, line1p2, line2p1, line2p2)) {
-                return true;
-            }
-        }
-    }
-    return false;
+* Checks if any line segments in the polygon intersect.
+* @internal
+* @hidden
+*/
+const checkIntersection = (polygon) => {
+	for (let i = 0; i < polygon.length - 1; i++) for (let j = i + 2; j < polygon.length; j++) {
+		const line1p1 = polygon[i] ?? [0, 0];
+		const line1p2 = polygon[i + 1] ?? [0, 0];
+		const line2p1 = polygon[j] ?? [0, 0];
+		const line2p2 = polygon[j < polygon.length - 1 ? j + 1 : 0] ?? [0, 0];
+		if (checkLinesCrossing(line1p1, line1p2, line2p1, line2p2)) return true;
+	}
+	return false;
 };
 /**
- * Checks if the point (x, y) is inside the polygon defined by vs.
- * @internal
- * @hidden
- */
-export const checkPointInside = (x, y, vs) => {
-    // ray-casting algorithm based on
-    // https://wrf.ecse.rpi.edu/Research/Short_Notes/pnpoly.html
-    let isInside = false;
-    for (let i = 0, j = vs.length - 1; i < vs.length; j = i, i += 1) {
-        const vsI = vs[i];
-        const vsJ = vs[j];
-        if (vsI === undefined || vsJ === undefined) {
-            continue;
-        }
-        const { x: xi, y: yi } = vsI;
-        const { x: xj, y: yj } = vsJ;
-        const intersect = yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi;
-        if (intersect) {
-            isInside = !isInside;
-        }
-    }
-    return isInside;
+* Checks if the point (x, y) is inside the polygon defined by vs.
+* @internal
+* @hidden
+*/
+const checkPointInside = (x, y, vs) => {
+	let isInside = false;
+	for (let i = 0, j = vs.length - 1; i < vs.length; j = i, i += 1) {
+		const vsI = vs[i];
+		const vsJ = vs[j];
+		if (vsI === void 0 || vsJ === void 0) continue;
+		const { x: xi, y: yi } = vsI;
+		const { x: xj, y: yj } = vsJ;
+		if (yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi) isInside = !isInside;
+	}
+	return isInside;
 };
 /**
- * An interaction handler that lets you select nodes and relationships by drawing a lasso around them.
- * When dragging, a line is drawn on the scene and all elements inside are selected.
- *
- * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_lassointeraction Lasso Interaction documentation page}.
- */
-export class LassoInteraction extends BaseInteraction {
-    active = false;
-    lassoPending = false;
-    startClientPosition = { x: 0, y: 0 };
-    pendingPointerCanvas = { x: 0, y: 0 };
-    points = [];
-    overlayRenderer;
-    /**
-     * Creates a new instance of the lasso interaction handler.
-     * @param nvl - The NVL instance to attach the interaction handler to.
-     * @param options - Options for the lasso 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.handleMouseUp, true);
-    }
-    startLasso = (event) => {
-        const hits = this.nvlInstance.getHits(event, ['node'], { hitNodeMarginWidth: NODE_EDGE_WIDTH });
-        if (hits.nvlTargets.nodes.length > 0) {
-            this.active = false;
-            this.lassoPending = false;
-        }
-        else {
-            this.lassoPending = true;
-            this.startClientPosition = { x: event.clientX, y: event.clientY };
-            this.pendingPointerCanvas = getCanvasPosition(this.containerInstance, event);
-        }
-    };
-    handleMouseDown = (event) => {
-        if (event.button === 0 && !this.active && !this.lassoPending) {
-            this.startLasso(event);
-        }
-    };
-    handleDrag = (event) => {
-        if (this.active) {
-            const lastPoint = this.points[this.points.length - 1];
-            if (lastPoint === undefined) {
-                return;
-            }
-            const pos = getCanvasPosition(this.containerInstance, event);
-            const dx = Math.abs(lastPoint.x - pos.x);
-            const dy = Math.abs(lastPoint.y - pos.y);
-            if (dx > pointDist || dy > pointDist) {
-                this.points.push(pos);
-                this.overlayRenderer.drawLasso(this.points, true, false);
-            }
-            return;
-        }
-        if (this.lassoPending && event.buttons === 1) {
-            if (isDraggingMovement(event, this.startClientPosition)) {
-                this.activateLasso(event);
-            }
-        }
-    };
-    activateLasso = (event) => {
-        this.lassoPending = false;
-        this.active = true;
-        const pos = getCanvasPosition(this.containerInstance, event);
-        this.points = [this.pendingPointerCanvas, pos];
-        this.toggleGlobalTextSelection(false, this.endLasso);
-        this.callCallbackIfRegistered('onLassoStarted', event);
-        if (this.currentOptions.selectOnRelease === true) {
-            this.nvlInstance.deselectAll();
-        }
-        this.overlayRenderer.drawLasso(this.points, true, false);
-    };
-    handleMouseUp = (event) => {
-        if (!this.active) {
-            this.lassoPending = false;
-            return;
-        }
-        this.points.push(getCanvasPosition(this.containerInstance, event));
-        this.endLasso(event);
-    };
-    getLassoItems = (points) => {
-        const worldPoints = points.map((p) => getWorldPosition(this.nvlInstance, p));
-        const nodePositions = this.nvlInstance.getNodePositions();
-        const hitNodes = new Set();
-        for (const pos of nodePositions) {
-            if (pos.x === undefined || pos.y === undefined || pos.id === undefined) {
-                continue;
-            }
-            if (checkPointInside(pos.x, pos.y, worldPoints)) {
-                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
-        };
-    };
-    endLasso = (event) => {
-        if (!this.active) {
-            return;
-        }
-        this.active = false;
-        this.toggleGlobalTextSelection(true, this.endLasso);
-        const pointArrays = this.points.map((p) => [p.x, p.y]);
-        const hasCrossings = checkIntersection(pointArrays);
-        const hull = (hasCrossings ? concaveman(pointArrays, 2) : pointArrays)
-            .map((p) => ({ x: p[0], y: p[1] }))
-            .filter((point) => point.x !== undefined && point.y !== undefined);
-        this.overlayRenderer.drawLasso(hull, false, true);
-        setTimeout(() => this.overlayRenderer.clear(), shapeShowTime);
-        const hitItems = this.getLassoItems(hull);
-        if (this.currentOptions.selectOnRelease === true) {
-            this.nvlInstance.updateElementsInGraph(hitItems.nodes.map((node) => ({ id: node.id, selected: true })), hitItems.rels.map((rel) => ({ id: rel.id, selected: true })));
-        }
-        this.callCallbackIfRegistered('onLassoSelect', hitItems, event);
-    };
-    /**
-     * Removes all related event listeners and the overlay renderer for the box.
-     */
-    destroy() {
-        this.toggleGlobalTextSelection(true, this.endLasso);
-        this.removeEventListener('mousedown', this.handleMouseDown, true);
-        this.removeEventListener('mousemove', this.handleDrag, true);
-        this.removeEventListener('mouseup', this.handleMouseUp, true);
-        this.overlayRenderer.destroy();
-    }
-}
+* An interaction handler that lets you select nodes and relationships by drawing a lasso around them.
+* When dragging, a line is drawn on the scene and all elements inside are selected.
+*
+* For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_lassointeraction Lasso Interaction documentation page}.
+*/
+var LassoInteraction = class extends BaseInteraction {
+	active = false;
+	lassoPending = false;
+	startClientPosition = {
+		x: 0,
+		y: 0
+	};
+	pendingPointerCanvas = {
+		x: 0,
+		y: 0
+	};
+	points = [];
+	overlayRenderer;
+	/**
+	* Creates a new instance of the lasso interaction handler.
+	* @param nvl - The NVL instance to attach the interaction handler to.
+	* @param options - Options for the lasso 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.handleMouseUp, true);
+	}
+	startLasso = (event) => {
+		if (this.nvlInstance.getHits(event, ["node"], { hitNodeMarginWidth: 10 }).nvlTargets.nodes.length > 0) {
+			this.active = false;
+			this.lassoPending = false;
+		} else {
+			this.lassoPending = true;
+			this.startClientPosition = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			this.pendingPointerCanvas = getCanvasPosition(this.containerInstance, event);
+		}
+	};
+	handleMouseDown = (event) => {
+		if (event.button === 0 && !this.active && !this.lassoPending) this.startLasso(event);
+	};
+	handleDrag = (event) => {
+		if (this.active) {
+			const lastPoint = this.points[this.points.length - 1];
+			if (lastPoint === void 0) return;
+			const pos = getCanvasPosition(this.containerInstance, event);
+			const dx = Math.abs(lastPoint.x - pos.x);
+			const dy = Math.abs(lastPoint.y - pos.y);
+			if (dx > pointDist || dy > pointDist) {
+				this.points.push(pos);
+				this.overlayRenderer.drawLasso(this.points, true, false);
+			}
+			return;
+		}
+		if (this.lassoPending && event.buttons === 1) {
+			if (isDraggingMovement(event, this.startClientPosition)) this.activateLasso(event);
+		}
+	};
+	activateLasso = (event) => {
+		this.lassoPending = false;
+		this.active = true;
+		const pos = getCanvasPosition(this.containerInstance, event);
+		this.points = [this.pendingPointerCanvas, pos];
+		this.toggleGlobalTextSelection(false, this.endLasso);
+		this.callCallbackIfRegistered("onLassoStarted", event);
+		if (this.currentOptions.selectOnRelease === true) this.nvlInstance.deselectAll();
+		this.overlayRenderer.drawLasso(this.points, true, false);
+	};
+	handleMouseUp = (event) => {
+		if (!this.active) {
+			this.lassoPending = false;
+			return;
+		}
+		this.points.push(getCanvasPosition(this.containerInstance, event));
+		this.endLasso(event);
+	};
+	getLassoItems = (points) => {
+		const worldPoints = points.map((p) => getWorldPosition(this.nvlInstance, p));
+		const nodePositions = this.nvlInstance.getNodePositions();
+		const hitNodes = /* @__PURE__ */ new Set();
+		for (const pos of nodePositions) {
+			if (pos.x === void 0 || pos.y === void 0 || pos.id === void 0) continue;
+			if (checkPointInside(pos.x, pos.y, worldPoints)) 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
+		};
+	};
+	endLasso = (event) => {
+		if (!this.active) return;
+		this.active = false;
+		this.toggleGlobalTextSelection(true, this.endLasso);
+		const pointArrays = this.points.map((p) => [p.x, p.y]);
+		const hull = (checkIntersection(pointArrays) ? concaveman(pointArrays, 2) : pointArrays).map((p) => ({
+			x: p[0],
+			y: p[1]
+		})).filter((point) => point.x !== void 0 && point.y !== void 0);
+		this.overlayRenderer.drawLasso(hull, false, true);
+		setTimeout(() => this.overlayRenderer.clear(), shapeShowTime);
+		const hitItems = this.getLassoItems(hull);
+		if (this.currentOptions.selectOnRelease === true) this.nvlInstance.updateElementsInGraph(hitItems.nodes.map((node) => ({
+			id: node.id,
+			selected: true
+		})), hitItems.rels.map((rel) => ({
+			id: rel.id,
+			selected: true
+		})));
+		this.callCallbackIfRegistered("onLassoSelect", hitItems, event);
+	};
+	/**
+	* Removes all related event listeners and the overlay renderer for the box.
+	*/
+	destroy() {
+		this.toggleGlobalTextSelection(true, this.endLasso);
+		this.removeEventListener("mousedown", this.handleMouseDown, true);
+		this.removeEventListener("mousemove", this.handleDrag, true);
+		this.removeEventListener("mouseup", this.handleMouseUp, true);
+		this.overlayRenderer.destroy();
+	}
+};
+export { LassoInteraction, checkIntersection, checkLinesCrossing, checkPointInside };

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

@@ -1,35 +1,35 @@
-import type { NVL } from '@neo4j-nvl/base';
-import { BaseInteraction } from './base';
+import { BaseInteraction } from "./base.js";
+import { NVL } from "@neo4j-nvl/base";
 /**
  * Options for the pan interaction handler to customize its behavior.
  */
 export type PanInteractionOptions = {
-    /**
-     * Whether to not pan when dragging within a certain margin of a node
-     * @defaultValue false
-     */
-    excludeNodeMargin?: boolean;
-    /**
-     * If true, the interaction handler will not update the NVL instance directly.
-     * Instead, it will only call the onPan callback with the calculated values,
-     * allowing the parent application to control when and how to apply the pan update.
-     * @defaultValue false
-     */
-    controlledPan?: boolean;
+  /**
+   * Whether to not pan when dragging within a certain margin of a node
+   * @defaultValue false
+   */
+  excludeNodeMargin?: boolean;
+  /**
+   * If true, the interaction handler will not update the NVL instance directly.
+   * Instead, it will only call the onPan callback with the calculated values,
+   * allowing the parent application to control when and how to apply the pan update.
+   * @defaultValue false
+   */
+  controlledPan?: boolean;
 };
 /**
  * Callbacks for the pan interaction handler.
  */
 export type PanInteractionCallbacks = {
-    /**
-     * Called when the canvas is panned.
-     * @param panning - The panning coordinates.
-     * @param event - The original mouse event.
-     */
-    onPan?: ((panning: {
-        x: number;
-        y: number;
-    }, event: MouseEvent) => void) | boolean;
+  /**
+   * Called when the canvas is panned.
+   * @param panning - The panning coordinates.
+   * @param event - The original mouse event.
+   */
+  onPan?: ((panning: {
+    x: number;
+    y: number;
+  }, event: MouseEvent) => void) | boolean;
 };
 /**
  * Interaction handler for panning the scene, which is achieved by clicking and moving the scene.
@@ -37,41 +37,42 @@ export type PanInteractionCallbacks = {
  * For examples, head to the {@link https://neo4j.com/docs/nvl/current/interaction-handlers/#_paninteraction Pan Interaction documentation page}.
  */
 export declare class PanInteraction extends BaseInteraction<PanInteractionOptions> {
-    private initialMousePosition;
-    private initialPan;
-    private targets;
-    private shouldPan;
-    private isPanning;
-    /**
-     * Creates a new instance of the pan interaction handler.
-     * @param nvl - The NVL instance to attach the interaction handler to.
-     */
-    constructor(nvl: NVL, options?: PanInteractionOptions);
-    /**
-     * Updates which type of graph elements should hinder panning.
-     * @param targets - The graph elements that should hinder panning.
-     * @param excludeNodeMargin - If true, the node margin will not hinder panning.
-     * By default, panning is hindered by nodes and relationships.
-     *
-     * @example
-     * ```js
-     * import { NVL } from '@neo4j-nvl/base'
-     * import { PanInteraction } from '@neo4j-nvl/interaction-handlers'
-     *
-     * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
-     * const panInteraction = new PanInteraction(nvl)
-     *
-     * // Pan canvas even when dragging on nodes and relationships
-     * panInteraction.updateTargets([], true)
-     * ```
-     */
-    updateTargets: (targets: ("node" | "relationship")[], excludeNodeMargin: boolean) => void;
-    private handleMouseDown;
-    private handleMouseMove;
-    private handleMouseUp;
-    private resetPanState;
-    /**
-     * Removes the related event listeners from the canvas.
-     */
-    destroy(): void;
-}
+  private initialMousePosition;
+  private initialPan;
+  private targets;
+  private shouldPan;
+  private isPanning;
+  /**
+   * Creates a new instance of the pan interaction handler.
+   * @param nvl - The NVL instance to attach the interaction handler to.
+   */
+  constructor(nvl: NVL, options?: PanInteractionOptions);
+  /**
+   * Updates which type of graph elements should hinder panning.
+   * @param targets - The graph elements that should hinder panning.
+   * @param excludeNodeMargin - If true, the node margin will not hinder panning.
+   * By default, panning is hindered by nodes and relationships.
+   *
+   * @example
+   * ```ts
+   * import { NVL } from '@neo4j-nvl/base'
+   * import { PanInteraction } from '@neo4j-nvl/interaction-handlers'
+   *
+   * const nvl = new NVL(document.createElement('div'), [{ id: '0' }], [])
+   *
+   * const panInteraction = new PanInteraction(nvl)
+   *
+   * // Pan canvas even when dragging on nodes and relationships
+   * panInteraction.updateTargets([], true)
+   * ```
+   */
+  updateTargets: (targets: ("node" | "relationship")[], excludeNodeMargin: boolean) => void;
+  private handleMouseDown;
+  private handleMouseMove;
+  private handleMouseUp;
+  private resetPanState;
+  /**
+   * Removes the related event listeners from the canvas.
+   */
+  destroy(): void;
+}