@tsparticles/engine 4.0.0-alpha.25 → 4.0.0-alpha.27

package/esm/Core/Particles.js

@@ -6,12 +6,9 @@ import { SpatialHashGrid } from "./Utils/SpatialHashGrid.js";
 import { getLogger } from "../Utils/LogUtils.js";
 import { loadParticlesOptions } from "../Utils/OptionsUtils.js";
 export class Particles {
-    availablePathGenerators;
     checkParticlePositionPlugins;
     effectDrawers;
     grid;
-    movers;
-    pathGenerators;
     shapeDrawers;
     updaters;
     _array;
@@ -45,9 +42,6 @@ export class Particles {
         this._maxZIndex = 0;
         this.grid = new SpatialHashGrid(spatialHashGridCellSize);
         this.effectDrawers = new Map();
-        this.movers = [];
-        this.availablePathGenerators = new Map();
-        this.pathGenerators = new Map();
         this.shapeDrawers = new Map();
         this.updaters = [];
         this.checkParticlePositionPlugins = [];
@@ -123,9 +117,6 @@ export class Particles {
         this._pool.length = 0;
         this._zArray = [];
         this.effectDrawers = new Map();
-        this.movers = [];
-        this.availablePathGenerators = new Map();
-        this.pathGenerators = new Map();
         this.shapeDrawers = new Map();
         this.updaters = [];
         this.checkParticlePositionPlugins = [];
@@ -217,14 +208,8 @@ export class Particles {
     async initPlugins() {
         const container = this._container;
         this.effectDrawers = await this._engine.getEffectDrawers(container, true);
-        this.movers = await this._engine.getMovers(container, true);
-        this.availablePathGenerators = await this._engine.getPathGenerators(container, true);
-        this.pathGenerators = new Map();
         this.shapeDrawers = await this._engine.getShapeDrawers(container, true);
         this.updaters = await this._engine.getUpdaters(container, true);
-        for (const pathGenerator of this.pathGenerators.values()) {
-            pathGenerator.init();
-        }
     }
     push(nb, position, overrideOptions, group) {
         for (let i = 0; i < nb; i++) {
@@ -281,9 +266,6 @@ export class Particles {
     update(delta) {
         const particlesToDelete = new Set();
         this.grid.clear();
-        for (const pathGenerator of this.pathGenerators.values()) {
-            pathGenerator.update();
-        }
         for (const plugin of this._updatePlugins) {
             plugin.update?.(delta);
         }
@@ -305,11 +287,6 @@ export class Particles {
                 }
                 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;

package/esm/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,

package/esm/Core/Utils/Ranges.js

@@ -1,5 +1,5 @@
 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;
@@ -19,7 +19,7 @@ export class Circle extends BaseRange {
         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;

package/esm/Core/Utils/Vectors.js

@@ -1,4 +1,7 @@
 import { inverseFactorNumerator, none, originPoint, squareExp } from "./Constants.js";
+function getZ(source) {
+    return "z" in source ? source.z : originPoint.z;
+}
 export class Vector3d {
     x;
     y;
@@ -24,21 +27,21 @@ 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);
@@ -74,15 +77,15 @@ export class Vector3d {
     setTo(c) {
         this.x = c.x;
         this.y = c.y;
-        this.z = "z" in c ? c.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;

package/esm/Options/Classes/ColorAnimation.js

@@ -2,9 +2,13 @@ import { AnimationOptions } from "./AnimationOptions.js";
 import { isNull } from "../../Utils/TypeUtils.js";
 import { setRangeValue } from "../../Utils/MathUtils.js";
 export class ColorAnimation extends AnimationOptions {
+    max;
+    min;
     offset;
-    constructor() {
+    constructor(min, max) {
         super();
+        this.min = min;
+        this.max = max;
         this.offset = 0;
         this.sync = true;
     }
@@ -13,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/esm/Options/Classes/HslAnimation.js

@@ -1,9 +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 {
-    h = new ColorAnimation();
-    l = new ColorAnimation();
-    s = new ColorAnimation();
+    h = new ColorAnimation(hMin, hMax);
+    l = new ColorAnimation(lMin, lMax);
+    s = new ColorAnimation(sMin, sMax);
     load(data) {
         if (isNull(data)) {
             return;

package/esm/Options/Classes/Options.js

@@ -18,6 +18,7 @@ export class Options {
     hdr;
     key;
     name;
+    palette;
     particles;
     pauseOnBlur;
     pauseOnOutsideViewport;
@@ -54,10 +55,15 @@ export class Options {
             return;
         }
         if (data.preset !== undefined) {
-            executeOnSingleOrMultiple(data.preset, preset => {
+            this.preset = data.preset;
+            executeOnSingleOrMultiple(this.preset, preset => {
                 this._importPreset(preset);
             });
         }
+        if (data.palette !== undefined) {
+            this.palette = data.palette;
+            this._importPalette(this.palette);
+        }
         if (data.autoPlay !== undefined) {
             this.autoPlay = data.autoPlay;
         }
@@ -114,6 +120,37 @@ export class Options {
             plugin.loadOptions(this._container, this, data);
         });
     }
+    _importPalette = palette => {
+        const paletteData = this._engine.getPalette(palette);
+        if (!paletteData) {
+            return;
+        }
+        this.load({
+            background: {
+                color: paletteData.background,
+            },
+            blend: {
+                enable: true,
+                mode: paletteData.blendMode,
+            },
+            particles: {
+                fill: {
+                    color: paletteData.fill
+                        ? {
+                            value: paletteData.colors,
+                        }
+                        : undefined,
+                    enable: paletteData.fill,
+                },
+                stroke: !paletteData.fill
+                    ? paletteData.colors.map(color => ({
+                        color: { value: color },
+                        width: 1,
+                    }))
+                    : undefined,
+            },
+        });
+    };
     _importPreset = preset => {
         this.load(this._engine.getPreset(preset));
     };

package/esm/Options/Classes/Particles/Effect/Effect.js

@@ -2,12 +2,10 @@ import { deepExtend } from "../../../../Utils/Utils.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class Effect {
     close;
-    fill;
     options;
     type;
     constructor() {
         this.close = true;
-        this.fill = true;
         this.options = {};
         this.type = [];
     }
@@ -27,9 +25,6 @@ export class Effect {
         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/esm/Options/Classes/Particles/Fill.js

@@ -0,0 +1,28 @@
+import { AnimatableColor } from "../AnimatableColor.js";
+import { isNull } from "../../../Utils/TypeUtils.js";
+import { setRangeValue } from "../../../Utils/MathUtils.js";
+export class Fill {
+    color;
+    enable;
+    opacity;
+    constructor() {
+        this.enable = true;
+        this.color = new AnimatableColor();
+        this.color.value = "#fff";
+        this.opacity = 1;
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.color !== undefined) {
+            this.color = AnimatableColor.create(this.color, data.color);
+        }
+        if (data.enable !== undefined) {
+            this.enable = data.enable;
+        }
+        if (data.opacity !== undefined) {
+            this.opacity = setRangeValue(data.opacity);
+        }
+    }
+}

package/esm/Options/Classes/Particles/Move/Move.js

@@ -1,7 +1,6 @@
 import { MoveDirection } from "../../../../Enums/Directions/MoveDirection.js";
 import { isNull, isNumber, isObject } from "../../../../Utils/TypeUtils.js";
 import { MoveAngle } from "./MoveAngle.js";
-import { MoveAttract } from "./MoveAttract.js";
 import { MoveCenter } from "./MoveCenter.js";
 import { MoveGravity } from "./MoveGravity.js";
 import { MovePath } from "./Path/MovePath.js";
@@ -10,7 +9,6 @@ import { Spin } from "./Spin.js";
 import { setRangeValue } from "../../../../Utils/MathUtils.js";
 export class Move {
     angle;
-    attract;
     center;
     decay;
     direction;
@@ -29,7 +27,6 @@ export class Move {
     warp;
     constructor() {
         this.angle = new MoveAngle();
-        this.attract = new MoveAttract();
         this.center = new MoveCenter();
         this.decay = 0;
         this.distance = {};
@@ -52,7 +49,6 @@ export class Move {
             return;
         }
         this.angle.load(isNumber(data.angle) ? { value: data.angle } : data.angle);
-        this.attract.load(data.attract);
         this.center.load(data.center);
         if (data.decay !== undefined) {
             this.decay = setRangeValue(data.decay);

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

@@ -1,6 +1,6 @@
 import { deepExtend, executeOnSingleOrMultiple } from "../../../Utils/Utils.js";
-import { AnimatableColor } from "../AnimatableColor.js";
 import { Effect } from "./Effect/Effect.js";
+import { Fill } from "./Fill.js";
 import { Move } from "./Move/Move.js";
 import { Opacity } from "./Opacity/Opacity.js";
 import { ParticlesBounce } from "./Bounce/ParticlesBounce.js";
@@ -12,8 +12,8 @@ import { ZIndex } from "./ZIndex/ZIndex.js";
 import { isNull } from "../../../Utils/TypeUtils.js";
 export class ParticlesOptions {
     bounce;
-    color;
     effect;
+    fill;
     groups;
     move;
     number;
@@ -29,9 +29,8 @@ export class ParticlesOptions {
         this._engine = engine;
         this._container = container;
         this.bounce = new ParticlesBounce();
-        this.color = new AnimatableColor();
-        this.color.value = "#fff";
         this.effect = new Effect();
+        this.fill = new Fill();
         this.groups = {};
         this.move = new Move();
         this.number = new ParticlesNumber();
@@ -48,7 +47,7 @@ export class ParticlesOptions {
         }
         if (data.groups !== undefined) {
             for (const group of Object.keys(data.groups)) {
-                if (!Object.hasOwn(data.groups, group)) {
+                if (!(group in data.groups)) {
                     continue;
                 }
                 const item = data.groups[group];
@@ -61,7 +60,6 @@ export class ParticlesOptions {
             this.reduceDuplicates = data.reduceDuplicates;
         }
         this.bounce.load(data.bounce);
-        this.color.load(AnimatableColor.create(this.color, data.color));
         this.effect.load(data.effect);
         this.move.load(data.move);
         this.number.load(data.number);
@@ -69,6 +67,14 @@ export class ParticlesOptions {
         this.shape.load(data.shape);
         this.size.load(data.size);
         this.zIndex.load(data.zIndex);
+        const fillToLoad = data.fill;
+        if (fillToLoad) {
+            this.fill = executeOnSingleOrMultiple(fillToLoad, t => {
+                const tmp = new Fill();
+                tmp.load(t);
+                return tmp;
+            });
+        }
         const strokeToLoad = data.stroke;
         if (strokeToLoad) {
             this.stroke = executeOnSingleOrMultiple(strokeToLoad, t => {

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

@@ -2,12 +2,10 @@ import { deepExtend } from "../../../../Utils/Utils.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class Shape {
     close;
-    fill;
     options;
     type;
     constructor() {
         this.close = true;
-        this.fill = true;
         this.options = {};
         this.type = "circle";
     }
@@ -27,9 +25,6 @@ export class Shape {
         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/esm/Utils/CanvasUtils.js

@@ -7,15 +7,16 @@ export function paintImage(context, dimension, image, opacity) {
     if (!image) {
         return;
     }
+    const prevAlpha = context.globalAlpha;
     context.globalAlpha = opacity;
     context.drawImage(image, originPoint.x, originPoint.y, dimension.width, dimension.height);
-    context.globalAlpha = 1;
+    context.globalAlpha = prevAlpha;
 }
 export function clear(context, dimension) {
     context.clearRect(originPoint.x, originPoint.y, dimension.width, dimension.height);
 }
 export function drawParticle(data) {
-    const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, pos = particle.getPosition(), transformData = particle.getTransformData(transform), drawScale = defaultZoom, drawPosition = {
+    const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, { effectDrawers, shapeDrawers } = container.particles, pos = particle.getPosition(), transformData = particle.getTransformData(transform), drawScale = defaultZoom, drawPosition = {
         x: pos.x,
         y: pos.y,
     };
@@ -23,7 +24,7 @@ export function drawParticle(data) {
     if (colorStyles.fill) {
         context.fillStyle = colorStyles.fill;
     }
-    const strokeWidth = particle.strokeWidth ?? minStrokeWidth;
+    const fillEnabled = !!particle.fillEnabled, strokeWidth = particle.strokeWidth ?? minStrokeWidth;
     context.lineWidth = strokeWidth;
     if (colorStyles.stroke) {
         context.strokeStyle = colorStyles.stroke;
@@ -36,8 +37,8 @@ export function drawParticle(data) {
         opacity,
         delta,
         pixelRatio: container.retina.pixelRatio,
-        fill: particle.shapeFill,
-        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
+        fill: fillEnabled,
+        stroke: strokeWidth > minStrokeWidth,
         transformData,
         position: { ...pos },
         drawPosition,
@@ -46,42 +47,40 @@ export function drawParticle(data) {
     for (const plugin of container.plugins) {
         plugin.drawParticleTransform?.(drawData);
     }
-    drawBeforeEffect(container, drawData);
-    drawShapeBeforeDraw(container, drawData);
-    drawShape(container, drawData);
-    drawShapeAfterDraw(container, drawData);
-    drawAfterEffect(container, drawData);
+    const effect = particle.effect ? effectDrawers.get(particle.effect) : undefined, shape = particle.shape ? shapeDrawers.get(particle.shape) : undefined;
+    drawBeforeEffect(effect, drawData);
+    drawShapeBeforeDraw(shape, drawData);
+    drawShape(shape, drawData);
+    drawShapeAfterDraw(shape, drawData);
+    drawAfterEffect(effect, drawData);
     context.resetTransform();
 }
-export function drawAfterEffect(container, data) {
+export function drawAfterEffect(drawer, data) {
+    if (!drawer?.drawAfter) {
+        return;
+    }
     const { particle } = data;
     if (!particle.effect) {
         return;
     }
-    const drawer = container.particles.effectDrawers.get(particle.effect), drawFunc = drawer?.drawAfter;
-    if (!drawFunc) {
+    drawer.drawAfter(data);
+}
+export function drawBeforeEffect(drawer, data) {
+    if (!drawer?.drawBefore) {
         return;
     }
-    drawFunc(data);
-}
-export function drawBeforeEffect(container, data) {
     const { particle } = data;
     if (!particle.effect) {
         return;
     }
-    const drawer = container.particles.effectDrawers.get(particle.effect);
-    if (!drawer?.drawBefore) {
-        return;
-    }
     drawer.drawBefore(data);
 }
-export function drawShape(container, data) {
-    const { context, particle, stroke } = data;
-    if (!particle.shape) {
+export function drawShape(drawer, data) {
+    if (!drawer) {
         return;
     }
-    const drawer = container.particles.shapeDrawers.get(particle.shape);
-    if (!drawer) {
+    const { context, fill, particle, stroke } = data;
+    if (!particle.shape) {
         return;
     }
     context.beginPath();
@@ -92,30 +91,28 @@ export function drawShape(container, data) {
     if (stroke) {
         context.stroke();
     }
-    if (particle.shapeFill) {
+    if (fill) {
         context.fill();
     }
 }
-export function drawShapeAfterDraw(container, data) {
-    const { particle } = data;
-    if (!particle.shape) {
-        return;
-    }
-    const drawer = container.particles.shapeDrawers.get(particle.shape);
+export function drawShapeAfterDraw(drawer, data) {
     if (!drawer?.afterDraw) {
         return;
     }
-    drawer.afterDraw(data);
-}
-export function drawShapeBeforeDraw(container, data) {
     const { particle } = data;
     if (!particle.shape) {
         return;
     }
-    const drawer = container.particles.shapeDrawers.get(particle.shape);
+    drawer.afterDraw(data);
+}
+export function drawShapeBeforeDraw(drawer, data) {
     if (!drawer?.beforeDraw) {
         return;
     }
+    const { particle } = data;
+    if (!particle.shape) {
+        return;
+    }
     drawer.beforeDraw(data);
 }
 export function drawParticlePlugin(context, plugin, particle, delta) {

package/esm/Utils/ColorUtils.js

@@ -1,4 +1,4 @@
-import { clamp, getRandom, getRandomInRange, getRangeMax, getRangeMin, getRangeValue, mix, randomInRangeValue, setRangeValue, } from "./MathUtils.js";
+import { clamp, getRandom, getRandomInRange, getRangeValue, mix, randomInRangeValue, setRangeValue, } from "./MathUtils.js";
 import { decayOffset, defaultLoops, defaultOpacity, defaultRgbMin, defaultTime, defaultVelocity, double, hMax, hMin, hPhase, half, identity, lFactor, lMax, lMin, midColorValue, millisecondsToSeconds, percentDenominator, phaseNumerator, randomColorValue, rgbMax, sMax, sMin, sNormalizedOffset, sextuple, triple, } from "../Core/Utils/Constants.js";
 import { isArray, isString } from "./TypeUtils.js";
 import { AlterType } from "../Enums/Types/AlterType.js";
@@ -190,10 +190,10 @@ function getSdrStyleFromHsl(color, opacity) {
 }
 export function colorMix(color1, color2, size1, size2) {
     let rgb1 = color1, rgb2 = color2;
-    if (!Object.hasOwn(rgb1, "r")) {
+    if (!("r" in rgb1)) {
         rgb1 = hslToRgb(color1);
     }
-    if (!Object.hasOwn(rgb2, "r")) {
+    if (!("r" in rgb2)) {
         rgb2 = hslToRgb(color2);
     }
     return {
@@ -246,27 +246,33 @@ export function getLinkRandomColor(engine, optColor, blink, consent) {
     }
 }
 export function getHslFromAnimation(animation) {
-    return animation !== undefined
-        ? {
+    return animation === undefined
+        ? undefined
+        : {
             h: animation.h.value,
             s: animation.s.value,
             l: animation.l.value,
-        }
-        : undefined;
+        };
 }
 export function getHslAnimationFromHsl(hsl, animationOptions, reduceFactor) {
     const resColor = {
         h: {
             enable: false,
             value: hsl.h,
+            min: hMin,
+            max: hMax,
         },
         s: {
             enable: false,
             value: hsl.s,
+            min: sMin,
+            max: sMax,
         },
         l: {
             enable: false,
             value: hsl.l,
+            min: lMin,
+            max: lMax,
         },
     };
     if (animationOptions) {
@@ -278,6 +284,8 @@ export function getHslAnimationFromHsl(hsl, animationOptions, reduceFactor) {
 }
 function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
     colorValue.enable = colorAnimation.enable;
+    colorValue.min = colorAnimation.min;
+    colorValue.max = colorAnimation.max;
     if (colorValue.enable) {
         colorValue.velocity = (getRangeValue(colorAnimation.speed) / percentDenominator) * reduceFactor;
         colorValue.decay = decayOffset - getRangeValue(colorAnimation.decay);
@@ -297,7 +305,7 @@ function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
         colorValue.velocity = defaultVelocity;
     }
 }
-export function updateColorValue(data, range, decrease, delta) {
+export function updateColorValue(data, decrease, delta) {
     const minLoops = 0, minDelay = 0, identity = 1, minVelocity = 0, minOffset = 0, velocityFactor = 3.6;
     if (!data.enable ||
         ((data.maxLoops ?? minLoops) > minLoops && (data.loops ?? minLoops) > (data.maxLoops ?? minLoops))) {
@@ -310,7 +318,7 @@ export function updateColorValue(data, range, decrease, delta) {
     if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
         return;
     }
-    const offset = data.offset ? randomInRangeValue(data.offset) : minOffset, velocity = (data.velocity ?? minVelocity) * delta.factor + offset * velocityFactor, decay = data.decay ?? identity, max = getRangeMax(range), min = getRangeMin(range);
+    const offset = data.offset ? randomInRangeValue(data.offset) : minOffset, velocity = (data.velocity ?? minVelocity) * delta.factor + offset * velocityFactor, decay = data.decay ?? identity, max = data.max, min = data.min;
     if (!decrease || data.status === AnimationStatus.increasing) {
         data.value += velocity;
         if (data.value > max) {
@@ -326,8 +334,7 @@ export function updateColorValue(data, range, decrease, delta) {
     }
     else {
         data.value -= velocity;
-        const minValue = 0;
-        if (data.value < minValue) {
+        if (data.value < min) {
             data.loops ??= 0;
             data.loops++;
             data.status = AnimationStatus.increasing;
@@ -342,14 +349,10 @@ export function updateColor(color, delta) {
     if (!color) {
         return;
     }
-    const { h, s, l } = color, ranges = {
-        h: { min: hMin, max: hMax },
-        s: { min: sMin, max: sMax },
-        l: { min: lMin, max: lMax },
-    };
-    updateColorValue(h, ranges.h, false, delta);
-    updateColorValue(s, ranges.s, true, delta);
-    updateColorValue(l, ranges.l, true, delta);
+    const { h, s, l } = color;
+    updateColorValue(h, false, delta);
+    updateColorValue(s, true, delta);
+    updateColorValue(l, true, delta);
 }
 export function alterHsl(color, type, value) {
     return {