tsparticles 1.42.2 → 1.43.0

package/cjs/Plugins/Absorbers/AbsorberInstance.js

@@ -0,0 +1,158 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AbsorberInstance = void 0;
+const NumberUtils_1 = require("../../Utils/NumberUtils");
+const ColorUtils_1 = require("../../Utils/ColorUtils");
+const Absorber_1 = require("./Options/Classes/Absorber");
+const Vector_1 = require("../../Core/Utils/Vector");
+const Utils_1 = require("../../Utils/Utils");
+class AbsorberInstance {
+    constructor(absorbers, container, options, position) {
+        var _a, _b, _c;
+        this.absorbers = absorbers;
+        this.container = container;
+        this.initialPosition = position ? Vector_1.Vector.create(position.x, position.y) : undefined;
+        if (options instanceof Absorber_1.Absorber) {
+            this.options = options;
+        }
+        else {
+            this.options = new Absorber_1.Absorber();
+            this.options.load(options);
+        }
+        this.dragging = false;
+        this.name = this.options.name;
+        this.opacity = this.options.opacity;
+        this.size = (0, NumberUtils_1.getRangeValue)(this.options.size.value) * container.retina.pixelRatio;
+        this.mass = this.size * this.options.size.density * container.retina.reduceFactor;
+        const limit = this.options.size.limit;
+        this.limit = {
+            radius: limit.radius * container.retina.pixelRatio * container.retina.reduceFactor,
+            mass: limit.mass,
+        };
+        this.color = (_a = (0, ColorUtils_1.colorToRgb)(this.options.color)) !== null && _a !== void 0 ? _a : {
+            b: 0,
+            g: 0,
+            r: 0,
+        };
+        this.position = (_c = (_b = this.initialPosition) === null || _b === void 0 ? void 0 : _b.copy()) !== null && _c !== void 0 ? _c : this.calcPosition();
+    }
+    attract(particle) {
+        const container = this.container, options = this.options;
+        if (options.draggable) {
+            const mouse = container.interactivity.mouse;
+            if (mouse.clicking && mouse.downPosition) {
+                const mouseDist = (0, NumberUtils_1.getDistance)(this.position, mouse.downPosition);
+                if (mouseDist <= this.size) {
+                    this.dragging = true;
+                }
+            }
+            else {
+                this.dragging = false;
+            }
+            if (this.dragging && mouse.position) {
+                this.position.x = mouse.position.x;
+                this.position.y = mouse.position.y;
+            }
+        }
+        const pos = particle.getPosition(), { dx, dy, distance } = (0, NumberUtils_1.getDistances)(this.position, pos), v = Vector_1.Vector.create(dx, dy);
+        v.length = (this.mass / Math.pow(distance, 2)) * container.retina.reduceFactor;
+        if (distance < this.size + particle.getRadius()) {
+            const sizeFactor = particle.getRadius() * 0.033 * container.retina.pixelRatio;
+            if ((this.size > particle.getRadius() && distance < this.size - particle.getRadius()) ||
+                (particle.absorberOrbit !== undefined && particle.absorberOrbit.length < 0)) {
+                if (options.destroy) {
+                    particle.destroy();
+                }
+                else {
+                    particle.needsNewPosition = true;
+                    this.updateParticlePosition(particle, v);
+                }
+            }
+            else {
+                if (options.destroy) {
+                    particle.size.value -= sizeFactor;
+                }
+                this.updateParticlePosition(particle, v);
+            }
+            if (this.limit.radius <= 0 || this.size < this.limit.radius) {
+                this.size += sizeFactor;
+            }
+            if (this.limit.mass <= 0 || this.mass < this.limit.mass) {
+                this.mass += sizeFactor * this.options.size.density * container.retina.reduceFactor;
+            }
+        }
+        else {
+            this.updateParticlePosition(particle, v);
+        }
+    }
+    resize() {
+        const initialPosition = this.initialPosition;
+        this.position =
+            initialPosition && (0, Utils_1.isPointInside)(initialPosition, this.container.canvas.size)
+                ? initialPosition
+                : this.calcPosition();
+    }
+    draw(context) {
+        context.translate(this.position.x, this.position.y);
+        context.beginPath();
+        context.arc(0, 0, this.size, 0, Math.PI * 2, false);
+        context.closePath();
+        context.fillStyle = (0, ColorUtils_1.getStyleFromRgb)(this.color, this.opacity);
+        context.fill();
+    }
+    calcPosition() {
+        const exactPosition = (0, NumberUtils_1.calcPositionOrRandomFromSizeRanged)({
+            size: this.container.canvas.size,
+            position: this.options.position,
+        });
+        return Vector_1.Vector.create(exactPosition.x, exactPosition.y);
+    }
+    updateParticlePosition(particle, v) {
+        var _a;
+        if (particle.destroyed) {
+            return;
+        }
+        const container = this.container, canvasSize = container.canvas.size;
+        if (particle.needsNewPosition) {
+            const newPosition = (0, NumberUtils_1.calcPositionOrRandomFromSize)({ size: canvasSize });
+            particle.position.setTo(newPosition);
+            particle.velocity.setTo(particle.initialVelocity);
+            particle.absorberOrbit = undefined;
+            particle.needsNewPosition = false;
+        }
+        if (this.options.orbits) {
+            if (particle.absorberOrbit === undefined) {
+                particle.absorberOrbit = Vector_1.Vector.create(0, 0);
+                particle.absorberOrbit.length = (0, NumberUtils_1.getDistance)(particle.getPosition(), this.position);
+                particle.absorberOrbit.angle = Math.random() * Math.PI * 2;
+            }
+            if (particle.absorberOrbit.length <= this.size && !this.options.destroy) {
+                const minSize = Math.min(canvasSize.width, canvasSize.height);
+                particle.absorberOrbit.length = minSize * (1 + (Math.random() * 0.2 - 0.1));
+            }
+            if (particle.absorberOrbitDirection === undefined) {
+                particle.absorberOrbitDirection =
+                    particle.velocity.x >= 0 ? "clockwise" : "counter-clockwise";
+            }
+            const orbitRadius = particle.absorberOrbit.length, orbitAngle = particle.absorberOrbit.angle, orbitDirection = particle.absorberOrbitDirection;
+            particle.velocity.setTo(Vector_1.Vector.origin);
+            const updateFunc = {
+                x: orbitDirection === "clockwise" ? Math.cos : Math.sin,
+                y: orbitDirection === "clockwise" ? Math.sin : Math.cos,
+            };
+            particle.position.x = this.position.x + orbitRadius * updateFunc.x(orbitAngle);
+            particle.position.y = this.position.y + orbitRadius * updateFunc.y(orbitAngle);
+            particle.absorberOrbit.length -= v.length;
+            particle.absorberOrbit.angle +=
+                ((((_a = particle.retina.moveSpeed) !== null && _a !== void 0 ? _a : 0) * container.retina.pixelRatio) / 100) *
+                    container.retina.reduceFactor;
+        }
+        else {
+            const addV = Vector_1.Vector.origin;
+            addV.length = v.length;
+            addV.angle = v.angle;
+            particle.velocity.addTo(addV);
+        }
+    }
+}
+exports.AbsorberInstance = AbsorberInstance;

