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

package/umd/Core/Canvas.js

@@ -1,483 +0,0 @@
-(function (factory) {
-    if (typeof module === "object" && typeof module.exports === "object") {
-        var v = factory(require, exports);
-        if (v !== undefined) module.exports = v;
-    }
-    else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../Utils/CanvasUtils.js", "../Utils/Utils.js", "./Utils/Constants.js", "../Utils/ColorUtils.js"], factory);
-    }
-})(function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.Canvas = void 0;
-    const CanvasUtils_js_1 = require("../Utils/CanvasUtils.js");
-    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) {
-            factor[key] = (factor[key] ?? Constants_js_1.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);
-            }
-        }
-    }
-    class Canvas {
-        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 = (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;
-            };
-            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, (0, Utils_js_1.getFullScreenStyle)(this.container.actualOptions.fullScreen.zIndex), true);
-            };
-            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._pointerEvents = "none";
-        }
-        get _fullScreen() {
-            return this.container.actualOptions.fullScreen.enable;
-        }
-        canvasClear() {
-            if (!this.container.actualOptions.clear) {
-                return;
-            }
-            this.draw(ctx => {
-                (0, CanvasUtils_js_1.clear)(ctx, this.size);
-            });
-        }
-        clear() {
-            let pluginHandled = false;
-            for (const plugin of this.container.plugins) {
-                if (!pluginHandled && plugin.canvasClear) {
-                    pluginHandled = plugin.canvasClear();
-                }
-            }
-            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 = [];
-        }
-        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 <= Constants_js_1.minimumSize) {
-                return;
-            }
-            const pfColor = particle.getFillColor(), psColor = particle.getStrokeColor() ?? pfColor;
-            let [fColor, sColor] = this._getPluginParticleColors(particle);
-            fColor ??= pfColor;
-            sColor ??= psColor;
-            if (!fColor && !sColor) {
-                return;
-            }
-            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) => {
-                for (const plugin of container.plugins) {
-                    if (plugin.drawParticleSetup) {
-                        plugin.drawParticleSetup(context, particle, delta);
-                    }
-                }
-                this._applyPreDrawUpdaters(context, particle, radius, opacity, colorStyles, transform);
-                (0, CanvasUtils_js_1.drawParticle)({
-                    container,
-                    context,
-                    particle,
-                    delta,
-                    colorStyles,
-                    radius: radius * zIndexFactor ** zIndexOptions.sizeRate,
-                    opacity: opacity,
-                    transform,
-                });
-                this._applyPostDrawUpdaters(particle);
-                for (const plugin of container.plugins) {
-                    if (plugin.drawParticleCleanup) {
-                        plugin.drawParticleCleanup(context, particle, delta);
-                    }
-                }
-            });
-        }
-        drawParticlePlugin(plugin, particle, delta) {
-            this.draw(ctx => {
-                (0, CanvasUtils_js_1.drawParticlePlugin)(ctx, plugin, particle, delta);
-            });
-        }
-        drawParticles(delta) {
-            const { particles, plugins } = this.container;
-            this.clear();
-            particles.update(delta);
-            this.draw(ctx => {
-                for (const plugin of plugins) {
-                    plugin.drawSettingsSetup?.(ctx, delta);
-                }
-                for (const plugin of plugins) {
-                    plugin.draw?.(ctx, delta);
-                }
-                particles.drawParticles(delta);
-                for (const plugin of plugins) {
-                    plugin.clearDraw?.(ctx, delta);
-                }
-                for (const plugin of plugins) {
-                    plugin.drawSettingsCleanup?.(ctx, delta);
-                }
-            });
-        }
-        init() {
-            this._safeMutationObserver(obs => {
-                obs.disconnect();
-            });
-            this._mutationObserver = (0, Utils_js_1.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 = (0, ColorUtils_js_1.rangeColorToRgb)(this._engine, background.color);
-            if (color) {
-                elementStyle.backgroundColor = (0, ColorUtils_js_1.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);
-                }
-                if (plugin.particleFillColor ?? plugin.particleStrokeColor) {
-                    this._colorPlugins.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 =
-                Constants_js_1.generatedAttribute in canvas.dataset ? canvas.dataset[Constants_js_1.generatedAttribute] === "true" : this._generated;
-            this.element = canvas;
-            this.element.ariaHidden = "true";
-            this._originalStyle = (0, Utils_js_1.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 = (0, Utils_js_1.safeMatchMedia)("(color-gamut: p3)");
-            this._context = this.element.getContext("2d", {
-                alpha: true,
-                colorSpace: canSupportHdrQuery?.matches && container.hdr ? "display-p3" : "srgb",
-                desynchronized: true,
-                willReadFrequently: false,
-            });
-            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.container.plugins) {
-                if (handled) {
-                    break;
-                }
-                handled = plugin.canvasPaint?.() ?? false;
-            }
-            if (handled) {
-                return;
-            }
-            this.paintBase();
-        }
-        paintBase(baseColor) {
-            this.draw(ctx => {
-                (0, CanvasUtils_js_1.paintBase)(ctx, this.size, baseColor);
-            });
-        }
-        paintImage(image, opacity) {
-            this.draw(ctx => {
-                (0, CanvasUtils_js_1.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();
-        }
-        stop() {
-            this._safeMutationObserver(obs => {
-                obs.disconnect();
-            });
-            this._mutationObserver = undefined;
-            this.draw(ctx => {
-                (0, CanvasUtils_js_1.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();
-            }
-        }
-    }
-    exports.Canvas = Canvas;
-});

package/umd/Core/Utils/Point.js

@@ -1,20 +0,0 @@
-(function (factory) {
-    if (typeof module === "object" && typeof module.exports === "object") {
-        var v = factory(require, exports);
-        if (v !== undefined) module.exports = v;
-    }
-    else if (typeof define === "function" && define.amd) {
-        define(["require", "exports"], factory);
-    }
-})(function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.Point = void 0;
-    class Point {
-        constructor(position, particle) {
-            this.position = position;
-            this.particle = particle;
-        }
-    }
-    exports.Point = Point;
-});

package/umd/Core/Utils/QuadTree.js

@@ -1,73 +0,0 @@
-(function (factory) {
-    if (typeof module === "object" && typeof module.exports === "object") {
-        var v = factory(require, exports);
-        if (v !== undefined) module.exports = v;
-    }
-    else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Ranges.js", "./Constants.js", "../../Utils/MathUtils.js"], factory);
-    }
-})(function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.QuadTree = void 0;
-    const Ranges_js_1 = require("./Ranges.js");
-    const Constants_js_1 = require("./Constants.js");
-    const MathUtils_js_1 = require("../../Utils/MathUtils.js");
-    class QuadTree {
-        constructor(rectangle, capacity) {
-            this.rectangle = rectangle;
-            this.capacity = capacity;
-            this._subdivide = () => {
-                const { x, y } = this.rectangle.position, { width, height } = this.rectangle.size, { capacity } = this;
-                for (let i = 0; i < Constants_js_1.subdivideCount; i++) {
-                    const fixedIndex = i % Constants_js_1.double;
-                    this._subs.push(new QuadTree(new Ranges_js_1.Rectangle(x + width * Constants_js_1.half * fixedIndex, y + height * Constants_js_1.half * (Math.round(i * Constants_js_1.half) - fixedIndex), width * Constants_js_1.half, height * Constants_js_1.half), capacity));
-                }
-                this._divided = true;
-            };
-            this._points = [];
-            this._divided = false;
-            this._subs = [];
-        }
-        insert(point) {
-            if (!this.rectangle.contains(point.position)) {
-                return false;
-            }
-            if (this._points.length < this.capacity) {
-                this._points.push(point);
-                return true;
-            }
-            if (!this._divided) {
-                this._subdivide();
-            }
-            return this._subs.some(sub => sub.insert(point));
-        }
-        query(range, check) {
-            const res = [];
-            if (!range.intersects(this.rectangle)) {
-                return [];
-            }
-            for (const p of this._points) {
-                if (!range.contains(p.position) &&
-                    (0, MathUtils_js_1.getDistance)(range.position, p.position) > p.particle.getRadius() &&
-                    (!check || check(p.particle))) {
-                    continue;
-                }
-                res.push(p.particle);
-            }
-            if (this._divided) {
-                for (const sub of this._subs) {
-                    res.push(...sub.query(range, check));
-                }
-            }
-            return res;
-        }
-        queryCircle(position, radius, check) {
-            return this.query(new Ranges_js_1.Circle(position.x, position.y, radius), check);
-        }
-        queryRectangle(position, size, check) {
-            return this.query(new Ranges_js_1.Rectangle(position.x, position.y, size.width, size.height), check);
-        }
-    }
-    exports.QuadTree = QuadTree;
-});

package/umd/Options/Classes/Particles/Move/MoveAttract.js

@@ -1,47 +0,0 @@
-(function (factory) {
-    if (typeof module === "object" && typeof module.exports === "object") {
-        var v = factory(require, exports);
-        if (v !== undefined) module.exports = v;
-    }
-    else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../../../Utils/TypeUtils.js", "../../../../Utils/MathUtils.js"], factory);
-    }
-})(function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.MoveAttract = void 0;
-    const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
-    const MathUtils_js_1 = require("../../../../Utils/MathUtils.js");
-    class MoveAttract {
-        constructor() {
-            this.distance = 200;
-            this.enable = false;
-            this.rotate = {
-                x: 3000,
-                y: 3000,
-            };
-        }
-        load(data) {
-            if ((0, TypeUtils_js_1.isNull)(data)) {
-                return;
-            }
-            if (data.distance !== undefined) {
-                this.distance = (0, MathUtils_js_1.setRangeValue)(data.distance);
-            }
-            if (data.enable !== undefined) {
-                this.enable = data.enable;
-            }
-            if (data.rotate) {
-                const rotateX = data.rotate.x;
-                if (rotateX !== undefined) {
-                    this.rotate.x = rotateX;
-                }
-                const rotateY = data.rotate.y;
-                if (rotateY !== undefined) {
-                    this.rotate.y = rotateY;
-                }
-            }
-        }
-    }
-    exports.MoveAttract = MoveAttract;
-});