@tsparticles/engine 3.9.1 → 4.0.0-alpha.1

package/cjs/Core/Canvas.js

@@ -1,52 +1,43 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Canvas = void 0;
-const CanvasUtils_js_1 = require("../Utils/CanvasUtils.js");
-const Utils_js_1 = require("../Utils/Utils.js");
-const Constants_js_1 = require("./Utils/Constants.js");
-const ColorUtils_js_1 = require("../Utils/ColorUtils.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];
     if (newValue !== undefined) {
-        factor[key] = (factor[key] ?? Constants_js_1.defaultTransformValue) * newValue;
+        factor[key] = (factor[key] ?? defaultTransformValue) * newValue;
     }
 }
 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);
         }
     }
 }
-class Canvas {
+export class Canvas {
     constructor(container, engine) {
         this.container = container;
         this._applyPostDrawUpdaters = particle => {
@@ -83,10 +74,10 @@ class Canvas {
             let fColor, sColor;
             for (const plugin of this._colorPlugins) {
                 if (!fColor && plugin.particleFillColor) {
-                    fColor = (0, ColorUtils_js_1.rangeColorToHsl)(this._engine, plugin.particleFillColor(particle));
+                    fColor = rangeColorToHsl(this._engine, plugin.particleFillColor(particle));
                 }
                 if (!sColor && plugin.particleStrokeColor) {
-                    sColor = (0, ColorUtils_js_1.rangeColorToHsl)(this._engine, plugin.particleStrokeColor(particle));
+                    sColor = rangeColorToHsl(this._engine, plugin.particleStrokeColor(particle));
                 }
                 if (fColor && sColor) {
                     break;
@@ -94,38 +85,6 @@ class Canvas {
             }
             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) {
@@ -138,7 +97,7 @@ 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];
@@ -148,63 +107,21 @@ 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 = 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 });
@@ -228,7 +145,7 @@ class Canvas {
             if (!element) {
                 return;
             }
-            setStyle(element, (0, Utils_js_1.getFullScreenStyle)(this.container.actualOptions.fullScreen.zIndex), true);
+            setStyle(element, getFullScreenStyle(this.container.actualOptions.fullScreen.zIndex), true);
         };
         this._engine = engine;
         this._standardSize = {
@@ -251,24 +168,30 @@ 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 > 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 => {
+            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 => {
+            clearDrawPlugin(ctx, plugin, delta);
+        });
     }
     destroy() {
         this.stop();
@@ -292,63 +215,79 @@ 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;
         }
         const radius = particle.getRadius();
-        if (radius <= Constants_js_1.minimumSize) {
+        if (radius <= minimumSize) {
             return;
         }
         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);
-            (0, CanvasUtils_js_1.drawParticle)({
+        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 => (0, CanvasUtils_js_1.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 => (0, CanvasUtils_js_1.drawPlugin)(ctx, plugin, delta));
+        this.draw(ctx => {
+            drawPlugin(ctx, plugin, delta);
+        });
     }
-    async init() {
-        this._safeMutationObserver(obs => obs.disconnect());
-        this._mutationObserver = (0, Utils_js_1.safeMutationObserver)(records => {
+    init() {
+        this._safeMutationObserver(obs => {
+            obs.disconnect();
+        });
+        this._mutationObserver = safeMutationObserver(records => {
             for (const record of records) {
                 if (record.type === "attributes" && record.attributeName === "style") {
                     this._repairStyle();
@@ -357,13 +296,6 @@ class Canvas {
         });
         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)) {
@@ -376,17 +308,13 @@ 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 = (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 = rangeColorToRgb(this._engine, background.color);
+        if (color) {
+            elementStyle.backgroundColor = getStyleFromRgb(color, container.hdr, background.opacity);
         }
         else {
             elementStyle.backgroundColor = "";
@@ -423,22 +351,29 @@ class Canvas {
         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;
+            generatedAttribute in canvas.dataset ? canvas.dataset[generatedAttribute] === "true" : this._generated;
         this.element = canvas;
         this.element.ariaHidden = "true";
-        this._originalStyle = (0, Utils_js_1.cloneStyle)(this.element.style);
+        this._originalStyle = cloneStyle(this.element.style);
         const standardSize = this._standardSize;
         standardSize.height = canvas.offsetHeight;
         standardSize.width = canvas.offsetWidth;
         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)) {
@@ -448,23 +383,26 @@ class Canvas {
         });
     }
     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 => {
+            paintBase(ctx, this.size, baseColor);
+        });
+    }
+    paintImage(image, opacity) {
+        this.draw(ctx => {
+            paintImage(ctx, this.size, image, opacity);
         });
     }
     resize() {
@@ -507,9 +445,13 @@ class Canvas {
         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 => {
+            clear(ctx, this.size);
+        });
     }
     async windowResize() {
         if (!this.element || !this.resize()) {
@@ -523,4 +465,3 @@ class Canvas {
         }
     }
 }
-exports.Canvas = Canvas;