@tsparticles/engine 3.0.0-alpha.0

package/umd/Core/Particles.js

@@ -0,0 +1,276 @@
+(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", "./Utils/InteractionManager", "./Particle", "./Utils/Point", "./Utils/QuadTree", "./Utils/Rectangle", "../Utils/NumberUtils"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Particles = void 0;
+    const InteractionManager_1 = require("./Utils/InteractionManager");
+    const Particle_1 = require("./Particle");
+    const Point_1 = require("./Utils/Point");
+    const QuadTree_1 = require("./Utils/QuadTree");
+    const Rectangle_1 = require("./Utils/Rectangle");
+    const NumberUtils_1 = require("../Utils/NumberUtils");
+    class Particles {
+        constructor(engine, container) {
+            this.container = container;
+            this._engine = engine;
+            this.nextId = 0;
+            this.array = [];
+            this.zArray = [];
+            this.pool = [];
+            this.limit = 0;
+            this.needsSort = false;
+            this.lastZIndex = 0;
+            this.interactionManager = new InteractionManager_1.InteractionManager(this._engine, container);
+            const canvasSize = this.container.canvas.size;
+            this.quadTree = new QuadTree_1.QuadTree(new Rectangle_1.Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, (canvasSize.width * 3) / 2, (canvasSize.height * 3) / 2), 4);
+            this.movers = this._engine.plugins.getMovers(container, true);
+            this.updaters = this._engine.plugins.getUpdaters(container, true);
+        }
+        get count() {
+            return this.array.length;
+        }
+        addManualParticles() {
+            const container = this.container, options = container.actualOptions;
+            for (const particle of options.manualParticles) {
+                this.addParticle((0, NumberUtils_1.calcPositionFromSize)({
+                    size: container.canvas.size,
+                    position: particle.position,
+                }), particle.options);
+            }
+        }
+        addParticle(position, overrideOptions, group, initializer) {
+            const container = this.container, options = container.actualOptions, limit = options.particles.number.limit;
+            if (limit > 0) {
+                const countToRemove = this.count + 1 - limit;
+                if (countToRemove > 0) {
+                    this.removeQuantity(countToRemove);
+                }
+            }
+            return this._pushParticle(position, overrideOptions, group, initializer);
+        }
+        clear() {
+            this.array = [];
+            this.zArray = [];
+        }
+        destroy() {
+            this.array = [];
+            this.zArray = [];
+            this.movers = [];
+            this.updaters = [];
+        }
+        async draw(delta) {
+            const container = this.container, canvasSize = this.container.canvas.size;
+            this.quadTree = new QuadTree_1.QuadTree(new Rectangle_1.Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, (canvasSize.width * 3) / 2, (canvasSize.height * 3) / 2), 4);
+            container.canvas.clear();
+            await this.update(delta);
+            if (this.needsSort) {
+                this.zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);
+                this.lastZIndex = this.zArray[this.zArray.length - 1].position.z;
+                this.needsSort = false;
+            }
+            for (const [, plugin] of container.plugins) {
+                container.canvas.drawPlugin(plugin, delta);
+            }
+            for (const p of this.zArray) {
+                p.draw(delta);
+            }
+        }
+        handleClickMode(mode) {
+            this.interactionManager.handleClickMode(mode);
+        }
+        init() {
+            var _a;
+            const container = this.container, options = container.actualOptions;
+            this.lastZIndex = 0;
+            this.needsSort = false;
+            let handled = false;
+            this.updaters = this._engine.plugins.getUpdaters(container, true);
+            this.interactionManager.init();
+            for (const [, plugin] of container.plugins) {
+                if (plugin.particlesInitialization !== undefined) {
+                    handled = plugin.particlesInitialization();
+                }
+                if (handled) {
+                    break;
+                }
+            }
+            this.interactionManager.init();
+            for (const [, pathGenerator] of container.pathGenerators) {
+                pathGenerator.init(container);
+            }
+            this.addManualParticles();
+            if (!handled) {
+                for (const group in options.particles.groups) {
+                    const groupOptions = options.particles.groups[group];
+                    for (let i = this.count, j = 0; j < ((_a = groupOptions.number) === null || _a === void 0 ? void 0 : _a.value) && i < options.particles.number.value; i++, j++) {
+                        this.addParticle(undefined, groupOptions, group);
+                    }
+                }
+                for (let i = this.count; i < options.particles.number.value; i++) {
+                    this.addParticle();
+                }
+            }
+        }
+        push(nb, mouse, overrideOptions, group) {
+            this.pushing = true;
+            for (let i = 0; i < nb; i++) {
+                this.addParticle(mouse === null || mouse === void 0 ? void 0 : mouse.position, overrideOptions, group);
+            }
+            this.pushing = false;
+        }
+        async redraw() {
+            this.clear();
+            this.init();
+            await this.draw({ value: 0, factor: 0 });
+        }
+        remove(particle, group, override) {
+            this.removeAt(this.array.indexOf(particle), undefined, group, override);
+        }
+        removeAt(index, quantity = 1, group, override) {
+            if (index < 0 || index > this.count) {
+                return;
+            }
+            let deleted = 0;
+            for (let i = index; deleted < quantity && i < this.count; i++) {
+                const particle = this.array[i];
+                if (!particle || particle.group !== group) {
+                    continue;
+                }
+                particle.destroy(override);
+                this.array.splice(i--, 1);
+                const idx = this.zArray.indexOf(particle);
+                this.zArray.splice(idx, 1);
+                this.pool.push(particle);
+                deleted++;
+                this._engine.dispatchEvent("particleRemoved", {
+                    container: this.container,
+                    data: {
+                        particle,
+                    },
+                });
+            }
+        }
+        removeQuantity(quantity, group) {
+            this.removeAt(0, quantity, group);
+        }
+        setDensity() {
+            const options = this.container.actualOptions;
+            for (const group in options.particles.groups) {
+                this._applyDensity(options.particles.groups[group], 0, group);
+            }
+            this._applyDensity(options.particles, options.manualParticles.length);
+        }
+        async update(delta) {
+            var _a, _b;
+            const container = this.container, particlesToDelete = [];
+            for (const [, pathGenerator] of container.pathGenerators) {
+                pathGenerator.update();
+            }
+            for (const [, plugin] of container.plugins) {
+                (_a = plugin.update) === null || _a === void 0 ? void 0 : _a.call(plugin, delta);
+            }
+            for (const particle of this.array) {
+                const resizeFactor = container.canvas.resizeFactor;
+                if (resizeFactor && !particle.ignoresResizeRatio) {
+                    particle.position.x *= resizeFactor.width;
+                    particle.position.y *= resizeFactor.height;
+                    particle.initialPosition.x *= resizeFactor.width;
+                    particle.initialPosition.y *= resizeFactor.height;
+                }
+                particle.ignoresResizeRatio = false;
+                await this.interactionManager.reset(particle);
+                for (const [, plugin] of this.container.plugins) {
+                    if (particle.destroyed) {
+                        break;
+                    }
+                    (_b = plugin.particleUpdate) === null || _b === void 0 ? void 0 : _b.call(plugin, particle, delta);
+                }
+                for (const mover of this.movers) {
+                    if (mover.isEnabled(particle)) {
+                        mover.move(particle, delta);
+                    }
+                }
+                if (particle.destroyed) {
+                    particlesToDelete.push(particle);
+                    continue;
+                }
+                this.quadTree.insert(new Point_1.Point(particle.getPosition(), particle));
+            }
+            for (const particle of particlesToDelete) {
+                this.remove(particle);
+            }
+            await this.interactionManager.externalInteract(delta);
+            for (const particle of this.array) {
+                for (const updater of this.updaters) {
+                    updater.update(particle, delta);
+                }
+                if (!particle.destroyed && !particle.spawning) {
+                    await this.interactionManager.particlesInteract(particle, delta);
+                }
+            }
+            delete container.canvas.resizeFactor;
+        }
+        _applyDensity(options, manualCount, group) {
+            var _a;
+            if (!((_a = options.number.density) === null || _a === void 0 ? void 0 : _a.enable)) {
+                return;
+            }
+            const numberOptions = options.number, densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit > 0 ? numberOptions.limit : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount, particlesCount = Math.min(this.count, this.array.filter((t) => t.group === group).length);
+            this.limit = numberOptions.limit * densityFactor;
+            if (particlesCount < particlesNumber) {
+                this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
+            }
+            else if (particlesCount > particlesNumber) {
+                this.removeQuantity(particlesCount - particlesNumber, group);
+            }
+        }
+        _initDensityFactor(densityOptions) {
+            const container = this.container;
+            if (!container.canvas.element || !densityOptions.enable) {
+                return 1;
+            }
+            const canvas = container.canvas.element, pxRatio = container.retina.pixelRatio;
+            return (canvas.width * canvas.height) / (densityOptions.factor * pxRatio ** 2 * densityOptions.area);
+        }
+        _pushParticle(position, overrideOptions, group, initializer) {
+            try {
+                let particle = this.pool.pop();
+                if (particle) {
+                    particle.init(this.nextId, position, overrideOptions, group);
+                }
+                else {
+                    particle = new Particle_1.Particle(this._engine, this.nextId, this.container, position, overrideOptions, group);
+                }
+                let canAdd = true;
+                if (initializer) {
+                    canAdd = initializer(particle);
+                }
+                if (!canAdd) {
+                    return;
+                }
+                this.array.push(particle);
+                this.zArray.push(particle);
+                this.nextId++;
+                this._engine.dispatchEvent("particleAdded", {
+                    container: this.container,
+                    data: {
+                        particle,
+                    },
+                });
+                return particle;
+            }
+            catch (e) {
+                console.warn(`error adding particle: ${e}`);
+                return;
+            }
+        }
+    }
+    exports.Particles = Particles;
+});

