@tsparticles/engine 3.9.1 → 4.0.0-alpha.1

package/esm/Utils/CanvasUtils.js

@@ -1,6 +1,11 @@
-import { defaultAngle, defaultTransform, identity, lFactor, minStrokeWidth, originPoint, } from "../Core/Utils/Constants.js";
+import { defaultTransform, identity, lFactor, minStrokeWidth, originPoint } from "../Core/Utils/Constants.js";
 import { AlterType } from "../Enums/Types/AlterType.js";
-import { getStyleFromRgb } from "./ColorUtils.js";
+export function clearDrawPlugin(context, plugin, delta) {
+    if (!plugin.clearDraw) {
+        return;
+    }
+    plugin.clearDraw(context, delta);
+}
 export function drawLine(context, begin, end) {
     context.beginPath();
     context.moveTo(begin.x, begin.y);
@@ -23,26 +28,16 @@ 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, backgroundMask, composite, radius, opacity, shadow, transform, } = data, pos = particle.getPosition(), angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : defaultAngle), rotateData = {
+    const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, pos = particle.getPosition(), angle = particle.getAngle(), rotateData = {
         sin: Math.sin(angle),
         cos: Math.cos(angle),
-    }, rotating = !!angle, transformData = {
+    }, rotating = particle.isRotating, transformData = {
         a: rotateData.cos * (transform.a ?? defaultTransform.a),
         b: rotating ? rotateData.sin * (transform.b ?? identity) : (transform.b ?? defaultTransform.b),
         c: rotating ? -rotateData.sin * (transform.c ?? identity) : (transform.c ?? defaultTransform.c),
         d: rotateData.cos * (transform.d ?? defaultTransform.d),
     };
     context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
-    if (backgroundMask) {
-        context.globalCompositeOperation = composite;
-    }
-    const shadowColor = particle.shadowColor;
-    if (shadow.enable && shadowColor) {
-        context.shadowBlur = shadow.blur;
-        context.shadowColor = getStyleFromRgb(shadowColor);
-        context.shadowOffsetX = shadow.offset.x;
-        context.shadowOffsetY = shadow.offset.y;
-    }
     if (colorStyles.fill) {
         context.fillStyle = colorStyles.fill;
     }
@@ -61,28 +56,52 @@ export function drawParticle(data) {
         transformData,
         strokeWidth,
     };
+    drawBeforeEffect(drawData);
+    drawShapeBeforeDraw(drawData);
     drawShape(drawData);
     drawShapeAfterDraw(drawData);
-    drawEffect(drawData);
-    context.globalCompositeOperation = "source-over";
+    drawAfterEffect(drawData);
     context.resetTransform();
 }
