@tsparticles/engine 3.0.0-alpha.0

package/esm/Core/Utils/EventListeners.js

@@ -0,0 +1,280 @@
+import { executeOnSingleOrMultiple, safeMatchMedia } from "../../Utils/Utils";
+import { mouseDownEvent, mouseLeaveEvent, mouseMoveEvent, mouseOutEvent, mouseUpEvent, resizeEvent, touchCancelEvent, touchEndEvent, touchMoveEvent, touchStartEvent, visibilityChangeEvent, } from "./Constants";
+function manageListener(element, event, handler, add, options) {
+    if (add) {
+        let addOptions = { passive: true };
+        if (typeof options === "boolean") {
+            addOptions.capture = options;
+        }
+        else if (options !== undefined) {
+            addOptions = options;
+        }
+        element.addEventListener(event, handler, addOptions);
+    }
+    else {
+        const removeOptions = options;
+        element.removeEventListener(event, handler, removeOptions);
+    }
+}
+export class EventListeners {
+    constructor(container) {
+        this.container = container;
+        this.canPush = true;
+        this.handlers = {
+            mouseMove: (e) => this.mouseTouchMove(e),
+            touchStart: (e) => this.mouseTouchMove(e),
+            touchMove: (e) => this.mouseTouchMove(e),
+            touchEnd: () => this.mouseTouchFinish(),
+            mouseLeave: () => this.mouseTouchFinish(),
+            touchCancel: () => this.mouseTouchFinish(),
+            touchEndClick: (e) => this.mouseTouchClick(e),
+            mouseUp: (e) => this.mouseTouchClick(e),
+            mouseDown: () => this.mouseDown(),
+            visibilityChange: () => this.handleVisibilityChange(),
+            themeChange: (e) => this.handleThemeChange(e),
+            oldThemeChange: (e) => this.handleThemeChange(e),
+            resize: () => this.handleWindowResize(),
+        };
+    }
+    addListeners() {
+        this.manageListeners(true);
+    }
+    removeListeners() {
+        this.manageListeners(false);
+    }
+    doMouseTouchClick(e) {
+        const container = this.container, options = container.actualOptions;
+        if (this.canPush) {
+            const mouseInteractivity = container.interactivity.mouse, mousePos = mouseInteractivity.position;
+            if (!mousePos) {
+                return;
+            }
+            mouseInteractivity.clickPosition = Object.assign({}, mousePos);
+            mouseInteractivity.clickTime = new Date().getTime();
+            const onClick = options.interactivity.events.onClick;
+            executeOnSingleOrMultiple(onClick.mode, (mode) => this.handleClickMode(mode));
+        }
+        if (e.type === "touchend") {
+            setTimeout(() => this.mouseTouchFinish(), 500);
+        }
+    }
+    handleClickMode(mode) {
+        this.container.handleClickMode(mode);
+    }
+    handleThemeChange(e) {
+        const mediaEvent = e, container = this.container, options = container.options, defaultThemes = options.defaultThemes, themeName = mediaEvent.matches ? defaultThemes.dark : defaultThemes.light, theme = options.themes.find((theme) => theme.name === themeName);
+        if (theme && theme.default.auto) {
+            container.loadTheme(themeName);
+        }
+    }
+    handleVisibilityChange() {
+        const container = this.container, options = container.actualOptions;
+        this.mouseTouchFinish();
+        if (!options.pauseOnBlur) {
+            return;
+        }
+        if (document === null || document === void 0 ? void 0 : document.hidden) {
+            container.pageHidden = true;
+            container.pause();
+        }
+        else {
+            container.pageHidden = false;
+            if (container.getAnimationStatus()) {
+                container.play(true);
+            }
+            else {
+                container.draw(true);
+            }
+        }
+    }
+    handleWindowResize() {
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+            delete this.resizeTimeout;
+        }
+        this.resizeTimeout = setTimeout(async () => { var _a; return (_a = this.container.canvas) === null || _a === void 0 ? void 0 : _a.windowResize(); }, this.container.actualOptions.interactivity.events.resize.delay * 1000);
+    }
+    manageListeners(add) {
+        var _a;
+        const handlers = this.handlers, container = this.container, options = container.actualOptions, detectType = options.interactivity.detectsOn;
+        let mouseLeaveTmpEvent = mouseLeaveEvent;
+        if (detectType === "window") {
+            container.interactivity.element = window;
+            mouseLeaveTmpEvent = mouseOutEvent;
+        }
+        else if (detectType === "parent" && container.canvas.element) {
+            const canvasEl = container.canvas.element;
+            container.interactivity.element = (_a = canvasEl.parentElement) !== null && _a !== void 0 ? _a : canvasEl.parentNode;
+        }
+        else {
+            container.interactivity.element = container.canvas.element;
+        }
+        const mediaMatch = safeMatchMedia("(prefers-color-scheme: dark)");
+        if (mediaMatch) {
+            if (mediaMatch.addEventListener !== undefined) {
+                manageListener(mediaMatch, "change", handlers.themeChange, add);
+            }
+            else if (mediaMatch.addListener !== undefined) {
+                if (add) {
+                    mediaMatch.addListener(handlers.oldThemeChange);
+                }
+                else {
+                    mediaMatch.removeListener(handlers.oldThemeChange);
+                }
+            }
+        }
+        const interactivityEl = container.interactivity.element;
+        if (!interactivityEl) {
+            return;
+        }
+        const html = interactivityEl;
+        if (options.interactivity.events.onHover.enable || options.interactivity.events.onClick.enable) {
+            manageListener(interactivityEl, mouseMoveEvent, handlers.mouseMove, add);
+            manageListener(interactivityEl, touchStartEvent, handlers.touchStart, add);
+            manageListener(interactivityEl, touchMoveEvent, handlers.touchMove, add);
+            if (!options.interactivity.events.onClick.enable) {
+                manageListener(interactivityEl, touchEndEvent, handlers.touchEnd, add);
+            }
+            else {
+                manageListener(interactivityEl, touchEndEvent, handlers.touchEndClick, add);
+                manageListener(interactivityEl, mouseUpEvent, handlers.mouseUp, add);
+                manageListener(interactivityEl, mouseDownEvent, handlers.mouseDown, add);
+            }
+            manageListener(interactivityEl, mouseLeaveTmpEvent, handlers.mouseLeave, add);
+            manageListener(interactivityEl, touchCancelEvent, handlers.touchCancel, add);
+        }
+        if (container.canvas.element) {
+            container.canvas.element.style.pointerEvents = html === container.canvas.element ? "initial" : "none";
+        }
+        if (options.interactivity.events.resize) {
+            if (typeof ResizeObserver !== "undefined") {
+                if (this.resizeObserver && !add) {
+                    if (container.canvas.element) {
+                        this.resizeObserver.unobserve(container.canvas.element);
+                    }
+                    this.resizeObserver.disconnect();
+                    delete this.resizeObserver;
+                }
+                else if (!this.resizeObserver && add && container.canvas.element) {
+                    this.resizeObserver = new ResizeObserver((entries) => {
+                        const entry = entries.find((e) => e.target === container.canvas.element);
+                        if (!entry) {
+                            return;
+                        }
+                        this.handleWindowResize();
+                    });
+                    this.resizeObserver.observe(container.canvas.element);
+                }
+            }
+            else {
+                manageListener(window, resizeEvent, handlers.resize, add);
+            }
+        }
+        if (document) {
+            manageListener(document, visibilityChangeEvent, handlers.visibilityChange, add, false);
+        }
+    }
+    mouseDown() {
+        const interactivity = this.container.interactivity;
+        if (interactivity) {
+            const mouse = interactivity.mouse;
+            mouse.clicking = true;
+            mouse.downPosition = mouse.position;
+        }
+    }
+    mouseTouchClick(e) {
+        const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse;
+        mouse.inside = true;
+        let handled = false;
+        const mousePosition = mouse.position;
+        if (!mousePosition || !options.interactivity.events.onClick.enable) {
+            return;
+        }
+        for (const [, plugin] of container.plugins) {
+            if (!plugin.clickPositionValid) {
+                continue;
+            }
+            handled = plugin.clickPositionValid(mousePosition);
+            if (handled) {
+                break;
+            }
+        }
+        if (!handled) {
+            this.doMouseTouchClick(e);
+        }
+        mouse.clicking = false;
+    }
+    mouseTouchFinish() {
+        const interactivity = this.container.interactivity;
+        if (!interactivity) {
+            return;
+        }
+        const mouse = interactivity.mouse;
+        delete mouse.position;
+        delete mouse.clickPosition;
+        delete mouse.downPosition;
+        interactivity.status = mouseLeaveEvent;
+        mouse.inside = false;
+        mouse.clicking = false;
+    }
+    mouseTouchMove(e) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const container = this.container, options = container.actualOptions;
+        if (!((_a = container.interactivity) === null || _a === void 0 ? void 0 : _a.element)) {
+            return;
+        }
+        container.interactivity.mouse.inside = true;
+        let pos;
+        const canvas = container.canvas.element;
+        if (e.type.startsWith("pointer")) {
+            this.canPush = true;
+            const mouseEvent = e;
+            if (container.interactivity.element === window) {
+                if (canvas) {
+                    const clientRect = canvas.getBoundingClientRect();
+                    pos = {
+                        x: mouseEvent.clientX - clientRect.left,
+                        y: mouseEvent.clientY - clientRect.top,
+                    };
+                }
+            }
+            else if (options.interactivity.detectsOn === "parent") {
+                const source = mouseEvent.target, target = mouseEvent.currentTarget, canvasEl = container.canvas.element;
+                if (source && target && canvasEl) {
+                    const sourceRect = source.getBoundingClientRect(), targetRect = target.getBoundingClientRect(), canvasRect = canvasEl.getBoundingClientRect();
+                    pos = {
+                        x: mouseEvent.offsetX + 2 * sourceRect.left - (targetRect.left + canvasRect.left),
+                        y: mouseEvent.offsetY + 2 * sourceRect.top - (targetRect.top + canvasRect.top),
+                    };
+                }
+                else {
+                    pos = {
+                        x: (_b = mouseEvent.offsetX) !== null && _b !== void 0 ? _b : mouseEvent.clientX,
+                        y: (_c = mouseEvent.offsetY) !== null && _c !== void 0 ? _c : mouseEvent.clientY,
+                    };
+                }
+            }
+            else if (mouseEvent.target === container.canvas.element) {
+                pos = {
+                    x: (_d = mouseEvent.offsetX) !== null && _d !== void 0 ? _d : mouseEvent.clientX,
+                    y: (_e = mouseEvent.offsetY) !== null && _e !== void 0 ? _e : mouseEvent.clientY,
+                };
+            }
+        }
+        else {
+            this.canPush = e.type !== "touchmove";
+            const touchEvent = e, lastTouch = touchEvent.touches[touchEvent.touches.length - 1], canvasRect = canvas === null || canvas === void 0 ? void 0 : canvas.getBoundingClientRect();
+            pos = {
+                x: lastTouch.clientX - ((_f = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.left) !== null && _f !== void 0 ? _f : 0),
+                y: lastTouch.clientY - ((_g = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.top) !== null && _g !== void 0 ? _g : 0),
+            };
+        }
+        const pxRatio = container.retina.pixelRatio;
+        if (pos) {
+            pos.x *= pxRatio;
+            pos.y *= pxRatio;
+        }
+        container.interactivity.mouse.position = pos;
+        container.interactivity.status = mouseMoveEvent;
+    }
+}