package/umd/Core/Retina.js

@@ -0,0 +1,47 @@
+(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", "../Utils/NumberUtils", "../Utils/Utils"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Retina = void 0;
+    const NumberUtils_1 = require("../Utils/NumberUtils");
+    const Utils_1 = require("../Utils/Utils");
+    class Retina {
+        constructor(container) {
+            this.container = container;
+        }
+        init() {
+            const container = this.container, options = container.actualOptions;
+            this.pixelRatio = !options.detectRetina || (0, Utils_1.isSsr)() ? 1 : window.devicePixelRatio;
+            this.reduceFactor = 1;
+            const ratio = this.pixelRatio;
+            if (container.canvas.element) {
+                const element = container.canvas.element;
+                container.canvas.size.width = element.offsetWidth * ratio;
+                container.canvas.size.height = element.offsetHeight * ratio;
+            }
+            const particles = options.particles;
+            this.attractDistance = (0, NumberUtils_1.getRangeValue)(particles.move.attract.distance) * ratio;
+            this.sizeAnimationSpeed = (0, NumberUtils_1.getRangeValue)(particles.size.animation.speed) * ratio;
+            this.maxSpeed = (0, NumberUtils_1.getRangeValue)(particles.move.gravity.maxSpeed) * ratio;
+        }
+        initParticle(particle) {
+            const options = particle.options, ratio = this.pixelRatio, moveDistance = options.move.distance, props = particle.retina;
+            props.attractDistance = (0, NumberUtils_1.getRangeValue)(options.move.attract.distance) * ratio;
+            props.moveDrift = (0, NumberUtils_1.getRangeValue)(options.move.drift) * ratio;
+            props.moveSpeed = (0, NumberUtils_1.getRangeValue)(options.move.speed) * ratio;
+            props.sizeAnimationSpeed = (0, NumberUtils_1.getRangeValue)(options.size.animation.speed) * ratio;
+            const maxDistance = props.maxDistance;
+            maxDistance.horizontal = moveDistance.horizontal !== undefined ? moveDistance.horizontal * ratio : undefined;
+            maxDistance.vertical = moveDistance.vertical !== undefined ? moveDistance.vertical * ratio : undefined;
+            props.maxSpeed = (0, NumberUtils_1.getRangeValue)(options.move.gravity.maxSpeed) * ratio;
+        }
+    }
+    exports.Retina = Retina;
+});

