@tsparticles/updater-out-modes 3.0.0-alpha.0

package/cjs/OutOutMode.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OutOutMode = void 0;
+const engine_1 = require("@tsparticles/engine");
+class OutOutMode {
+    constructor(container) {
+        this.container = container;
+        this.modes = ["out"];
+    }
+    update(particle, direction, delta, outMode) {
+        if (!this.modes.includes(outMode)) {
+            return;
+        }
+        const container = this.container;
+        switch (particle.outType) {
+            case "inside": {
+                const { x: vx, y: vy } = particle.velocity;
+                const circVec = engine_1.Vector.origin;
+                circVec.length = particle.moveCenter.radius;
+                circVec.angle = particle.velocity.angle + Math.PI;
+                circVec.addTo(engine_1.Vector.create(particle.moveCenter));
+                const { dx, dy } = (0, engine_1.getDistances)(particle.position, circVec);
+                if ((vx <= 0 && dx >= 0) || (vy <= 0 && dy >= 0) || (vx >= 0 && dx <= 0) || (vy >= 0 && dy <= 0)) {
+                    return;
+                }
+                particle.position.x = Math.floor((0, engine_1.randomInRange)({
+                    min: 0,
+                    max: container.canvas.size.width,
+                }));
+                particle.position.y = Math.floor((0, engine_1.randomInRange)({
+                    min: 0,
+                    max: container.canvas.size.height,
+                }));
+                const { dx: newDx, dy: newDy } = (0, engine_1.getDistances)(particle.position, particle.moveCenter);
+                particle.direction = Math.atan2(-newDy, -newDx);
+                particle.velocity.angle = particle.direction;
+                break;
+            }
+            default: {
+                if ((0, engine_1.isPointInside)(particle.position, container.canvas.size, engine_1.Vector.origin, particle.getRadius(), direction)) {
+                    return;
+                }
+                switch (particle.outType) {
+                    case "outside": {
+                        particle.position.x =
+                            Math.floor((0, engine_1.randomInRange)({
+                                min: -particle.moveCenter.radius,
+                                max: particle.moveCenter.radius,
+                            })) + particle.moveCenter.x;
+                        particle.position.y =
+                            Math.floor((0, engine_1.randomInRange)({
+                                min: -particle.moveCenter.radius,
+                                max: particle.moveCenter.radius,
+                            })) + particle.moveCenter.y;
+                        const { dx, dy } = (0, engine_1.getDistances)(particle.position, particle.moveCenter);
+                        if (particle.moveCenter.radius) {
+                            particle.direction = Math.atan2(dy, dx);
+                            particle.velocity.angle = particle.direction;
+                        }
+                        break;
+                    }
+                    case "normal": {
+                        const wrap = particle.options.move.warp, canvasSize = container.canvas.size, newPos = {
+                            bottom: canvasSize.height + particle.getRadius() + particle.offset.y,
+                            left: -particle.getRadius() - particle.offset.x,
+                            right: canvasSize.width + particle.getRadius() + particle.offset.x,
+                            top: -particle.getRadius() - particle.offset.y,
+                        }, sizeValue = particle.getRadius(), nextBounds = (0, engine_1.calculateBounds)(particle.position, sizeValue);
+                        if (direction === "right" &&
+                            nextBounds.left > canvasSize.width + particle.offset.x) {
+                            particle.position.x = newPos.left;
+                            particle.initialPosition.x = particle.position.x;
+                            if (!wrap) {
+                                particle.position.y = (0, engine_1.getRandom)() * canvasSize.height;
+                                particle.initialPosition.y = particle.position.y;
+                            }
+                        }
+                        else if (direction === "left" && nextBounds.right < -particle.offset.x) {
+                            particle.position.x = newPos.right;
+                            particle.initialPosition.x = particle.position.x;
+                            if (!wrap) {
+                                particle.position.y = (0, engine_1.getRandom)() * canvasSize.height;
+                                particle.initialPosition.y = particle.position.y;
+                            }
+                        }
+                        if (direction === "bottom" &&
+                            nextBounds.top > canvasSize.height + particle.offset.y) {
+                            if (!wrap) {
+                                particle.position.x = (0, engine_1.getRandom)() * canvasSize.width;
+                                particle.initialPosition.x = particle.position.x;
+                            }
+                            particle.position.y = newPos.top;
+                            particle.initialPosition.y = particle.position.y;
+                        }
+                        else if (direction === "top" && nextBounds.bottom < -particle.offset.y) {
+                            if (!wrap) {
+                                particle.position.x = (0, engine_1.getRandom)() * canvasSize.width;
+                                particle.initialPosition.x = particle.position.x;
+                            }
+                            particle.position.y = newPos.bottom;
+                            particle.initialPosition.y = particle.position.y;
+                        }
+                        break;
+                    }
+                }
+                break;
+            }
+        }
+    }
+}
+exports.OutOutMode = OutOutMode;