package/esm/Core/Utils/ExternalInteractorBase.js

@@ -0,0 +1,6 @@
+export class ExternalInteractorBase {
+    constructor(container) {
+        this.container = container;
+        this.type = "external";
+    }
+}

package/esm/Core/Utils/FrameManager.js

@@ -0,0 +1,42 @@
+function initDelta(value, fpsLimit = 60, smooth = false) {
+    return {
+        value,
+        factor: smooth ? 60 / fpsLimit : (60 * value) / 1000,
+    };
+}
+export class FrameManager {
+    constructor(container) {
+        this.container = container;
+    }
+    async nextFrame(timestamp) {
+        var _a;
+        try {
+            const container = this.container;
+            if (!container.smooth &&
+                container.lastFrameTime !== undefined &&
+                timestamp < container.lastFrameTime + 1000 / container.fpsLimit) {
+                container.draw(false);
+                return;
+            }
+            (_a = container.lastFrameTime) !== null && _a !== void 0 ? _a : (container.lastFrameTime = timestamp);
+            const delta = initDelta(timestamp - container.lastFrameTime, container.fpsLimit, container.smooth);
+            container.lifeTime += delta.value;
+            container.lastFrameTime = timestamp;
+            if (delta.value > 1000) {
+                container.draw(false);
+                return;
+            }
+            await container.particles.draw(delta);
+            if (container.duration > 0 && container.lifeTime > container.duration) {
+                container.destroy();
+                return;
+            }
+            if (container.getAnimationStatus()) {
+                container.draw(false);
+            }
+        }
+        catch (e) {
+            console.error("tsParticles error in animation loop", e);
+        }
+    }
+}

