@tsparticles/engine 3.9.1 → 4.0.0-alpha.0

package/umd/Core/Canvas.js

@@ -24,34 +24,28 @@
         if (!style) {
             return;
         }
-        const element = canvas;
-        if (!element) {
-            return;
-        }
-        const elementStyle = element.style;
-        if (!elementStyle) {
-            return;
-        }
-        const keys = new Set();
-        for (const key in elementStyle) {
-            if (!Object.prototype.hasOwnProperty.call(elementStyle, key)) {
+        const element = canvas, elementStyle = element.style, keys = new Set();
+        for (let i = 0; i < elementStyle.length; i++) {
+            const key = elementStyle.item(i);
+            if (!key) {
                 continue;
             }
-            keys.add(elementStyle[key]);
+            keys.add(key);
         }
-        for (const key in style) {
-            if (!Object.prototype.hasOwnProperty.call(style, key)) {
+        for (let i = 0; i < style.length; i++) {
+            const key = style.item(i);
+            if (!key) {
                 continue;
             }
-            keys.add(style[key]);
+            keys.add(key);
         }
         for (const key of keys) {
             const value = style.getPropertyValue(key);
-            if (!value) {
-                elementStyle.removeProperty(key);
+            if (value) {
+                elementStyle.setProperty(key, value, important ? "important" : "");
             }
             else {
-                elementStyle.setProperty(key, value, important ? "important" : "");
+                elementStyle.removeProperty(key);
             }
         }
     }
@@ -103,38 +97,6 @@
                 }
                 return [fColor, sColor];
             };
-            this._initCover = async () => {
-                const options = this.container.actualOptions, cover = options.backgroundMask.cover, color = cover.color;
-                if (color) {
-                    const coverRgb = (0, ColorUtils_js_1.rangeColorToRgb)(this._engine, color);
-                    if (coverRgb) {
-                        const coverColor = {
-                            ...coverRgb,
-                            a: cover.opacity,
-                        };
-                        this._coverColorStyle = (0, ColorUtils_js_1.getStyleFromRgb)(coverColor, coverColor.a);
-                    }
-                }
-                else {
-                    await new Promise((resolve, reject) => {
-                        if (!cover.image) {
-                            return;
-                        }
-                        const img = document.createElement("img");
-                        img.addEventListener("load", () => {
-                            this._coverImage = {
-                                image: img,
-                                opacity: cover.opacity,
-                            };
-                            resolve();
-                        });
-                        img.addEventListener("error", evt => {
-                            reject(evt.error);
-                        });
-                        img.src = cover.image;
-                    });
-                }
-            };
             this._initStyle = () => {
                 const element = this.element, options = this.container.actualOptions;
                 if (!element) {
@@ -147,7 +109,7 @@
                     this._resetOriginalStyle();
                 }
                 for (const key in options.style) {
-                    if (!key || !options.style || !Object.prototype.hasOwnProperty.call(options.style, key)) {
+                    if (!key || !Object.prototype.hasOwnProperty.call(options.style, key)) {
                         continue;
                     }
                     const value = options.style[key];
@@ -157,63 +119,21 @@
                     element.style.setProperty(key, value, "important");
                 }
             };
-            this._initTrail = async () => {
-                const options = this.container.actualOptions, trail = options.particles.move.trail, trailFill = trail.fill;
-                if (!trail.enable) {
-                    return;
-                }
-                const opacity = Constants_js_1.inverseFactorNumerator / trail.length;
-                if (trailFill.color) {
-                    const fillColor = (0, ColorUtils_js_1.rangeColorToRgb)(this._engine, trailFill.color);
-                    if (!fillColor) {
-                        return;
-                    }
-                    this._trailFill = {
-                        color: {
-                            ...fillColor,
-                        },
-                        opacity,
-                    };
-                }
-                else {
-                    await new Promise((resolve, reject) => {
-                        if (!trailFill.image) {
-                            return;
-                        }
-                        const img = document.createElement("img");
-                        img.addEventListener("load", () => {
-                            this._trailFill = {
-                                image: img,
-                                opacity,
-                            };
-                            resolve();
-                        });
-                        img.addEventListener("error", evt => {
-                            reject(evt.error);
-                        });
-                        img.src = trailFill.image;
-                    });
-                }
-            };
-            this._paintBase = baseColor => {
-                this.draw(ctx => (0, CanvasUtils_js_1.paintBase)(ctx, this.size, baseColor));
-            };
-            this._paintImage = (image, opacity) => {
-                this.draw(ctx => (0, CanvasUtils_js_1.paintImage)(ctx, this.size, image, opacity));
-            };
             this._repairStyle = () => {
                 const element = this.element;
                 if (!element) {
                     return;
                 }
-                this._safeMutationObserver(observer => observer.disconnect());
+                this._safeMutationObserver(observer => {
+                    observer.disconnect();
+                });
                 this._initStyle();
                 this.initBackground();
                 const pointerEvents = this._pointerEvents;
                 element.style.pointerEvents = pointerEvents;
                 element.setAttribute("pointer-events", pointerEvents);
                 this._safeMutationObserver(observer => {
-                    if (!element || !(element instanceof Node)) {
+                    if (!(element instanceof Node)) {
                         return;
                     }
                     observer.observe(element, { attributes: true });
@@ -260,24 +180,30 @@
         get _fullScreen() {
             return this.container.actualOptions.fullScreen.enable;
         }
-        clear() {
-            const options = this.container.actualOptions, trail = options.particles.move.trail, trailFill = this._trailFill;
-            if (options.backgroundMask.enable) {
-                this.paint();
+        canvasClear() {
+            if (!this.container.actualOptions.clear) {
+                return;
             }
-            else if (trail.enable && trail.length > Constants_js_1.minimumLength && trailFill) {
-                if (trailFill.color) {
-                    this._paintBase((0, ColorUtils_js_1.getStyleFromRgb)(trailFill.color, trailFill.opacity));
-                }
-                else if (trailFill.image) {
-                    this._paintImage(trailFill.image, trailFill.opacity);
+            this.draw(ctx => {
+                (0, CanvasUtils_js_1.clear)(ctx, this.size);
+            });
+        }
+        clear() {
+            let pluginHandled = false;
+            for (const plugin of this.container.plugins.values()) {
+                if (!pluginHandled && plugin.canvasClear) {
+                    pluginHandled = plugin.canvasClear();
                 }
             }
-            else if (options.clear) {
-                this.draw(ctx => {
-                    (0, CanvasUtils_js_1.clear)(ctx, this.size);
-                });
+            if (pluginHandled) {
+                return;
             }
+            this.canvasClear();
+        }
+        clearDrawPlugin(plugin, delta) {
+            this.draw(ctx => {
+                (0, CanvasUtils_js_1.clearDrawPlugin)(ctx, plugin, delta);
+            });
         }
         destroy() {
             this.stop();
@@ -301,13 +227,6 @@
             }
             return cb(ctx);
         }
-        drawAsync(cb) {
-            const ctx = this._context;
-            if (!ctx) {
-                return undefined;
-            }
-            return cb(ctx);
-        }
         drawParticle(particle, delta) {
             if (particle.spawning || particle.destroyed) {
                 return;
@@ -318,45 +237,68 @@
             }
             const pfColor = particle.getFillColor(), psColor = particle.getStrokeColor() ?? pfColor;
             let [fColor, sColor] = this._getPluginParticleColors(particle);
-            if (!fColor) {
-                fColor = pfColor;
-            }
-            if (!sColor) {
-                sColor = psColor;
-            }
+            fColor ??= pfColor;
+            sColor ??= psColor;
             if (!fColor && !sColor) {
                 return;
             }
-            this.draw((ctx) => {
-                const container = this.container, options = container.actualOptions, zIndexOptions = particle.options.zIndex, zIndexFactor = Constants_js_1.zIndexFactorOffset - particle.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = particle.bubble.opacity ?? particle.opacity?.value ?? Constants_js_1.defaultOpacity, strokeOpacity = particle.strokeOpacity ?? opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor, transform = {}, colorStyles = {
-                    fill: fColor ? (0, ColorUtils_js_1.getStyleFromHsl)(fColor, zOpacity) : undefined,
-                };
-                colorStyles.stroke = sColor ? (0, ColorUtils_js_1.getStyleFromHsl)(sColor, zStrokeOpacity) : colorStyles.fill;
-                this._applyPreDrawUpdaters(ctx, particle, radius, zOpacity, colorStyles, transform);
+            const container = this.container, zIndexOptions = particle.options.zIndex, zIndexFactor = Constants_js_1.zIndexFactorOffset - particle.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = particle.bubble.opacity ?? particle.opacity?.value ?? Constants_js_1.defaultOpacity, strokeOpacity = particle.strokeOpacity ?? opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor, transform = {}, getFillStyle = () => {
+                if (!fColor) {
+                    return;
+                }
+                return (0, ColorUtils_js_1.getStyleFromHsl)(fColor, container.hdr, zOpacity);
+            }, colorStyles = {
+                fill: getFillStyle(),
+            }, getStrokestyle = () => {
+                if (!sColor) {
+                    return colorStyles.fill;
+                }
+                return (0, ColorUtils_js_1.getStyleFromHsl)(sColor, container.hdr, zStrokeOpacity);
+            };
+            colorStyles.stroke = getStrokestyle();
+            this.draw((context) => {
+                this._applyPreDrawUpdaters(context, particle, radius, zOpacity, colorStyles, transform);
                 (0, CanvasUtils_js_1.drawParticle)({
                     container,
-                    context: ctx,
+                    context,
                     particle,
                     delta,
                     colorStyles,
-                    backgroundMask: options.backgroundMask.enable,
-                    composite: options.backgroundMask.composite,
                     radius: radius * zIndexFactor ** zIndexOptions.sizeRate,
                     opacity: zOpacity,
-                    shadow: particle.options.shadow,
                     transform,
                 });
-                this._applyPostDrawUpdaters(particle);
             });
+            this._applyPostDrawUpdaters(particle);
         }
         drawParticlePlugin(plugin, particle, delta) {
-            this.draw(ctx => (0, CanvasUtils_js_1.drawParticlePlugin)(ctx, plugin, particle, delta));
+            this.draw(ctx => {
+                (0, CanvasUtils_js_1.drawParticlePlugin)(ctx, plugin, particle, delta);
+            });
+        }
+        drawParticles(delta) {
+            const { particles, plugins } = this.container;
+            this.clear();
+            particles.update(delta);
+            for (const plugin of plugins.values()) {
+                this.drawPlugin(plugin, delta);
+            }
+            this.draw(() => {
+                particles.drawParticles(delta);
+            });
+            for (const plugin of plugins.values()) {
+                this.clearDrawPlugin(plugin, delta);
+            }
         }
         drawPlugin(plugin, delta) {
-            this.draw(ctx => (0, CanvasUtils_js_1.drawPlugin)(ctx, plugin, delta));
+            this.draw(ctx => {
+                (0, CanvasUtils_js_1.drawPlugin)(ctx, plugin, delta);
+            });
         }
-        async init() {
-            this._safeMutationObserver(obs => obs.disconnect());
+        init() {
+            this._safeMutationObserver(obs => {
+                obs.disconnect();
+            });
             this._mutationObserver = (0, Utils_js_1.safeMutationObserver)(records => {
                 for (const record of records) {
                     if (record.type === "attributes" && record.attributeName === "style") {
@@ -366,13 +308,6 @@
             });
             this.resize();
             this._initStyle();
-            await this._initCover();
-            try {
-                await this._initTrail();
-            }
-            catch (e) {
-                (0, Utils_js_1.getLogger)().error(e);
-            }
             this.initBackground();
             this._safeMutationObserver(obs => {
                 if (!this.element || !(this.element instanceof Node)) {
@@ -385,17 +320,13 @@
             this.paint();
         }
         initBackground() {
-            const options = this.container.actualOptions, background = options.background, element = this.element;
+            const { container } = this, options = container.actualOptions, background = options.background, element = this.element;
             if (!element) {
                 return;
             }
-            const elementStyle = element.style;
-            if (!elementStyle) {
-                return;
-            }
-            if (background.color) {
-                const color = (0, ColorUtils_js_1.rangeColorToRgb)(this._engine, background.color);
-                elementStyle.backgroundColor = color ? (0, ColorUtils_js_1.getStyleFromRgb)(color, background.opacity) : "";
+            const elementStyle = element.style, color = (0, ColorUtils_js_1.rangeColorToRgb)(this._engine, background.color);
+            if (color) {
+                elementStyle.backgroundColor = (0, ColorUtils_js_1.getStyleFromRgb)(color, container.hdr, background.opacity);
             }
             else {
                 elementStyle.backgroundColor = "";
@@ -432,10 +363,9 @@
             if (this._generated && this.element) {
                 this.element.remove();
             }
+            const container = this.container;
             this._generated =
-                canvas.dataset && Constants_js_1.generatedAttribute in canvas.dataset
-                    ? canvas.dataset[Constants_js_1.generatedAttribute] === "true"
-                    : this._generated;
+                Constants_js_1.generatedAttribute in canvas.dataset ? canvas.dataset[Constants_js_1.generatedAttribute] === "true" : this._generated;
             this.element = canvas;
             this.element.ariaHidden = "true";
             this._originalStyle = (0, Utils_js_1.cloneStyle)(this.element.style);
@@ -445,9 +375,17 @@
             const pxRatio = this.container.retina.pixelRatio, retinaSize = this.size;
             canvas.height = retinaSize.height = standardSize.height * pxRatio;
             canvas.width = retinaSize.width = standardSize.width * pxRatio;
-            this._context = this.element.getContext("2d");
-            this._safeMutationObserver(obs => obs.disconnect());
-            this.container.retina.init();
+            const canSupportHdrQuery = (0, Utils_js_1.safeMatchMedia)("(color-gamut: p3)");
+            this._context = this.element.getContext("2d", {
+                alpha: true,
+                colorSpace: canSupportHdrQuery?.matches && container.hdr ? "display-p3" : "srgb",
+                desynchronized: true,
+                willReadFrequently: false,
+            });
+            this._safeMutationObserver(obs => {
+                obs.disconnect();
+            });
+            container.retina.init();
             this.initBackground();
             this._safeMutationObserver(obs => {
                 if (!this.element || !(this.element instanceof Node)) {
@@ -457,23 +395,26 @@
             });
         }
         paint() {
-            const options = this.container.actualOptions;
-            this.draw(ctx => {
-                if (options.backgroundMask.enable && options.backgroundMask.cover) {
-                    (0, CanvasUtils_js_1.clear)(ctx, this.size);
-                    if (this._coverImage) {
-                        this._paintImage(this._coverImage.image, this._coverImage.opacity);
-                    }
-                    else if (this._coverColorStyle) {
-                        this._paintBase(this._coverColorStyle);
-                    }
-                    else {
-                        this._paintBase();
-                    }
-                }
-                else {
-                    this._paintBase();
+            let handled = false;
+            for (const plugin of this.container.plugins.values()) {
+                if (handled) {
+                    break;
                 }
+                handled = plugin.canvasPaint?.() ?? false;
+            }
+            if (handled) {
+                return;
+            }
+            this.paintBase();
+        }
+        paintBase(baseColor) {
+            this.draw(ctx => {
+                (0, CanvasUtils_js_1.paintBase)(ctx, this.size, baseColor);
+            });
+        }
+        paintImage(image, opacity) {
+            this.draw(ctx => {
+                (0, CanvasUtils_js_1.paintImage)(ctx, this.size, image, opacity);
             });
         }
         resize() {
@@ -516,9 +457,13 @@
             this._repairStyle();
         }
         stop() {
-            this._safeMutationObserver(obs => obs.disconnect());
+            this._safeMutationObserver(obs => {
+                obs.disconnect();
+            });
             this._mutationObserver = undefined;
-            this.draw(ctx => (0, CanvasUtils_js_1.clear)(ctx, this.size));
+            this.draw(ctx => {
+                (0, CanvasUtils_js_1.clear)(ctx, this.size);
+            });
         }
         async windowResize() {
             if (!this.element || !this.resize()) {

package/umd/Core/Container.js

@@ -4,24 +4,25 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../Utils/NumberUtils.js", "./Utils/Constants.js", "../Utils/Utils.js", "./Canvas.js", "./Utils/EventListeners.js", "../Enums/Types/EventType.js", "../Options/Classes/Options.js", "./Particles.js", "./Retina.js", "../Utils/OptionsUtils.js"], factory);
+        define(["require", "exports", "../Utils/MathUtils.js", "./Utils/Constants.js", "./Canvas.js", "./Utils/EventListeners.js", "../Enums/Types/EventType.js", "../Options/Classes/Options.js", "./Particles.js", "./Retina.js", "../Utils/LogUtils.js", "../Utils/OptionsUtils.js", "../Utils/Utils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Container = void 0;
-    const NumberUtils_js_1 = require("../Utils/NumberUtils.js");
+    const MathUtils_js_1 = require("../Utils/MathUtils.js");
     const Constants_js_1 = require("./Utils/Constants.js");
-    const Utils_js_1 = require("../Utils/Utils.js");
     const Canvas_js_1 = require("./Canvas.js");
     const EventListeners_js_1 = require("./Utils/EventListeners.js");
     const EventType_js_1 = require("../Enums/Types/EventType.js");
     const Options_js_1 = require("../Options/Classes/Options.js");
     const Particles_js_1 = require("./Particles.js");
     const Retina_js_1 = require("./Retina.js");
+    const LogUtils_js_1 = require("../Utils/LogUtils.js");
     const OptionsUtils_js_1 = require("../Utils/OptionsUtils.js");
+    const Utils_js_1 = require("../Utils/Utils.js");
     function guardCheck(container) {
-        return container && !container.destroyed;
+        return !container.destroyed;
     }
     function initDelta(value, fpsLimit = Constants_js_1.defaultFps, smooth = false) {
         return {
@@ -45,7 +46,7 @@
                         continue;
                     }
                     if (entry.isIntersecting) {
-                        void this.play();
+                        this.play();
                     }
                     else {
                         this.pause();
@@ -68,7 +69,7 @@
                         this.draw(false);
                         return;
                     }
-                    this.particles.draw(delta);
+                    this.canvas.drawParticles(delta);
                     if (!this.alive()) {
                         this.destroy();
                         return;
@@ -78,12 +79,13 @@
                     }
                 }
                 catch (e) {
-                    (0, Utils_js_1.getLogger)().error(`${Constants_js_1.errorPrefix} in animation loop`, e);
+                    (0, LogUtils_js_1.getLogger)().error("error in animation loop", e);
                 }
             };
             this._engine = engine;
             this.id = Symbol(id);
             this.fpsLimit = 120;
+            this.hdr = false;
             this._smooth = false;
             this._delay = 0;
             this._duration = 0;
@@ -114,7 +116,9 @@
             this._options = loadContainerOptions(this._engine, this);
             this.actualOptions = loadContainerOptions(this._engine, this);
             this._eventListeners = new EventListeners_js_1.EventListeners(this);
-            this._intersectionObserver = (0, Utils_js_1.safeIntersectionObserver)(entries => this._intersectionManager(entries));
+            this._intersectionObserver = (0, Utils_js_1.safeIntersectionObserver)(entries => {
+                this._intersectionManager(entries);
+            });
             this._engine.dispatchEvent(EventType_js_1.EventType.containerBuilt, { container: this });
         }
         get animationStatus() {
@@ -168,13 +172,9 @@
                     return;
                 }
                 if (touched && !touchMoved) {
-                    const touchEvent = e;
-                    let lastTouch = touchEvent.touches[touchEvent.touches.length - Constants_js_1.touchEndLengthOffset];
+                    const touchEvent = e, lastTouch = touchEvent.touches[touchEvent.touches.length - Constants_js_1.touchEndLengthOffset];
                     if (!lastTouch) {
-                        lastTouch = touchEvent.changedTouches[touchEvent.changedTouches.length - Constants_js_1.touchEndLengthOffset];
-                        if (!lastTouch) {
-                            return;
-                        }
+                        return;
                     }
                     const element = this.canvas.element, canvasRect = element ? element.getBoundingClientRect() : undefined, pos = {
                         x: lastTouch.clientX - (canvasRect ? canvasRect.left : Constants_js_1.minCoordinate),
@@ -265,7 +265,9 @@
                 }
                 this._nextFrame(timestamp);
             };
-            this._drawAnimationFrame = (0, NumberUtils_js_1.animate)(timestamp => frame(timestamp));
+            this._drawAnimationFrame = (0, MathUtils_js_1.animate)(timestamp => {
+                frame(timestamp);
+            });
         }
         async export(type, options = {}) {
             for (const plugin of this.plugins.values()) {
@@ -278,7 +280,8 @@
                 }
                 return res.blob;
             }
-            (0, Utils_js_1.getLogger)().error(`${Constants_js_1.errorPrefix} - Export plugin with type ${type} not found`);
+            (0, LogUtils_js_1.getLogger)().error(`Export plugin with type ${type} not found`);
+            return undefined;
         }
         handleClickMode(mode) {
             if (!guardCheck(this)) {
@@ -315,14 +318,15 @@
                 this.plugins.set(id, plugin);
             }
             this.retina.init();
-            await this.canvas.init();
+            this.canvas.init();
             this.updateActualOptions();
             this.canvas.initBackground();
             this.canvas.resize();
-            const { zLayers, duration, delay, fpsLimit, smooth } = this.actualOptions;
+            const { delay, duration, fpsLimit, hdr, smooth, zLayers } = this.actualOptions;
+            this.hdr = hdr;
             this.zLayers = zLayers;
-            this._duration = (0, NumberUtils_js_1.getRangeValue)(duration) * Constants_js_1.millisecondsToSeconds;
-            this._delay = (0, NumberUtils_js_1.getRangeValue)(delay) * Constants_js_1.millisecondsToSeconds;
+            this._duration = (0, MathUtils_js_1.getRangeValue)(duration) * Constants_js_1.millisecondsToSeconds;
+            this._delay = (0, MathUtils_js_1.getRangeValue)(delay) * Constants_js_1.millisecondsToSeconds;
             this._lifeTime = 0;
             this.fpsLimit = fpsLimit > Constants_js_1.minFpsLimit ? fpsLimit : Constants_js_1.defaultFpsLimit;
             this._smooth = smooth;
@@ -355,7 +359,7 @@
                 return;
             }
             if (this._drawAnimationFrame !== undefined) {
-                (0, NumberUtils_js_1.cancelAnimation)(this._drawAnimationFrame);
+                (0, MathUtils_js_1.cancelAnimation)(this._drawAnimationFrame);
                 delete this._drawAnimationFrame;
             }
             if (this._paused) {