package/cjs/Utils.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bounceVertical = exports.bounceHorizontal = void 0;
+const engine_1 = require("@tsparticles/engine");
+function bounceHorizontal(data) {
+    if (data.outMode !== "bounce" &&
+        data.outMode !== "bounce-horizontal" &&
+        data.outMode !== "bounceHorizontal" &&
+        data.outMode !== "split") {
+        return;
+    }
+    if (data.bounds.right < 0) {
+        data.particle.position.x = data.size + data.offset.x;
+    }
+    else if (data.bounds.left > data.canvasSize.width) {
+        data.particle.position.x = data.canvasSize.width - data.size - data.offset.x;
+    }
+    const velocity = data.particle.velocity.x;
+    let bounced = false;
+    if ((data.direction === "right" && data.bounds.right >= data.canvasSize.width && velocity > 0) ||
+        (data.direction === "left" && data.bounds.left <= 0 && velocity < 0)) {
+        const newVelocity = (0, engine_1.getValue)(data.particle.options.bounce.horizontal);
+        data.particle.velocity.x *= -newVelocity;
+        bounced = true;
+    }
+    if (!bounced) {
+        return;
+    }
+    const minPos = data.offset.x + data.size;
+    if (data.bounds.right >= data.canvasSize.width) {
+        data.particle.position.x = data.canvasSize.width - minPos;
+    }
+    else if (data.bounds.left <= 0) {
+        data.particle.position.x = minPos;
+    }
+    if (data.outMode === "split") {
+        data.particle.destroy();
+    }
+}
+exports.bounceHorizontal = bounceHorizontal;
+function bounceVertical(data) {
+    if (data.outMode !== "bounce" &&
+        data.outMode !== "bounce-vertical" &&
+        data.outMode !== "bounceVertical" &&
+        data.outMode !== "split") {
+        return;
+    }
+    if (data.bounds.bottom < 0) {
+        data.particle.position.y = data.size + data.offset.y;
+    }
+    else if (data.bounds.top > data.canvasSize.height) {
+        data.particle.position.y = data.canvasSize.height - data.size - data.offset.y;
+    }
+    const velocity = data.particle.velocity.y;
+    let bounced = false;
+    if ((data.direction === "bottom" && data.bounds.bottom >= data.canvasSize.height && velocity > 0) ||
+        (data.direction === "top" && data.bounds.top <= 0 && velocity < 0)) {
+        const newVelocity = (0, engine_1.getValue)(data.particle.options.bounce.vertical);
+        data.particle.velocity.y *= -newVelocity;
+        bounced = true;
+    }
+    if (!bounced) {
+        return;
+    }
+    const minPos = data.offset.y + data.size;
+    if (data.bounds.bottom >= data.canvasSize.height) {
+        data.particle.position.y = data.canvasSize.height - minPos;
+    }
+    else if (data.bounds.top <= 0) {
+        data.particle.position.y = minPos;
+    }
+    if (data.outMode === "split") {
+        data.particle.destroy();
+    }
+}
+exports.bounceVertical = bounceVertical;

