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

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/PluginManager.js

@@ -0,0 +1,145 @@
+import { getItemMapFromInitializer, getItemsFromInitializer } from "../../Utils/Utils.js";
+import { EventType } from "../../Enums/Types/EventType.js";
+export class PluginManager {
+    colorManagers = new Map();
+    easingFunctions = new Map();
+    effectDrawers = new Map();
+    initializers = {
+        effects: new Map(),
+        shapes: new Map(),
+        updaters: new Map(),
+    };
+    palettes = new Map();
+    plugins = [];
+    presets = new Map();
+    shapeDrawers = new Map();
+    updaters = new Map();
+    _allLoadersSet = new Set();
+    _configs = new Map();
+    _engine;
+    _executedSet = new Set();
+    _initialized = false;
+    _isRunningLoaders = false;
+    _loadPromises = new Set();
+    constructor(engine) {
+        this._engine = engine;
+    }
+    get configs() {
+        const res = {};
+        for (const [name, config] of this._configs) {
+            res[name] = config;
+        }
+        return res;
+    }
+    addColorManager(name, manager) {
+        this.colorManagers.set(name, manager);
+    }
+    addConfig(config) {
+        const key = config.key ?? config.name ?? "default";
+        this._configs.set(key, config);
+        this._engine.dispatchEvent(EventType.configAdded, { data: { name: key, config } });
+    }
+    addEasing(name, easing) {
+        if (this.easingFunctions.get(name)) {
+            return;
+        }
+        this.easingFunctions.set(name, easing);
+    }
+    addEffect(effect, drawer) {
+        this.initializers.effects.set(effect, drawer);
+    }
+    addPalette(name, palette) {
+        this.palettes.set(name, palette);
+    }
+    addParticleUpdater(name, updaterInitializer) {
+        this.initializers.updaters.set(name, updaterInitializer);
+    }
+    addPlugin(plugin) {
+        if (this.getPlugin(plugin.id)) {
+            return;
+        }
+        this.plugins.push(plugin);
+    }
+    addPreset(preset, options, override = false) {
+        if (!(override || !this.getPreset(preset))) {
+            return;
+        }
+        this.presets.set(preset, options);
+    }
+    addShape(shapes, drawer) {
+        for (const shape of shapes) {
+            this.initializers.shapes.set(shape, drawer);
+        }
+    }
+    clearPlugins(container) {
+        this.effectDrawers.delete(container);
+        this.shapeDrawers.delete(container);
+        this.updaters.delete(container);
+    }
+    getEasing(name) {
+        return this.easingFunctions.get(name) ?? ((value) => value);
+    }
+    getEffectDrawers(container, force = false) {
+        return getItemMapFromInitializer(container, this.effectDrawers, this.initializers.effects, force);
+    }
+    getPalette(name) {
+        return this.palettes.get(name);
+    }
+    getPlugin(plugin) {
+        return this.plugins.find(t => t.id === plugin);
+    }
+    getPreset(preset) {
+        return this.presets.get(preset);
+    }
+    async getShapeDrawers(container, force = false) {
+        return getItemMapFromInitializer(container, this.shapeDrawers, this.initializers.shapes, force);
+    }
+    async getUpdaters(container, force = false) {
+        return getItemsFromInitializer(container, this.updaters, this.initializers.updaters, force);
+    }
+    async init() {
+        if (this._initialized || this._isRunningLoaders) {
+            return;
+        }
+        this._isRunningLoaders = true;
+        this._executedSet = new Set();
+        this._allLoadersSet = new Set(this._loadPromises);
+        try {
+            for (const loader of this._allLoadersSet) {
+                await this._runLoader(loader, this._executedSet, this._allLoadersSet);
+            }
+        }
+        finally {
+            this._loadPromises.clear();
+            this._isRunningLoaders = false;
+            this._initialized = true;
+        }
+    }
+    loadParticlesOptions(container, options, ...sourceOptions) {
+        const updaters = this.updaters.get(container);
+        if (!updaters) {
+            return;
+        }
+        updaters.forEach(updater => updater.loadOptions?.(options, ...sourceOptions));
+    }
+    async register(...loaders) {
+        if (this._initialized) {
+            throw new Error("Register plugins can only be done before calling tsParticles.load()");
+        }
+        for (const loader of loaders) {
+            if (this._isRunningLoaders) {
+                await this._runLoader(loader, this._executedSet, this._allLoadersSet);
+            }
+            else {
+                this._loadPromises.add(loader);
+            }
+        }
+    }
+    async _runLoader(loader, executed, allLoaders) {
+        if (executed.has(loader))
+            return;
+        executed.add(loader);
+        allLoaders.add(loader);
+        await loader(this._engine);
+    }
+}

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;
+    }
 }

package/cjs/Core/Utils/SpatialHashGrid.js

