@tsparticles/engine 3.0.0-alpha.0 → 3.0.0-beta.0

package/cjs/Options/Classes/Particles/Move/OutModes.js

@@ -6,17 +6,16 @@ class OutModes {
         this.default = "out";
     }
     load(data) {
-        var _a, _b, _c, _d;
         if (!data) {
             return;
         }
         if (data.default !== undefined) {
             this.default = data.default;
         }
-        this.bottom = (_a = data.bottom) !== null && _a !== void 0 ? _a : data.default;
-        this.left = (_b = data.left) !== null && _b !== void 0 ? _b : data.default;
-        this.right = (_c = data.right) !== null && _c !== void 0 ? _c : data.default;
-        this.top = (_d = data.top) !== null && _d !== void 0 ? _d : data.default;
+        this.bottom = data.bottom ?? data.default;
+        this.left = data.left ?? data.default;
+        this.right = data.right ?? data.default;
+        this.top = data.top ?? data.default;
     }
 }
 exports.OutModes = OutModes;

package/cjs/Options/Classes/Particles/Move/Spin.js

@@ -18,7 +18,9 @@ class Spin {
         if (data.enable !== undefined) {
             this.enable = data.enable;
         }
-        this.position = data.position ? (0, Utils_1.deepExtend)({}, data.position) : undefined;
+        if (data.position) {
+            this.position = (0, Utils_1.deepExtend)({}, data.position);
+        }
     }
 }
 exports.Spin = Spin;

package/cjs/Options/Classes/Particles/Number/ParticlesDensity.js

@@ -7,37 +7,18 @@ class ParticlesDensity {
         this.width = 1920;
         this.height = 1080;
     }
