@neo4j-nvl/interaction-handlers 0.3.2 → 0.3.3-9ea79f41

package/lib/__tests__/lasso-interaction.test.js

@@ -1,6 +1,6 @@
 import NVL from '@neo4j-nvl/base';
 import '@testing-library/jest-dom';
-import { LassoInteraction } from '../interaction-handlers/lasso-interaction';
+import { LassoInteraction, checkIntersection, checkLinesCrossing, checkPointInside } from '../interaction-handlers/lasso-interaction';
 jest.mock('@neo4j-nvl/layout-workers');
 const testNodes = [
     { id: '0', x: 10, y: 10 },
@@ -64,7 +64,7 @@ describe('LassoInteraction', () => {
             createMouseEvent('mousemove', 250, 0),
             createMouseEvent('mousemove', 240, 240),
             createMouseEvent('mousemove', 100, 200),
-            createMouseEvent('mousemove', 50, 0),
+            createMouseEvent('mousemove', 0, 50),
             createMouseEvent('mouseup', 0, 0)
         ];
         const container = myNVL.getContainer();
@@ -76,4 +76,49 @@ describe('LassoInteraction', () => {
             resolve();
         });
     });
+    test('test for line crossing utility function', () => {
+        const res1 = checkLinesCrossing([0, 0], [10, 10], [10, 0], [0, 10]);
+        expect(res1).toBeTruthy();
+        const res2 = checkLinesCrossing([10, 10], [227, 182], [390, 10], [100, 100]);
+        expect(res2).toBeTruthy();
+        const res3 = checkLinesCrossing([5, 5], [5, 20], [10, 10], [20, 10]);
+        expect(res3).toBeFalsy();
+        const res4 = checkLinesCrossing([10, 10], [20, 10], [15, 10], [25, 10]);
+        expect(res4).toBeFalsy();
+        const res5 = checkLinesCrossing([880, 416], [872, 404], [868, 392], [856, 378]);
+        expect(res5).toBeFalsy();
+    });
+    test('test for line segment crossing utility function', () => {
+        const res1 = checkIntersection([
+            [0, 0],
+            [10, 0],
+            [100, 10],
+            [50, 10],
+            [50, -10]
+        ]);
+        expect(res1).toBeTruthy();
+        const res2 = checkIntersection([
+            [10, 10],
+            [227, 182],
+            [390, 10],
+            [500, 100]
+        ]);
+        expect(res2).toBeFalsy();
+    });
+    test('test for point inside polygon utility function', () => {
+        const res1 = checkPointInside(10, 10, [
+            { x: 0, y: 0 },
+            { x: 10, y: -10 },
+            { x: 20, y: 0 },
+            { x: 10, y: 20 }
+        ]);
+        expect(res1).toBeTruthy();
+        const res2 = checkPointInside(10, 10, [
+            { x: 0, y: 0 },
+            { x: 10, y: -10 },
+            { x: 20, y: 0 },
+            { x: 10, y: 5 }
+        ]);
+        expect(res2).toBeFalsy();
+    });
 });

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

@@ -1,4 +1,4 @@
-import type { NVL, Node, Relationship } from '@neo4j-nvl/base';
+import type { NVL, Node, Point, Relationship } from '@neo4j-nvl/base';
 import { BaseInteraction } from './base';
 /**
  * Options for the lasso interaction handler to customize its behavior.
@@ -26,6 +26,25 @@ export type LassoInteractionCallbacks = {
         rels: Relationship[];
     }, event: MouseEvent) => void) | boolean;
 };
+/**
+ * @internal
+ */
+export type Coords = [number, number];
+/**
+ * Checks if two lines defined by p1->p2 and p3->p4 are crossing.
+ * @internal
+ */
+export declare const checkLinesCrossing: (p1: Coords, p2: Coords, p3: Coords, p4: Coords) => boolean;
+/**
+ * Checks if any line segments in the polygon intersect.
+ * @internal
+ */
+export declare const checkIntersection: (polygon: Coords[]) => boolean;
+/**
+ * Checks if the point (x, y) is inside the polygon defined by vs.
+ * @internal
+ */
+export declare const checkPointInside: (x: number, y: number, vs: Point[]) => boolean;
 /**
  * Interaction handler for selecting nodes and relationships by drawing a lasso around them.
  * When dragging, a line is drawn in the visualisation, and when selecting all nodes inside the drawn

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

@@ -4,6 +4,61 @@ import { BaseInteraction } from './base';
 import { getCanvasPosition, getWorldPosition } from './utils';
 const pointDist = 10;
 const shapeShowTime = 500;
+/**
+ * Checks if two lines defined by p1->p2 and p3->p4 are crossing.
+ * @internal
+ */
+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 any line segments in the polygon intersect.
+ * @internal
+ */
+export const checkIntersection = (polygon) => {
+    for (let i = 0; i < polygon.length - 1; i++) {
+        for (let j = i + 2; j < polygon.length - 1; j++) {
+            const line1p1 = polygon[i] ?? [0, 0];
+            const line1p2 = polygon[i + 1] ?? [0, 0];
+            const line2p1 = polygon[j] ?? [0, 0];
+            const line2p2 = polygon[j + 1] ?? [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
+ */
+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;
+};
 /**
  * Interaction handler for selecting nodes and relationships by drawing a lasso around them.
  * When dragging, a line is drawn in the visualisation, and when selecting all nodes inside the drawn
@@ -70,25 +125,6 @@ export class LassoInteraction extends BaseInteraction {
         this.endLasso(event);
     };
     getLassoItems = (points) => {
-        const inside = (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;
-        };
         const worldPoints = points.map((p) => getWorldPosition(this.nvlInstance, p));
         const nodePositions = this.nvlInstance.getNodePositions();
         const hitNodes = new Set();
@@ -96,7 +132,7 @@ export class LassoInteraction extends BaseInteraction {
             if (pos.x === undefined || pos.y === undefined || pos.id === undefined) {
                 continue;
             }
-            if (inside(pos.x, pos.y, worldPoints)) {
+            if (checkPointInside(pos.x, pos.y, worldPoints)) {
                 hitNodes.add(pos.id);
             }
         }
@@ -119,7 +155,8 @@ export class LassoInteraction extends BaseInteraction {
         }
         this.active = false;
         const pointArrays = this.points.map((p) => [p.x, p.y]);
-        const hull = concaveman(pointArrays, 3)
+        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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/interaction-handlers",
-  "version": "0.3.2",
+  "version": "0.3.3-9ea79f41",
   "license": "SEE LICENSE IN 'LICENSE.txt'",
   "homepage": "https://neo4j.com/docs/nvl/current/",
   "description": "Interaction handlers for the Neo4j Visualization Library",
@@ -33,7 +33,7 @@
     "tsconfig": "./tsconfig.json"
   },
   "dependencies": {
-    "@neo4j-nvl/base": "^0.3.2",
+    "@neo4j-nvl/base": "0.3.3-9ea79f41",
     "concaveman": "^1.2.1",
     "lodash": "4.17.21"
   },
@@ -50,5 +50,6 @@
     "eslint": "*",
     "jest": "*",
     "typescript": "*"
-  }
+  },
+  "stableVersion": "0.3.3"
 }