@@ -0,0 +1,102 @@
+import { Circle, Rectangle } from "./Ranges.js";
+export class SpatialHashGrid {
+    _cellSize;
+    _cells = new Map();
+    _circlePool = [];
+    _circlePoolIdx;
+    _pendingCellSize;
+    _rectanglePool = [];
+    _rectanglePoolIdx;
+    constructor(cellSize) {
+        this._cellSize = cellSize;
+        this._circlePoolIdx = 0;
+        this._rectanglePoolIdx = 0;
+    }
+    clear() {
+        this._cells.clear();
+        const pendingCellSize = this._pendingCellSize;
+        if (pendingCellSize) {
+            this._cellSize = pendingCellSize;
+        }
+        this._pendingCellSize = undefined;
+    }
+    insert(particle) {
+        const { x, y } = particle.getPosition(), key = this._cellKeyFromCoords(x, y);
+        if (!this._cells.has(key)) {
+            this._cells.set(key, []);
+        }
+        this._cells.get(key)?.push(particle);
+    }
+    query(range, check, out = []) {
+        const bounds = this._getRangeBounds(range);
+        if (!bounds) {
+            return out;
+        }
+        const minCellX = Math.floor(bounds.minX / this._cellSize), maxCellX = Math.floor(bounds.maxX / this._cellSize), minCellY = Math.floor(bounds.minY / this._cellSize), maxCellY = Math.floor(bounds.maxY / this._cellSize);
+        for (let cx = minCellX; cx <= maxCellX; cx++) {
+            for (let cy = minCellY; cy <= maxCellY; cy++) {
+                const key = `${cx}_${cy}`, cellParticles = this._cells.get(key);
+                if (!cellParticles) {
+                    continue;
+                }
+                for (const p of cellParticles) {
+                    if (check && !check(p)) {
+                        continue;
+                    }
+                    if (range.contains(p.getPosition())) {
+                        out.push(p);
+                    }
+                }
+            }
+        }
+        return out;
+    }
+    queryCircle(position, radius, check, out = []) {
+        const circle = this._acquireCircle(position.x, position.y, radius), result = this.query(circle, check, out);
+        this._releaseShapes();
+        return result;
+    }
+    queryRectangle(position, size, check, out = []) {
+        const rect = this._acquireRectangle(position.x, position.y, size.width, size.height), result = this.query(rect, check, out);
+        this._releaseShapes();
+        return result;
+    }
+    setCellSize(cellSize) {
+        this._pendingCellSize = cellSize;
+    }
+    _acquireCircle(x, y, r) {
+        return (this._circlePool[this._circlePoolIdx++] ??= new Circle(x, y, r)).reset(x, y, r);
+    }
+    _acquireRectangle(x, y, w, h) {
+        return (this._rectanglePool[this._rectanglePoolIdx++] ??= new Rectangle(x, y, w, h)).reset(x, y, w, h);
+    }
+    _cellKeyFromCoords(x, y) {
+        const cellX = Math.floor(x / this._cellSize), cellY = Math.floor(y / this._cellSize);
+        return `${cellX}_${cellY}`;
+    }
+    _getRangeBounds(range) {
+        if (range instanceof Circle) {
+            const r = range.radius, { x, y } = range.position;
+            return {
+                minX: x - r,
+                maxX: x + r,
+                minY: y - r,
+                maxY: y + r,
+            };
+        }
+        if (range instanceof Rectangle) {
+            const { x, y } = range.position, { width, height } = range.size;
+            return {
+                minX: x,
+                maxX: x + width,
+                minY: y,
+                maxY: y + height,
+            };
+        }
+        return null;
+    }
+    _releaseShapes() {
+        this._circlePoolIdx = 0;
+        this._rectanglePoolIdx = 0;
+    }
+}

package/cjs/Core/Utils/Vectors.js

@@ -1,10 +1,12 @@
 import { inverseFactorNumerator, none, originPoint, squareExp } from "./Constants.js";