package/cjs/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadOutModesUpdater = void 0;
+const OutOfCanvasUpdater_1 = require("./OutOfCanvasUpdater");
+function loadOutModesUpdater(engine) {
+    return __awaiter(this, void 0, void 0, function* () {
+        yield engine.addParticleUpdater("outModes", (container) => new OutOfCanvasUpdater_1.OutOfCanvasUpdater(container));
+    });
+}
+exports.loadOutModesUpdater = loadOutModesUpdater;

package/esm/BounceOutMode.js

@@ -0,0 +1,36 @@
+import { calculateBounds } from "@tsparticles/engine";
+import { bounceHorizontal, bounceVertical } from "./Utils";
+export class BounceOutMode {
+    constructor(container) {
+        this.container = container;
+        this.modes = [
+            "bounce",
+            "bounce-vertical",
+            "bounce-horizontal",
+            "bounceVertical",
+            "bounceHorizontal",
+            "split",
+        ];
+    }
+    update(particle, direction, delta, outMode) {
+        if (!this.modes.includes(outMode)) {
+            return;
+        }
+        const container = this.container;
+        let handled = false;
+        for (const [, plugin] of container.plugins) {
+            if (plugin.particleBounce !== undefined) {
+                handled = plugin.particleBounce(particle, delta, direction);
+            }
+            if (handled) {
+                break;
+            }
+        }
+        if (handled) {
+            return;
+        }
+        const pos = particle.getPosition(), offset = particle.offset, size = particle.getRadius(), bounds = calculateBounds(pos, size), canvasSize = container.canvas.size;
+        bounceHorizontal({ particle, outMode, direction, bounds, canvasSize, offset, size });
+        bounceVertical({ particle, outMode, direction, bounds, canvasSize, offset, size });
+    }
+}

package/esm/DestroyOutMode.js

@@ -0,0 +1,33 @@
+import { Vector, getDistances, isPointInside } from "@tsparticles/engine";
+export class DestroyOutMode {
+    constructor(container) {
+        this.container = container;
+        this.modes = ["destroy"];
+    }
+    update(particle, direction, delta, outMode) {
+        if (!this.modes.includes(outMode)) {
+            return;
+        }
+        const container = this.container;
+        switch (particle.outType) {
+            case "normal":
+            case "outside":
+                if (isPointInside(particle.position, container.canvas.size, Vector.origin, particle.getRadius(), direction)) {
+                    return;
+                }
+                break;
+            case "inside": {
+                const { dx, dy } = getDistances(particle.position, particle.moveCenter);
+                const { x: vx, y: vy } = particle.velocity;
+                if ((vx < 0 && dx > particle.moveCenter.radius) ||
+                    (vy < 0 && dy > particle.moveCenter.radius) ||
+                    (vx >= 0 && dx < -particle.moveCenter.radius) ||
+                    (vy >= 0 && dy < -particle.moveCenter.radius)) {
+                    return;
+                }
+                break;
+            }
+        }
+        container.particles.remove(particle, undefined, true);
+    }
+}

package/esm/IBounceData.js

@@ -0,0 +1 @@
+export {};

package/esm/IOutModeManager.js

@@ -0,0 +1 @@
+export {};

package/esm/NoneOutMode.js

@@ -0,0 +1,41 @@
+import { Vector, isPointInside } from "@tsparticles/engine";
+export class NoneOutMode {
+    constructor(container) {
+        this.container = container;
+        this.modes = ["none"];
+    }
+    update(particle, direction, delta, outMode) {
+        if (!this.modes.includes(outMode)) {
+            return;
+        }
+        if ((particle.options.move.distance.horizontal &&
+            (direction === "left" || direction === "right")) ||
+            (particle.options.move.distance.vertical &&
+                (direction === "top" || direction === "bottom"))) {
+            return;
+        }
+        const gravityOptions = particle.options.move.gravity, container = this.container;
+        const canvasSize = container.canvas.size;
+        const pRadius = particle.getRadius();
+        if (!gravityOptions.enable) {
+            if ((particle.velocity.y > 0 && particle.position.y <= canvasSize.height + pRadius) ||
+                (particle.velocity.y < 0 && particle.position.y >= -pRadius) ||
+                (particle.velocity.x > 0 && particle.position.x <= canvasSize.width + pRadius) ||
+                (particle.velocity.x < 0 && particle.position.x >= -pRadius)) {
+                return;
+            }
+            if (!isPointInside(particle.position, container.canvas.size, Vector.origin, pRadius, direction)) {
+                container.particles.remove(particle);
+            }
+        }
+        else {
+            const position = particle.position;
+            if ((!gravityOptions.inverse &&
+                position.y > canvasSize.height + pRadius &&
+                direction === "bottom") ||
+                (gravityOptions.inverse && position.y < -pRadius && direction === "top")) {
+                container.particles.remove(particle);
+            }
+        }
+    }
+}

