@tsparticles/engine 4.0.0-alpha.8 → 4.0.0-beta.0

package/cjs/Core/Particles.js

@@ -1,102 +1,34 @@
-import { countOffset, defaultDensityFactor, defaultRemoveQuantity, deleteCount, lengthOffset, minCount, minIndex, minLimit, posOffset, qTreeCapacity, sizeFactor, squareExp, } from "./Utils/Constants.js";
+import { countOffset, defaultDensityFactor, defaultRemoveQuantity, deleteCount, lengthOffset, minCount, minIndex, minLimit, spatialHashGridCellSize, squareExp, } from "./Utils/Constants.js";
 import { EventType } from "../Enums/Types/EventType.js";
 import { LimitMode } from "../Enums/Modes/LimitMode.js";
 import { Particle } from "./Particle.js";
-import { Point } from "./Utils/Point.js";
-import { QuadTree } from "./Utils/QuadTree.js";
-import { Rectangle } from "./Utils/Ranges.js";
+import { SpatialHashGrid } from "./Utils/SpatialHashGrid.js";
 import { getLogger } from "../Utils/LogUtils.js";
 import { loadParticlesOptions } from "../Utils/OptionsUtils.js";
-const qTreeRectangle = (canvasSize) => {
-    const { height, width } = canvasSize;
-    return new Rectangle(posOffset * width, posOffset * height, sizeFactor * width, sizeFactor * height);
-};
 export class Particles {
+    checkParticlePositionPlugins;
+    effectDrawers;
+    grid;
+    shapeDrawers;
+    updaters;
+    _array;
+    _container;
+    _engine;
+    _groupLimits;
+    _limit;
+    _maxZIndex;
+    _minZIndex;
+    _needsSort;
+    _nextId;
+    _particleResetPlugins;
+    _particleUpdatePlugins;
+    _pool;
+    _postParticleUpdatePlugins;
+    _postUpdatePlugins;
+    _resizeFactor;
+    _updatePlugins;
+    _zArray;
     constructor(engine, container) {
-        this._addToPool = (...particles) => {
-            this._pool.push(...particles);
-        };
-        this._applyDensity = (options, pluginsCount, group, groupOptions) => {
-            const numberOptions = options.number;
-            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);
-                }
-                return;
-            }
-            const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit.value > minLimit ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + pluginsCount, particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);
-            if (group === undefined) {
-                this._limit = numberOptions.limit.value * densityFactor;
-            }
-            else {
-                this._groupLimits.set(group, numberOptions.limit.value * densityFactor);
-            }
-            if (particlesCount < particlesNumber) {
-                this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
-            }
-            else if (particlesCount > particlesNumber) {
-                this.removeQuantity(particlesCount - particlesNumber, group);
-            }
-        };
-        this._initDensityFactor = densityOptions => {
-            const container = this._container;
-            if (!container.canvas.element || !densityOptions.enable) {
-                return defaultDensityFactor;
-            }
-            const canvas = container.canvas.element, pxRatio = container.retina.pixelRatio;
-            return (canvas.width * canvas.height) / (densityOptions.height * densityOptions.width * pxRatio ** squareExp);
-        };
-        this._pushParticle = (position, overrideOptions, group, initializer) => {
-            try {
-                const particle = this._pool.pop() ?? new Particle(this._engine, this._container);
-                particle.init(this._nextId, 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(EventType.particleAdded, {
-                    container: this._container,
-                    data: {
-                        particle,
-                    },
-                });
-                return particle;
-            }
-            catch (e) {
-                getLogger().warning(`error adding particle: ${e}`);
-            }
-            return undefined;
-        };
-        this._removeParticle = (index, group, override) => {
-            const particle = this._array[index];
-            if (!particle) {
-                return false;
-            }
-            if (particle.group !== group) {
-                return false;
-            }
-            const zIdx = this._zArray.indexOf(particle);
-            this._array.splice(index, deleteCount);
-            this._zArray.splice(zIdx, deleteCount);
-            particle.destroy(override);
-            this._engine.dispatchEvent(EventType.particleRemoved, {
-                container: this._container,
-                data: {
-                    particle,
-                },
-            });
-            this._addToPool(particle);
-            return true;
-        };
         this._engine = engine;
         this._container = container;
         this._nextId = 0;
@@ -106,12 +38,18 @@ export class Particles {
         this._limit = 0;
         this._groupLimits = new Map();
         this._needsSort = false;
-        this._lastZIndex = 0;
-        this._pluginsInitialized = false;
-        const canvasSize = container.canvas.size;
-        this.quadTree = new QuadTree(qTreeRectangle(canvasSize), qTreeCapacity);
-        this.movers = [];
+        this._minZIndex = 0;
+        this._maxZIndex = 0;
+        this.grid = new SpatialHashGrid(spatialHashGridCellSize);
+        this.effectDrawers = new Map();
+        this.shapeDrawers = new Map();
         this.updaters = [];
+        this.checkParticlePositionPlugins = [];
+        this._particleResetPlugins = [];
+        this._particleUpdatePlugins = [];
+        this._postUpdatePlugins = [];
+        this._postParticleUpdatePlugins = [];
+        this._updatePlugins = [];
     }
     get count() {
         return this._array.length;
@@ -132,20 +70,61 @@ export class Particles {
                         return;
                     }
                     break;
+                default:
+                    break;
+            }
+        }
+        try {
+            const particle = this._pool.pop() ?? new Particle(this._engine, this._container);
+            particle.init(this._nextId, position, overrideOptions, group);
+            let canAdd = true;
+            if (initializer) {
+                canAdd = initializer(particle);
+            }
+            if (!canAdd) {
+                this._pool.push(particle);
+                return;
             }
+            this._array.push(particle);
+            this._zArray.push(particle);
+            this._nextId++;
+            this._engine.dispatchEvent(EventType.particleAdded, {
+                container: this._container,
+                data: {
+                    particle,
+                },
+            });
+            return particle;
+        }
+        catch (e) {
+            getLogger().warning(`error adding particle: ${e}`);
         }
