@tsparticles/engine 4.0.0-alpha.1 → 4.0.0-alpha.14

package/types/exports.d.ts

@@ -1,6 +1,4 @@
 export * from "./Core/Utils/Constants.js";
-export * from "./Core/Utils/ExternalInteractorBase.js";
-export * from "./Core/Utils/ParticlesInteractorBase.js";
 export * from "./Core/Utils/Point.js";
 export * from "./Core/Utils/Ranges.js";
 export * from "./Core/Utils/Vectors.js";
@@ -11,36 +9,20 @@ export * from "./Enums/Modes/AnimationMode.js";
 export * from "./Enums/Modes/LimitMode.js";
 export * from "./Enums/Modes/OutMode.js";
 export * from "./Enums/Modes/PixelMode.js";
-export * from "./Enums/Modes/ThemeMode.js";
-export * from "./Enums/Modes/ResponsiveMode.js";
 export * from "./Enums/Types/AlterType.js";
 export * from "./Enums/Types/DestroyType.js";
 export * from "./Enums/Types/GradientType.js";
-export * from "./Enums/Types/InteractorType.js";
 export * from "./Enums/Types/ParticleOutType.js";
 export * from "./Enums/Types/StartValueType.js";
-export * from "./Enums/Types/DivType.js";
 export * from "./Enums/Types/EasingType.js";
 export * from "./Enums/Types/EventType.js";
 export * from "./Enums/AnimationStatus.js";
-export * from "./Enums/InteractivityDetect.js";
 export * from "./Options/Classes/AnimatableColor.js";
 export * from "./Options/Classes/AnimationOptions.js";
 export * from "./Options/Classes/Background/Background.js";
 export * from "./Options/Classes/ColorAnimation.js";
 export * from "./Options/Classes/FullScreen/FullScreen.js";
 export * from "./Options/Classes/HslAnimation.js";
-export * from "./Options/Classes/Interactivity/Events/ClickEvent.js";
-export * from "./Options/Classes/Interactivity/Events/DivEvent.js";
-export * from "./Options/Classes/Interactivity/Events/ClickEvent.js";
-export * from "./Options/Classes/Interactivity/Events/DivEvent.js";
-export * from "./Options/Classes/Interactivity/Events/Events.js";
-export * from "./Options/Classes/Interactivity/Events/HoverEvent.js";
-export * from "./Options/Classes/Interactivity/Events/Parallax.js";
-export * from "./Options/Classes/Interactivity/Events/ResizeEvent.js";
-export * from "./Options/Classes/Interactivity/Interactivity.js";
-export * from "./Options/Classes/Interactivity/Modes/Modes.js";
-export * from "./Options/Classes/ManualParticle.js";
 export * from "./Options/Classes/Options.js";
 export * from "./Options/Classes/OptionsColor.js";
 export * from "./Options/Classes/Particles/Bounce/ParticlesBounce.js";
@@ -64,9 +46,7 @@ export * from "./Options/Classes/Particles/Shape/Shape.js";
 export * from "./Options/Classes/Particles/Size/Size.js";
 export * from "./Options/Classes/Particles/Size/SizeAnimation.js";
 export * from "./Options/Classes/Particles/ZIndex/ZIndex.js";
-export * from "./Options/Classes/Responsive.js";
-export * from "./Options/Classes/Theme/Theme.js";
-export * from "./Options/Classes/Theme/ThemeDefault.js";
+export * from "./Options/Classes/ResizeEvent.js";
 export * from "./Options/Classes/ValueWithRandom.js";
 export * from "./Utils/CanvasUtils.js";
 export * from "./Utils/ColorUtils.js";

package/umd/Core/Canvas.js

@@ -14,6 +14,7 @@
     const Utils_js_1 = require("../Utils/Utils.js");
     const Constants_js_1 = require("./Utils/Constants.js");
     const ColorUtils_js_1 = require("../Utils/ColorUtils.js");
+    const fColorIndex = 0, sColorIndex = 1;
     function setTransformValue(factor, newFactor, key) {
         const newValue = newFactor[key];
         if (newValue !== undefined) {
@@ -50,115 +51,35 @@
         }
     }
     class Canvas {
+        container;
+        element;
+        size;
+        _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;
         constructor(container, engine) {
             this.container = container;
-            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 = (0, ColorUtils_js_1.rangeColorToHsl)(this._engine, plugin.particleFillColor(particle));
-                    }
-                    if (!sColor && plugin.particleStrokeColor) {
-                        sColor = (0, ColorUtils_js_1.rangeColorToHsl)(this._engine, plugin.particleStrokeColor(particle));
-                    }
-                    if (fColor && sColor) {
-                        break;
-                    }
-                }
-                return [fColor, sColor];
-            };
-            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.prototype.hasOwnProperty.call(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, (0, Utils_js_1.getFullScreenStyle)(this.container.actualOptions.fullScreen.zIndex), true);
-            };
             this._engine = engine;
             this._standardSize = {
                 height: 0,
@@ -175,8 +96,20 @@
             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;
         }
