@tsparticles/plugin-absorbers 3.0.0-alpha.0

package/umd/AbsorberInstance.js

@@ -0,0 +1,165 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "@tsparticles/engine", "./Options/Classes/Absorber"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.AbsorberInstance = void 0;
+    const engine_1 = require("@tsparticles/engine");
+    const Absorber_1 = require("./Options/Classes/Absorber");
+    class AbsorberInstance {
+        constructor(absorbers, container, options, position) {
+            var _a, _b, _c;
+            this.absorbers = absorbers;
+            this.container = container;
+            this.initialPosition = position ? engine_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, engine_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, engine_1.rangeColorToRgb)(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, engine_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, engine_1.getDistances)(this.position, pos), v = engine_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);
+            }
+        }
+        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, engine_1.getStyleFromRgb)(this.color, this.opacity);
+            context.fill();
+        }
+        resize() {
+            const initialPosition = this.initialPosition;
+            this.position =
+                initialPosition && (0, engine_1.isPointInside)(initialPosition, this.container.canvas.size, engine_1.Vector.origin)
+                    ? initialPosition
+                    : this.calcPosition();
+        }
+        calcPosition() {
+            const exactPosition = (0, engine_1.calcPositionOrRandomFromSizeRanged)({
+                size: this.container.canvas.size,
+                position: this.options.position,
+            });
+            return engine_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, engine_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 = engine_1.Vector.create(0, 0);
+                    particle.absorberOrbit.length = (0, engine_1.getDistance)(particle.getPosition(), this.position);
+                    particle.absorberOrbit.angle = (0, engine_1.getRandom)() * 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 + ((0, engine_1.getRandom)() * 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(engine_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 = engine_1.Vector.origin;
+                addV.length = v.length;
+                addV.angle = v.angle;
+                particle.velocity.addTo(addV);
+            }
+        }
+    }
+    exports.AbsorberInstance = AbsorberInstance;
+});

package/umd/Absorbers.js

@@ -0,0 +1,74 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "@tsparticles/engine", "./AbsorberInstance"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Absorbers = void 0;
+    const engine_1 = require("@tsparticles/engine");
+    const AbsorberInstance_1 = require("./AbsorberInstance");
+    class Absorbers {
+        constructor(container) {
+            this.container = container;
+            this.array = [];
+            this.absorbers = [];
+            this.interactivityAbsorbers = [];
+            container.getAbsorber = (idxOrName) => idxOrName === undefined || typeof idxOrName === "number"
+                ? this.array[idxOrName || 0]
+                : this.array.find((t) => t.name === idxOrName);
+            container.addAbsorber = (options, position) => this.addAbsorber(options, position);
+        }
+        addAbsorber(options, position) {
+            const absorber = new AbsorberInstance_1.AbsorberInstance(this, this.container, options, position);
+            this.array.push(absorber);
+            return absorber;
+        }
+        draw(context) {
+            for (const absorber of this.array) {
+                absorber.draw(context);
+            }
+        }
+        handleClickMode(mode) {
+            const absorberOptions = this.absorbers, modeAbsorbers = this.interactivityAbsorbers;
+            if (mode === "absorber") {
+                const absorbersModeOptions = (0, engine_1.itemFromSingleOrMultiple)(modeAbsorbers), absorbersOptions = absorbersModeOptions !== null && absorbersModeOptions !== void 0 ? absorbersModeOptions : (0, engine_1.itemFromSingleOrMultiple)(absorberOptions), aPosition = this.container.interactivity.mouse.clickPosition;
+                this.addAbsorber(absorbersOptions, aPosition);
+            }
+        }
+        async init() {
+            this.absorbers = this.container.actualOptions.absorbers;
+            this.interactivityAbsorbers = this.container.actualOptions.interactivity.modes.absorbers;
+            (0, engine_1.executeOnSingleOrMultiple)(this.absorbers, (absorber) => {
+                this.addAbsorber(absorber);
+            });
+        }
+        particleUpdate(particle) {
+            for (const absorber of this.array) {
+                absorber.attract(particle);
+                if (particle.destroyed) {
+                    break;
+                }
+            }
+        }
+        removeAbsorber(absorber) {
+            const index = this.array.indexOf(absorber);
+            if (index >= 0) {
+                this.array.splice(index, 1);
+            }
+        }
+        resize() {
+            for (const absorber of this.array) {
+                absorber.resize();
+            }
+        }
+        stop() {
+            this.array = [];
+        }
+    }
+    exports.Absorbers = Absorbers;
+});