package/esm/Core/Utils/InteractionManager.js

@@ -0,0 +1,60 @@
+export class InteractionManager {
+    constructor(engine, container) {
+        this.container = container;
+        this._engine = engine;
+        this._interactors = this._engine.plugins.getInteractors(this.container, true);
+        this._externalInteractors = [];
+        this._particleInteractors = [];
+    }
+    async externalInteract(delta) {
+        for (const interactor of this._externalInteractors) {
+            if (interactor.isEnabled()) {
+                await interactor.interact(delta);
+            }
+        }
+    }
+    handleClickMode(mode) {
+        for (const interactor of this._externalInteractors) {
+            if (interactor.handleClickMode) {
+                interactor.handleClickMode(mode);
+            }
+        }
+    }
+    init() {
+        this._externalInteractors = [];
+        this._particleInteractors = [];
+        for (const interactor of this._interactors) {
+            switch (interactor.type) {
+                case "external":
+                    this._externalInteractors.push(interactor);
+                    break;
+                case "particles":
+                    this._particleInteractors.push(interactor);
+                    break;
+            }
+            interactor.init();
+        }
+    }
+    async particlesInteract(particle, delta) {
+        for (const interactor of this._externalInteractors) {
+            interactor.clear(particle, delta);
+        }
+        for (const interactor of this._particleInteractors) {
+            if (interactor.isEnabled(particle)) {
+                await interactor.interact(particle, delta);
+            }
+        }
+    }
+    async reset(particle) {
+        for (const interactor of this._externalInteractors) {
+            if (interactor.isEnabled()) {
+                await interactor.reset(particle);
+            }
+        }
+        for (const interactor of this._particleInteractors) {
+            if (interactor.isEnabled(particle)) {
+                await interactor.reset(particle);
+            }
+        }
+    }
+}

