tsparticles 1.40.2 → 1.41.0

package/umd/Interactions/External/Bubble/Bubbler.js

@@ -0,0 +1,261 @@
+(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", "../../../Core", "../../../Utils"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Bubbler = void 0;
+    const Core_1 = require("../../../Core");
+    const Utils_1 = require("../../../Utils");
+    function calculateBubbleValue(particleValue, modeValue, optionsValue, ratio) {
+        if (modeValue >= optionsValue) {
+            const value = particleValue + (modeValue - optionsValue) * ratio;
+            return (0, Utils_1.clamp)(value, particleValue, modeValue);
+        }
+        else if (modeValue < optionsValue) {
+            const value = particleValue - (optionsValue - modeValue) * ratio;
+            return (0, Utils_1.clamp)(value, modeValue, particleValue);
+        }
+    }
+    class Bubbler extends Core_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, divBubble = (0, Utils_1.isDivModeEnabled)("bubble", divs);
+            if (!(divBubble || (events.onHover.enable && mouse.position) || (events.onClick.enable && mouse.clickPosition))) {
+                return false;
+            }
+            const hoverMode = events.onHover.mode;
+            const clickMode = events.onClick.mode;
+            return (0, Utils_1.isInArray)("bubble", hoverMode) || (0, Utils_1.isInArray)("bubble", clickMode) || divBubble;
+        }
+        reset(particle, force) {
+            if (!(!particle.bubble.inRange || force)) {
+                return;
+            }
+            delete particle.bubble.div;
+            delete particle.bubble.opacity;
+            delete particle.bubble.radius;
+            delete particle.bubble.color;
+        }
+        interact() {
+            const options = this.container.actualOptions, events = options.interactivity.events, onHover = events.onHover, onClick = events.onClick, hoverEnabled = onHover.enable, hoverMode = onHover.mode, clickEnabled = onClick.enable, clickMode = onClick.mode, divs = events.onDiv;
+            if (hoverEnabled && (0, Utils_1.isInArray)("bubble", hoverMode)) {
+                this.hoverBubble();
+            }
+            else if (clickEnabled && (0, Utils_1.isInArray)("bubble", clickMode)) {
+                this.clickBubble();
+            }
+            else {
+                (0, Utils_1.divModeExecute)("bubble", divs, (selector, div) => this.singleSelectorHover(selector, div));
+            }
+        }
+        singleSelectorHover(selector, div) {
+            const container = this.container, selectors = document.querySelectorAll(selector);
+            if (!selectors.length) {
+                return;
+            }
+            selectors.forEach((item) => {
+                const elem = item, pxRatio = container.retina.pixelRatio, pos = {
+                    x: (elem.offsetLeft + elem.offsetWidth / 2) * pxRatio,
+                    y: (elem.offsetTop + elem.offsetHeight / 2) * pxRatio,
+                }, repulseRadius = (elem.offsetWidth / 2) * pxRatio, area = div.type === "circle"
+                    ? new Core_1.Circle(pos.x, pos.y, repulseRadius)
+                    : new Core_1.Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), query = container.particles.quadTree.query(area);
+                for (const particle of query) {
+                    if (!area.contains(particle.getPosition())) {
+                        continue;
+                    }
+                    particle.bubble.inRange = true;
+                    const divs = container.actualOptions.interactivity.modes.bubble.divs;
+                    const divBubble = (0, Utils_1.divMode)(divs, elem);
+                    if (!particle.bubble.div || particle.bubble.div !== elem) {
+                        this.reset(particle, true);
+                        particle.bubble.div = elem;
+                    }
+                    this.hoverBubbleSize(particle, 1, divBubble);
+                    this.hoverBubbleOpacity(particle, 1, divBubble);
+                    this.hoverBubbleColor(particle, 1, divBubble);
+                }
+            });
+        }
+        process(particle, distMouse, timeSpent, data) {
+            const container = this.container, bubbleParam = data.bubbleObj.optValue;
+            if (bubbleParam === undefined) {
+                return;
+            }
+            const options = container.actualOptions, bubbleDuration = options.interactivity.modes.bubble.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value || 0, type = data.type;
+            if (bubbleParam === particlesParam) {
+                return;
+            }
+            if (!container.bubble.durationEnd) {
+                if (distMouse <= bubbleDistance) {
+                    const obj = pObjBubble !== null && pObjBubble !== void 0 ? pObjBubble : pObj;
+                    if (obj !== bubbleParam) {
+                        const value = pObj - (timeSpent * (pObj - bubbleParam)) / bubbleDuration;
+                        if (type === "size") {
+                            particle.bubble.radius = value;
+                        }
+                        if (type === "opacity") {
+                            particle.bubble.opacity = value;
+                        }
+                    }
+                }
+                else {
+                    if (type === "size") {
+                        delete particle.bubble.radius;
+                    }
+                    if (type === "opacity") {
+                        delete particle.bubble.opacity;
+                    }
+                }
+            }
+            else if (pObjBubble) {
+                if (type === "size") {
+                    delete particle.bubble.radius;
+                }
+                if (type === "opacity") {
+                    delete particle.bubble.opacity;
+                }
+            }
+        }
+        clickBubble() {
+            var _a, _b;
+            const container = this.container, options = container.actualOptions, mouseClickPos = container.interactivity.mouse.clickPosition;
+            if (!mouseClickPos) {
+                return;
+            }
+            const distance = container.retina.bubbleModeDistance, query = container.particles.quadTree.queryCircle(mouseClickPos, distance);
+            for (const particle of query) {
+                if (!container.bubble.clicking) {
+                    continue;
+                }
+                particle.bubble.inRange = !container.bubble.durationEnd;
+                const pos = particle.getPosition(), distMouse = (0, Utils_1.getDistance)(pos, mouseClickPos), timeSpent = (new Date().getTime() - (container.interactivity.mouse.clickTime || 0)) / 1000;
+                if (timeSpent > options.interactivity.modes.bubble.duration) {
+                    container.bubble.durationEnd = true;
+                }
+                if (timeSpent > options.interactivity.modes.bubble.duration * 2) {
+                    container.bubble.clicking = false;
+                    container.bubble.durationEnd = false;
+                }
+                const sizeData = {
+                    bubbleObj: {
+                        optValue: container.retina.bubbleModeSize,
+                        value: particle.bubble.radius,
+                    },
+                    particlesObj: {
+                        optValue: (0, Utils_1.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio,
+                        value: particle.size.value,
+                    },
+                    type: "size",
+                };
+                this.process(particle, distMouse, timeSpent, sizeData);
+                const opacityData = {
+                    bubbleObj: {
+                        optValue: options.interactivity.modes.bubble.opacity,
+                        value: particle.bubble.opacity,
+                    },
+                    particlesObj: {
+                        optValue: (0, Utils_1.getRangeMax)(particle.options.opacity.value),
+                        value: (_b = (_a = particle.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 1,
+                    },
+                    type: "opacity",
+                };
+                this.process(particle, distMouse, timeSpent, opacityData);
+                if (!container.bubble.durationEnd) {
+                    if (distMouse <= container.retina.bubbleModeDistance) {
+                        this.hoverBubbleColor(particle, distMouse);
+                    }
+                    else {
+                        delete particle.bubble.color;
+                    }
+                }
+                else {
+                    delete particle.bubble.color;
+                }
+            }
+        }
+        hoverBubble() {
+            const container = this.container, mousePos = container.interactivity.mouse.position;
+            if (mousePos === undefined) {
+                return;
+            }
+            const distance = container.retina.bubbleModeDistance, query = container.particles.quadTree.queryCircle(mousePos, distance);
+            for (const particle of query) {
+                particle.bubble.inRange = true;
+                const pos = particle.getPosition(), pointDistance = (0, Utils_1.getDistance)(pos, mousePos), ratio = 1 - pointDistance / distance;
+                if (pointDistance <= distance) {
+                    if (ratio >= 0 && container.interactivity.status === Core_1.Constants.mouseMoveEvent) {
+                        this.hoverBubbleSize(particle, ratio);
+                        this.hoverBubbleOpacity(particle, ratio);
+                        this.hoverBubbleColor(particle, ratio);
+                    }
+                }
+                else {
+                    this.reset(particle);
+                }
+                if (container.interactivity.status === Core_1.Constants.mouseLeaveEvent) {
+                    this.reset(particle);
+                }
+            }
+        }
+        hoverBubbleSize(particle, ratio, divBubble) {
+            const container = this.container, modeSize = (divBubble === null || divBubble === void 0 ? void 0 : divBubble.size) ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
+            if (modeSize === undefined) {
+                return;
+            }
+            const optSize = (0, Utils_1.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio;
+            const pSize = particle.size.value;
+            const size = calculateBubbleValue(pSize, modeSize, optSize, ratio);
+            if (size !== undefined) {
+                particle.bubble.radius = size;
+            }
+        }
+        hoverBubbleOpacity(particle, ratio, divBubble) {
+            var _a, _b, _c;
+            const container = this.container, options = container.actualOptions, modeOpacity = (_a = divBubble === null || divBubble === void 0 ? void 0 : divBubble.opacity) !== null && _a !== void 0 ? _a : options.interactivity.modes.bubble.opacity;
+            if (!modeOpacity) {
+                return;
+            }
+            const optOpacity = particle.options.opacity.value;
+            const pOpacity = (_c = (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1;
+            const opacity = calculateBubbleValue(pOpacity, modeOpacity, (0, Utils_1.getRangeMax)(optOpacity), ratio);
+            if (opacity !== undefined) {
+                particle.bubble.opacity = opacity;
+            }
+        }
+        hoverBubbleColor(particle, ratio, divBubble) {
+            const options = this.container.actualOptions;
+            const bubbleOptions = divBubble !== null && divBubble !== void 0 ? divBubble : options.interactivity.modes.bubble;
+            if (!particle.bubble.finalColor) {
+                const modeColor = bubbleOptions.color;
+                if (!modeColor) {
+                    return;
+                }
+                const bubbleColor = modeColor instanceof Array ? (0, Utils_1.itemFromArray)(modeColor) : modeColor;
+                particle.bubble.finalColor = (0, Utils_1.colorToHsl)(bubbleColor);
+            }
+            if (!particle.bubble.finalColor) {
+                return;
+            }
+            if (bubbleOptions.mix) {
+                particle.bubble.color = undefined;
+                const pColor = particle.getFillColor();
+                particle.bubble.color = pColor
+                    ? (0, Utils_1.rgbToHsl)((0, Utils_1.colorMix)(pColor, particle.bubble.finalColor, 1 - ratio, ratio))
+                    : particle.bubble.finalColor;
+            }
+            else {
+                particle.bubble.color = particle.bubble.finalColor;
+            }
+        }
+    }
+    exports.Bubbler = Bubbler;
+});

package/umd/Interactions/External/Bubble/IBubblerProcessParam.d.ts

@@ -0,0 +1,10 @@
+import type { ProcessBubbleType } from "./ProcessBubbleType";
+export interface IBubblerProcessParam {
+    bubbleObj: IBubblerProcessParamObj;
+    particlesObj: IBubblerProcessParamObj;
+    type: ProcessBubbleType;
+}
+export interface IBubblerProcessParamObj {
+    optValue?: number;
+    value?: number;
+}

package/umd/Interactions/External/Bubble/IBubblerProcessParam.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/Interactions/External/Bubble/ProcessBubbleType.d.ts

@@ -0,0 +1,5 @@
+export declare const enum ProcessBubbleType {
+    color = "color",
+    opacity = "opacity",
+    size = "size"
+}

package/umd/Interactions/External/Bubble/ProcessBubbleType.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/Interactions/External/Bubble/index.d.ts

@@ -0,0 +1,2 @@
+import type { Engine } from "../../../engine";
+export declare function loadExternalBubbleInteraction(engine: Engine): Promise<void>;

package/umd/Interactions/External/Bubble/index.js

@@ -0,0 +1,18 @@
+(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", "./Bubbler"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.loadExternalBubbleInteraction = void 0;
+    const Bubbler_1 = require("./Bubbler");
+    async function loadExternalBubbleInteraction(engine) {
+        await engine.addInteractor("externalBubble", (container) => new Bubbler_1.Bubbler(container));
+    }
+    exports.loadExternalBubbleInteraction = loadExternalBubbleInteraction;
+});

package/umd/Interactions/External/Connect/Connector.d.ts

@@ -0,0 +1,8 @@
+import type { Container } from "../../../Core";
+import { ExternalInteractorBase } from "../../../Core";
+export declare class Connector extends ExternalInteractorBase {
+    constructor(container: Container);
+    isEnabled(): boolean;
+    reset(): void;
+    interact(): void;
+}

package/umd/Interactions/External/Connect/Connector.js

@@ -0,0 +1,51 @@
+(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", "../../../Core", "../../../Utils"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Connector = void 0;
+    const Core_1 = require("../../../Core");
+    const Utils_1 = require("../../../Utils");
+    class Connector extends Core_1.ExternalInteractorBase {
+        constructor(container) {
+            super(container);
+        }
+        isEnabled() {
+            const container = this.container, mouse = container.interactivity.mouse, events = container.actualOptions.interactivity.events;
+            if (!(events.onHover.enable && mouse.position)) {
+                return false;
+            }
+            return (0, Utils_1.isInArray)("connect", events.onHover.mode);
+        }
+        reset() {
+        }
+        interact() {
+            const container = this.container, options = container.actualOptions;
+            if (options.interactivity.events.onHover.enable && container.interactivity.status === "mousemove") {
+                const mousePos = container.interactivity.mouse.position;
+                if (!mousePos) {
+                    return;
+                }
+                const distance = Math.abs(container.retina.connectModeRadius), query = container.particles.quadTree.queryCircle(mousePos, distance);
+                let i = 0;
+                for (const p1 of query) {
+                    const pos1 = p1.getPosition();
+                    for (const p2 of query.slice(i + 1)) {
+                        const pos2 = p2.getPosition(), distMax = Math.abs(container.retina.connectModeDistance), xDiff = Math.abs(pos1.x - pos2.x), yDiff = Math.abs(pos1.y - pos2.y);
+                        if (xDiff < distMax && yDiff < distMax) {
+                            container.canvas.drawConnectLine(p1, p2);
+                        }
+                    }
+                    ++i;
+                }
+            }
+        }
+    }
+    exports.Connector = Connector;
+});

package/umd/Interactions/External/Connect/index.d.ts

@@ -0,0 +1,2 @@
+import type { Engine } from "../../../engine";
+export declare function loadExternalConnectInteraction(engine: Engine): Promise<void>;

package/umd/Interactions/External/Connect/index.js

@@ -0,0 +1,18 @@
+(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", "./Connector"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.loadExternalConnectInteraction = void 0;
+    const Connector_1 = require("./Connector");
+    async function loadExternalConnectInteraction(engine) {
+        await engine.addInteractor("externalConnect", (container) => new Connector_1.Connector(container));
+    }
+    exports.loadExternalConnectInteraction = loadExternalConnectInteraction;
+});

