@tsparticles/engine 3.9.1 → 4.0.0-alpha.1

package/esm/Core/Canvas.js

@@ -1,6 +1,6 @@
-import { clear, drawParticle, drawParticlePlugin, drawPlugin, paintBase, paintImage } from "../Utils/CanvasUtils.js";
-import { cloneStyle, getFullScreenStyle, getLogger, safeMutationObserver } from "../Utils/Utils.js";
-import { defaultOpacity, defaultTransformValue, generatedAttribute, inverseFactorNumerator, minimumLength, minimumSize, zIndexFactorOffset, } from "./Utils/Constants.js";
+import { clear, clearDrawPlugin, drawParticle, drawParticlePlugin, drawPlugin, paintBase, paintImage, } from "../Utils/CanvasUtils.js";
+import { cloneStyle, getFullScreenStyle, safeMatchMedia, safeMutationObserver } from "../Utils/Utils.js";
+import { defaultOpacity, defaultTransformValue, generatedAttribute, minimumSize, zIndexFactorOffset, } from "./Utils/Constants.js";
 import { getStyleFromHsl, getStyleFromRgb, rangeColorToHsl, rangeColorToRgb } from "../Utils/ColorUtils.js";
 function setTransformValue(factor, newFactor, key) {
     const newValue = newFactor[key];
@@ -12,34 +12,28 @@ function setStyle(canvas, style, important = false) {
     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);
         }
     }
 }
@@ -91,38 +85,6 @@ export class Canvas {
             }
             return [fColor, sColor];
         };
