fix: improved cannon and interactivity events

Author: matteobruni

engine/src/Utils/LogUtils.ts

@@ -14,6 +14,9 @@ interface ILogger {
   // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
   log(this: void, message?: unknown, ...optionalParams: unknown[]): void;
 
+  // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+  trace(this: void, ...data: unknown[]): void;
+
   // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
   verbose(this: void, message?: unknown, ...optionalParams: unknown[]): void;
 
@@ -29,6 +32,7 @@ const _logger: ILogger = {
   },
   info: console.info,
   log: console.log,
+  trace: console.trace,
   verbose: console.log,
   warning: console.warn,
 };

interactions/external/cannon/src/Cannoner.ts

@@ -17,6 +17,7 @@ import {
   getDistance,
   getRandomInRange,
   identity,
+  none,
 } from "@tsparticles/engine";
 import { Cannon } from "./Options/Classes/Cannon.js";
 
@@ -206,7 +207,7 @@ export class Cannoner extends ExternalInteractorBase<CannonContainer> {
         pxRatio = this.container.retina.pixelRatio,
         dragDist = getDistance(origin, current),
         // Clamp to maxDragDistance so visual feedback matches actual force
-        clampedDist = Math.min(dragDist, opts.maxDragDistance * pxRatio),
+        clampedDist = opts.maxDragDistance > none ? Math.min(dragDist, opts.maxDragDistance * pxRatio) : pxRatio,
         clampRatio = dragDist > minDistance ? clampedDist / dragDist : minDistance,
         clampedX = origin.x + (current.x - origin.x) * clampRatio,
         clampedY = origin.y + (current.y - origin.y) * clampRatio;
@@ -243,7 +244,8 @@ export class Cannoner extends ExternalInteractorBase<CannonContainer> {
 
     const { origin, current } = this._gesture,
       pxRatio = this.container.retina.pixelRatio,
-      dragLength = Math.min(getDistance(origin, current), opts.maxDragDistance * pxRatio);
+      dist = getDistance(origin, current),
+      dragLength = opts.maxDragDistance > none ? Math.min(dist, opts.maxDragDistance * pxRatio) : dist;
 
     if (dragLength < minTapsLength) {
       // Ignore accidental taps

interactions/external/particle/src/InteractivityParticleMaker.ts

@@ -84,10 +84,10 @@ export class InteractivityParticleMaker extends ExternalInteractorBase<Interacti
         }
 
         if (interactivityParticleOptions.replaceCursor) {
-          const element = interactivityData.element as HTMLElement | Window | undefined;
+          const element = interactivityData.element as HTMLElement | Window | Document | undefined;
 
           if (element) {
-            if (element instanceof Window) {
+            if (element instanceof Window || element instanceof Document) {
               safeDocument().body.style.cursor = "";
             } else {
               element.style.cursor = "";
@@ -119,10 +119,10 @@ export class InteractivityParticleMaker extends ExternalInteractorBase<Interacti
       this._particle = container.particles.addParticle(this._lastPosition, particleOptions);
 
       if (interactivityParticleOptions.replaceCursor) {
-        const element = interactivityData.element as HTMLElement | Window | undefined;
+        const element = interactivityData.element as HTMLElement | Window | Document | undefined;
 
         if (element) {
-          if (element instanceof Window) {
+          if (element instanceof Window || element instanceof Document) {
             safeDocument().body.style.cursor = "none";
           } else {
             element.style.cursor = "none";

plugins/interactivity/src/InteractivityConstants.ts

@@ -2,7 +2,6 @@ export const clickEvent = "click",
   mouseDownEvent = "pointerdown",
   mouseUpEvent = "pointerup",
   mouseLeaveEvent = "pointerleave",
-  mouseOutEvent = "pointerout",
   mouseMoveEvent = "pointermove",
   touchStartEvent = "touchstart",
   touchEndEvent = "touchend",

plugins/interactivity/src/InteractivityEventListeners.ts

@@ -5,13 +5,13 @@ import {
   executeOnSingleOrMultiple,
   lengthOffset,
   manageListener,
+  safeDocument,
   visibilityChangeEvent,
 } from "@tsparticles/engine";
 import {
   mouseDownEvent,
   mouseLeaveEvent,
   mouseMoveEvent,
-  mouseOutEvent,
   mouseUpEvent,
   touchCancelEvent,
   touchEndEvent,
@@ -160,10 +160,7 @@ export class InteractivityEventListeners {
     this._mouseTouchFinish();
   };
 
-  private readonly _manageInteractivityListeners: (mouseLeaveTmpEvent: string, add: boolean) => void = (
-    mouseLeaveTmpEvent,
-    add,
-  ) => {
+  private readonly _manageInteractivityListeners: (add: boolean) => void = add => {
     const handlers = this._handlers,
       container = this._container,
       interactionManager = this._interactionManager,
@@ -204,7 +201,7 @@ export class InteractivityEventListeners {
       manageListener(interactivityEl, touchEndEvent, handlers.touchEnd, add);
     }
 
-    manageListener(interactivityEl, mouseLeaveTmpEvent, handlers.mouseLeave, add);
+    manageListener(interactivityEl, mouseLeaveEvent, handlers.mouseLeave, add);
     manageListener(interactivityEl, touchCancelEvent, handlers.touchCancel, add);
   };
 
@@ -220,20 +217,16 @@ export class InteractivityEventListeners {
       detectType = options.interactivity?.detectsOn,
       canvasEl = container.canvas.element;
 
-    let mouseLeaveTmpEvent = mouseLeaveEvent;
-
     /* events target element */
     if (detectType === InteractivityDetect.window) {
-      interactionManager.interactivityData.element = globalThis;
-
-      mouseLeaveTmpEvent = mouseOutEvent;
+      interactionManager.interactivityData.element = safeDocument();
     } else if (detectType === InteractivityDetect.parent && canvasEl) {
       interactionManager.interactivityData.element = canvasEl.parentElement ?? canvasEl.parentNode;
     } else {
       interactionManager.interactivityData.element = canvasEl;
     }
 
-    this._manageInteractivityListeners(mouseLeaveTmpEvent, add);
+    this._manageInteractivityListeners(add);
 
     manageListener(document, visibilityChangeEvent, handlers.visibilityChange, add, false);
   };
@@ -326,7 +319,7 @@ export class InteractivityEventListeners {
 
       const mouseEvent = e as MouseEvent;
 
-      if (interactivity.element === globalThis) {
+      if (interactivity.element === safeDocument()) {
         if (canvasEl) {
           const clientRect = canvasEl.getBoundingClientRect();