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

package/browser/Core/Canvas.js

@@ -1,570 +0,0 @@
-import { clear, drawParticle, drawParticlePlugin, paintBase, paintImage } from "../Utils/CanvasUtils.js";
-import { cloneStyle, getFullScreenStyle, safeMatchMedia, safeMutationObserver } from "../Utils/Utils.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) {
-    const newValue = newFactor[key];
-    if (newValue !== undefined) {
-        factor[key] = (factor[key] ?? defaultTransformValue) * newValue;
-    }
-}
-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 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._engine = engine;
-        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._context = null;
-        this._generated = false;
-        this._preDrawUpdaters = [];
-        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;
-    }
-    canvasClear() {
-        if (!this.container.actualOptions.clear) {
-            return;
-        }
-        this.draw(ctx => {
-            clear(ctx, this.size);
-        });
-    }
-    clear() {
-        let pluginHandled = false;
-        for (const plugin of this._canvasClearPlugins) {
-            pluginHandled = plugin.canvasClear?.() ?? false;
-            if (pluginHandled) {
-                break;
-            }
-        }
-        if (pluginHandled) {
-            return;
-        }
-        this.canvasClear();
-    }
-    destroy() {
-        this.stop();
-        if (this._generated) {
-            const element = this.element;
-            element?.remove();
-            this.element = undefined;
-        }
-        else {
-            this._resetOriginalStyle();
-        }
-        this._preDrawUpdaters = [];
-        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;
-        if (!ctx) {
-            return;
-        }
-        return cb(ctx);
-    }
-    drawParticle(particle, delta) {
-        if (particle.spawning || particle.destroyed) {
-            return;
-        }
-        const radius = particle.getRadius();
-        if (radius <= minimumSize) {
-            return;
-        }
-        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, { 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 this._drawParticlesSetupPlugins) {
-                plugin.drawParticleSetup?.(context, particle, delta);
-            }
-            this._applyPreDrawUpdaters(context, particle, radius, opacity, colorStyles, transform);
-            drawParticle({
-                container,
-                context,
-                particle,
-                delta,
-                colorStyles,
-                radius: radius * zIndexFactor ** zIndexOptions.sizeRate,
-                opacity: opacity,
-                transform,
-            });
-            this._applyPostDrawUpdaters(particle);
-            for (const plugin of this._drawParticlesCleanupPlugins) {
-                plugin.drawParticleCleanup?.(context, particle, delta);
-            }
-        });
-    }
-    drawParticlePlugins(particle, delta) {
-        this.draw(ctx => {
-            for (const plugin of this._drawParticlePlugins) {
-                drawParticlePlugin(ctx, plugin, particle, delta);
-            }
-        });
-    }
-    drawParticles(delta) {
-        const { particles } = this.container;
-        this.clear();
-        particles.update(delta);
-        this.draw(ctx => {
-            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);
-            }
-        });
-    }
-    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.initUpdaters();
-        this.initPlugins();
-        this.paint();
-    }
-    initBackground() {
-        const { container } = this, options = container.actualOptions, background = options.background, element = this.element;
-        if (!element) {
-            return;
-        }
-        const elementStyle = element.style, color = rangeColorToRgb(this._engine, 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 = [];
-        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() {
-        this._preDrawUpdaters = [];
-        this._postDrawUpdaters = [];
-        for (const updater of this.container.particles.updaters) {
-            if (updater.afterDraw) {
-                this._postDrawUpdaters.push(updater);
-            }
-            if (updater.getColorStyles ?? updater.getTransformValues ?? updater.beforeDraw) {
-                this._preDrawUpdaters.push(updater);
-            }
-        }
-    }
-    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._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();
-        });
-        container.retina.init();
-        this.initBackground();
-        this._safeMutationObserver(obs => {
-            if (!this.element || !(this.element instanceof Node)) {
-                return;
-            }
-            obs.observe(this.element, { attributes: true });
-        });
-    }
-    paint() {
-        let handled = false;
-        for (const plugin of this._canvasPaintPlugins) {
-            handled = plugin.canvasPaint?.() ?? false;
-            if (handled) {
-                break;
-            }
-        }
-        if (handled) {
-            return;
-        }
-        this.paintBase();
-    }
-    paintBase(baseColor) {
-        this.draw(ctx => {
-            paintBase(ctx, this.size, baseColor);
-        });
-    }
-    paintImage(image, opacity) {
-        this.draw(ctx => {
-            paintImage(ctx, this.size, image, opacity);
-        });
-    }
-    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.draw(ctx => {
-            clear(ctx, this.size);
-        });
-    }
-    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();
-        }
-    }
-    _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);
-    };
-}