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

package/cjs/Core/Particles.js

@@ -30,10 +30,14 @@ class Particles {
     addManualParticles() {
         const container = this.container, options = container.actualOptions;
         for (const particle of options.manualParticles) {
-            this.addParticle((0, NumberUtils_1.calcPositionFromSize)({
-                size: container.canvas.size,
-                position: particle.position,
-            }), particle.options);
+            this.addParticle(particle.position
+                ? particle.position.mode === "precise"
+                    ? particle.position
+                    : (0, NumberUtils_1.calcPositionFromSize)({
+                        size: container.canvas.size,
+                        position: particle.position,
+                    })
+                : undefined, particle.options);
         }
     }
     addParticle(position, overrideOptions, group, initializer) {
@@ -130,22 +134,9 @@ class Particles {
         }
         let deleted = 0;
         for (let i = index; deleted < quantity && i < this.count; i++) {
-            const particle = this.array[i];
-            if (!particle || particle.group !== group) {
-                continue;
+            if (this._removeParticle(i--, group, override)) {
+                deleted++;
             }
-            particle.destroy(override);
-            this.array.splice(i--, 1);
-            const idx = this.zArray.indexOf(particle);
-            this.zArray.splice(idx, 1);
-            this.pool.push(particle);
-            deleted++;
-            this._engine.dispatchEvent("particleRemoved", {
-                container: this.container,
-                data: {
-                    particle,
-                },
-            });
         }
     }
     removeQuantity(quantity, group) {
@@ -262,5 +253,23 @@ class Particles {
             return;
         }
     }
+    _removeParticle(index, group, override) {
+        const particle = this.array[index];
+        if (!particle || particle.group !== group) {
+            return false;
+        }
+        particle.destroy(override);
+        this.array.splice(index, 1);
+        const zIdx = this.zArray.indexOf(particle);
+        this.zArray.splice(zIdx, 1);
+        this.pool.push(particle);
+        this._engine.dispatchEvent("particleRemoved", {
+            container: this.container,
+            data: {
+                particle,
+            },
+        });
+        return true;
+    }
 }
 exports.Particles = Particles;

package/cjs/Core/Utils/EventListeners.js

@@ -24,28 +24,28 @@ class EventListeners {
         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(),
+            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(),
         };
     }
     addListeners() {
-        this.manageListeners(true);
+        this._manageListeners(true);
     }
     removeListeners() {
-        this.manageListeners(false);
+        this._manageListeners(false);
     }
