@neo4j-nvl/interaction-handlers 2.0.0 → 2.1.0

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

@@ -1,53 +1,53 @@
-import type { NVL, Node, Relationship } from '@neo4j-nvl/base';
-import { BaseInteraction } from './base';
+import { BaseInteraction } from "./base.js";
+import { NVL, Node, Relationship } from "@neo4j-nvl/base";
 /**
  * @internal
  * @hidden
  */
 export type DrawInteractionCallbacks = {
-    onHoverNodeMargin?: ((hoveredNode: Node | null, evt: MouseEvent) => void) | boolean;
-    onDrawEnded?: ((newRelationshipToAdd: Relationship | null, newTargetNodeToAdd: Node | null, event: MouseEvent) => void) | boolean;
-    onDrawStarted?: ((event: MouseEvent) => void) | boolean;
+  onHoverNodeMargin?: ((hoveredNode: Node | null, evt: MouseEvent) => void) | boolean;
+  onDrawEnded?: ((newRelationshipToAdd: Relationship | null, newTargetNodeToAdd: Node | null, event: MouseEvent) => void) | boolean;
+  onDrawStarted?: ((event: MouseEvent) => void) | boolean;
 };
 /**
  * Options for the draw interaction handler.
  */
 export type DrawInteractionOptions = {
-    /** Styling for the ghost graph that is shown when drawing. */
-    ghostGraphStyling?: {
-        /** Styling for the ghost node. */
-        node?: Pick<Node, 'color' | 'size'>;
-        /** Styling for the ghost relationship. */
-        relationship?: Pick<Relationship, 'color' | 'width'>;
-    };
+  /** Styling for the ghost graph that is shown when drawing. */
+  ghostGraphStyling?: {
+    /** Styling for the ghost node. */
+    node?: Pick<Node, 'color' | 'size'>;
+    /** Styling for the ghost relationship. */
+    relationship?: Pick<Relationship, 'color' | 'width'>;
+  };
 };
 /**
  * @internal
  * @hidden
  */
 export declare class DrawInteraction extends BaseInteraction<DrawInteractionOptions> {
-    private isMoved;
-    private isDrawing;
-    private isDraggingNode;
-    private mouseDownNode;
-    private newTempTargetNode;
-    private newTempRegularRelationshipToNewTempTargetNode;
-    private newTempRegularRelationshipToExistingNode;
-    private newTempSelfReferredRelationship;
-    private newTargetNodeToAdd;
-    private newRelationshipToAdd;
-    private mouseOutsideOfNvlArea;
-    constructor(nvl: NVL, options?: DrawInteractionOptions);
-    private cancelDrawing;
-    private handleMouseUpGlobal;
-    private handleMouseLeaveNvl;
-    private handleMouseEnterNvl;
-    private handleMouseMove;
-    private setNewRegularRelationship;
-    private setNewRegularRelationshipToNewTempTargetNode;
-    private setNewRegularRelationshipToExistingNode;
-    private setNewSelfReferredRelationship;
-    private handleMouseDown;
-    private handleMouseUp;
-    destroy: () => void;
-}
+  private isMoved;
+  private isDrawing;
+  private isDraggingNode;
+  private mouseDownNode;
+  private newTempTargetNode;
+  private newTempRegularRelationshipToNewTempTargetNode;
+  private newTempRegularRelationshipToExistingNode;
+  private newTempSelfReferredRelationship;
+  private newTargetNodeToAdd;
+  private newRelationshipToAdd;
+  private mouseOutsideOfNvlArea;
+  constructor(nvl: NVL, options?: DrawInteractionOptions);
+  private cancelDrawing;
+  private handleMouseUpGlobal;
+  private handleMouseLeaveNvl;
+  private handleMouseEnterNvl;
+  private handleMouseMove;
+  private setNewRegularRelationship;
+  private setNewRegularRelationshipToNewTempTargetNode;
+  private setNewRegularRelationshipToExistingNode;
+  private setNewSelfReferredRelationship;
+  private handleMouseDown;
+  private handleMouseUp;
+  destroy: () => void;
+}

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

