tsparticles 1.42.2 → 1.43.0

package/cjs/Core/Utils/Plugins.js

@@ -0,0 +1,111 @@
+"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 _Plugins_engine;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Plugins = void 0;
+class Plugins {
+    constructor(engine) {
+        _Plugins_engine.set(this, void 0);
+        __classPrivateFieldSet(this, _Plugins_engine, engine, "f");
+        this.plugins = [];
+        this.interactorsInitializers = new Map();
+        this.moversInitializers = new Map();
+        this.updatersInitializers = 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();
+    }
+    getPlugin(plugin) {
+        return this.plugins.find((t) => t.id === plugin);
+    }
+    addPlugin(plugin) {
+        if (!this.getPlugin(plugin.id)) {
+            this.plugins.push(plugin);
+        }
+    }
+    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;
+    }
+    loadOptions(options, sourceOptions) {
+        for (const plugin of this.plugins) {
+            plugin.loadOptions(options, sourceOptions);
+        }
+    }
+    getPreset(preset) {
+        return this.presets.get(preset);
+    }
+    addPreset(presetKey, options, override = false) {
+        if (override || !this.getPreset(presetKey)) {
+            this.presets.set(presetKey, options);
+        }
+    }
+    getShapeDrawer(type) {
+        return this.drawers.get(type);
+    }
+    addShapeDrawer(type, drawer) {
+        if (!this.getShapeDrawer(type)) {
+            this.drawers.set(type, drawer);
+        }
+    }
+    getSupportedShapes() {
+        return this.drawers.keys();
+    }
+    getPathGenerator(type) {
+        return this.pathGenerators.get(type);
+    }
+    addPathGenerator(type, pathGenerator) {
+        if (!this.getPathGenerator(type)) {
+            this.pathGenerators.set(type, pathGenerator);
+        }
+    }
+    getInteractors(container, force = false) {
+        let res = this.interactors.get(container);
+        if (!res || force) {
+            res = [...this.interactorsInitializers.values()].map((t) => t(container));
+            this.interactors.set(container, res);
+        }
+        return res;
+    }
+    addInteractor(name, initInteractor) {
+        this.interactorsInitializers.set(name, initInteractor);
+    }
+    getUpdaters(container, force = false) {
+        let res = this.updaters.get(container);
+        if (!res || force) {
+            res = [...this.updatersInitializers.values()].map((t) => t(container));
+            this.updaters.set(container, res);
+        }
+        return res;
+    }
+    addParticleUpdater(name, initUpdater) {
+        this.updatersInitializers.set(name, initUpdater);
+    }
+    getMovers(container, force = false) {
+        let res = this.movers.get(container);
+        if (!res || force) {
+            res = [...this.moversInitializers.values()].map((t) => t(container));
+            this.movers.set(container, res);
+        }
+        return res;
+    }
+    addParticleMover(name, initMover) {
+        this.moversInitializers.set(name, initMover);
+    }
+}
+exports.Plugins = Plugins;
+_Plugins_engine = new WeakMap();

package/cjs/Core/Utils/QuadTree.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuadTree = void 0;
+const Circle_1 = require("./Circle");
+const CircleWarp_1 = require("./CircleWarp");
+const Rectangle_1 = require("./Rectangle");
+const NumberUtils_1 = require("../../Utils/NumberUtils");
+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.northEast) === null || _a === void 0 ? void 0 : _a.insert(point)) ||
+            ((_b = this.northWest) === null || _b === void 0 ? void 0 : _b.insert(point)) ||
+            ((_c = this.southEast) === null || _c === void 0 ? void 0 : _c.insert(point)) ||
+            ((_d = this.southWest) === null || _d === void 0 ? void 0 : _d.insert(point)))) !== null && _e !== void 0 ? _e : false);
+    }
+    queryCircle(position, radius) {
+        return this.query(new Circle_1.Circle(position.x, position.y, radius));
+    }
+    queryCircleWarp(position, radius, containerOrSize) {
+        const container = containerOrSize, size = containerOrSize;
+        return this.query(new CircleWarp_1.CircleWarp(position.x, position.y, radius, container.canvas !== undefined ? container.canvas.size : size));
+    }
+    queryRectangle(position, size) {
+        return this.query(new Rectangle_1.Rectangle(position.x, position.y, size.width, size.height));
+    }
+    query(range, 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) && (0, NumberUtils_1.getDistance)(range.position, p.position) > p.particle.getRadius()) {
+                continue;
+            }
+            res.push(p.particle);
+        }
+        if (this.divided) {
+            (_a = this.northEast) === null || _a === void 0 ? void 0 : _a.query(range, res);
+            (_b = this.northWest) === null || _b === void 0 ? void 0 : _b.query(range, res);
+            (_c = this.southEast) === null || _c === void 0 ? void 0 : _c.query(range, res);
+            (_d = this.southWest) === null || _d === void 0 ? void 0 : _d.query(range, res);
+        }
+        return res;
+    }
+    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.northEast = new QuadTree(new Rectangle_1.Rectangle(x, y, w / 2, h / 2), capacity);
+        this.northWest = new QuadTree(new Rectangle_1.Rectangle(x + w / 2, y, w / 2, h / 2), capacity);
+        this.southEast = new QuadTree(new Rectangle_1.Rectangle(x, y + h / 2, w / 2, h / 2), capacity);
+        this.southWest = new QuadTree(new Rectangle_1.Rectangle(x + w / 2, y + h / 2, w / 2, h / 2), capacity);
+        this.divided = true;
+    }
+}
+exports.QuadTree = QuadTree;

