@tsparticles/engine 3.0.0-alpha.1 → 3.0.0-beta.1

package/esm/Core/Utils/EventListeners.js

@@ -1,9 +1,9 @@
-import { executeOnSingleOrMultiple, safeMatchMedia } from "../../Utils/Utils";
-import { mouseDownEvent, mouseLeaveEvent, mouseMoveEvent, mouseOutEvent, mouseUpEvent, resizeEvent, touchCancelEvent, touchEndEvent, touchMoveEvent, touchStartEvent, visibilityChangeEvent, } from "./Constants";
+import { executeOnSingleOrMultiple, isBoolean, safeMatchMedia } from "../../Utils/Utils.js";
+import { mouseDownEvent, mouseLeaveEvent, mouseMoveEvent, mouseOutEvent, mouseUpEvent, resizeEvent, touchCancelEvent, touchEndEvent, touchMoveEvent, touchStartEvent, visibilityChangeEvent, } from "./Constants.js";
 function manageListener(element, event, handler, add, options) {
     if (add) {
         let addOptions = { passive: true };
-        if (typeof options === "boolean") {
+        if (isBoolean(options)) {
             addOptions.capture = options;
         }
         else if (options !== undefined) {
@@ -19,101 +19,71 @@ function manageListener(element, event, handler, add, options) {
 export class EventListeners {
     constructor(container) {
         this.container = container;
-        this.canPush = true;
-        this.handlers = {
-            mouseMove: (e) => this._mouseTouchMove(e),
-            touchStart: (e) => this._mouseTouchMove(e),
-            touchMove: (e) => this._mouseTouchMove(e),
-            touchEnd: () => this._mouseTouchFinish(),
-            mouseLeave: () => this._mouseTouchFinish(),
-            touchCancel: () => this._mouseTouchFinish(),
-            touchEndClick: (e) => this._mouseTouchClick(e),
-            mouseUp: (e) => this._mouseTouchClick(e),
-            mouseDown: () => this._mouseDown(),
-            visibilityChange: () => this._handleVisibilityChange(),
-            themeChange: (e) => this._handleThemeChange(e),
-            oldThemeChange: (e) => this._handleThemeChange(e),
-            resize: () => this._handleWindowResize(),
+        this._doMouseTouchClick = (e) => {
+            const container = this.container, options = container.actualOptions;
+            if (this._canPush) {
+                const mouseInteractivity = container.interactivity.mouse, mousePos = mouseInteractivity.position;
+                if (!mousePos) {
+                    return;
+                }
+                mouseInteractivity.clickPosition = { ...mousePos };
+                mouseInteractivity.clickTime = new Date().getTime();
+                const onClick = options.interactivity.events.onClick;
+                executeOnSingleOrMultiple(onClick.mode, (mode) => this.container.handleClickMode(mode));
+            }
+            if (e.type === "touchend") {
+                setTimeout(() => this._mouseTouchFinish(), 500);
+            }
         };
-    }
-    addListeners() {
-        this._manageListeners(true);
-    }
-    removeListeners() {
-        this._manageListeners(false);
-    }
-    _doMouseTouchClick(e) {
-        const container = this.container, options = container.actualOptions;
-        if (this.canPush) {
-            const mouseInteractivity = container.interactivity.mouse, mousePos = mouseInteractivity.position;
-            if (!mousePos) {
+        this._handleThemeChange = (e) => {
+            const mediaEvent = e, container = this.container, options = container.options, defaultThemes = options.defaultThemes, themeName = mediaEvent.matches ? defaultThemes.dark : defaultThemes.light, theme = options.themes.find((theme) => theme.name === themeName);
+            if (theme && theme.default.auto) {
+                container.loadTheme(themeName);
+            }
+        };
+        this._handleVisibilityChange = () => {
+            const container = this.container, options = container.actualOptions;
+            this._mouseTouchFinish();
+            if (!options.pauseOnBlur) {
                 return;
             }
-            mouseInteractivity.clickPosition = Object.assign({}, mousePos);
-            mouseInteractivity.clickTime = new Date().getTime();
-            const onClick = options.interactivity.events.onClick;
-            executeOnSingleOrMultiple(onClick.mode, (mode) => this._handleClickMode(mode));
-        }
-        if (e.type === "touchend") {
-            setTimeout(() => this._mouseTouchFinish(), 500);
-        }
-    }
-    _handleClickMode(mode) {
-        this.container.handleClickMode(mode);
-    }
-    _handleThemeChange(e) {
-        const mediaEvent = e, container = this.container, options = container.options, defaultThemes = options.defaultThemes, themeName = mediaEvent.matches ? defaultThemes.dark : defaultThemes.light, theme = options.themes.find((theme) => theme.name === themeName);
-        if (theme && theme.default.auto) {
-            container.loadTheme(themeName);
-        }
-    }
-    _handleVisibilityChange() {
-        const container = this.container, options = container.actualOptions;
-        this._mouseTouchFinish();
-        if (!options.pauseOnBlur) {
-            return;
-        }
-        container.pageHidden = (document === null || document === void 0 ? void 0 : document.hidden) || false;
-        if (container.pageHidden) {
-            container.pause();
-        }
-        else {
-            if (container.getAnimationStatus()) {
-                container.play(true);
+            if (document && document.hidden) {
+                container.pageHidden = true;
+                container.pause();
             }
             else {
-                container.draw(true);
+                container.pageHidden = false;
+                if (container.getAnimationStatus()) {
+                    container.play(true);
+                }
+                else {
+                    container.draw(true);
+                }
+            }
+        };
+        this._handleWindowResize = async () => {
+            if (this._resizeTimeout) {
+                clearTimeout(this._resizeTimeout);
+                delete this._resizeTimeout;
+            }
+            this._resizeTimeout = setTimeout(async () => {
+                const canvas = this.container.canvas;
+                canvas && (await canvas.windowResize());
+            }, this.container.actualOptions.interactivity.events.resize.delay * 1000);
+        };
+        this._manageInteractivityListeners = (mouseLeaveTmpEvent, add) => {
+            const handlers = this._handlers, container = this.container, options = container.actualOptions;
+            const interactivityEl = container.interactivity.element;
+            if (!interactivityEl) {
+                return;
+            }
+            const html = interactivityEl, canvasEl = container.canvas.element;
+            if (canvasEl) {
+                canvasEl.style.pointerEvents = html === canvasEl ? "initial" : "none";
+            }
+            if (!(options.interactivity.events.onHover.enable || options.interactivity.events.onClick.enable)) {
+                return;
             }
-        }
-    }
-    _handleWindowResize() {
-        if (this.resizeTimeout) {
-            clearTimeout(this.resizeTimeout);
-            delete this.resizeTimeout;
-        }
-        this.resizeTimeout = setTimeout(async () => { var _a; return (_a = this.container.canvas) === null || _a === void 0 ? void 0 : _a.windowResize(); }, this.container.actualOptions.interactivity.events.resize.delay * 1000);
-    }
-    _manageInteractivityEvents(add) {
-        var _a;
-        const handlers = this.handlers, container = this.container, options = container.actualOptions, detectType = options.interactivity.detectsOn;
-        let mouseLeaveTmpEvent = mouseLeaveEvent;
-        if (detectType === "window") {
-            container.interactivity.element = window;
-            mouseLeaveTmpEvent = mouseOutEvent;
-        }
-        else if (detectType === "parent" && container.canvas.element) {
-            const canvasEl = container.canvas.element;
-            container.interactivity.element = (_a = canvasEl.parentElement) !== null && _a !== void 0 ? _a : canvasEl.parentNode;
-        }
-        else {
-            container.interactivity.element = container.canvas.element;
-        }
-        const interactivityEl = container.interactivity.element;
-        if (!interactivityEl) {
-            return;
-        }
-        const html = interactivityEl;
-        if (options.interactivity.events.onHover.enable || options.interactivity.events.onClick.enable) {
             manageListener(interactivityEl, mouseMoveEvent, handlers.mouseMove, add);
             manageListener(interactivityEl, touchStartEvent, handlers.touchStart, add);
             manageListener(interactivityEl, touchMoveEvent, handlers.touchMove, add);
@@ -127,169 +97,223 @@ export class EventListeners {
             }
             manageListener(interactivityEl, mouseLeaveTmpEvent, handlers.mouseLeave, add);
             manageListener(interactivityEl, touchCancelEvent, handlers.touchCancel, add);
-        }
-        if (container.canvas.element) {
-            container.canvas.element.style.pointerEvents = html === container.canvas.element ? "initial" : "none";
-        }
-    }
-    _manageListeners(add) {
-        this._manageMediaEvents(add);
-        this._manageInteractivityEvents(add);
-        this._manageResizeEvent(add);
-        this._manageVisibilityEvent(add);
-    }
-    _manageMediaEvents(add) {
-        const handlers = this.handlers, mediaMatch = safeMatchMedia("(prefers-color-scheme: dark)");
-        if (!mediaMatch) {
-            return;
-        }
-        if (mediaMatch.addEventListener !== undefined) {
-            manageListener(mediaMatch, "change", handlers.themeChange, add);
-            return;
-        }
-        if (mediaMatch.addListener !== undefined) {
+        };
+        this._manageListeners = (add) => {
+            const handlers = this._handlers, container = this.container, options = container.actualOptions, detectType = options.interactivity.detectsOn, canvasEl = container.canvas.element;
+            let mouseLeaveTmpEvent = mouseLeaveEvent;
+            if (detectType === "window") {
+                container.interactivity.element = window;
+                mouseLeaveTmpEvent = mouseOutEvent;
+            }
+            else if (detectType === "parent" && canvasEl) {
+                container.interactivity.element = canvasEl.parentElement ?? canvasEl.parentNode;
+            }
+            else {
+                container.interactivity.element = canvasEl;
+            }
+            this._manageMediaMatch(add);
+            this._manageResize(add);
+            this._manageInteractivityListeners(mouseLeaveTmpEvent, add);
+            if (document) {
+                manageListener(document, visibilityChangeEvent, handlers.visibilityChange, add, false);
+            }
+        };
+        this._manageMediaMatch = (add) => {
+            const handlers = this._handlers, mediaMatch = safeMatchMedia("(prefers-color-scheme: dark)");
+            if (!mediaMatch) {
+                return;
+            }
+            if (mediaMatch.addEventListener !== undefined) {
+                manageListener(mediaMatch, "change", handlers.themeChange, add);
+                return;
+            }
+            if (mediaMatch.addListener === undefined) {
+                return;
+            }
             if (add) {
                 mediaMatch.addListener(handlers.oldThemeChange);
             }
             else {
                 mediaMatch.removeListener(handlers.oldThemeChange);
             }
-        }
-    }
-    _manageResizeEvent(add) {
-        const handlers = this.handlers, container = this.container, options = container.actualOptions;
-        if (!options.interactivity.events.resize) {
-            return;
-        }
-        if (typeof ResizeObserver === "undefined") {
-            manageListener(window, resizeEvent, handlers.resize, add);
-            return;
-        }
-        if (this.resizeObserver && !add) {
-            if (container.canvas.element) {
-                this.resizeObserver.unobserve(container.canvas.element);
+        };
+        this._manageResize = (add) => {
+            const handlers = this._handlers, container = this.container, options = container.actualOptions;
+            if (!options.interactivity.events.resize) {
+                return;
             }
-            this.resizeObserver.disconnect();
-            delete this.resizeObserver;
-        }
-        else if (!this.resizeObserver && add && container.canvas.element) {
-            this.resizeObserver = new ResizeObserver((entries) => {
-                const entry = entries.find((e) => e.target === container.canvas.element);
-                if (!entry) {
-                    return;
+            if (typeof ResizeObserver === "undefined") {
+                manageListener(window, resizeEvent, handlers.resize, add);
+                return;
+            }
+            const canvasEl = container.canvas.element;
+            if (this._resizeObserver && !add) {
+                if (canvasEl) {
+                    this._resizeObserver.unobserve(canvasEl);
                 }
-                this._handleWindowResize();
-            });
-            this.resizeObserver.observe(container.canvas.element);
-        }
-    }
-    _manageVisibilityEvent(add) {
-        if (!document) {
-            return;
-        }
-        manageListener(document, visibilityChangeEvent, this.handlers.visibilityChange, add);
-    }
-    _mouseDown() {
-        const interactivity = this.container.interactivity;
-        if (interactivity) {
-            const mouse = interactivity.mouse;
+                this._resizeObserver.disconnect();
+                delete this._resizeObserver;
+            }
+            else if (!this._resizeObserver && add && canvasEl) {
+                this._resizeObserver = new ResizeObserver(async (entries) => {
+                    const entry = entries.find((e) => e.target === canvasEl);
+                    if (!entry) {
+                        return;
+                    }
+                    await this._handleWindowResize();
+                });
+                this._resizeObserver.observe(canvasEl);
+            }
+        };
+        this._mouseDown = () => {
+            const { interactivity } = this.container;
+            if (!interactivity) {
+                return;
+            }
+            const { mouse } = interactivity;
             mouse.clicking = true;
             mouse.downPosition = mouse.position;
-        }
-    }
-    _mouseTouchClick(e) {
-        const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse;
-        mouse.inside = true;
-        let handled = false;
-        const mousePosition = mouse.position;
-        if (!mousePosition || !options.interactivity.events.onClick.enable) {
-            return;
-        }
-        for (const [, plugin] of container.plugins) {
-            if (!plugin.clickPositionValid) {
-                continue;
-            }
-            handled = plugin.clickPositionValid(mousePosition);
-            if (handled) {
-                break;
+        };
+        this._mouseTouchClick = (e) => {
+            const container = this.container, options = container.actualOptions, { mouse } = container.interactivity;
+            mouse.inside = true;
+            let handled = false;
+            const mousePosition = mouse.position;
+            if (!mousePosition || !options.interactivity.events.onClick.enable) {
+                return;
             }
-        }
-        if (!handled) {
-            this._doMouseTouchClick(e);
-        }
-        mouse.clicking = false;
-    }
-    _mouseTouchFinish() {
-        const interactivity = this.container.interactivity;
-        if (!interactivity) {
-            return;
-        }
-        const mouse = interactivity.mouse;
-        delete mouse.position;
-        delete mouse.clickPosition;
-        delete mouse.downPosition;
-        interactivity.status = mouseLeaveEvent;
-        mouse.inside = false;
-        mouse.clicking = false;
-    }
-    _mouseTouchMove(e) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        const container = this.container, options = container.actualOptions;
-        if (!((_a = container.interactivity) === null || _a === void 0 ? void 0 : _a.element)) {
-            return;
-        }
-        container.interactivity.mouse.inside = true;
-        let pos;
-        const canvas = container.canvas.element;
-        if (e.type.startsWith("pointer")) {
-            this.canPush = true;
-            const mouseEvent = e;
-            if (container.interactivity.element === window) {
-                if (canvas) {
-                    const clientRect = canvas.getBoundingClientRect();
-                    pos = {
-                        x: mouseEvent.clientX - clientRect.left,
-                        y: mouseEvent.clientY - clientRect.top,
-                    };
+            for (const [, plugin] of container.plugins) {
+                if (!plugin.clickPositionValid) {
+                    continue;
                 }
+                handled = plugin.clickPositionValid(mousePosition);
+                if (handled) {
+                    break;
+                }
+            }
+            if (!handled) {
+                this._doMouseTouchClick(e);
+            }
+            mouse.clicking = false;
+        };
+        this._mouseTouchFinish = () => {
+            const interactivity = this.container.interactivity;
+            if (!interactivity) {
+                return;
+            }
+            const mouse = interactivity.mouse;
+            delete mouse.position;
+            delete mouse.clickPosition;
+            delete mouse.downPosition;
+            interactivity.status = mouseLeaveEvent;
+            mouse.inside = false;
+            mouse.clicking = false;
+        };
+        this._mouseTouchMove = (e) => {
+            const container = this.container, options = container.actualOptions, interactivity = container.interactivity, canvasEl = container.canvas.element;
+            if (!interactivity || !interactivity.element) {
+                return;
             }
-            else if (options.interactivity.detectsOn === "parent") {
-                const source = mouseEvent.target, target = mouseEvent.currentTarget, canvasEl = container.canvas.element;
-                if (source && target && canvasEl) {
-                    const sourceRect = source.getBoundingClientRect(), targetRect = target.getBoundingClientRect(), canvasRect = canvasEl.getBoundingClientRect();
+            interactivity.mouse.inside = true;
+            let pos;
+            if (e.type.startsWith("pointer")) {
+                this._canPush = true;
+                const mouseEvent = e;
+                if (interactivity.element === window) {
+                    if (canvasEl) {
+                        const clientRect = canvasEl.getBoundingClientRect();
+                        pos = {
+                            x: mouseEvent.clientX - clientRect.left,
+                            y: mouseEvent.clientY - clientRect.top,
+                        };
+                    }
+                }
+                else if (options.interactivity.detectsOn === "parent") {
+                    const source = mouseEvent.target, target = mouseEvent.currentTarget;
+                    if (source && target && canvasEl) {
+                        const sourceRect = source.getBoundingClientRect(), targetRect = target.getBoundingClientRect(), canvasRect = canvasEl.getBoundingClientRect();
+                        pos = {
+                            x: mouseEvent.offsetX + 2 * sourceRect.left - (targetRect.left + canvasRect.left),
+                            y: mouseEvent.offsetY + 2 * sourceRect.top - (targetRect.top + canvasRect.top),
+                        };
+                    }
+                    else {
+                        pos = {
+                            x: mouseEvent.offsetX ?? mouseEvent.clientX,
+                            y: mouseEvent.offsetY ?? mouseEvent.clientY,
+                        };
+                    }
+                }
+                else if (mouseEvent.target === canvasEl) {
                     pos = {
-                        x: mouseEvent.offsetX + 2 * sourceRect.left - (targetRect.left + canvasRect.left),
-                        y: mouseEvent.offsetY + 2 * sourceRect.top - (targetRect.top + canvasRect.top),
+                        x: mouseEvent.offsetX ?? mouseEvent.clientX,
+                        y: mouseEvent.offsetY ?? mouseEvent.clientY,
                     };
                 }
-                else {
+            }
+            else {
+                this._canPush = e.type !== "touchmove";
+                if (canvasEl) {
+                    const touchEvent = e, lastTouch = touchEvent.touches[touchEvent.touches.length - 1], canvasRect = canvasEl.getBoundingClientRect();
                     pos = {
-                        x: (_b = mouseEvent.offsetX) !== null && _b !== void 0 ? _b : mouseEvent.clientX,
-                        y: (_c = mouseEvent.offsetY) !== null && _c !== void 0 ? _c : mouseEvent.clientY,
+                        x: lastTouch.clientX - (canvasRect.left ?? 0),
+                        y: lastTouch.clientY - (canvasRect.top ?? 0),
                     };
                 }
             }
-            else if (mouseEvent.target === container.canvas.element) {
-                pos = {
-                    x: (_d = mouseEvent.offsetX) !== null && _d !== void 0 ? _d : mouseEvent.clientX,
-                    y: (_e = mouseEvent.offsetY) !== null && _e !== void 0 ? _e : mouseEvent.clientY,
-                };
+            const pxRatio = container.retina.pixelRatio;
+            if (pos) {
+                pos.x *= pxRatio;
+                pos.y *= pxRatio;
             }
-        }
-        else {
-            this.canPush = e.type !== "touchmove";
-            const touchEvent = e, lastTouch = touchEvent.touches[touchEvent.touches.length - 1], canvasRect = canvas === null || canvas === void 0 ? void 0 : canvas.getBoundingClientRect();
-            pos = {
-                x: lastTouch.clientX - ((_f = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.left) !== null && _f !== void 0 ? _f : 0),
-                y: lastTouch.clientY - ((_g = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.top) !== null && _g !== void 0 ? _g : 0),
-            };
-        }
-        const pxRatio = container.retina.pixelRatio;
-        if (pos) {
-            pos.x *= pxRatio;
-            pos.y *= pxRatio;
-        }
-        container.interactivity.mouse.position = pos;
-        container.interactivity.status = mouseMoveEvent;
+            interactivity.mouse.position = pos;
+            interactivity.status = mouseMoveEvent;
+        };
+        this._touchEnd = (e) => {
+            const evt = e, touches = Array.from(evt.changedTouches);
+            for (const touch of touches) {
+                this._touches.delete(touch.identifier);
+            }
+            this._mouseTouchFinish();
+        };
+        this._touchEndClick = (e) => {
+            const evt = e, touches = Array.from(evt.changedTouches);
+            for (const touch of touches) {
+                this._touches.delete(touch.identifier);
+            }
+            this._mouseTouchClick(e);
+        };
+        this._touchStart = (e) => {
+            const evt = e, touches = Array.from(evt.changedTouches);
+            for (const touch of touches) {
+                this._touches.set(touch.identifier, performance.now());
+            }
+            this._mouseTouchMove(e);
+        };
+        this._canPush = true;
+        this._touches = new Map();
+        this._handlers = {
+            mouseDown: () => this._mouseDown(),
+            mouseLeave: () => this._mouseTouchFinish(),
+            mouseMove: (e) => this._mouseTouchMove(e),
+            mouseUp: (e) => this._mouseTouchClick(e),
+            touchStart: (e) => this._touchStart(e),
+            touchMove: (e) => this._mouseTouchMove(e),
+            touchEnd: (e) => this._touchEnd(e),
+            touchCancel: (e) => this._touchEnd(e),
+            touchEndClick: (e) => this._touchEndClick(e),
+            visibilityChange: () => this._handleVisibilityChange(),
+            themeChange: (e) => this._handleThemeChange(e),
+            oldThemeChange: (e) => this._handleThemeChange(e),
+            resize: () => {
+                this._handleWindowResize();
+            },
+        };
+    }
+    addListeners() {
+        this._manageListeners(true);
+    }
+    removeListeners() {
+        this._manageListeners(false);
     }
 }

package/esm/Core/Utils/InteractionManager.js

@@ -2,22 +2,18 @@ export class InteractionManager {
     constructor(engine, container) {
         this.container = container;
         this._engine = engine;
-        this._interactors = this._engine.plugins.getInteractors(this.container, true);
+        this._interactors = engine.getInteractors(this.container, true);
         this._externalInteractors = [];
         this._particleInteractors = [];
     }
     async externalInteract(delta) {
         for (const interactor of this._externalInteractors) {
-            if (interactor.isEnabled()) {
-                await interactor.interact(delta);
-            }
+            interactor.isEnabled() && (await interactor.interact(delta));
         }
     }
     handleClickMode(mode) {
         for (const interactor of this._externalInteractors) {
-            if (interactor.handleClickMode) {
-                interactor.handleClickMode(mode);
-            }
+            interactor.handleClickMode && interactor.handleClickMode(mode);
         }
     }
     init() {
@@ -40,21 +36,15 @@ export class InteractionManager {
             interactor.clear(particle, delta);
         }
         for (const interactor of this._particleInteractors) {
-            if (interactor.isEnabled(particle)) {
-                await interactor.interact(particle, delta);
-            }
+            interactor.isEnabled(particle) && (await interactor.interact(particle, delta));
         }
     }
     async reset(particle) {
         for (const interactor of this._externalInteractors) {
-            if (interactor.isEnabled()) {
-                await interactor.reset(particle);
-            }
+            interactor.isEnabled() && interactor.reset(particle);
         }
         for (const interactor of this._particleInteractors) {
-            if (interactor.isEnabled(particle)) {
-                await interactor.reset(particle);
-            }
+            interactor.isEnabled(particle) && interactor.reset(particle);
         }
     }
 }