package/umd/Interactions/External/Grab/Grabber.d.ts

@@ -0,0 +1,8 @@
+import { ExternalInteractorBase } from "../../../Core";
+import type { Container } from "../../../Core";
+export declare class Grabber extends ExternalInteractorBase {
+    constructor(container: Container);
+    isEnabled(): boolean;
+    reset(): void;
+    interact(): void;
+}

package/umd/Interactions/External/Grab/Grabber.js

@@ -0,0 +1,57 @@
+(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", "../../../Core", "../../../Utils"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Grabber = void 0;
+    const Core_1 = require("../../../Core");
+    const Utils_1 = require("../../../Utils");
+    class Grabber extends Core_1.ExternalInteractorBase {
+        constructor(container) {
+            super(container);
+        }
+        isEnabled() {
+            const container = this.container, mouse = container.interactivity.mouse, events = container.actualOptions.interactivity.events;
+            return events.onHover.enable && !!mouse.position && (0, Utils_1.isInArray)("grab", events.onHover.mode);
+        }
+        reset() {
+        }
+        interact() {
+            var _a;
+            const container = this.container, options = container.actualOptions, interactivity = options.interactivity;
+            if (interactivity.events.onHover.enable && container.interactivity.status === Core_1.Constants.mouseMoveEvent) {
+                const mousePos = container.interactivity.mouse.position;
+                if (!mousePos) {
+                    return;
+                }
+                const distance = container.retina.grabModeDistance, query = container.particles.quadTree.queryCircle(mousePos, distance);
+                for (const particle of query) {
+                    const pos = particle.getPosition(), pointDistance = (0, Utils_1.getDistance)(pos, mousePos);
+                    if (pointDistance <= distance) {
+                        const grabLineOptions = interactivity.modes.grab.links, lineOpacity = grabLineOptions.opacity, opacityLine = lineOpacity - (pointDistance * lineOpacity) / distance;
+                        if (opacityLine <= 0) {
+                            continue;
+                        }
+                        const optColor = (_a = grabLineOptions.color) !== null && _a !== void 0 ? _a : particle.options.links.color;
+                        if (!container.particles.grabLineColor) {
+                            const linksOptions = options.interactivity.modes.grab.links;
+                            container.particles.grabLineColor = (0, Utils_1.getLinkRandomColor)(optColor, linksOptions.blink, linksOptions.consent);
+                        }
+                        const colorLine = (0, Utils_1.getLinkColor)(particle, undefined, container.particles.grabLineColor);
+                        if (!colorLine) {
+                            return;
+                        }
+                        container.canvas.drawGrabLine(particle, colorLine, opacityLine, mousePos);
+                    }
+                }
+            }
+        }
+    }
+    exports.Grabber = Grabber;
+});