package/esm/Core/Utils/ParticlesInteractorBase.js

@@ -0,0 +1,6 @@
+export class ParticlesInteractorBase {
+    constructor(container) {
+        this.container = container;
+        this.type = "particles";
+    }
+}

package/esm/Core/Utils/Plugins.js

@@ -0,0 +1,112 @@
+import { executeOnSingleOrMultiple } from "../../Utils/Utils";
+function getItemsFromInitializer(container, map, initializers, force = false) {
+    let res = map.get(container);
+    if (!res || force) {
+        res = [...initializers.values()].map((t) => t(container));
+        map.set(container, res);
+    }
+    return res;
+}
+export class Plugins {
+    constructor(engine) {
+        this._engine = engine;
+        this.plugins = [];
+        this._initializers = {
+            interactors: new Map(),
+            movers: new Map(),
+            updaters: new Map(),
+        };
+        this.interactors = new Map();
+        this.movers = new Map();
+        this.updaters = new Map();
+        this.presets = new Map();
+        this.drawers = new Map();
+        this.pathGenerators = new Map();
+    }
+    addInteractor(name, initInteractor) {
+        this._initializers.interactors.set(name, initInteractor);
+    }
+    addParticleMover(name, initMover) {
+        this._initializers.movers.set(name, initMover);
+    }
+    addParticleUpdater(name, initUpdater) {
+        this._initializers.updaters.set(name, initUpdater);
+    }
+    addPathGenerator(type, pathGenerator) {
+        if (!this.getPathGenerator(type)) {
+            this.pathGenerators.set(type, pathGenerator);
+        }
+    }
+    addPlugin(plugin) {
+        if (!this.getPlugin(plugin.id)) {
+            this.plugins.push(plugin);
+        }
+    }
+    addPreset(presetKey, options, override = false) {
+        if (override || !this.getPreset(presetKey)) {
+            this.presets.set(presetKey, options);
+        }
+    }
+    addShapeDrawer(types, drawer) {
+        executeOnSingleOrMultiple(types, (type) => {
+            if (!this.getShapeDrawer(type)) {
+                this.drawers.set(type, drawer);
+            }
+        });
+    }
+    destroy(container) {
+        this.updaters.delete(container);
+        this.movers.delete(container);
+        this.interactors.delete(container);
+    }
+    getAvailablePlugins(container) {
+        const res = new Map();
+        for (const plugin of this.plugins) {
+            if (!plugin.needsPlugin(container.actualOptions)) {
+                continue;
+            }
+            res.set(plugin.id, plugin.getPlugin(container));
+        }
+        return res;
+    }
+    getInteractors(container, force = false) {
+        return getItemsFromInitializer(container, this.interactors, this._initializers.interactors, force);
+    }
+    getMovers(container, force = false) {
+        return getItemsFromInitializer(container, this.movers, this._initializers.movers, force);
+    }
+    getPathGenerator(type) {
+        return this.pathGenerators.get(type);
+    }
+    getPlugin(plugin) {
+        return this.plugins.find((t) => t.id === plugin);
+    }
+    getPreset(preset) {
+        return this.presets.get(preset);
+    }
+    getShapeDrawer(type) {
+        return this.drawers.get(type);
+    }
+    getSupportedShapes() {
+        return this.drawers.keys();
+    }
+    getUpdaters(container, force = false) {
+        return getItemsFromInitializer(container, this.updaters, this._initializers.updaters, force);
+    }
+    loadOptions(options, sourceOptions) {
+        for (const plugin of this.plugins) {
+            plugin.loadOptions(options, sourceOptions);
+        }
+    }
+    loadParticlesOptions(container, options, ...sourceOptions) {
+        const updaters = this.updaters.get(container);
+        if (!updaters) {
+            return;
+        }
+        for (const updater of updaters) {
+            if (updater.loadOptions) {
+                updater.loadOptions(options, ...sourceOptions);
+            }
+        }
+    }
+}