package/esm/OutOfCanvasUpdater.js

@@ -0,0 +1,33 @@
+import { BounceOutMode } from "./BounceOutMode";
+import { DestroyOutMode } from "./DestroyOutMode";
+import { NoneOutMode } from "./NoneOutMode";
+import { OutOutMode } from "./OutOutMode";
+export class OutOfCanvasUpdater {
+    constructor(container) {
+        this.container = container;
+        this.updaters = [
+            new BounceOutMode(container),
+            new DestroyOutMode(container),
+            new OutOutMode(container),
+            new NoneOutMode(container),
+        ];
+    }
+    init() {
+    }
+    isEnabled(particle) {
+        return !particle.destroyed && !particle.spawning;
+    }
+    update(particle, delta) {
+        var _a, _b, _c, _d;
+        const outModes = particle.options.move.outModes;
+        this.updateOutMode(particle, delta, (_a = outModes.bottom) !== null && _a !== void 0 ? _a : outModes.default, "bottom");
+        this.updateOutMode(particle, delta, (_b = outModes.left) !== null && _b !== void 0 ? _b : outModes.default, "left");
+        this.updateOutMode(particle, delta, (_c = outModes.right) !== null && _c !== void 0 ? _c : outModes.default, "right");
+        this.updateOutMode(particle, delta, (_d = outModes.top) !== null && _d !== void 0 ? _d : outModes.default, "top");
+    }
+    updateOutMode(particle, delta, outMode, direction) {
+        for (const updater of this.updaters) {
+            updater.update(particle, direction, delta, outMode);
+        }
+    }
+}

package/esm/OutOutMode.js

