@tsparticles/engine 4.0.0-alpha.0 → 4.0.0-alpha.14

package/browser/Core/Utils/EventListeners.js

@@ -1,320 +1,16 @@
-import { double, lengthOffset, millisecondsToSeconds, mouseDownEvent, mouseLeaveEvent, mouseMoveEvent, mouseOutEvent, mouseUpEvent, resizeEvent, touchCancelEvent, touchDelay, touchEndEvent, touchMoveEvent, touchStartEvent, visibilityChangeEvent, } from "./Constants.js";
-import { executeOnSingleOrMultiple, safeDocument, safeMatchMedia } from "../../Utils/Utils.js";
-import { InteractivityDetect } from "../../Enums/InteractivityDetect.js";
-import { isBoolean } from "../../Utils/TypeUtils.js";
-function manageListener(element, event, handler, add, options) {
-    if (add) {
-        let addOptions = { passive: true };
-        if (isBoolean(options)) {
-            addOptions.capture = options;
-        }
-        else if (options !== undefined) {
-            addOptions = options;
-        }
-        element.addEventListener(event, handler, addOptions);
-    }
-    else {
-        const removeOptions = options;
-        element.removeEventListener(event, handler, removeOptions);
-    }
-}
+import { manageListener, safeDocument } from "../../Utils/Utils.js";
+import { millisecondsToSeconds, resizeEvent, visibilityChangeEvent } from "./Constants.js";
 export class EventListeners {
+    container;
+    _handlers;
+    _resizeObserver;
+    _resizeTimeout;
     constructor(container) {
         this.container = container;
-        this._canPush = true;
-        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 = Date.now();
-                const onClick = options.interactivity.events.onClick;
-                executeOnSingleOrMultiple(onClick.mode, mode => {
-                    this.container.handleClickMode(mode);
-                });
-            }
-            if (e.type === "touchend") {
-                setTimeout(() => {
-                    this._mouseTouchFinish();
-                }, touchDelay);
-            }
-        };
-        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?.default.auto) {
-                void container.loadTheme(themeName);
-            }
-        };
-        this._handleVisibilityChange = () => {
-            const container = this.container, options = container.actualOptions;
-            this._mouseTouchFinish();
-            if (!options.pauseOnBlur) {
-                return;
-            }
-            if (safeDocument().hidden) {
-                container.pageHidden = true;
-                container.pause();
-            }
-            else {
-                container.pageHidden = false;
-                if (container.animationStatus) {
-                    container.play(true);
-                }
-                else {
-                    container.draw(true);
-                }
-            }
-        };
-        this._handleWindowResize = () => {
-            if (this._resizeTimeout) {
-                clearTimeout(this._resizeTimeout);
-                delete this._resizeTimeout;
-            }
-            const handleResize = async () => {
-                const canvas = this.container.canvas;
-                await canvas.windowResize();
-            };
-            this._resizeTimeout = setTimeout(() => void handleResize(), this.container.actualOptions.interactivity.events.resize.delay * millisecondsToSeconds);
-        };
-        this._manageInteractivityListeners = (mouseLeaveTmpEvent, add) => {
-            const handlers = this._handlers, container = this.container, options = container.actualOptions, interactivityEl = container.interactivity.element;
-            if (!interactivityEl) {
-                return;
-            }
-            const html = interactivityEl, canvas = container.canvas;
-            canvas.setPointerEvents(html === canvas.element ? "initial" : "none");
-            if (!(options.interactivity.events.onHover.enable || options.interactivity.events.onClick.enable)) {
-                return;
-            }
-            manageListener(interactivityEl, mouseMoveEvent, handlers.mouseMove, add);
-            manageListener(interactivityEl, touchStartEvent, handlers.touchStart, add);
-            manageListener(interactivityEl, touchMoveEvent, handlers.touchMove, add);
-            if (options.interactivity.events.onClick.enable) {
-                manageListener(interactivityEl, touchEndEvent, handlers.touchEndClick, add);
-                manageListener(interactivityEl, mouseUpEvent, handlers.mouseUp, add);
-                manageListener(interactivityEl, mouseDownEvent, handlers.mouseDown, add);
-            }
-            else {
-                manageListener(interactivityEl, touchEndEvent, handlers.touchEnd, add);
-            }
-            manageListener(interactivityEl, mouseLeaveTmpEvent, handlers.mouseLeave, add);
-            manageListener(interactivityEl, touchCancelEvent, handlers.touchCancel, add);
-        };
-        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 === InteractivityDetect.window) {
-                container.interactivity.element = window;
-                mouseLeaveTmpEvent = mouseOutEvent;
-            }
-            else if (detectType === InteractivityDetect.parent && canvasEl) {
-                container.interactivity.element = canvasEl.parentElement ?? canvasEl.parentNode;
-            }
-            else {
-                container.interactivity.element = canvasEl;
-            }
-            this._manageMediaMatch(add);
-            this._manageResize(add);
-            this._manageInteractivityListeners(mouseLeaveTmpEvent, add);
-            manageListener(document, visibilityChangeEvent, handlers.visibilityChange, add, false);
-        };
-        this._manageMediaMatch = add => {
-            const handlers = this._handlers;
-            if (!this._matchMedia) {
-                return;
-            }
-            manageListener(this._matchMedia, "change", handlers.themeChange, add);
-        };
-        this._manageResize = add => {
-            const handlers = this._handlers, container = this.container, options = container.actualOptions;
-            if (!options.interactivity.events.resize.enable) {
-                return;
-            }
-            if (typeof ResizeObserver === "undefined") {
-                manageListener(globalThis, resizeEvent, handlers.resize, add);
-                return;
-            }
-            const canvasEl = container.canvas.element;
-            if (this._resizeObserver && !add) {
-                if (canvasEl) {
-                    this._resizeObserver.unobserve(canvasEl);
-                }
-                this._resizeObserver.disconnect();
-                delete this._resizeObserver;
-            }
-            else if (!this._resizeObserver && add && canvasEl) {
-                this._resizeObserver = new ResizeObserver((entries) => {
-                    const entry = entries.find(e => e.target === canvasEl);
-                    if (!entry) {
-                        return;
-                    }
-                    this._handleWindowResize();
-                });
-                this._resizeObserver.observe(canvasEl);
-            }
-        };
-        this._mouseDown = () => {
-            const { interactivity } = this.container, { mouse } = interactivity;
-            mouse.clicking = true;
-            mouse.downPosition = mouse.position;
-        };
-        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;
-            }
-            for (const plugin of container.plugins.values()) {
-                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, { mouse } = interactivity;
-            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.element) {
-                return;
-            }
-            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 === InteractivityDetect.parent) {
-                    const source = mouseEvent.target, target = mouseEvent.currentTarget;
-                    if (canvasEl) {
-                        const sourceRect = source.getBoundingClientRect(), targetRect = target.getBoundingClientRect(), canvasRect = canvasEl.getBoundingClientRect();
-                        pos = {
-                            x: mouseEvent.offsetX + double * sourceRect.left - (targetRect.left + canvasRect.left),
-                            y: mouseEvent.offsetY + double * sourceRect.top - (targetRect.top + canvasRect.top),
-                        };
-                    }
-                    else {
-                        pos = {
-                            x: mouseEvent.offsetX,
-                            y: mouseEvent.offsetY,
-                        };
-                    }
-                }
-                else if (mouseEvent.target === canvasEl) {
-                    pos = {
-                        x: mouseEvent.offsetX,
-                        y: mouseEvent.offsetY,
-                    };
-                }
-            }
-            else {
-                this._canPush = e.type !== "touchmove";
-                if (canvasEl) {
-                    const touchEvent = e, lastTouch = touchEvent.touches[touchEvent.touches.length - lengthOffset], canvasRect = canvasEl.getBoundingClientRect();
-                    if (!lastTouch) {
-                        return;
-                    }
-                    pos = {
-                        x: lastTouch.clientX - canvasRect.left,
-                        y: lastTouch.clientY - canvasRect.top,
-                    };
-                }
-            }
-            const pxRatio = container.retina.pixelRatio;
-            if (pos) {
-                pos.x *= pxRatio;
-                pos.y *= pxRatio;
-            }
-            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._matchMedia = safeMatchMedia("(prefers-color-scheme: dark)");
-        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();
             },