package/umd/Interactions/External/Grab/index.d.ts

@@ -0,0 +1,2 @@
+import type { Engine } from "../../../engine";
+export declare function loadExternalGrabInteraction(engine: Engine): Promise<void>;

package/umd/Interactions/External/Grab/index.js

@@ -0,0 +1,18 @@
+(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", "./Grabber"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.loadExternalGrabInteraction = void 0;
+    const Grabber_1 = require("./Grabber");
+    async function loadExternalGrabInteraction(engine) {
+        await engine.addInteractor("externalGrab", (container) => new Grabber_1.Grabber(container));
+    }
+    exports.loadExternalGrabInteraction = loadExternalGrabInteraction;
+});

package/umd/Interactions/External/Repulse/Repulser.d.ts

@@ -0,0 +1,12 @@
+import { ExternalInteractorBase } from "../../../Core";
+import type { Container } from "../../../Core";
+export declare class Repulser extends ExternalInteractorBase {
+    constructor(container: Container);
+    isEnabled(): boolean;
+    reset(): void;
+    interact(): void;
+    private singleSelectorRepulse;
+    private hoverRepulse;
+    private processRepulse;
+    private clickRepulse;
+}

package/umd/Interactions/External/Repulse/Repulser.js

@@ -0,0 +1,108 @@
+(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", "../../../Core", "../../../Utils"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Repulser = void 0;
+    const Core_1 = require("../../../Core");
+    const Utils_1 = require("../../../Utils");
+    class Repulser extends Core_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, divRepulse = (0, Utils_1.isDivModeEnabled)("repulse", divs);
+            if (!(divRepulse || (events.onHover.enable && mouse.position) || (events.onClick.enable && mouse.clickPosition))) {
+                return false;
+            }
+            const hoverMode = events.onHover.mode, clickMode = events.onClick.mode;
+            return (0, Utils_1.isInArray)("repulse", hoverMode) || (0, Utils_1.isInArray)("repulse", clickMode) || divRepulse;
+        }
+        reset() {
+        }
+        interact() {
+            const container = this.container, options = container.actualOptions, mouseMoveStatus = container.interactivity.status === Core_1.Constants.mouseMoveEvent, events = options.interactivity.events, hoverEnabled = events.onHover.enable, hoverMode = events.onHover.mode, clickEnabled = events.onClick.enable, clickMode = events.onClick.mode, divs = events.onDiv;
+            if (mouseMoveStatus && hoverEnabled && (0, Utils_1.isInArray)("repulse", hoverMode)) {
+                this.hoverRepulse();
+            }
+            else if (clickEnabled && (0, Utils_1.isInArray)("repulse", clickMode)) {
+                this.clickRepulse();
+            }
+            else {
+                (0, Utils_1.divModeExecute)("repulse", divs, (selector, div) => this.singleSelectorRepulse(selector, div));
+            }
+        }
+        singleSelectorRepulse(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,
+                }, repulseRadius = (elem.offsetWidth / 2) * pxRatio, area = div.type === "circle"
+                    ? new Core_1.Circle(pos.x, pos.y, repulseRadius)
+                    : new Core_1.Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), divs = container.actualOptions.interactivity.modes.repulse.divs, divRepulse = (0, Utils_1.divMode)(divs, elem);
+                this.processRepulse(pos, repulseRadius, area, divRepulse);
+            });
+        }
+        hoverRepulse() {
+            const container = this.container, mousePos = container.interactivity.mouse.position;
+            if (!mousePos) {
+                return;
+            }
+            const repulseRadius = container.retina.repulseModeDistance;
+            this.processRepulse(mousePos, repulseRadius, new Core_1.Circle(mousePos.x, mousePos.y, repulseRadius));
+        }
+        processRepulse(position, repulseRadius, area, divRepulse) {
+            var _a;
+            const container = this.container, query = container.particles.quadTree.query(area), repulseOptions = container.actualOptions.interactivity.modes.repulse;
+            for (const particle of query) {
+                const { dx, dy, distance } = (0, Utils_1.getDistances)(particle.position, position), velocity = ((_a = divRepulse === null || divRepulse === void 0 ? void 0 : divRepulse.speed) !== null && _a !== void 0 ? _a : repulseOptions.speed) * repulseOptions.factor, repulseFactor = (0, Utils_1.clamp)((0, Utils_1.calcEasing)(1 - distance / repulseRadius, repulseOptions.easing) * velocity, 0, repulseOptions.maxSpeed), normVec = Core_1.Vector.create(distance === 0 ? velocity : (dx / distance) * repulseFactor, distance === 0 ? velocity : (dy / distance) * repulseFactor);
+                particle.position.addTo(normVec);
+            }
+        }
+        clickRepulse() {
+            const container = this.container;
+            if (!container.repulse.finish) {
+                if (!container.repulse.count) {
+                    container.repulse.count = 0;
+                }
+                container.repulse.count++;
+                if (container.repulse.count === container.particles.count) {
+                    container.repulse.finish = true;
+                }
+            }
+            if (container.repulse.clicking) {
+                const repulseDistance = container.retina.repulseModeDistance, repulseRadius = Math.pow(repulseDistance / 6, 3), mouseClickPos = container.interactivity.mouse.clickPosition;
+                if (mouseClickPos === undefined) {
+                    return;
+                }
+                const range = new Core_1.Circle(mouseClickPos.x, mouseClickPos.y, repulseRadius), query = container.particles.quadTree.query(range);
+                for (const particle of query) {
+                    const { dx, dy, distance } = (0, Utils_1.getDistances)(mouseClickPos, particle.position), d = distance ** 2, velocity = container.actualOptions.interactivity.modes.repulse.speed, force = (-repulseRadius * velocity) / d;
+                    if (d <= repulseRadius) {
+                        container.repulse.particles.push(particle);
+                        const vect = Core_1.Vector.create(dx, dy);
+                        vect.length = force;
+                        particle.velocity.setTo(vect);
+                    }
+                }
+            }
+            else if (container.repulse.clicking === false) {
+                for (const particle of container.repulse.particles) {
+                    particle.velocity.setTo(particle.initialVelocity);
+                }
+                container.repulse.particles = [];
+            }
+        }
+    }
+    exports.Repulser = Repulser;
+});

package/umd/Interactions/External/Repulse/index.d.ts

@@ -0,0 +1,2 @@
+import type { Engine } from "../../../engine";
+export declare function loadExternalRepulseInteraction(engine: Engine): Promise<void>;

package/umd/Interactions/External/Repulse/index.js

@@ -0,0 +1,18 @@
+(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", "./Repulser"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.loadExternalRepulseInteraction = void 0;
+    const Repulser_1 = require("./Repulser");
+    async function loadExternalRepulseInteraction(engine) {
+        await engine.addInteractor("externalRepulse", (container) => new Repulser_1.Repulser(container));
+    }
+    exports.loadExternalRepulseInteraction = loadExternalRepulseInteraction;
+});