package/cjs/Plugins/Absorbers/Absorbers.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Absorbers = void 0;
+const Absorber_1 = require("./Options/Classes/Absorber");
+const AbsorberInstance_1 = require("./AbsorberInstance");
+const Utils_1 = require("../../Utils/Utils");
+class Absorbers {
+    constructor(container) {
+        this.container = container;
+        this.array = [];
+        this.absorbers = [];
+        this.interactivityAbsorbers = [];
+        const overridableContainer = container;
+        overridableContainer.getAbsorber = (idxOrName) => idxOrName === undefined || typeof idxOrName === "number"
+            ? this.array[idxOrName || 0]
+            : this.array.find((t) => t.name === idxOrName);
+        overridableContainer.addAbsorber = (options, position) => this.addAbsorber(options, position);
+    }
+    init(options) {
+        var _a, _b;
+        if (!options) {
+            return;
+        }
+        if (options.absorbers) {
+            if (options.absorbers instanceof Array) {
+                this.absorbers = options.absorbers.map((s) => {
+                    const tmp = new Absorber_1.Absorber();
+                    tmp.load(s);
+                    return tmp;
+                });
+            }
+            else {
+                if (this.absorbers instanceof Array) {
+                    this.absorbers = new Absorber_1.Absorber();
+                }
+                this.absorbers.load(options.absorbers);
+            }
+        }
+        const interactivityAbsorbers = (_b = (_a = options.interactivity) === null || _a === void 0 ? void 0 : _a.modes) === null || _b === void 0 ? void 0 : _b.absorbers;
+        if (interactivityAbsorbers) {
+            if (interactivityAbsorbers instanceof Array) {
+                this.interactivityAbsorbers = interactivityAbsorbers.map((s) => {
+                    const tmp = new Absorber_1.Absorber();
+                    tmp.load(s);
+                    return tmp;
+                });
+            }
+            else {
+                if (this.interactivityAbsorbers instanceof Array) {
+                    this.interactivityAbsorbers = new Absorber_1.Absorber();
+                }
+                this.interactivityAbsorbers.load(interactivityAbsorbers);
+            }
+        }
+        if (this.absorbers instanceof Array) {
+            for (const absorberOptions of this.absorbers) {
+                this.addAbsorber(absorberOptions);
+            }
+        }
+        else {
+            this.addAbsorber(this.absorbers);
+        }
+    }
+    particleUpdate(particle) {
+        for (const absorber of this.array) {
+            absorber.attract(particle);
+            if (particle.destroyed) {
+                break;
+            }
+        }
+    }
+    draw(context) {
+        for (const absorber of this.array) {
+            context.save();
+            absorber.draw(context);
+            context.restore();
+        }
+    }
+    stop() {
+        this.array = [];
+    }
+    resize() {
+        for (const absorber of this.array) {
+            absorber.resize();
+        }
+    }
+    handleClickMode(mode) {
+        const absorberOptions = this.absorbers, modeAbsorbers = this.interactivityAbsorbers;
+        if (mode === "absorber") {
+            let absorbersModeOptions;
+            if (modeAbsorbers instanceof Array) {
+                if (modeAbsorbers.length > 0) {
+                    absorbersModeOptions = (0, Utils_1.itemFromArray)(modeAbsorbers);
+                }
+            }
+            else {
+                absorbersModeOptions = modeAbsorbers;
+            }
+            const absorbersOptions = absorbersModeOptions !== null && absorbersModeOptions !== void 0 ? absorbersModeOptions : (absorberOptions instanceof Array ? (0, Utils_1.itemFromArray)(absorberOptions) : absorberOptions), aPosition = this.container.interactivity.mouse.clickPosition;
+            this.addAbsorber(absorbersOptions, aPosition);
+        }
+    }
+    addAbsorber(options, position) {
+        const absorber = new AbsorberInstance_1.AbsorberInstance(this, this.container, options, position);
+        this.array.push(absorber);
+        return absorber;
+    }
+    removeAbsorber(absorber) {
+        const index = this.array.indexOf(absorber);
+        if (index >= 0) {
+            this.array.splice(index, 1);
+        }
+    }
+}
+exports.Absorbers = Absorbers;

