tsparticles 1.42.3 → 1.43.1

package/cjs/Core/Container.js

@@ -0,0 +1,401 @@
+"use strict";
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Container_engine;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Container = void 0;
+const Utils_1 = require("../Utils/Utils");
+const Canvas_1 = require("./Canvas");
+const EventListeners_1 = require("./Utils/EventListeners");
+const FrameManager_1 = require("./Utils/FrameManager");
+const Options_1 = require("../Options/Classes/Options");
+const Particles_1 = require("./Particles");
+const Retina_1 = require("./Retina");
+const Vector_1 = require("./Utils/Vector");
+const NumberUtils_1 = require("../Utils/NumberUtils");
+class Container {
+    constructor(engine, id, sourceOptions, ...presets) {
+        this.id = id;
+        _Container_engine.set(this, void 0);
+        __classPrivateFieldSet(this, _Container_engine, engine, "f");
+        this.fpsLimit = 120;
+        this.duration = 0;
+        this.lifeTime = 0;
+        this.firstStart = true;
+        this.started = false;
+        this.destroyed = false;
+        this.paused = true;
+        this.lastFrameTime = 0;
+        this.zLayers = 100;
+        this.pageHidden = false;
+        this._sourceOptions = sourceOptions;
+        this._initialSourceOptions = sourceOptions;
+        this.retina = new Retina_1.Retina(this);
+        this.canvas = new Canvas_1.Canvas(this);
+        this.particles = new Particles_1.Particles(__classPrivateFieldGet(this, _Container_engine, "f"), this);
+        this.drawer = new FrameManager_1.FrameManager(this);
+        this.presets = presets;
+        this.pathGenerator = {
+            generate: () => {
+                const v = Vector_1.Vector.create(0, 0);
+                v.length = Math.random();
+                v.angle = Math.random() * Math.PI * 2;
+                return v;
+            },
+            init: () => {
+            },
+            update: () => {
+            },
+        };
+        this.interactivity = {
+            mouse: {
+                clicking: false,
+                inside: false,
+            },
+        };
+        this.plugins = new Map();
+        this.drawers = new Map();
+        this.density = 1;
+        this._options = new Options_1.Options(__classPrivateFieldGet(this, _Container_engine, "f"));
+        this.actualOptions = new Options_1.Options(__classPrivateFieldGet(this, _Container_engine, "f"));
+        this.eventListeners = new EventListeners_1.EventListeners(this);
+        if (typeof IntersectionObserver !== "undefined" && IntersectionObserver) {
+            this.intersectionObserver = new IntersectionObserver((entries) => this.intersectionManager(entries));
+        }
+    }
+    get options() {
+        return this._options;
+    }
+    get sourceOptions() {
+        return this._sourceOptions;
+    }
+    play(force) {
+        const needsUpdate = this.paused || force;
+        if (this.firstStart && !this.actualOptions.autoPlay) {
+            this.firstStart = false;
+            return;
+        }
+        if (this.paused) {
+            this.paused = false;
+        }
+        if (needsUpdate) {
+            for (const [, plugin] of this.plugins) {
+                if (plugin.play) {
+                    plugin.play();
+                }
+            }
+        }
+        this.draw(needsUpdate || false);
+    }
+    pause() {
+        if (this.drawAnimationFrame !== undefined) {
+            (0, Utils_1.cancelAnimation)()(this.drawAnimationFrame);
+            delete this.drawAnimationFrame;
+        }
+        if (this.paused) {
+            return;
+        }
+        for (const [, plugin] of this.plugins) {
+            if (plugin.pause) {
+                plugin.pause();
+            }
+        }
+        if (!this.pageHidden) {
+            this.paused = true;
+        }
+    }
+    draw(force) {
+        let refreshTime = force;
+        this.drawAnimationFrame = (0, Utils_1.animate)()(async (timestamp) => {
+            if (refreshTime) {
+                this.lastFrameTime = undefined;
+                refreshTime = false;
+            }
+            await this.drawer.nextFrame(timestamp);
+        });
+    }
+    getAnimationStatus() {
+        return !this.paused && !this.pageHidden;
+    }
+    setNoise(noiseOrGenerator, init, update) {
+        this.setPath(noiseOrGenerator, init, update);
+    }
+    setPath(pathOrGenerator, init, update) {
+        var _a, _b, _c;
+        if (!pathOrGenerator) {
+            return;
+        }
+        if (typeof pathOrGenerator === "function") {
+            this.pathGenerator.generate = pathOrGenerator;
+            if (init) {
+                this.pathGenerator.init = init;
+            }
+            if (update) {
+                this.pathGenerator.update = update;
+            }
+        }
+        else {
+            const oldGenerator = this.pathGenerator;
+            this.pathGenerator = pathOrGenerator;
+            (_a = this.pathGenerator).generate || (_a.generate = oldGenerator.generate);
+            (_b = this.pathGenerator).init || (_b.init = oldGenerator.init);
+            (_c = this.pathGenerator).update || (_c.update = oldGenerator.update);
+        }
+    }
+    destroy() {
+        this.stop();
+        this.canvas.destroy();
+        for (const [, drawer] of this.drawers) {
+            if (drawer.destroy) {
+                drawer.destroy(this);
+            }
+        }
+        for (const key of this.drawers.keys()) {
+            this.drawers.delete(key);
+        }
+        this.destroyed = true;
+    }
+    exportImg(callback) {
+        this.exportImage(callback);
+    }
+    exportImage(callback, type, quality) {
+        var _a;
+        return (_a = this.canvas.element) === null || _a === void 0 ? void 0 : _a.toBlob(callback, type !== null && type !== void 0 ? type : "image/png", quality);
+    }
+    exportConfiguration() {
+        return JSON.stringify(this.actualOptions, undefined, 2);
+    }
+    refresh() {
+        this.stop();
+        return this.start();
+    }
+    reset() {
+        this._options = new Options_1.Options(__classPrivateFieldGet(this, _Container_engine, "f"));
+        return this.refresh();
+    }
+    stop() {
+        if (!this.started) {
+            return;
+        }
+        this.firstStart = true;
+        this.started = false;
+        this.eventListeners.removeListeners();
+        this.pause();
+        this.particles.clear();
+        this.canvas.clear();
+        if (this.interactivity.element instanceof HTMLElement && this.intersectionObserver) {
+            this.intersectionObserver.unobserve(this.interactivity.element);
+        }
+        for (const [, plugin] of this.plugins) {
+            if (plugin.stop) {
+                plugin.stop();
+            }
+        }
+        for (const key of this.plugins.keys()) {
+            this.plugins.delete(key);
+        }
+        this.particles.linksColors = new Map();
+        delete this.particles.grabLineColor;
+        delete this.particles.linksColor;
+        this._sourceOptions = this._options;
+    }
+    async loadTheme(name) {
+        this.currentTheme = name;
+        await this.refresh();
+    }
+    async start() {
+        if (this.started) {
+            return;
+        }
+        await this.init();
+        this.started = true;
+        this.eventListeners.addListeners();
+        if (this.interactivity.element instanceof HTMLElement && this.intersectionObserver) {
+            this.intersectionObserver.observe(this.interactivity.element);
+        }
+        for (const [, plugin] of this.plugins) {
+            if (plugin.startAsync !== undefined) {
+                await plugin.startAsync();
+            }
+            else if (plugin.start !== undefined) {
+                plugin.start();
+            }
+        }
+        this.play();
+    }
+    addClickHandler(callback) {
+        const el = this.interactivity.element;
+        if (!el) {
+            return;
+        }
+        const clickOrTouchHandler = (e, pos, radius) => {
+            if (this.destroyed) {
+                return;
+            }
+            const pxRatio = this.retina.pixelRatio, posRetina = {
+                x: pos.x * pxRatio,
+                y: pos.y * pxRatio,
+            }, particles = this.particles.quadTree.queryCircle(posRetina, radius * pxRatio);
+            callback(e, particles);
+        };
+        const clickHandler = (e) => {
+            if (this.destroyed) {
+                return;
+            }
+            const mouseEvent = e, pos = {
+                x: mouseEvent.offsetX || mouseEvent.clientX,
+                y: mouseEvent.offsetY || mouseEvent.clientY,
+            };
+            clickOrTouchHandler(e, pos, 1);
+        };
+        const touchStartHandler = () => {
+            if (this.destroyed) {
+                return;
+            }
+            touched = true;
+            touchMoved = false;
+        };
+        const touchMoveHandler = () => {
+            if (this.destroyed) {
+                return;
+            }
+            touchMoved = true;
+        };
+        const touchEndHandler = (e) => {
+            var _a, _b, _c;
+            if (this.destroyed) {
+                return;
+            }
+            if (touched && !touchMoved) {
+                const touchEvent = e;
+                let lastTouch = touchEvent.touches[touchEvent.touches.length - 1];
+                if (!lastTouch) {
+                    lastTouch = touchEvent.changedTouches[touchEvent.changedTouches.length - 1];
+                    if (!lastTouch) {
+                        return;
+                    }
+                }
+                const canvasRect = (_a = this.canvas.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(), pos = {
+                    x: lastTouch.clientX - ((_b = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.left) !== null && _b !== void 0 ? _b : 0),
+                    y: lastTouch.clientY - ((_c = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.top) !== null && _c !== void 0 ? _c : 0),
+                };
+                clickOrTouchHandler(e, pos, Math.max(lastTouch.radiusX, lastTouch.radiusY));
+            }
+            touched = false;
+            touchMoved = false;
+        };
+        const touchCancelHandler = () => {
+            if (this.destroyed) {
+                return;
+            }
+            touched = false;
+            touchMoved = false;
+        };
+        let touched = false;
+        let touchMoved = false;
+        el.addEventListener("click", clickHandler);
+        el.addEventListener("touchstart", touchStartHandler);
+        el.addEventListener("touchmove", touchMoveHandler);
+        el.addEventListener("touchend", touchEndHandler);
+        el.addEventListener("touchcancel", touchCancelHandler);
+    }
+    handleClickMode(mode) {
+        this.particles.handleClickMode(mode);
+        for (const [, plugin] of this.plugins) {
+            if (plugin.handleClickMode) {
+                plugin.handleClickMode(mode);
+            }
+        }
+    }
+    updateActualOptions() {
+        this.actualOptions.responsive = [];
+        const newMaxWidth = this.actualOptions.setResponsive(this.canvas.size.width, this.retina.pixelRatio, this._options);
+        this.actualOptions.setTheme(this.currentTheme);
+        if (this.responsiveMaxWidth != newMaxWidth) {
+            this.responsiveMaxWidth = newMaxWidth;
+            return true;
+        }
+        return false;
+    }
+    async init() {
+        this._options = new Options_1.Options(__classPrivateFieldGet(this, _Container_engine, "f"));
+        for (const preset of this.presets) {
+            this._options.load(__classPrivateFieldGet(this, _Container_engine, "f").plugins.getPreset(preset));
+        }
+        const shapes = __classPrivateFieldGet(this, _Container_engine, "f").plugins.getSupportedShapes();
+        for (const type of shapes) {
+            const drawer = __classPrivateFieldGet(this, _Container_engine, "f").plugins.getShapeDrawer(type);
+            if (drawer) {
+                this.drawers.set(type, drawer);
+            }
+        }
+        this._options.load(this._initialSourceOptions);
+        this._options.load(this._sourceOptions);
+        this.actualOptions = new Options_1.Options(__classPrivateFieldGet(this, _Container_engine, "f"));
+        this.actualOptions.load(this._options);
+        this.retina.init();
+        this.canvas.init();
+        this.updateActualOptions();
+        this.canvas.initBackground();
+        this.canvas.resize();
+        this.zLayers = this.actualOptions.zLayers;
+        this.duration = (0, NumberUtils_1.getRangeValue)(this.actualOptions.duration);
+        this.lifeTime = 0;
+        this.fpsLimit = this.actualOptions.fpsLimit > 0 ? this.actualOptions.fpsLimit : 120;
+        const availablePlugins = __classPrivateFieldGet(this, _Container_engine, "f").plugins.getAvailablePlugins(this);
+        for (const [id, plugin] of availablePlugins) {
+            this.plugins.set(id, plugin);
+        }
+        for (const [, drawer] of this.drawers) {
+            if (drawer.init) {
+                await drawer.init(this);
+            }
+        }
+        for (const [, plugin] of this.plugins) {
+            if (plugin.init) {
+                plugin.init(this.actualOptions);
+            }
+            else if (plugin.initAsync !== undefined) {
+                await plugin.initAsync(this.actualOptions);
+            }
+        }
+        const pathOptions = this.actualOptions.particles.move.path;
+        if (pathOptions.generator) {
+            this.setPath(__classPrivateFieldGet(this, _Container_engine, "f").plugins.getPathGenerator(pathOptions.generator));
+        }
+        this.particles.init();
+        this.particles.setDensity();
+        for (const [, plugin] of this.plugins) {
+            if (plugin.particlesSetup !== undefined) {
+                plugin.particlesSetup();
+            }
+        }
+    }
+    intersectionManager(entries) {
+        if (!this.actualOptions.pauseOnOutsideViewport) {
+            return;
+        }
+        for (const entry of entries) {
+            if (entry.target !== this.interactivity.element) {
+                continue;
+            }
+            if (entry.isIntersecting) {
+                this.play();
+            }
+            else {
+                this.pause();
+            }
+        }
+    }
+}
+exports.Container = Container;
+_Container_engine = new WeakMap();

package/cjs/Core/Loader.js

@@ -0,0 +1,179 @@
+"use strict";
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Loader_engine;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loader = void 0;
+const Constants_1 = require("./Utils/Constants");
+const Container_1 = require("./Container");
+const Utils_1 = require("../Utils/Utils");
+function fetchError(statusCode) {
+    console.error(`Error tsParticles - fetch status: ${statusCode}`);
+    console.error("Error tsParticles - File config not found");
+}
+class Loader {
+    constructor(engine) {
+        _Loader_engine.set(this, void 0);
+        __classPrivateFieldSet(this, _Loader_engine, engine, "f");
+    }
+    dom() {
+        return __classPrivateFieldGet(this, _Loader_engine, "f").domArray;
+    }
+    domItem(index) {
+        const dom = this.dom();
+        const item = dom[index];
+        if (item && !item.destroyed) {
+            return item;
+        }
+        dom.splice(index, 1);
+    }
+    async loadOptions(params) {
+        var _a, _b, _c;
+        const tagId = (_a = params.tagId) !== null && _a !== void 0 ? _a : `tsparticles${Math.floor(Math.random() * 10000)}`, { options, index } = params;
+        let domContainer = (_b = params.element) !== null && _b !== void 0 ? _b : document.getElementById(tagId);
+        if (!domContainer) {
+            domContainer = document.createElement("div");
+            domContainer.id = tagId;
+            (_c = document.querySelector("body")) === null || _c === void 0 ? void 0 : _c.append(domContainer);
+        }
+        const currentOptions = options instanceof Array ? (0, Utils_1.itemFromArray)(options, index) : options, dom = this.dom(), oldIndex = dom.findIndex((v) => v.id === tagId);
+        if (oldIndex >= 0) {
+            const old = this.domItem(oldIndex);
+            if (old && !old.destroyed) {
+                old.destroy();
+                dom.splice(oldIndex, 1);
+            }
+        }
+        let canvasEl;
+        if (domContainer.tagName.toLowerCase() === "canvas") {
+            canvasEl = domContainer;
+            canvasEl.dataset[Constants_1.Constants.generatedAttribute] = "false";
+        }
+        else {
+            const existingCanvases = domContainer.getElementsByTagName("canvas");
+            if (existingCanvases.length) {
+                canvasEl = existingCanvases[0];
+                canvasEl.dataset[Constants_1.Constants.generatedAttribute] = "false";
+            }
+            else {
+                canvasEl = document.createElement("canvas");
+                canvasEl.dataset[Constants_1.Constants.generatedAttribute] = "true";
+                canvasEl.style.width = "100%";
+                canvasEl.style.height = "100%";
+                domContainer.appendChild(canvasEl);
+            }
+        }
+        const newItem = new Container_1.Container(__classPrivateFieldGet(this, _Loader_engine, "f"), tagId, currentOptions);
+        if (oldIndex >= 0) {
+            dom.splice(oldIndex, 0, newItem);
+        }
+        else {
+            dom.push(newItem);
+        }
+        newItem.canvas.loadCanvas(canvasEl);
+        await newItem.start();
+        return newItem;
+    }
+    async loadRemoteOptions(params) {
+        const { url: jsonUrl, index } = params, url = jsonUrl instanceof Array ? (0, Utils_1.itemFromArray)(jsonUrl, index) : jsonUrl;
+        if (!url) {
+            return;
+        }
+        const response = await fetch(url);
+        if (!response.ok) {
+            fetchError(response.status);
+            return;
+        }
+        const data = await response.json();
+        return this.loadOptions({
+            tagId: params.tagId,
+            element: params.element,
+            index,
+            options: data,
+        });
+    }
+    load(tagId, options, index) {
+        const params = { index };
+        if (typeof tagId === "string") {
+            params.tagId = tagId;
+        }
+        else {
+            params.options = tagId;
+        }
+        if (typeof options === "number") {
+            params.index = options !== null && options !== void 0 ? options : params.index;
+        }
+        else {
+            params.options = options !== null && options !== void 0 ? options : params.options;
+        }
+        return this.loadOptions(params);
+    }
+    async set(id, domContainer, options, index) {
+        const params = { index };
+        if (typeof id === "string") {
+            params.tagId = id;
+        }
+        else {
+            params.element = id;
+        }
+        if (domContainer instanceof HTMLElement) {
+            params.element = domContainer;
+        }
+        else {
+            params.options = domContainer;
+        }
+        if (typeof options === "number") {
+            params.index = options;
+        }
+        else {
+            params.options = options !== null && options !== void 0 ? options : params.options;
+        }
+        return this.loadOptions(params);
+    }
+    async loadJSON(tagId, jsonUrl, index) {
+        let url, id;
+        if (typeof jsonUrl === "number" || jsonUrl === undefined) {
+            url = tagId;
+        }
+        else {
+            id = tagId;
+            url = jsonUrl;
+        }
+        return this.loadRemoteOptions({ tagId: id, url, index });
+    }
+    async setJSON(id, domContainer, jsonUrl, index) {
+        let url, newId, newIndex, element;
+        if (id instanceof HTMLElement) {
+            element = id;
+            url = domContainer;
+            newIndex = jsonUrl;
+        }
+        else {
+            newId = id;
+            element = domContainer;
+            url = jsonUrl;
+            newIndex = index;
+        }
+        return this.loadRemoteOptions({ tagId: newId, url, index: newIndex, element });
+    }
+    setOnClickHandler(callback) {
+        const dom = this.dom();
+        if (!dom.length) {
+            throw new Error("Can only set click handlers after calling tsParticles.load() or tsParticles.loadJSON()");
+        }
+        for (const domItem of dom) {
+            domItem.addClickHandler(callback);
+        }
+    }
+}
+exports.Loader = Loader;
+_Loader_engine = new WeakMap();