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

package/browser/Core/Canvas.js

@@ -1,17 +1,180 @@
-import { clear, clearCanvas, drawParticle, drawParticlePlugin, drawPlugin, getContext, paintCanvas, } from "../Utils/CanvasUtils";
-import { deepExtend, isSsr } from "../Utils/Utils";
+import { clear, drawParticle, drawParticlePlugin, drawPlugin, paintBase, paintImage } from "../Utils/CanvasUtils";
+import { deepExtend, getLogger, safeMutationObserver } from "../Utils/Utils";
 import { getStyleFromHsl, getStyleFromRgb, rangeColorToHsl, rangeColorToRgb } from "../Utils/ColorUtils";
 import { generatedAttribute } from "./Utils/Constants";
 function setTransformValue(factor, newFactor, key) {
-    var _a;
     const newValue = newFactor[key];
     if (newValue !== undefined) {
-        factor[key] = ((_a = factor[key]) !== null && _a !== void 0 ? _a : 1) * newValue;
+        factor[key] = (factor[key] ?? 1) * newValue;
     }
 }
 export class Canvas {
     constructor(container) {
         this.container = container;
+        this._applyPostDrawUpdaters = (particle) => {
+            for (const updater of this._postDrawUpdaters) {
+                updater.afterDraw && updater.afterDraw(particle);
+            }
+        };
+        this._applyPreDrawUpdaters = (ctx, particle, radius, zOpacity, colorStyles, transform) => {
+            for (const updater of this._preDrawUpdaters) {
+                if (updater.getColorStyles) {
+                    const { fill, stroke } = updater.getColorStyles(particle, ctx, radius, zOpacity);
+                    if (fill) {
+                        colorStyles.fill = fill;
+                    }
+                    if (stroke) {
+                        colorStyles.stroke = stroke;
+                    }
+                }
+                if (updater.getTransformValues) {
+                    const updaterTransform = updater.getTransformValues(particle);
+                    for (const key in updaterTransform) {
+                        setTransformValue(transform, updaterTransform, key);
+                    }
+                }
+                updater.beforeDraw && updater.beforeDraw(particle);
+            }
+        };
+        this._applyResizePlugins = () => {
+            for (const plugin of this._resizePlugins) {
+                plugin.resize && plugin.resize();
+            }
+        };
+        this._getPluginParticleColors = (particle) => {
+            let fColor, sColor;
+            for (const plugin of this._colorPlugins) {
+                if (!fColor && plugin.particleFillColor) {
+                    fColor = rangeColorToHsl(plugin.particleFillColor(particle));
+                }
+                if (!sColor && plugin.particleStrokeColor) {
+                    sColor = rangeColorToHsl(plugin.particleStrokeColor(particle));
+                }
+                if (fColor && sColor) {
+                    break;
+                }
+            }
+            return [fColor, sColor];
+        };
+        this._initCover = () => {
+            const options = this.container.actualOptions, cover = options.backgroundMask.cover, color = cover.color, coverRgb = rangeColorToRgb(color);
+            if (coverRgb) {
+                const coverColor = {
+                    ...coverRgb,
+                    a: cover.opacity,
+                };
+                this._coverColorStyle = getStyleFromRgb(coverColor, coverColor.a);
+            }
+        };
+        this._initStyle = () => {
+            const element = this.element, options = this.container.actualOptions;
+            if (!element) {
+                return;
+            }
+            if (this._fullScreen) {
+                this._originalStyle = deepExtend({}, element.style);
+                this._setFullScreenStyle();
+            }
+            else {
+                this._resetOriginalStyle();
+            }
+            for (const key in options.style) {
+                if (!key || !options.style) {
+                    continue;
+                }
+                const value = options.style[key];
+                if (!value) {
+                    continue;
+                }
+                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;
+            }
+            if (trailFill.color) {
+                const fillColor = rangeColorToRgb(trailFill.color);
+                if (!fillColor) {
+                    return;
+                }
+                const trail = options.particles.move.trail;
+                this._trailFill = {
+                    color: {
+                        ...fillColor,
+                    },
+                    opacity: 1 / trail.length,
+                };
+            }
+            else {
+                await new Promise((resolve, reject) => {
+                    if (!trailFill.image) {
+                        return;
+                    }
+                    const img = document.createElement("img");
+                    img.addEventListener("load", () => {
+                        this._trailFill = {
+                            image: img,
+                            opacity: 1 / trail.length,
+                        };
+                        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._initStyle();
+            this.initBackground();
+            this._safeMutationObserver((observer) => observer.observe(element, { attributes: true }));
+        };
+        this._resetOriginalStyle = () => {
+            const element = this.element, originalStyle = this._originalStyle;
+            if (!(element && originalStyle)) {
+                return;
+            }
+            const style = element.style;
+            style.position = originalStyle.position;
+            style.zIndex = originalStyle.zIndex;
+            style.top = originalStyle.top;
+            style.left = originalStyle.left;
+            style.width = originalStyle.width;
+            style.height = originalStyle.height;
+        };
+        this._safeMutationObserver = (callback) => {
+            if (!this._mutationObserver) {
+                return;
+            }
+            callback(this._mutationObserver);
+        };
+        this._setFullScreenStyle = () => {
+            const element = this.element;
+            if (!element) {
+                return;
+            }
+            const priority = "important", style = element.style;
+            style.setProperty("position", "fixed", priority);
+            style.setProperty("z-index", this.container.actualOptions.fullScreen.zIndex.toString(10), priority);
+            style.setProperty("top", "0", priority);
+            style.setProperty("left", "0", priority);
+            style.setProperty("width", "100%", priority);
+            style.setProperty("height", "100%", priority);
+        };
         this.size = {
             height: 0,
             width: 0,
@@ -22,50 +185,51 @@ export class Canvas {
         this._postDrawUpdaters = [];
         this._resizePlugins = [];
         this._colorPlugins = [];
-        this._mutationObserver =
-            !isSsr() && typeof MutationObserver !== "undefined"
-                ? new MutationObserver((records) => {
-                    for (const record of records) {
-                        if (record.type === "attributes" && record.attributeName === "style") {
-                            this._repairStyle();
-                        }
-                    }
-                })
-                : undefined;
     }
     get _fullScreen() {
         return this.container.actualOptions.fullScreen.enable;
     }
     clear() {
-        this.draw((ctx) => {
-            clearCanvas(ctx, this.size, this.container.actualOptions, this._trailFill, this._coverColorStyle);
-        });
+        const options = this.container.actualOptions, trail = options.particles.move.trail, trailFill = this._trailFill;
+        if (options.backgroundMask.enable) {
+            this.paint();
+        }
+        else if (trail.enable && trail.length > 0 && trailFill) {
+            if (trailFill.color) {
+                this._paintBase(getStyleFromRgb(trailFill.color, trailFill.opacity));
+            }
+            else if (trailFill.image) {
+                this._paintImage(trailFill.image, trailFill.opacity);
+            }
+        }
+        else {
+            this.draw((ctx) => {
+                clear(ctx, this.size);
+            });
+        }
     }
     destroy() {
-        var _a, _b;
-        (_a = this._mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.stop();
         if (this._generated) {
-            (_b = this.element) === null || _b === void 0 ? void 0 : _b.remove();
+            const element = this.element;
+            element && element.remove();
         }
         else {
             this._resetOriginalStyle();
         }
-        this.draw((ctx) => {
-            clear(ctx, this.size);
-        });
         this._preDrawUpdaters = [];
         this._postDrawUpdaters = [];
         this._resizePlugins = [];
         this._colorPlugins = [];
     }
     draw(cb) {
-        if (!this._context) {
+        const ctx = this._context;
+        if (!ctx) {
             return;
         }
-        return cb(this._context);
+        return cb(ctx);
     }
     drawParticle(particle, delta) {
-        var _a;
         if (particle.spawning || particle.destroyed) {
             return;
         }
@@ -73,7 +237,7 @@ export class Canvas {
         if (radius <= 0) {
             return;
         }
-        const pfColor = particle.getFillColor(), psColor = (_a = particle.getStrokeColor()) !== null && _a !== void 0 ? _a : pfColor;
+        const pfColor = particle.getFillColor(), psColor = particle.getStrokeColor() ?? pfColor;
         let [fColor, sColor] = this._getPluginParticleColors(particle);
         if (!fColor) {
             fColor = pfColor;
@@ -85,14 +249,13 @@ export class Canvas {
             return;
         }
         this.draw((ctx) => {
-            var _a, _b, _c, _d;
-            const options = this.container.actualOptions, zIndexOptions = particle.options.zIndex, zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate, opacity = (_c = (_a = particle.bubble.opacity) !== null && _a !== void 0 ? _a : (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1, strokeOpacity = (_d = particle.strokeOpacity) !== null && _d !== void 0 ? _d : opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor, transform = {}, colorStyles = {
+            const container = this.container, options = container.actualOptions, zIndexOptions = particle.options.zIndex, zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate, opacity = particle.bubble.opacity ?? particle.opacity?.value ?? 1, 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);
             drawParticle({
-                container: this.container,
+                container,
                 context: ctx,
                 particle,
                 delta,
@@ -108,119 +271,46 @@ export class Canvas {
         });
     }
     drawParticlePlugin(plugin, particle, delta) {
-        this.draw((ctx) => {
-            drawParticlePlugin(ctx, plugin, particle, delta);
-        });
+        this.draw((ctx) => drawParticlePlugin(ctx, plugin, particle, delta));
     }
     drawPlugin(plugin, delta) {
-        this.draw((ctx) => {
-            drawPlugin(ctx, plugin, delta);
-        });
+        this.draw((ctx) => drawPlugin(ctx, plugin, delta));
     }
     async init() {
-        var _a;
-        this._resize();
+        this._safeMutationObserver((obs) => obs.disconnect());
+        this._mutationObserver = safeMutationObserver((records) => {
+            for (const record of records) {
+                if (record.type === "attributes" && record.attributeName === "style") {
+                    this._repairStyle();
+                }
+            }
+        });
+        this.resize();
         this._initStyle();
         this._initCover();
         try {
             await this._initTrail();
         }
         catch (e) {
-            console.error(e);
+            getLogger().error(e);
         }
-        this._initBackground();
-        if (this.element) {
-            (_a = this._mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.element, { attributes: true });
-        }
-        this._initUpdaters();
-        this._initPlugins();
-        this._paint();
-        this.container.updateActualOptions();
-        this._resize();
-        this._initBackground();
-    }
-    loadCanvas(canvas) {
-        var _a, _b;
-        if (this._generated) {
-            (_a = this.element) === null || _a === void 0 ? void 0 : _a.remove();
-        }
-        this._generated =
-            canvas.dataset && generatedAttribute in canvas.dataset
-                ? canvas.dataset[generatedAttribute] === "true"
-                : this._generated;
-        this.element = canvas;
-        this.element.ariaHidden = "true";
-        this._originalStyle = deepExtend({}, this.element.style);
-        this.size.height = canvas.offsetHeight;
-        this.size.width = canvas.offsetWidth;
-        this._context = getContext(canvas);
-        (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.observe(this.element, { attributes: true });
-        this.container.retina.init();
-        this._initBackground();
-    }
-    async windowResize() {
-        if (!this.element) {
-            return;
-        }
-        this._resize();
-        const container = this.container, needsRefresh = container.updateActualOptions();
-        container.particles.setDensity();
-        this._applyResizePlugins();
-        if (needsRefresh) {
-            await container.refresh();
-        }
-    }
-    _applyPostDrawUpdaters(particle) {
-        var _a;
-        for (const updater of this._postDrawUpdaters) {
-            (_a = updater.afterDraw) === null || _a === void 0 ? void 0 : _a.call(updater, particle);
-        }
-    }
-    _applyPreDrawUpdaters(ctx, particle, radius, zOpacity, colorStyles, transform) {
-        var _a;
-        for (const updater of this._preDrawUpdaters) {
-            if (updater.getColorStyles) {
-                const { fill, stroke } = updater.getColorStyles(particle, ctx, radius, zOpacity);
-                if (fill) {
-                    colorStyles.fill = fill;
-                }
-                if (stroke) {
-                    colorStyles.stroke = stroke;
-                }
-            }
-            if (updater.getTransformValues) {
-                const updaterTransform = updater.getTransformValues(particle);
-                for (const key in updaterTransform) {
-                    setTransformValue(transform, updaterTransform, key);
-                }
-            }
-            (_a = updater.beforeDraw) === null || _a === void 0 ? void 0 : _a.call(updater, particle);
-        }
-    }
-    _applyResizePlugins() {
-        for (const plugin of this._resizePlugins) {
-            if (plugin.resize) {
-                plugin.resize();
+        this.initBackground();
+        this._safeMutationObserver((obs) => {
+            if (!this.element) {
+                return;
             }
-        }
+            obs.observe(this.element, { attributes: true });
+        });
+        this.initUpdaters();
+        this.initPlugins();
+        this.paint();
     }
-    _getPluginParticleColors(particle) {
-        let fColor, sColor;
-        for (const plugin of this._colorPlugins) {
-            if (!fColor && plugin.particleFillColor) {
-                fColor = rangeColorToHsl(plugin.particleFillColor(particle));
-            }
-            if (!sColor && plugin.particleStrokeColor) {
-                sColor = rangeColorToHsl(plugin.particleStrokeColor(particle));
-            }
-            if (fColor && sColor) {
-                break;
-            }
+    initBackground() {
+        const options = this.container.actualOptions, background = options.background, element = this.element;
+        if (!element) {
+            return;
         }
-        return [fColor, sColor];
-    }
-    _initBackground() {
-        const options = this.container.actualOptions, background = options.background, element = this.element, elementStyle = element === null || element === void 0 ? void 0 : element.style;
+        const elementStyle = element.style;
         if (!elementStyle) {
             return;
         }
@@ -236,19 +326,7 @@ export class Canvas {
         elementStyle.backgroundRepeat = background.repeat || "";
         elementStyle.backgroundSize = background.size || "";
     }
-    _initCover() {
-        const options = this.container.actualOptions, cover = options.backgroundMask.cover, color = cover.color, coverRgb = rangeColorToRgb(color);
-        if (coverRgb) {
-            const coverColor = {
-                r: coverRgb.r,
-                g: coverRgb.g,
-                b: coverRgb.b,
-                a: cover.opacity,
-            };
-            this._coverColorStyle = getStyleFromRgb(coverColor, coverColor.a);
-        }
-    }
-    _initPlugins() {
+    initPlugins() {
         this._resizePlugins = [];
         for (const [, plugin] of this.container.plugins) {
             if (plugin.resize) {
@@ -259,66 +337,7 @@ export class Canvas {
             }
         }
     }
-    _initStyle() {
-        const element = this.element, options = this.container.actualOptions;
-        if (!element) {
-            return;
-        }
-        if (this._fullScreen) {
-            this._originalStyle = deepExtend({}, element.style);
-            this._setFullScreenStyle();
-        }
-        else {
-            this._resetOriginalStyle();
-        }
-        for (const key in options.style) {
-            if (!key || !options.style) {
-                continue;
-            }
-            const value = options.style[key];
-            if (!value) {
-                continue;
-            }
-            element.style.setProperty(key, value, "important");
-        }
-    }
-    async _initTrail() {
-        const options = this.container.actualOptions, trail = options.particles.move.trail, trailFill = trail.fill;
-        if (!trail.enable) {
-            return;
-        }
-        if (trailFill.color) {
-            const fillColor = rangeColorToRgb(trailFill.color);
-            if (!fillColor) {
-                return;
-            }
-            const trail = options.particles.move.trail;
-            this._trailFill = {
-                color: Object.assign({}, fillColor),
-                opacity: 1 / trail.length,
-            };
-        }
-        else {
-            await new Promise((resolve, reject) => {
-                if (!trailFill.image) {
-                    return;
-                }
-                const img = document.createElement("img");
-                img.addEventListener("load", () => {
-                    this._trailFill = {
-                        image: img,
-                        opacity: 1 / trail.length,
-                    };
-                    resolve();
-                });
-                img.addEventListener("error", (evt) => {
-                    reject(evt.error);
-                });
-                img.src = trailFill.image;
-            });
-        }
-    }
-    _initUpdaters() {
+    initUpdaters() {
         this._preDrawUpdaters = [];
         this._postDrawUpdaters = [];
         for (const updater of this.container.particles.updaters) {
@@ -330,37 +349,44 @@ export class Canvas {
             }
         }
     }
-    _paint() {
-        this.draw((ctx) => {
-            paintCanvas(ctx, this.size, this.container.actualOptions, this._coverColorStyle);
-        });
-    }
-    _repairStyle() {
-        var _a, _b;
-        const element = this.element;
-        if (!element) {
-            return;
+    loadCanvas(canvas) {
+        if (this._generated && this.element) {
+            this.element.remove();
         }
-        (_a = this._mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this._initStyle();
-        this._initBackground();
-        (_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.observe(element, { attributes: true });
+        this._generated =
+            canvas.dataset && generatedAttribute in canvas.dataset
+                ? canvas.dataset[generatedAttribute] === "true"
+                : this._generated;
+        this.element = canvas;
+        this.element.ariaHidden = "true";
+        this._originalStyle = deepExtend({}, this.element.style);
+        this.size.height = canvas.offsetHeight;
+        this.size.width = canvas.offsetWidth;
+        this._context = this.element.getContext("2d");
+        this._safeMutationObserver((obs) => {
+            if (!this.element) {
+                return;
+            }
+            obs.observe(this.element, { attributes: true });
+        });
+        this.container.retina.init();
+        this.initBackground();
     }
-    _resetOriginalStyle() {
-        const element = this.element, originalStyle = this._originalStyle;
-        if (!(element && originalStyle)) {
-            return;
-        }
-        element.style.position = originalStyle.position;
-        element.style.zIndex = originalStyle.zIndex;
-        element.style.top = originalStyle.top;
-        element.style.left = originalStyle.left;
-        element.style.width = originalStyle.width;
-        element.style.height = originalStyle.height;
+    paint() {
+        const options = this.container.actualOptions;
+        this.draw((ctx) => {
+            if (options.backgroundMask.enable && options.backgroundMask.cover) {
+                clear(ctx, this.size);
+                this._paintBase(this._coverColorStyle);
+            }
+            else {
+                this._paintBase();
+            }
+        });
     }
-    _resize() {
+    resize() {
         if (!this.element) {
-            return;
+            return false;
         }
         const container = this.container, pxRatio = container.retina.pixelRatio, size = container.canvas.size, newSize = {
             width: this.element.offsetWidth * pxRatio,
@@ -370,9 +396,9 @@ export class Canvas {
             newSize.width === size.width &&
             newSize.height === this.element.height &&
             newSize.width === this.element.width) {
-            return;
+            return false;
         }
-        const oldSize = Object.assign({}, size);
+        const oldSize = { ...size };
         this.element.width = size.width = this.element.offsetWidth * pxRatio;
         this.element.height = size.height = this.element.offsetHeight * pxRatio;
         if (this.container.started) {
@@ -381,18 +407,22 @@ export class Canvas {
                 height: size.height / oldSize.height,
             };
         }
+        return true;
     }
-    _setFullScreenStyle() {
-        const element = this.element;
-        if (!element) {
+    stop() {
+        this._safeMutationObserver((obs) => obs.disconnect());
+        this._mutationObserver = undefined;
+        this.draw((ctx) => clear(ctx, this.size));
+    }
+    async windowResize() {
+        if (!this.element || !this.resize()) {
             return;
         }
-        const priority = "important";
-        element.style.setProperty("position", "fixed", priority);
-        element.style.setProperty("z-index", this.container.actualOptions.fullScreen.zIndex.toString(10), priority);
-        element.style.setProperty("top", "0", priority);
-        element.style.setProperty("left", "0", priority);
-        element.style.setProperty("width", "100%", priority);
-        element.style.setProperty("height", "100%", priority);
+        const container = this.container, needsRefresh = container.updateActualOptions();
+        container.particles.setDensity();
+        this._applyResizePlugins();
+        if (needsRefresh) {
+            await container.refresh();
+        }
     }
 }