package/cjs/Plugins/Absorbers/Options/Classes/Absorber.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Absorber = void 0;
+const AbsorberSize_1 = require("./AbsorberSize");
+const OptionsColor_1 = require("../../../../Options/Classes/OptionsColor");
+const NumberUtils_1 = require("../../../../Utils/NumberUtils");
+class Absorber {
+    constructor() {
+        this.color = new OptionsColor_1.OptionsColor();
+        this.color.value = "#000000";
+        this.draggable = false;
+        this.opacity = 1;
+        this.destroy = true;
+        this.orbits = false;
+        this.size = new AbsorberSize_1.AbsorberSize();
+    }
+    load(data) {
+        if (data === undefined) {
+            return;
+        }
+        if (data.color !== undefined) {
+            this.color = OptionsColor_1.OptionsColor.create(this.color, data.color);
+        }
+        if (data.draggable !== undefined) {
+            this.draggable = data.draggable;
+        }
+        this.name = data.name;
+        if (data.opacity !== undefined) {
+            this.opacity = data.opacity;
+        }
+        if (data.position !== undefined) {
+            this.position = {};
+            if (data.position.x !== undefined) {
+                this.position.x = (0, NumberUtils_1.setRangeValue)(data.position.x);
+            }
+            if (data.position.y !== undefined) {
+                this.position.y = (0, NumberUtils_1.setRangeValue)(data.position.y);
+            }
+        }
+        if (data.size !== undefined) {
+            this.size.load(data.size);
+        }
+        if (data.destroy !== undefined) {
+            this.destroy = data.destroy;
+        }
+        if (data.orbits !== undefined) {
+            this.orbits = data.orbits;
+        }
+    }
+}
+exports.Absorber = Absorber;

