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

package/browser/Utils/Utils.js

@@ -8,16 +8,70 @@ import { OutModeDirection } from "../Enums/Directions/OutModeDirection.js";
 import { PixelMode } from "../Enums/Modes/PixelMode.js";
 import { StartValueType } from "../Enums/Types/StartValueType.js";
 import { Vector } from "../Core/Utils/Vectors.js";
-const minRadius = 0;
-function memoize(fn) {
-    const cache = new Map();
+const minRadius = 0, minMemoizeSize = 0;
+export function memoize(fn, options) {
+    const cache = new Map(), maxSize = options?.maxSize, ttlMs = options?.ttlMs, keyFn = options?.keyFn, stableStringify = (obj, seen = new WeakSet()) => {
+        if (obj === null) {
+            return "null";
+        }
+        const t = typeof obj;
+        if (t === "undefined") {
+            return "undefined";
+        }
+        if (t === "number" || t === "boolean" || t === "string") {
+            return JSON.stringify(obj);
+        }
+        if (t === "function") {
+            try {
+                const fn = obj;
+                return fn.toString();
+            }
+            catch {
+                return '"[Function]"';
+            }
+        }
+        if (t === "symbol") {
+            try {
+                return obj.toString();
+            }
+            catch {
+                return '"[Symbol]"';
+            }
+        }
+        if (Array.isArray(obj)) {
+            return `[${obj.map(i => stableStringify(i, seen)).join(",")}]`;
+        }
+        if (seen.has(obj)) {
+            return '"[Circular]"';
+        }
+        seen.add(obj);
+        const keys = Object.keys(obj).sort();
+        return `{${keys.map(k => `${JSON.stringify(k)}:${stableStringify(obj[k], seen)}`).join(",")}}`;
+    }, defaultKeyer = (args) => stableStringify(args), makeKey = (args) => (keyFn ? keyFn(args) : defaultKeyer(args)), ensureBounds = () => {
+        if (typeof maxSize === "number" && maxSize >= minMemoizeSize) {
+            while (cache.size > maxSize) {
+                const firstKey = cache.keys().next().value;
+                if (firstKey === undefined)
+                    break;
+                cache.delete(firstKey);
+            }
+        }
+    };
     return (...args) => {
-        const key = JSON.stringify(args);
-        if (cache.has(key)) {
-            return cache.get(key);
+        const key = makeKey(args), now = Date.now(), entry = cache.get(key);
+        if (entry !== undefined) {
+            if (ttlMs && now - entry.ts > ttlMs) {
+                cache.delete(key);
+            }
+            else {
+                cache.delete(key);
+                cache.set(key, { value: entry.value, ts: entry.ts });
+                return entry.value;
+            }
         }
         const result = fn(...args);
-        cache.set(key, result);
+        cache.set(key, { value: result, ts: now });
+        ensureBounds();
         return result;
     };
 }
@@ -48,13 +102,6 @@ export function safeMutationObserver(callback) {
 export function isInArray(value, array) {
     return value === array || (isArray(array) && array.includes(value));
 }
-export async function loadFont(font, weight) {
-    try {
-        await safeDocument().fonts.load(`${weight ?? "400"} 36px '${font ?? "Verdana"}'`);
-    }
-    catch {
-    }
-}
 export function arrayRandomIndex(array) {
     return Math.floor(getRandom() * array.length);
 }
@@ -90,33 +137,48 @@ export function calculateBounds(point, radius) {
 }
 export function deepExtend(destination, ...sources) {
     for (const source of sources) {
-        if (source === undefined || source === null) {
+        if (isNull(source)) {
             continue;
         }
         if (!isObject(source)) {
             destination = source;
             continue;
         }
-        const sourceIsArray = Array.isArray(source);
-        if (sourceIsArray) {
+        if (Array.isArray(source)) {
             if (!Array.isArray(destination)) {
                 destination = [];
             }
         }
-        else {
-            if (!isObject(destination) || Array.isArray(destination)) {
-                destination = {};
+        else if (!isObject(destination) || Array.isArray(destination)) {
+            destination = {};
+        }
+        const sourceKeys = Object.keys(source), dangerousKeys = new Set(["__proto__", "constructor", "prototype"]), hasNested = sourceKeys.some(k => {
+            const v = source[k];
+            return isObject(v) || Array.isArray(v);
+        });
+        if (!hasNested) {
+            const sourceDict = source, destDict = destination;
+            for (const key of sourceKeys) {
+                if (dangerousKeys.has(key)) {
+                    continue;
+                }
+                if (key in sourceDict) {
+                    const v = sourceDict[key];
+                    if (v !== undefined) {
+                        destDict[key] = v;
+                    }
+                }
             }
+            continue;
         }
-        for (const key in source) {
-            if (key === "__proto__") {
+        for (const key of sourceKeys) {
+            if (dangerousKeys.has(key)) {
                 continue;
             }
-            const sourceDict = source, value = sourceDict[key], destDict = destination;
-            destDict[key] =
-                isObject(value) && Array.isArray(value)
-                    ? value.map(v => deepExtend(destDict[key], v))
-                    : deepExtend(destDict[key], value);
+            const sourceDict = source, destDict = destination, value = sourceDict[key];
+            destDict[key] = Array.isArray(value)
+                ? value.map(v => deepExtend(undefined, v))
+                : deepExtend(destDict[key], value);
         }
     }
     return destination;
@@ -178,6 +240,8 @@ export function initParticleNumericAnimationValue(options, pxRatio) {
             case AnimationMode.random:
                 res.status = getRandom() >= half ? AnimationStatus.increasing : AnimationStatus.decreasing;
                 break;
+            default:
+                break;
         }
         const autoStatus = animationOptions.mode === AnimationMode.auto;
         switch (animationOptions.startValue) {
@@ -243,6 +307,8 @@ function checkDestroy(particle, destroyType, value, minValue, maxValue) {
                 particle.destroy();
             }
             break;
+        default:
+            break;
     }
 }
 export function updateAnimation(particle, data, changeDirection, destroyType, delta) {
@@ -290,6 +356,9 @@ export function updateAnimation(particle, data, changeDirection, destroyType, de
             else {
                 data.value -= velocity;
             }
+            break;
+        default:
+            break;
     }
     if (data.velocity && decay !== identity) {
         data.velocity *= decay;
@@ -301,7 +370,7 @@ export function cloneStyle(style) {
     const clonedStyle = safeDocument().createElement("div").style;
     for (const key in style) {
         const styleKey = style[key];
-        if (!Object.hasOwn(style, key) || isNull(styleKey)) {
+        if (!(key in style) || isNull(styleKey)) {
             continue;
         }
         const styleValue = style.getPropertyValue?.(styleKey);
@@ -309,11 +378,11 @@ export function cloneStyle(style) {
             continue;
         }
         const stylePriority = style.getPropertyPriority?.(styleKey);
-        if (!stylePriority) {
-            clonedStyle.setProperty(styleKey, styleValue);
+        if (stylePriority) {
+            clonedStyle.setProperty(styleKey, styleValue, stylePriority);
         }
         else {
-            clonedStyle.setProperty(styleKey, styleValue, stylePriority);
+            clonedStyle.setProperty(styleKey, styleValue);
         }
     }
     return clonedStyle;
@@ -365,3 +434,12 @@ export async function getItemsFromInitializer(container, map, initializers, forc
     }
     return res;
 }
+export async function getItemMapFromInitializer(container, map, initializers, force = false) {
+    let res = map.get(container);
+    if (!res || force) {
+        const entries = await Promise.all([...initializers.entries()].map(([key, initializer]) => initializer(container).then(item => [key, item])));
+        res = new Map(entries);
+        map.set(container, res);
+    }
+    return res;
+}

package/browser/exports.js

@@ -1,5 +1,4 @@
 export * from "./Core/Utils/Constants.js";
-export * from "./Core/Utils/Point.js";
 export * from "./Core/Utils/Ranges.js";
 export * from "./Core/Utils/Vectors.js";
 export * from "./Enums/Directions/MoveDirection.js";
@@ -28,8 +27,8 @@ export * from "./Options/Classes/OptionsColor.js";
 export * from "./Options/Classes/Particles/Bounce/ParticlesBounce.js";
 export * from "./Options/Classes/Particles/Bounce/ParticlesBounceFactor.js";
 export * from "./Options/Classes/Particles/ParticlesOptions.js";
+export * from "./Options/Classes/Particles/Fill.js";
 export * from "./Options/Classes/Particles/Stroke.js";
-export * from "./Options/Classes/Particles/Move/MoveAttract.js";
 export * from "./Options/Classes/Particles/Move/Move.js";
 export * from "./Options/Classes/Particles/Move/MoveAngle.js";
 export * from "./Options/Classes/Particles/Move/MoveCenter.js";

package/cjs/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);
+    };
+}