@tsparticles/engine 3.0.2 → 3.1.0

package/umd/Core/Utils/Vector3d.js

@@ -12,6 +12,11 @@
     exports.Vector3d = void 0;
     const Constants_js_1 = require("./Constants.js");
     const Utils_js_1 = require("../../Utils/Utils.js");
+    const origin = {
+        x: 0,
+        y: 0,
+        z: 0,
+    }, squareExp = 2, inverseFactorNumerator = 1.0;
     class Vector3d {
         constructor(xOrCoords, y, z) {
             this._updateFromAngle = (angle, length) => {
@@ -22,19 +27,19 @@
                 this.x = xOrCoords.x;
                 this.y = xOrCoords.y;
                 const coords3d = xOrCoords;
-                this.z = coords3d.z ? coords3d.z : 0;
+                this.z = coords3d.z ? coords3d.z : origin.z;
             }
             else if (xOrCoords !== undefined && y !== undefined) {
                 this.x = xOrCoords;
                 this.y = y;
-                this.z = z ?? 0;
+                this.z = z ?? origin.z;
             }
             else {
                 throw new Error(`${Constants_js_1.errorPrefix} Vector3d not initialized correctly`);
             }
         }
         static get origin() {
-            return Vector3d.create(0, 0, 0);
+            return Vector3d.create(origin.x, origin.y, origin.z);
         }
         get angle() {
             return Math.atan2(this.y, this.x);
@@ -80,7 +85,7 @@
             this.z /= n;
         }
         getLengthSq() {
-            return this.x ** 2 + this.y ** 2;
+            return this.x ** squareExp + this.y ** squareExp;
         }
         mult(n) {
             return Vector3d.create(this.x * n, this.y * n, this.z * n);
@@ -91,19 +96,19 @@
             this.z *= n;
         }
         normalize() {
-            const length = this.length;
-            if (length != 0) {
-                this.multTo(1.0 / length);
+            const length = this.length, noLength = 0;
+            if (length != noLength) {
+                this.multTo(inverseFactorNumerator / length);
             }
         }
         rotate(angle) {
-            return Vector3d.create(this.x * Math.cos(angle) - this.y * Math.sin(angle), this.x * Math.sin(angle) + this.y * Math.cos(angle), 0);
+            return Vector3d.create(this.x * Math.cos(angle) - this.y * Math.sin(angle), this.x * Math.sin(angle) + this.y * Math.cos(angle), origin.z);
         }
         setTo(c) {
             this.x = c.x;
             this.y = c.y;
             const v3d = c;
-            this.z = v3d.z ? v3d.z : 0;
+            this.z = v3d.z ? v3d.z : origin.z;
         }
         sub(v) {
             return Vector3d.create(this.x - v.x, this.y - v.y, this.z - v.z);

package/umd/Options/Classes/ManualParticle.js

@@ -11,6 +11,7 @@
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.ManualParticle = void 0;
     const Utils_js_1 = require("../../Utils/Utils.js");
+    const defaultPosition = 50;
     class ManualParticle {
         load(data) {
             if (!data) {
@@ -18,8 +19,8 @@
             }
             if (data.position) {
                 this.position = {
-                    x: data.position.x ?? 50,
-                    y: data.position.y ?? 50,
+                    x: data.position.x ?? defaultPosition,
+                    y: data.position.y ?? defaultPosition,
                     mode: data.position.mode ?? "percent",
                 };
             }

package/umd/Options/Classes/Options.js

@@ -65,6 +65,9 @@
             if (data.clear !== undefined) {
                 this.clear = data.clear;
             }
+            if (data.key !== undefined) {
+                this.key = data.key;
+            }
             if (data.name !== undefined) {
                 this.name = data.name;
             }

package/umd/Utils/CanvasUtils.js

@@ -11,6 +11,7 @@
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.alterHsl = exports.drawParticlePlugin = exports.drawPlugin = exports.drawShapeAfterDraw = exports.drawShape = exports.drawEffect = exports.drawParticle = exports.clear = exports.paintImage = exports.paintBase = exports.drawLine = void 0;
     const ColorUtils_js_1 = require("./ColorUtils.js");
+    const origin = { x: 0, y: 0 };
     function drawLine(context, begin, end) {
         context.beginPath();
         context.moveTo(begin.x, begin.y);
@@ -20,7 +21,7 @@
     exports.drawLine = drawLine;
     function paintBase(context, dimension, baseColor) {
         context.fillStyle = baseColor ?? "rgba(0,0,0,0)";
-        context.fillRect(0, 0, dimension.width, dimension.height);
+        context.fillRect(origin.x, origin.y, dimension.width, dimension.height);
     }
     exports.paintBase = paintBase;
     function paintImage(context, dimension, image, opacity) {
@@ -28,24 +29,23 @@
             return;
         }
         context.globalAlpha = opacity;
-        context.drawImage(image, 0, 0, dimension.width, dimension.height);
+        context.drawImage(image, origin.x, origin.y, dimension.width, dimension.height);
         context.globalAlpha = 1;
     }
     exports.paintImage = paintImage;
     function clear(context, dimension) {
-        context.clearRect(0, 0, dimension.width, dimension.height);
+        context.clearRect(origin.x, origin.y, dimension.width, dimension.height);
     }
     exports.clear = clear;
     function drawParticle(data) {
-        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 = {
+        const { container, context, particle, delta, colorStyles, backgroundMask, composite, radius, opacity, shadow, transform, } = data, pos = particle.getPosition(), defaultAngle = 0, angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : defaultAngle), rotateData = {
             sin: Math.sin(angle),
             cos: Math.cos(angle),
-        }, transformData = {
-            a: rotateData.cos * (transform.a ?? 1),
-            b: rotateData.sin * (transform.b ?? 1),
-            c: -rotateData.sin * (transform.c ?? 1),
-            d: rotateData.cos * (transform.d ?? 1),
+        }, defaultTransformFactor = 1, transformData = {
+            a: rotateData.cos * (transform.a ?? defaultTransformFactor),
+            b: rotateData.sin * (transform.b ?? defaultTransformFactor),
+            c: -rotateData.sin * (transform.c ?? defaultTransformFactor),
+            d: rotateData.cos * (transform.d ?? defaultTransformFactor),
         };
         context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
         if (backgroundMask) {
@@ -61,27 +61,26 @@
         if (colorStyles.fill) {
             context.fillStyle = colorStyles.fill;
         }
-        const strokeWidth = particle.strokeWidth ?? 0;
+        const minStrokeWidth = 0, strokeWidth = particle.strokeWidth ?? minStrokeWidth;
         context.lineWidth = strokeWidth;
         if (colorStyles.stroke) {
             context.strokeStyle = colorStyles.stroke;
         }
-        const drawData = { container, context, particle, radius, opacity, delta, transformData };
-        context.beginPath();
+        const drawData = {
+            container,
+            context,
+            particle,
+            radius,
+            opacity,
+            delta,
+            transformData,
+            strokeWidth,
+        };
         drawShape(drawData);
-        if (particle.shapeClose) {
-            context.closePath();
-        }
-        if (strokeWidth > 0) {
-            context.stroke();
-        }
-        if (particle.shapeFill) {
-            context.fill();
-        }
         drawShapeAfterDraw(drawData);
         drawEffect(drawData);
         context.globalCompositeOperation = "source-over";
-        context.setTransform(1, 0, 0, 1, 0, 0);
+        context.resetTransform();
     }
     exports.drawParticle = drawParticle;
     function drawEffect(data) {
@@ -105,7 +104,7 @@
     }
     exports.drawEffect = drawEffect;
     function drawShape(data) {
-        const { container, context, particle, radius, opacity, delta, transformData } = data;
+        const { container, context, particle, radius, opacity, delta, strokeWidth, transformData } = data, minStrokeWidth = 0;
         if (!particle.shape) {
             return;
         }
@@ -113,6 +112,7 @@
         if (!drawer) {
             return;
         }
+        context.beginPath();
         drawer.draw({
             context,
             particle,
@@ -122,6 +122,15 @@
             pixelRatio: container.retina.pixelRatio,
             transformData: { ...transformData },
         });
+        if (particle.shapeClose) {
+            context.closePath();
+        }
+        if (strokeWidth > minStrokeWidth) {
+            context.stroke();
+        }
+        if (particle.shapeFill) {
+            context.fill();
+        }
     }
     exports.drawShape = drawShape;
     function drawShapeAfterDraw(data) {
@@ -130,7 +139,7 @@
             return;
         }
         const drawer = container.shapeDrawers.get(particle.shape);
-        if (!drawer || !drawer.afterDraw) {
+        if (!drawer?.afterDraw) {
             return;
         }
         drawer.afterDraw({
@@ -159,10 +168,11 @@
     }
     exports.drawParticlePlugin = drawParticlePlugin;
     function alterHsl(color, type, value) {
+        const lFactor = 1;
         return {
             h: color.h,
             s: color.s,
-            l: color.l + (type === "darken" ? -1 : 1) * value,
+            l: color.l + (type === "darken" ? -lFactor : lFactor) * value,
         };
     }
     exports.alterHsl = alterHsl;

package/umd/Utils/ColorUtils.js

@@ -4,14 +4,15 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./NumberUtils.js", "./Utils.js"], factory);
+        define(["require", "exports", "./NumberUtils.js", "./Utils.js", "../Core/Utils/Constants.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.getHslAnimationFromHsl = exports.getHslFromAnimation = exports.getLinkRandomColor = exports.getLinkColor = exports.colorMix = exports.getStyleFromHsl = exports.getStyleFromRgb = exports.getRandomRgbColor = exports.hslaToRgba = exports.hslToRgb = exports.stringToRgb = exports.stringToAlpha = exports.rgbToHsl = exports.rangeColorToHsl = exports.colorToHsl = exports.colorToRgb = exports.rangeColorToRgb = exports.addColorManager = void 0;
+    exports.updateColor = exports.updateColorValue = exports.getHslAnimationFromHsl = exports.getHslFromAnimation = exports.getLinkRandomColor = exports.getLinkColor = exports.colorMix = exports.getStyleFromHsl = exports.getStyleFromRgb = exports.getRandomRgbColor = exports.hslaToRgba = exports.hslToRgb = exports.stringToRgb = exports.stringToAlpha = exports.rgbToHsl = exports.rangeColorToHsl = exports.colorToHsl = exports.colorToRgb = exports.rangeColorToRgb = exports.addColorManager = void 0;
     const NumberUtils_js_1 = require("./NumberUtils.js");
     const Utils_js_1 = require("./Utils.js");
+    const Constants_js_1 = require("../Core/Utils/Constants.js");
     const randomColorValue = "random", midColorValue = "mid", colorManagers = new Map();
     function addColorManager(manager) {
         colorManagers.set(manager.key, manager);
@@ -25,13 +26,15 @@
         }
         const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i, hexFixed = input.replace(shorthandRegex, (_, r, g, b, a) => {
             return r + r + g + g + b + b + (a !== undefined ? a + a : "");
-        }), regex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i, result = regex.exec(hexFixed);
+        }), regex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i, result = regex.exec(hexFixed), radix = 16, defaultAlpha = 1, alphaFactor = 0xff;
         return result
             ? {
-                a: result[4] !== undefined ? parseInt(result[4], 16) / 0xff : 1,
-                b: parseInt(result[3], 16),
-                g: parseInt(result[2], 16),
-                r: parseInt(result[1], 16),
+                a: result[4] !== undefined
+                    ? parseInt(result[4], radix) / alphaFactor
+                    : defaultAlpha,
+                b: parseInt(result[3], radix),
+                g: parseInt(result[2], radix),
+                r: parseInt(result[1], radix),
             }
             : undefined;
     }
@@ -88,26 +91,26 @@
     }
     exports.rangeColorToHsl = rangeColorToHsl;
     function rgbToHsl(color) {
-        const r1 = color.r / 255, g1 = color.g / 255, b1 = color.b / 255, max = Math.max(r1, g1, b1), min = Math.min(r1, g1, b1), res = {
-            h: 0,
-            l: (max + min) * 0.5,
-            s: 0,
+        const rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, half = 0.5, double = 2, r1 = color.r / rgbMax, g1 = color.g / rgbMax, b1 = color.b / rgbMax, max = Math.max(r1, g1, b1), min = Math.min(r1, g1, b1), res = {
+            h: hMin,
+            l: (max + min) * half,
+            s: sMin,
         };
         if (max !== min) {
-            res.s = res.l < 0.5 ? (max - min) / (max + min) : (max - min) / (2.0 - max - min);
+            res.s = res.l < half ? (max - min) / (max + min) : (max - min) / (double - max - min);
             res.h =
                 r1 === max
                     ? (g1 - b1) / (max - min)
-                    : (res.h = g1 === max ? 2.0 + (b1 - r1) / (max - min) : 4.0 + (r1 - g1) / (max - min));
+                    : (res.h = g1 === max ? double + (b1 - r1) / (max - min) : double * double + (r1 - g1) / (max - min));
         }
-        res.l *= 100;
-        res.s *= 100;
-        res.h *= 60;
-        if (res.h < 0) {
-            res.h += 360;
+        res.l *= lMax;
+        res.s *= sMax;
+        res.h *= hPhase;
+        if (res.h < hMin) {
+            res.h += hMax;
         }
-        if (res.h >= 360) {
-            res.h -= 360;
+        if (res.h >= hMax) {
+            res.h -= hMax;
         }
         return res;
     }
@@ -121,29 +124,33 @@
     }
     exports.stringToRgb = stringToRgb;
     function hslToRgb(hsl) {
-        const h = ((hsl.h % 360) + 360) % 360, s = Math.max(0, Math.min(100, hsl.s)), l = Math.max(0, Math.min(100, hsl.l)), hNormalized = h / 360, sNormalized = s / 100, lNormalized = l / 100;
-        if (s === 0) {
-            const grayscaleValue = Math.round(lNormalized * 255);
+        const hMax = 360, sMax = 100, lMax = 100, sMin = 0, lMin = 0, h = ((hsl.h % hMax) + hMax) % hMax, s = Math.max(sMin, Math.min(sMax, hsl.s)), l = Math.max(lMin, Math.min(lMax, hsl.l)), hNormalized = h / hMax, sNormalized = s / sMax, lNormalized = l / lMax, rgbFactor = 255, triple = 3;
+        if (s === sMin) {
+            const grayscaleValue = Math.round(lNormalized * rgbFactor);
             return { r: grayscaleValue, g: grayscaleValue, b: grayscaleValue };
         }
-        const channel = (temp1, temp2, temp3) => {
-            if (temp3 < 0) {
-                temp3 += 1;
+        const half = 0.5, double = 2, channel = (temp1, temp2, temp3) => {
+            const temp3Min = 0, temp3Max = 1, sextuple = 6;
+            if (temp3 < temp3Min) {
+                temp3++;
             }
-            if (temp3 > 1) {
-                temp3 -= 1;
+            if (temp3 > temp3Max) {
+                temp3--;
             }
-            if (temp3 * 6 < 1) {
-                return temp1 + (temp2 - temp1) * 6 * temp3;
+            if (temp3 * sextuple < temp3Max) {
+                return temp1 + (temp2 - temp1) * sextuple * temp3;
             }
-            if (temp3 * 2 < 1) {
+            if (temp3 * double < temp3Max) {
                 return temp2;
             }
-            if (temp3 * 3 < 2) {
-                return temp1 + (temp2 - temp1) * (2 / 3 - temp3) * 6;
+            if (temp3 * triple < temp3Max * double) {
+                const temp3Offset = double / triple;
+                return temp1 + (temp2 - temp1) * (temp3Offset - temp3) * sextuple;
             }
             return temp1;
-        }, temp1 = lNormalized < 0.5 ? lNormalized * (1 + sNormalized) : lNormalized + sNormalized - lNormalized * sNormalized, temp2 = 2 * lNormalized - temp1, red = Math.min(255, 255 * channel(temp2, temp1, hNormalized + 1 / 3)), green = Math.min(255, 255 * channel(temp2, temp1, hNormalized)), blue = Math.min(255, 255 * channel(temp2, temp1, hNormalized - 1 / 3));
+        }, sNormalizedOffset = 1, temp1 = lNormalized < half
+            ? lNormalized * (sNormalizedOffset + sNormalized)
+            : lNormalized + sNormalized - lNormalized * sNormalized, temp2 = double * lNormalized - temp1, phaseNumerator = 1, phaseThird = phaseNumerator / triple, red = Math.min(rgbFactor, rgbFactor * channel(temp2, temp1, hNormalized + phaseThird)), green = Math.min(rgbFactor, rgbFactor * channel(temp2, temp1, hNormalized)), blue = Math.min(rgbFactor, rgbFactor * channel(temp2, temp1, hNormalized - phaseThird));
         return { r: Math.round(red), g: Math.round(green), b: Math.round(blue) };
     }
     exports.hslToRgb = hslToRgb;
@@ -158,20 +165,22 @@
     }
     exports.hslaToRgba = hslaToRgba;
     function getRandomRgbColor(min) {
-        const fixedMin = min ?? 0;
+        const defaultMin = 0, fixedMin = min ?? defaultMin, rgbMax = 256;
         return {
-            b: Math.floor((0, NumberUtils_js_1.randomInRange)((0, NumberUtils_js_1.setRangeValue)(fixedMin, 256))),
-            g: Math.floor((0, NumberUtils_js_1.randomInRange)((0, NumberUtils_js_1.setRangeValue)(fixedMin, 256))),
-            r: Math.floor((0, NumberUtils_js_1.randomInRange)((0, NumberUtils_js_1.setRangeValue)(fixedMin, 256))),
+            b: Math.floor((0, NumberUtils_js_1.randomInRange)((0, NumberUtils_js_1.setRangeValue)(fixedMin, rgbMax))),
+            g: Math.floor((0, NumberUtils_js_1.randomInRange)((0, NumberUtils_js_1.setRangeValue)(fixedMin, rgbMax))),
+            r: Math.floor((0, NumberUtils_js_1.randomInRange)((0, NumberUtils_js_1.setRangeValue)(fixedMin, rgbMax))),
         };
     }
     exports.getRandomRgbColor = getRandomRgbColor;
     function getStyleFromRgb(color, opacity) {
-        return `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity ?? 1})`;
+        const defaultOpacity = 1;
+        return `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity ?? defaultOpacity})`;
     }
     exports.getStyleFromRgb = getStyleFromRgb;
     function getStyleFromHsl(color, opacity) {
-        return `hsla(${color.h}, ${color.s}%, ${color.l}%, ${opacity ?? 1})`;
+        const defaultOpacity = 1;
+        return `hsla(${color.h}, ${color.s}%, ${color.l}%, ${opacity ?? defaultOpacity})`;
     }
     exports.getStyleFromHsl = getStyleFromHsl;
     function colorMix(color1, color2, size1, size2) {
@@ -268,22 +277,94 @@
     exports.getHslAnimationFromHsl = getHslAnimationFromHsl;
     function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
         colorValue.enable = colorAnimation.enable;
+        const defaultVelocity = 0, decayOffset = 1, defaultLoops = 0, defaultTime = 0;
         if (colorValue.enable) {
-            colorValue.velocity = ((0, NumberUtils_js_1.getRangeValue)(colorAnimation.speed) / 100) * reduceFactor;
-            colorValue.decay = 1 - (0, NumberUtils_js_1.getRangeValue)(colorAnimation.decay);
+            colorValue.velocity = ((0, NumberUtils_js_1.getRangeValue)(colorAnimation.speed) / Constants_js_1.percentDenominator) * reduceFactor;
+            colorValue.decay = decayOffset - (0, NumberUtils_js_1.getRangeValue)(colorAnimation.decay);
             colorValue.status = "increasing";
-            colorValue.loops = 0;
+            colorValue.loops = defaultLoops;
             colorValue.maxLoops = (0, NumberUtils_js_1.getRangeValue)(colorAnimation.count);
-            colorValue.time = 0;
-            colorValue.delayTime = (0, NumberUtils_js_1.getRangeValue)(colorAnimation.delay) * 1000;
+            colorValue.time = defaultTime;
+            colorValue.delayTime = (0, NumberUtils_js_1.getRangeValue)(colorAnimation.delay) * Constants_js_1.millisecondsToSeconds;
             if (!colorAnimation.sync) {
                 colorValue.velocity *= (0, NumberUtils_js_1.getRandom)();
                 colorValue.value *= (0, NumberUtils_js_1.getRandom)();
             }
             colorValue.initialValue = colorValue.value;
+            colorValue.offset = (0, NumberUtils_js_1.setRangeValue)(colorAnimation.offset);
         }
         else {
-            colorValue.velocity = 0;
+            colorValue.velocity = defaultVelocity;
         }
     }
+    function updateColorValue(data, range, decrease, delta) {
+        const minLoops = 0, minDelay = 0, identity = 1, minVelocity = 0, minOffset = 0, velocityFactor = 3.6;
+        if (!data ||
+            !data.enable ||
+            ((data.maxLoops ?? minLoops) > minLoops && (data.loops ?? minLoops) > (data.maxLoops ?? minLoops))) {
+            return;
+        }
+        if (!data.time) {
+            data.time = 0;
+        }
+        if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
+            data.time += delta.value;
+        }
+        if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
+            return;
+        }
+        const offset = data.offset ? (0, NumberUtils_js_1.randomInRange)(data.offset) : minOffset, velocity = (data.velocity ?? minVelocity) * delta.factor + offset * velocityFactor, decay = data.decay ?? identity, max = (0, NumberUtils_js_1.getRangeMax)(range), min = (0, NumberUtils_js_1.getRangeMin)(range);
+        if (!decrease || data.status === "increasing") {
+            data.value += velocity;
+            if (data.value > max) {
+                if (!data.loops) {
+                    data.loops = 0;
+                }
+                data.loops++;
+                if (decrease) {
+                    data.status = "decreasing";
+                }
+                else {
+                    data.value -= max;
+                }
+            }
+        }
+        else {
+            data.value -= velocity;
+            const minValue = 0;
+            if (data.value < minValue) {
+                if (!data.loops) {
+                    data.loops = 0;
+                }
+                data.loops++;
+                data.status = "increasing";
+            }
+        }
+        if (data.velocity && decay !== identity) {
+            data.velocity *= decay;
+        }
+        data.value = (0, NumberUtils_js_1.clamp)(data.value, min, max);
+    }
+    exports.updateColorValue = updateColorValue;
+    function updateColor(color, delta) {
+        if (!color) {
+            return;
+        }
+        const { h, s, l } = color;
+        const ranges = {
+            h: { min: 0, max: 360 },
+            s: { min: 0, max: 100 },
+            l: { min: 0, max: 100 },
+        };
+        if (h) {
+            updateColorValue(h, ranges.h, false, delta);
+        }
+        if (s) {
+            updateColorValue(s, ranges.s, true, delta);
+        }
+        if (l) {
+            updateColorValue(l, ranges.l, true, delta);
+        }
+    }
+    exports.updateColor = updateColor;
 });

package/umd/Utils/EventDispatcher.js

@@ -25,7 +25,7 @@
         }
         dispatchEvent(type, args) {
             const listeners = this._listeners.get(type);
-            listeners && listeners.forEach((handler) => handler(args));
+            listeners?.forEach((handler) => handler(args));
         }
         hasEventListener(type) {
             return !!this._listeners.get(type);
@@ -43,15 +43,16 @@
             if (!arr) {
                 return;
             }
-            const length = arr.length, idx = arr.indexOf(listener);
-            if (idx < 0) {
+            const length = arr.length, idx = arr.indexOf(listener), minIndex = 0;
+            if (idx < minIndex) {
                 return;
             }
-            if (length === 1) {
+            const deleteCount = 1;
+            if (length === deleteCount) {
                 this._listeners.delete(type);
             }
             else {
-                arr.splice(idx, 1);
+                arr.splice(idx, deleteCount);
             }
         }
     }

package/umd/Utils/HslColorManager.js

@@ -37,13 +37,13 @@
             if (!input.startsWith("hsl")) {
                 return;
             }
-            const regex = /hsla?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(,\s*([\d.%]+)\s*)?\)/i, result = regex.exec(input);
+            const regex = /hsla?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(,\s*([\d.%]+)\s*)?\)/i, result = regex.exec(input), minLength = 4, defaultAlpha = 1, radix = 10;
             return result
                 ? (0, ColorUtils_js_1.hslaToRgba)({
-                    a: result.length > 4 ? (0, NumberUtils_js_1.parseAlpha)(result[5]) : 1,
-                    h: parseInt(result[1], 10),
-                    l: parseInt(result[3], 10),
-                    s: parseInt(result[2], 10),
+                    a: result.length > minLength ? (0, NumberUtils_js_1.parseAlpha)(result[5]) : defaultAlpha,
+                    h: parseInt(result[1], radix),
+                    l: parseInt(result[3], radix),
+                    s: parseInt(result[2], radix),
                 })
                 : undefined;
         }