package/esm/Core/Utils/Point.js

@@ -0,0 +1,6 @@
+export class Point {
+    constructor(position, particle) {
+        this.position = position;
+        this.particle = particle;
+    }
+}

package/esm/Core/Utils/QuadTree.js

@@ -0,0 +1,64 @@
+import { Circle } from "./Circle";
+import { Rectangle } from "./Rectangle";
+import { getDistance } from "../../Utils/NumberUtils";
+export class QuadTree {
+    constructor(rectangle, capacity) {
+        this.rectangle = rectangle;
+        this.capacity = capacity;
+        this._points = [];
+        this._divided = false;
+    }
+    insert(point) {
+        var _a, _b, _c, _d, _e;
+        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 ((_e = (((_a = this._NE) === null || _a === void 0 ? void 0 : _a.insert(point)) ||
+            ((_b = this._NW) === null || _b === void 0 ? void 0 : _b.insert(point)) ||
+            ((_c = this._SE) === null || _c === void 0 ? void 0 : _c.insert(point)) ||
+            ((_d = this._SW) === null || _d === void 0 ? void 0 : _d.insert(point)))) !== null && _e !== void 0 ? _e : false);
+    }
+    query(range, check, found) {
+        var _a, _b, _c, _d;
+        const res = found !== null && found !== void 0 ? found : [];
+        if (!range.intersects(this.rectangle)) {
+            return [];
+        }
+        for (const p of this._points) {
+            if (!range.contains(p.position) &&
+                getDistance(range.position, p.position) > p.particle.getRadius() &&
+                (!check || check(p.particle))) {
+                continue;
+            }
+            res.push(p.particle);
+        }
+        if (this._divided) {
+            (_a = this._NE) === null || _a === void 0 ? void 0 : _a.query(range, check, res);
+            (_b = this._NW) === null || _b === void 0 ? void 0 : _b.query(range, check, res);
+            (_c = this._SE) === null || _c === void 0 ? void 0 : _c.query(range, check, res);
+            (_d = this._SW) === null || _d === void 0 ? void 0 : _d.query(range, check, res);
+        }
+        return res;
+    }
+    queryCircle(position, radius, check) {
+        return this.query(new Circle(position.x, position.y, radius), check);
+    }
+    queryRectangle(position, size, check) {
+        return this.query(new Rectangle(position.x, position.y, size.width, size.height), check);
+    }
+    subdivide() {
+        const x = this.rectangle.position.x, y = this.rectangle.position.y, w = this.rectangle.size.width, h = this.rectangle.size.height, capacity = this.capacity;
+        this._NE = new QuadTree(new Rectangle(x, y, w / 2, h / 2), capacity);
+        this._NW = new QuadTree(new Rectangle(x + w / 2, y, w / 2, h / 2), capacity);
+        this._SE = new QuadTree(new Rectangle(x, y + h / 2, w / 2, h / 2), capacity);
+        this._SW = new QuadTree(new Rectangle(x + w / 2, y + h / 2, w / 2, h / 2), capacity);
+        this._divided = true;
+    }
+}

