@tsparticles/engine 3.0.2 → 3.1.0

package/cjs/Core/Utils/Vector3d.js

@@ -3,6 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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) => {
@@ -13,19 +18,19 @@ class Vector3d {
             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);
@@ -71,7 +76,7 @@ class Vector3d {
         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);
@@ -82,19 +87,19 @@ class Vector3d {
         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/cjs/Options/Classes/ManualParticle.js

@@ -2,6 +2,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) {
@@ -9,8 +10,8 @@ class ManualParticle {
         }
         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/cjs/Options/Classes/Options.js

@@ -56,6 +56,9 @@ class Options {
         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/cjs/Utils/CanvasUtils.js

@@ -2,6 +2,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);
@@ -11,7 +12,7 @@ function drawLine(context, begin, end) {
 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) {
@@ -19,24 +20,23 @@ function paintImage(context, dimension, image, opacity) {
         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) {
@@ -52,27 +52,26 @@ function drawParticle(data) {
     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) {
@@ -96,7 +95,7 @@ function drawEffect(data) {
 }
 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;
     }
@@ -104,6 +103,7 @@ function drawShape(data) {
     if (!drawer) {
         return;
     }
+    context.beginPath();
     drawer.draw({
         context,
         particle,
@@ -113,6 +113,15 @@ function drawShape(data) {
         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) {
@@ -121,7 +130,7 @@ function drawShapeAfterDraw(data) {
         return;
     }
     const drawer = container.shapeDrawers.get(particle.shape);
-    if (!drawer || !drawer.afterDraw) {
+    if (!drawer?.afterDraw) {
         return;
     }
     drawer.afterDraw({
@@ -150,10 +159,11 @@ function drawParticlePlugin(context, plugin, particle, delta) {
 }
 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/cjs/Utils/ColorUtils.js

@@ -1,8 +1,9 @@
 "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);
@@ -16,13 +17,15 @@ function stringToRgba(input) {
     }
     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;
 }
@@ -79,26 +82,26 @@ function rangeColorToHsl(color, index, useIndex = true) {
 }
 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;
 }
@@ -112,29 +115,33 @@ function stringToRgb(input) {
 }
 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;
@@ -149,20 +156,22 @@ function hslaToRgba(hsla) {
 }
 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) {
@@ -259,21 +268,93 @@ function getHslAnimationFromHsl(hsl, animationOptions, reduceFactor) {
 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/cjs/Utils/EventDispatcher.js

@@ -16,7 +16,7 @@ class EventDispatcher {
     }
     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);
@@ -34,15 +34,16 @@ class EventDispatcher {
         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/cjs/Utils/HslColorManager.js

@@ -28,13 +28,13 @@ class HslColorManager {
         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;
     }