@@ -190,9 +123,10 @@
         }
         clear() {
             let pluginHandled = false;
-            for (const plugin of this.container.plugins.values()) {
-                if (!pluginHandled && plugin.canvasClear) {
-                    pluginHandled = plugin.canvasClear();
+            for (const plugin of this._canvasClearPlugins) {
+                pluginHandled = plugin.canvasClear?.() ?? false;
+                if (pluginHandled) {
+                    break;
                 }
             }
             if (pluginHandled) {
@@ -200,11 +134,6 @@
             }
             this.canvasClear();
         }
-        clearDrawPlugin(plugin, delta) {
-            this.draw(ctx => {
-                (0, CanvasUtils_js_1.clearDrawPlugin)(ctx, plugin, delta);
-            });
-        }
         destroy() {
             this.stop();
             if (this._generated) {
@@ -219,6 +148,15 @@
             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;
@@ -242,22 +180,15 @@
             if (!fColor && !sColor) {
                 return;
             }
-            const container = this.container, 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 = {}, getFillStyle = () => {
-                if (!fColor) {
-                    return;
-                }
-                return (0, ColorUtils_js_1.getStyleFromHsl)(fColor, container.hdr, zOpacity);
-            }, colorStyles = {
-                fill: getFillStyle(),
-            }, getStrokestyle = () => {
-                if (!sColor) {
-                    return colorStyles.fill;
-                }
-                return (0, ColorUtils_js_1.getStyleFromHsl)(sColor, container.hdr, zStrokeOpacity);
-            };
-            colorStyles.stroke = getStrokestyle();
+            const container = this.container, zIndexOptions = particle.options.zIndex, zIndexFactor = Constants_js_1.zIndexFactorOffset - particle.zIndexFactor, { opacity, strokeOpacity } = particle.getOpacity(), transform = this._reusableTransform, colorStyles = this._reusableColorStyles, fill = fColor ? (0, ColorUtils_js_1.getStyleFromHsl)(fColor, container.hdr, opacity) : undefined, stroke = sColor ? (0, ColorUtils_js_1.getStyleFromHsl)(sColor, container.hdr, strokeOpacity) : fill;
+            transform.a = transform.b = transform.c = transform.d = undefined;
+            colorStyles.fill = fill;
+            colorStyles.stroke = stroke;
             this.draw((context) => {
-                this._applyPreDrawUpdaters(context, particle, radius, zOpacity, colorStyles, transform);
+                for (const plugin of this._drawParticlesSetupPlugins) {
+                    plugin.drawParticleSetup?.(context, particle, delta);
+                }
+                this._applyPreDrawUpdaters(context, particle, radius, opacity, colorStyles, transform);
                 (0, CanvasUtils_js_1.drawParticle)({
                     container,
                     context,
@@ -265,34 +196,40 @@
                     delta,
                     colorStyles,
                     radius: radius * zIndexFactor ** zIndexOptions.sizeRate,
-                    opacity: zOpacity,
+                    opacity: opacity,
                     transform,
                 });
+                this._applyPostDrawUpdaters(particle);
+                for (const plugin of this._drawParticlesCleanupPlugins) {
+                    plugin.drawParticleCleanup?.(context, particle, delta);
+                }
             });
-            this._applyPostDrawUpdaters(particle);
         }
-        drawParticlePlugin(plugin, particle, delta) {
+        drawParticlePlugins(particle, delta) {
             this.draw(ctx => {
-                (0, CanvasUtils_js_1.drawParticlePlugin)(ctx, plugin, particle, delta);
+                for (const plugin of this._drawParticlePlugins) {
+                    (0, CanvasUtils_js_1.drawParticlePlugin)(ctx, plugin, particle, delta);
+                }
             });
         }
         drawParticles(delta) {
-            const { particles, plugins } = this.container;
+            const { particles } = 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);
+                for (const plugin of this._drawSettingsSetupPlugins) {
+                    plugin.drawSettingsSetup?.(ctx, delta);
+                }
+                for (const plugin of this._drawPlugins) {
+                    plugin.draw?.(ctx, delta);
+                }
+                particles.drawParticles(delta);
+                for (const plugin of this._clearDrawPlugins) {
+                    plugin.clearDraw?.(ctx, delta);
+                }
+                for (const plugin of this._drawSettingsCleanupPlugins) {
+                    plugin.drawSettingsCleanup?.(ctx, delta);
+                }
             });
         }
         init() {
@@ -338,13 +275,50 @@
         }
         initPlugins() {
             this._resizePlugins = [];
-            for (const plugin of this.container.plugins.values()) {
+            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);
                 }
                 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() {
@@ -376,12 +350,13 @@
             canvas.height = retinaSize.height = standardSize.height * pxRatio;
             canvas.width = retinaSize.width = standardSize.width * pxRatio;
             const canSupportHdrQuery = (0, Utils_js_1.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);
             this._safeMutationObserver(obs => {
                 obs.disconnect();
             });
@@ -396,11 +371,11 @@
         }
         paint() {
             let handled = false;
-            for (const plugin of this.container.plugins.values()) {
+            for (const plugin of this._canvasPaintPlugins) {
+                handled = plugin.canvasPaint?.() ?? false;
                 if (handled) {
                     break;
                 }
-                handled = plugin.canvasPaint?.() ?? false;
             }
             if (handled) {
                 return;
@@ -476,6 +451,115 @@
                 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 = (0, ColorUtils_js_1.rangeColorToHsl)(this._engine, plugin.particleFillColor(particle));
+                }
+                if (!sColor && plugin.particleStrokeColor) {
+                    sColor = (0, ColorUtils_js_1.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 || !Object.hasOwn(options.style, key)) {
+                    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, (0, Utils_js_1.getFullScreenStyle)(this.container.actualOptions.fullScreen.zIndex), true);
+        };
     }
     exports.Canvas = Canvas;
 });