-    doMouseTouchClick(e) {
+    _doMouseTouchClick(e) {
         const container = this.container, options = container.actualOptions;
         if (this.canPush) {
             const mouseInteractivity = container.interactivity.mouse, mousePos = mouseInteractivity.position;
@@ -55,33 +55,32 @@ class EventListeners {
             mouseInteractivity.clickPosition = Object.assign({}, mousePos);
             mouseInteractivity.clickTime = new Date().getTime();
             const onClick = options.interactivity.events.onClick;
-            (0, Utils_1.executeOnSingleOrMultiple)(onClick.mode, (mode) => this.handleClickMode(mode));
+            (0, Utils_1.executeOnSingleOrMultiple)(onClick.mode, (mode) => this._handleClickMode(mode));
         }
         if (e.type === "touchend") {
-            setTimeout(() => this.mouseTouchFinish(), 500);
+            setTimeout(() => this._mouseTouchFinish(), 500);
         }
     }
-    handleClickMode(mode) {
+    _handleClickMode(mode) {
         this.container.handleClickMode(mode);
     }
-    handleThemeChange(e) {
+    _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() {
+    _handleVisibilityChange() {
         const container = this.container, options = container.actualOptions;
-        this.mouseTouchFinish();
+        this._mouseTouchFinish();
         if (!options.pauseOnBlur) {
             return;
         }
-        if (document === null || document === void 0 ? void 0 : document.hidden) {
-            container.pageHidden = true;
+        container.pageHidden = (document === null || document === void 0 ? void 0 : document.hidden) || false;
+        if (container.pageHidden) {
             container.pause();
         }
         else {
-            container.pageHidden = false;
             if (container.getAnimationStatus()) {
                 container.play(true);
             }
@@ -90,14 +89,14 @@ class EventListeners {
             }
         }
     }
-    handleWindowResize() {
+    _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);
     }
-    manageListeners(add) {
+    _manageInteractivityEvents(add) {
         var _a;
         const handlers = this.handlers, container = this.container, options = container.actualOptions, detectType = options.interactivity.detectsOn;
         let mouseLeaveTmpEvent = Constants_1.mouseLeaveEvent;
@@ -112,20 +111,6 @@ class EventListeners {
         else {
             container.interactivity.element = container.canvas.element;
         }
-        const mediaMatch = (0, Utils_1.safeMatchMedia)("(prefers-color-scheme: dark)");
-        if (mediaMatch) {
-            if (mediaMatch.addEventListener !== undefined) {
-                manageListener(mediaMatch, "change", handlers.themeChange, add);
-            }
-            else if (mediaMatch.addListener !== undefined) {
-                if (add) {
-                    mediaMatch.addListener(handlers.oldThemeChange);
-                }
-                else {
-                    mediaMatch.removeListener(handlers.oldThemeChange);
-                }
-            }
-        }
         const interactivityEl = container.interactivity.element;
         if (!interactivityEl) {
             return;
@@ -149,35 +134,65 @@ class EventListeners {
         if (container.canvas.element) {
             container.canvas.element.style.pointerEvents = html === container.canvas.element ? "initial" : "none";
         }
-        if (options.interactivity.events.resize) {
-            if (typeof ResizeObserver !== "undefined") {
-                if (this.resizeObserver && !add) {
-                    if (container.canvas.element) {
-                        this.resizeObserver.unobserve(container.canvas.element);
-                    }
-                    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;
-                        }
-                        this.handleWindowResize();
-                    });
-                    this.resizeObserver.observe(container.canvas.element);
-                }
+    }
+    _manageListeners(add) {
+        this._manageMediaEvents(add);
+        this._manageInteractivityEvents(add);
+        this._manageResizeEvent(add);
+        this._manageVisibilityEvent(add);
+    }
+    _manageMediaEvents(add) {
+        const handlers = this.handlers, mediaMatch = (0, Utils_1.safeMatchMedia)("(prefers-color-scheme: dark)");
+        if (!mediaMatch) {
+            return;
+        }
+        if (mediaMatch.addEventListener !== undefined) {
+            manageListener(mediaMatch, "change", handlers.themeChange, add);
+            return;
+        }
+        if (mediaMatch.addListener !== undefined) {
+            if (add) {
+                mediaMatch.addListener(handlers.oldThemeChange);
             }
             else {
-                manageListener(window, Constants_1.resizeEvent, handlers.resize, add);
+                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, Constants_1.resizeEvent, handlers.resize, add);
+            return;
+        }
+        if (this.resizeObserver && !add) {
+            if (container.canvas.element) {
+                this.resizeObserver.unobserve(container.canvas.element);
             }
+            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;
+                }
+                this._handleWindowResize();
+            });
+            this.resizeObserver.observe(container.canvas.element);
         }
-        if (document) {
-            manageListener(document, Constants_1.visibilityChangeEvent, handlers.visibilityChange, add, false);
+    }
+    _manageVisibilityEvent(add) {
+        if (!document) {
+            return;
         }
+        manageListener(document, Constants_1.visibilityChangeEvent, this.handlers.visibilityChange, add);
     }
-    mouseDown() {
+    _mouseDown() {
         const interactivity = this.container.interactivity;
         if (interactivity) {
             const mouse = interactivity.mouse;
@@ -185,7 +200,7 @@ class EventListeners {
             mouse.downPosition = mouse.position;
         }
     }
-    mouseTouchClick(e) {
+    _mouseTouchClick(e) {
         const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse;
         mouse.inside = true;
         let handled = false;
@@ -203,11 +218,11 @@ class EventListeners {
             }
         }
         if (!handled) {
-            this.doMouseTouchClick(e);
+            this._doMouseTouchClick(e);
         }
         mouse.clicking = false;
     }
-    mouseTouchFinish() {
+    _mouseTouchFinish() {
         const interactivity = this.container.interactivity;
         if (!interactivity) {
             return;
@@ -220,7 +235,7 @@ class EventListeners {
         mouse.inside = false;
         mouse.clicking = false;
     }
-    mouseTouchMove(e) {
+    _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)) {

package/cjs/Enums/Modes/AnimationMode.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/Options/Classes/AnimationOptions.js

@@ -35,6 +35,7 @@ exports.AnimationOptions = AnimationOptions;
 class RangedAnimationOptions extends AnimationOptions {
     constructor() {
         super();
+        this.mode = "auto";
         this.startValue = "random";
     }
     load(data) {
@@ -45,6 +46,9 @@ class RangedAnimationOptions extends AnimationOptions {
         if (data.minimumValue !== undefined) {
             this.minimumValue = data.minimumValue;
         }
+        if (data.mode !== undefined) {
+            this.mode = data.mode;
+        }
         if (data.startValue !== undefined) {
             this.startValue = data.startValue;
         }

package/cjs/Options/Classes/ManualParticle.js

@@ -4,7 +4,7 @@ exports.ManualParticle = void 0;
 const Utils_1 = require("../../Utils/Utils");
 class ManualParticle {
     load(data) {
-        var _a, _b;
+        var _a, _b, _c;
         if (!data) {
             return;
         }
@@ -12,6 +12,7 @@ class ManualParticle {
             this.position = {
                 x: (_a = data.position.x) !== null && _a !== void 0 ? _a : 50,
                 y: (_b = data.position.y) !== null && _b !== void 0 ? _b : 50,
+                mode: (_c = data.position.mode) !== null && _c !== void 0 ? _c : "percent",
             };
         }
         if (data.options !== undefined) {

package/cjs/Options/Classes/Particles/Shape/Shape.js

@@ -6,12 +6,20 @@ class Shape {
     constructor() {
         this.options = {};
         this.type = "circle";
+        this.close = true;
+        this.fill = true;
     }
     load(data) {
         var _a;
         if (!data) {
             return;
         }
+        if (data.close !== undefined) {
+            this.close = data.close;
+        }
+        if (data.fill !== undefined) {
+            this.fill = data.fill;
+        }
         const options = data.options;
         if (options !== undefined) {
             for (const shape in options) {

package/cjs/Utils/Utils.js

@@ -250,21 +250,41 @@ function initParticleNumericAnimationValue(options, pxRatio) {
         maxLoops: (0, NumberUtils_1.getRangeValue)(options.animation.count),
     };
     if (animationOptions.enable) {
-        res.status = "increasing";
         res.decay = 1 - (0, NumberUtils_1.getRangeValue)(animationOptions.decay);
+        let autoStatus = false;
+        switch (animationOptions.mode) {
+            case "increase":
+                res.status = "increasing";
+                break;
+            case "decrease":
+                res.status = "decreasing";
+                break;
+            case "random":
+                res.status = (0, NumberUtils_1.getRandom)() >= 0.5 ? "increasing" : "decreasing";
+                break;
+            case "auto":
+                autoStatus = true;
+                break;
+        }
         switch (animationOptions.startValue) {
             case "min":
                 res.value = res.min;
-                res.status = "increasing";
+                if (autoStatus) {
+                    res.status = "increasing";
+                }
                 break;
             case "random":
                 res.value = (0, NumberUtils_1.randomInRange)(res);
-                res.status = (0, NumberUtils_1.getRandom)() >= 0.5 ? "increasing" : "decreasing";
+                if (autoStatus) {
+                    res.status = (0, NumberUtils_1.getRandom)() >= 0.5 ? "increasing" : "decreasing";
+                }
                 break;
             case "max":
             default:
                 res.value = res.max;
-                res.status = "decreasing";
+                if (autoStatus) {
+                    res.status = "decreasing";
+                }
                 break;
         }
     }

package/cjs/bundle.js

@@ -36,6 +36,7 @@ __exportStar(require("./Core/Utils/Vector3d"), exports);
 __exportStar(require("./Enums/Directions/MoveDirection"), exports);
 __exportStar(require("./Enums/Directions/RotateDirection"), exports);
 __exportStar(require("./Enums/Directions/OutModeDirection"), exports);
+__exportStar(require("./Enums/Modes/AnimationMode"), exports);
 __exportStar(require("./Enums/Modes/ClickMode"), exports);
 __exportStar(require("./Enums/Modes/DivMode"), exports);
 __exportStar(require("./Enums/Modes/HoverMode"), exports);

package/cjs/index.js

@@ -71,6 +71,7 @@ __exportStar(require("./Core/Utils/Vector3d"), exports);
 __exportStar(require("./Enums/Directions/MoveDirection"), exports);
 __exportStar(require("./Enums/Directions/RotateDirection"), exports);
 __exportStar(require("./Enums/Directions/OutModeDirection"), exports);
+__exportStar(require("./Enums/Modes/AnimationMode"), exports);
 __exportStar(require("./Enums/Modes/ClickMode"), exports);
 __exportStar(require("./Enums/Modes/DivMode"), exports);
 __exportStar(require("./Enums/Modes/HoverMode"), exports);

package/esm/Core/Particle.js

@@ -301,7 +301,10 @@ export class Particle {
     _loadShapeData(shapeOptions, reduceDuplicates) {
         const shapeData = shapeOptions.options[this.shape];
         if (shapeData) {
-            return deepExtend({}, itemFromSingleOrMultiple(shapeData, this.id, reduceDuplicates));
+            return deepExtend({
+                close: shapeOptions.close,
+                fill: shapeOptions.fill,
+            }, itemFromSingleOrMultiple(shapeData, this.id, reduceDuplicates));
         }
     }
 }

package/esm/Core/Particles.js

@@ -27,10 +27,14 @@ export class Particles {
     addManualParticles() {
         const container = this.container, options = container.actualOptions;
         for (const particle of options.manualParticles) {
-            this.addParticle(calcPositionFromSize({
-                size: container.canvas.size,
-                position: particle.position,
-            }), particle.options);
+            this.addParticle(particle.position
+                ? particle.position.mode === "precise"
+                    ? particle.position
+                    : calcPositionFromSize({
+                        size: container.canvas.size,
+                        position: particle.position,
+                    })
+                : undefined, particle.options);
         }
     }
     addParticle(position, overrideOptions, group, initializer) {
@@ -127,22 +131,9 @@ export class Particles {
         }
         let deleted = 0;
         for (let i = index; deleted < quantity && i < this.count; i++) {
-            const particle = this.array[i];
-            if (!particle || particle.group !== group) {
-                continue;
+            if (this._removeParticle(i--, group, override)) {
+                deleted++;
             }
-            particle.destroy(override);
-            this.array.splice(i--, 1);
-            const idx = this.zArray.indexOf(particle);
-            this.zArray.splice(idx, 1);
-            this.pool.push(particle);
-            deleted++;
-            this._engine.dispatchEvent("particleRemoved", {
-                container: this.container,
-                data: {
-                    particle,
-                },
-            });
         }
     }
     removeQuantity(quantity, group) {
@@ -259,4 +250,22 @@ export class Particles {
             return;
         }
     }
+    _removeParticle(index, group, override) {
+        const particle = this.array[index];
+        if (!particle || particle.group !== group) {
+            return false;
+        }
+        particle.destroy(override);
+        this.array.splice(index, 1);
+        const zIdx = this.zArray.indexOf(particle);
+        this.zArray.splice(zIdx, 1);
+        this.pool.push(particle);
+        this._engine.dispatchEvent("particleRemoved", {
+            container: this.container,
+            data: {
+                particle,
+            },
+        });
+        return true;
+    }
 }