package/cjs/Core/Utils/Rectangle.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Rectangle = void 0;
+const Range_1 = require("./Range");
+class Rectangle extends Range_1.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) {
+        const rect = range, circle = range, w = this.size.width, h = this.size.height, pos1 = this.position, pos2 = range.position;
+        if (circle.radius !== undefined) {
+            return circle.intersects(this);
+        }
+        if (!rect.size) {
+            return false;
+        }
+        const size2 = rect.size, 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;
+    }
+}
+exports.Rectangle = Rectangle;

package/cjs/Core/Utils/Vector.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Vector = void 0;
+class Vector {
+    constructor(xOrCoords, y) {
+        if (typeof xOrCoords !== "number" && xOrCoords) {
+            this.x = xOrCoords.x;
+            this.y = xOrCoords.y;
+        }
+        else if (xOrCoords !== undefined && y !== undefined) {
+            this.x = xOrCoords;
+            this.y = y;
+        }
+        else {
+            throw new Error("tsParticles - Vector not initialized correctly");
+        }
+    }
+    static clone(source) {
+        return Vector.create(source.x, source.y);
+    }
+    static create(x, y) {
+        return new Vector(x, y);
+    }
+    static get origin() {
+        return Vector.create(0, 0);
+    }
+    get angle() {
+        return Math.atan2(this.y, this.x);
+    }
+    set angle(angle) {
+        this.updateFromAngle(angle, this.length);
+    }
+    get length() {
+        return Math.sqrt(this.getLengthSq());
+    }
+    set length(length) {
+        this.updateFromAngle(this.angle, length);
+    }
+    add(v) {
+        return Vector.create(this.x + v.x, this.y + v.y);
+    }
+    addTo(v) {
+        this.x += v.x;
+        this.y += v.y;
+    }
+    sub(v) {
+        return Vector.create(this.x - v.x, this.y - v.y);
+    }
+    subFrom(v) {
+        this.x -= v.x;
+        this.y -= v.y;
+    }
+    mult(n) {
+        return Vector.create(this.x * n, this.y * n);
+    }
+    multTo(n) {
+        this.x *= n;
+        this.y *= n;
+    }
+    div(n) {
+        return Vector.create(this.x / n, this.y / n);
+    }
+    divTo(n) {
+        this.x /= n;
+        this.y /= n;
+    }
+    distanceTo(v) {
+        return this.sub(v).length;
+    }
+    getLengthSq() {
+        return this.x ** 2 + this.y ** 2;
+    }
+    distanceToSq(v) {
+        return this.sub(v).getLengthSq();
+    }
+    manhattanDistanceTo(v) {
+        return Math.abs(v.x - this.x) + Math.abs(v.y - this.y);
+    }
+    copy() {
+        return Vector.clone(this);
+    }
+    setTo(v) {
+        this.x = v.x;
+        this.y = v.y;
+    }
+    rotate(angle) {
+        return Vector.create(this.x * Math.cos(angle) - this.y * Math.sin(angle), this.x * Math.sin(angle) + this.y * Math.cos(angle));
+    }
+    updateFromAngle(angle, length) {
+        this.x = Math.cos(angle) * length;
+        this.y = Math.sin(angle) * length;
+    }
+}
+exports.Vector = Vector;