-    get area() {
-        return this.width;
-    }
-    set area(value) {
-        this.width = value;
-    }
-    get factor() {
-        return this.height;
-    }
-    set factor(value) {
-        this.height = value;
-    }
-    get value_area() {
-        return this.area;
-    }
-    set value_area(value) {
-        this.area = value;
-    }
     load(data) {
-        var _a, _b, _c;
         if (!data) {
             return;
         }
         if (data.enable !== undefined) {
             this.enable = data.enable;
         }
-        const width = (_b = (_a = data.width) !== null && _a !== void 0 ? _a : data.area) !== null && _b !== void 0 ? _b : data.value_area;
+        const width = data.width;
         if (width !== undefined) {
             this.width = width;
         }
-        const height = (_c = data.height) !== null && _c !== void 0 ? _c : data.factor;
+        const height = data.height;
         if (height !== undefined) {
             this.height = height;
         }

package/cjs/Options/Classes/Particles/Number/ParticlesNumber.js

@@ -6,21 +6,14 @@ class ParticlesNumber {
     constructor() {
         this.density = new ParticlesDensity_1.ParticlesDensity();
         this.limit = 0;
-        this.value = 100;
-    }
-    get max() {
-        return this.limit;
-    }
-    set max(value) {
-        this.limit = value;
+        this.value = 0;
     }
     load(data) {
-        var _a;
         if (!data) {
             return;
         }
         this.density.load(data.density);
-        const limit = (_a = data.limit) !== null && _a !== void 0 ? _a : data.max;
+        const limit = data.limit;
         if (limit !== undefined) {
             this.limit = limit;
         }

package/cjs/Options/Classes/Particles/Opacity/Opacity.js

@@ -3,18 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Opacity = void 0;
 const OpacityAnimation_1 = require("./OpacityAnimation");
 const ValueWithRandom_1 = require("../../ValueWithRandom");
-class Opacity extends ValueWithRandom_1.RangedAnimationValueWithRandom {
+class Opacity extends ValueWithRandom_1.ValueWithRandom {
     constructor() {
         super();
         this.animation = new OpacityAnimation_1.OpacityAnimation();
         this.random.minimumValue = 0.1;
         this.value = 1;
     }
-    get anim() {
-        return this.animation;
-    }
-    set anim(value) {
-        this.animation = value;
+    load(data) {
+        if (!data) {
+            return;
+        }
+        super.load(data);
+        const animation = data.animation;
+        if (animation !== undefined) {
+            this.animation.load(animation);
+        }
     }
 }
 exports.Opacity = Opacity;

package/cjs/Options/Classes/Particles/Opacity/OpacityAnimation.js

@@ -8,16 +8,7 @@ class OpacityAnimation extends AnimationOptions_1.RangedAnimationOptions {
         this.destroy = "none";
         this.speed = 2;
     }
-    get opacity_min() {
-        return this.minimumValue;
-    }
-    set opacity_min(value) {
-        this.minimumValue = value;
-    }
     load(data) {
-        if ((data === null || data === void 0 ? void 0 : data.opacity_min) !== undefined && data.minimumValue === undefined) {
-            data.minimumValue = data.opacity_min;
-        }
         super.load(data);
         if (!data) {
             return;

package/cjs/Options/Classes/Particles/ParticlesOptions.js

@@ -33,7 +33,6 @@ class ParticlesOptions {
         this.zIndex = new ZIndex_1.ZIndex();
     }
     load(data) {
-        var _a, _b, _c, _d;
         if (!data) {
             return;
         }
@@ -43,7 +42,7 @@ class ParticlesOptions {
             for (const group in data.groups) {
                 const item = data.groups[group];
                 if (item !== undefined) {
-                    this.groups[group] = (0, Utils_1.deepExtend)((_a = this.groups[group]) !== null && _a !== void 0 ? _a : {}, item);
+                    this.groups[group] = (0, Utils_1.deepExtend)(this.groups[group] ?? {}, item);
                 }
             }
         }
@@ -57,24 +56,20 @@ class ParticlesOptions {
         this.size.load(data.size);
         this.shadow.load(data.shadow);
         this.zIndex.load(data.zIndex);
-        const collisions = (_c = (_b = data.move) === null || _b === void 0 ? void 0 : _b.collisions) !== null && _c !== void 0 ? _c : (_d = data.move) === null || _d === void 0 ? void 0 : _d.bounce;
-        if (collisions !== undefined) {
-            this.collisions.enable = collisions;
-        }
         this.collisions.load(data.collisions);
         if (data.interactivity !== undefined) {
             this.interactivity = (0, Utils_1.deepExtend)({}, data.interactivity);
         }
-        const stroke = data.stroke;
-        if (stroke) {
-            this.stroke = (0, Utils_1.executeOnSingleOrMultiple)(stroke, (t) => {
+        const strokeToLoad = data.stroke;
+        if (strokeToLoad) {
+            this.stroke = (0, Utils_1.executeOnSingleOrMultiple)(strokeToLoad, (t) => {
                 const tmp = new Stroke_1.Stroke();
                 tmp.load(t);
                 return tmp;
             });
         }
         if (this._container) {
-            const updaters = this._engine.plugins.updaters.get(this._container);
+            const updaters = this._engine.updaters.get(this._container);
             if (updaters) {
                 for (const updater of updaters) {
                     if (updater.loadOptions) {
@@ -82,7 +77,7 @@ class ParticlesOptions {
                     }
                 }
             }
-            const interactors = this._engine.plugins.interactors.get(this._container);
+            const interactors = this._engine.interactors.get(this._container);
             if (interactors) {
                 for (const interactor of interactors) {
                     if (interactor.loadParticlesOptions) {

package/cjs/Options/Classes/Particles/Shape/Shape.js

@@ -4,11 +4,12 @@ exports.Shape = void 0;
 const Utils_1 = require("../../../../Utils/Utils");
 class Shape {
     constructor() {
+        this.close = true;
+        this.fill = true;
         this.options = {};
         this.type = "circle";
     }
     load(data) {
-        var _a;
         if (!data) {
             return;
         }
@@ -17,10 +18,16 @@ class Shape {
             for (const shape in options) {
                 const item = options[shape];
                 if (item) {
-                    this.options[shape] = (0, Utils_1.deepExtend)((_a = this.options[shape]) !== null && _a !== void 0 ? _a : {}, item);
+                    this.options[shape] = (0, Utils_1.deepExtend)(this.options[shape] ?? {}, item);
                 }
             }
         }
+        if (data.close !== undefined) {
+            this.close = data.close;
+        }
+        if (data.fill !== undefined) {
+            this.fill = data.fill;
+        }
         if (data.type !== undefined) {
             this.type = data.type;
         }

package/cjs/Options/Classes/Particles/Size/Size.js

@@ -1,20 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Size = void 0;
-const ValueWithRandom_1 = require("../../ValueWithRandom");
 const SizeAnimation_1 = require("./SizeAnimation");
-class Size extends ValueWithRandom_1.RangedAnimationValueWithRandom {
+const ValueWithRandom_1 = require("../../ValueWithRandom");
+class Size extends ValueWithRandom_1.ValueWithRandom {
     constructor() {
         super();
         this.animation = new SizeAnimation_1.SizeAnimation();
         this.random.minimumValue = 1;
         this.value = 3;
     }
-    get anim() {
-        return this.animation;
-    }
-    set anim(value) {
-        this.animation = value;
+    load(data) {
+        super.load(data);
+        if (!data) {
+            return;
+        }
+        const animation = data.animation;
+        if (animation !== undefined) {
+            this.animation.load(animation);
+        }
     }
 }
 exports.Size = Size;

package/cjs/Options/Classes/Particles/Size/SizeAnimation.js

@@ -8,16 +8,7 @@ class SizeAnimation extends AnimationOptions_1.RangedAnimationOptions {
         this.destroy = "none";
         this.speed = 5;
     }
-    get size_min() {
-        return this.minimumValue;
-    }
-    set size_min(value) {
-        this.minimumValue = value;
-    }
     load(data) {
-        if ((data === null || data === void 0 ? void 0 : data.size_min) !== undefined && data.minimumValue === undefined) {
-            data.minimumValue = data.size_min;
-        }
         super.load(data);
         if (!data) {
             return;

package/cjs/Options/Classes/ValueWithRandom.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RangedAnimationValueWithRandom = exports.AnimationValueWithRandom = exports.ValueWithRandom = void 0;
 const AnimationOptions_1 = require("./AnimationOptions");
 const Random_1 = require("./Random");
-const AnimationOptions_2 = require("./AnimationOptions");
+const Utils_1 = require("../../Utils/Utils");
 const NumberUtils_1 = require("../../Utils/NumberUtils");
 class ValueWithRandom {
     constructor() {
@@ -14,7 +14,7 @@ class ValueWithRandom {
         if (!data) {
             return;
         }
-        if (typeof data.random === "boolean") {
+        if ((0, Utils_1.isBoolean)(data.random)) {
             this.random.enable = data.random;
         }
         else {
@@ -31,19 +31,12 @@ class AnimationValueWithRandom extends ValueWithRandom {
         super();
         this.animation = new AnimationOptions_1.AnimationOptions();
     }
-    get anim() {
-        return this.animation;
-    }
-    set anim(value) {
-        this.animation = value;
-    }
     load(data) {
-        var _a;
         super.load(data);
         if (!data) {
             return;
         }
-        const animation = (_a = data.animation) !== null && _a !== void 0 ? _a : data.anim;
+        const animation = data.animation;
         if (animation !== undefined) {
             this.animation.load(animation);
         }
@@ -53,16 +46,10 @@ exports.AnimationValueWithRandom = AnimationValueWithRandom;
 class RangedAnimationValueWithRandom extends AnimationValueWithRandom {
     constructor() {
         super();
-        this.animation = new AnimationOptions_2.RangedAnimationOptions();
+        this.animation = new AnimationOptions_1.RangedAnimationOptions();
     }
     load(data) {
         super.load(data);
-        if (!data) {
-            return;
-        }
-        if (data.animation !== undefined) {
-            this.value = (0, NumberUtils_1.setRangeValue)(this.value, this.animation.enable ? this.animation.minimumValue : undefined);
-        }
     }
 }
 exports.RangedAnimationValueWithRandom = RangedAnimationValueWithRandom;

package/cjs/Utils/CanvasUtils.js

@@ -1,57 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.alterHsl = exports.drawParticlePlugin = exports.drawPlugin = exports.drawShapeAfterEffect = exports.drawShape = exports.drawParticle = exports.clear = exports.drawTriangle = exports.drawLine = exports.paintCanvas = exports.clearCanvas = exports.getContext = void 0;
+exports.alterHsl = exports.drawParticlePlugin = exports.drawPlugin = exports.drawShapeAfterEffect = exports.drawShape = exports.drawParticle = exports.clear = exports.paintImage = exports.paintBase = exports.drawTriangle = exports.drawLine = void 0;
 const ColorUtils_1 = require("./ColorUtils");
-function paintBase(context, dimension, baseColor) {
-    context.fillStyle = baseColor !== null && baseColor !== void 0 ? baseColor : "rgba(0,0,0,0)";
-    context.fillRect(0, 0, dimension.width, dimension.height);
-}
-function paintImage(context, dimension, image, opacity) {
-    if (!image) {
-        return;
-    }
-    context.globalAlpha = opacity;
-    context.drawImage(image, 0, 0, dimension.width, dimension.height);
-    context.globalAlpha = 1;
-}
-function getContext(canvas) {
-    const context = canvas.getContext("2d");
-    if (!context) {
-        throw new Error("Error tsParticles - No canvas context found");
-    }
-    return context;
-}
-exports.getContext = getContext;
-function clearCanvas(context, size, options, trailFill, coverColorStyle) {
-    if (options.backgroundMask.enable) {
-        paintCanvas(context, size, options, coverColorStyle);
-    }
-    else {
-        const trail = options.particles.move.trail;
-        if (trail.enable && trail.length > 0 && trailFill) {
-            if (trailFill.color) {
-                paintBase(context, size, (0, ColorUtils_1.getStyleFromRgb)(trailFill.color, trailFill.opacity));
-            }
-            else if (trailFill.image) {
-                paintImage(context, size, trailFill.image, trailFill.opacity);
-            }
-        }
-        else {
-            clear(context, size);
-        }
-    }
-}
-exports.clearCanvas = clearCanvas;
-function paintCanvas(context, size, options, coverColorStyle) {
-    if (options.backgroundMask.enable && coverColorStyle) {
-        clear(context, size);
-        paintBase(context, size, coverColorStyle);
-    }
-    else {
-        paintBase(context, size);
-    }
-}
-exports.paintCanvas = paintCanvas;
 function drawLine(context, begin, end) {
     context.beginPath();
     context.moveTo(begin.x, begin.y);
@@ -67,21 +17,34 @@ function drawTriangle(context, p1, p2, p3) {
     context.closePath();
 }
 exports.drawTriangle = drawTriangle;
+function paintBase(context, dimension, baseColor) {
+    context.fillStyle = baseColor ?? "rgba(0,0,0,0)";
+    context.fillRect(0, 0, dimension.width, dimension.height);
+}
+exports.paintBase = paintBase;
+function paintImage(context, dimension, image, opacity) {
+    if (!image) {
+        return;
+    }
+    context.globalAlpha = opacity;
+    context.drawImage(image, 0, 0, dimension.width, dimension.height);
+    context.globalAlpha = 1;
+}
+exports.paintImage = paintImage;
 function clear(context, dimension) {
     context.clearRect(0, 0, dimension.width, dimension.height);
 }
 exports.clear = clear;
 function drawParticle(data) {
-    var _a, _b, _c, _d, _e;
     const { container, context, particle, delta, colorStyles, backgroundMask, composite, radius, opacity, shadow, transform, } = data;
     const pos = particle.getPosition(), angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : 0), rotateData = {
         sin: Math.sin(angle),
         cos: Math.cos(angle),
     }, transformData = {
-        a: rotateData.cos * ((_a = transform.a) !== null && _a !== void 0 ? _a : 1),
-        b: rotateData.sin * ((_b = transform.b) !== null && _b !== void 0 ? _b : 1),
-        c: -rotateData.sin * ((_c = transform.c) !== null && _c !== void 0 ? _c : 1),
-        d: rotateData.cos * ((_d = transform.d) !== null && _d !== void 0 ? _d : 1),
+        a: rotateData.cos * (transform.a ?? 1),
+        b: rotateData.sin * (transform.b ?? 1),
+        c: -rotateData.sin * (transform.c ?? 1),
+        d: rotateData.cos * (transform.d ?? 1),
     };
     context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
     context.beginPath();
@@ -98,7 +61,7 @@ function drawParticle(data) {
     if (colorStyles.fill) {
         context.fillStyle = colorStyles.fill;
     }
-    const strokeWidth = (_e = particle.strokeWidth) !== null && _e !== void 0 ? _e : 0;
+    const strokeWidth = particle.strokeWidth ?? 0;
     context.lineWidth = strokeWidth;
     if (colorStyles.stroke) {
         context.strokeStyle = colorStyles.stroke;
@@ -134,7 +97,7 @@ function drawShapeAfterEffect(container, context, particle, radius, opacity, del
         return;
     }
     const drawer = container.drawers.get(particle.shape);
-    if (!(drawer === null || drawer === void 0 ? void 0 : drawer.afterEffect)) {
+    if (!drawer || !drawer.afterEffect) {
         return;
     }
     drawer.afterEffect(context, particle, radius, opacity, delta, container.retina.pixelRatio);

package/cjs/Utils/ColorUtils.js

@@ -48,11 +48,11 @@ function rangeColorToRgb(input, index, useIndex = true) {
     if (!input) {
         return;
     }
-    const color = typeof input === "string" ? { value: input } : input;
-    if (typeof color.value === "string") {
+    const color = (0, Utils_1.isString)(input) ? { value: input } : input;
+    if ((0, Utils_1.isString)(color.value)) {
         return colorToRgb(color.value, index, useIndex);
     }
-    if (color.value instanceof Array) {
+    if ((0, Utils_1.isArray)(color.value)) {
         return rangeColorToRgb({
             value: (0, Utils_1.itemFromArray)(color.value, index, useIndex),
         });
@@ -69,11 +69,11 @@ function colorToRgb(input, index, useIndex = true) {
     if (!input) {
         return;
     }
-    const color = typeof input === "string" ? { value: input } : input;
-    if (typeof color.value === "string") {
+    const color = (0, Utils_1.isString)(input) ? { value: input } : input;
+    if ((0, Utils_1.isString)(color.value)) {
         return color.value === randomColorValue ? getRandomRgbColor() : stringToRgb(color.value);
     }
-    if (color.value instanceof Array) {
+    if ((0, Utils_1.isArray)(color.value)) {
         return colorToRgb({
             value: (0, Utils_1.itemFromArray)(color.value, index, useIndex),
         });
@@ -122,8 +122,7 @@ function rgbToHsl(color) {
 }
 exports.rgbToHsl = rgbToHsl;
 function stringToAlpha(input) {
-    var _a;
-    return (_a = stringToRgba(input)) === null || _a === void 0 ? void 0 : _a.a;
+    return stringToRgba(input)?.a;
 }
 exports.stringToAlpha = stringToAlpha;
 function stringToRgb(input) {
@@ -137,9 +136,7 @@ function hslToRgb(hsl) {
         s: hsl.s / 100,
     };
     if (!hslPercent.s) {
-        result.b = hslPercent.l;
-        result.g = hslPercent.l;
-        result.r = hslPercent.l;
+        result.r = result.g = result.b = hslPercent.l;
     }
     else {
         const q = hslPercent.l < 0.5
@@ -166,7 +163,7 @@ function hslaToRgba(hsla) {
 }
 exports.hslaToRgba = hslaToRgba;
 function getRandomRgbColor(min) {
-    const fixedMin = min !== null && min !== void 0 ? min : 0;
+    const fixedMin = min ?? 0;
     return {
         b: Math.floor((0, NumberUtils_1.randomInRange)((0, NumberUtils_1.setRangeValue)(fixedMin, 256))),
         g: Math.floor((0, NumberUtils_1.randomInRange)((0, NumberUtils_1.setRangeValue)(fixedMin, 256))),
@@ -175,11 +172,11 @@ function getRandomRgbColor(min) {
 }
 exports.getRandomRgbColor = getRandomRgbColor;
 function getStyleFromRgb(color, opacity) {
-    return `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity !== null && opacity !== void 0 ? opacity : 1})`;
+    return `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity ?? 1})`;
 }
 exports.getStyleFromRgb = getStyleFromRgb;
 function getStyleFromHsl(color, opacity) {
-    return `hsla(${color.h}, ${color.s}%, ${color.l}%, ${opacity !== null && opacity !== void 0 ? opacity : 1})`;
+    return `hsla(${color.h}, ${color.s}%, ${color.l}%, ${opacity ?? 1})`;
 }
 exports.getStyleFromHsl = getStyleFromHsl;
 function colorMix(color1, color2, size1, size2) {
@@ -198,17 +195,16 @@ function colorMix(color1, color2, size1, size2) {
 }
 exports.colorMix = colorMix;
 function getLinkColor(p1, p2, linkColor) {
-    var _a, _b;
     if (linkColor === randomColorValue) {
         return getRandomRgbColor();
     }
     else if (linkColor === midColorValue) {
-        const sourceColor = (_a = p1.getFillColor()) !== null && _a !== void 0 ? _a : p1.getStrokeColor(), destColor = (_b = p2 === null || p2 === void 0 ? void 0 : p2.getFillColor()) !== null && _b !== void 0 ? _b : p2 === null || p2 === void 0 ? void 0 : p2.getStrokeColor();
+        const sourceColor = p1.getFillColor() ?? p1.getStrokeColor(), destColor = p2?.getFillColor() ?? p2?.getStrokeColor();
         if (sourceColor && destColor && p2) {
             return colorMix(sourceColor, destColor, p1.getRadius(), p2.getRadius());
         }
         else {
-            const hslColor = sourceColor !== null && sourceColor !== void 0 ? sourceColor : destColor;
+            const hslColor = sourceColor ?? destColor;
             if (hslColor) {
                 return hslToRgb(hslColor);
             }
@@ -220,7 +216,7 @@ function getLinkColor(p1, p2, linkColor) {
 }
 exports.getLinkColor = getLinkColor;
 function getLinkRandomColor(optColor, blink, consent) {
-    const color = typeof optColor === "string" ? optColor : optColor.value;
+    const color = (0, Utils_1.isString)(optColor) ? optColor : optColor.value;
     if (color === randomColorValue) {
         if (consent) {
             return rangeColorToRgb({
@@ -283,6 +279,8 @@ function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
         colorValue.status = "increasing";
         colorValue.loops = 0;
         colorValue.maxLoops = (0, NumberUtils_1.getRangeValue)(colorAnimation.count);
+        colorValue.time = 0;
+        colorValue.delayTime = (0, NumberUtils_1.getRangeValue)(colorAnimation.delay) * 1000;
         if (!colorAnimation.sync) {
             colorValue.velocity *= (0, NumberUtils_1.getRandom)();
             colorValue.value *= (0, NumberUtils_1.getRandom)();

package/cjs/Utils/EventDispatcher.js

@@ -6,16 +6,17 @@ class EventDispatcher {
         this._listeners = new Map();
     }
     addEventListener(type, listener) {
-        var _a;
         this.removeEventListener(type, listener);
-        if (!this._listeners.get(type)) {
-            this._listeners.set(type, []);
+        let arr = this._listeners.get(type);
+        if (!arr) {
+            arr = [];
+            this._listeners.set(type, arr);
         }
-        (_a = this._listeners.get(type)) === null || _a === void 0 ? void 0 : _a.push(listener);
+        arr.push(listener);
     }
     dispatchEvent(type, args) {
-        var _a;
-        (_a = this._listeners.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((handler) => handler(args));
+        const listeners = this._listeners.get(type);
+        listeners && listeners.forEach((handler) => handler(args));
     }
     hasEventListener(type) {
         return !!this._listeners.get(type);

package/cjs/Utils/HslColorManager.js

@@ -9,15 +9,13 @@ class HslColorManager {
         this.stringPrefix = "hsl";
     }
     handleColor(color) {
-        var _a;
-        const colorValue = color.value, hslColor = (_a = colorValue.hsl) !== null && _a !== void 0 ? _a : color.value;
+        const colorValue = color.value, hslColor = colorValue.hsl ?? color.value;
         if (hslColor.h !== undefined && hslColor.s !== undefined && hslColor.l !== undefined) {
             return (0, ColorUtils_1.hslToRgb)(hslColor);
         }
     }
     handleRangeColor(color) {
-        var _a;
-        const colorValue = color.value, hslColor = (_a = colorValue.hsl) !== null && _a !== void 0 ? _a : color.value;
+        const colorValue = color.value, hslColor = colorValue.hsl ?? color.value;
         if (hslColor.h !== undefined && hslColor.l !== undefined) {
             return (0, ColorUtils_1.hslToRgb)({
                 h: (0, NumberUtils_1.getRangeValue)(hslColor.h),