package/esm/Core/Utils/Range.js

@@ -0,0 +1,8 @@
+export class Range {
+    constructor(x, y) {
+        this.position = {
+            x: x,
+            y: y,
+        };
+    }
+}

package/esm/Core/Utils/Rectangle.js

@@ -0,0 +1,22 @@
+import { Circle } from "./Circle";
+import { Range } from "./Range";
+export class Rectangle extends Range {
+    constructor(x, y, width, height) {
+        super(x, y);
+        this.size = {
+            height: height,
+            width: width,
+        };
+    }
+    contains(point) {
+        const w = this.size.width, h = this.size.height, pos = this.position;
+        return point.x >= pos.x && point.x <= pos.x + w && point.y >= pos.y && point.y <= pos.y + h;
+    }
+    intersects(range) {
+        if (range instanceof Circle) {
+            range.intersects(this);
+        }
+        const w = this.size.width, h = this.size.height, pos1 = this.position, pos2 = range.position, size2 = range instanceof Rectangle ? range.size : { width: 0, height: 0 }, w2 = size2.width, h2 = size2.height;
+        return pos2.x < pos1.x + w && pos2.x + w2 > pos1.x && pos2.y < pos1.y + h && pos2.y + h2 > pos1.y;
+    }
+}

package/esm/Core/Utils/Vector.js

@@ -0,0 +1,15 @@
+import { Vector3d } from "./Vector3d";
+export class Vector extends Vector3d {
+    constructor(xOrCoords, y) {
+        super(xOrCoords, y, 0);
+    }
+    static get origin() {
+        return Vector.create(0, 0);
+    }
+    static clone(source) {
+        return Vector.create(source.x, source.y);
+    }
+    static create(x, y) {
+        return new Vector(x, y);
+    }
+}