package/cjs/Plugins/Absorbers/index.js

@@ -0,0 +1,93 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadAbsorbersPlugin = void 0;
+const Absorber_1 = require("./Options/Classes/Absorber");
+const Absorbers_1 = require("./Absorbers");
+const Utils_1 = require("../../Utils/Utils");
+class AbsorbersPlugin {
+    constructor() {
+        this.id = "absorbers";
+    }
+    getPlugin(container) {
+        return new Absorbers_1.Absorbers(container);
+    }
+    needsPlugin(options) {
+        var _a, _b, _c;
+        if (options === undefined) {
+            return false;
+        }
+        const absorbers = options.absorbers;
+        if (absorbers instanceof Array) {
+            return !!absorbers.length;
+        }
+        else if (absorbers) {
+            return true;
+        }
+        else if (((_c = (_b = (_a = options.interactivity) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.onClick) === null || _c === void 0 ? void 0 : _c.mode) &&
+            (0, Utils_1.isInArray)("absorber", options.interactivity.events.onClick.mode)) {
+            return true;
+        }
+        return false;
+    }
+    loadOptions(options, source) {
+        var _a, _b;
+        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
+            return;
+        }
+        const optionsCast = options;
+        if (source === null || source === void 0 ? void 0 : source.absorbers) {
+            if ((source === null || source === void 0 ? void 0 : source.absorbers) instanceof Array) {
+                optionsCast.absorbers = source === null || source === void 0 ? void 0 : source.absorbers.map((s) => {
+                    const tmp = new Absorber_1.Absorber();
+                    tmp.load(s);
+                    return tmp;
+                });
+            }
+            else {
+                let absorberOptions = optionsCast.absorbers;
+                if ((absorberOptions === null || absorberOptions === void 0 ? void 0 : absorberOptions.load) === undefined) {
+                    optionsCast.absorbers = absorberOptions = new Absorber_1.Absorber();
+                }
+                absorberOptions.load(source === null || source === void 0 ? void 0 : source.absorbers);
+            }
+        }
+        const interactivityAbsorbers = (_b = (_a = source === null || source === void 0 ? void 0 : source.interactivity) === null || _a === void 0 ? void 0 : _a.modes) === null || _b === void 0 ? void 0 : _b.absorbers;
+        if (interactivityAbsorbers) {
+            if (interactivityAbsorbers instanceof Array) {
+                optionsCast.interactivity.modes.absorbers = interactivityAbsorbers.map((s) => {
+                    const tmp = new Absorber_1.Absorber();
+                    tmp.load(s);
+                    return tmp;
+                });
+            }
+            else {
+                let absorberOptions = optionsCast.interactivity.modes.absorbers;
+                if ((absorberOptions === null || absorberOptions === void 0 ? void 0 : absorberOptions.load) === undefined) {
+                    optionsCast.interactivity.modes.absorbers = absorberOptions = new Absorber_1.Absorber();
+                }
+                absorberOptions.load(interactivityAbsorbers);
+            }
+        }
+    }
+}
+async function loadAbsorbersPlugin(engine) {
+    const plugin = new AbsorbersPlugin();
+    await engine.addPlugin(plugin);
+}
+exports.loadAbsorbersPlugin = loadAbsorbersPlugin;
+__exportStar(require("./Enums/AbsorberClickMode"), exports);
+__exportStar(require("./Options/Interfaces/IAbsorberOptions"), exports);