@tsparticles/engine 4.0.0-beta.0 → 4.0.0-beta.10

package/browser/Core/CanvasManager.js

@@ -0,0 +1,303 @@
+import { cloneStyle, getFullScreenStyle, safeMatchMedia, safeMutationObserver } from "../Utils/Utils.js";
+import { defaultZoom, generatedAttribute, half } from "./Utils/Constants.js";
+import { getStyleFromRgb, rangeColorToRgb } from "../Utils/ColorUtils.js";
+import { RenderManager } from "./RenderManager.js";
+function setStyle(canvas, style, important = false) {
+    if (!style) {
+        return;
+    }
+    const element = canvas, elementStyle = element.style, keys = new Set();
+    for (let i = 0; i < elementStyle.length; i++) {
+        const key = elementStyle.item(i);
+        if (!key) {
+            continue;
+        }
+        keys.add(key);
+    }
+    for (let i = 0; i < style.length; i++) {
+        const key = style.item(i);
+        if (!key) {
+            continue;
+        }
+        keys.add(key);
+    }
+    for (const key of keys) {
+        const value = style.getPropertyValue(key);
+        if (value) {
+            elementStyle.setProperty(key, value, important ? "important" : "");
+        }
+        else {
+            elementStyle.removeProperty(key);
+        }
+    }
+}
+export class CanvasManager {
+    element;
+    render;
+    size;
+    zoom = defaultZoom;
+    _container;
+    _generated;
+    _mutationObserver;
+    _originalStyle;
+    _pluginManager;
+    _pointerEvents;
+    _resizePlugins;
+    _standardSize;
+    _zoomCenter;
+    constructor(pluginManager, container) {
+        this._pluginManager = pluginManager;
+        this._container = container;
+        this.render = new RenderManager(pluginManager, container, this);
+        this._standardSize = {
+            height: 0,
+            width: 0,
+        };
+        const pxRatio = container.retina.pixelRatio, stdSize = this._standardSize;
+        this.size = {
+            height: stdSize.height * pxRatio,
+            width: stdSize.width * pxRatio,
+        };
+        this._generated = false;
+        this._resizePlugins = [];
+        this._pointerEvents = "none";
+    }
+    get _fullScreen() {
+        return this._container.actualOptions.fullScreen.enable;
+    }
+    destroy() {
+        this.stop();
+        if (this._generated) {
+            const element = this.element;
+            element?.remove();
+            this.element = undefined;
+        }
+        else {
+            this._resetOriginalStyle();
+        }
+        this.render.destroy();
+        this._resizePlugins = [];
+    }
+    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();
+        });
+        this._mutationObserver = safeMutationObserver(records => {
+            for (const record of records) {
+                if (record.type === "attributes" && record.attributeName === "style") {
+                    this._repairStyle();
+                }
+            }
+        });
+        this.resize();
+        this._initStyle();
+        this.initBackground();
+        this._safeMutationObserver(obs => {
+            if (!this.element || !(this.element instanceof Node)) {
+                return;
+            }
+            obs.observe(this.element, { attributes: true });
+        });
+        this.initPlugins();
+        this.render.init();
+    }
+    initBackground() {
+        const { _container } = this, options = _container.actualOptions, background = options.background, element = this.element;
+        if (!element) {
+            return;
+        }
+        const elementStyle = element.style, color = rangeColorToRgb(this._pluginManager, background.color);
+        if (color) {
+            elementStyle.backgroundColor = getStyleFromRgb(color, _container.hdr, background.opacity);
+        }
+        else {
+            elementStyle.backgroundColor = "";
+        }
+        elementStyle.backgroundImage = background.image || "";
+        elementStyle.backgroundPosition = background.position || "";
+        elementStyle.backgroundRepeat = background.repeat || "";
+        elementStyle.backgroundSize = background.size || "";
+    }
+    initPlugins() {
+        this._resizePlugins = [];
+        for (const plugin of this._container.plugins) {
+            if (plugin.resize) {
+                this._resizePlugins.push(plugin);
+            }
+        }
+    }
+    loadCanvas(canvas) {
+        if (this._generated && this.element) {
+            this.element.remove();
+        }
+        const container = this._container;
+        this._generated =
+            generatedAttribute in canvas.dataset ? canvas.dataset[generatedAttribute] === "true" : this._generated;
+        this.element = canvas;
+        this.element.ariaHidden = "true";
+        this._originalStyle = cloneStyle(this.element.style);
+        const standardSize = this._standardSize;
+        standardSize.height = canvas.offsetHeight;
+        standardSize.width = canvas.offsetWidth;
+        const pxRatio = this._container.retina.pixelRatio, retinaSize = this.size;
+        canvas.height = retinaSize.height = standardSize.height * pxRatio;
+        canvas.width = retinaSize.width = standardSize.width * pxRatio;
+        const canSupportHdrQuery = safeMatchMedia("(color-gamut: p3)");
+        this.render.setContextSettings({
+            alpha: true,
+            colorSpace: canSupportHdrQuery?.matches && container.hdr ? "display-p3" : "srgb",
+            desynchronized: true,
+            willReadFrequently: false,
+        });
+        this.render.setContext(this.element.getContext("2d", this.render.settings));
+        this._safeMutationObserver(obs => {
+            obs.disconnect();
+        });
+        container.retina.init();
+        this.initBackground();
+        this._safeMutationObserver(obs => {
+            if (!this.element || !(this.element instanceof Node)) {
+                return;
+            }
+            obs.observe(this.element, { attributes: true });
+        });
+    }
+    resize() {
+        if (!this.element) {
+            return false;
+        }
+        const container = this._container, currentSize = container.canvas._standardSize, newSize = {
+            width: this.element.offsetWidth,
+            height: this.element.offsetHeight,
+        }, pxRatio = container.retina.pixelRatio, retinaSize = {
+            width: newSize.width * pxRatio,
+            height: newSize.height * pxRatio,
+        };
+        if (newSize.height === currentSize.height &&
+            newSize.width === currentSize.width &&
+            retinaSize.height === this.element.height &&
+            retinaSize.width === this.element.width) {
+            return false;
+        }
+        const oldSize = { ...currentSize };
+        currentSize.height = newSize.height;
+        currentSize.width = newSize.width;
+        const canvasSize = this.size;
+        this.element.width = canvasSize.width = retinaSize.width;
+        this.element.height = canvasSize.height = retinaSize.height;
+        if (this._container.started) {
+            container.particles.setResizeFactor({
+                width: currentSize.width / oldSize.width,
+                height: currentSize.height / oldSize.height,
+            });
+        }
+        return true;
+    }
+    setPointerEvents(type) {
+        const element = this.element;
+        if (!element) {
+            return;
+        }
+        this._pointerEvents = type;
+        this._repairStyle();
+    }
+    setZoom(zoomLevel, center) {
+        this.zoom = zoomLevel;
+        this._zoomCenter = center;
+    }
+    stop() {
+        this._safeMutationObserver(obs => {
+            obs.disconnect();
+        });
+        this._mutationObserver = undefined;
+        this.render.stop();
+    }
+    async windowResize() {
+        if (!this.element || !this.resize()) {
+            return;
+        }
+        const container = this._container, needsRefresh = container.updateActualOptions();
+        container.particles.setDensity();
+        this._applyResizePlugins();
+        if (needsRefresh) {
+            await container.refresh();
+        }
+    }
+    _applyResizePlugins = () => {
+        for (const plugin of this._resizePlugins) {
+            plugin.resize?.();
+        }
+    };
+    _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);
+    };
+}

