@tsparticles/engine 3.3.0 → 3.4.0

package/cjs/Core/Engine.js

@@ -3,12 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Engine = void 0;
 const Constants_js_1 = require("./Utils/Constants.js");
 const Utils_js_1 = require("../Utils/Utils.js");
+const Container_js_1 = require("./Container.js");
 const EventDispatcher_js_1 = require("../Utils/EventDispatcher.js");
+const EventType_js_1 = require("../Enums/Types/EventType.js");
 const NumberUtils_js_1 = require("../Utils/NumberUtils.js");
 async function getItemsFromInitializer(container, map, initializers, force = false) {
     let res = map.get(container);
     if (!res || force) {
-        res = await Promise.all([...initializers.values()].map((t) => t(container)));
+        res = await Promise.all([...initializers.values()].map(t => t(container)));
         map.set(container, res);
     }
     return res;
@@ -25,6 +27,46 @@ async function getDataFromUrl(data) {
     (0, Utils_js_1.getLogger)().error(`${Constants_js_1.errorPrefix} ${response.status} while retrieving config file`);
     return data.fallback;
 }
+const generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", getCanvasFromContainer = (domContainer) => {
+    let canvasEl;
+    if (domContainer instanceof HTMLCanvasElement || domContainer.tagName.toLowerCase() === canvasTag) {
+        canvasEl = domContainer;
+        if (!canvasEl.dataset[Constants_js_1.generatedAttribute]) {
+            canvasEl.dataset[Constants_js_1.generatedAttribute] = generatedFalse;
+        }
+    }
+    else {
+        const existingCanvases = domContainer.getElementsByTagName(canvasTag);
+        if (existingCanvases.length) {
+            const firstIndex = 0;
+            canvasEl = existingCanvases[firstIndex];
+            canvasEl.dataset[Constants_js_1.generatedAttribute] = generatedFalse;
+        }
+        else {
+            canvasEl = document.createElement(canvasTag);
+            canvasEl.dataset[Constants_js_1.generatedAttribute] = generatedTrue;
+            domContainer.appendChild(canvasEl);
+        }
+    }
+    const fullPercent = "100%";
+    if (!canvasEl.style.width) {
+        canvasEl.style.width = fullPercent;
+    }
+    if (!canvasEl.style.height) {
+        canvasEl.style.height = fullPercent;
+    }
+    return canvasEl;
+}, getDomContainer = (id, source) => {
+    let domContainer = source ?? document.getElementById(id);
+    if (domContainer) {
+        return domContainer;
+    }
+    domContainer = document.createElement("div");
+    domContainer.id = id;
+    domContainer.dataset[Constants_js_1.generatedAttribute] = generatedTrue;
+    document.body.append(domContainer);
+    return domContainer;
+};
 class Engine {
     constructor() {
         this._configs = new Map();
@@ -52,16 +94,19 @@ class Engine {
         }
         return res;
     }
+    get items() {
+        return this._domArray;
+    }
     get version() {
-        return "3.3.0";
+        return "3.4.0";
     }
     addConfig(config) {
         const key = config.key ?? config.name ?? "default";
         this._configs.set(key, config);
-        this._eventDispatcher.dispatchEvent("configAdded", { data: { name: key, config } });
+        this._eventDispatcher.dispatchEvent(EventType_js_1.EventType.configAdded, { data: { name: key, config } });
     }
     async addEffect(effect, drawer, refresh = true) {
-        (0, Utils_js_1.executeOnSingleOrMultiple)(effect, (type) => {
+        (0, Utils_js_1.executeOnSingleOrMultiple)(effect, type => {
             if (!this.getEffectDrawer(type)) {
                 this.effectDrawers.set(type, drawer);
             }
@@ -101,12 +146,13 @@ class Engine {
         }
         await this.refresh(refresh);
     }
-    async addShape(shape, drawer, refresh = true) {
-        (0, Utils_js_1.executeOnSingleOrMultiple)(shape, (type) => {
-            if (!this.getShapeDrawer(type)) {
-                this.shapeDrawers.set(type, drawer);
+    async addShape(drawer, refresh = true) {
+        for (const validType of drawer.validTypes) {
+            if (this.getShapeDrawer(validType)) {
+                continue;
             }
-        });
+            this.shapeDrawers.set(validType, drawer);
+        }
         await this.refresh(refresh);
     }
     clearPlugins(container) {
@@ -118,16 +164,10 @@ class Engine {
         this._eventDispatcher.dispatchEvent(type, args);
     }
     dom() {
-        return this._domArray;
+        return this.items;
     }
     domItem(index) {
-        const dom = this.dom(), item = dom[index];
-        if (!item || item.destroyed) {
-            const deleteCount = 1;
-            dom.splice(index, deleteCount);
-            return;
-        }
-        return item;
+        return this.item(index);
     }
     async getAvailablePlugins(container) {
         const res = new Map();
@@ -142,16 +182,16 @@ class Engine {
         return this.effectDrawers.get(type);
     }
     async getInteractors(container, force = false) {
-        return await getItemsFromInitializer(container, this.interactors, this._initializers.interactors, force);
+        return getItemsFromInitializer(container, this.interactors, this._initializers.interactors, force);
     }
     async getMovers(container, force = false) {
-        return await getItemsFromInitializer(container, this.movers, this._initializers.movers, force);
+        return getItemsFromInitializer(container, this.movers, this._initializers.movers, force);
     }
     getPathGenerator(type) {
         return this.pathGenerators.get(type);
     }
     getPlugin(plugin) {
-        return this.plugins.find((t) => t.id === plugin);
+        return this.plugins.find(t => t.id === plugin);
     }
     getPreset(preset) {
         return this.presets.get(preset);
@@ -166,7 +206,7 @@ class Engine {
         return this.shapeDrawers.keys();
     }
     async getUpdaters(container, force = false) {
-        return await getItemsFromInitializer(container, this.updaters, this._initializers.updaters, force);
+        return getItemsFromInitializer(container, this.updaters, this._initializers.updaters, force);
     }
     init() {
         if (this._initialized) {
@@ -174,90 +214,58 @@ class Engine {
         }
         this._initialized = true;
     }
+    item(index) {
+        const { items } = this, item = items[index];
+        if (!item || item.destroyed) {
+            const deleteCount = 1;
+            items.splice(index, deleteCount);
+            return;
+        }
+        return item;
+    }
     async load(params) {
         const randomFactor = 10000, id = params.id ?? params.element?.id ?? `tsparticles${Math.floor((0, NumberUtils_js_1.getRandom)() * randomFactor)}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options;
-        let domContainer = params.element ?? document.getElementById(id);
-        if (!domContainer) {
-            domContainer = document.createElement("div");
-            domContainer.id = id;
-            document.body.append(domContainer);
-        }
-        const currentOptions = (0, Utils_js_1.itemFromSingleOrMultiple)(options, index), dom = this.dom(), oldIndex = dom.findIndex((v) => v.id.description === id), minIndex = 0;
+        const currentOptions = (0, Utils_js_1.itemFromSingleOrMultiple)(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), minIndex = 0, newItem = new Container_js_1.Container(this, id, currentOptions);
         if (oldIndex >= minIndex) {
-            const old = this.domItem(oldIndex);
+            const old = this.item(oldIndex), one = 1, none = 0, deleteCount = old ? one : none;
             if (old && !old.destroyed) {
-                old.destroy();
-                const deleteCount = 1;
-                dom.splice(oldIndex, deleteCount);
-            }
-        }
-        let canvasEl;
-        if (domContainer.tagName.toLowerCase() === "canvas") {
-            canvasEl = domContainer;
-            canvasEl.dataset[Constants_js_1.generatedAttribute] = "false";
-        }
-        else {
-            const existingCanvases = domContainer.getElementsByTagName("canvas");
-            if (existingCanvases.length) {
-                const firstIndex = 0;
-                canvasEl = existingCanvases[firstIndex];
-                canvasEl.dataset[Constants_js_1.generatedAttribute] = "false";
+                old.destroy(false);
             }
-            else {
-                canvasEl = document.createElement("canvas");
-                canvasEl.dataset[Constants_js_1.generatedAttribute] = "true";
-                domContainer.appendChild(canvasEl);
-            }
-        }
-        if (!canvasEl.style.width) {
-            canvasEl.style.width = "100%";
-        }
-        if (!canvasEl.style.height) {
-            canvasEl.style.height = "100%";
-        }
-        const { Container } = await import("./Container.js"), newItem = new Container(this, id, currentOptions);
-        if (oldIndex >= minIndex) {
-            const deleteCount = 0;
-            dom.splice(oldIndex, deleteCount, newItem);
+            items.splice(oldIndex, deleteCount, newItem);
         }
         else {
-            dom.push(newItem);
+            items.push(newItem);
         }
+        const domContainer = getDomContainer(id, params.element), canvasEl = getCanvasFromContainer(domContainer);
         newItem.canvas.loadCanvas(canvasEl);
         await newItem.start();
         return newItem;
     }
     loadOptions(options, sourceOptions) {
-        for (const plugin of this.plugins) {
-            plugin.loadOptions(options, sourceOptions);
-        }
+        this.plugins.forEach(plugin => plugin.loadOptions?.(options, sourceOptions));
     }
     loadParticlesOptions(container, options, ...sourceOptions) {
         const updaters = this.updaters.get(container);
         if (!updaters) {
             return;
         }
-        for (const updater of updaters) {
-            updater.loadOptions?.(options, ...sourceOptions);
-        }
+        updaters.forEach(updater => updater.loadOptions?.(options, ...sourceOptions));
     }
     async refresh(refresh = true) {
         if (!refresh) {
             return;
         }
-        await Promise.all(this.dom().map((t) => t.refresh()));
+        await Promise.all(this.items.map(t => t.refresh()));
     }
     removeEventListener(type, listener) {
         this._eventDispatcher.removeEventListener(type, listener);
     }
     setOnClickHandler(callback) {
-        const dom = this.dom();
-        if (!dom.length) {
+        const { items } = this;
+        if (!items.length) {
             throw new Error(`${Constants_js_1.errorPrefix} can only set click handlers after calling tsParticles.load()`);
         }
-        for (const domItem of dom) {
-            domItem.addClickHandler(callback);
-        }
+        items.forEach(item => item.addClickHandler(callback));
     }
 }
 exports.Engine = Engine;

package/cjs/Core/Particle.js

@@ -6,10 +6,15 @@ const NumberUtils_js_1 = require("../Utils/NumberUtils.js");
 const Utils_js_1 = require("../Utils/Utils.js");
 const Constants_js_1 = require("./Utils/Constants.js");
 const ColorUtils_js_1 = require("../Utils/ColorUtils.js");
+const EventType_js_1 = require("../Enums/Types/EventType.js");
 const Interactivity_js_1 = require("../Options/Classes/Interactivity/Interactivity.js");
+const MoveDirection_js_1 = require("../Enums/Directions/MoveDirection.js");
+const OutMode_js_1 = require("../Enums/Modes/OutMode.js");
+const ParticleOutType_js_1 = require("../Enums/Types/ParticleOutType.js");
+const PixelMode_js_1 = require("../Enums/Modes/PixelMode.js");
 const CanvasUtils_js_1 = require("../Utils/CanvasUtils.js");
 const OptionsUtils_js_1 = require("../Utils/OptionsUtils.js");
-const defaultRetryCount = 0, double = 2, half = 0.5, squareExp = 2;
+const defaultRetryCount = 0, double = 2, half = 0.5, squareExp = 2, randomString = "random";
 function loadEffectData(effect, effectOptions, id, reduceDuplicates) {
     const effectData = effectOptions.options[effect];
     if (!effectData) {
@@ -58,7 +63,7 @@ class Particle {
             }), pos = Vectors_js_1.Vector3d.create(exactPosition.x, exactPosition.y, zIndex), radius = this.getRadius(), outModes = this.options.move.outModes, fixHorizontal = (outMode) => {
                 fixOutMode({
                     outMode,
-                    checkModes: ["bounce"],
+                    checkModes: [OutMode_js_1.OutMode.bounce],
                     coord: pos.x,
                     maxCoord: container.canvas.size.width,
                     setCb: (value) => (pos.x += value),
@@ -67,7 +72,7 @@ class Particle {
             }, fixVertical = (outMode) => {
                 fixOutMode({
                     outMode,
-                    checkModes: ["bounce"],
+                    checkModes: [OutMode_js_1.OutMode.bounce],
                     coord: pos.y,
                     maxCoord: container.canvas.size.height,
                     setCb: (value) => (pos.y += value),
@@ -86,7 +91,7 @@ class Particle {
         };
         this._calculateVelocity = () => {
             const baseVelocity = (0, NumberUtils_js_1.getParticleBaseVelocity)(this.direction), res = baseVelocity.copy(), moveOptions = this.options.move;
-            if (moveOptions.direction === "inside" || moveOptions.direction === "outside") {
+            if (moveOptions.direction === MoveDirection_js_1.MoveDirection.inside || moveOptions.direction === MoveDirection_js_1.MoveDirection.outside) {
                 return res;
             }
             const rad = (0, NumberUtils_js_1.degToRad)((0, NumberUtils_js_1.getRangeValue)(moveOptions.angle.value)), radOffset = (0, NumberUtils_js_1.degToRad)((0, NumberUtils_js_1.getRangeValue)(moveOptions.angle.offset)), range = {
@@ -114,9 +119,9 @@ class Particle {
             if (retries >= minRetries && tryCount > retries) {
                 throw new Error(`${Constants_js_1.errorPrefix} particle is overlapping and can't be placed`);
             }
-            return !!this.container.particles.find((particle) => (0, NumberUtils_js_1.getDistance)(pos, particle.position) < radius + particle.getRadius());
+            return !!this.container.particles.find(particle => (0, NumberUtils_js_1.getDistance)(pos, particle.position) < radius + particle.getRadius());
         };
-        this._getRollColor = (color) => {
+        this._getRollColor = color => {
             if (!color || !this.roll || (!this.backColor && !this.roll.alter)) {
                 return color;
             }
@@ -132,7 +137,7 @@ class Particle {
             }
             return color;
         };
-        this._initPosition = (position) => {
+        this._initPosition = position => {
             const container = this.container, zIndexValue = (0, NumberUtils_js_1.getRangeValue)(this.options.zIndex.value), minZ = 0;
             this.position = this._calcPosition(container, position, (0, NumberUtils_js_1.clamp)(zIndexValue, minZ, container.zLayers));
             this.initialPosition = this.position.copy();
@@ -140,15 +145,15 @@ class Particle {
             this.moveCenter = {
                 ...(0, Utils_js_1.getPosition)(this.options.move.center, canvasSize),
                 radius: this.options.move.center.radius ?? defaultRadius,
-                mode: this.options.move.center.mode ?? "percent",
+                mode: this.options.move.center.mode ?? PixelMode_js_1.PixelMode.percent,
             };
             this.direction = (0, NumberUtils_js_1.getParticleDirectionAngle)(this.options.move.direction, this.position, this.moveCenter);
             switch (this.options.move.direction) {
-                case "inside":
-                    this.outType = "inside";
+                case MoveDirection_js_1.MoveDirection.inside:
+                    this.outType = ParticleOutType_js_1.ParticleOutType.inside;
                     break;
-                case "outside":
-                    this.outType = "outside";
+                case MoveDirection_js_1.MoveDirection.outside:
+                    this.outType = ParticleOutType_js_1.ParticleOutType.outside;
                     break;
             }
             this.offset = Vectors_js_1.Vector.origin;
@@ -171,7 +176,7 @@ class Particle {
             updater.particleDestroyed?.(this, override);
         }
         pathGenerator?.reset(this);
-        this._engine.dispatchEvent("particleDestroyed", {
+        this._engine.dispatchEvent(EventType_js_1.EventType.particleDestroyed, {
             container: this.container,
             data: {
                 particle: this,
@@ -216,14 +221,15 @@ class Particle {
         this.lastPathTime = 0;
         this.destroyed = false;
         this.unbreakable = false;
+        this.isRotating = false;
         this.rotation = 0;
         this.misplaced = false;
         this.retina = {
             maxDistance: {},
         };
-        this.outType = "normal";
+        this.outType = ParticleOutType_js_1.ParticleOutType.normal;
         this.ignoresResizeRatio = true;
-        const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = (0, OptionsUtils_js_1.loadParticlesOptions)(this._engine, container, mainOptions.particles), effectType = particlesOptions.effect.type, shapeType = particlesOptions.shape.type, { reduceDuplicates } = particlesOptions;
+        const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = (0, OptionsUtils_js_1.loadParticlesOptions)(this._engine, container, mainOptions.particles), { reduceDuplicates } = particlesOptions, effectType = particlesOptions.effect.type, shapeType = particlesOptions.shape.type;
         this.effect = (0, Utils_js_1.itemFromSingleOrMultiple)(effectType, this.id, reduceDuplicates);
         this.shape = (0, Utils_js_1.itemFromSingleOrMultiple)(shapeType, this.id, reduceDuplicates);
         const effectOptions = particlesOptions.effect, shapeOptions = particlesOptions.shape;
@@ -243,6 +249,14 @@ class Particle {
                 }
             }
         }
+        if (this.effect === randomString) {
+            const availableEffects = [...this.container.effectDrawers.keys()];
+            this.effect = availableEffects[Math.floor(Math.random() * availableEffects.length)];
+        }
+        if (this.shape === randomString) {
+            const availableShapes = [...this.container.shapeDrawers.keys()];
+            this.shape = availableShapes[Math.floor(Math.random() * availableShapes.length)];
+        }
         this.effectData = loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates);
         this.shapeData = loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates);
         particlesOptions.load(overrideOptions);

package/cjs/Core/Particles.js

@@ -2,7 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Particles = void 0;
 const Utils_js_1 = require("../Utils/Utils.js");
+const EventType_js_1 = require("../Enums/Types/EventType.js");
 const InteractionManager_js_1 = require("./Utils/InteractionManager.js");
+const LimitMode_js_1 = require("../Enums/Modes/LimitMode.js");
 const Particle_js_1 = require("./Particle.js");
 const Point_js_1 = require("./Utils/Point.js");
 const QuadTree_js_1 = require("./Utils/QuadTree.js");
@@ -16,9 +18,7 @@ const qTreeRectangle = (canvasSize) => {
 class Particles {
     constructor(engine, container) {
         this._addToPool = (...particles) => {
-            for (const particle of particles) {
-                this._pool.push(particle);
-            }
+            this._pool.push(...particles);
         };
         this._applyDensity = (options, manualCount, group) => {
             const numberOptions = options.number;
@@ -31,7 +31,7 @@ class Particles {
                 }
                 return;
             }
-            const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, minLimit = 0, optParticlesLimit = numberOptions.limit.value > minLimit ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount, particlesCount = Math.min(this.count, this.filter((t) => t.group === group).length);
+            const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, minLimit = 0, optParticlesLimit = numberOptions.limit.value > minLimit ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount, particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);
             if (group === undefined) {
                 this._limit = numberOptions.limit.value * densityFactor;
             }
@@ -45,7 +45,7 @@ class Particles {
                 this.removeQuantity(particlesCount - particlesNumber, group);
             }
         };
-        this._initDensityFactor = (densityOptions) => {
+        this._initDensityFactor = densityOptions => {
             const container = this._container, defaultFactor = 1;
             if (!container.canvas.element || !densityOptions.enable) {
                 return defaultFactor;
@@ -70,7 +70,7 @@ class Particles {
                 this._array.push(particle);
                 this._zArray.push(particle);
                 this._nextId++;
-                this._engine.dispatchEvent("particleAdded", {
+                this._engine.dispatchEvent(EventType_js_1.EventType.particleAdded, {
                     container: this._container,
                     data: {
                         particle,
@@ -91,7 +91,7 @@ class Particles {
             this._array.splice(index, deleteCount);
             this._zArray.splice(zIdx, deleteCount);
             particle.destroy(override);
-            this._engine.dispatchEvent("particleRemoved", {
+            this._engine.dispatchEvent(EventType_js_1.EventType.particleRemoved, {
                 container: this._container,
                 data: {
                     particle,
@@ -122,23 +122,24 @@ class Particles {
     }
     addManualParticles() {
         const container = this._container, options = container.actualOptions;
-        for (const particle of options.manualParticles) {
-            this.addParticle(particle.position ? (0, Utils_js_1.getPosition)(particle.position, container.canvas.size) : undefined, particle.options);
-        }
+        options.manualParticles.forEach(p => this.addParticle(p.position ? (0, Utils_js_1.getPosition)(p.position, container.canvas.size) : undefined, p.options));
     }
     addParticle(position, overrideOptions, group, initializer) {
-        const limitOptions = this._container.actualOptions.particles.number.limit, limit = group === undefined ? this._limit : this._groupLimits.get(group) ?? this._limit, currentCount = this.count, minLimit = 0;
+        const limitMode = this._container.actualOptions.particles.number.limit.mode, limit = group === undefined ? this._limit : this._groupLimits.get(group) ?? this._limit, currentCount = this.count, minLimit = 0;
         if (limit > minLimit) {
-            if (limitOptions.mode === "delete") {
-                const countOffset = 1, minCount = 0, countToRemove = currentCount + countOffset - limit;
-                if (countToRemove > minCount) {
-                    this.removeQuantity(countToRemove);
-                }
-            }
-            else if (limitOptions.mode === "wait") {
-                if (currentCount >= limit) {
-                    return;
+            switch (limitMode) {
+                case LimitMode_js_1.LimitMode.delete: {
+                    const countOffset = 1, minCount = 0, countToRemove = currentCount + countOffset - limit;
+                    if (countToRemove > minCount) {
+                        this.removeQuantity(countToRemove);
+                    }
+                    break;
                 }
+                case LimitMode_js_1.LimitMode.wait:
+                    if (currentCount >= limit) {
+                        return;
+                    }
+                    break;
             }
         }
         return this._pushParticle(position, overrideOptions, group, initializer);
@@ -184,9 +185,7 @@ class Particles {
         await this.initPlugins();
         let handled = false;
         for (const [, plugin] of container.plugins) {
-            if (plugin.particlesInitialization !== undefined) {
-                handled = plugin.particlesInitialization();
-            }
+            handled = plugin.particlesInitialization?.() ?? handled;
             if (handled) {
                 break;
             }
@@ -301,7 +300,7 @@ class Particles {
             this._array = this.filter(checkDelete);
             this._zArray = this._zArray.filter(checkDelete);
             for (const particle of particlesToDelete) {
-                this._engine.dispatchEvent("particleRemoved", {
+                this._engine.dispatchEvent(EventType_js_1.EventType.particleRemoved, {
                     container: this._container,
                     data: {
                         particle,

package/cjs/Core/Utils/EventListeners.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EventListeners = void 0;
 const Utils_js_1 = require("../../Utils/Utils.js");
 const Constants_js_1 = require("./Constants.js");
+const InteractivityDetect_js_1 = require("../../Enums/InteractivityDetect.js");
 const TypeUtils_js_1 = require("../../Utils/TypeUtils.js");
 const double = 2;
 function manageListener(element, event, handler, add, options) {
@@ -24,7 +25,7 @@ function manageListener(element, event, handler, add, options) {
 class EventListeners {
     constructor(container) {
         this.container = container;
-        this._doMouseTouchClick = (e) => {
+        this._doMouseTouchClick = e => {
             const container = this.container, options = container.actualOptions;
             if (this._canPush) {
                 const mouseInteractivity = container.interactivity.mouse, mousePos = mouseInteractivity.position;
@@ -34,7 +35,7 @@ class EventListeners {
                 mouseInteractivity.clickPosition = { ...mousePos };
                 mouseInteractivity.clickTime = new Date().getTime();
                 const onClick = options.interactivity.events.onClick;
-                (0, Utils_js_1.executeOnSingleOrMultiple)(onClick.mode, (mode) => this.container.handleClickMode(mode));
+                (0, Utils_js_1.executeOnSingleOrMultiple)(onClick.mode, mode => this.container.handleClickMode(mode));
             }
             if (e.type === "touchend") {
                 const touchDelay = 500;
@@ -42,8 +43,8 @@ class EventListeners {
             }
         };
         this._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) {
+            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?.default.auto) {
                 void container.loadTheme(themeName);
             }
         };
@@ -53,7 +54,7 @@ class EventListeners {
             if (!options.pauseOnBlur) {
                 return;
             }
-            if (document && document.hidden) {
+            if (document?.hidden) {
                 container.pageHidden = true;
                 container.pause();
             }
@@ -105,14 +106,14 @@ class EventListeners {
             manageListener(interactivityEl, mouseLeaveTmpEvent, handlers.mouseLeave, add);
             manageListener(interactivityEl, Constants_js_1.touchCancelEvent, handlers.touchCancel, add);
         };
-        this._manageListeners = (add) => {
+        this._manageListeners = add => {
             const handlers = this._handlers, container = this.container, options = container.actualOptions, detectType = options.interactivity.detectsOn, canvasEl = container.canvas.element;
             let mouseLeaveTmpEvent = Constants_js_1.mouseLeaveEvent;
-            if (detectType === "window") {
+            if (detectType === InteractivityDetect_js_1.InteractivityDetect.window) {
                 container.interactivity.element = window;
                 mouseLeaveTmpEvent = Constants_js_1.mouseOutEvent;
             }
-            else if (detectType === "parent" && canvasEl) {
+            else if (detectType === InteractivityDetect_js_1.InteractivityDetect.parent && canvasEl) {
                 container.interactivity.element = canvasEl.parentElement ?? canvasEl.parentNode;
             }
             else {
@@ -125,7 +126,7 @@ class EventListeners {
                 manageListener(document, Constants_js_1.visibilityChangeEvent, handlers.visibilityChange, add, false);
             }
         };
-        this._manageMediaMatch = (add) => {
+        this._manageMediaMatch = add => {
             const handlers = this._handlers, mediaMatch = (0, Utils_js_1.safeMatchMedia)("(prefers-color-scheme: dark)");
             if (!mediaMatch) {
                 return;
@@ -144,7 +145,7 @@ class EventListeners {
                 mediaMatch.removeListener(handlers.oldThemeChange);
             }
         };
-        this._manageResize = (add) => {
+        this._manageResize = add => {
             const handlers = this._handlers, container = this.container, options = container.actualOptions;
             if (!options.interactivity.events.resize) {
                 return;
@@ -163,7 +164,7 @@ class EventListeners {
             }
             else if (!this._resizeObserver && add && canvasEl) {
                 this._resizeObserver = new ResizeObserver((entries) => {
-                    const entry = entries.find((e) => e.target === canvasEl);
+                    const entry = entries.find(e => e.target === canvasEl);
                     if (!entry) {
                         return;
                     }
@@ -181,7 +182,7 @@ class EventListeners {
             mouse.clicking = true;
             mouse.downPosition = mouse.position;
         };
-        this._mouseTouchClick = (e) => {
+        this._mouseTouchClick = e => {
             const container = this.container, options = container.actualOptions, { mouse } = container.interactivity;
             mouse.inside = true;
             let handled = false;
@@ -216,7 +217,7 @@ class EventListeners {
             mouse.inside = false;
             mouse.clicking = false;
         };
-        this._mouseTouchMove = (e) => {
+        this._mouseTouchMove = e => {
             const container = this.container, options = container.actualOptions, interactivity = container.interactivity, canvasEl = container.canvas.element;
             if (!interactivity?.element) {
                 return;
@@ -235,7 +236,7 @@ class EventListeners {
                         };
                     }
                 }
-                else if (options.interactivity.detectsOn === "parent") {
+                else if (options.interactivity.detectsOn === InteractivityDetect_js_1.InteractivityDetect.parent) {
                     const source = mouseEvent.target, target = mouseEvent.currentTarget;
                     if (source && target && canvasEl) {
                         const sourceRect = source.getBoundingClientRect(), targetRect = target.getBoundingClientRect(), canvasRect = canvasEl.getBoundingClientRect();
@@ -276,21 +277,21 @@ class EventListeners {
             interactivity.mouse.position = pos;
             interactivity.status = Constants_js_1.mouseMoveEvent;
         };
-        this._touchEnd = (e) => {
+        this._touchEnd = e => {
             const evt = e, touches = Array.from(evt.changedTouches);
             for (const touch of touches) {
                 this._touches.delete(touch.identifier);
             }
             this._mouseTouchFinish();
         };
-        this._touchEndClick = (e) => {
+        this._touchEndClick = e => {
             const evt = e, touches = Array.from(evt.changedTouches);
             for (const touch of touches) {
                 this._touches.delete(touch.identifier);
             }
             this._mouseTouchClick(e);
         };
-        this._touchStart = (e) => {
+        this._touchStart = e => {
             const evt = e, touches = Array.from(evt.changedTouches);
             for (const touch of touches) {
                 this._touches.set(touch.identifier, performance.now());

package/cjs/Core/Utils/ExternalInteractorBase.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExternalInteractorBase = void 0;
+const InteractorType_js_1 = require("../../Enums/Types/InteractorType.js");
 class ExternalInteractorBase {
     constructor(container) {
-        this.type = "external";
+        this.type = InteractorType_js_1.InteractorType.external;
         this.container = container;
     }
 }