package/cjs/Core/Utils/Vector3d.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Vector3d = void 0;
+const Vector_1 = require("./Vector");
+class Vector3d extends Vector_1.Vector {
+    constructor(xOrCoords, y, z) {
+        super(xOrCoords, y);
+        if (typeof xOrCoords !== "number" && xOrCoords) {
+            this.z = xOrCoords.z;
+        }
+        else if (z !== undefined) {
+            this.z = z;
+        }
+        else {
+            throw new Error("tsParticles - Vector not initialized correctly");
+        }
+    }
+    static clone(source) {
+        return Vector3d.create(source.x, source.y, source.z);
+    }
+    static create(x, y, z) {
+        return new Vector3d(x, y, z);
+    }
+    static get origin() {
+        return Vector3d.create(0, 0, 0);
+    }
+    add(v) {
+        return v instanceof Vector3d ? Vector3d.create(this.x + v.x, this.y + v.y, this.z + v.z) : super.add(v);
+    }
+    addTo(v) {
+        super.addTo(v);
+        if (v instanceof Vector3d) {
+            this.z += v.z;
+        }
+    }
+    sub(v) {
+        return v instanceof Vector3d ? Vector3d.create(this.x - v.x, this.y - v.y, this.z - v.z) : super.sub(v);
+    }
+    subFrom(v) {
+        super.subFrom(v);
+        if (v instanceof Vector3d) {
+            this.z -= v.z;
+        }
+    }
+    mult(n) {
+        return Vector3d.create(this.x * n, this.y * n, this.z * n);
+    }
+    multTo(n) {
+        super.multTo(n);
+        this.z *= n;
+    }
+    div(n) {
+        return Vector3d.create(this.x / n, this.y / n, this.z / n);
+    }
+    divTo(n) {
+        super.divTo(n);
+        this.z /= n;
+    }
+    copy() {
+        return Vector3d.clone(this);
+    }
+    setTo(v) {
+        super.setTo(v);
+        const v3d = v;
+        if (v3d.z !== undefined) {
+            this.z = v3d.z;
+        }
+    }
+}
+exports.Vector3d = Vector3d;

package/cjs/Interactions/External/Attract/Attractor.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Attractor = void 0;
+const NumberUtils_1 = require("../../../Utils/NumberUtils");
+const Circle_1 = require("../../../Core/Utils/Circle");
+const Constants_1 = require("../../../Core/Utils/Constants");
+const ExternalInteractorBase_1 = require("../../../Core/Utils/ExternalInteractorBase");
+const Vector_1 = require("../../../Core/Utils/Vector");
+const Utils_1 = require("../../../Utils/Utils");
+class Attractor extends ExternalInteractorBase_1.ExternalInteractorBase {
+    constructor(container) {
+        super(container);
+        if (!container.attract) {
+            container.attract = { particles: [] };
+        }
+        this.handleClickMode = (mode) => {
+            const options = this.container.actualOptions;
+            if (mode !== "attract") {
+                return;
+            }
+            if (!container.attract) {
+                container.attract = { particles: [] };
+            }
+            container.attract.clicking = true;
+            container.attract.count = 0;
+            for (const particle of container.attract.particles) {
+                particle.velocity.setTo(particle.initialVelocity);
+            }
+            container.attract.particles = [];
+            container.attract.finish = false;
+            setTimeout(() => {
+                if (!container.destroyed) {
+                    if (!container.attract) {
+                        container.attract = { particles: [] };
+                    }
+                    container.attract.clicking = false;
+                }
+            }, options.interactivity.modes.attract.duration * 1000);
+        };
+    }
+    isEnabled() {
+        const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = options.interactivity.events;
+        if ((!mouse.position || !events.onHover.enable) && (!mouse.clickPosition || !events.onClick.enable)) {
+            return false;
+        }
+        const hoverMode = events.onHover.mode, clickMode = events.onClick.mode;
+        return (0, Utils_1.isInArray)("attract", hoverMode) || (0, Utils_1.isInArray)("attract", clickMode);
+    }
+    reset() {
+    }
+    async interact() {
+        const container = this.container, options = container.actualOptions, mouseMoveStatus = container.interactivity.status === Constants_1.Constants.mouseMoveEvent, events = options.interactivity.events, hoverEnabled = events.onHover.enable, hoverMode = events.onHover.mode, clickEnabled = events.onClick.enable, clickMode = events.onClick.mode;
+        if (mouseMoveStatus && hoverEnabled && (0, Utils_1.isInArray)("attract", hoverMode)) {
+            this.hoverAttract();
+        }
+        else if (clickEnabled && (0, Utils_1.isInArray)("attract", clickMode)) {
+            this.clickAttract();
+        }
+    }
+    hoverAttract() {
+        const container = this.container;
+        const mousePos = container.interactivity.mouse.position;
+        if (!mousePos) {
+            return;
+        }
+        const attractRadius = container.retina.attractModeDistance;
+        this.processAttract(mousePos, attractRadius, new Circle_1.Circle(mousePos.x, mousePos.y, attractRadius));
+    }
+    processAttract(position, attractRadius, area) {
+        const container = this.container;
+        const attractOptions = container.actualOptions.interactivity.modes.attract;
+        const query = container.particles.quadTree.query(area);
+        for (const particle of query) {
+            const { dx, dy, distance } = (0, NumberUtils_1.getDistances)(particle.position, position);
+            const velocity = attractOptions.speed * attractOptions.factor;
+            const attractFactor = (0, NumberUtils_1.clamp)((0, NumberUtils_1.calcEasing)(1 - distance / attractRadius, attractOptions.easing) * velocity, 0, attractOptions.maxSpeed);
+            const normVec = Vector_1.Vector.create(distance === 0 ? velocity : (dx / distance) * attractFactor, distance === 0 ? velocity : (dy / distance) * attractFactor);
+            particle.position.subFrom(normVec);
+        }
+    }
+    clickAttract() {
+        const container = this.container;
+        if (!container.attract) {
+            container.attract = { particles: [] };
+        }
+        if (!container.attract.finish) {
+            if (!container.attract.count) {
+                container.attract.count = 0;
+            }
+            container.attract.count++;
+            if (container.attract.count === container.particles.count) {
+                container.attract.finish = true;
+            }
+        }
+        if (container.attract.clicking) {
+            const mousePos = container.interactivity.mouse.clickPosition;
+            if (!mousePos) {
+                return;
+            }
+            const attractRadius = container.retina.attractModeDistance;
+            this.processAttract(mousePos, attractRadius, new Circle_1.Circle(mousePos.x, mousePos.y, attractRadius));
+        }
+        else if (container.attract.clicking === false) {
+            container.attract.particles = [];
+        }
+        return;
+    }
+}
+exports.Attractor = Attractor;