package/browser/Core/Container.js

@@ -1,10 +1,10 @@
 import { animate, cancelAnimation, getRangeValue } from "../Utils/MathUtils.js";
-import { defaultFps, defaultFpsLimit, millisecondsToSeconds, minFpsLimit, removeDeleteCount, removeMinIndex, } from "./Utils/Constants.js";
-import { Canvas } from "./Canvas.js";
+import { defaultFps, defaultFpsLimit, millisecondsToSeconds, minFpsLimit } from "./Utils/Constants.js";
+import { CanvasManager } from "./CanvasManager.js";
 import { EventListeners } from "./Utils/EventListeners.js";
 import { EventType } from "../Enums/Types/EventType.js";
 import { Options } from "../Options/Classes/Options.js";
-import { Particles } from "./Particles.js";
+import { ParticlesManager } from "./ParticlesManager.js";
 import { Retina } from "./Retina.js";
 import { getLogger } from "../Utils/LogUtils.js";
 import { loadOptions } from "../Utils/OptionsUtils.js";
@@ -15,8 +15,8 @@ function updateDelta(delta, value, fpsLimit = defaultFps, smooth = false) {
     delta.value = value;
     delta.factor = smooth ? defaultFps / fpsLimit : (defaultFps * value) / millisecondsToSeconds;
 }