-        this._initCover = async () => {
-            const options = this.container.actualOptions, cover = options.backgroundMask.cover, color = cover.color;
-            if (color) {
-                const coverRgb = rangeColorToRgb(this._engine, color);
-                if (coverRgb) {
-                    const coverColor = {
-                        ...coverRgb,
-                        a: cover.opacity,
-                    };
-                    this._coverColorStyle = 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) {
@@ -135,7 +97,7 @@ export class Canvas {
                 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];
@@ -145,63 +107,21 @@ export class Canvas {
                 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 = inverseFactorNumerator / trail.length;
-            if (trailFill.color) {
-                const fillColor = 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 => paintBase(ctx, this.size, baseColor));
-        };
-        this._paintImage = (image, opacity) => {
-            this.draw(ctx => 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 });
@@ -248,24 +168,30 @@ export class Canvas {
     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 > minimumLength && trailFill) {
-            if (trailFill.color) {
-                this._paintBase(getStyleFromRgb(trailFill.color, trailFill.opacity));
-            }
-            else if (trailFill.image) {
-                this._paintImage(trailFill.image, trailFill.opacity);
+        this.draw(ctx => {
+            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 => {
-                clear(ctx, this.size);
-            });
+        if (pluginHandled) {
+            return;
         }
+        this.canvasClear();
+    }
+    clearDrawPlugin(plugin, delta) {
+        this.draw(ctx => {
+            clearDrawPlugin(ctx, plugin, delta);
+        });
     }
     destroy() {
         this.stop();
@@ -289,13 +215,6 @@ export class Canvas {
         }
         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;
@@ -306,45 +225,68 @@ export class Canvas {
         }
         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 = zIndexFactorOffset - particle.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = particle.bubble.opacity ?? particle.opacity?.value ?? defaultOpacity, strokeOpacity = particle.strokeOpacity ?? opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor, transform = {}, colorStyles = {
-                fill: fColor ? getStyleFromHsl(fColor, zOpacity) : undefined,
-            };
-            colorStyles.stroke = sColor ? getStyleFromHsl(sColor, zStrokeOpacity) : colorStyles.fill;
-            this._applyPreDrawUpdaters(ctx, particle, radius, zOpacity, colorStyles, transform);
+        const container = this.container, zIndexOptions = particle.options.zIndex, zIndexFactor = zIndexFactorOffset - particle.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = particle.bubble.opacity ?? particle.opacity?.value ?? defaultOpacity, strokeOpacity = particle.strokeOpacity ?? opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor, transform = {}, getFillStyle = () => {
+            if (!fColor) {
+                return;
+            }
+            return getStyleFromHsl(fColor, container.hdr, zOpacity);
+        }, colorStyles = {
+            fill: getFillStyle(),
+        }, getStrokestyle = () => {
+            if (!sColor) {
+                return colorStyles.fill;
+            }
+            return getStyleFromHsl(sColor, container.hdr, zStrokeOpacity);
+        };
+        colorStyles.stroke = getStrokestyle();
+        this.draw((context) => {
+            this._applyPreDrawUpdaters(context, particle, radius, zOpacity, colorStyles, transform);
             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 => drawParticlePlugin(ctx, plugin, particle, delta));
+        this.draw(ctx => {
+            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 => drawPlugin(ctx, plugin, delta));
+        this.draw(ctx => {
+            drawPlugin(ctx, plugin, delta);
+        });
     }
-    async init() {
-        this._safeMutationObserver(obs => obs.disconnect());
+    init() {
+        this._safeMutationObserver(obs => {
+            obs.disconnect();
+        });
         this._mutationObserver = safeMutationObserver(records => {
             for (const record of records) {
                 if (record.type === "attributes" && record.attributeName === "style") {
@@ -354,13 +296,6 @@ export class Canvas {
         });
         this.resize();
         this._initStyle();
-        await this._initCover();
-        try {
-            await this._initTrail();
-        }
-        catch (e) {
-            getLogger().error(e);
-        }
         this.initBackground();
         this._safeMutationObserver(obs => {
             if (!this.element || !(this.element instanceof Node)) {
@@ -373,17 +308,13 @@ export class Canvas {
         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 = rangeColorToRgb(this._engine, background.color);
-            elementStyle.backgroundColor = color ? getStyleFromRgb(color, background.opacity) : "";
+        const elementStyle = element.style, color = rangeColorToRgb(this._engine, background.color);
+        if (color) {
+            elementStyle.backgroundColor = getStyleFromRgb(color, container.hdr, background.opacity);
         }
         else {
             elementStyle.backgroundColor = "";
@@ -420,10 +351,9 @@ export class Canvas {
         if (this._generated && this.element) {
             this.element.remove();
         }
+        const container = this.container;
         this._generated =
-            canvas.dataset && generatedAttribute in canvas.dataset
-                ? canvas.dataset[generatedAttribute] === "true"
-                : this._generated;
+            generatedAttribute in canvas.dataset ? canvas.dataset[generatedAttribute] === "true" : this._generated;
         this.element = canvas;
         this.element.ariaHidden = "true";
         this._originalStyle = cloneStyle(this.element.style);
@@ -433,9 +363,17 @@ export class Canvas {
         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 = 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)) {
@@ -445,23 +383,26 @@ export class Canvas {
         });
     }
     paint() {
-        const options = this.container.actualOptions;
-        this.draw(ctx => {
-            if (options.backgroundMask.enable && options.backgroundMask.cover) {
-                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 => {
+            paintBase(ctx, this.size, baseColor);
+        });
+    }
+    paintImage(image, opacity) {
+        this.draw(ctx => {
+            paintImage(ctx, this.size, image, opacity);
         });
     }
     resize() {
@@ -504,9 +445,13 @@ export class Canvas {
         this._repairStyle();
     }
     stop() {
-        this._safeMutationObserver(obs => obs.disconnect());
+        this._safeMutationObserver(obs => {
+            obs.disconnect();
+        });
         this._mutationObserver = undefined;
-        this.draw(ctx => clear(ctx, this.size));
+        this.draw(ctx => {
+            clear(ctx, this.size);
+        });
     }
     async windowResize() {
         if (!this.element || !this.resize()) {

package/esm/Core/Container.js

@@ -1,15 +1,16 @@
-import { animate, cancelAnimation, getRangeValue } from "../Utils/NumberUtils.js";
-import { clickRadius, defaultFps, defaultFpsLimit, errorPrefix, millisecondsToSeconds, minCoordinate, minFpsLimit, removeDeleteCount, removeMinIndex, touchEndLengthOffset, } from "./Utils/Constants.js";
-import { getLogger, safeIntersectionObserver } from "../Utils/Utils.js";
+import { animate, cancelAnimation, getRangeValue } from "../Utils/MathUtils.js";
+import { clickRadius, defaultFps, defaultFpsLimit, millisecondsToSeconds, minCoordinate, minFpsLimit, removeDeleteCount, removeMinIndex, touchEndLengthOffset, } from "./Utils/Constants.js";
 import { Canvas } from "./Canvas.js";
 import { EventListeners } from "./Utils/EventListeners.js";
 import { EventType } from "../Enums/Types/EventType.js";
 import { Options } from "../Options/Classes/Options.js";
 import { Particles } from "./Particles.js";
 import { Retina } from "./Retina.js";
+import { getLogger } from "../Utils/LogUtils.js";
 import { loadOptions } from "../Utils/OptionsUtils.js";
+import { safeIntersectionObserver } from "../Utils/Utils.js";
 function guardCheck(container) {
-    return container && !container.destroyed;
+    return !container.destroyed;
 }
 function initDelta(value, fpsLimit = defaultFps, smooth = false) {
     return {
@@ -33,7 +34,7 @@ export class Container {
                     continue;
                 }
                 if (entry.isIntersecting) {
-                    void this.play();
+                    this.play();
                 }
                 else {
                     this.pause();
@@ -56,7 +57,7 @@ export class Container {
                     this.draw(false);
                     return;
                 }
-                this.particles.draw(delta);
+                this.canvas.drawParticles(delta);
                 if (!this.alive()) {
                     this.destroy();
                     return;
@@ -66,12 +67,13 @@ export class Container {
                 }
             }
             catch (e) {
-                getLogger().error(`${errorPrefix} in animation loop`, e);
+                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;
@@ -102,7 +104,9 @@ export class Container {
         this._options = loadContainerOptions(this._engine, this);
         this.actualOptions = loadContainerOptions(this._engine, this);
         this._eventListeners = new EventListeners(this);
-        this._intersectionObserver = safeIntersectionObserver(entries => this._intersectionManager(entries));
+        this._intersectionObserver = safeIntersectionObserver(entries => {
+            this._intersectionManager(entries);
+        });
         this._engine.dispatchEvent(EventType.containerBuilt, { container: this });
     }
     get animationStatus() {
@@ -156,13 +160,9 @@ export class Container {
                 return;
             }
             if (touched && !touchMoved) {
-                const touchEvent = e;
-                let lastTouch = touchEvent.touches[touchEvent.touches.length - touchEndLengthOffset];
+                const touchEvent = e, lastTouch = touchEvent.touches[touchEvent.touches.length - touchEndLengthOffset];
                 if (!lastTouch) {
-                    lastTouch = touchEvent.changedTouches[touchEvent.changedTouches.length - touchEndLengthOffset];
-                    if (!lastTouch) {
-                        return;
-                    }
+                    return;
                 }
                 const element = this.canvas.element, canvasRect = element ? element.getBoundingClientRect() : undefined, pos = {
                     x: lastTouch.clientX - (canvasRect ? canvasRect.left : minCoordinate),
@@ -253,7 +253,9 @@ export class Container {
             }
             this._nextFrame(timestamp);
         };
-        this._drawAnimationFrame = animate(timestamp => frame(timestamp));
+        this._drawAnimationFrame = animate(timestamp => {
+            frame(timestamp);
+        });
     }
     async export(type, options = {}) {
         for (const plugin of this.plugins.values()) {
@@ -266,7 +268,8 @@ export class Container {
             }
             return res.blob;
         }
-        getLogger().error(`${errorPrefix} - Export plugin with type ${type} not found`);
+        getLogger().error(`Export plugin with type ${type} not found`);
+        return undefined;
     }
     handleClickMode(mode) {
         if (!guardCheck(this)) {
@@ -303,11 +306,12 @@ export class Container {
             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 = getRangeValue(duration) * millisecondsToSeconds;
         this._delay = getRangeValue(delay) * millisecondsToSeconds;