build: reviewed offsets for link warp

interactions/particles/links/src/CircleWarp.ts

@@ -1,5 +1,6 @@
 import { Circle, Rectangle } from "tsparticles-engine";
 import type { ICoordinates, IDimension, Range } from "tsparticles-engine";
+import { offsetsFactors } from "./Utils";
 
 /**
  * @category Utils
@@ -11,15 +12,8 @@ export class CircleWarp extends Circle {
      * @param y Y coordinate of the position
      * @param radius Circle's radius
      * @param canvasSize the canvas size, used for warp formulas
-     * @param offsets warp offsets for looking around the center
      */
-    constructor(
-        x: number,
-        y: number,
-        radius: number,
-        private readonly canvasSize: IDimension,
-        private readonly offsets: ICoordinates[]
-    ) {
+    constructor(x: number, y: number, radius: number, private readonly canvasSize: IDimension) {
         super(x, y, radius);
 
         this.canvasSize = { ...canvasSize };
@@ -35,11 +29,15 @@ export class CircleWarp extends Circle {
             return true;
         }
 
-        for (const offset of this.offsets) {
-            const pos = {
-                x: point.x + offset.x,
-                y: point.y + offset.y,
-            };
+        for (const offsetFactor of offsetsFactors) {
+            const offset = {
+                    x: offsetFactor.x * this.canvasSize.width,
+                    y: offsetFactor.y * this.canvasSize.height,
+                },
+                pos = {
+                    x: point.x + offset.x,
+                    y: point.y + offset.y,
+                };
 
             if (super.contains(pos)) {
                 return true;

interactions/particles/links/src/LinkContainer.ts

@@ -1,7 +1,6 @@
-import type { Container, ICoordinates, IRgb } from "tsparticles-engine";
+import type { Container, IRgb } from "tsparticles-engine";
 
 export type LinkContainer = Container & {
-    offsets: ICoordinates[];
     particles: {
         linksColor?: IRgb | string;
         linksColors: Map<string, IRgb | string | undefined>;

interactions/particles/links/src/LinkInstance.ts

@@ -1,5 +1,5 @@
 import type { IContainerPlugin, IRangeColor, IRgb, RangeValue } from "tsparticles-engine";
-import { drawLinkLine, drawLinkTriangle, getOffsets } from "./Utils";
+import { drawLinkLine, drawLinkTriangle } from "./Utils";
 import { getDistance, getLinkColor, getRandom, getRangeValue, rangeColorToRgb } from "tsparticles-engine";
 import type { ILink } from "./ILink";
 import type { LinkContainer } from "./LinkContainer";
@@ -44,8 +44,6 @@ export class LinkInstance implements IContainerPlugin {
     private readonly _frequencies: IParticlesFrequencies;
 
     constructor(private readonly container: LinkContainer) {
-        container.offsets = getOffsets(container.canvas.size);
-
         this._frequencies = {
             links: new Map<string, number>(),
             triangles: new Map<string, number>(),
@@ -95,7 +93,7 @@ export class LinkInstance implements IContainerPlugin {
     }
 
     resize(): void {
-        this.container.offsets = getOffsets(this.container.canvas.size);
+        // do nothing
     }
 
     private drawLinkLine(p1: LinkParticle, link: ILink): void {
@@ -160,7 +158,6 @@ export class LinkInstance implements IContainerPlugin {
                 maxDistance,
                 container.canvas.size,
                 p1.options.links.warp,
-                this.container.offsets,
                 options.backgroundMask.enable,
                 options.backgroundMask.composite,
                 colorLine,

interactions/particles/links/src/Linker.ts

@@ -6,6 +6,7 @@ import type { LinkContainer } from "./LinkContainer";
 import type { LinkParticle } from "./LinkParticle";
 import { Links } from "./Options/Classes/Links";
 import type { ParticlesLinkOptions } from "./Options/Classes/ParticlesLinkOptions";
+import { offsetsFactors } from "./Utils";
 
 export function findLink(p1: LinkParticle, p2: LinkParticle): boolean {
     if (!p1.links || !p2.links) {
@@ -20,8 +21,7 @@ export function getLinkDistance(
     pos2: ICoordinates,
     optDistance: number,
     canvasSize: IDimension,
-    warp: boolean,
-    offsets: ICoordinates[]
+    warp: boolean
 ): number | undefined {
     const distance = getDistance(pos1, pos2);
 
@@ -33,8 +33,9 @@ export function getLinkDistance(
         return;
     }
 
-    for (const offset of offsets) {
-        const pos1o = {
+    for (const offsetFactor of offsetsFactors) {
+        const offset = { x: offsetFactor.x * canvasSize.width, y: offsetFactor.y * canvasSize.height },
+            pos1o = {
                 x: pos1.x + offset.x,
                 y: pos1.y + offset.y,
             },
@@ -93,7 +94,7 @@ class Linker extends ParticlesInteractorBase {
             optDistance = p1.retina.linksDistance ?? 0,
             warp = linkOpt1.warp,
             range = warp
-                ? new CircleWarp(pos1.x, pos1.y, optDistance, canvasSize, this.linkContainer.offsets)
+                ? new CircleWarp(pos1.x, pos1.y, optDistance, canvasSize)
                 : new Circle(pos1.x, pos1.y, optDistance),
             query = container.particles.quadTree.query(range) as LinkParticle[];
 
@@ -119,14 +120,7 @@ class Linker extends ParticlesInteractorBase {
                 continue;
             }
 
-            const distance = getLinkDistance(
-                pos1,
-                pos2,
-                optDistance,
-                canvasSize,
-                warp && linkOpt2.warp,
-                this.linkContainer.offsets
-            );
+            const distance = getLinkDistance(pos1, pos2, optDistance, canvasSize, warp && linkOpt2.warp);
 
             if (distance === undefined || distance > optDistance) {
                 return;

interactions/particles/links/src/Utils.ts

@@ -9,26 +9,23 @@ import {
 } from "tsparticles-engine";
 import type { ILinksShadow } from "./Options/Interfaces/ILinksShadow";
 
-export function getOffsets(canvasSize: IDimension): ICoordinates[] {
-    return [
-        { x: canvasSize.width, y: 0 },
-        { x: 0, y: canvasSize.height },
-        { x: canvasSize.width, y: canvasSize.height },
-        { x: -canvasSize.width, y: 0 },
-        { x: 0, y: -canvasSize.height },
-        { x: -canvasSize.width, y: -canvasSize.height },
-        { x: canvasSize.width, y: -canvasSize.height },
-        { x: -canvasSize.width, y: canvasSize.height },
-    ];
-}
+export const offsetsFactors = [
+    { x: 1, y: 0 },
+    { x: 0, y: 1 },
+    { x: 1, y: 1 },
+    { x: -1, y: 0 },
+    { x: 0, y: -1 },
+    { x: -1, y: -1 },
+    { x: 1, y: -1 },
+    { x: -1, y: 1 },
+];
 
 export function getLinkPoints(
     begin: ICoordinates,
     end: ICoordinates,
     maxDistance: number,
     warp: boolean,
-    canvasSize: IDimension,
-    offsets: ICoordinates[]
+    canvasSize: IDimension
 ): { begin: ICoordinates; end: ICoordinates }[] {
     const lines: { begin: ICoordinates; end: ICoordinates }[] = [];
 
@@ -37,7 +34,7 @@ export function getLinkPoints(
     }
 
     if (warp) {
-        for (const line of getIntermediatePoints(begin, end, canvasSize, maxDistance, offsets)) {
+        for (const line of getIntermediatePoints(begin, end, canvasSize, maxDistance)) {
             lines.push(line);
         }
     }
@@ -49,13 +46,13 @@ export function getIntermediatePoints(
     begin: ICoordinates,
     end: ICoordinates,
     canvasSize: IDimension,
-    maxDistance: number,
-    offsets: ICoordinates[]
+    maxDistance: number
 ): { begin: ICoordinates; end: ICoordinates }[] {
     let pi1: ICoordinates | undefined, pi2: ICoordinates | undefined;
 
-    for (const offset of offsets) {
-        const pos1 = {
+    for (const offsetFactor of offsetsFactors) {
+        const offset = { x: offsetFactor.x * canvasSize.width, y: offsetFactor.y * canvasSize.height },
+            pos1 = {
                 x: begin.x + offset.x,
                 y: begin.y + offset.y,
             },
@@ -174,14 +171,13 @@ export function drawLinkLine(
     maxDistance: number,
     canvasSize: IDimension,
     warp: boolean,
-    offsets: ICoordinates[],
     backgroundMask: boolean,
     composite: GlobalCompositeOperation,
     colorLine: IRgb,
     opacity: number,
     shadow: ILinksShadow
 ): void {
-    const lines = getLinkPoints(begin, end, maxDistance, warp, canvasSize, offsets);
+    const lines = getLinkPoints(begin, end, maxDistance, warp, canvasSize);
 
     if (!lines.length) {
         return;

interactions/particles/links/tests/CircleWarp.ts

@@ -1,12 +1,12 @@
-import { canvasSize, distance, offsets, tests } from "./Fixture/defaultValues";
+import { canvasSize, distance, tests } from "./Fixture/defaultValues";
 import { describe, it } from "mocha";
 import { expect } from "chai";
 import { CircleWarp } from "../src/CircleWarp";
 
 describe(`CircleWarp Tests (Canvas: ${canvasSize.width}x${canvasSize.height}, Distance: ${distance})`, () => {
     for (const test of tests) {
         describe(`Center (${test.begin.x}, ${test.begin.y}) (${test.warp ? "warp" : "no-warp"})`, () => {
-            const circle = new CircleWarp(test.begin.x, test.begin.y, distance, canvasSize, offsets);
+            const circle = new CircleWarp(test.begin.x, test.begin.y, distance, canvasSize);
 
             for (const end of test.tests) {
                 it(`should contain Point (${end.coordinates.x}, ${end.coordinates.y})`, () => {

interactions/particles/links/tests/Fixture/defaultValues.ts

@@ -1,9 +1,7 @@
 import { LinkTest } from "./types";
-import { getOffsets } from "../../src/Utils";
 
 export const canvasSize = { width: 100, height: 100 },
-    distance = 10,
-    offsets = getOffsets(canvasSize);
+    distance = 10;
 
 export const tests: LinkTest[] = [
     {

interactions/particles/links/tests/Fixture/utils.ts

@@ -1,4 +1,4 @@
-import { /*getDistance,*/ ICoordinates, IDimension } from "tsparticles-engine";
+import { getDistance, ICoordinates, IDimension } from "tsparticles-engine";
 import { getLinkPoints } from "../../src/Utils";
 import { expect } from "chai";
 
@@ -9,9 +9,8 @@ export function checkIntermediatePointsTests(
     distance: number,
     warp: boolean,
     canvasSize: IDimension,
-    offsets: ICoordinates[]
 ): void {
-    const linkPoints = getLinkPoints(begin, end, distance, warp, canvasSize, offsets);
+    const linkPoints = getLinkPoints(begin, end, distance, warp, canvasSize);
 
     console.log("begin", begin);
     console.log("end", end);
@@ -24,9 +23,9 @@ export function checkIntermediatePointsTests(
         expect(point).to.be.not.empty;
 
         if (midPoints.length) {
-            //const midDistance = getDistance(point.begin, point.end);
+            const midDistance = getDistance(point.begin, point.end);
 
-            //expect(midDistance).to.be.greaterThanOrEqual(0).and.lessThan(distance);
+            expect(midDistance).to.be.greaterThanOrEqual(0).and.lessThan(distance);
 
             expect(
                 midPoints.find(
@@ -48,10 +47,9 @@ export function checkIntermediatePointsFailTests(
     end: ICoordinates,
     distance: number,
     warp: boolean,
-    canvasSize: IDimension,
-    offsets: ICoordinates[]
+    canvasSize: IDimension
 ): void {
-    const linkPoints = getLinkPoints(begin, end, distance, warp, canvasSize, offsets);
+    const linkPoints = getLinkPoints(begin, end, distance, warp, canvasSize);
 
     expect(linkPoints).to.be.empty;
 }

interactions/particles/links/tests/Linker.ts

@@ -1,7 +1,7 @@
 import { describe, it } from "mocha";
 import { expect } from "chai";
 import { getLinkDistance } from "../src/Linker";
-import { canvasSize, distance, offsets, tests } from "./Fixture/defaultValues";
+import { canvasSize, distance, tests } from "./Fixture/defaultValues";
 import { checkIntermediatePointsFailTests, checkIntermediatePointsTests } from "./Fixture/utils";
 
 describe(`Linker (Canvas: ${canvasSize.width}x${canvasSize.height}, Distance: ${distance})`, () => {
@@ -15,17 +15,15 @@ describe(`Linker (Canvas: ${canvasSize.width}x${canvasSize.height}, Distance: ${
                             end.coordinates,
                             distance,
                             test.warp,
-                            canvasSize,
-                            offsets
+                            canvasSize
                         );
                     } else {
                         const linkDistance = getLinkDistance(
                             test.begin,
                             end.coordinates,
                             distance,
                             canvasSize,
-                            test.warp,
-                            offsets
+                            test.warp
                         );
 
                         console.log("linkDistance", linkDistance);
@@ -38,8 +36,7 @@ describe(`Linker (Canvas: ${canvasSize.width}x${canvasSize.height}, Distance: ${
                             end.midPoints,
                             distance,
                             test.warp,
-                            canvasSize,
-                            offsets
+                            canvasSize
                         );
                     }
                 });