package/umd/Enums/AbsorberClickMode.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/Options/Classes/Absorber.js

@@ -0,0 +1,60 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "@tsparticles/engine", "./AbsorberSize"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Absorber = void 0;
+    const engine_1 = require("@tsparticles/engine");
+    const AbsorberSize_1 = require("./AbsorberSize");
+    class Absorber {
+        constructor() {
+            this.color = new engine_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 = engine_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, engine_1.setRangeValue)(data.position.x);
+                }
+                if (data.position.y !== undefined) {
+                    this.position.y = (0, engine_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/umd/Options/Classes/AbsorberSize.js

@@ -0,0 +1,39 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "./AbsorberSizeLimit", "@tsparticles/engine"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.AbsorberSize = void 0;
+    const AbsorberSizeLimit_1 = require("./AbsorberSizeLimit");
+    const engine_1 = require("@tsparticles/engine");
+    class AbsorberSize extends engine_1.ValueWithRandom {
+        constructor() {
+            super();
+            this.density = 5;
+            this.value = 50;
+            this.limit = new AbsorberSizeLimit_1.AbsorberSizeLimit();
+        }
+        load(data) {
+            if (!data) {
+                return;
+            }
+            super.load(data);
+            if (data.density !== undefined) {
+                this.density = data.density;
+            }
+            if (typeof data.limit === "number") {
+                this.limit.radius = data.limit;
+            }
+            else {
+                this.limit.load(data.limit);
+            }
+        }
+    }
+    exports.AbsorberSize = AbsorberSize;
+});

package/umd/Options/Classes/AbsorberSizeLimit.js

@@ -0,0 +1,31 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.AbsorberSizeLimit = void 0;
+    class AbsorberSizeLimit {
+        constructor() {
+            this.radius = 0;
+            this.mass = 0;
+        }
+        load(data) {
+            if (!data) {
+                return;
+            }
+            if (data.mass !== undefined) {
+                this.mass = data.mass;
+            }
+            if (data.radius !== undefined) {
+                this.radius = data.radius;
+            }
+        }
+    }
+    exports.AbsorberSizeLimit = AbsorberSizeLimit;
+});

package/umd/Options/Interfaces/IAbsorber.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/Options/Interfaces/IAbsorberSize.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/Options/Interfaces/IAbsorberSizeLimit.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/index.js

@@ -0,0 +1,81 @@
+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);
+};
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "@tsparticles/engine", "./Options/Classes/Absorber", "./Absorbers", "./AbsorberContainer", "./Enums/AbsorberClickMode"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.loadAbsorbersPlugin = void 0;
+    const engine_1 = require("@tsparticles/engine");
+    const Absorber_1 = require("./Options/Classes/Absorber");
+    const Absorbers_1 = require("./Absorbers");
+    class AbsorbersPlugin {
+        constructor() {
+            this.id = "absorbers";
+        }
+        getPlugin(container) {
+            return new Absorbers_1.Absorbers(container);
+        }
+        loadOptions(options, source) {
+            var _a, _b;
+            if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
+                return;
+            }
+            if (source === null || source === void 0 ? void 0 : source.absorbers) {
+                options.absorbers = (0, engine_1.executeOnSingleOrMultiple)(source.absorbers, (absorber) => {
+                    const tmp = new Absorber_1.Absorber();
+                    tmp.load(absorber);
+                    return tmp;
+                });
+            }
+            options.interactivity.modes.absorbers = (0, engine_1.executeOnSingleOrMultiple)((_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, (absorber) => {
+                const tmp = new Absorber_1.Absorber();
+                tmp.load(absorber);
+                return tmp;
+            });
+        }
+        needsPlugin(options) {
+            var _a, _b, _c;
+            if (!options) {
+                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, engine_1.isInArray)("absorber", options.interactivity.events.onClick.mode)) {
+                return true;
+            }
+            return false;
+        }
+    }
+    async function loadAbsorbersPlugin(engine) {
+        const plugin = new AbsorbersPlugin();
+        await engine.addPlugin(plugin);
+    }
+    exports.loadAbsorbersPlugin = loadAbsorbersPlugin;
+    __exportStar(require("./AbsorberContainer"), exports);
+    __exportStar(require("./Enums/AbsorberClickMode"), exports);
+});

package/umd/types.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});