-export function drawEffect(data) {
-    const { container, context, particle, radius, opacity, delta, transformData } = data;
+export function drawAfterEffect(data) {
+    const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
+    if (!particle.effect) {
+        return;
+    }
+    const drawer = container.effectDrawers.get(particle.effect), drawFunc = drawer?.drawAfter;
+    if (!drawFunc) {
+        return;
+    }
+    drawFunc({
+        context,
+        particle,
+        radius,
+        opacity,
+        delta,
+        pixelRatio: container.retina.pixelRatio,
+        fill: particle.shapeFill,
+        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
+        transformData: { ...transformData },
+    });
+}
+export function drawBeforeEffect(data) {
+    const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
     if (!particle.effect) {
         return;
     }
     const drawer = container.effectDrawers.get(particle.effect);
-    if (!drawer) {
+    if (!drawer?.drawBefore) {
         return;
     }
-    drawer.draw({
+    drawer.drawBefore({
         context,
         particle,
         radius,
         opacity,
         delta,
         pixelRatio: container.retina.pixelRatio,
+        fill: particle.shapeFill,
+        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
         transformData: { ...transformData },
     });
 }
@@ -103,6 +122,8 @@ export function drawShape(data) {
         opacity,
         delta,
         pixelRatio: container.retina.pixelRatio,
+        fill: particle.shapeFill,
+        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
         transformData: { ...transformData },
     });
     if (particle.shapeClose) {
@@ -116,7 +137,7 @@ export function drawShape(data) {
     }
 }
 export function drawShapeAfterDraw(data) {
-    const { container, context, particle, radius, opacity, delta, transformData } = data;
+    const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
     if (!particle.shape) {
         return;
     }
@@ -131,6 +152,29 @@ export function drawShapeAfterDraw(data) {
         opacity,
         delta,
         pixelRatio: container.retina.pixelRatio,
+        fill: particle.shapeFill,
+        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
+        transformData: { ...transformData },
+    });
+}
+export function drawShapeBeforeDraw(data) {
+    const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
+    if (!particle.shape) {
+        return;
+    }
+    const drawer = container.shapeDrawers.get(particle.shape);
+    if (!drawer?.beforeDraw) {
+        return;
+    }
+    drawer.beforeDraw({
+        context,
+        particle,
+        radius,
+        opacity,
+        delta,
+        pixelRatio: container.retina.pixelRatio,
+        fill: particle.shapeFill,
+        stroke: strokeWidth > minStrokeWidth || !particle.shapeFill,
         transformData: { ...transformData },
     });
 }

package/esm/Utils/ColorUtils.js

@@ -1,5 +1,5 @@
-import { clamp, getRandom, getRangeMax, getRangeMin, getRangeValue, mix, randomInRange, setRangeValue, } from "./NumberUtils.js";
-import { decayOffset, defaultLoops, defaultOpacity, defaultRgbMin, defaultTime, defaultVelocity, double, hMax, hMin, hPhase, half, identity, lMax, lMin, midColorValue, millisecondsToSeconds, percentDenominator, phaseNumerator, randomColorValue, rgbFactor, rgbMax, sMax, sMin, sNormalizedOffset, sextuple, triple, } from "../Core/Utils/Constants.js";
+import { clamp, getRandom, getRandomInRange, getRangeMax, getRangeMin, getRangeValue, mix, randomInRangeValue, setRangeValue, } from "./MathUtils.js";
+import { decayOffset, defaultLoops, defaultOpacity, defaultRgbMin, defaultTime, defaultVelocity, double, hMax, hMin, hPhase, half, identity, 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 { AnimationStatus } from "../Enums/AnimationStatus.js";
 import { itemFromArray } from "./Utils.js";
@@ -8,10 +8,11 @@ function stringToRgba(engine, input) {
         return;
     }
     for (const manager of engine.colorManagers.values()) {
-        if (input.startsWith(manager.stringPrefix)) {
+        if (manager.accepts(input)) {
             return manager.parseString(input);
         }
     }
+    return undefined;
 }
 export function rangeColorToRgb(engine, input, index, useIndex = true) {
     if (!input) {
@@ -22,8 +23,12 @@ export function rangeColorToRgb(engine, input, index, useIndex = true) {
         return colorToRgb(engine, color.value, index, useIndex);
     }
     if (isArray(color.value)) {
+        const value = itemFromArray(color.value, index, useIndex);
+        if (!value) {
+            return;
+        }
         return rangeColorToRgb(engine, {
-            value: itemFromArray(color.value, index, useIndex),
+            value,
         });
     }
     for (const manager of engine.colorManagers.values()) {
@@ -32,6 +37,7 @@ export function rangeColorToRgb(engine, input, index, useIndex = true) {
             return res;
         }
     }
+    return undefined;
 }
 export function colorToRgb(engine, input, index, useIndex = true) {
     if (!input) {
@@ -42,8 +48,12 @@ export function colorToRgb(engine, input, index, useIndex = true) {
         return color.value === randomColorValue ? getRandomRgbColor() : stringToRgb(engine, color.value);
     }
     if (isArray(color.value)) {
+        const value = itemFromArray(color.value, index, useIndex);
+        if (!value) {
+            return;
+        }
         return colorToRgb(engine, {
-            value: itemFromArray(color.value, index, useIndex),
+            value,
         });
     }
     for (const manager of engine.colorManagers.values()) {
@@ -52,6 +62,7 @@ export function colorToRgb(engine, input, index, useIndex = true) {
             return res;
         }
     }
+    return undefined;
 }
 export function colorToHsl(engine, color, index, useIndex = true) {
     const rgb = colorToRgb(engine, color, index, useIndex);
@@ -69,10 +80,15 @@ export function rgbToHsl(color) {
     };
     if (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 ? double + (b1 - r1) / (max - min) : double * double + (r1 - g1) / (max - min));
+        if (r1 === max) {
+            res.h = (g1 - b1) / (max - min);
+        }
+        else if (g1 === max) {
+            res.h = double + (b1 - r1) / (max - min);
+        }
+        else {
+            res.h = double * double + (r1 - g1) / (max - min);
+        }
     }
     res.l *= lMax;
     res.s *= sMax;
@@ -94,7 +110,7 @@ export function stringToRgb(engine, input) {
 export function hslToRgb(hsl) {
     const 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;
     if (s === sMin) {
-        const grayscaleValue = Math.round(lNormalized * rgbFactor);
+        const grayscaleValue = Math.round(lNormalized * rgbMax);
         return { r: grayscaleValue, g: grayscaleValue, b: grayscaleValue };
     }
     const channel = (temp1, temp2, temp3) => {
@@ -118,7 +134,7 @@ export function hslToRgb(hsl) {
         return temp1;
     }, temp1 = lNormalized < half
         ? lNormalized * (sNormalizedOffset + sNormalized)
-        : lNormalized + sNormalized - lNormalized * sNormalized, temp2 = double * lNormalized - temp1, 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));
+        : lNormalized + sNormalized - lNormalized * sNormalized, temp2 = double * lNormalized - temp1, phaseThird = phaseNumerator / triple, red = Math.min(rgbMax, rgbMax * channel(temp2, temp1, hNormalized + phaseThird)), green = Math.min(rgbMax, rgbMax * channel(temp2, temp1, hNormalized)), blue = Math.min(rgbMax, rgbMax * channel(temp2, temp1, hNormalized - phaseThird));
     return { r: Math.round(red), g: Math.round(green), b: Math.round(blue) };
 }
 export function hslaToRgba(hsla) {
@@ -131,25 +147,37 @@ export function hslaToRgba(hsla) {
     };
 }
 export function getRandomRgbColor(min) {
-    const fixedMin = min ?? defaultRgbMin, fixedMax = rgbMax + identity;
+    const fixedMin = min ?? defaultRgbMin, fixedMax = rgbMax + identity, getRgbInRangeValue = () => Math.floor(getRandomInRange(fixedMin, fixedMax));
     return {
-        b: Math.floor(randomInRange(setRangeValue(fixedMin, fixedMax))),
-        g: Math.floor(randomInRange(setRangeValue(fixedMin, fixedMax))),
-        r: Math.floor(randomInRange(setRangeValue(fixedMin, fixedMax))),
+        b: getRgbInRangeValue(),
+        g: getRgbInRangeValue(),
+        r: getRgbInRangeValue(),
     };
 }
-export function getStyleFromRgb(color, opacity) {
-    return `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity ?? defaultOpacity})`;
+export function getStyleFromRgb(color, hdr, opacity) {
+    return hdr ? getHdrStyleFromRgb(color, opacity) : getSdrStyleFromRgb(color, opacity);
+}
+function getHdrStyleFromRgb(color, opacity) {
+    return `color(display-p3 ${(color.r / rgbMax).toString()} ${(color.g / rgbMax).toString()} ${(color.b / rgbMax).toString()} / ${(opacity ?? defaultOpacity).toString()})`;
+}
+function getSdrStyleFromRgb(color, opacity) {
+    return `rgba(${color.r.toString()}, ${color.g.toString()}, ${color.b.toString()}, ${(opacity ?? defaultOpacity).toString()})`;
 }
-export function getStyleFromHsl(color, opacity) {
-    return `hsla(${color.h}, ${color.s}%, ${color.l}%, ${opacity ?? defaultOpacity})`;
+export function getStyleFromHsl(color, hdr, opacity) {
+    return hdr ? getHdrStyleFromHsl(color, opacity) : getSdrStyleFromHsl(color, opacity);
+}
+function getHdrStyleFromHsl(color, opacity) {
+    return getHdrStyleFromRgb(hslToRgb(color), opacity);
+}
+function getSdrStyleFromHsl(color, opacity) {
+    return `hsla(${color.h.toString()}, ${color.s.toString()}%, ${color.l.toString()}%, ${(opacity ?? defaultOpacity).toString()})`;
 }
 export function colorMix(color1, color2, size1, size2) {
     let rgb1 = color1, rgb2 = color2;
-    if (rgb1.r === undefined) {
+    if (!Object.hasOwn(rgb1, "r")) {
         rgb1 = hslToRgb(color1);
     }
-    if (rgb2.r === undefined) {
+    if (!Object.hasOwn(rgb2, "r")) {
         rgb2 = hslToRgb(color2);
     }
     return {
@@ -177,6 +205,7 @@ export function getLinkColor(p1, p2, linkColor) {
     else {
         return linkColor;
     }
+    return undefined;
 }
 export function getLinkRandomColor(engine, optColor, blink, consent) {
     const color = isString(optColor) ? optColor : optColor.value;
@@ -254,27 +283,22 @@ function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
 }
 export function updateColorValue(data, range, decrease, delta) {
     const minLoops = 0, minDelay = 0, identity = 1, minVelocity = 0, minOffset = 0, velocityFactor = 3.6;
-    if (!data ||
-        !data.enable ||
+    if (!data.enable ||
         ((data.maxLoops ?? minLoops) > minLoops && (data.loops ?? minLoops) > (data.maxLoops ?? minLoops))) {
         return;
     }
-    if (!data.time) {
-        data.time = 0;
-    }
+    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 ? randomInRange(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 = getRangeMax(range), min = getRangeMin(range);
     if (!decrease || data.status === AnimationStatus.increasing) {
         data.value += velocity;
         if (data.value > max) {
-            if (!data.loops) {
-                data.loops = 0;
-            }
+            data.loops ??= 0;
             data.loops++;
             if (decrease) {
                 data.status = AnimationStatus.decreasing;
@@ -288,9 +312,7 @@ export function updateColorValue(data, range, decrease, delta) {
         data.value -= velocity;
         const minValue = 0;
         if (data.value < minValue) {
-            if (!data.loops) {
-                data.loops = 0;
-            }
+            data.loops ??= 0;
             data.loops++;
             data.status = AnimationStatus.increasing;
         }
@@ -305,17 +327,11 @@ export function updateColor(color, delta) {
         return;
     }
     const { h, s, l } = color, ranges = {
-        h: { min: 0, max: 360 },
-        s: { min: 0, max: 100 },
-        l: { min: 0, max: 100 },
+        h: { min: hMin, max: hMax },
+        s: { min: sMin, max: sMax },
+        l: { min: lMin, max: lMax },
     };
-    if (h) {
-        updateColorValue(h, ranges.h, false, delta);
-    }
-    if (s) {
-        updateColorValue(s, ranges.s, true, delta);
-    }
-    if (l) {
-        updateColorValue(l, ranges.l, true, delta);
-    }
+    updateColorValue(h, ranges.h, false, delta);
+    updateColorValue(s, ranges.s, true, delta);
+    updateColorValue(l, ranges.l, true, delta);
 }

package/esm/Utils/EventDispatcher.js

@@ -14,7 +14,9 @@ export class EventDispatcher {
     }
     dispatchEvent(type, args) {
         const listeners = this._listeners.get(type);
-        listeners?.forEach(handler => handler(args));
+        listeners?.forEach(handler => {
+            handler(args);
+        });
     }
     hasEventListener(type) {
         return !!this._listeners.get(type);

package/esm/Utils/LogUtils.js

@@ -0,0 +1,22 @@
+const errorPrefix = "tsParticles - Error";
+const _logger = {
+    debug: console.debug,
+    error: (message, optionalParams) => {
+        console.error(`${errorPrefix} - ${message}`, optionalParams);
+    },
+    info: console.info,
+    log: console.log,
+    verbose: console.log,
+    warning: console.warn,
+};
+export function setLogger(logger) {
+    _logger.debug = logger.debug;
+    _logger.error = logger.error;
+    _logger.info = logger.info;
+    _logger.log = logger.log;
+    _logger.verbose = logger.verbose;
+    _logger.warning = logger.warning;
+}
+export function getLogger() {
+    return _logger;
+}

package/esm/Utils/MathUtils.js

@@ -0,0 +1,158 @@
+import { MoveDirection } from "../Enums/Directions/MoveDirection.js";
+import { double, doublePI, empty, half, percentDenominator, quarter, threeQuarter } from "../Core/Utils/Constants.js";
+import { Vector } from "../Core/Utils/Vectors.js";
+import { isNumber } from "./TypeUtils.js";
+const piDeg = 180, degToRadFactor = Math.PI / piDeg;
+let _random = Math.random;
+const _animationLoop = {
+    nextFrame: (cb) => requestAnimationFrame(cb),
+    cancel: (idx) => {
+        cancelAnimationFrame(idx);
+    },
+};
+export function setRandom(rnd = Math.random) {
+    _random = rnd;
+}
+export function getRandom() {
+    const min = 0, max = 1;
+    return clamp(_random(), min, max - Number.EPSILON);
+}
+export function getRandomInRange(min, max) {
+    return getRandom() * (max - min) + min;
+}
+export function setAnimationFunctions(nextFrame, cancel) {
+    _animationLoop.nextFrame = (callback) => nextFrame(callback);
+    _animationLoop.cancel = (handle) => {
+        cancel(handle);
+    };
+}
+export function animate(fn) {
+    return _animationLoop.nextFrame(fn);
+}
+export function cancelAnimation(handle) {
+    _animationLoop.cancel(handle);
+}
+export function clamp(num, min, max) {
+    return Math.min(Math.max(num, min), max);
+}
+export function mix(comp1, comp2, weight1, weight2) {
+    return Math.floor((comp1 * weight1 + comp2 * weight2) / (weight1 + weight2));
+}
+export function randomInRangeValue(r) {
+    const max = getRangeMax(r), minOffset = 0;
+    let min = getRangeMin(r);
+    if (max === min) {
+        min = minOffset;
+    }
+    return getRandomInRange(min, max);
+}
+export function getRangeValue(value) {
+    return isNumber(value) ? value : randomInRangeValue(value);
+}
+export function getRangeMin(value) {
+    return isNumber(value) ? value : value.min;
+}
+export function getRangeMax(value) {
+    return isNumber(value) ? value : value.max;
+}
+export function setRangeValue(source, value) {
+    if (source === value || (value === undefined && isNumber(source))) {
+        return source;
+    }
+    const min = getRangeMin(source), max = getRangeMax(source);
+    return value !== undefined
+        ? {
+            min: Math.min(min, value),
+            max: Math.max(max, value),
+        }
+        : setRangeValue(min, max);
+}
+export function getDistances(pointA, pointB) {
+    const dx = pointA.x - pointB.x, dy = pointA.y - pointB.y, squareExp = 2;
+    return { dx: dx, dy: dy, distance: Math.sqrt(dx ** squareExp + dy ** squareExp) };
+}
+export function getDistance(pointA, pointB) {
+    return getDistances(pointA, pointB).distance;
+}
+export function degToRad(degrees) {
+    return degrees * degToRadFactor;
+}
+export function getParticleDirectionAngle(direction, position, center) {
+    if (isNumber(direction)) {
+        return degToRad(direction);
+    }
+    switch (direction) {
+        case MoveDirection.top:
+            return -Math.PI * half;
+        case MoveDirection.topRight:
+            return -Math.PI * quarter;
+        case MoveDirection.right:
+            return empty;
+        case MoveDirection.bottomRight:
+            return Math.PI * quarter;
+        case MoveDirection.bottom:
+            return Math.PI * half;
+        case MoveDirection.bottomLeft:
+            return Math.PI * threeQuarter;
+        case MoveDirection.left:
+            return Math.PI;
+        case MoveDirection.topLeft:
+            return -Math.PI * threeQuarter;
+        case MoveDirection.inside:
+            return Math.atan2(center.y - position.y, center.x - position.x);
+        case MoveDirection.outside:
+            return Math.atan2(position.y - center.y, position.x - center.x);
+        default:
+            return getRandom() * doublePI;
+    }
+}
+export function getParticleBaseVelocity(direction) {
+    const baseVelocity = Vector.origin;
+    baseVelocity.length = 1;
+    baseVelocity.angle = direction;
+    return baseVelocity;
+}
+export function collisionVelocity(v1, v2, m1, m2) {
+    return Vector.create((v1.x * (m1 - m2)) / (m1 + m2) + (v2.x * double * m2) / (m1 + m2), v1.y);
+}
+export function calcPositionFromSize(data) {
+    return data.position?.x !== undefined && data.position.y !== undefined
+        ? {
+            x: (data.position.x * data.size.width) / percentDenominator,
+            y: (data.position.y * data.size.height) / percentDenominator,
+        }
+        : undefined;
+}
+export function calcPositionOrRandomFromSize(data) {
+    return {
+        x: ((data.position?.x ?? getRandom() * percentDenominator) * data.size.width) / percentDenominator,
+        y: ((data.position?.y ?? getRandom() * percentDenominator) * data.size.height) / percentDenominator,
+    };
+}
+export function calcPositionOrRandomFromSizeRanged(data) {
+    const position = {
+        x: data.position?.x !== undefined ? getRangeValue(data.position.x) : undefined,
+        y: data.position?.y !== undefined ? getRangeValue(data.position.y) : undefined,
+    };
+    return calcPositionOrRandomFromSize({ size: data.size, position });
+}
+export function calcExactPositionOrRandomFromSize(data) {
+    return {
+        x: data.position?.x ?? getRandom() * data.size.width,
+        y: data.position?.y ?? getRandom() * data.size.height,
+    };
+}
+export function calcExactPositionOrRandomFromSizeRanged(data) {
+    const position = {
+        x: data.position?.x !== undefined ? getRangeValue(data.position.x) : undefined,
+        y: data.position?.y !== undefined ? getRangeValue(data.position.y) : undefined,
+    };
+    return calcExactPositionOrRandomFromSize({ size: data.size, position });
+}
+export function parseAlpha(input) {
+    const defaultAlpha = 1;
+    if (!input) {
+        return defaultAlpha;
+    }
+    return input.endsWith("%") ? parseFloat(input) / percentDenominator : parseFloat(input);
+}