package/umd/Core/Utils/Circle.js

@@ -0,0 +1,37 @@
+(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", "./Range", "../../Utils/NumberUtils"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Circle = void 0;
+    const Range_1 = require("./Range");
+    const NumberUtils_1 = require("../../Utils/NumberUtils");
+    class Circle extends Range_1.Range {
+        constructor(x, y, radius) {
+            super(x, y);
+            this.radius = radius;
+        }
+        contains(point) {
+            return (0, NumberUtils_1.getDistance)(point, this.position) <= this.radius;
+        }
+        intersects(range) {
+            const rect = range, circle = range, pos1 = this.position, pos2 = range.position, distPos = { x: Math.abs(pos2.x - pos1.x), y: Math.abs(pos2.y - pos1.y) }, r = this.radius;
+            if (circle.radius !== undefined) {
+                const rSum = r + circle.radius, dist = Math.sqrt(distPos.x ** 2 + distPos.y ** 2);
+                return rSum > dist;
+            }
+            else if (rect.size !== undefined) {
+                const w = rect.size.width, h = rect.size.height, edges = Math.pow(distPos.x - w, 2) + Math.pow(distPos.y - h, 2);
+                return edges <= r ** 2 || (distPos.x <= r + w && distPos.y <= r + h) || distPos.x <= w || distPos.y <= h;
+            }
+            return false;
+        }
+    }
+    exports.Circle = Circle;
+});