-function loadContainerOptions(engine, container, ...sourceOptionsArr) {
-    const options = new Options(engine, container);
+function loadContainerOptions(pluginManager, container, ...sourceOptionsArr) {
+    const options = new Options(pluginManager, container);
     loadOptions(options, ...sourceOptionsArr);
     return options;
 }
@@ -24,6 +24,7 @@ export class Container {
     actualOptions;
     canvas;
     destroyed;
+    effectDrawers;
     fpsLimit;
     hdr;
     id;
@@ -31,28 +32,35 @@ export class Container {
     particleCreatedPlugins;
     particleDestroyedPlugins;
     particlePositionPlugins;
+    particleUpdaters;
     particles;
     plugins;
     retina;
+    shapeDrawers;
     started;
     zLayers;
     _delay;
     _delayTimeout;
     _delta = { value: 0, factor: 0 };
+    _dispatchCallback;
     _drawAnimationFrame;
     _duration;
-    _engine;
     _eventListeners;
     _firstStart;
     _initialSourceOptions;
     _lastFrameTime;
     _lifeTime;
+    _onDestroy;
     _options;
     _paused;
+    _pluginManager;
     _smooth;
     _sourceOptions;
-    constructor(engine, id, sourceOptions) {
-        this._engine = engine;
+    constructor(params) {
+        const { dispatchCallback, pluginManager, id, onDestroy, sourceOptions } = params;
+        this._pluginManager = pluginManager;
+        this._dispatchCallback = dispatchCallback;
+        this._onDestroy = onDestroy;
         this.id = Symbol(id);
         this.fpsLimit = 120;
         this.hdr = false;
@@ -69,17 +77,20 @@ export class Container {
         this.pageHidden = false;
         this._sourceOptions = sourceOptions;
         this._initialSourceOptions = sourceOptions;
+        this.effectDrawers = new Map();
+        this.shapeDrawers = new Map();
+        this.particleUpdaters = [];
         this.retina = new Retina(this);
-        this.canvas = new Canvas(this, this._engine);
-        this.particles = new Particles(this._engine, this);
+        this.canvas = new CanvasManager(this._pluginManager, this);
+        this.particles = new ParticlesManager(this._pluginManager, this);
         this.plugins = [];
         this.particleDestroyedPlugins = [];
         this.particleCreatedPlugins = [];
         this.particlePositionPlugins = [];
-        this._options = loadContainerOptions(this._engine, this);
-        this.actualOptions = loadContainerOptions(this._engine, this);
+        this._options = loadContainerOptions(this._pluginManager, this);
+        this.actualOptions = loadContainerOptions(this._pluginManager, this);
         this._eventListeners = new EventListeners(this);
-        this._engine.dispatchEvent(EventType.containerBuilt, { container: this });
+        this.dispatchEvent(EventType.containerBuilt);
     }
     get animationStatus() {
         return !this._paused && !this.pageHidden && guardCheck(this);
@@ -103,19 +114,29 @@ export class Container {
         this.stop();
         this.particles.destroy();
         this.canvas.destroy();
+        for (const [, effectDrawer] of this.effectDrawers) {
+            effectDrawer.destroy?.(this);
+        }
+        for (const [, shapeDrawer] of this.shapeDrawers) {
+            shapeDrawer.destroy?.(this);
+        }
         for (const plugin of this.plugins) {
             plugin.destroy?.();
         }
+        this.effectDrawers = new Map();
+        this.shapeDrawers = new Map();
+        this.particleUpdaters = [];
         this.plugins.length = 0;
-        this._engine.clearPlugins(this);
+        this._pluginManager.clearPlugins(this);
         this.destroyed = true;
-        if (remove) {
-            const mainArr = this._engine.items, idx = mainArr.indexOf(this);
-            if (idx >= removeMinIndex) {
-                mainArr.splice(idx, removeDeleteCount);
-            }
-        }
-        this._engine.dispatchEvent(EventType.containerDestroyed, { container: this });
+        this._onDestroy(remove);
+        this.dispatchEvent(EventType.containerDestroyed);
+    }
+    dispatchEvent(type, data) {
+        this._dispatchCallback(type, {
+            container: this,
+            data,
+        });
     }
     draw(force) {
         if (!guardCheck(this)) {
@@ -149,16 +170,16 @@ export class Container {
             return;
         }
         const allContainerPlugins = new Map();
-        for (const plugin of this._engine.plugins) {
+        for (const plugin of this._pluginManager.plugins) {
             const containerPlugin = await plugin.getPlugin(this);
             if (containerPlugin.preInit) {
                 await containerPlugin.preInit();
             }
             allContainerPlugins.set(plugin, containerPlugin);
         }
-        await this.particles.initPlugins();
-        this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);
-        this.actualOptions = loadContainerOptions(this._engine, this, this._options);
+        await this.initDrawersAndUpdaters();
+        this._options = loadContainerOptions(this._pluginManager, this, this._initialSourceOptions, this.sourceOptions);
+        this.actualOptions = loadContainerOptions(this._pluginManager, this, this._options);
         this.plugins.length = 0;
         this.particleDestroyedPlugins.length = 0;
         this.particleCreatedPlugins.length = 0;
@@ -194,12 +215,18 @@ export class Container {
             await plugin.init?.();
         }
         await this.particles.init();
-        this._engine.dispatchEvent(EventType.containerInit, { container: this });
+        this.dispatchEvent(EventType.containerInit);
         this.particles.setDensity();
         for (const plugin of this.plugins) {
             plugin.particlesSetup?.();
         }
-        this._engine.dispatchEvent(EventType.particlesSetup, { container: this });
+        this.dispatchEvent(EventType.particlesSetup);
+    }
+    async initDrawersAndUpdaters() {
+        const pluginManager = this._pluginManager;
+        this.effectDrawers = await pluginManager.getEffectDrawers(this, true);
+        this.shapeDrawers = await pluginManager.getShapeDrawers(this, true);
+        this.particleUpdaters = await pluginManager.getUpdaters(this, true);
     }
     pause() {
         if (!guardCheck(this)) {
@@ -218,7 +245,7 @@ export class Container {
         if (!this.pageHidden) {
             this._paused = true;
         }
-        this._engine.dispatchEvent(EventType.containerPaused, { container: this });
+        this.dispatchEvent(EventType.containerPaused);
     }
     play(force) {
         if (!guardCheck(this)) {
@@ -239,7 +266,7 @@ export class Container {
                 }
             }
         }
-        this._engine.dispatchEvent(EventType.containerPlay, { container: this });
+        this.dispatchEvent(EventType.containerPlay);
         this.draw(needsUpdate ?? false);
     }
     async refresh() {
@@ -255,8 +282,8 @@ export class Container {
         }
         this._initialSourceOptions = sourceOptions;
         this._sourceOptions = sourceOptions;
-        this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);
-        this.actualOptions = loadContainerOptions(this._engine, this, this._options);
+        this._options = loadContainerOptions(this._pluginManager, this, this._initialSourceOptions, this.sourceOptions);
+        this.actualOptions = loadContainerOptions(this._pluginManager, this, this._options);
         return this.refresh();
     }
     async start() {
@@ -271,7 +298,7 @@ export class Container {
                 for (const plugin of this.plugins) {
                     await plugin.start?.();
                 }
-                this._engine.dispatchEvent(EventType.containerStarted, { container: this });
+                this.dispatchEvent(EventType.containerStarted);
                 this.play();
                 resolve();
             };
@@ -299,7 +326,7 @@ export class Container {
         this.particleDestroyedPlugins.length = 0;
         this.particlePositionPlugins.length = 0;
         this._sourceOptions = this._options;
-        this._engine.dispatchEvent(EventType.containerStopped, { container: this });
+        this.dispatchEvent(EventType.containerStopped);
     }
     updateActualOptions() {
         let refresh = false;
@@ -326,7 +353,7 @@ export class Container {
                 this.draw(false);
                 return;
             }
-            this.canvas.drawParticles(this._delta);
+            this.canvas.render.drawParticles(this._delta);
             if (!this.alive()) {
                 this.destroy();
                 return;