@tsparticles/engine 3.9.0 → 4.0.0-alpha.0

package/umd/Core/Particles.js

@@ -4,14 +4,13 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Utils/Constants.js", "../Utils/Utils.js", "../Enums/Types/EventType.js", "./Utils/InteractionManager.js", "../Enums/Modes/LimitMode.js", "./Particle.js", "./Utils/Point.js", "./Utils/QuadTree.js", "./Utils/Ranges.js"], factory);
+        define(["require", "exports", "./Utils/Constants.js", "../Enums/Types/EventType.js", "./Utils/InteractionManager.js", "../Enums/Modes/LimitMode.js", "./Particle.js", "./Utils/Point.js", "./Utils/QuadTree.js", "./Utils/Ranges.js", "../Utils/LogUtils.js", "../Utils/Utils.js", "../Utils/OptionsUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Particles = void 0;
     const Constants_js_1 = require("./Utils/Constants.js");
-    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");
@@ -19,6 +18,9 @@
     const Point_js_1 = require("./Utils/Point.js");
     const QuadTree_js_1 = require("./Utils/QuadTree.js");
     const Ranges_js_1 = require("./Utils/Ranges.js");
+    const LogUtils_js_1 = require("../Utils/LogUtils.js");
+    const Utils_js_1 = require("../Utils/Utils.js");
+    const OptionsUtils_js_1 = require("../Utils/OptionsUtils.js");
     const qTreeRectangle = (canvasSize) => {
         const { height, width } = canvasSize;
         return new Ranges_js_1.Rectangle(Constants_js_1.posOffset * width, Constants_js_1.posOffset * height, Constants_js_1.sizeFactor * width, Constants_js_1.sizeFactor * height);
@@ -30,12 +32,12 @@
             };
             this._applyDensity = (options, manualCount, group, groupOptions) => {
                 const numberOptions = options.number;
-                if (!options.number.density?.enable) {
+                if (!numberOptions.density.enable) {
                     if (group === undefined) {
                         this._limit = numberOptions.limit.value;
                     }
-                    else if (groupOptions?.number.limit?.value ?? numberOptions.limit.value) {
-                        this._groupLimits.set(group, groupOptions?.number.limit?.value ?? numberOptions.limit.value);
+                    else if (groupOptions?.number.limit.value ?? numberOptions.limit.value) {
+                        this._groupLimits.set(group, groupOptions?.number.limit.value ?? numberOptions.limit.value);
                     }
                     return;
                 }
@@ -63,10 +65,7 @@
             };
             this._pushParticle = (position, overrideOptions, group, initializer) => {
                 try {
-                    let particle = this._pool.pop();
-                    if (!particle) {
-                        particle = new Particle_js_1.Particle(this._engine, this._container);
-                    }
+                    const particle = this._pool.pop() ?? new Particle_js_1.Particle(this._engine, this._container);
                     particle.init(this._nextId, position, overrideOptions, group);
                     let canAdd = true;
                     if (initializer) {
@@ -87,12 +86,16 @@
                     return particle;
                 }
                 catch (e) {
-                    (0, Utils_js_1.getLogger)().warning(`${Constants_js_1.errorPrefix} adding particle: ${e}`);
+                    (0, LogUtils_js_1.getLogger)().warning(`error adding particle: ${e}`);
                 }
+                return undefined;
             };
             this._removeParticle = (index, group, override) => {
                 const particle = this._array[index];
-                if (!particle || particle.group !== group) {
+                if (!particle) {
+                    return false;
+                }
+                if (particle.group !== group) {
                     return false;
                 }
                 const zIdx = this._zArray.indexOf(particle);
@@ -163,15 +166,9 @@
             this.movers = [];
             this.updaters = [];
         }
-        draw(delta) {
-            const container = this._container, canvas = container.canvas;
-            canvas.clear();
-            this.update(delta);
-            for (const plugin of container.plugins.values()) {
-                canvas.drawPlugin(plugin, delta);
-            }
-            for (const p of this._zArray) {
-                p.draw(delta);
+        drawParticles(delta) {
+            for (const particle of this._zArray) {
+                particle.draw(delta);
             }
         }
         filter(condition) {
@@ -203,7 +200,10 @@
                 const particlesOptions = options.particles, groups = particlesOptions.groups;
                 for (const group in groups) {
                     const groupOptions = groups[group];
-                    for (let i = this.count, j = 0; j < groupOptions.number?.value && i < particlesOptions.number.value; i++, j++) {
+                    if (!groupOptions) {
+                        continue;
+                    }
+                    for (let i = this.count, j = 0; j < groupOptions.number.value && i < particlesOptions.number.value; i++, j++) {
                         this.addParticle(undefined, groupOptions, group);
                     }
                 }
@@ -232,7 +232,7 @@
         async redraw() {
             this.clear();
             await this.init();
-            this.draw({ value: 0, factor: 0 });
+            this._container.canvas.drawParticles({ value: 0, factor: 0 });
         }
         remove(particle, group, override) {
             this.removeAt(this._array.indexOf(particle), undefined, group, override);
@@ -255,7 +255,12 @@
         setDensity() {
             const options = this._container.actualOptions, groups = options.particles.groups, manualCount = options.manualParticles.length;
             for (const group in groups) {
-                this._applyDensity(groups[group], manualCount, group);
+                const groupData = groups[group];
+                if (!groupData) {
+                    continue;
+                }
+                const groupDataOptions = (0, OptionsUtils_js_1.loadParticlesOptions)(this._engine, this._container, groupData);
+                this._applyDensity(groupDataOptions, manualCount, group);
             }
             this._applyDensity(options.particles, manualCount);
         }
@@ -329,7 +334,11 @@
             if (this._needsSort) {
                 const zArray = this._zArray;
                 zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);
-                this._lastZIndex = zArray[zArray.length - Constants_js_1.lengthOffset].position.z;
+                const lastItem = zArray[zArray.length - Constants_js_1.lengthOffset];
+                if (!lastItem) {
+                    return;
+                }
+                this._lastZIndex = lastItem.position.z;
                 this._needsSort = false;
             }
         }

package/umd/Core/Retina.js

@@ -4,15 +4,14 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Utils/Constants.js", "../Utils/NumberUtils.js", "../Utils/Utils.js"], factory);
+        define(["require", "exports", "./Utils/Constants.js", "../Utils/MathUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Retina = void 0;
     const Constants_js_1 = require("./Utils/Constants.js");
-    const NumberUtils_js_1 = require("../Utils/NumberUtils.js");
-    const Utils_js_1 = require("../Utils/Utils.js");
+    const MathUtils_js_1 = require("../Utils/MathUtils.js");
     class Retina {
         constructor(container) {
             this.container = container;
@@ -21,7 +20,7 @@
         }
         init() {
             const container = this.container, options = container.actualOptions;
-            this.pixelRatio = !options.detectRetina || (0, Utils_js_1.isSsr)() ? Constants_js_1.defaultRatio : devicePixelRatio;
+            this.pixelRatio = options.detectRetina ? devicePixelRatio : Constants_js_1.defaultRatio;
             this.reduceFactor = Constants_js_1.defaultReduceFactor;
             const ratio = this.pixelRatio, canvas = container.canvas;
             if (canvas.element) {
@@ -30,18 +29,18 @@
                 canvas.size.height = element.offsetHeight * ratio;
             }
             const particles = options.particles, moveOptions = particles.move;
-            this.maxSpeed = (0, NumberUtils_js_1.getRangeValue)(moveOptions.gravity.maxSpeed) * ratio;
-            this.sizeAnimationSpeed = (0, NumberUtils_js_1.getRangeValue)(particles.size.animation.speed) * ratio;
+            this.maxSpeed = (0, MathUtils_js_1.getRangeValue)(moveOptions.gravity.maxSpeed) * ratio;
+            this.sizeAnimationSpeed = (0, MathUtils_js_1.getRangeValue)(particles.size.animation.speed) * ratio;
         }
         initParticle(particle) {
             const options = particle.options, ratio = this.pixelRatio, moveOptions = options.move, moveDistance = moveOptions.distance, props = particle.retina;
-            props.moveDrift = (0, NumberUtils_js_1.getRangeValue)(moveOptions.drift) * ratio;
-            props.moveSpeed = (0, NumberUtils_js_1.getRangeValue)(moveOptions.speed) * ratio;
-            props.sizeAnimationSpeed = (0, NumberUtils_js_1.getRangeValue)(options.size.animation.speed) * ratio;
+            props.moveDrift = (0, MathUtils_js_1.getRangeValue)(moveOptions.drift) * ratio;
+            props.moveSpeed = (0, MathUtils_js_1.getRangeValue)(moveOptions.speed) * ratio;
+            props.sizeAnimationSpeed = (0, MathUtils_js_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_js_1.getRangeValue)(moveOptions.gravity.maxSpeed) * ratio;
+            props.maxSpeed = (0, MathUtils_js_1.getRangeValue)(moveOptions.gravity.maxSpeed) * ratio;
         }
     }
     exports.Retina = Retina;

package/umd/Core/Utils/Constants.js

@@ -9,8 +9,8 @@
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.defaultTime = exports.defaultLoops = exports.defaultVelocity = exports.defaultRgbMin = exports.phaseNumerator = exports.sNormalizedOffset = exports.sextuple = exports.triple = exports.rgbFactor = exports.lMin = exports.lFactor = exports.minStrokeWidth = exports.identity = exports.defaultAngle = exports.manualDefaultPosition = exports.touchDelay = exports.deleteCount = exports.defaultDensityFactor = exports.lengthOffset = exports.manualCount = exports.minIndex = exports.minCount = exports.countOffset = exports.minLimit = exports.sizeFactor = exports.posOffset = exports.defaultRadius = exports.minZ = exports.rollFactor = exports.minRetries = exports.tryCountIncrement = exports.decayOffset = exports.none = exports.one = exports.loadMinIndex = exports.loadRandomFactor = exports.canvasFirstIndex = exports.minFpsLimit = exports.defaultFpsLimit = exports.removeMinIndex = exports.removeDeleteCount = exports.minCoordinate = exports.touchEndLengthOffset = exports.clickRadius = exports.defaultOpacity = exports.zIndexFactorOffset = exports.minimumLength = exports.minimumSize = exports.defaultTransformValue = exports.minVelocity = exports.threeQuarter = exports.quarter = exports.empty = exports.hPhase = exports.sMin = exports.hMin = exports.lMax = exports.sMax = exports.hMax = exports.rgbMax = exports.inverseFactorNumerator = exports.subdivideCount = exports.defaultReduceFactor = exports.defaultRatio = exports.defaultRemoveQuantity = exports.qTreeCapacity = exports.squareExp = exports.defaultRetryCount = exports.canvasTag = exports.generatedFalse = exports.generatedTrue = exports.defaultAlpha = exports.defaultFps = exports.doublePI = exports.double = exports.midColorValue = exports.randomColorValue = exports.defaultTransform = exports.originPoint = exports.millisecondsToSeconds = exports.half = exports.percentDenominator = exports.errorPrefix = exports.visibilityChangeEvent = exports.resizeEvent = exports.touchCancelEvent = exports.touchMoveEvent = exports.touchEndEvent = exports.touchStartEvent = exports.mouseMoveEvent = exports.mouseOutEvent = exports.mouseLeaveEvent = exports.mouseUpEvent = exports.mouseDownEvent = exports.generatedAttribute = void 0;
-    exports.generatedAttribute = "generated", exports.mouseDownEvent = "pointerdown", exports.mouseUpEvent = "pointerup", exports.mouseLeaveEvent = "pointerleave", exports.mouseOutEvent = "pointerout", exports.mouseMoveEvent = "pointermove", exports.touchStartEvent = "touchstart", exports.touchEndEvent = "touchend", exports.touchMoveEvent = "touchmove", exports.touchCancelEvent = "touchcancel", exports.resizeEvent = "resize", exports.visibilityChangeEvent = "visibilitychange", exports.errorPrefix = "tsParticles - Error", exports.percentDenominator = 100, exports.half = 0.5, exports.millisecondsToSeconds = 1000, exports.originPoint = {
+    exports.defaultTime = exports.defaultLoops = exports.defaultVelocity = exports.defaultRgbMin = exports.phaseNumerator = exports.sNormalizedOffset = exports.sextuple = exports.triple = exports.lMin = exports.lFactor = exports.minStrokeWidth = exports.identity = exports.defaultAngle = exports.manualDefaultPosition = exports.touchDelay = exports.deleteCount = exports.defaultDensityFactor = exports.lengthOffset = exports.manualCount = exports.minIndex = exports.minCount = exports.countOffset = exports.minLimit = exports.sizeFactor = exports.posOffset = exports.defaultRadius = exports.minZ = exports.rollFactor = exports.minRetries = exports.tryCountIncrement = exports.decayOffset = exports.none = exports.one = exports.loadMinIndex = exports.loadRandomFactor = exports.canvasFirstIndex = exports.minFpsLimit = exports.defaultFpsLimit = exports.removeMinIndex = exports.removeDeleteCount = exports.minCoordinate = exports.touchEndLengthOffset = exports.clickRadius = exports.defaultOpacity = exports.zIndexFactorOffset = exports.minimumLength = exports.minimumSize = exports.defaultTransformValue = exports.minVelocity = exports.threeQuarter = exports.quarter = exports.empty = exports.hPhase = exports.sMin = exports.hMin = exports.lMax = exports.sMax = exports.hMax = exports.rgbMax = exports.inverseFactorNumerator = exports.subdivideCount = exports.defaultReduceFactor = exports.defaultRatio = exports.defaultRemoveQuantity = exports.qTreeCapacity = exports.squareExp = exports.defaultRetryCount = exports.canvasTag = exports.generatedFalse = exports.generatedTrue = exports.defaultAlpha = exports.defaultFps = exports.doublePI = exports.double = exports.midColorValue = exports.randomColorValue = exports.defaultTransform = exports.originPoint = exports.millisecondsToSeconds = exports.half = exports.percentDenominator = exports.visibilityChangeEvent = exports.resizeEvent = exports.touchCancelEvent = exports.touchMoveEvent = exports.touchEndEvent = exports.touchStartEvent = exports.mouseMoveEvent = exports.mouseOutEvent = exports.mouseLeaveEvent = exports.mouseUpEvent = exports.mouseDownEvent = exports.generatedAttribute = void 0;
+    exports.generatedAttribute = "generated", exports.mouseDownEvent = "pointerdown", exports.mouseUpEvent = "pointerup", exports.mouseLeaveEvent = "pointerleave", exports.mouseOutEvent = "pointerout", exports.mouseMoveEvent = "pointermove", exports.touchStartEvent = "touchstart", exports.touchEndEvent = "touchend", exports.touchMoveEvent = "touchmove", exports.touchCancelEvent = "touchcancel", exports.resizeEvent = "resize", exports.visibilityChangeEvent = "visibilitychange", exports.percentDenominator = 100, exports.half = 0.5, exports.millisecondsToSeconds = 1000, exports.originPoint = {
         x: 0,
         y: 0,
         z: 0,
@@ -19,5 +19,5 @@
         b: 0,
         c: 0,
         d: 1,
-    }, exports.randomColorValue = "random", exports.midColorValue = "mid", exports.double = 2, exports.doublePI = Math.PI * exports.double, exports.defaultFps = 60, exports.defaultAlpha = 1, exports.generatedTrue = "true", exports.generatedFalse = "false", exports.canvasTag = "canvas", exports.defaultRetryCount = 0, exports.squareExp = 2, exports.qTreeCapacity = 4, exports.defaultRemoveQuantity = 1, exports.defaultRatio = 1, exports.defaultReduceFactor = 1, exports.subdivideCount = 4, exports.inverseFactorNumerator = 1.0, exports.rgbMax = 255, exports.hMax = 360, exports.sMax = 100, exports.lMax = 100, exports.hMin = 0, exports.sMin = 0, exports.hPhase = 60, exports.empty = 0, exports.quarter = 0.25, exports.threeQuarter = exports.half + exports.quarter, exports.minVelocity = 0, exports.defaultTransformValue = 1, exports.minimumSize = 0, exports.minimumLength = 0, exports.zIndexFactorOffset = 1, exports.defaultOpacity = 1, exports.clickRadius = 1, exports.touchEndLengthOffset = 1, exports.minCoordinate = 0, exports.removeDeleteCount = 1, exports.removeMinIndex = 0, exports.defaultFpsLimit = 120, exports.minFpsLimit = 0, exports.canvasFirstIndex = 0, exports.loadRandomFactor = 10000, exports.loadMinIndex = 0, exports.one = 1, exports.none = 0, exports.decayOffset = 1, exports.tryCountIncrement = 1, exports.minRetries = 0, exports.rollFactor = 1, exports.minZ = 0, exports.defaultRadius = 0, exports.posOffset = -exports.quarter, exports.sizeFactor = 1.5, exports.minLimit = 0, exports.countOffset = 1, exports.minCount = 0, exports.minIndex = 0, exports.manualCount = 0, exports.lengthOffset = 1, exports.defaultDensityFactor = 1, exports.deleteCount = 1, exports.touchDelay = 500, exports.manualDefaultPosition = 50, exports.defaultAngle = 0, exports.identity = 1, exports.minStrokeWidth = 0, exports.lFactor = 1, exports.lMin = 0, exports.rgbFactor = 255, exports.triple = 3, exports.sextuple = 6, exports.sNormalizedOffset = 1, exports.phaseNumerator = 1, exports.defaultRgbMin = 0, exports.defaultVelocity = 0, exports.defaultLoops = 0, exports.defaultTime = 0;
+    }, exports.randomColorValue = "random", exports.midColorValue = "mid", exports.double = 2, exports.doublePI = Math.PI * exports.double, exports.defaultFps = 60, exports.defaultAlpha = 1, exports.generatedTrue = "true", exports.generatedFalse = "false", exports.canvasTag = "canvas", exports.defaultRetryCount = 0, exports.squareExp = 2, exports.qTreeCapacity = 4, exports.defaultRemoveQuantity = 1, exports.defaultRatio = 1, exports.defaultReduceFactor = 1, exports.subdivideCount = 4, exports.inverseFactorNumerator = 1.0, exports.rgbMax = 255, exports.hMax = 360, exports.sMax = 100, exports.lMax = 100, exports.hMin = 0, exports.sMin = 0, exports.hPhase = 60, exports.empty = 0, exports.quarter = 0.25, exports.threeQuarter = exports.half + exports.quarter, exports.minVelocity = 0, exports.defaultTransformValue = 1, exports.minimumSize = 0, exports.minimumLength = 0, exports.zIndexFactorOffset = 1, exports.defaultOpacity = 1, exports.clickRadius = 1, exports.touchEndLengthOffset = 1, exports.minCoordinate = 0, exports.removeDeleteCount = 1, exports.removeMinIndex = 0, exports.defaultFpsLimit = 120, exports.minFpsLimit = 0, exports.canvasFirstIndex = 0, exports.loadRandomFactor = 10000, exports.loadMinIndex = 0, exports.one = 1, exports.none = 0, exports.decayOffset = 1, exports.tryCountIncrement = 1, exports.minRetries = 0, exports.rollFactor = 1, exports.minZ = 0, exports.defaultRadius = 0, exports.posOffset = -exports.quarter, exports.sizeFactor = 1.5, exports.minLimit = 0, exports.countOffset = 1, exports.minCount = 0, exports.minIndex = 0, exports.manualCount = 0, exports.lengthOffset = 1, exports.defaultDensityFactor = 1, exports.deleteCount = 1, exports.touchDelay = 500, exports.manualDefaultPosition = 50, exports.defaultAngle = 0, exports.identity = 1, exports.minStrokeWidth = 0, exports.lFactor = 1, exports.lMin = 0, exports.triple = 3, exports.sextuple = 6, exports.sNormalizedOffset = 1, exports.phaseNumerator = 1, exports.defaultRgbMin = 0, exports.defaultVelocity = 0, exports.defaultLoops = 0, exports.defaultTime = 0;
 });

package/umd/Core/Utils/EventListeners.js

@@ -33,6 +33,7 @@
     class EventListeners {
         constructor(container) {
             this.container = container;
+            this._canPush = true;
             this._doMouseTouchClick = e => {
                 const container = this.container, options = container.actualOptions;
                 if (this._canPush) {
@@ -41,12 +42,16 @@
                         return;
                     }
                     mouseInteractivity.clickPosition = { ...mousePos };
-                    mouseInteractivity.clickTime = new Date().getTime();
+                    mouseInteractivity.clickTime = Date.now();
                     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") {
-                    setTimeout(() => this._mouseTouchFinish(), Constants_js_1.touchDelay);
+                    setTimeout(() => {
+                        this._mouseTouchFinish();
+                    }, Constants_js_1.touchDelay);
                 }
             };
             this._handleThemeChange = (e) => {
@@ -61,17 +66,17 @@
                 if (!options.pauseOnBlur) {
                     return;
                 }
-                if (document?.hidden) {
+                if ((0, Utils_js_1.safeDocument)().hidden) {
                     container.pageHidden = true;
                     container.pause();
                 }
                 else {
                     container.pageHidden = false;
                     if (container.animationStatus) {
-                        void container.play(true);
+                        container.play(true);
                     }
                     else {
-                        void container.draw(true);
+                        container.draw(true);
                     }
                 }
             };
@@ -82,7 +87,7 @@
                 }
                 const handleResize = async () => {
                     const canvas = this.container.canvas;
-                    await canvas?.windowResize();
+                    await canvas.windowResize();
                 };
                 this._resizeTimeout = setTimeout(() => void handleResize(), this.container.actualOptions.interactivity.events.resize.delay * Constants_js_1.millisecondsToSeconds);
             };
@@ -99,14 +104,14 @@
                 manageListener(interactivityEl, Constants_js_1.mouseMoveEvent, handlers.mouseMove, add);
                 manageListener(interactivityEl, Constants_js_1.touchStartEvent, handlers.touchStart, add);
                 manageListener(interactivityEl, Constants_js_1.touchMoveEvent, handlers.touchMove, add);
-                if (!options.interactivity.events.onClick.enable) {
-                    manageListener(interactivityEl, Constants_js_1.touchEndEvent, handlers.touchEnd, add);
-                }
-                else {
+                if (options.interactivity.events.onClick.enable) {
                     manageListener(interactivityEl, Constants_js_1.touchEndEvent, handlers.touchEndClick, add);
                     manageListener(interactivityEl, Constants_js_1.mouseUpEvent, handlers.mouseUp, add);
                     manageListener(interactivityEl, Constants_js_1.mouseDownEvent, handlers.mouseDown, add);
                 }
+                else {
+                    manageListener(interactivityEl, Constants_js_1.touchEndEvent, handlers.touchEnd, add);
+                }
                 manageListener(interactivityEl, mouseLeaveTmpEvent, handlers.mouseLeave, add);
                 manageListener(interactivityEl, Constants_js_1.touchCancelEvent, handlers.touchCancel, add);
             };
@@ -126,36 +131,22 @@
                 this._manageMediaMatch(add);
                 this._manageResize(add);
                 this._manageInteractivityListeners(mouseLeaveTmpEvent, add);
-                if (document) {
-                    manageListener(document, Constants_js_1.visibilityChangeEvent, handlers.visibilityChange, add, false);
-                }
+                manageListener(document, Constants_js_1.visibilityChangeEvent, handlers.visibilityChange, add, false);
             };
             this._manageMediaMatch = add => {
-                const handlers = this._handlers, mediaMatch = (0, Utils_js_1.safeMatchMedia)("(prefers-color-scheme: dark)");
-                if (!mediaMatch) {
+                const handlers = this._handlers;
+                if (!this._matchMedia) {
                     return;
                 }
-                if (mediaMatch.addEventListener !== undefined) {
-                    manageListener(mediaMatch, "change", handlers.themeChange, add);
-                    return;
-                }
-                if (mediaMatch.addListener === undefined) {
-                    return;
-                }
-                if (add) {
-                    mediaMatch.addListener(handlers.oldThemeChange);
-                }
-                else {
-                    mediaMatch.removeListener(handlers.oldThemeChange);
-                }
+                manageListener(this._matchMedia, "change", handlers.themeChange, add);
             };
             this._manageResize = add => {
                 const handlers = this._handlers, container = this.container, options = container.actualOptions;
-                if (!options.interactivity.events.resize) {
+                if (!options.interactivity.events.resize.enable) {
                     return;
                 }
                 if (typeof ResizeObserver === "undefined") {
-                    manageListener(window, Constants_js_1.resizeEvent, handlers.resize, add);
+                    manageListener(globalThis, Constants_js_1.resizeEvent, handlers.resize, add);
                     return;
                 }
                 const canvasEl = container.canvas.element;
@@ -178,11 +169,7 @@
                 }
             };
             this._mouseDown = () => {
-                const { interactivity } = this.container;
-                if (!interactivity) {
-                    return;
-                }
-                const { mouse } = interactivity;
+                const { interactivity } = this.container, { mouse } = interactivity;
                 mouse.clicking = true;
                 mouse.downPosition = mouse.position;
             };
@@ -209,11 +196,7 @@
                 mouse.clicking = false;
             };
             this._mouseTouchFinish = () => {
-                const interactivity = this.container.interactivity;
-                if (!interactivity) {
-                    return;
-                }
-                const mouse = interactivity.mouse;
+                const { interactivity } = this.container, { mouse } = interactivity;
                 delete mouse.position;
                 delete mouse.clickPosition;
                 delete mouse.downPosition;
@@ -223,7 +206,7 @@
             };
             this._mouseTouchMove = e => {
                 const container = this.container, options = container.actualOptions, interactivity = container.interactivity, canvasEl = container.canvas.element;
-                if (!interactivity?.element) {
+                if (!interactivity.element) {
                     return;
                 }
                 interactivity.mouse.inside = true;
@@ -242,7 +225,7 @@
                     }
                     else if (options.interactivity.detectsOn === InteractivityDetect_js_1.InteractivityDetect.parent) {
                         const source = mouseEvent.target, target = mouseEvent.currentTarget;
-                        if (source && target && canvasEl) {
+                        if (canvasEl) {
                             const sourceRect = source.getBoundingClientRect(), targetRect = target.getBoundingClientRect(), canvasRect = canvasEl.getBoundingClientRect();
                             pos = {
                                 x: mouseEvent.offsetX + Constants_js_1.double * sourceRect.left - (targetRect.left + canvasRect.left),
@@ -251,15 +234,15 @@
                         }
                         else {
                             pos = {
-                                x: mouseEvent.offsetX ?? mouseEvent.clientX,
-                                y: mouseEvent.offsetY ?? mouseEvent.clientY,
+                                x: mouseEvent.offsetX,
+                                y: mouseEvent.offsetY,
                             };
                         }
                     }
                     else if (mouseEvent.target === canvasEl) {
                         pos = {
-                            x: mouseEvent.offsetX ?? mouseEvent.clientX,
-                            y: mouseEvent.offsetY ?? mouseEvent.clientY,
+                            x: mouseEvent.offsetX,
+                            y: mouseEvent.offsetY,
                         };
                     }
                 }
@@ -267,9 +250,12 @@
                     this._canPush = e.type !== "touchmove";
                     if (canvasEl) {
                         const touchEvent = e, lastTouch = touchEvent.touches[touchEvent.touches.length - Constants_js_1.lengthOffset], canvasRect = canvasEl.getBoundingClientRect();
+                        if (!lastTouch) {
+                            return;
+                        }
                         pos = {
-                            x: lastTouch.clientX - (canvasRect.left ?? Constants_js_1.minCoordinate),
-                            y: lastTouch.clientY - (canvasRect.top ?? Constants_js_1.minCoordinate),
+                            x: lastTouch.clientX - canvasRect.left,
+                            y: lastTouch.clientY - canvasRect.top,
                         };
                     }
                 }
@@ -302,21 +288,45 @@
                 }
                 this._mouseTouchMove(e);
             };
-            this._canPush = true;
+            this._matchMedia = (0, Utils_js_1.safeMatchMedia)("(prefers-color-scheme: dark)");
             this._touches = new Map();
             this._handlers = {
-                mouseDown: () => this._mouseDown(),
-                mouseLeave: () => this._mouseTouchFinish(),
-                mouseMove: (e) => this._mouseTouchMove(e),
-                mouseUp: (e) => this._mouseTouchClick(e),
-                touchStart: (e) => this._touchStart(e),
-                touchMove: (e) => this._mouseTouchMove(e),
-                touchEnd: (e) => this._touchEnd(e),
-                touchCancel: (e) => this._touchEnd(e),
-                touchEndClick: (e) => this._touchEndClick(e),
-                visibilityChange: () => this._handleVisibilityChange(),
-                themeChange: (e) => this._handleThemeChange(e),
-                oldThemeChange: (e) => this._handleThemeChange(e),
+                mouseDown: () => {
+                    this._mouseDown();
+                },
+                mouseLeave: () => {
+                    this._mouseTouchFinish();
+                },
+                mouseMove: (e) => {
+                    this._mouseTouchMove(e);
+                },
+                mouseUp: (e) => {
+                    this._mouseTouchClick(e);
+                },
+                touchStart: (e) => {
+                    this._touchStart(e);
+                },
+                touchMove: (e) => {
+                    this._mouseTouchMove(e);
+                },
+                touchEnd: (e) => {
+                    this._touchEnd(e);
+                },
+                touchCancel: (e) => {
+                    this._touchEnd(e);
+                },
+                touchEndClick: (e) => {
+                    this._touchEndClick(e);
+                },
+                visibilityChange: () => {
+                    this._handleVisibilityChange();
+                },
+                themeChange: (e) => {
+                    this._handleThemeChange(e);
+                },
+                oldThemeChange: (e) => {
+                    this._handleThemeChange(e);
+                },
                 resize: () => {
                     this._handleWindowResize();
                 },

package/umd/Core/Utils/QuadTree.js

@@ -4,7 +4,7 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Ranges.js", "./Constants.js", "../../Utils/NumberUtils.js"], factory);
+        define(["require", "exports", "./Ranges.js", "./Constants.js", "../../Utils/MathUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -12,7 +12,7 @@
     exports.QuadTree = void 0;
     const Ranges_js_1 = require("./Ranges.js");
     const Constants_js_1 = require("./Constants.js");
-    const NumberUtils_js_1 = require("../../Utils/NumberUtils.js");
+    const MathUtils_js_1 = require("../../Utils/MathUtils.js");
     class QuadTree {
         constructor(rectangle, capacity) {
             this.rectangle = rectangle;
@@ -49,7 +49,7 @@
             }
             for (const p of this._points) {
                 if (!range.contains(p.position) &&
-                    (0, NumberUtils_js_1.getDistance)(range.position, p.position) > p.particle.getRadius() &&
+                    (0, MathUtils_js_1.getDistance)(range.position, p.position) > p.particle.getRadius() &&
                     (!check || check(p.particle))) {
                     continue;
                 }

package/umd/Core/Utils/Ranges.js

@@ -4,14 +4,14 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../Types/RangeType.js", "../../Utils/NumberUtils.js", "./Constants.js"], factory);
+        define(["require", "exports", "../../Enums/RangeType.js", "../../Utils/MathUtils.js", "./Constants.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Rectangle = exports.Circle = exports.BaseRange = void 0;
-    const RangeType_js_1 = require("../../Types/RangeType.js");
-    const NumberUtils_js_1 = require("../../Utils/NumberUtils.js");
+    const RangeType_js_1 = require("../../Enums/RangeType.js");
+    const MathUtils_js_1 = require("../../Utils/MathUtils.js");
     const Constants_js_1 = require("./Constants.js");
     class BaseRange {
         constructor(x, y, type) {
@@ -29,7 +29,7 @@
             this.radius = radius;
         }
         contains(point) {
-            return (0, NumberUtils_js_1.getDistance)(point, this.position) <= this.radius;
+            return (0, MathUtils_js_1.getDistance)(point, this.position) <= this.radius;
         }
         intersects(range) {
             const pos1 = this.position, pos2 = range.position, distPos = { x: Math.abs(pos2.x - pos1.x), y: Math.abs(pos2.y - pos1.y) }, r = this.radius;

package/umd/Core/Utils/Vectors.js

@@ -4,34 +4,22 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Constants.js", "../../Utils/TypeUtils.js"], factory);
+        define(["require", "exports", "./Constants.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.Vector = exports.Vector3d = void 0;
     const Constants_js_1 = require("./Constants.js");
-    const TypeUtils_js_1 = require("../../Utils/TypeUtils.js");
     class Vector3d {
-        constructor(xOrCoords, y, z) {
+        constructor(x = Constants_js_1.originPoint.x, y = Constants_js_1.originPoint.y, z = Constants_js_1.originPoint.z) {
             this._updateFromAngle = (angle, length) => {
                 this.x = Math.cos(angle) * length;
                 this.y = Math.sin(angle) * length;
             };
-            if (!(0, TypeUtils_js_1.isNumber)(xOrCoords) && xOrCoords) {
-                this.x = xOrCoords.x;
-                this.y = xOrCoords.y;
-                const coords3d = xOrCoords;
-                this.z = coords3d.z ? coords3d.z : Constants_js_1.originPoint.z;
-            }
-            else if (xOrCoords !== undefined && y !== undefined) {
-                this.x = xOrCoords;
-                this.y = y;
-                this.z = z ?? Constants_js_1.originPoint.z;
-            }
-            else {
-                throw new Error(`${Constants_js_1.errorPrefix} Vector3d not initialized correctly`);
-            }
+            this.x = x;
+            this.y = y;
+            this.z = z;
         }
         static get origin() {
             return Vector3d.create(Constants_js_1.originPoint.x, Constants_js_1.originPoint.y, Constants_js_1.originPoint.z);
@@ -52,7 +40,10 @@
             return Vector3d.create(source.x, source.y, source.z);
         }
         static create(x, y, z) {
-            return new Vector3d(x, y, z);
+            if (typeof x === "number") {
+                return new Vector3d(x, y ?? Constants_js_1.originPoint.y, z ?? Constants_js_1.originPoint.z);
+            }
+            return new Vector3d(x.x, x.y, Object.hasOwn(x, "z") ? x.z : Constants_js_1.originPoint.z);
         }
         add(v) {
             return Vector3d.create(this.x + v.x, this.y + v.y, this.z + v.z);
@@ -116,8 +107,8 @@
     }
     exports.Vector3d = Vector3d;
     class Vector extends Vector3d {
-        constructor(xOrCoords, y) {
-            super(xOrCoords, y, Constants_js_1.originPoint.z);
+        constructor(x = Constants_js_1.originPoint.x, y = Constants_js_1.originPoint.y) {
+            super(x, y, Constants_js_1.originPoint.z);
         }
         static get origin() {
             return Vector.create(Constants_js_1.originPoint.x, Constants_js_1.originPoint.y);
@@ -126,7 +117,10 @@
             return Vector.create(source.x, source.y);
         }
         static create(x, y) {
-            return new Vector(x, y);
+            if (typeof x === "number") {
+                return new Vector(x, y ?? Constants_js_1.originPoint.y);
+            }
+            return new Vector(x.x, x.y);
         }
     }
     exports.Vector = Vector;

package/umd/Options/Classes/AnimatableColor.js

@@ -38,11 +38,11 @@
             }
             const colorAnimation = data.animation;
             if (colorAnimation !== undefined) {
-                if (colorAnimation.enable !== undefined) {
-                    this.animation.h.load(colorAnimation);
+                if (colorAnimation.enable === undefined) {
+                    this.animation.load(data.animation);
                 }
                 else {
-                    this.animation.load(data.animation);
+                    this.animation.h.load(colorAnimation);
                 }
             }
         }