@tsparticles/engine 4.0.0-alpha.8 → 4.0.0-beta.0

package/browser/Core/Canvas.js

@@ -1,6 +1,6 @@
 import { clear, drawParticle, drawParticlePlugin, paintBase, paintImage } from "../Utils/CanvasUtils.js";
 import { cloneStyle, getFullScreenStyle, safeMatchMedia, safeMutationObserver } from "../Utils/Utils.js";
-import { defaultTransformValue, generatedAttribute, minimumSize, zIndexFactorOffset } from "./Utils/Constants.js";
+import { defaultCompositeValue, defaultTransformValue, defaultZoom, generatedAttribute, half, minimumSize, zIndexFactorOffset, } from "./Utils/Constants.js";
 import { getStyleFromHsl, getStyleFromRgb, rangeColorToHsl, rangeColorToRgb } from "../Utils/ColorUtils.js";
 const fColorIndex = 0, sColorIndex = 1;
 function setTransformValue(factor, newFactor, key) {
@@ -39,120 +39,37 @@ function setStyle(canvas, style, important = false) {
     }
 }
 export class Canvas {
+    container;
+    element;
+    size;
+    zoom = defaultZoom;
+    _canvasClearPlugins;
+    _canvasPaintPlugins;
+    _canvasSettings;
+    _clearDrawPlugins;
+    _colorPlugins;
+    _context;
+    _drawParticlePlugins;
+    _drawParticlesCleanupPlugins;
+    _drawParticlesSetupPlugins;
+    _drawPlugins;
+    _drawSettingsCleanupPlugins;
+    _drawSettingsSetupPlugins;
+    _engine;
+    _generated;
+    _mutationObserver;
+    _originalStyle;
+    _pointerEvents;
+    _postDrawUpdaters;
+    _preDrawUpdaters;
+    _resizePlugins;
+    _reusableColorStyles = {};
+    _reusablePluginColors = [undefined, undefined];
+    _reusableTransform = {};
+    _standardSize;
+    _zoomCenter;
     constructor(container, engine) {
         this.container = container;
-        this._reusableColorStyles = {};
-        this._reusablePluginColors = [undefined, undefined];
-        this._reusableTransform = {};
-        this._applyPostDrawUpdaters = particle => {
-            for (const updater of this._postDrawUpdaters) {
-                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?.(particle);
-            }
-        };
-        this._applyResizePlugins = () => {
-            for (const plugin of this._resizePlugins) {
-                plugin.resize?.();
-            }
-        };
-        this._getPluginParticleColors = particle => {
-            let fColor, sColor;
-            for (const plugin of this._colorPlugins) {
-                if (!fColor && plugin.particleFillColor) {
-                    fColor = rangeColorToHsl(this._engine, plugin.particleFillColor(particle));
-                }
-                if (!sColor && plugin.particleStrokeColor) {
-                    sColor = rangeColorToHsl(this._engine, plugin.particleStrokeColor(particle));
-                }
-                if (fColor && sColor) {
-                    break;
-                }
-            }
-            this._reusablePluginColors[fColorIndex] = fColor;
-            this._reusablePluginColors[sColorIndex] = sColor;
-            return this._reusablePluginColors;
-        };
-        this._initStyle = () => {
-            const element = this.element, options = this.container.actualOptions;
-            if (!element) {
-                return;
-            }
-            if (this._fullScreen) {
-                this._setFullScreenStyle();
-            }
-            else {
-                this._resetOriginalStyle();
-            }
-            for (const key in options.style) {
-                if (!key || !Object.hasOwn(options.style, key)) {
-                    continue;
-                }
-                const value = options.style[key];
-                if (!value) {
-                    continue;
-                }
-                element.style.setProperty(key, value, "important");
-            }
-        };
-        this._repairStyle = () => {
-            const element = this.element;
-            if (!element) {
-                return;
-            }
-            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 instanceof Node)) {
-                    return;
-                }
-                observer.observe(element, { attributes: true });
-            });
-        };
-        this._resetOriginalStyle = () => {
-            const element = this.element, originalStyle = this._originalStyle;
-            if (!element || !originalStyle) {
-                return;
-            }
-            setStyle(element, originalStyle, true);
-        };
-        this._safeMutationObserver = callback => {
-            if (!this._mutationObserver) {
-                return;
-            }
-            callback(this._mutationObserver);
-        };
-        this._setFullScreenStyle = () => {
-            const element = this.element;
-            if (!element) {
-                return;
-            }
-            setStyle(element, getFullScreenStyle(this.container.actualOptions.fullScreen.zIndex), true);
-        };
         this._engine = engine;
         this._standardSize = {
             height: 0,
@@ -169,8 +86,20 @@ export class Canvas {
         this._postDrawUpdaters = [];
         this._resizePlugins = [];
         this._colorPlugins = [];
+        this._canvasClearPlugins = [];
+        this._canvasPaintPlugins = [];
+        this._clearDrawPlugins = [];
+        this._drawParticlePlugins = [];
+        this._drawParticlesCleanupPlugins = [];
+        this._drawParticlesSetupPlugins = [];
+        this._drawPlugins = [];
+        this._drawSettingsSetupPlugins = [];
+        this._drawSettingsCleanupPlugins = [];
         this._pointerEvents = "none";
     }
+    get settings() {
+        return this._canvasSettings;
+    }
     get _fullScreen() {
         return this.container.actualOptions.fullScreen.enable;
     }
@@ -184,9 +113,10 @@ export class Canvas {
     }
     clear() {
         let pluginHandled = false;
-        for (const plugin of this.container.plugins) {
-            if (!pluginHandled && plugin.canvasClear) {
-                pluginHandled = plugin.canvasClear();
+        for (const plugin of this._canvasClearPlugins) {
+            pluginHandled = plugin.canvasClear?.() ?? false;
+            if (pluginHandled) {
+                break;
             }
         }
         if (pluginHandled) {
@@ -208,6 +138,15 @@ export class Canvas {
         this._postDrawUpdaters = [];
         this._resizePlugins = [];
         this._colorPlugins = [];
+        this._canvasClearPlugins = [];
+        this._canvasPaintPlugins = [];
+        this._clearDrawPlugins = [];
+        this._drawParticlePlugins = [];
+        this._drawParticlesCleanupPlugins = [];
+        this._drawParticlesSetupPlugins = [];
+        this._drawPlugins = [];
+        this._drawSettingsSetupPlugins = [];
+        this._drawSettingsCleanupPlugins = [];
     }
     draw(cb) {
         const ctx = this._context;
@@ -224,22 +163,20 @@ export class Canvas {
         if (radius <= minimumSize) {
             return;
         }
-        const pfColor = particle.getFillColor(), psColor = particle.getStrokeColor() ?? pfColor;
+        const pfColor = particle.getFillColor(), psColor = particle.getStrokeColor();
         let [fColor, sColor] = this._getPluginParticleColors(particle);
         fColor ??= pfColor;
         sColor ??= psColor;
         if (!fColor && !sColor) {
             return;
         }
-        const container = this.container, zIndexOptions = particle.options.zIndex, zIndexFactor = zIndexFactorOffset - particle.zIndexFactor, { opacity, strokeOpacity } = particle.getOpacity(), transform = this._reusableTransform, colorStyles = this._reusableColorStyles, fill = fColor ? getStyleFromHsl(fColor, container.hdr, opacity) : undefined, stroke = sColor ? getStyleFromHsl(sColor, container.hdr, strokeOpacity) : fill;
+        const container = this.container, zIndexOptions = particle.options.zIndex, zIndexFactor = zIndexFactorOffset - particle.zIndexFactor, { fillOpacity, opacity, strokeOpacity } = particle.getOpacity(), transform = this._reusableTransform, colorStyles = this._reusableColorStyles, fill = fColor ? getStyleFromHsl(fColor, container.hdr, fillOpacity * opacity) : undefined, stroke = sColor ? getStyleFromHsl(sColor, container.hdr, strokeOpacity * opacity) : fill;
         transform.a = transform.b = transform.c = transform.d = undefined;
         colorStyles.fill = fill;
         colorStyles.stroke = stroke;
         this.draw((context) => {
-            for (const plugin of container.plugins) {
-                if (plugin.drawParticleSetup) {
-                    plugin.drawParticleSetup(context, particle, delta);
-                }
+            for (const plugin of this._drawParticlesSetupPlugins) {
+                plugin.drawParticleSetup?.(context, particle, delta);
             }
             this._applyPreDrawUpdaters(context, particle, radius, opacity, colorStyles, transform);
             drawParticle({
@@ -253,38 +190,48 @@ export class Canvas {
                 transform,
             });
             this._applyPostDrawUpdaters(particle);
-            for (const plugin of container.plugins) {
-                if (plugin.drawParticleCleanup) {
-                    plugin.drawParticleCleanup(context, particle, delta);
-                }
+            for (const plugin of this._drawParticlesCleanupPlugins) {
+                plugin.drawParticleCleanup?.(context, particle, delta);
             }
         });
     }
-    drawParticlePlugin(plugin, particle, delta) {
+    drawParticlePlugins(particle, delta) {
         this.draw(ctx => {
-            drawParticlePlugin(ctx, plugin, particle, delta);
+            for (const plugin of this._drawParticlePlugins) {
+                drawParticlePlugin(ctx, plugin, particle, delta);
+            }
         });
     }
     drawParticles(delta) {
-        const { particles, plugins } = this.container;
+        const { particles } = this.container;
         this.clear();
         particles.update(delta);
         this.draw(ctx => {
-            for (const plugin of plugins) {
+            for (const plugin of this._drawSettingsSetupPlugins) {
                 plugin.drawSettingsSetup?.(ctx, delta);
             }
-            for (const plugin of plugins) {
+            for (const plugin of this._drawPlugins) {
                 plugin.draw?.(ctx, delta);
             }
             particles.drawParticles(delta);
-            for (const plugin of plugins) {
+            for (const plugin of this._clearDrawPlugins) {
                 plugin.clearDraw?.(ctx, delta);
             }
-            for (const plugin of plugins) {
+            for (const plugin of this._drawSettingsCleanupPlugins) {
                 plugin.drawSettingsCleanup?.(ctx, delta);
             }
         });
     }
+    getZoomCenter() {
+        const pxRatio = this.container.retina.pixelRatio, { width, height } = this.size;
+        if (this._zoomCenter) {
+            return this._zoomCenter;
+        }
+        return {
+            x: (width * half) / pxRatio,
+            y: (height * half) / pxRatio,
+        };
+    }
     init() {
         this._safeMutationObserver(obs => {
             obs.disconnect();
@@ -328,6 +275,16 @@ export class Canvas {
     }
     initPlugins() {
         this._resizePlugins = [];
+        this._colorPlugins = [];
+        this._canvasClearPlugins = [];
+        this._canvasPaintPlugins = [];
+        this._clearDrawPlugins = [];
+        this._drawParticlePlugins = [];
+        this._drawParticlesSetupPlugins = [];
+        this._drawParticlesCleanupPlugins = [];
+        this._drawPlugins = [];
+        this._drawSettingsSetupPlugins = [];
+        this._drawSettingsCleanupPlugins = [];
         for (const plugin of this.container.plugins) {
             if (plugin.resize) {
                 this._resizePlugins.push(plugin);
@@ -335,6 +292,33 @@ export class Canvas {
             if (plugin.particleFillColor ?? plugin.particleStrokeColor) {
                 this._colorPlugins.push(plugin);
             }
+            if (plugin.canvasClear) {
+                this._canvasClearPlugins.push(plugin);
+            }
+            if (plugin.canvasPaint) {
+                this._canvasPaintPlugins.push(plugin);
+            }
+            if (plugin.drawParticle) {
+                this._drawParticlePlugins.push(plugin);
+            }
+            if (plugin.drawParticleSetup) {
+                this._drawParticlesSetupPlugins.push(plugin);
+            }
+            if (plugin.drawParticleCleanup) {
+                this._drawParticlesCleanupPlugins.push(plugin);
+            }
+            if (plugin.draw) {
+                this._drawPlugins.push(plugin);
+            }
+            if (plugin.drawSettingsSetup) {
+                this._drawSettingsSetupPlugins.push(plugin);
+            }
+            if (plugin.drawSettingsCleanup) {
+                this._drawSettingsCleanupPlugins.push(plugin);
+            }
+            if (plugin.clearDraw) {
+                this._clearDrawPlugins.push(plugin);
+            }
         }
     }
     initUpdaters() {
@@ -366,12 +350,16 @@ export class Canvas {
         canvas.height = retinaSize.height = standardSize.height * pxRatio;
         canvas.width = retinaSize.width = standardSize.width * pxRatio;
         const canSupportHdrQuery = safeMatchMedia("(color-gamut: p3)");
-        this._context = this.element.getContext("2d", {
+        this._canvasSettings = {
             alpha: true,
             colorSpace: canSupportHdrQuery?.matches && container.hdr ? "display-p3" : "srgb",
             desynchronized: true,
             willReadFrequently: false,
-        });
+        };
+        this._context = this.element.getContext("2d", this._canvasSettings);
+        if (this._context) {
+            this._context.globalCompositeOperation = defaultCompositeValue;
+        }
         this._safeMutationObserver(obs => {
             obs.disconnect();
         });
@@ -386,11 +374,11 @@ export class Canvas {
     }
     paint() {
         let handled = false;
-        for (const plugin of this.container.plugins) {
+        for (const plugin of this._canvasPaintPlugins) {
+            handled = plugin.canvasPaint?.() ?? false;
             if (handled) {
                 break;
             }
-            handled = plugin.canvasPaint?.() ?? false;
         }
         if (handled) {
             return;
@@ -446,6 +434,10 @@ export class Canvas {
         this._pointerEvents = type;
         this._repairStyle();
     }
+    setZoom(zoomLevel, center) {
+        this.zoom = zoomLevel;
+        this._zoomCenter = center;
+    }
     stop() {
         this._safeMutationObserver(obs => {
             obs.disconnect();
@@ -466,4 +458,113 @@ export class Canvas {
             await container.refresh();
         }
     }
+    _applyPostDrawUpdaters = particle => {
+        for (const updater of this._postDrawUpdaters) {
+            updater.afterDraw?.(particle);
+        }
+    };
+    _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?.(particle);
+        }
+    };
+    _applyResizePlugins = () => {
+        for (const plugin of this._resizePlugins) {
+            plugin.resize?.();
+        }
+    };
+    _getPluginParticleColors = particle => {
+        let fColor, sColor;
+        for (const plugin of this._colorPlugins) {
+            if (!fColor && plugin.particleFillColor) {
+                fColor = rangeColorToHsl(this._engine, plugin.particleFillColor(particle));
+            }
+            if (!sColor && plugin.particleStrokeColor) {
+                sColor = rangeColorToHsl(this._engine, plugin.particleStrokeColor(particle));
+            }
+            if (fColor && sColor) {
+                break;
+            }
+        }
+        this._reusablePluginColors[fColorIndex] = fColor;
+        this._reusablePluginColors[sColorIndex] = sColor;
+        return this._reusablePluginColors;
+    };
+    _initStyle = () => {
+        const element = this.element, options = this.container.actualOptions;
+        if (!element) {
+            return;
+        }
+        if (this._fullScreen) {
+            this._setFullScreenStyle();
+        }
+        else {
+            this._resetOriginalStyle();
+        }
+        for (const key in options.style) {
+            if (!key || !(key in options.style)) {
+                continue;
+            }
+            const value = options.style[key];
+            if (!value) {
+                continue;
+            }
+            element.style.setProperty(key, value, "important");
+        }
+    };
+    _repairStyle = () => {
+        const element = this.element;
+        if (!element) {
+            return;
+        }
+        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 instanceof Node)) {
+                return;
+            }
+            observer.observe(element, { attributes: true });
+        });
+    };
+    _resetOriginalStyle = () => {
+        const element = this.element, originalStyle = this._originalStyle;
+        if (!element || !originalStyle) {
+            return;
+        }
+        setStyle(element, originalStyle, true);
+    };
+    _safeMutationObserver = callback => {
+        if (!this._mutationObserver) {
+            return;
+        }
+        callback(this._mutationObserver);
+    };
+    _setFullScreenStyle = () => {
+        const element = this.element;
+        if (!element) {
+            return;
+        }
+        setStyle(element, getFullScreenStyle(this.container.actualOptions.fullScreen.zIndex), true);
+    };
 }