tsparticles 1.42.2 → 1.43.0

package/browser/Utils/CanvasUtils.js

@@ -1,11 +1,25 @@
 import { colorMix, colorToRgb, getStyleFromHsl, getStyleFromRgb } from "./ColorUtils";
 import { getDistance, getDistances } from "./NumberUtils";
+/**
+ * Draws a line between two points using canvas API in the given context.
+ * @hidden
+ * @param context - The canvas context to draw on.
+ * @param begin - The begin point of the line.
+ * @param end - The end point of the line.
+ */
 function drawLine(context, begin, end) {
     context.beginPath();
     context.moveTo(begin.x, begin.y);
     context.lineTo(end.x, end.y);
     context.closePath();
 }
+/**
+ * Draws a triangle with three points using canvas API in the given context.
+ * @param context - The canvas context to draw on.
+ * @param p1 - The first point of the triangle.
+ * @param p2 - The second point of the triangle.
+ * @param p3 - The third point of the triangle.
+ */
 function drawTriangle(context, p1, p2, p3) {
     context.beginPath();
     context.moveTo(p1.x, p1.y);
@@ -13,15 +27,41 @@ function drawTriangle(context, p1, p2, p3) {
     context.lineTo(p3.x, p3.y);
     context.closePath();
 }
+/**
+ * Fills a rectangle with the given color for the whole canvas.
+ * @param context - The canvas context to draw on.
+ * @param dimension - The dimension of the rectangle.
+ * @param baseColor - The base color of the rectangle, if not specified a transparent color will be used.
+ */
 export function paintBase(context, dimension, baseColor) {
     context.save();
     context.fillStyle = baseColor !== null && baseColor !== void 0 ? baseColor : "rgba(0,0,0,0)";
     context.fillRect(0, 0, dimension.width, dimension.height);
     context.restore();
 }
+/**
+ * Clears the canvas.
+ * @param context - The canvas context to clear.
+ * @param dimension - The dimension of the canvas.
+ */
 export function clear(context, dimension) {
     context.clearRect(0, 0, dimension.width, dimension.height);
 }
+/**
+ * Draws a line between two particles using canvas API in the given context.
+ * @param context - The canvas context to draw on.
+ * @param width - The width of the line.
+ * @param begin - The begin point of the line.
+ * @param end - The end point of the line.
+ * @param maxDistance - The maximum distance of the line.
+ * @param canvasSize - The dimension of the canvas.
+ * @param warp - If enabled, the line will be warped.
+ * @param backgroundMask - If enabled, the composite value will be used for blending the line in the canvas.
+ * @param composite - The composite value to use for blending the line in the canvas.
+ * @param colorLine - The color of the line.
+ * @param opacity - The opacity of the line.
+ * @param shadow - The shadow of the line.
+ */
 export function drawLinkLine(context, width, begin, end, maxDistance, canvasSize, warp, backgroundMask, composite, colorLine, opacity, shadow) {
     // this.ctx.lineCap = "round"; /* performance issue */
     /* path */
@@ -31,13 +71,11 @@ export function drawLinkLine(context, width, begin, end, maxDistance, canvasSize
         drawn = true;
     }
     else if (warp) {
-        let pi1;
-        let pi2;
+        let pi1, pi2;
         const endNE = {
             x: end.x - canvasSize.width,
             y: end.y,
-        };
-        const d1 = getDistances(begin, endNE);
+        }, d1 = getDistances(begin, endNE);
         if (d1.distance <= maxDistance) {
             const yi = begin.y - (d1.dy / d1.dx) * begin.x;
             pi1 = { x: 0, y: yi };
@@ -47,11 +85,9 @@ export function drawLinkLine(context, width, begin, end, maxDistance, canvasSize
             const endSW = {
                 x: end.x,
                 y: end.y - canvasSize.height,
-            };
-            const d2 = getDistances(begin, endSW);
+            }, d2 = getDistances(begin, endSW);
             if (d2.distance <= maxDistance) {
-                const yi = begin.y - (d2.dy / d2.dx) * begin.x;
-                const xi = -yi / (d2.dy / d2.dx);
+                const yi = begin.y - (d2.dy / d2.dx) * begin.x, xi = -yi / (d2.dy / d2.dx);
                 pi1 = { x: xi, y: 0 };
                 pi2 = { x: xi, y: canvasSize.height };
             }
@@ -59,11 +95,9 @@ export function drawLinkLine(context, width, begin, end, maxDistance, canvasSize
                 const endSE = {
                     x: end.x - canvasSize.width,
                     y: end.y - canvasSize.height,
-                };
-                const d3 = getDistances(begin, endSE);
+                }, d3 = getDistances(begin, endSE);
                 if (d3.distance <= maxDistance) {
-                    const yi = begin.y - (d3.dy / d3.dx) * begin.x;
-                    const xi = -yi / (d3.dy / d3.dx);
+                    const yi = begin.y - (d3.dy / d3.dx) * begin.x, xi = -yi / (d3.dy / d3.dx);
                     pi1 = { x: xi, y: yi };
                     pi2 = { x: pi1.x + canvasSize.width, y: pi1.y + canvasSize.height };
                 }
@@ -92,6 +126,17 @@ export function drawLinkLine(context, width, begin, end, maxDistance, canvasSize
     }
     context.stroke();
 }
+/**
+ * Draws a triangle between three particles using canvas API in the given context.
+ * @param context - The canvas context to draw on.
+ * @param pos1 - The first position of the triangle.
+ * @param pos2 - The second position of the triangle.
+ * @param pos3 - The third position of the triangle.
+ * @param backgroundMask - If enabled, the composite value will be used for blending the triangle in the canvas.
+ * @param composite - The composite value to use for blending the triangle in the canvas.
+ * @param colorTriangle - The color of the triangle.
+ * @param opacityTriangle - The opacity of the triangle.
+ */
 export function drawLinkTriangle(context, pos1, pos2, pos3, backgroundMask, composite, colorTriangle, opacityTriangle) {
     // this.ctx.lineCap = "round"; /* performance issue */
     /* path */
@@ -102,6 +147,14 @@ export function drawLinkTriangle(context, pos1, pos2, pos3, backgroundMask, comp
     context.fillStyle = getStyleFromRgb(colorTriangle, opacityTriangle);
     context.fill();
 }
+/**
+ * Draws a line connecting two points using canvas API in the given context.
+ * @param context - The canvas context to draw on.
+ * @param width - The width of the line.
+ * @param lineStyle - The style of the line.
+ * @param begin - The first position of the line.
+ * @param end - The second position of the line.
+ */
 export function drawConnectLine(context, width, lineStyle, begin, end) {
     context.save();
     drawLine(context, begin, end);
@@ -110,22 +163,33 @@ export function drawConnectLine(context, width, lineStyle, begin, end) {
     context.stroke();
     context.restore();
 }
+/**
+ * Creates a gradient using two particles colors and opacity.
+ * @param context - The canvas context to draw on.
+ * @param p1 - The first particle.
+ * @param p2 - The second particle.
+ * @param opacity - The opacity of the gradient.
+ */
 export function gradient(context, p1, p2, opacity) {
-    const gradStop = Math.floor(p2.getRadius() / p1.getRadius());
-    const color1 = p1.getFillColor();
-    const color2 = p2.getFillColor();
+    const gradStop = Math.floor(p2.getRadius() / p1.getRadius()), color1 = p1.getFillColor(), color2 = p2.getFillColor();
     if (!color1 || !color2) {
         return;
     }
-    const sourcePos = p1.getPosition();
-    const destPos = p2.getPosition();
-    const midRgb = colorMix(color1, color2, p1.getRadius(), p2.getRadius());
-    const grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);
+    const sourcePos = p1.getPosition(), destPos = p2.getPosition(), midRgb = colorMix(color1, color2, p1.getRadius(), p2.getRadius()), grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);
     grad.addColorStop(0, getStyleFromHsl(color1, opacity));
     grad.addColorStop(gradStop > 1 ? 1 : gradStop, getStyleFromRgb(midRgb, opacity));
     grad.addColorStop(1, getStyleFromHsl(color2, opacity));
     return grad;
 }
+/**
+ * Draws a grab line between two points using canvas API in the given context.
+ * @param context - The canvas context to draw on.
+ * @param width - The width of the line.
+ * @param begin - The first position of the line.
+ * @param end - The second position of the line.
+ * @param colorLine - The color of the line.
+ * @param opacity - The opacity of the line.
+ */
 export function drawGrabLine(context, width, begin, end, colorLine, opacity) {
     context.save();
     drawLine(context, begin, end);
@@ -134,17 +198,25 @@ export function drawGrabLine(context, width, begin, end, colorLine, opacity) {
     context.stroke();
     context.restore();
 }
-export function drawParticle(container, context, particle, delta, fillColorValue, strokeColorValue, backgroundMask, composite, radius, opacity, shadow, gradient) {
-    var _a, _b, _c, _d, _e, _f;
-    const pos = particle.getPosition();
-    const tiltOptions = particle.options.tilt;
-    const rollOptions = particle.options.roll;
+/**
+ * Draws the particle using canvas API in the given context.
+ * @param container - The container of the particle.
+ * @param context - The canvas context to draw on.
+ * @param particle - The particle to draw.
+ * @param delta this variable contains the delta between the current frame and the previous frame
+ * @param colorStyles - The color styles value.
+ * @param backgroundMask - If enabled, the composite value will be used for blending the particle in the canvas.
+ * @param composite - The composite value to use for blending the particle in the canvas.
+ * @param radius - The radius of the particle.
+ * @param opacity - The opacity of the particle.
+ * @param shadow - The shadow of the particle.
+ */
+export function drawParticle(container, context, particle, delta, colorStyles, backgroundMask, composite, radius, opacity, shadow) {
+    var _a, _b, _c, _d;
+    const pos = particle.getPosition(), tiltOptions = particle.options.tilt, rollOptions = particle.options.roll;
     context.save();
     if (tiltOptions.enable || rollOptions.enable) {
-        const roll = rollOptions.enable && particle.roll;
-        const tilt = tiltOptions.enable && particle.tilt;
-        const rollHorizontal = roll && (rollOptions.mode === "horizontal" /* horizontal */ || rollOptions.mode === "both" /* both */);
-        const rollVertical = roll && (rollOptions.mode === "vertical" /* vertical */ || rollOptions.mode === "both" /* both */);
+        const roll = rollOptions.enable && particle.roll, tilt = tiltOptions.enable && particle.tilt, rollHorizontal = roll && (rollOptions.mode === "horizontal" /* horizontal */ || rollOptions.mode === "both" /* both */), rollVertical = roll && (rollOptions.mode === "vertical" /* vertical */ || rollOptions.mode === "both" /* both */);
         context.setTransform(rollHorizontal ? Math.cos(particle.roll.angle) : 1, tilt ? Math.cos(particle.tilt.value) * particle.tilt.cosDirection : 0, tilt ? Math.sin(particle.tilt.value) * particle.tilt.sinDirection : 0, rollVertical ? Math.sin(particle.roll.angle) : 1, pos.x, pos.y);
     }
     else {
@@ -165,32 +237,16 @@ export function drawParticle(container, context, particle, delta, fillColorValue
         context.shadowOffsetX = shadow.offset.x;
         context.shadowOffsetY = shadow.offset.y;
     }
-    if (gradient) {
-        const gradientAngle = gradient.angle.value;
-        const fillGradient = gradient.type === "radial" /* radial */
-            ? context.createRadialGradient(0, 0, 0, 0, 0, radius)
-            : context.createLinearGradient(Math.cos(gradientAngle) * -radius, Math.sin(gradientAngle) * -radius, Math.cos(gradientAngle) * radius, Math.sin(gradientAngle) * radius);
-        for (const color of gradient.colors) {
-            fillGradient.addColorStop(color.stop, getStyleFromHsl({
-                h: color.value.h.value,
-                s: color.value.s.value,
-                l: color.value.l.value,
-            }, (_d = (_c = color.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : opacity));
-        }
-        context.fillStyle = fillGradient;
-    }
-    else {
-        if (fillColorValue) {
-            context.fillStyle = fillColorValue;
-        }
+    if (colorStyles.fill) {
+        context.fillStyle = colorStyles.fill;
     }
     const stroke = particle.stroke;
-    context.lineWidth = (_e = particle.strokeWidth) !== null && _e !== void 0 ? _e : 0;
-    if (strokeColorValue) {
-        context.strokeStyle = strokeColorValue;
+    context.lineWidth = (_c = particle.strokeWidth) !== null && _c !== void 0 ? _c : 0;
+    if (colorStyles.stroke) {
+        context.strokeStyle = colorStyles.stroke;
     }
     drawShape(container, context, particle, radius, opacity, delta);
-    if (((_f = stroke === null || stroke === void 0 ? void 0 : stroke.width) !== null && _f !== void 0 ? _f : 0) > 0) {
+    if (((_d = stroke === null || stroke === void 0 ? void 0 : stroke.width) !== null && _d !== void 0 ? _d : 0) > 0) {
         context.stroke();
     }
     if (particle.close) {
@@ -216,6 +272,15 @@ export function drawParticle(container, context, particle, delta, fillColorValue
     drawShapeAfterEffect(container, context, particle, radius, opacity, delta);
     context.restore();
 }
+/**
+ * Draws the particle shape using the plugin's shape renderer.
+ * @param container The container of the particle.
+ * @param context The canvas context.
+ * @param particle The particle to draw.
+ * @param radius The radius of the particle.
+ * @param opacity The opacity of the particle.
+ * @param delta this variable contains the delta between the current frame and the previous frame
+ */
 export function drawShape(container, context, particle, radius, opacity, delta) {
     if (!particle.shape) {
         return;
@@ -226,6 +291,15 @@ export function drawShape(container, context, particle, radius, opacity, delta)
     }
     drawer.draw(context, particle, radius, opacity, delta, container.retina.pixelRatio);
 }
+/**
+ * Draws the particle effect after the plugin's shape renderer.
+ * @param container The container of the particle.
+ * @param context The canvas context.
+ * @param particle The particle to draw.
+ * @param radius The radius of the particle.
+ * @param opacity The opacity of the particle.
+ * @param delta this variable contains the delta between the current frame and the previous frame
+ */
 export function drawShapeAfterEffect(container, context, particle, radius, opacity, delta) {
     if (!particle.shape) {
         return;
@@ -236,6 +310,12 @@ export function drawShapeAfterEffect(container, context, particle, radius, opaci
     }
     drawer.afterEffect(context, particle, radius, opacity, delta, container.retina.pixelRatio);
 }
+/**
+ * Draws the given plugin in the canvas.
+ * @param context The canvas context.
+ * @param plugin The plugin to draw.
+ * @param delta this variable contains the delta between the current frame and the previous frame
+ */
 export function drawPlugin(context, plugin, delta) {
     if (!plugin.draw) {
         return;
@@ -244,27 +324,53 @@ export function drawPlugin(context, plugin, delta) {
     plugin.draw(context, delta);
     context.restore();
 }
+/**
+ * Draws the given particle plugin in the canvas.
+ * @param context The canvas context.
+ * @param plugin The particle plugin to draw.
+ * @param particle The particle to draw.
+ * @param delta this variable contains the delta between the current frame and the previous frame
+ */
 export function drawParticlePlugin(context, plugin, particle, delta) {
-    if (plugin.drawParticle !== undefined) {
-        context.save();
-        plugin.drawParticle(context, particle, delta);
-        context.restore();
+    if (!plugin.drawParticle) {
+        return;
     }
+    context.save();
+    plugin.drawParticle(context, particle, delta);
+    context.restore();
 }
+/**
+ * Draws an ellipse for the given particle.
+ * @param context The canvas context.
+ * @param particle The particle to draw.
+ * @param fillColorValue The particle fill color.
+ * @param radius The radius of the particle.
+ * @param opacity The opacity of the particle.
+ * @param width The width of the particle.
+ * @param rotation The rotation of the particle.
+ * @param start The start angle of the particle.
+ * @param end The end angle of the particle.
+ */
 export function drawEllipse(context, particle, fillColorValue, radius, opacity, width, rotation, start, end) {
+    if (width <= 0) {
+        return;
+    }
     const pos = particle.getPosition();
     if (fillColorValue) {
         context.strokeStyle = getStyleFromHsl(fillColorValue, opacity);
     }
-    if (width === 0) {
-        return;
-    }
     context.lineWidth = width;
     const rotationRadian = (rotation * Math.PI) / 180;
     context.beginPath();
     context.ellipse(pos.x, pos.y, radius / 2, radius * 2, rotationRadian, start, end);
     context.stroke();
 }
+/**
+ * Alters HSL values for enlighten or darken the given color.
+ * @param color The color to enlighten or darken.
+ * @param type The type of alteration.
+ * @param value The value of the alteration.
+ */
 export function alterHsl(color, type, value) {
     return {
         h: color.h,

package/browser/Utils/ColorUtils.js

@@ -1,8 +1,9 @@
 import { getRangeValue, mix, randomInRange, setRangeValue } from "./NumberUtils";
-import { Constants } from "../Core";
+import { Constants } from "../Core/Utils/Constants";
 import { itemFromArray } from "./Utils";
 /**
- *
+ * Converts hue to RGB values.
+ * @hidden
  * @param p
  * @param q
  * @param t
@@ -26,6 +27,10 @@ function hue2rgb(p, q, t) {
     }
     return p;
 }
+/**
+ * Converts a string to a RGBA color.
+ * @param input A string that represents a color.
+ */
 function stringToRgba(input) {
     if (input.startsWith("rgb")) {
         const regex = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(,\s*([\d.]+)\s*)?\)/i;
@@ -96,12 +101,7 @@ export function colorToRgb(input, index, useIndex = true) {
     const color = typeof input === "string" ? { value: input } : input;
     let res;
     if (typeof color.value === "string") {
-        if (color.value === Constants.randomColorValue) {
-            res = getRandomRgbColor();
-        }
-        else {
-            res = stringToRgb(color.value);
-        }
+        res = color.value === Constants.randomColorValue ? getRandomRgbColor() : stringToRgb(color.value);
     }
     else {
         if (color.value instanceof Array) {
@@ -109,8 +109,7 @@ export function colorToRgb(input, index, useIndex = true) {
             res = colorToRgb({ value: colorSelected });
         }
         else {
-            const colorValue = color.value;
-            const rgbColor = (_a = colorValue.rgb) !== null && _a !== void 0 ? _a : color.value;
+            const colorValue = color.value, rgbColor = (_a = colorValue.rgb) !== null && _a !== void 0 ? _a : color.value;
             if (rgbColor.r !== undefined) {
                 res = rgbColor;
             }
@@ -135,24 +134,27 @@ export function colorToRgb(input, index, useIndex = true) {
  * @param color the input color to convert in [[IHsl]] object
  * @param index the array index, if needed
  * @param useIndex set to false to ignore the index parameter
+ * @returns the [[IHsl]] object
  */
 export function colorToHsl(color, index, useIndex = true) {
     const rgb = colorToRgb(color, index, useIndex);
     return rgb !== undefined ? rgbToHsl(rgb) : undefined;
 }
+/**
+ * Converts rgb color to hsl color
+ * @param color rgb color to convert
+ * @returns hsl color
+ */
 export function rgbToHsl(color) {
-    const r1 = color.r / 255;
-    const g1 = color.g / 255;
-    const b1 = color.b / 255;
-    const max = Math.max(r1, g1, b1);
-    const min = Math.min(r1, g1, b1);
+    const r1 = color.r / 255, g1 = color.g / 255, b1 = color.b / 255;
+    const max = Math.max(r1, g1, b1), min = Math.min(r1, g1, b1);
     //Calculate L:
     const res = {
         h: 0,
         l: (max + min) / 2,
         s: 0,
     };
-    if (max != min) {
+    if (max !== min) {
         //Calculate S:
         res.s = res.l < 0.5 ? (max - min) / (max + min) : (max - min) / (2.0 - max - min);
         //Calculate H:
@@ -169,6 +171,11 @@ export function rgbToHsl(color) {
     }
     return res;
 }
+/**
+ * Gets alpha value from string color
+ * @param input the input color to convert in alpha value
+ * @returns the alpha value
+ */
 export function stringToAlpha(input) {
     var _a;
     return (_a = stringToRgba(input)) === null || _a === void 0 ? void 0 : _a.a;
@@ -176,17 +183,18 @@ export function stringToAlpha(input) {
 /**
  * Converts hexadecimal string (HTML color code) in a [[IRgb]] object
  * @param input the hexadecimal string (#f70 or #ff7700)
+ * @returns the [[IRgb]] object
  */
 export function stringToRgb(input) {
     return stringToRgba(input);
 }
 /**
  * Converts a Hue Saturation Lightness ([[IHsl]]) object in a [[IRgb]] object
- * @param hsl
+ * @param hsl the Hue Saturation Lightness ([[IHsl]]) object
+ * @returns the [[IRgb]] object
  */
 export function hslToRgb(hsl) {
-    const result = { b: 0, g: 0, r: 0 };
-    const hslPercent = {
+    const result = { b: 0, g: 0, r: 0 }, hslPercent = {
         h: hsl.h / 360,
         l: hsl.l / 100,
         s: hsl.s / 100,
@@ -199,8 +207,7 @@ export function hslToRgb(hsl) {
     else {
         const q = hslPercent.l < 0.5
             ? hslPercent.l * (1 + hslPercent.s)
-            : hslPercent.l + hslPercent.s - hslPercent.l * hslPercent.s;
-        const p = 2 * hslPercent.l - q;
+            : hslPercent.l + hslPercent.s - hslPercent.l * hslPercent.s, p = 2 * hslPercent.l - q;
         result.r = hue2rgb(p, q, hslPercent.h + 1 / 3);
         result.g = hue2rgb(p, q, hslPercent.h);
         result.b = hue2rgb(p, q, hslPercent.h - 1 / 3);
@@ -210,6 +217,11 @@ export function hslToRgb(hsl) {
     result.b = Math.floor(result.b * 255);
     return result;
 }
+/**
+ * Converts HSLA color to RGBA color
+ * @param hsla the HSLA color to convert
+ * @returns the RGBA color
+ */
 export function hslaToRgba(hsla) {
     const rgbResult = hslToRgb(hsla);
     return {
@@ -219,15 +231,24 @@ export function hslaToRgba(hsla) {
         r: rgbResult.r,
     };
 }
+/**
+ * Converts a Hue Saturation Lightness ([[IHsl]]) object in a [[IHsv]] object
+ * @param hsl the Hue Saturation Lightness ([[IHsl]]) object
+ * @returns the [[IHsv]] object
+ */
 export function hslToHsv(hsl) {
-    const l = hsl.l / 100, sl = hsl.s / 100;
-    const v = l + sl * Math.min(l, 1 - l), sv = !v ? 0 : 2 * (1 - l / v);
+    const l = hsl.l / 100, sl = hsl.s / 100, v = l + sl * Math.min(l, 1 - l), sv = !v ? 0 : 2 * (1 - l / v);
     return {
         h: hsl.h,
         s: sv * 100,
         v: v * 100,
     };
 }
+/**
+ * Converts a Hue Saturation Lightness ([[IHsla]]) object in a [[IHsva]] object
+ * @param hsla the Hue Saturation Lightness ([[IHsla]]) object
+ * @returns the [[IHsva]] object
+ */
 export function hslaToHsva(hsla) {
     const hsvResult = hslToHsv(hsla);
     return {
@@ -237,15 +258,24 @@ export function hslaToHsva(hsla) {
         v: hsvResult.v,
     };
 }
+/**
+ * Converts a Hue Saturation Lightness ([[IHsv]]) object in a [[IHsl]] object
+ * @param hsv the Hue Saturation Lightness ([[IHsv]]) object
+ * @returns the [[IHsl]] object
+ */
 export function hsvToHsl(hsv) {
-    const v = hsv.v / 100, sv = hsv.s / 100;
-    const l = v * (1 - sv / 2), sl = l === 0 || l === 1 ? 0 : (v - l) / Math.min(l, 1 - l);
+    const v = hsv.v / 100, sv = hsv.s / 100, l = v * (1 - sv / 2), sl = l === 0 || l === 1 ? 0 : (v - l) / Math.min(l, 1 - l);
     return {
         h: hsv.h,
         l: l * 100,
         s: sl * 100,
     };
 }
+/**
+ * Converts a Hue Saturation Lightness ([[IHsva]]) object in a [[IHsla]] object
+ * @param hsva the Hue Saturation Lightness ([[IHsva]]) object
+ * @returns the [[IHsla]] object
+ */
 export function hsvaToHsla(hsva) {
     const hslResult = hsvToHsl(hsva);
     return {
@@ -255,9 +285,13 @@ export function hsvaToHsla(hsva) {
         s: hslResult.s,
     };
 }
+/**
+ * Converts a Hue Saturation Lightness ([[IHsv]]) object in a [[IRgb]] object
+ * @param hsv the Hue Saturation Lightness ([[IHsv]]) object
+ * @returns the [[IRgb]] object
+ */
 export function hsvToRgb(hsv) {
-    const result = { b: 0, g: 0, r: 0 };
-    const hsvPercent = {
+    const result = { b: 0, g: 0, r: 0 }, hsvPercent = {
         h: hsv.h / 60,
         s: hsv.s / 100,
         v: hsv.v / 100,
@@ -314,6 +348,11 @@ export function hsvToRgb(hsv) {
     }
     return result;
 }
+/**
+ * Converts a Hue Saturation Value ([[IHsva]]) object in a [[IRgba]] object
+ * @param hsva the Hue Saturation Value ([[IHsva]]) object
+ * @returns the [[IRgba]] object
+ */
 export function hsvaToRgba(hsva) {
     const rgbResult = hsvToRgb(hsva);
     return {
@@ -323,6 +362,11 @@ export function hsvaToRgba(hsva) {
         r: rgbResult.r,
     };
 }
+/**
+ * Converts a RGB ([[IRgb]]) object in a [[IHsv]] object
+ * @param rgb the RGB ([[IRgb]]) object
+ * @returns the [[IHsv]] object
+ */
 export function rgbToHsv(rgb) {
     const rgbPercent = {
         r: rgb.r / 255,
@@ -346,6 +390,10 @@ export function rgbToHsv(rgb) {
         v: v * 100,
     };
 }
+/**
+ * Converts a RGB ([[IRgba]]) object in a [[IHsva]] object
+ * @param rgba the RGB ([[IRgba]]) object
+ */
 export function rgbaToHsva(rgba) {
     const hsvResult = rgbToHsv(rgba);
     return {
@@ -355,6 +403,11 @@ export function rgbaToHsva(rgba) {
         v: hsvResult.v,
     };
 }
+/**
+ * Returns a random ([[IRgb]]) color
+ * @param min the minimum value for the color
+ * @returns the random ([[IRgb]]) color
+ */
 export function getRandomRgbColor(min) {
     const fixedMin = min !== null && min !== void 0 ? min : 0;
     return {
@@ -363,18 +416,35 @@ export function getRandomRgbColor(min) {
         r: Math.floor(randomInRange(setRangeValue(fixedMin, 256))),
     };
 }
+/**
+ * Gets a CSS style string from a [[IRgb]] object and opacity value
+ * @param color the [[IRgb]] input color
+ * @param opacity the opacity value
+ * @returns the CSS style string
+ */
 export function getStyleFromRgb(color, opacity) {
     return `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity !== null && opacity !== void 0 ? opacity : 1})`;
 }
+/**
+ * Gets a CSS style string from a [[IHsl]] object and opacity value
+ * @param color the [[IHsl]] input color
+ * @param opacity the opacity value
+ * @returns the CSS style string
+ */
 export function getStyleFromHsl(color, opacity) {
     return `hsla(${color.h}, ${color.s}%, ${color.l}%, ${opacity !== null && opacity !== void 0 ? opacity : 1})`;
 }
+/**
+ * Gets a CSS style string from a [[IHsv]] object and opacity value
+ * @param color the [[IHsv]] input color
+ * @param opacity the opacity value
+ * @returns the CSS style string
+ */
 export function getStyleFromHsv(color, opacity) {
     return getStyleFromHsl(hsvToHsl(color), opacity);
 }
 export function colorMix(color1, color2, size1, size2) {
-    let rgb1 = color1;
-    let rgb2 = color2;
+    let rgb1 = color1, rgb2 = color2;
     if (rgb1.r === undefined) {
         rgb1 = hslToRgb(color1);
     }
@@ -393,8 +463,7 @@ export function getLinkColor(p1, p2, linkColor) {
         return getRandomRgbColor();
     }
     else if (linkColor === "mid") {
-        const sourceColor = (_a = p1.getFillColor()) !== null && _a !== void 0 ? _a : p1.getStrokeColor();
-        const destColor = (_b = p2 === null || p2 === void 0 ? void 0 : p2.getFillColor()) !== null && _b !== void 0 ? _b : p2 === null || p2 === void 0 ? void 0 : p2.getStrokeColor();
+        const sourceColor = (_a = p1.getFillColor()) !== null && _a !== void 0 ? _a : p1.getStrokeColor(), destColor = (_b = p2 === null || p2 === void 0 ? void 0 : p2.getFillColor()) !== null && _b !== void 0 ? _b : p2 === null || p2 === void 0 ? void 0 : p2.getStrokeColor();
         if (sourceColor && destColor && p2) {
             return colorMix(sourceColor, destColor, p1.getRadius(), p2.getRadius());
         }