-        return this._pushParticle(position, overrideOptions, group, initializer);
+        return undefined;
     }
     clear() {
         this._array = [];
         this._zArray = [];
-        this._pluginsInitialized = false;
     }
     destroy() {
+        const container = this._container;
+        for (const [, effectDrawer] of this.effectDrawers) {
+            effectDrawer.destroy?.(container);
+        }
+        for (const [, shapeDrawer] of this.shapeDrawers) {
+            shapeDrawer.destroy?.(container);
+        }
         this._array = [];
+        this._pool.length = 0;
         this._zArray = [];
-        this.movers = [];
+        this.effectDrawers = new Map();
+        this.shapeDrawers = new Map();
         this.updaters = [];
+        this.checkParticlePositionPlugins = [];
+        this._particleResetPlugins = [];
+        this._particleUpdatePlugins = [];
+        this._postUpdatePlugins = [];
+        this._postParticleUpdatePlugins = [];
+        this._updatePlugins = [];
     }
     drawParticles(delta) {
         for (const particle of this._zArray) {
@@ -163,14 +142,46 @@ export class Particles {
     }
     async init() {
         const container = this._container, options = container.actualOptions;
-        this._lastZIndex = 0;
+        this._minZIndex = 0;
+        this._maxZIndex = 0;
         this._needsSort = false;
+        this.checkParticlePositionPlugins = [];
+        this._updatePlugins = [];
+        this._particleUpdatePlugins = [];
+        this._postUpdatePlugins = [];
+        this._particleResetPlugins = [];
+        this._postParticleUpdatePlugins = [];
+        this.grid = new SpatialHashGrid(spatialHashGridCellSize * container.retina.pixelRatio);
         for (const plugin of container.plugins) {
             if (plugin.redrawInit) {
                 await plugin.redrawInit();
             }
+            if (plugin.checkParticlePosition) {
+                this.checkParticlePositionPlugins.push(plugin);
+            }
+            if (plugin.update) {
+                this._updatePlugins.push(plugin);
+            }
+            if (plugin.particleUpdate) {
+                this._particleUpdatePlugins.push(plugin);
+            }
+            if (plugin.postUpdate) {
+                this._postUpdatePlugins.push(plugin);
+            }
+            if (plugin.particleReset) {
+                this._particleResetPlugins.push(plugin);
+            }
+            if (plugin.postParticleUpdate) {
+                this._postParticleUpdatePlugins.push(plugin);
+            }
         }
         await this.initPlugins();
+        for (const drawer of this.effectDrawers.values()) {
+            await drawer.init?.(container);
+        }
+        for (const drawer of this.shapeDrawers.values()) {
+            await drawer.init?.(container);
+        }
         let handled = false;
         for (const plugin of container.plugins) {
             handled = plugin.particlesInitialization?.() ?? handled;
@@ -195,15 +206,10 @@ export class Particles {
         }
     }
     async initPlugins() {
-        if (this._pluginsInitialized) {
-            return;
-        }
         const container = this._container;
-        this.movers = await this._engine.getMovers(container, true);
+        this.effectDrawers = await this._engine.getEffectDrawers(container, true);
+        this.shapeDrawers = await this._engine.getShapeDrawers(container, true);
         this.updaters = await this._engine.getUpdaters(container, true);
-        for (const pathGenerator of container.pathGenerators.values()) {
-            pathGenerator.init(container);
-        }
     }
     push(nb, position, overrideOptions, group) {
         for (let i = 0; i < nb; i++) {
@@ -252,19 +258,15 @@ export class Particles {
         this._applyDensity(options.particles, pluginsCount);
     }
     setLastZIndex(zIndex) {
-        this._lastZIndex = zIndex;
-        this._needsSort = this._needsSort || this._lastZIndex < zIndex;
+        this._needsSort ||= zIndex >= this._maxZIndex || (zIndex > this._minZIndex && zIndex < this._maxZIndex);
     }
     setResizeFactor(factor) {
         this._resizeFactor = factor;
     }
     update(delta) {
-        const container = this._container, particlesToDelete = new Set();
-        this.quadTree = new QuadTree(qTreeRectangle(container.canvas.size), qTreeCapacity);
-        for (const pathGenerator of container.pathGenerators.values()) {
-            pathGenerator.update();
-        }
-        for (const plugin of container.plugins) {
+        const particlesToDelete = new Set();
+        this.grid.clear();
+        for (const plugin of this._updatePlugins) {
             plugin.update?.(delta);
         }
         const resizeFactor = this._resizeFactor;
@@ -276,27 +278,20 @@ export class Particles {
                 particle.initialPosition.y *= resizeFactor.height;
             }
             particle.ignoresResizeRatio = false;
-            for (const plugin of this._container.plugins) {
-                if (plugin.particleReset) {
-                    plugin.particleReset(particle);
-                }
+            for (const plugin of this._particleResetPlugins) {
+                plugin.particleReset?.(particle);
             }
-            for (const plugin of this._container.plugins) {
+            for (const plugin of this._particleUpdatePlugins) {
                 if (particle.destroyed) {
                     break;
                 }
                 plugin.particleUpdate?.(particle, delta);
             }
-            for (const mover of this.movers) {
-                if (mover.isEnabled(particle)) {
-                    mover.move(particle, delta);
-                }
-            }
             if (particle.destroyed) {
                 particlesToDelete.add(particle);
                 continue;
             }
-            this.quadTree.insert(new Point(particle.getPosition(), particle));
+            this.grid.insert(particle);
         }
         if (particlesToDelete.size) {
             const checkDelete = (p) => !particlesToDelete.has(p);
@@ -312,20 +307,16 @@ export class Particles {
             }
             this._addToPool(...particlesToDelete);
         }
-        for (const plugin of container.plugins) {
-            if (plugin.postUpdate) {
-                plugin.postUpdate(delta);
-            }
+        for (const plugin of this._postUpdatePlugins) {
+            plugin.postUpdate?.(delta);
         }
         for (const particle of this._array) {
             for (const updater of this.updaters) {
                 updater.update(particle, delta);
             }
             if (!particle.destroyed && !particle.spawning) {
-                for (const plugin of container.plugins) {
-                    if (plugin.postParticleUpdate) {
-                        plugin.postParticleUpdate(particle, delta);
-                    }
+                for (const plugin of this._postParticleUpdatePlugins) {
+                    plugin.postParticleUpdate?.(particle, delta);
                 }
             }
         }
@@ -333,12 +324,70 @@ export class Particles {
         if (this._needsSort) {
             const zArray = this._zArray;
             zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);
-            const lastItem = zArray[zArray.length - lengthOffset];
-            if (!lastItem) {
+            const firstItem = zArray[minIndex], lastItem = zArray[zArray.length - lengthOffset];
+            if (!firstItem || !lastItem) {
                 return;
             }
-            this._lastZIndex = lastItem.position.z;
+            this._maxZIndex = firstItem.position.z;
+            this._minZIndex = lastItem.position.z;
             this._needsSort = false;
         }
     }
+    _addToPool = (...particles) => {
+        this._pool.push(...particles);
+    };
+    _applyDensity = (options, pluginsCount, group, groupOptions) => {
+        const numberOptions = options.number;
+        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);
+            }
+            return;
+        }
+        const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit.value > minLimit ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + pluginsCount, particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);
+        if (group === undefined) {
+            this._limit = numberOptions.limit.value * densityFactor;
+        }
+        else {
+            this._groupLimits.set(group, numberOptions.limit.value * 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 defaultDensityFactor;
+        }
+        const canvas = container.canvas.element, pxRatio = container.retina.pixelRatio;
+        return (canvas.width * canvas.height) / (densityOptions.height * densityOptions.width * pxRatio ** squareExp);
+    };
+    _removeParticle = (index, group, override) => {
+        const particle = this._array[index];
+        if (!particle) {
+            return false;
+        }
+        if (particle.group !== group) {
+            return false;
+        }
+        const zIdx = this._zArray.indexOf(particle);
+        this._array.splice(index, deleteCount);
+        this._zArray.splice(zIdx, deleteCount);
+        particle.destroy(override);
+        this._engine.dispatchEvent(EventType.particleRemoved, {
+            container: this._container,
+            data: {
+                particle,
+            },
+        });
+        this._addToPool(particle);
+        return true;
+    };
 }

package/cjs/Core/Retina.js

@@ -1,6 +1,11 @@
 import { defaultRatio, defaultReduceFactor } from "./Utils/Constants.js";
 import { getRangeValue } from "../Utils/MathUtils.js";
 export class Retina {
+    container;
+    maxSpeed;
+    pixelRatio;
+    reduceFactor;
+    sizeAnimationSpeed;
     constructor(container) {
         this.container = container;
         this.pixelRatio = defaultRatio;

package/cjs/Core/Utils/Constants.js

@@ -1,4 +1,4 @@
-export const generatedAttribute = "generated", resizeEvent = "resize", visibilityChangeEvent = "visibilitychange", percentDenominator = 100, half = 0.5, millisecondsToSeconds = 1000, originPoint = {
+export const generatedAttribute = "generated", defaultCompositeValue = "source-over", resizeEvent = "resize", visibilityChangeEvent = "visibilitychange", percentDenominator = 100, half = 0.5, millisecondsToSeconds = 1000, originPoint = {
     x: 0,
     y: 0,
     z: 0,
@@ -7,4 +7,4 @@ export const generatedAttribute = "generated", resizeEvent = "resize", visibilit
     b: 0,
     c: 0,
     d: 1,
-}, randomColorValue = "random", midColorValue = "mid", double = 2, doublePI = Math.PI * double, defaultFps = 60, defaultAlpha = 1, generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", defaultRetryCount = 0, squareExp = 2, qTreeCapacity = 4, defaultRemoveQuantity = 1, defaultRatio = 1, defaultReduceFactor = 1, subdivideCount = 4, inverseFactorNumerator = 1.0, rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, empty = 0, quarter = 0.25, threeQuarter = half + quarter, minVelocity = 0, defaultTransformValue = 1, minimumSize = 0, minimumLength = 0, zIndexFactorOffset = 1, defaultOpacity = 1, clickRadius = 1, touchEndLengthOffset = 1, minCoordinate = 0, removeDeleteCount = 1, removeMinIndex = 0, defaultFpsLimit = 120, minFpsLimit = 0, canvasFirstIndex = 0, loadRandomFactor = 10000, loadMinIndex = 0, one = 1, none = 0, decayOffset = 1, tryCountIncrement = 1, minRetries = 0, minZ = 0, defaultRadius = 0, posOffset = -quarter, sizeFactor = 1.5, minLimit = 0, countOffset = 1, minCount = 0, minIndex = 0, lengthOffset = 1, defaultDensityFactor = 1, deleteCount = 1, touchDelay = 500, manualDefaultPosition = 50, defaultAngle = 0, identity = 1, minStrokeWidth = 0, lFactor = 1, lMin = 0, triple = 3, sextuple = 6, sNormalizedOffset = 1, phaseNumerator = 1, defaultRgbMin = 0, defaultVelocity = 0, defaultLoops = 0, defaultTime = 0;
+}, randomColorValue = "random", midColorValue = "mid", double = 2, doublePI = Math.PI * double, defaultFps = 60, defaultAlpha = 1, generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", defaultRetryCount = 0, squareExp = 2, spatialHashGridCellSize = 100, defaultRemoveQuantity = 1, defaultRatio = 1, defaultReduceFactor = 1, inverseFactorNumerator = 1, rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, empty = 0, quarter = 0.25, threeQuarter = half + quarter, minVelocity = 0, defaultTransformValue = 1, minimumSize = 0, zIndexFactorOffset = 1, defaultOpacity = 1, removeDeleteCount = 1, removeMinIndex = 0, defaultFpsLimit = 120, minFpsLimit = 0, canvasFirstIndex = 0, loadRandomFactor = 10000, loadMinIndex = 0, one = 1, none = 0, decayOffset = 1, tryCountIncrement = 1, minZ = 0, minLimit = 0, countOffset = 1, minCount = 0, minIndex = 0, lengthOffset = 1, defaultDensityFactor = 1, deleteCount = 1, defaultAngle = 0, identity = 1, minStrokeWidth = 0, lFactor = 1, lMin = 0, triple = 3, sextuple = 6, sNormalizedOffset = 1, phaseNumerator = 1, defaultRgbMin = 0, defaultVelocity = 0, defaultLoops = 0, defaultTime = 0, defaultZoom = 1;

package/cjs/Core/Utils/EventListeners.js

@@ -1,71 +1,12 @@
 import { manageListener, safeDocument } from "../../Utils/Utils.js";
 import { millisecondsToSeconds, resizeEvent, visibilityChangeEvent } from "./Constants.js";
 export class EventListeners {
+    container;
+    _handlers;
+    _resizeObserver;
+    _resizeTimeout;
     constructor(container) {
         this.container = container;
-        this._handleVisibilityChange = () => {
-            const container = this.container, options = container.actualOptions;
-            if (!options.pauseOnBlur) {
-                return;
-            }
-            if (safeDocument().hidden) {
-                container.pageHidden = true;
-                container.pause();
-            }
-            else {
-                container.pageHidden = false;
-                if (container.animationStatus) {
-                    container.play(true);
-                }
-                else {
-                    container.draw(true);
-                }
-            }
-        };
-        this._handleWindowResize = () => {
-            if (this._resizeTimeout) {
-                clearTimeout(this._resizeTimeout);
-                delete this._resizeTimeout;
-            }
-            const handleResize = async () => {
-                const canvas = this.container.canvas;
-                await canvas.windowResize();
-            };
-            this._resizeTimeout = setTimeout(() => void handleResize(), this.container.actualOptions.resize.delay * millisecondsToSeconds);
-        };
-        this._manageListeners = add => {
-            const handlers = this._handlers;
-            this._manageResize(add);
-            manageListener(document, visibilityChangeEvent, handlers.visibilityChange, add, false);
-        };
-        this._manageResize = add => {
-            const handlers = this._handlers, container = this.container, options = container.actualOptions;
-            if (!options.resize.enable) {
-                return;
-            }
-            if (typeof ResizeObserver === "undefined") {
-                manageListener(globalThis, resizeEvent, handlers.resize, add);
-                return;
-            }
-            const canvasEl = container.canvas.element;
-            if (this._resizeObserver && !add) {
-                if (canvasEl) {
-                    this._resizeObserver.unobserve(canvasEl);
-                }
-                this._resizeObserver.disconnect();
-                delete this._resizeObserver;
-            }
-            else if (!this._resizeObserver && add && canvasEl) {
-                this._resizeObserver = new ResizeObserver((entries) => {
-                    const entry = entries.find(e => e.target === canvasEl);
-                    if (!entry) {
-                        return;
-                    }
-                    this._handleWindowResize();
-                });
-                this._resizeObserver.observe(canvasEl);
-            }
-        };
         this._handlers = {
             visibilityChange: () => {
                 this._handleVisibilityChange();
@@ -81,4 +22,67 @@ export class EventListeners {
     removeListeners() {
         this._manageListeners(false);
     }
+    _handleVisibilityChange = () => {
+        const container = this.container, options = container.actualOptions;
+        if (!options.pauseOnBlur) {
+            return;
+        }
+        if (safeDocument().hidden) {
+            container.pageHidden = true;
+            container.pause();
+        }
+        else {
+            container.pageHidden = false;
+            if (container.animationStatus) {
+                container.play(true);
+            }
+            else {
+                container.draw(true);
+            }
+        }
+    };
+    _handleWindowResize = () => {
+        if (this._resizeTimeout) {
+            clearTimeout(this._resizeTimeout);
+            delete this._resizeTimeout;
+        }
+        const handleResize = async () => {
+            const canvas = this.container.canvas;
+            await canvas.windowResize();
+        };
+        this._resizeTimeout = setTimeout(() => void handleResize(), this.container.actualOptions.resize.delay * millisecondsToSeconds);
+    };
+    _manageListeners = add => {
+        const handlers = this._handlers;
+        this._manageResize(add);
+        manageListener(document, visibilityChangeEvent, handlers.visibilityChange, add, false);
+    };
+    _manageResize = add => {
+        const handlers = this._handlers, container = this.container, options = container.actualOptions;
+        if (!options.resize.enable) {
+            return;
+        }
+        if (typeof ResizeObserver === "undefined") {
+            manageListener(globalThis, resizeEvent, handlers.resize, add);
+            return;
+        }
+        const canvasEl = container.canvas.element;
+        if (this._resizeObserver && !add) {
+            if (canvasEl) {
+                this._resizeObserver.unobserve(canvasEl);
+            }
+            this._resizeObserver.disconnect();
+            delete this._resizeObserver;
+        }
+        else if (!this._resizeObserver && add && canvasEl) {
+            this._resizeObserver = new ResizeObserver((entries) => {
+                const entry = entries.find(e => e.target === canvasEl);
+                if (!entry) {
+                    return;
+                }
+                this._handleWindowResize();
+            });
+            this._resizeObserver.observe(canvasEl);
+        }
+    };
 }

package/cjs/Core/Utils/Ranges.js

@@ -1,7 +1,9 @@
 import { RangeType } from "../../Enums/RangeType.js";
-import { getDistance } from "../../Utils/MathUtils.js";
+import { checkDistance } from "../../Utils/MathUtils.js";
 import { squareExp } from "./Constants.js";
 export class BaseRange {
+    position;
+    type;
     constructor(x, y, type) {
         this.position = {
             x: x,
@@ -9,32 +11,40 @@ export class BaseRange {
         };
         this.type = type;
     }
+    _resetPosition(x, y) {
+        this.position.x = x;
+        this.position.y = y;
+    }
 }
 export class Circle extends BaseRange {
+    radius;
     constructor(x, y, radius) {
         super(x, y, RangeType.circle);
         this.radius = radius;
     }
     contains(point) {
-        return getDistance(point, this.position) <= this.radius;
+        return checkDistance(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;
+        const pos1 = this.position, pos2 = range.position, r = this.radius, dx = Math.abs(pos2.x - pos1.x), dy = Math.abs(pos2.y - pos1.y);
         if (range instanceof Circle || range.type === RangeType.circle) {
-            const circleRange = range, rSum = r + circleRange.radius, dist = Math.sqrt(distPos.x ** squareExp + distPos.y ** squareExp);
+            const circleRange = range, rSum = r + circleRange.radius, dist = Math.hypot(dx, dy);
             return rSum > dist;
         }
         else if (range instanceof Rectangle || range.type === RangeType.rectangle) {
-            const rectRange = range, { width, height } = rectRange.size, edges = Math.pow(distPos.x - width, squareExp) + Math.pow(distPos.y - height, squareExp);
-            return (edges <= r ** squareExp ||
-                (distPos.x <= r + width && distPos.y <= r + height) ||
-                distPos.x <= width ||
-                distPos.y <= height);
+            const rectRange = range, { width, height } = rectRange.size, edges = Math.pow(dx - width, squareExp) + Math.pow(dy - height, squareExp);
+            return edges <= r ** squareExp || (dx <= r + width && dy <= r + height) || dx <= width || dy <= height;
         }
         return false;
     }
+    reset(x, y, radius) {
+        this._resetPosition(x, y);
+        this.radius = radius;
+        return this;
+    }
 }
 export class Rectangle extends BaseRange {
+    size;
     constructor(x, y, width, height) {
         super(x, y, RangeType.rectangle);
         this.size = {
@@ -50,7 +60,16 @@ export class Rectangle extends BaseRange {
         if (range instanceof Circle) {
             return range.intersects(this);
         }
-        const w = this.size.width, h = this.size.height, pos1 = this.position, pos2 = range.position, size2 = range instanceof Rectangle ? range.size : { width: 0, height: 0 }, w2 = size2.width, h2 = size2.height;
+        if (!(range instanceof Rectangle)) {
+            return false;
+        }
+        const w = this.size.width, h = this.size.height, pos1 = this.position, pos2 = range.position, size2 = range.size, w2 = size2.width, h2 = size2.height;
         return pos2.x < pos1.x + w && pos2.x + w2 > pos1.x && pos2.y < pos1.y + h && pos2.y + h2 > pos1.y;
     }
+    reset(x, y, width, height) {
+        this._resetPosition(x, y);
+        this.size.width = width;
+        this.size.height = height;
+        return this;
+    }
 }