+function getZ(source) {
+    return "z" in source ? source.z : originPoint.z;
+}
 export class Vector3d {
+    x;
+    y;
+    z;
     constructor(x = originPoint.x, y = originPoint.y, z = originPoint.z) {
-        this._updateFromAngle = (angle, length) => {
-            this.x = Math.cos(angle) * length;
-            this.y = Math.sin(angle) * length;
-        };
         this.x = x;
         this.y = y;
         this.z = z;
@@ -25,31 +27,25 @@ export class Vector3d {
         this._updateFromAngle(this.angle, length);
     }
     static clone(source) {
-        return Vector3d.create(source.x, source.y, source.z);
+        return Vector3d.create(source.x, source.y, getZ(source));
     }
     static create(x, y, z) {
         if (typeof x === "number") {
             return new Vector3d(x, y ?? originPoint.y, z ?? originPoint.z);
         }
-        return new Vector3d(x.x, x.y, Object.hasOwn(x, "z") ? x.z : originPoint.z);
+        return new Vector3d(x.x, x.y, getZ(x));
     }
     add(v) {
-        return Vector3d.create(this.x + v.x, this.y + v.y, this.z + v.z);
+        return Vector3d.create(this.x + v.x, this.y + v.y, this.z + getZ(v));
     }
     addTo(v) {
         this.x += v.x;
         this.y += v.y;
-        this.z += v.z;
+        this.z += getZ(v);
     }
     copy() {
         return Vector3d.clone(this);
     }
-    distanceTo(v) {
-        return this.sub(v).length;
-    }
-    distanceToSq(v) {
-        return this.sub(v).getLengthSq();
-    }
     div(n) {
         return Vector3d.create(this.x / n, this.y / n, this.z / n);
     }
@@ -81,16 +77,19 @@ export class Vector3d {
     setTo(c) {
         this.x = c.x;
         this.y = c.y;
-        const v3d = c;
-        this.z = v3d.z ? v3d.z : originPoint.z;
+        this.z = getZ(c);
     }
     sub(v) {
-        return Vector3d.create(this.x - v.x, this.y - v.y, this.z - v.z);
+        return Vector3d.create(this.x - v.x, this.y - v.y, this.z - getZ(v));
     }
     subFrom(v) {
         this.x -= v.x;
         this.y -= v.y;
-        this.z -= v.z;
+        this.z -= getZ(v);
+    }
+    _updateFromAngle(angle, length) {
+        this.x = Math.cos(angle) * length;
+        this.y = Math.sin(angle) * length;
     }
 }
 export class Vector extends Vector3d {

package/cjs/Options/Classes/AnimatableColor.js

@@ -2,6 +2,7 @@ import { isArray, isNull, isString } from "../../Utils/TypeUtils.js";
 import { HslAnimation } from "./HslAnimation.js";
 import { OptionsColor } from "./OptionsColor.js";
 export class AnimatableColor extends OptionsColor {
+    animation;
     constructor() {
         super();
         this.animation = new HslAnimation();

package/cjs/Options/Classes/AnimationOptions.js

@@ -3,6 +3,12 @@ import { StartValueType } from "../../Enums/Types/StartValueType.js";
 import { isNull } from "../../Utils/TypeUtils.js";
 import { setRangeValue } from "../../Utils/MathUtils.js";
 export class AnimationOptions {
+    count;
+    decay;
+    delay;
+    enable;
+    speed;
+    sync;
     constructor() {
         this.count = 0;
         this.enable = false;
@@ -36,6 +42,8 @@ export class AnimationOptions {
     }
 }
 export class RangedAnimationOptions extends AnimationOptions {
+    mode;
+    startValue;
     constructor() {
         super();
         this.mode = AnimationMode.auto;

package/cjs/Options/Classes/Background/Background.js

@@ -1,6 +1,12 @@
 import { OptionsColor } from "../OptionsColor.js";
 import { isNull } from "../../../Utils/TypeUtils.js";
 export class Background {
+    color;
+    image;
+    opacity;
+    position;
+    repeat;
+    size;
     constructor() {
         this.color = new OptionsColor();
         this.color.value = "";

package/cjs/Options/Classes/ColorAnimation.js

@@ -2,8 +2,13 @@ import { AnimationOptions } from "./AnimationOptions.js";
 import { isNull } from "../../Utils/TypeUtils.js";
 import { setRangeValue } from "../../Utils/MathUtils.js";
 export class ColorAnimation extends AnimationOptions {
-    constructor() {
+    max;
+    min;
+    offset;
+    constructor(min, max) {
         super();
+        this.min = min;
+        this.max = max;
         this.offset = 0;
         this.sync = true;
     }
@@ -12,6 +17,12 @@ export class ColorAnimation extends AnimationOptions {
         if (isNull(data)) {
             return;
         }
+        if (data.max !== undefined) {
+            this.max = data.max;
+        }
+        if (data.min !== undefined) {
+            this.min = data.min;
+        }
         if (data.offset !== undefined) {
             this.offset = setRangeValue(data.offset);
         }

package/cjs/Options/Classes/FullScreen/FullScreen.js

@@ -1,5 +1,7 @@
 import { isNull } from "../../../Utils/TypeUtils.js";
 export class FullScreen {
+    enable;
+    zIndex;
     constructor() {
         this.enable = true;
         this.zIndex = 0;

package/cjs/Options/Classes/HslAnimation.js

@@ -1,11 +1,10 @@
+import { hMax, hMin, lMax, lMin, sMax, sMin } from "../../Core/Utils/Constants.js";
 import { ColorAnimation } from "./ColorAnimation.js";
 import { isNull } from "../../Utils/TypeUtils.js";
 export class HslAnimation {
-    constructor() {
-        this.h = new ColorAnimation();
-        this.s = new ColorAnimation();
-        this.l = new ColorAnimation();
-    }
+    h = new ColorAnimation(hMin, hMax);
+    l = new ColorAnimation(lMin, lMax);
+    s = new ColorAnimation(sMin, sMax);
     load(data) {
         if (isNull(data)) {
             return;