package/cjs/Interactions/External/Bounce/Bouncer.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Bouncer = void 0;
+const Utils_1 = require("../../../Utils/Utils");
+const Circle_1 = require("../../../Core/Utils/Circle");
+const Constants_1 = require("../../../Core/Utils/Constants");
+const ExternalInteractorBase_1 = require("../../../Core/Utils/ExternalInteractorBase");
+const Rectangle_1 = require("../../../Core/Utils/Rectangle");
+const Vector_1 = require("../../../Core/Utils/Vector");
+class Bouncer extends ExternalInteractorBase_1.ExternalInteractorBase {
+    constructor(container) {
+        super(container);
+    }
+    isEnabled() {
+        const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse, events = options.interactivity.events, divs = events.onDiv;
+        return ((mouse.position && events.onHover.enable && (0, Utils_1.isInArray)("bounce", events.onHover.mode)) ||
+            (0, Utils_1.isDivModeEnabled)("bounce", divs));
+    }
+    async interact() {
+        const container = this.container, options = container.actualOptions, events = options.interactivity.events, mouseMoveStatus = container.interactivity.status === Constants_1.Constants.mouseMoveEvent, hoverEnabled = events.onHover.enable, hoverMode = events.onHover.mode, divs = events.onDiv;
+        if (mouseMoveStatus && hoverEnabled && (0, Utils_1.isInArray)("bounce", hoverMode)) {
+            this.processMouseBounce();
+        }
+        else {
+            (0, Utils_1.divModeExecute)("bounce", divs, (selector, div) => this.singleSelectorBounce(selector, div));
+        }
+    }
+    reset() {
+    }
+    processMouseBounce() {
+        const container = this.container, pxRatio = container.retina.pixelRatio, tolerance = 10 * pxRatio, mousePos = container.interactivity.mouse.position, radius = container.retina.bounceModeDistance;
+        if (mousePos) {
+            this.processBounce(mousePos, radius, new Circle_1.Circle(mousePos.x, mousePos.y, radius + tolerance));
+        }
+    }
+    singleSelectorBounce(selector, div) {
+        const container = this.container, query = document.querySelectorAll(selector);
+        if (!query.length) {
+            return;
+        }
+        query.forEach((item) => {
+            const elem = item, pxRatio = container.retina.pixelRatio, pos = {
+                x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
+                y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio,
+            }, radius = (elem.offsetWidth / 2) * pxRatio, tolerance = 10 * pxRatio, area = div.type === "circle"
+                ? new Circle_1.Circle(pos.x, pos.y, radius + tolerance)
+                : new Rectangle_1.Rectangle(elem.offsetLeft * pxRatio - tolerance, elem.offsetTop * pxRatio - tolerance, elem.offsetWidth * pxRatio + tolerance * 2, elem.offsetHeight * pxRatio + tolerance * 2);
+            this.processBounce(pos, radius, area);
+        });
+    }
+    processBounce(position, radius, area) {
+        const query = this.container.particles.quadTree.query(area);
+        for (const particle of query) {
+            if (area instanceof Circle_1.Circle) {
+                (0, Utils_1.circleBounce)((0, Utils_1.circleBounceDataFromParticle)(particle), {
+                    position,
+                    radius,
+                    mass: (radius ** 2 * Math.PI) / 2,
+                    velocity: Vector_1.Vector.origin,
+                    factor: Vector_1.Vector.origin,
+                });
+            }
+            else if (area instanceof Rectangle_1.Rectangle) {
+                (0, Utils_1.rectBounce)(particle, (0, Utils_1.calculateBounds)(position, radius));
+            }
+        }
+    }
+}
+exports.Bouncer = Bouncer;