@@ -1,281 +1,248 @@
-/* eslint-disable @typescript-eslint/strict-boolean-expressions */
-import { NODE_EDGE_WIDTH } from '../constants';
-import { BaseInteraction } from './base';
-import { generateUniqueId, getCanvasPosition, getWorldPosition } from './utils';
+import "../constants.js";
+import { BaseInteraction } from "./base.js";
+import { generateUniqueId, getCanvasPosition, getWorldPosition } from "./utils.js";
+// src/interaction-handlers/draw-interaction.ts
 const DefaultGhostGraphStyling = {
-    node: {
-        color: 'black',
-        size: 25
-    },
-    relationship: {
-        color: 'red',
-        width: 1
-    }
+	node: {
+		color: "black",
+		size: 25
+	},
+	relationship: {
+		color: "red",
+		width: 1
+	}
 };
 /**
- * @internal
- * @hidden
- */
-export class DrawInteraction extends BaseInteraction {
-    isMoved = false;
-    isDrawing = false;
-    isDraggingNode = false;
-    mouseDownNode = undefined;
-    newTempTargetNode = null;
-    newTempRegularRelationshipToNewTempTargetNode = null;
-    newTempRegularRelationshipToExistingNode = null;
-    newTempSelfReferredRelationship = null;
-    newTargetNodeToAdd = null;
-    newRelationshipToAdd = null;
-    mouseOutsideOfNvlArea = false;
-    constructor(nvl, options = {}) {
-        super(nvl, options);
-        this.nvlInstance.setLayout('free');
-        this.addEventListener('mousemove', this.handleMouseMove, true);
-        this.addEventListener('mousedown', this.handleMouseDown, true);
-        this.addEventListener('mouseup', this.handleMouseUp, true);
-        this.containerInstance?.addEventListener('mouseleave', this.handleMouseLeaveNvl);
-        this.containerInstance?.addEventListener('mouseenter', this.handleMouseEnterNvl);
-        document.addEventListener('mouseup', this.handleMouseUpGlobal, true);
-    }
-    cancelDrawing = () => {
-        this.nvlInstance.removeRelationshipsWithIds([
-            this.newTempRegularRelationshipToNewTempTargetNode?.id,
-            this.newTempRegularRelationshipToExistingNode?.id,
-            this.newTempSelfReferredRelationship?.id
-        ].filter((id) => Boolean(id)));
-        this.nvlInstance.removeNodesWithIds(this.newTempTargetNode?.id ? [this.newTempTargetNode?.id] : []);
-        this.newTempTargetNode = null;
-        this.newTempRegularRelationshipToNewTempTargetNode = null;
-        this.newTempRegularRelationshipToExistingNode = null;
-        this.newTempSelfReferredRelationship = null;
-        this.isMoved = false;
-        this.isDrawing = false;
-        this.isDraggingNode = false;
-    };
-    handleMouseUpGlobal = (event) => {
-        // If mouse up outside of nvl area while drawing, cancel drawing.
-        if (this.isDrawing && this.mouseOutsideOfNvlArea) {
-            this.cancelDrawing();
-        }
-    };
-    handleMouseLeaveNvl = () => {
-        this.mouseOutsideOfNvlArea = true;
-    };
-    handleMouseEnterNvl = () => {
-        this.mouseOutsideOfNvlArea = false;
-    };
-    handleMouseMove = (event) => {
-        this.isMoved = true;
-        if (this.isDrawing) {
-            const canvasPos = getCanvasPosition(this.containerInstance, event);
-            const pos = getWorldPosition(this.nvlInstance, canvasPos);
-            const hits = this.nvlInstance.getHits(event, ['node']);
-            const [hitNode] = hits.nvlTargets.nodes.filter((n) => n.data.id !== this.newTempTargetNode?.id);
-            const targetNode = hitNode
-                ? {
-                    id: hitNode.data.id,
-                    x: hitNode.targetCoordinates.x,
-                    y: hitNode.targetCoordinates.y,
-                    size: hitNode.data.size
-                }
-                : undefined;
-            // ArrowBundler has race-condition to update the dataset,
-            // if we remove the node with the same ID after mouse releases,
-            // the same node will be removed then be added again, which will cause the issue.
-            // So always make sure the new node id to be added to the dataset after mouse releasing is a new id.
-            const newTargetNodeId = generateUniqueId(13);
-            const newTargetNode = targetNode
-                ? null
-                : {
-                    id: newTargetNodeId,
-                    size: this.currentOptions.ghostGraphStyling?.node?.size ?? DefaultGhostGraphStyling.node.size,
-                    selected: false,
-                    x: pos.x,
-                    y: pos.y
-                };
-            const newRelationshipId = generateUniqueId(13);
-            const relationship = this.mouseDownNode?.data
-                ? {
-                    id: newRelationshipId,
-                    from: this.mouseDownNode.data.id,
-                    to: targetNode ? targetNode.id : newTargetNodeId
-                }
-                : null;
-            let { x, y } = pos;
-            let size = this.currentOptions.ghostGraphStyling?.node?.size ?? DefaultGhostGraphStyling.node.size;
-            if (hitNode) {
-                x = hitNode.targetCoordinates.x;
-                y = hitNode.targetCoordinates.y;
-                size = hitNode.data.size ?? size;
-                if (hitNode.data.id === this.mouseDownNode?.data.id && !this.newTempSelfReferredRelationship) {
-                    this.nvlInstance.removeRelationshipsWithIds([
-                        this.newTempRegularRelationshipToNewTempTargetNode?.id,
-                        this.newTempRegularRelationshipToExistingNode?.id
-                    ].filter((id) => Boolean(id)));
-                    this.newTempRegularRelationshipToNewTempTargetNode = null;
-                    this.newTempRegularRelationshipToExistingNode = null;
-                    this.setNewSelfReferredRelationship();
-                    if (this.newTempSelfReferredRelationship) {
-                        this.nvlInstance.addElementsToGraph([], [this.newTempSelfReferredRelationship]);
-                    }
-                }
-                else if (hitNode.data.id !== this.mouseDownNode?.data.id && !this.newTempRegularRelationshipToExistingNode) {
-                    this.nvlInstance.removeRelationshipsWithIds([this.newTempSelfReferredRelationship?.id, this.newTempRegularRelationshipToNewTempTargetNode?.id].filter((id) => Boolean(id)));
-                    this.newTempSelfReferredRelationship = null;
-                    this.newTempRegularRelationshipToNewTempTargetNode = null;
-                    this.setNewRegularRelationshipToExistingNode(hitNode.data.id);
-                    if (this.newTempRegularRelationshipToExistingNode) {
-                        this.nvlInstance.addElementsToGraph([], [this.newTempRegularRelationshipToExistingNode]);
-                    }
-                }
-            }
-            else if (!this.newTempRegularRelationshipToNewTempTargetNode) {
-                this.nvlInstance.removeRelationshipsWithIds([this.newTempSelfReferredRelationship?.id, this.newTempRegularRelationshipToExistingNode?.id].filter((id) => Boolean(id)));
-                this.newTempSelfReferredRelationship = null;
-                this.newTempRegularRelationshipToExistingNode = null;
-                this.setNewRegularRelationshipToNewTempTargetNode();
-                this.nvlInstance.addElementsToGraph([], this.newTempRegularRelationshipToNewTempTargetNode ? [this.newTempRegularRelationshipToNewTempTargetNode] : []);
-            }
-            if (this.newTempTargetNode) {
-                this.nvlInstance.setNodePositions([{ id: this.newTempTargetNode.id, x, y }]);
-                this.nvlInstance.updateElementsInGraph([{ id: this.newTempTargetNode.id, x, y, size }], []);
-            }
-            this.newRelationshipToAdd = relationship;
-            this.newTargetNodeToAdd = newTargetNode;
-        }
-        else if (!this.isDraggingNode) {
-            this.newRelationshipToAdd = null;
-            this.newTargetNodeToAdd = null;
-            const hits = this.nvlInstance.getHits(event, ['node'], { hitNodeMarginWidth: NODE_EDGE_WIDTH });
-            const hitNodeEdges = hits.nvlTargets.nodes.filter((node) => !node.insideNode);
-            if (hitNodeEdges.length > 0) {
-                const [node] = hitNodeEdges;
-                this.callCallbackIfRegistered('onHoverNodeMargin', node?.data);
-            }
-            else {
-                this.callCallbackIfRegistered('onHoverNodeMargin', null);
-            }
-        }
-    };
-    setNewRegularRelationship(targetId) {
-        if (!this.mouseDownNode) {
-            return null;
-        }
-        return {
-            id: generateUniqueId(13),
-            from: this.mouseDownNode.data.id,
-            to: targetId,
-            color: this.currentOptions.ghostGraphStyling?.relationship?.color ?? DefaultGhostGraphStyling.relationship.color,
-            width: this.currentOptions.ghostGraphStyling?.relationship?.width ?? DefaultGhostGraphStyling.relationship.width
-        };
-    }
-    setNewRegularRelationshipToNewTempTargetNode() {
-        if (!this.mouseDownNode || !this.newTempTargetNode) {
-            return;
-        }
-        this.newTempRegularRelationshipToNewTempTargetNode = this.setNewRegularRelationship(this.newTempTargetNode.id);
-    }
-    setNewRegularRelationshipToExistingNode(targetId) {
-        if (!this.mouseDownNode) {
-            return;
-        }
-        this.newTempRegularRelationshipToExistingNode = this.setNewRegularRelationship(targetId);
-    }
-    setNewSelfReferredRelationship() {
-        if (!this.mouseDownNode) {
-            return;
-        }
-        this.newTempSelfReferredRelationship = {
-            id: generateUniqueId(13),
-            from: this.mouseDownNode.data.id,
-            to: this.mouseDownNode.data.id,
-            color: this.currentOptions.ghostGraphStyling?.relationship?.color ?? DefaultGhostGraphStyling.relationship.color,
-            width: this.currentOptions.ghostGraphStyling?.relationship?.width ?? DefaultGhostGraphStyling.relationship.width
-        };
-    }
-    handleMouseDown = (event) => {
-        this.callCallbackIfRegistered('onHoverNodeMargin', null);
-        this.isMoved = false;
-        this.newRelationshipToAdd = null;
-        this.newTargetNodeToAdd = null;
-        const hits = this.nvlInstance.getHits(event, ['node'], { hitNodeMarginWidth: NODE_EDGE_WIDTH });
-        const hitNodes = hits.nvlTargets.nodes.filter((node) => node.insideNode);
-        const hitNodeEdges = hits.nvlTargets.nodes.filter((node) => !node.insideNode);
-        const startDragging = hitNodes.length > 0;
-        const startDrawing = hitNodeEdges.length > 0;
-        if (startDragging || startDrawing) {
-            // Prevent default behavior to avoid interactions with other elements outside of nvl, like text selection,
-            // but still assign focus to nvl container on click
-            event.preventDefault();
-            this.containerInstance?.focus();
-        }
-        if (startDragging) {
-            this.isDraggingNode = true;
-            this.isDrawing = false;
-        }
-        else if (startDrawing) {
-            this.isDrawing = true;
-            this.isDraggingNode = false;
-            this.mouseDownNode = hitNodeEdges[0];
-            const canvasPos = getCanvasPosition(this.containerInstance, event);
-            const pos = getWorldPosition(this.nvlInstance, canvasPos);
-            const color = this.currentOptions.ghostGraphStyling?.node?.color ?? DefaultGhostGraphStyling.node.color;
-            const html = document.createElement('div');
-            html.style.width = '110%';
-            html.style.height = '110%';
-            html.style.position = 'absolute';
-            html.style.left = '-5%';
-            html.style.top = '-5%';
-            html.style.borderRadius = '50%';
-            html.style.backgroundColor = color;
-            this.newTempTargetNode = {
-                id: generateUniqueId(13),
-                size: this.currentOptions.ghostGraphStyling?.node?.size ?? DefaultGhostGraphStyling.node.size,
-                selected: false,
-                x: pos.x,
-                y: pos.y,
-                html
-            };
-            this.setNewRegularRelationshipToNewTempTargetNode();
-            this.nvlInstance.addAndUpdateElementsInGraph([this.newTempTargetNode], this.newTempRegularRelationshipToNewTempTargetNode ? [this.newTempRegularRelationshipToNewTempTargetNode] : []);
-            this.callCallbackIfRegistered('onDrawStarted', event);
-        }
-        else {
-            this.mouseDownNode = undefined;
-            this.isDrawing = false;
-            this.isDraggingNode = false;
-        }
-    };
-    handleMouseUp = (event) => {
-        this.nvlInstance.removeRelationshipsWithIds([
-            this.newTempRegularRelationshipToNewTempTargetNode?.id,
-            this.newTempRegularRelationshipToExistingNode?.id,
-            this.newTempSelfReferredRelationship?.id
-        ].filter((id) => Boolean(id)));
-        this.nvlInstance.removeNodesWithIds(this.newTempTargetNode?.id ? [this.newTempTargetNode?.id] : []);
-        if (this.isDrawing && this.isMoved) {
-            if (this.newTargetNodeToAdd) {
-                this.nvlInstance.setNodePositions([this.newTargetNodeToAdd]);
-            }
-            // Avoid relationship glitch.
-            this.nvlInstance.addAndUpdateElementsInGraph(this.newTargetNodeToAdd ? [{ id: this.newTargetNodeToAdd.id }] : [], this.newRelationshipToAdd ? [this.newRelationshipToAdd] : []);
-            this.callCallbackIfRegistered('onDrawEnded', this.newRelationshipToAdd, this.newTargetNodeToAdd, event);
-        }
-        this.newTempTargetNode = null;
-        this.newTempRegularRelationshipToNewTempTargetNode = null;
-        this.newTempRegularRelationshipToExistingNode = null;
-        this.newTempSelfReferredRelationship = null;
-        this.isMoved = false;
-        this.isDrawing = false;
-        this.isDraggingNode = false;
-    };
-    destroy = () => {
-        this.removeEventListener('mousemove', this.handleMouseMove, true);
-        this.removeEventListener('mousedown', this.handleMouseDown, true);
-        this.removeEventListener('mouseup', this.handleMouseUp, true);
-        this.containerInstance?.removeEventListener('mouseleave', this.handleMouseLeaveNvl);
-        this.containerInstance?.removeEventListener('mouseenter', this.handleMouseEnterNvl);
-        document.removeEventListener('mouseup', this.handleMouseUpGlobal, true);
-    };
-}
+* @internal
+* @hidden
+*/
+var DrawInteraction = class extends BaseInteraction {
+	isMoved = false;
+	isDrawing = false;
+	isDraggingNode = false;
+	mouseDownNode = void 0;
+	newTempTargetNode = null;
+	newTempRegularRelationshipToNewTempTargetNode = null;
+	newTempRegularRelationshipToExistingNode = null;
+	newTempSelfReferredRelationship = null;
+	newTargetNodeToAdd = null;
+	newRelationshipToAdd = null;
+	mouseOutsideOfNvlArea = false;
+	constructor(nvl, options = {}) {
+		super(nvl, options);
+		this.nvlInstance.setLayout("free");
+		this.addEventListener("mousemove", this.handleMouseMove, true);
+		this.addEventListener("mousedown", this.handleMouseDown, true);
+		this.addEventListener("mouseup", this.handleMouseUp, true);
+		this.containerInstance?.addEventListener("mouseleave", this.handleMouseLeaveNvl);
+		this.containerInstance?.addEventListener("mouseenter", this.handleMouseEnterNvl);
+		document.addEventListener("mouseup", this.handleMouseUpGlobal, true);
+	}
+	cancelDrawing = () => {
+		this.nvlInstance.removeRelationshipsWithIds([
+			this.newTempRegularRelationshipToNewTempTargetNode?.id,
+			this.newTempRegularRelationshipToExistingNode?.id,
+			this.newTempSelfReferredRelationship?.id
+		].filter((id) => Boolean(id)));
+		this.nvlInstance.removeNodesWithIds(this.newTempTargetNode?.id ? [this.newTempTargetNode?.id] : []);
+		this.newTempTargetNode = null;
+		this.newTempRegularRelationshipToNewTempTargetNode = null;
+		this.newTempRegularRelationshipToExistingNode = null;
+		this.newTempSelfReferredRelationship = null;
+		this.isMoved = false;
+		this.isDrawing = false;
+		this.isDraggingNode = false;
+	};
+	handleMouseUpGlobal = (event) => {
+		if (this.isDrawing && this.mouseOutsideOfNvlArea) this.cancelDrawing();
+	};
+	handleMouseLeaveNvl = () => {
+		this.mouseOutsideOfNvlArea = true;
+	};
+	handleMouseEnterNvl = () => {
+		this.mouseOutsideOfNvlArea = false;
+	};
+	handleMouseMove = (event) => {
+		this.isMoved = true;
+		if (this.isDrawing) {
+			const canvasPos = getCanvasPosition(this.containerInstance, event);
+			const pos = getWorldPosition(this.nvlInstance, canvasPos);
+			const [hitNode] = this.nvlInstance.getHits(event, ["node"]).nvlTargets.nodes.filter((n) => n.data.id !== this.newTempTargetNode?.id);
+			const targetNode = hitNode ? {
+				id: hitNode.data.id,
+				x: hitNode.targetCoordinates.x,
+				y: hitNode.targetCoordinates.y,
+				size: hitNode.data.size
+			} : void 0;
+			const newTargetNodeId = generateUniqueId(13);
+			const newTargetNode = targetNode ? null : {
+				id: newTargetNodeId,
+				size: this.currentOptions.ghostGraphStyling?.node?.size ?? DefaultGhostGraphStyling.node.size,
+				selected: false,
+				x: pos.x,
+				y: pos.y
+			};
+			const newRelationshipId = generateUniqueId(13);
+			const relationship = this.mouseDownNode?.data ? {
+				id: newRelationshipId,
+				from: this.mouseDownNode.data.id,
+				to: targetNode ? targetNode.id : newTargetNodeId
+			} : null;
+			let { x, y } = pos;
+			let size = this.currentOptions.ghostGraphStyling?.node?.size ?? DefaultGhostGraphStyling.node.size;
+			if (hitNode) {
+				x = hitNode.targetCoordinates.x;
+				y = hitNode.targetCoordinates.y;
+				size = hitNode.data.size ?? size;
+				if (hitNode.data.id === this.mouseDownNode?.data.id && !this.newTempSelfReferredRelationship) {
+					this.nvlInstance.removeRelationshipsWithIds([this.newTempRegularRelationshipToNewTempTargetNode?.id, this.newTempRegularRelationshipToExistingNode?.id].filter((id) => Boolean(id)));
+					this.newTempRegularRelationshipToNewTempTargetNode = null;
+					this.newTempRegularRelationshipToExistingNode = null;
+					this.setNewSelfReferredRelationship();
+					if (this.newTempSelfReferredRelationship) this.nvlInstance.addElementsToGraph([], [this.newTempSelfReferredRelationship]);
+				} else if (hitNode.data.id !== this.mouseDownNode?.data.id && !this.newTempRegularRelationshipToExistingNode) {
+					this.nvlInstance.removeRelationshipsWithIds([this.newTempSelfReferredRelationship?.id, this.newTempRegularRelationshipToNewTempTargetNode?.id].filter((id) => Boolean(id)));
+					this.newTempSelfReferredRelationship = null;
+					this.newTempRegularRelationshipToNewTempTargetNode = null;
+					this.setNewRegularRelationshipToExistingNode(hitNode.data.id);
+					if (this.newTempRegularRelationshipToExistingNode) this.nvlInstance.addElementsToGraph([], [this.newTempRegularRelationshipToExistingNode]);
+				}
+			} else if (!this.newTempRegularRelationshipToNewTempTargetNode) {
+				this.nvlInstance.removeRelationshipsWithIds([this.newTempSelfReferredRelationship?.id, this.newTempRegularRelationshipToExistingNode?.id].filter((id) => Boolean(id)));
+				this.newTempSelfReferredRelationship = null;
+				this.newTempRegularRelationshipToExistingNode = null;
+				this.setNewRegularRelationshipToNewTempTargetNode();
+				this.nvlInstance.addElementsToGraph([], this.newTempRegularRelationshipToNewTempTargetNode ? [this.newTempRegularRelationshipToNewTempTargetNode] : []);
+			}
+			if (this.newTempTargetNode) {
+				this.nvlInstance.setNodePositions([{
+					id: this.newTempTargetNode.id,
+					x,
+					y
+				}]);
+				this.nvlInstance.updateElementsInGraph([{
+					id: this.newTempTargetNode.id,
+					x,
+					y,
+					size
+				}], []);
+			}
+			this.newRelationshipToAdd = relationship;
+			this.newTargetNodeToAdd = newTargetNode;
+		} else if (!this.isDraggingNode) {
+			this.newRelationshipToAdd = null;
+			this.newTargetNodeToAdd = null;
+			const hitNodeEdges = this.nvlInstance.getHits(event, ["node"], { hitNodeMarginWidth: 10 }).nvlTargets.nodes.filter((node) => !node.insideNode);
+			if (hitNodeEdges.length > 0) {
+				const [node] = hitNodeEdges;
+				this.callCallbackIfRegistered("onHoverNodeMargin", node?.data);
+			} else this.callCallbackIfRegistered("onHoverNodeMargin", null);
+		}
+	};
+	setNewRegularRelationship(targetId) {
+		if (!this.mouseDownNode) return null;
+		return {
+			id: generateUniqueId(13),
+			from: this.mouseDownNode.data.id,
+			to: targetId,
+			color: this.currentOptions.ghostGraphStyling?.relationship?.color ?? DefaultGhostGraphStyling.relationship.color,
+			width: this.currentOptions.ghostGraphStyling?.relationship?.width ?? DefaultGhostGraphStyling.relationship.width
+		};
+	}
+	setNewRegularRelationshipToNewTempTargetNode() {
+		if (!this.mouseDownNode || !this.newTempTargetNode) return;
+		this.newTempRegularRelationshipToNewTempTargetNode = this.setNewRegularRelationship(this.newTempTargetNode.id);
+	}
+	setNewRegularRelationshipToExistingNode(targetId) {
+		if (!this.mouseDownNode) return;
+		this.newTempRegularRelationshipToExistingNode = this.setNewRegularRelationship(targetId);
+	}
+	setNewSelfReferredRelationship() {
+		if (!this.mouseDownNode) return;
+		this.newTempSelfReferredRelationship = {
+			id: generateUniqueId(13),
+			from: this.mouseDownNode.data.id,
+			to: this.mouseDownNode.data.id,
+			color: this.currentOptions.ghostGraphStyling?.relationship?.color ?? DefaultGhostGraphStyling.relationship.color,
+			width: this.currentOptions.ghostGraphStyling?.relationship?.width ?? DefaultGhostGraphStyling.relationship.width
+		};
+	}
+	handleMouseDown = (event) => {
+		this.callCallbackIfRegistered("onHoverNodeMargin", null);
+		this.isMoved = false;
+		this.newRelationshipToAdd = null;
+		this.newTargetNodeToAdd = null;
+		const hits = this.nvlInstance.getHits(event, ["node"], { hitNodeMarginWidth: 10 });
+		const hitNodes = hits.nvlTargets.nodes.filter((node) => node.insideNode);
+		const hitNodeEdges = hits.nvlTargets.nodes.filter((node) => !node.insideNode);
+		const startDragging = hitNodes.length > 0;
+		const startDrawing = hitNodeEdges.length > 0;
+		if (startDragging || startDrawing) {
+			event.preventDefault();
+			this.containerInstance?.focus();
+		}
+		if (startDragging) {
+			this.isDraggingNode = true;
+			this.isDrawing = false;
+		} else if (startDrawing) {
+			this.isDrawing = true;
+			this.isDraggingNode = false;
+			this.mouseDownNode = hitNodeEdges[0];
+			const canvasPos = getCanvasPosition(this.containerInstance, event);
+			const pos = getWorldPosition(this.nvlInstance, canvasPos);
+			const color = this.currentOptions.ghostGraphStyling?.node?.color ?? DefaultGhostGraphStyling.node.color;
+			const html = document.createElement("div");
+			html.style.width = "110%";
+			html.style.height = "110%";
+			html.style.position = "absolute";
+			html.style.left = "-5%";
+			html.style.top = "-5%";
+			html.style.borderRadius = "50%";
+			html.style.backgroundColor = color;
+			this.newTempTargetNode = {
+				id: generateUniqueId(13),
+				size: this.currentOptions.ghostGraphStyling?.node?.size ?? DefaultGhostGraphStyling.node.size,
+				selected: false,
+				x: pos.x,
+				y: pos.y,
+				html
+			};
+			this.setNewRegularRelationshipToNewTempTargetNode();
+			this.nvlInstance.addAndUpdateElementsInGraph([this.newTempTargetNode], this.newTempRegularRelationshipToNewTempTargetNode ? [this.newTempRegularRelationshipToNewTempTargetNode] : []);
+			this.callCallbackIfRegistered("onDrawStarted", event);
+		} else {
+			this.mouseDownNode = void 0;
+			this.isDrawing = false;
+			this.isDraggingNode = false;
+		}
+	};
+	handleMouseUp = (event) => {
+		this.nvlInstance.removeRelationshipsWithIds([
+			this.newTempRegularRelationshipToNewTempTargetNode?.id,
+			this.newTempRegularRelationshipToExistingNode?.id,
+			this.newTempSelfReferredRelationship?.id
+		].filter((id) => Boolean(id)));
+		this.nvlInstance.removeNodesWithIds(this.newTempTargetNode?.id ? [this.newTempTargetNode?.id] : []);
+		if (this.isDrawing && this.isMoved) {
+			if (this.newTargetNodeToAdd) this.nvlInstance.setNodePositions([this.newTargetNodeToAdd]);
+			this.nvlInstance.addAndUpdateElementsInGraph(this.newTargetNodeToAdd ? [{ id: this.newTargetNodeToAdd.id }] : [], this.newRelationshipToAdd ? [this.newRelationshipToAdd] : []);
+			this.callCallbackIfRegistered("onDrawEnded", this.newRelationshipToAdd, this.newTargetNodeToAdd, event);
+		}
+		this.newTempTargetNode = null;
+		this.newTempRegularRelationshipToNewTempTargetNode = null;
+		this.newTempRegularRelationshipToExistingNode = null;
+		this.newTempSelfReferredRelationship = null;
+		this.isMoved = false;
+		this.isDrawing = false;
+		this.isDraggingNode = false;
+	};
+	destroy = () => {
+		this.removeEventListener("mousemove", this.handleMouseMove, true);
+		this.removeEventListener("mousedown", this.handleMouseDown, true);
+		this.removeEventListener("mouseup", this.handleMouseUp, true);
+		this.containerInstance?.removeEventListener("mouseleave", this.handleMouseLeaveNvl);
+		this.containerInstance?.removeEventListener("mouseenter", this.handleMouseEnterNvl);
+		document.removeEventListener("mouseup", this.handleMouseUpGlobal, true);
+	};
+};
+export { DrawInteraction };