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

package/umd/Core/Canvas.js

@@ -15,15 +15,178 @@
     const ColorUtils_1 = require("../Utils/ColorUtils");
     const Constants_1 = require("./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;
         }
     }
     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 = (0, ColorUtils_1.rangeColorToHsl)(plugin.particleFillColor(particle));
+                    }
+                    if (!sColor && plugin.particleStrokeColor) {
+                        sColor = (0, ColorUtils_1.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 = (0, ColorUtils_1.rangeColorToRgb)(color);
+                if (coverRgb) {
+                    const coverColor = {
+                        ...coverRgb,
+                        a: cover.opacity,
+                    };
+                    this._coverColorStyle = (0, ColorUtils_1.getStyleFromRgb)(coverColor, coverColor.a);
+                }
+            };
+            this._initStyle = () => {
+                const element = this.element, options = this.container.actualOptions;
+                if (!element) {
+                    return;
+                }
+                if (this._fullScreen) {
+                    this._originalStyle = (0, Utils_1.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 = (0, ColorUtils_1.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) => (0, CanvasUtils_1.paintBase)(ctx, this.size, baseColor));
+            };
+            this._paintImage = (image, opacity) => {
+                this.draw((ctx) => (0, CanvasUtils_1.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,
@@ -34,50 +197,51 @@
             this._postDrawUpdaters = [];
             this._resizePlugins = [];
             this._colorPlugins = [];
-            this._mutationObserver =
-                !(0, Utils_1.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) => {
-                (0, CanvasUtils_1.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((0, ColorUtils_1.getStyleFromRgb)(trailFill.color, trailFill.opacity));
+                }
+                else if (trailFill.image) {
+                    this._paintImage(trailFill.image, trailFill.opacity);
+                }
+            }
+            else {
+                this.draw((ctx) => {
+                    (0, CanvasUtils_1.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) => {
-                (0, CanvasUtils_1.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;
             }
@@ -85,7 +249,7 @@
             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;
@@ -97,14 +261,13 @@
                 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 ? (0, ColorUtils_1.getStyleFromHsl)(fColor, zOpacity) : undefined,
                 };
                 colorStyles.stroke = sColor ? (0, ColorUtils_1.getStyleFromHsl)(sColor, zStrokeOpacity) : colorStyles.fill;
                 this._applyPreDrawUpdaters(ctx, particle, radius, zOpacity, colorStyles, transform);
                 (0, CanvasUtils_1.drawParticle)({
-                    container: this.container,
+                    container,
                     context: ctx,
                     particle,
                     delta,
@@ -120,119 +283,46 @@
             });
         }
         drawParticlePlugin(plugin, particle, delta) {
-            this.draw((ctx) => {
-                (0, CanvasUtils_1.drawParticlePlugin)(ctx, plugin, particle, delta);
-            });
+            this.draw((ctx) => (0, CanvasUtils_1.drawParticlePlugin)(ctx, plugin, particle, delta));
         }
         drawPlugin(plugin, delta) {
-            this.draw((ctx) => {
-                (0, CanvasUtils_1.drawPlugin)(ctx, plugin, delta);
-            });
+            this.draw((ctx) => (0, CanvasUtils_1.drawPlugin)(ctx, plugin, delta));
         }
         async init() {
-            var _a;
-            this._resize();
+            this._safeMutationObserver((obs) => obs.disconnect());
+            this._mutationObserver = (0, Utils_1.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);
+                (0, Utils_1.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 && Constants_1.generatedAttribute in canvas.dataset
-                    ? canvas.dataset[Constants_1.generatedAttribute] === "true"
-                    : this._generated;
-            this.element = canvas;
-            this.element.ariaHidden = "true";
-            this._originalStyle = (0, Utils_1.deepExtend)({}, this.element.style);
-            this.size.height = canvas.offsetHeight;
-            this.size.width = canvas.offsetWidth;
-            this._context = (0, CanvasUtils_1.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 = (0, ColorUtils_1.rangeColorToHsl)(plugin.particleFillColor(particle));
-                }
-                if (!sColor && plugin.particleStrokeColor) {
-                    sColor = (0, ColorUtils_1.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;
             }
@@ -248,19 +338,7 @@
             elementStyle.backgroundRepeat = background.repeat || "";
             elementStyle.backgroundSize = background.size || "";
         }
-        _initCover() {
-            const options = this.container.actualOptions, cover = options.backgroundMask.cover, color = cover.color, coverRgb = (0, ColorUtils_1.rangeColorToRgb)(color);
-            if (coverRgb) {
-                const coverColor = {
-                    r: coverRgb.r,
-                    g: coverRgb.g,
-                    b: coverRgb.b,
-                    a: cover.opacity,
-                };
-                this._coverColorStyle = (0, ColorUtils_1.getStyleFromRgb)(coverColor, coverColor.a);
-            }
-        }
-        _initPlugins() {
+        initPlugins() {
             this._resizePlugins = [];
             for (const [, plugin] of this.container.plugins) {
                 if (plugin.resize) {
@@ -271,66 +349,7 @@
                 }
             }
         }
-        _initStyle() {
-            const element = this.element, options = this.container.actualOptions;
-            if (!element) {
-                return;
-            }
-            if (this._fullScreen) {
-                this._originalStyle = (0, Utils_1.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 = (0, ColorUtils_1.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) {
@@ -342,37 +361,44 @@
                 }
             }
         }
-        _paint() {
-            this.draw((ctx) => {
-                (0, CanvasUtils_1.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 && Constants_1.generatedAttribute in canvas.dataset
+                    ? canvas.dataset[Constants_1.generatedAttribute] === "true"
+                    : this._generated;
+            this.element = canvas;
+            this.element.ariaHidden = "true";
+            this._originalStyle = (0, Utils_1.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) {
+                    (0, CanvasUtils_1.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,
@@ -382,9 +408,9 @@
                 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) {
@@ -393,19 +419,23 @@
                     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) => (0, CanvasUtils_1.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();
+            }
         }
     }
     exports.Canvas = Canvas;