package/umd/Core/Utils/Constants.js

@@ -0,0 +1,25 @@
+(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.visibilityChangeEvent = exports.resizeEvent = exports.touchCancelEvent = exports.mouseOutEvent = exports.mouseLeaveEvent = exports.touchMoveEvent = exports.touchStartEvent = exports.mouseMoveEvent = exports.mouseUpEvent = exports.mouseDownEvent = exports.touchEndEvent = exports.generatedAttribute = void 0;
+    exports.generatedAttribute = "generated";
+    exports.touchEndEvent = "touchend";
+    exports.mouseDownEvent = "pointerdown";
+    exports.mouseUpEvent = "pointerup";
+    exports.mouseMoveEvent = "pointermove";
+    exports.touchStartEvent = "touchstart";
+    exports.touchMoveEvent = "touchmove";
+    exports.mouseLeaveEvent = "pointerleave";
+    exports.mouseOutEvent = "pointerout";
+    exports.touchCancelEvent = "touchcancel";
+    exports.resizeEvent = "resize";
+    exports.visibilityChangeEvent = "visibilitychange";
+});

package/umd/Core/Utils/EventListeners.js

@@ -0,0 +1,294 @@
+(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", "../../Utils/Utils", "./Constants"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.EventListeners = void 0;
+    const Utils_1 = require("../../Utils/Utils");
+    const Constants_1 = require("./Constants");
+    function manageListener(element, event, handler, add, options) {
+        if (add) {
+            let addOptions = { passive: true };
+            if (typeof options === "boolean") {
+                addOptions.capture = options;
+            }
+            else if (options !== undefined) {
+                addOptions = options;
+            }
+            element.addEventListener(event, handler, addOptions);
+        }
+        else {
+            const removeOptions = options;
+            element.removeEventListener(event, handler, removeOptions);
+        }
+    }
+    class EventListeners {
+        constructor(container) {
+            this.container = container;
+            this.canPush = true;
+            this.handlers = {
+                mouseMove: (e) => this.mouseTouchMove(e),
+                touchStart: (e) => this.mouseTouchMove(e),
+                touchMove: (e) => this.mouseTouchMove(e),
+                touchEnd: () => this.mouseTouchFinish(),
+                mouseLeave: () => this.mouseTouchFinish(),
+                touchCancel: () => this.mouseTouchFinish(),
+                touchEndClick: (e) => this.mouseTouchClick(e),
+                mouseUp: (e) => this.mouseTouchClick(e),
+                mouseDown: () => this.mouseDown(),
+                visibilityChange: () => this.handleVisibilityChange(),
+                themeChange: (e) => this.handleThemeChange(e),
+                oldThemeChange: (e) => this.handleThemeChange(e),
+                resize: () => this.handleWindowResize(),
+            };
+        }
+        addListeners() {
+            this.manageListeners(true);
+        }
+        removeListeners() {
+            this.manageListeners(false);
+        }
+        doMouseTouchClick(e) {
+            const container = this.container, options = container.actualOptions;
+            if (this.canPush) {
+                const mouseInteractivity = container.interactivity.mouse, mousePos = mouseInteractivity.position;
+                if (!mousePos) {
+                    return;
+                }
+                mouseInteractivity.clickPosition = Object.assign({}, mousePos);
+                mouseInteractivity.clickTime = new Date().getTime();
+                const onClick = options.interactivity.events.onClick;
+                (0, Utils_1.executeOnSingleOrMultiple)(onClick.mode, (mode) => this.handleClickMode(mode));
+            }
+            if (e.type === "touchend") {
+                setTimeout(() => this.mouseTouchFinish(), 500);
+            }
+        }
+        handleClickMode(mode) {
+            this.container.handleClickMode(mode);
+        }
+        handleThemeChange(e) {
+            const mediaEvent = e, container = this.container, options = container.options, defaultThemes = options.defaultThemes, themeName = mediaEvent.matches ? defaultThemes.dark : defaultThemes.light, theme = options.themes.find((theme) => theme.name === themeName);
+            if (theme && theme.default.auto) {
+                container.loadTheme(themeName);
+            }
+        }
+        handleVisibilityChange() {
+            const container = this.container, options = container.actualOptions;
+            this.mouseTouchFinish();
+            if (!options.pauseOnBlur) {
+                return;
+            }
+            if (document === null || document === void 0 ? void 0 : document.hidden) {
+                container.pageHidden = true;
+                container.pause();
+            }
+            else {
+                container.pageHidden = false;
+                if (container.getAnimationStatus()) {
+                    container.play(true);
+                }
+                else {
+                    container.draw(true);
+                }
+            }
+        }
+        handleWindowResize() {
+            if (this.resizeTimeout) {
+                clearTimeout(this.resizeTimeout);
+                delete this.resizeTimeout;
+            }
+            this.resizeTimeout = setTimeout(async () => { var _a; return (_a = this.container.canvas) === null || _a === void 0 ? void 0 : _a.windowResize(); }, this.container.actualOptions.interactivity.events.resize.delay * 1000);
+        }
+        manageListeners(add) {
+            var _a;
+            const handlers = this.handlers, container = this.container, options = container.actualOptions, detectType = options.interactivity.detectsOn;
+            let mouseLeaveTmpEvent = Constants_1.mouseLeaveEvent;
+            if (detectType === "window") {
+                container.interactivity.element = window;
+                mouseLeaveTmpEvent = Constants_1.mouseOutEvent;
+            }
+            else if (detectType === "parent" && container.canvas.element) {
+                const canvasEl = container.canvas.element;
+                container.interactivity.element = (_a = canvasEl.parentElement) !== null && _a !== void 0 ? _a : canvasEl.parentNode;
+            }
+            else {
+                container.interactivity.element = container.canvas.element;
+            }
+            const mediaMatch = (0, Utils_1.safeMatchMedia)("(prefers-color-scheme: dark)");
+            if (mediaMatch) {
+                if (mediaMatch.addEventListener !== undefined) {
+                    manageListener(mediaMatch, "change", handlers.themeChange, add);
+                }
+                else if (mediaMatch.addListener !== undefined) {
+                    if (add) {
+                        mediaMatch.addListener(handlers.oldThemeChange);
+                    }
+                    else {
+                        mediaMatch.removeListener(handlers.oldThemeChange);
+                    }
+                }
+            }
+            const interactivityEl = container.interactivity.element;
+            if (!interactivityEl) {
+                return;
+            }
+            const html = interactivityEl;
+            if (options.interactivity.events.onHover.enable || options.interactivity.events.onClick.enable) {
+                manageListener(interactivityEl, Constants_1.mouseMoveEvent, handlers.mouseMove, add);
+                manageListener(interactivityEl, Constants_1.touchStartEvent, handlers.touchStart, add);
+                manageListener(interactivityEl, Constants_1.touchMoveEvent, handlers.touchMove, add);
+                if (!options.interactivity.events.onClick.enable) {
+                    manageListener(interactivityEl, Constants_1.touchEndEvent, handlers.touchEnd, add);
+                }
+                else {
+                    manageListener(interactivityEl, Constants_1.touchEndEvent, handlers.touchEndClick, add);
+                    manageListener(interactivityEl, Constants_1.mouseUpEvent, handlers.mouseUp, add);
+                    manageListener(interactivityEl, Constants_1.mouseDownEvent, handlers.mouseDown, add);
+                }
+                manageListener(interactivityEl, mouseLeaveTmpEvent, handlers.mouseLeave, add);
+                manageListener(interactivityEl, Constants_1.touchCancelEvent, handlers.touchCancel, add);
+            }
+            if (container.canvas.element) {
+                container.canvas.element.style.pointerEvents = html === container.canvas.element ? "initial" : "none";
+            }
+            if (options.interactivity.events.resize) {
+                if (typeof ResizeObserver !== "undefined") {
+                    if (this.resizeObserver && !add) {
+                        if (container.canvas.element) {
+                            this.resizeObserver.unobserve(container.canvas.element);
+                        }
+                        this.resizeObserver.disconnect();
+                        delete this.resizeObserver;
+                    }
+                    else if (!this.resizeObserver && add && container.canvas.element) {
+                        this.resizeObserver = new ResizeObserver((entries) => {
+                            const entry = entries.find((e) => e.target === container.canvas.element);
+                            if (!entry) {
+                                return;
+                            }
+                            this.handleWindowResize();
+                        });
+                        this.resizeObserver.observe(container.canvas.element);
+                    }
+                }
+                else {
+                    manageListener(window, Constants_1.resizeEvent, handlers.resize, add);
+                }
+            }
+            if (document) {
+                manageListener(document, Constants_1.visibilityChangeEvent, handlers.visibilityChange, add, false);
+            }
+        }
+        mouseDown() {
+            const interactivity = this.container.interactivity;
+            if (interactivity) {
+                const mouse = interactivity.mouse;
+                mouse.clicking = true;
+                mouse.downPosition = mouse.position;
+            }
+        }
+        mouseTouchClick(e) {
+            const container = this.container, options = container.actualOptions, mouse = container.interactivity.mouse;
+            mouse.inside = true;
+            let handled = false;
+            const mousePosition = mouse.position;
+            if (!mousePosition || !options.interactivity.events.onClick.enable) {
+                return;
+            }
+            for (const [, plugin] of container.plugins) {
+                if (!plugin.clickPositionValid) {
+                    continue;
+                }
+                handled = plugin.clickPositionValid(mousePosition);
+                if (handled) {
+                    break;
+                }
+            }
+            if (!handled) {
+                this.doMouseTouchClick(e);
+            }
+            mouse.clicking = false;
+        }
+        mouseTouchFinish() {
+            const interactivity = this.container.interactivity;
+            if (!interactivity) {
+                return;
+            }
+            const mouse = interactivity.mouse;
+            delete mouse.position;
+            delete mouse.clickPosition;
+            delete mouse.downPosition;
+            interactivity.status = Constants_1.mouseLeaveEvent;
+            mouse.inside = false;
+            mouse.clicking = false;
+        }
+        mouseTouchMove(e) {
+            var _a, _b, _c, _d, _e, _f, _g;
+            const container = this.container, options = container.actualOptions;
+            if (!((_a = container.interactivity) === null || _a === void 0 ? void 0 : _a.element)) {
+                return;
+            }
+            container.interactivity.mouse.inside = true;
+            let pos;
+            const canvas = container.canvas.element;
+            if (e.type.startsWith("pointer")) {
+                this.canPush = true;
+                const mouseEvent = e;
+                if (container.interactivity.element === window) {
+                    if (canvas) {
+                        const clientRect = canvas.getBoundingClientRect();
+                        pos = {
+                            x: mouseEvent.clientX - clientRect.left,
+                            y: mouseEvent.clientY - clientRect.top,
+                        };
+                    }
+                }
+                else if (options.interactivity.detectsOn === "parent") {
+                    const source = mouseEvent.target, target = mouseEvent.currentTarget, canvasEl = container.canvas.element;
+                    if (source && target && canvasEl) {
+                        const sourceRect = source.getBoundingClientRect(), targetRect = target.getBoundingClientRect(), canvasRect = canvasEl.getBoundingClientRect();
+                        pos = {
+                            x: mouseEvent.offsetX + 2 * sourceRect.left - (targetRect.left + canvasRect.left),
+                            y: mouseEvent.offsetY + 2 * sourceRect.top - (targetRect.top + canvasRect.top),
+                        };
+                    }
+                    else {
+                        pos = {
+                            x: (_b = mouseEvent.offsetX) !== null && _b !== void 0 ? _b : mouseEvent.clientX,
+                            y: (_c = mouseEvent.offsetY) !== null && _c !== void 0 ? _c : mouseEvent.clientY,
+                        };
+                    }
+                }
+                else if (mouseEvent.target === container.canvas.element) {
+                    pos = {
+                        x: (_d = mouseEvent.offsetX) !== null && _d !== void 0 ? _d : mouseEvent.clientX,
+                        y: (_e = mouseEvent.offsetY) !== null && _e !== void 0 ? _e : mouseEvent.clientY,
+                    };
+                }
+            }
+            else {
+                this.canPush = e.type !== "touchmove";
+                const touchEvent = e, lastTouch = touchEvent.touches[touchEvent.touches.length - 1], canvasRect = canvas === null || canvas === void 0 ? void 0 : canvas.getBoundingClientRect();
+                pos = {
+                    x: lastTouch.clientX - ((_f = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.left) !== null && _f !== void 0 ? _f : 0),
+                    y: lastTouch.clientY - ((_g = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.top) !== null && _g !== void 0 ? _g : 0),
+                };
+            }
+            const pxRatio = container.retina.pixelRatio;
+            if (pos) {
+                pos.x *= pxRatio;
+                pos.y *= pxRatio;
+            }
+            container.interactivity.mouse.position = pos;
+            container.interactivity.status = Constants_1.mouseMoveEvent;
+        }
+    }
+    exports.EventListeners = EventListeners;
+});