@@ -326,4 +22,67 @@ export class EventListeners {
     removeListeners() {
         this._manageListeners(false);
     }
+    _handleVisibilityChange = () => {
+        const container = this.container, options = container.actualOptions;
+        if (!options.pauseOnBlur) {
+            return;
+        }
+        if (safeDocument().hidden) {
+            container.pageHidden = true;
+            container.pause();
+        }
+        else {
+            container.pageHidden = false;
+            if (container.animationStatus) {
+                container.play(true);
+            }
+            else {
+                container.draw(true);
+            }
+        }
+    };
+    _handleWindowResize = () => {
+        if (this._resizeTimeout) {
+            clearTimeout(this._resizeTimeout);
+            delete this._resizeTimeout;
+        }
+        const handleResize = async () => {
+            const canvas = this.container.canvas;
+            await canvas.windowResize();
+        };
+        this._resizeTimeout = setTimeout(() => void handleResize(), this.container.actualOptions.resize.delay * millisecondsToSeconds);
+    };
+    _manageListeners = add => {
+        const handlers = this._handlers;
+        this._manageResize(add);
+        manageListener(document, visibilityChangeEvent, handlers.visibilityChange, add, false);
+    };
+    _manageResize = add => {
+        const handlers = this._handlers, container = this.container, options = container.actualOptions;
+        if (!options.resize.enable) {
+            return;
+        }
+        if (typeof ResizeObserver === "undefined") {
+            manageListener(globalThis, resizeEvent, handlers.resize, add);
+            return;
+        }
+        const canvasEl = container.canvas.element;
+        if (this._resizeObserver && !add) {
+            if (canvasEl) {
+                this._resizeObserver.unobserve(canvasEl);
+            }
+            this._resizeObserver.disconnect();
+            delete this._resizeObserver;
+        }
+        else if (!this._resizeObserver && add && canvasEl) {
+            this._resizeObserver = new ResizeObserver((entries) => {
+                const entry = entries.find(e => e.target === canvasEl);
+                if (!entry) {
+                    return;
+                }
+                this._handleWindowResize();
+            });
+            this._resizeObserver.observe(canvasEl);
+        }
+    };
 }