@@ -0,0 +1,107 @@
+import { Vector, calculateBounds, getDistances, getRandom, isPointInside, randomInRange, } from "@tsparticles/engine";
+export class OutOutMode {
+    constructor(container) {
+        this.container = container;
+        this.modes = ["out"];
+    }
+    update(particle, direction, delta, outMode) {
+        if (!this.modes.includes(outMode)) {
+            return;
+        }
+        const container = this.container;
+        switch (particle.outType) {
+            case "inside": {
+                const { x: vx, y: vy } = particle.velocity;
+                const circVec = Vector.origin;
+                circVec.length = particle.moveCenter.radius;
+                circVec.angle = particle.velocity.angle + Math.PI;
+                circVec.addTo(Vector.create(particle.moveCenter));
+                const { dx, dy } = getDistances(particle.position, circVec);
+                if ((vx <= 0 && dx >= 0) || (vy <= 0 && dy >= 0) || (vx >= 0 && dx <= 0) || (vy >= 0 && dy <= 0)) {
+                    return;
+                }
+                particle.position.x = Math.floor(randomInRange({
+                    min: 0,
+                    max: container.canvas.size.width,
+                }));
+                particle.position.y = Math.floor(randomInRange({
+                    min: 0,
+                    max: container.canvas.size.height,
+                }));
+                const { dx: newDx, dy: newDy } = getDistances(particle.position, particle.moveCenter);
+                particle.direction = Math.atan2(-newDy, -newDx);
+                particle.velocity.angle = particle.direction;
+                break;
+            }
+            default: {
+                if (isPointInside(particle.position, container.canvas.size, Vector.origin, particle.getRadius(), direction)) {
+                    return;
+                }
+                switch (particle.outType) {
+                    case "outside": {
+                        particle.position.x =
+                            Math.floor(randomInRange({
+                                min: -particle.moveCenter.radius,
+                                max: particle.moveCenter.radius,
+                            })) + particle.moveCenter.x;
+                        particle.position.y =
+                            Math.floor(randomInRange({
+                                min: -particle.moveCenter.radius,
+                                max: particle.moveCenter.radius,
+                            })) + particle.moveCenter.y;
+                        const { dx, dy } = getDistances(particle.position, particle.moveCenter);
+                        if (particle.moveCenter.radius) {
+                            particle.direction = Math.atan2(dy, dx);
+                            particle.velocity.angle = particle.direction;
+                        }
+                        break;
+                    }
+                    case "normal": {
+                        const wrap = particle.options.move.warp, canvasSize = container.canvas.size, newPos = {
+                            bottom: canvasSize.height + particle.getRadius() + particle.offset.y,
+                            left: -particle.getRadius() - particle.offset.x,
+                            right: canvasSize.width + particle.getRadius() + particle.offset.x,
+                            top: -particle.getRadius() - particle.offset.y,
+                        }, sizeValue = particle.getRadius(), nextBounds = calculateBounds(particle.position, sizeValue);
+                        if (direction === "right" &&
+                            nextBounds.left > canvasSize.width + particle.offset.x) {
+                            particle.position.x = newPos.left;
+                            particle.initialPosition.x = particle.position.x;
+                            if (!wrap) {
+                                particle.position.y = getRandom() * canvasSize.height;
+                                particle.initialPosition.y = particle.position.y;
+                            }
+                        }
+                        else if (direction === "left" && nextBounds.right < -particle.offset.x) {
+                            particle.position.x = newPos.right;
+                            particle.initialPosition.x = particle.position.x;
+                            if (!wrap) {
+                                particle.position.y = getRandom() * canvasSize.height;
+                                particle.initialPosition.y = particle.position.y;
+                            }
+                        }
+                        if (direction === "bottom" &&
+                            nextBounds.top > canvasSize.height + particle.offset.y) {
+                            if (!wrap) {
+                                particle.position.x = getRandom() * canvasSize.width;
+                                particle.initialPosition.x = particle.position.x;
+                            }
+                            particle.position.y = newPos.top;
+                            particle.initialPosition.y = particle.position.y;
+                        }
+                        else if (direction === "top" && nextBounds.bottom < -particle.offset.y) {
+                            if (!wrap) {
+                                particle.position.x = getRandom() * canvasSize.width;
+                                particle.initialPosition.x = particle.position.x;
+                            }
+                            particle.position.y = newPos.bottom;
+                            particle.initialPosition.y = particle.position.y;
+                        }
+                        break;
+                    }
+                }
+                break;
+            }
+        }
+    }
+}

package/esm/Utils.js