package/browser/Core/Utils/Point.js

@@ -1,4 +1,6 @@
 export class Point {
+    particle;
+    position;
     constructor(position, particle) {
         this.position = position;
         this.particle = particle;

package/browser/Core/Utils/QuadTree.js

@@ -2,17 +2,14 @@ import { Circle, Rectangle } from "./Ranges.js";
 import { double, half, subdivideCount } from "./Constants.js";
 import { getDistance } from "../../Utils/MathUtils.js";
 export class QuadTree {
+    rectangle;
+    capacity;
+    _divided;
+    _points;
+    _subs;
     constructor(rectangle, capacity) {
         this.rectangle = rectangle;
         this.capacity = capacity;
-        this._subdivide = () => {
-            const { x, y } = this.rectangle.position, { width, height } = this.rectangle.size, { capacity } = this;
-            for (let i = 0; i < subdivideCount; i++) {
-                const fixedIndex = i % double;
-                this._subs.push(new QuadTree(new Rectangle(x + width * half * fixedIndex, y + height * half * (Math.round(i * half) - fixedIndex), width * half, height * half), capacity));
-            }
-            this._divided = true;
-        };
         this._points = [];
         this._divided = false;
         this._subs = [];
@@ -56,4 +53,12 @@ export class QuadTree {
     queryRectangle(position, size, check) {
         return this.query(new Rectangle(position.x, position.y, size.width, size.height), check);
     }
+    _subdivide = () => {
+        const { x, y } = this.rectangle.position, { width, height } = this.rectangle.size, { capacity } = this;
+        for (let i = 0; i < subdivideCount; i++) {
+            const fixedIndex = i % double;
+            this._subs.push(new QuadTree(new Rectangle(x + width * half * fixedIndex, y + height * half * (Math.round(i * half) - fixedIndex), width * half, height * half), capacity));
+        }
+        this._divided = true;
+    };
 }

package/browser/Core/Utils/Ranges.js

@@ -2,6 +2,8 @@ import { RangeType } from "../../Enums/RangeType.js";
 import { getDistance } from "../../Utils/MathUtils.js";
 import { squareExp } from "./Constants.js";
 export class BaseRange {
+    position;
+    type;
     constructor(x, y, type) {
         this.position = {
             x: x,
@@ -11,6 +13,7 @@ export class BaseRange {
     }
 }
 export class Circle extends BaseRange {
+    radius;
     constructor(x, y, radius) {
         super(x, y, RangeType.circle);
         this.radius = radius;
@@ -35,6 +38,7 @@ export class Circle extends BaseRange {
     }
 }
 export class Rectangle extends BaseRange {
+    size;
     constructor(x, y, width, height) {
         super(x, y, RangeType.rectangle);
         this.size = {

package/browser/Core/Utils/Vectors.js

@@ -1,10 +1,9 @@
 import { inverseFactorNumerator, none, originPoint, squareExp } from "./Constants.js";
 export class Vector3d {
+    x;
+    y;
+    z;
     constructor(x = originPoint.x, y = originPoint.y, z = originPoint.z) {
-        this._updateFromAngle = (angle, length) => {
-            this.x = Math.cos(angle) * length;
-            this.y = Math.sin(angle) * length;
-        };
         this.x = x;
         this.y = y;
         this.z = z;
@@ -92,6 +91,10 @@ export class Vector3d {
         this.y -= v.y;
         this.z -= v.z;
     }
+    _updateFromAngle = (angle, length) => {
+        this.x = Math.cos(angle) * length;
+        this.y = Math.sin(angle) * length;
+    };
 }
 export class Vector extends Vector3d {
     constructor(x = originPoint.x, y = originPoint.y) {

package/browser/Enums/Types/EasingType.js

@@ -1,30 +1,45 @@
 export var EasingType;
 (function (EasingType) {
     EasingType["easeInBack"] = "ease-in-back";
+    EasingType["easeInBounce"] = "ease-in-bounce";
     EasingType["easeInCirc"] = "ease-in-circ";
     EasingType["easeInCubic"] = "ease-in-cubic";
+    EasingType["easeInElastic"] = "ease-in-elastic";
+    EasingType["easeInExpo"] = "ease-in-expo";
+    EasingType["easeInGaussian"] = "ease-in-gaussian";
     EasingType["easeInLinear"] = "ease-in-linear";
     EasingType["easeInQuad"] = "ease-in-quad";
     EasingType["easeInQuart"] = "ease-in-quart";
     EasingType["easeInQuint"] = "ease-in-quint";
-    EasingType["easeInExpo"] = "ease-in-expo";
+    EasingType["easeInSigmoid"] = "ease-in-sigmoid";
     EasingType["easeInSine"] = "ease-in-sine";
+    EasingType["easeInSmoothstep"] = "ease-in-smoothstep";
     EasingType["easeOutBack"] = "ease-out-back";
+    EasingType["easeOutBounce"] = "ease-out-bounce";
     EasingType["easeOutCirc"] = "ease-out-circ";
     EasingType["easeOutCubic"] = "ease-out-cubic";
+    EasingType["easeOutElastic"] = "ease-out-elastic";
+    EasingType["easeOutExpo"] = "ease-out-expo";
+    EasingType["easeOutGaussian"] = "ease-out-gaussian";
     EasingType["easeOutLinear"] = "ease-out-linear";
     EasingType["easeOutQuad"] = "ease-out-quad";
     EasingType["easeOutQuart"] = "ease-out-quart";
     EasingType["easeOutQuint"] = "ease-out-quint";
-    EasingType["easeOutExpo"] = "ease-out-expo";
+    EasingType["easeOutSigmoid"] = "ease-out-sigmoid";
     EasingType["easeOutSine"] = "ease-out-sine";
+    EasingType["easeOutSmoothstep"] = "ease-out-smoothstep";
     EasingType["easeInOutBack"] = "ease-in-out-back";
+    EasingType["easeInOutBounce"] = "ease-in-out-bounce";
     EasingType["easeInOutCirc"] = "ease-in-out-circ";
     EasingType["easeInOutCubic"] = "ease-in-out-cubic";
+    EasingType["easeInOutElastic"] = "ease-in-out-elastic";
+    EasingType["easeInOutExpo"] = "ease-in-out-expo";
+    EasingType["easeInOutGaussian"] = "ease-in-out-gaussian";
     EasingType["easeInOutLinear"] = "ease-in-out-linear";
     EasingType["easeInOutQuad"] = "ease-in-out-quad";
     EasingType["easeInOutQuart"] = "ease-in-out-quart";
     EasingType["easeInOutQuint"] = "ease-in-out-quint";
-    EasingType["easeInOutExpo"] = "ease-in-out-expo";
+    EasingType["easeInOutSigmoid"] = "ease-in-out-sigmoid";
     EasingType["easeInOutSine"] = "ease-in-out-sine";
+    EasingType["easeInOutSmoothstep"] = "ease-in-out-smoothstep";
 })(EasingType || (EasingType = {}));

package/browser/Options/Classes/AnimatableColor.js

@@ -2,6 +2,7 @@ import { isArray, isNull, isString } from "../../Utils/TypeUtils.js";
 import { HslAnimation } from "./HslAnimation.js";
 import { OptionsColor } from "./OptionsColor.js";
 export class AnimatableColor extends OptionsColor {
+    animation;
     constructor() {
         super();
         this.animation = new HslAnimation();

package/browser/Options/Classes/AnimationOptions.js

@@ -3,6 +3,12 @@ import { StartValueType } from "../../Enums/Types/StartValueType.js";
 import { isNull } from "../../Utils/TypeUtils.js";
 import { setRangeValue } from "../../Utils/MathUtils.js";
 export class AnimationOptions {
+    count;
+    decay;
+    delay;
+    enable;
+    speed;
+    sync;
     constructor() {
         this.count = 0;
         this.enable = false;
@@ -36,6 +42,8 @@ export class AnimationOptions {
     }
 }
 export class RangedAnimationOptions extends AnimationOptions {
+    mode;
+    startValue;
     constructor() {
         super();
         this.mode = AnimationMode.auto;

package/browser/Options/Classes/Background/Background.js

@@ -1,6 +1,12 @@
 import { OptionsColor } from "../OptionsColor.js";
 import { isNull } from "../../../Utils/TypeUtils.js";
 export class Background {
+    color;
+    image;
+    opacity;
+    position;
+    repeat;
+    size;
     constructor() {
         this.color = new OptionsColor();
         this.color.value = "";

package/browser/Options/Classes/ColorAnimation.js

@@ -2,6 +2,7 @@ import { AnimationOptions } from "./AnimationOptions.js";
 import { isNull } from "../../Utils/TypeUtils.js";
 import { setRangeValue } from "../../Utils/MathUtils.js";
 export class ColorAnimation extends AnimationOptions {
+    offset;
     constructor() {
         super();
         this.offset = 0;

package/browser/Options/Classes/FullScreen/FullScreen.js

@@ -1,5 +1,7 @@
 import { isNull } from "../../../Utils/TypeUtils.js";
 export class FullScreen {
+    enable;
+    zIndex;
     constructor() {
         this.enable = true;
         this.zIndex = 0;

package/browser/Options/Classes/HslAnimation.js

@@ -1,11 +1,9 @@
 import { ColorAnimation } from "./ColorAnimation.js";
 import { isNull } from "../../Utils/TypeUtils.js";
 export class HslAnimation {
-    constructor() {
-        this.h = new ColorAnimation();
-        this.s = new ColorAnimation();
-        this.l = new ColorAnimation();
-    }
+    h = new ColorAnimation();
+    l = new ColorAnimation();
+    s = new ColorAnimation();
     load(data) {
         if (isNull(data)) {
             return;