@@ -0,0 +1,71 @@
+import { getValue } from "@tsparticles/engine";
+export function bounceHorizontal(data) {
+    if (data.outMode !== "bounce" &&
+        data.outMode !== "bounce-horizontal" &&
+        data.outMode !== "bounceHorizontal" &&
+        data.outMode !== "split") {
+        return;
+    }
+    if (data.bounds.right < 0) {
+        data.particle.position.x = data.size + data.offset.x;
+    }
+    else if (data.bounds.left > data.canvasSize.width) {
+        data.particle.position.x = data.canvasSize.width - data.size - data.offset.x;
+    }
+    const velocity = data.particle.velocity.x;
+    let bounced = false;
+    if ((data.direction === "right" && data.bounds.right >= data.canvasSize.width && velocity > 0) ||
+        (data.direction === "left" && data.bounds.left <= 0 && velocity < 0)) {
+        const newVelocity = getValue(data.particle.options.bounce.horizontal);
+        data.particle.velocity.x *= -newVelocity;
+        bounced = true;
+    }
+    if (!bounced) {
+        return;
+    }
+    const minPos = data.offset.x + data.size;
+    if (data.bounds.right >= data.canvasSize.width) {
+        data.particle.position.x = data.canvasSize.width - minPos;
+    }
+    else if (data.bounds.left <= 0) {
+        data.particle.position.x = minPos;
+    }
+    if (data.outMode === "split") {
+        data.particle.destroy();
+    }
+}
+export function bounceVertical(data) {
+    if (data.outMode !== "bounce" &&
+        data.outMode !== "bounce-vertical" &&
+        data.outMode !== "bounceVertical" &&
+        data.outMode !== "split") {
+        return;
+    }
+    if (data.bounds.bottom < 0) {
+        data.particle.position.y = data.size + data.offset.y;
+    }
+    else if (data.bounds.top > data.canvasSize.height) {
+        data.particle.position.y = data.canvasSize.height - data.size - data.offset.y;
+    }
+    const velocity = data.particle.velocity.y;
+    let bounced = false;
+    if ((data.direction === "bottom" && data.bounds.bottom >= data.canvasSize.height && velocity > 0) ||
+        (data.direction === "top" && data.bounds.top <= 0 && velocity < 0)) {
+        const newVelocity = getValue(data.particle.options.bounce.vertical);
+        data.particle.velocity.y *= -newVelocity;
+        bounced = true;
+    }
+    if (!bounced) {
+        return;
+    }
+    const minPos = data.offset.y + data.size;
+    if (data.bounds.bottom >= data.canvasSize.height) {
+        data.particle.position.y = data.canvasSize.height - minPos;
+    }
+    else if (data.bounds.top <= 0) {
+        data.particle.position.y = minPos;
+    }
+    if (data.outMode === "split") {
+        data.particle.destroy();
+    }
+}

package/esm/index.js

@@ -0,0 +1,4 @@
+import { OutOfCanvasUpdater } from "./OutOfCanvasUpdater";
+export async function loadOutModesUpdater(engine) {
+    await engine.addParticleUpdater("outModes", (container) => new OutOfCanvasUpdater(container));
+}

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@tsparticles/updater-out-modes",
+  "version": "3.0.0-alpha.0",
+  "description": "tsParticles particles out modes updater",
+  "homepage": "https://particles.js.org",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/matteobruni/tsparticles.git",
+    "directory": "updaters/outModes"
+  },
+  "keywords": [
+    "front-end",
+    "frontend",
+    "tsparticles",
+    "particles.js",
+    "particlesjs",
+    "particles",
+    "particle",
+    "canvas",
+    "jsparticles",
+    "xparticles",
+    "particles-js",
+    "particles-bg",
+    "particles-bg-vue",
+    "particles-ts",
+    "particles.ts",
+    "react-particles-js",
+    "react-particles.js",
+    "react-particles",
+    "react",
+    "reactjs",
+    "vue-particles",
+    "ngx-particles",
+    "angular-particles",
+    "particleground",
+    "vue",
+    "vuejs",
+    "preact",
+    "preactjs",
+    "jquery",
+    "angularjs",
+    "angular",
+    "typescript",
+    "javascript",
+    "animation",
+    "web",
+    "html5",
+    "web-design",
+    "webdesign",
+    "css",
+    "html",
+    "css3",
+    "animated",
+    "background",
+    "confetti",
+    "canvas",
+    "fireworks",
+    "fireworks-js",
+    "confetti-js",
+    "confettijs",
+    "fireworksjs",
+    "canvas-confetti",
+    "@tsparticles/plugin",
+    "@tsparticles/updater"
+  ],
+  "author": "Matteo Bruni <matteo.bruni@me.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/matteobruni/tsparticles/issues"
+  },
+  "main": "cjs/index.js",
+  "jsdelivr": "tsparticles.updater.out-modes.min.js",
+  "unpkg": "tsparticles.updater.out-modes.min.js",
+  "module": "esm/index.js",
+  "types": "types/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@tsparticles/engine": "^3.0.0-alpha.0"
+  }
+}