@tsparticles/plugin-hsv-color 3.0.3 → 3.2.0

package/385.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 385.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_plugin_hsv_color=this.webpackChunk_tsparticles_plugin_hsv_color||[]).push([[385],{385:(s,r,e)=>{e.d(r,{HsvColorManager:()=>o});var t=e(533);const a=255;function n(s){const r={b:0,g:0,r:0},e=s.h/60,n=s.s/t.percentDenominator,o=s.v/t.percentDenominator,h=o*n,v=h*(1-Math.abs(e%2-1));let i;if(e>=0&&e<=1?i={r:h,g:v,b:0}:e>1&&e<=2?i={r:v,g:h,b:0}:e>2&&e<=3?i={r:0,g:h,b:v}:e>3&&e<=4?i={r:0,g:v,b:h}:e>4&&e<=5?i={r:v,g:0,b:h}:e>5&&e<=6&&(i={r:h,g:0,b:v}),i){const s=o-h;r.r=Math.floor((i.r+s)*a),r.g=Math.floor((i.g+s)*a),r.b=Math.floor((i.b+s)*a)}return r}class o{constructor(){this.key="hsv",this.stringPrefix="hsv"}handleColor(s){const r=s.value.hsv??s.value;if(void 0!==r.h&&void 0!==r.v)return n(r)}handleRangeColor(s){const r=s.value.hsv??s.value;if(void 0!==r.h&&void 0!==r.v)return n({h:(0,t.getRangeValue)(r.h),s:(0,t.getRangeValue)(r.s),v:(0,t.getRangeValue)(r.v)})}parseString(s){if(!s.startsWith("hsv"))return;const r=/hsva?\(\s*(\d+)°\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(,\s*([\d.%]+)\s*)?\)/i.exec(s),e=1,a=2,o=3,h=5;return r?{a:(v={a:r.length>4?(0,t.parseAlpha)(r[h]):1,h:parseInt(r[e],10),s:parseInt(r[a],10),v:parseInt(r[o],10)}).a,...n(v)}:void 0;var v}}}}]);

package/385.min.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! tsParticles HSV Color Plugin v3.2.0 by Matteo Bruni */

package/browser/HsvColorManager.js

@@ -1,25 +1,31 @@
-import { getRangeValue, getStyleFromHsl, parseAlpha, } from "@tsparticles/engine";
+import { getRangeValue, getStyleFromHsl, parseAlpha, percentDenominator, } from "@tsparticles/engine";
+const rgbFactor = 255, double = 2, half = 0.5;
 export function rgbToHsv(rgb) {
     const rgbPercent = {
-        r: rgb.r / 255,
-        g: rgb.g / 255,
-        b: rgb.b / 255,
+        r: rgb.r / rgbFactor,
+        g: rgb.g / rgbFactor,
+        b: rgb.b / rgbFactor,
     }, xMax = Math.max(rgbPercent.r, rgbPercent.g, rgbPercent.b), xMin = Math.min(rgbPercent.r, rgbPercent.g, rgbPercent.b), v = xMax, c = xMax - xMin;
     let h = 0;
+    const phaseOffset = {
+        r: 0,
+        g: 2,
+        b: 4,
+    }, phaseValue = 60;
     if (v === rgbPercent.r) {
-        h = 60 * ((rgbPercent.g - rgbPercent.b) / c);
+        h = phaseValue * (phaseOffset.r + (rgbPercent.g - rgbPercent.b) / c);
     }
     else if (v === rgbPercent.g) {
-        h = 60 * (2 + (rgbPercent.b - rgbPercent.r) / c);
+        h = phaseValue * (phaseOffset.g + (rgbPercent.b - rgbPercent.r) / c);
     }
     else if (v === rgbPercent.b) {
-        h = 60 * (4 + (rgbPercent.r - rgbPercent.g) / c);
+        h = phaseValue * (phaseOffset.b + (rgbPercent.r - rgbPercent.g) / c);
     }
-    const s = !v ? 0 : c / v;
+    const defaultSaturation = 0, s = !v ? defaultSaturation : c / v;
     return {
         h,
-        s: s * 100,
-        v: v * 100,
+        s: s * percentDenominator,
+        v: v * percentDenominator,
     };
 }
 export function rgbaToHsva(rgba) {
@@ -32,11 +38,11 @@ export function getStyleFromHsv(color, opacity) {
     return getStyleFromHsl(hsvToHsl(color), opacity);
 }
 export function hslToHsv(hsl) {
-    const l = hsl.l / 100, sl = hsl.s / 100, v = l + sl * Math.min(l, 1 - l), sv = !v ? 0 : 2 * (1 - l / v);
+    const l = hsl.l / percentDenominator, sl = hsl.s / percentDenominator, offset = 1, noValue = 0, v = l + sl * Math.min(l, offset - l), sv = !v ? noValue : double * (offset - l / v);
     return {
         h: hsl.h,
-        s: sv * 100,
-        v: v * 100,
+        s: sv * percentDenominator,
+        v: v * percentDenominator,
     };
 }
 export function hslaToHsva(hsla) {
@@ -46,11 +52,11 @@ export function hslaToHsva(hsla) {
     };
 }
 export function hsvToHsl(hsv) {
-    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);
+    const v = hsv.v / percentDenominator, sv = hsv.s / percentDenominator, offset = 1, noValue = 0, l = v * (offset - sv * half), sl = !l || l === offset ? noValue : (v - l) / Math.min(l, offset - l);
     return {
         h: hsv.h,
-        l: l * 100,
-        s: sl * 100,
+        l: l * percentDenominator,
+        s: sl * percentDenominator,
     };
 }
 export function hsvaToHsla(hsva) {
@@ -60,48 +66,49 @@ export function hsvaToHsla(hsva) {
     };
 }
 export function hsvToRgb(hsv) {
-    const result = { b: 0, g: 0, r: 0 }, hsvPercent = {
-        h: hsv.h / 60,
-        s: hsv.s / 100,
-        v: hsv.v / 100,
-    }, c = hsvPercent.v * hsvPercent.s, x = c * (1 - Math.abs((hsvPercent.h % 2) - 1));
+    const result = { b: 0, g: 0, r: 0 }, phase = 60, hsvPercent = {
+        h: hsv.h / phase,
+        s: hsv.s / percentDenominator,
+        v: hsv.v / percentDenominator,
+    }, offset = 1, hPercentFactor = 2, c = hsvPercent.v * hsvPercent.s, x = c * (offset - Math.abs((hsvPercent.h % hPercentFactor) - offset));
     let tempRgb;
-    if (hsvPercent.h >= 0 && hsvPercent.h <= 1) {
+    const cxzRange = { min: 0, max: 1 }, xczRange = { min: 1, max: 2 }, zcxRange = { min: 2, max: 3 }, zxcRange = { min: 3, max: 4 }, xzcRange = { min: 4, max: 5 }, czxRange = { min: 5, max: 6 };
+    if (hsvPercent.h >= cxzRange.min && hsvPercent.h <= cxzRange.max) {
         tempRgb = {
             r: c,
             g: x,
             b: 0,
         };
     }
-    else if (hsvPercent.h > 1 && hsvPercent.h <= 2) {
+    else if (hsvPercent.h > xczRange.min && hsvPercent.h <= xczRange.max) {
         tempRgb = {
             r: x,
             g: c,
             b: 0,
         };
     }
-    else if (hsvPercent.h > 2 && hsvPercent.h <= 3) {
+    else if (hsvPercent.h > zcxRange.min && hsvPercent.h <= zcxRange.max) {
         tempRgb = {
             r: 0,
             g: c,
             b: x,
         };
     }
-    else if (hsvPercent.h > 3 && hsvPercent.h <= 4) {
+    else if (hsvPercent.h > zxcRange.min && hsvPercent.h <= zxcRange.max) {
         tempRgb = {
             r: 0,
             g: x,
             b: c,
         };
     }
-    else if (hsvPercent.h > 4 && hsvPercent.h <= 5) {
+    else if (hsvPercent.h > xzcRange.min && hsvPercent.h <= xzcRange.max) {
         tempRgb = {
             r: x,
             g: 0,
             b: c,
         };
     }
-    else if (hsvPercent.h > 5 && hsvPercent.h <= 6) {
+    else if (hsvPercent.h > czxRange.min && hsvPercent.h <= czxRange.max) {
         tempRgb = {
             r: c,
             g: 0,
@@ -110,9 +117,9 @@ export function hsvToRgb(hsv) {
     }
     if (tempRgb) {
         const m = hsvPercent.v - c;
-        result.r = Math.floor((tempRgb.r + m) * 255);
-        result.g = Math.floor((tempRgb.g + m) * 255);
-        result.b = Math.floor((tempRgb.b + m) * 255);
+        result.r = Math.floor((tempRgb.r + m) * rgbFactor);
+        result.g = Math.floor((tempRgb.g + m) * rgbFactor);
+        result.b = Math.floor((tempRgb.b + m) * rgbFactor);
     }
     return result;
 }
@@ -147,13 +154,18 @@ export class HsvColorManager {
         if (!input.startsWith("hsv")) {
             return;
         }
-        const regex = /hsva?\(\s*(\d+)°\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(,\s*([\d.%]+)\s*)?\)/i, result = regex.exec(input);
+        const regex = /hsva?\(\s*(\d+)°\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(,\s*([\d.%]+)\s*)?\)/i, result = regex.exec(input), fullLength = 4, indexes = {
+            h: 1,
+            s: 2,
+            v: 3,
+            a: 5,
+        }, defaultAlpha = 1, radix = 10;
         return result
             ? hsvaToRgba({
-                a: result.length > 4 ? parseAlpha(result[5]) : 1,
-                h: parseInt(result[1], 10),
-                s: parseInt(result[2], 10),
-                v: parseInt(result[3], 10),
+                a: result.length > fullLength ? parseAlpha(result[indexes.a]) : defaultAlpha,
+                h: parseInt(result[indexes.h], radix),
+                s: parseInt(result[indexes.s], radix),
+                v: parseInt(result[indexes.v], radix),
             })
             : undefined;
     }

package/browser/index.js

@@ -1,5 +1,5 @@
-import { HsvColorManager } from "./HsvColorManager.js";
 import { addColorManager } from "@tsparticles/engine";
 export async function loadHsvColorPlugin() {
+    const { HsvColorManager } = await import("./HsvColorManager.js");
     addColorManager(new HsvColorManager());
 }

package/cjs/HsvColorManager.js

@@ -2,27 +2,33 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HsvColorManager = exports.hsvaToRgba = exports.hsvToRgb = exports.hsvaToHsla = exports.hsvToHsl = exports.hslaToHsva = exports.hslToHsv = exports.getStyleFromHsv = exports.rgbaToHsva = exports.rgbToHsv = void 0;
 const engine_1 = require("@tsparticles/engine");
+const rgbFactor = 255, double = 2, half = 0.5;
 function rgbToHsv(rgb) {
     const rgbPercent = {
-        r: rgb.r / 255,
-        g: rgb.g / 255,
-        b: rgb.b / 255,
+        r: rgb.r / rgbFactor,
+        g: rgb.g / rgbFactor,
+        b: rgb.b / rgbFactor,
     }, xMax = Math.max(rgbPercent.r, rgbPercent.g, rgbPercent.b), xMin = Math.min(rgbPercent.r, rgbPercent.g, rgbPercent.b), v = xMax, c = xMax - xMin;
     let h = 0;
+    const phaseOffset = {
+        r: 0,
+        g: 2,
+        b: 4,
+    }, phaseValue = 60;
     if (v === rgbPercent.r) {
-        h = 60 * ((rgbPercent.g - rgbPercent.b) / c);
+        h = phaseValue * (phaseOffset.r + (rgbPercent.g - rgbPercent.b) / c);
     }
     else if (v === rgbPercent.g) {
-        h = 60 * (2 + (rgbPercent.b - rgbPercent.r) / c);
+        h = phaseValue * (phaseOffset.g + (rgbPercent.b - rgbPercent.r) / c);
     }
     else if (v === rgbPercent.b) {
-        h = 60 * (4 + (rgbPercent.r - rgbPercent.g) / c);
+        h = phaseValue * (phaseOffset.b + (rgbPercent.r - rgbPercent.g) / c);
     }
-    const s = !v ? 0 : c / v;
+    const defaultSaturation = 0, s = !v ? defaultSaturation : c / v;
     return {
         h,
-        s: s * 100,
-        v: v * 100,
+        s: s * engine_1.percentDenominator,
+        v: v * engine_1.percentDenominator,
     };
 }
 exports.rgbToHsv = rgbToHsv;
@@ -38,11 +44,11 @@ function getStyleFromHsv(color, opacity) {
 }
 exports.getStyleFromHsv = getStyleFromHsv;
 function hslToHsv(hsl) {
-    const l = hsl.l / 100, sl = hsl.s / 100, v = l + sl * Math.min(l, 1 - l), sv = !v ? 0 : 2 * (1 - l / v);
+    const l = hsl.l / engine_1.percentDenominator, sl = hsl.s / engine_1.percentDenominator, offset = 1, noValue = 0, v = l + sl * Math.min(l, offset - l), sv = !v ? noValue : double * (offset - l / v);
     return {
         h: hsl.h,
-        s: sv * 100,
-        v: v * 100,
+        s: sv * engine_1.percentDenominator,
+        v: v * engine_1.percentDenominator,
     };
 }
 exports.hslToHsv = hslToHsv;
@@ -54,11 +60,11 @@ function hslaToHsva(hsla) {
 }
 exports.hslaToHsva = hslaToHsva;
 function hsvToHsl(hsv) {
-    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);
+    const v = hsv.v / engine_1.percentDenominator, sv = hsv.s / engine_1.percentDenominator, offset = 1, noValue = 0, l = v * (offset - sv * half), sl = !l || l === offset ? noValue : (v - l) / Math.min(l, offset - l);
     return {
         h: hsv.h,
-        l: l * 100,
-        s: sl * 100,
+        l: l * engine_1.percentDenominator,
+        s: sl * engine_1.percentDenominator,
     };
 }
 exports.hsvToHsl = hsvToHsl;
@@ -70,48 +76,49 @@ function hsvaToHsla(hsva) {
 }
 exports.hsvaToHsla = hsvaToHsla;
 function hsvToRgb(hsv) {
-    const result = { b: 0, g: 0, r: 0 }, hsvPercent = {
-        h: hsv.h / 60,
-        s: hsv.s / 100,
-        v: hsv.v / 100,
-    }, c = hsvPercent.v * hsvPercent.s, x = c * (1 - Math.abs((hsvPercent.h % 2) - 1));
+    const result = { b: 0, g: 0, r: 0 }, phase = 60, hsvPercent = {
+        h: hsv.h / phase,
+        s: hsv.s / engine_1.percentDenominator,
+        v: hsv.v / engine_1.percentDenominator,
+    }, offset = 1, hPercentFactor = 2, c = hsvPercent.v * hsvPercent.s, x = c * (offset - Math.abs((hsvPercent.h % hPercentFactor) - offset));
     let tempRgb;
-    if (hsvPercent.h >= 0 && hsvPercent.h <= 1) {
+    const cxzRange = { min: 0, max: 1 }, xczRange = { min: 1, max: 2 }, zcxRange = { min: 2, max: 3 }, zxcRange = { min: 3, max: 4 }, xzcRange = { min: 4, max: 5 }, czxRange = { min: 5, max: 6 };
+    if (hsvPercent.h >= cxzRange.min && hsvPercent.h <= cxzRange.max) {
         tempRgb = {
             r: c,
             g: x,
             b: 0,
         };
     }
-    else if (hsvPercent.h > 1 && hsvPercent.h <= 2) {
+    else if (hsvPercent.h > xczRange.min && hsvPercent.h <= xczRange.max) {
         tempRgb = {
             r: x,
             g: c,
             b: 0,
         };
     }
-    else if (hsvPercent.h > 2 && hsvPercent.h <= 3) {
+    else if (hsvPercent.h > zcxRange.min && hsvPercent.h <= zcxRange.max) {
         tempRgb = {
             r: 0,
             g: c,
             b: x,
         };
     }
-    else if (hsvPercent.h > 3 && hsvPercent.h <= 4) {
+    else if (hsvPercent.h > zxcRange.min && hsvPercent.h <= zxcRange.max) {
         tempRgb = {
             r: 0,
             g: x,
             b: c,
         };
     }
-    else if (hsvPercent.h > 4 && hsvPercent.h <= 5) {
+    else if (hsvPercent.h > xzcRange.min && hsvPercent.h <= xzcRange.max) {
         tempRgb = {
             r: x,
             g: 0,
             b: c,
         };
     }
-    else if (hsvPercent.h > 5 && hsvPercent.h <= 6) {
+    else if (hsvPercent.h > czxRange.min && hsvPercent.h <= czxRange.max) {
         tempRgb = {
             r: c,
             g: 0,
@@ -120,9 +127,9 @@ function hsvToRgb(hsv) {
     }
     if (tempRgb) {
         const m = hsvPercent.v - c;
-        result.r = Math.floor((tempRgb.r + m) * 255);
-        result.g = Math.floor((tempRgb.g + m) * 255);
-        result.b = Math.floor((tempRgb.b + m) * 255);
+        result.r = Math.floor((tempRgb.r + m) * rgbFactor);
+        result.g = Math.floor((tempRgb.g + m) * rgbFactor);
+        result.b = Math.floor((tempRgb.b + m) * rgbFactor);
     }
     return result;
 }
@@ -159,13 +166,18 @@ class HsvColorManager {
         if (!input.startsWith("hsv")) {
             return;
         }
-        const regex = /hsva?\(\s*(\d+)°\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(,\s*([\d.%]+)\s*)?\)/i, result = regex.exec(input);
+        const regex = /hsva?\(\s*(\d+)°\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(,\s*([\d.%]+)\s*)?\)/i, result = regex.exec(input), fullLength = 4, indexes = {
+            h: 1,
+            s: 2,
+            v: 3,
+            a: 5,
+        }, defaultAlpha = 1, radix = 10;
         return result
             ? hsvaToRgba({
-                a: result.length > 4 ? (0, engine_1.parseAlpha)(result[5]) : 1,
-                h: parseInt(result[1], 10),
-                s: parseInt(result[2], 10),
-                v: parseInt(result[3], 10),
+                a: result.length > fullLength ? (0, engine_1.parseAlpha)(result[indexes.a]) : defaultAlpha,
+                h: parseInt(result[indexes.h], radix),
+                s: parseInt(result[indexes.s], radix),
+                v: parseInt(result[indexes.v], radix),
             })
             : undefined;
     }

package/cjs/index.js

@@ -1,9 +1,32 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadHsvColorPlugin = void 0;
-const HsvColorManager_js_1 = require("./HsvColorManager.js");
 const engine_1 = require("@tsparticles/engine");
 async function loadHsvColorPlugin() {
-    (0, engine_1.addColorManager)(new HsvColorManager_js_1.HsvColorManager());
+    const { HsvColorManager } = await Promise.resolve().then(() => __importStar(require("./HsvColorManager.js")));
+    (0, engine_1.addColorManager)(new HsvColorManager());
 }
 exports.loadHsvColorPlugin = loadHsvColorPlugin;

package/dist_browser_HsvColorManager_js.js

@@ -0,0 +1,30 @@
+/*!
+ * Author : Matteo Bruni
+ * MIT license: https://opensource.org/licenses/MIT
+ * Demo / Generator : https://particles.js.org/
+ * GitHub : https://www.github.com/matteobruni/tsparticles
+ * How to use? : Check the GitHub README
+ * v3.2.0
+ */
+"use strict";
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(this["webpackChunk_tsparticles_plugin_hsv_color"] = this["webpackChunk_tsparticles_plugin_hsv_color"] || []).push([["dist_browser_HsvColorManager_js"],{
+
+/***/ "./dist/browser/HsvColorManager.js":
+/*!*****************************************!*\
+  !*** ./dist/browser/HsvColorManager.js ***!
+  \*****************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   HsvColorManager: () => (/* binding */ HsvColorManager),\n/* harmony export */   getStyleFromHsv: () => (/* binding */ getStyleFromHsv),\n/* harmony export */   hslToHsv: () => (/* binding */ hslToHsv),\n/* harmony export */   hslaToHsva: () => (/* binding */ hslaToHsva),\n/* harmony export */   hsvToHsl: () => (/* binding */ hsvToHsl),\n/* harmony export */   hsvToRgb: () => (/* binding */ hsvToRgb),\n/* harmony export */   hsvaToHsla: () => (/* binding */ hsvaToHsla),\n/* harmony export */   hsvaToRgba: () => (/* binding */ hsvaToRgba),\n/* harmony export */   rgbToHsv: () => (/* binding */ rgbToHsv),\n/* harmony export */   rgbaToHsva: () => (/* binding */ rgbaToHsva)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n\nconst rgbFactor = 255,\n  double = 2,\n  half = 0.5;\nfunction rgbToHsv(rgb) {\n  const rgbPercent = {\n      r: rgb.r / rgbFactor,\n      g: rgb.g / rgbFactor,\n      b: rgb.b / rgbFactor\n    },\n    xMax = Math.max(rgbPercent.r, rgbPercent.g, rgbPercent.b),\n    xMin = Math.min(rgbPercent.r, rgbPercent.g, rgbPercent.b),\n    v = xMax,\n    c = xMax - xMin;\n  let h = 0;\n  const phaseOffset = {\n      r: 0,\n      g: 2,\n      b: 4\n    },\n    phaseValue = 60;\n  if (v === rgbPercent.r) {\n    h = phaseValue * (phaseOffset.r + (rgbPercent.g - rgbPercent.b) / c);\n  } else if (v === rgbPercent.g) {\n    h = phaseValue * (phaseOffset.g + (rgbPercent.b - rgbPercent.r) / c);\n  } else if (v === rgbPercent.b) {\n    h = phaseValue * (phaseOffset.b + (rgbPercent.r - rgbPercent.g) / c);\n  }\n  const defaultSaturation = 0,\n    s = !v ? defaultSaturation : c / v;\n  return {\n    h,\n    s: s * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator,\n    v: v * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator\n  };\n}\nfunction rgbaToHsva(rgba) {\n  return {\n    a: rgba.a,\n    ...rgbToHsv(rgba)\n  };\n}\nfunction getStyleFromHsv(color, opacity) {\n  return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromHsl)(hsvToHsl(color), opacity);\n}\nfunction hslToHsv(hsl) {\n  const l = hsl.l / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator,\n    sl = hsl.s / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator,\n    offset = 1,\n    noValue = 0,\n    v = l + sl * Math.min(l, offset - l),\n    sv = !v ? noValue : double * (offset - l / v);\n  return {\n    h: hsl.h,\n    s: sv * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator,\n    v: v * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator\n  };\n}\nfunction hslaToHsva(hsla) {\n  return {\n    a: hsla.a,\n    ...hslToHsv(hsla)\n  };\n}\nfunction hsvToHsl(hsv) {\n  const v = hsv.v / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator,\n    sv = hsv.s / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator,\n    offset = 1,\n    noValue = 0,\n    l = v * (offset - sv * half),\n    sl = !l || l === offset ? noValue : (v - l) / Math.min(l, offset - l);\n  return {\n    h: hsv.h,\n    l: l * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator,\n    s: sl * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator\n  };\n}\nfunction hsvaToHsla(hsva) {\n  return {\n    a: hsva.a,\n    ...hsvToHsl(hsva)\n  };\n}\nfunction hsvToRgb(hsv) {\n  const result = {\n      b: 0,\n      g: 0,\n      r: 0\n    },\n    phase = 60,\n    hsvPercent = {\n      h: hsv.h / phase,\n      s: hsv.s / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator,\n      v: hsv.v / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator\n    },\n    offset = 1,\n    hPercentFactor = 2,\n    c = hsvPercent.v * hsvPercent.s,\n    x = c * (offset - Math.abs(hsvPercent.h % hPercentFactor - offset));\n  let tempRgb;\n  const cxzRange = {\n      min: 0,\n      max: 1\n    },\n    xczRange = {\n      min: 1,\n      max: 2\n    },\n    zcxRange = {\n      min: 2,\n      max: 3\n    },\n    zxcRange = {\n      min: 3,\n      max: 4\n    },\n    xzcRange = {\n      min: 4,\n      max: 5\n    },\n    czxRange = {\n      min: 5,\n      max: 6\n    };\n  if (hsvPercent.h >= cxzRange.min && hsvPercent.h <= cxzRange.max) {\n    tempRgb = {\n      r: c,\n      g: x,\n      b: 0\n    };\n  } else if (hsvPercent.h > xczRange.min && hsvPercent.h <= xczRange.max) {\n    tempRgb = {\n      r: x,\n      g: c,\n      b: 0\n    };\n  } else if (hsvPercent.h > zcxRange.min && hsvPercent.h <= zcxRange.max) {\n    tempRgb = {\n      r: 0,\n      g: c,\n      b: x\n    };\n  } else if (hsvPercent.h > zxcRange.min && hsvPercent.h <= zxcRange.max) {\n    tempRgb = {\n      r: 0,\n      g: x,\n      b: c\n    };\n  } else if (hsvPercent.h > xzcRange.min && hsvPercent.h <= xzcRange.max) {\n    tempRgb = {\n      r: x,\n      g: 0,\n      b: c\n    };\n  } else if (hsvPercent.h > czxRange.min && hsvPercent.h <= czxRange.max) {\n    tempRgb = {\n      r: c,\n      g: 0,\n      b: x\n    };\n  }\n  if (tempRgb) {\n    const m = hsvPercent.v - c;\n    result.r = Math.floor((tempRgb.r + m) * rgbFactor);\n    result.g = Math.floor((tempRgb.g + m) * rgbFactor);\n    result.b = Math.floor((tempRgb.b + m) * rgbFactor);\n  }\n  return result;\n}\nfunction hsvaToRgba(hsva) {\n  return {\n    a: hsva.a,\n    ...hsvToRgb(hsva)\n  };\n}\nclass HsvColorManager {\n  constructor() {\n    this.key = \"hsv\";\n    this.stringPrefix = \"hsv\";\n  }\n  handleColor(color) {\n    const colorValue = color.value,\n      hsvColor = colorValue.hsv ?? color.value;\n    if (hsvColor.h !== undefined && hsvColor.v !== undefined) {\n      return hsvToRgb(hsvColor);\n    }\n  }\n  handleRangeColor(color) {\n    const colorValue = color.value,\n      hsvColor = colorValue.hsv ?? color.value;\n    if (hsvColor.h !== undefined && hsvColor.v !== undefined) {\n      return hsvToRgb({\n        h: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(hsvColor.h),\n        s: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(hsvColor.s),\n        v: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(hsvColor.v)\n      });\n    }\n  }\n  parseString(input) {\n    if (!input.startsWith(\"hsv\")) {\n      return;\n    }\n    const regex = /hsva?\\(\\s*(\\d+)°\\s*,\\s*(\\d+)%\\s*,\\s*(\\d+)%\\s*(,\\s*([\\d.%]+)\\s*)?\\)/i,\n      result = regex.exec(input),\n      fullLength = 4,\n      indexes = {\n        h: 1,\n        s: 2,\n        v: 3,\n        a: 5\n      },\n      defaultAlpha = 1,\n      radix = 10;\n    return result ? hsvaToRgba({\n      a: result.length > fullLength ? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.parseAlpha)(result[indexes.a]) : defaultAlpha,\n      h: parseInt(result[indexes.h], radix),\n      s: parseInt(result[indexes.s], radix),\n      v: parseInt(result[indexes.v], radix)\n    }) : undefined;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-hsv-color/./dist/browser/HsvColorManager.js?");
+
+/***/ })
+
+}]);

package/esm/HsvColorManager.js

@@ -1,25 +1,31 @@
-import { getRangeValue, getStyleFromHsl, parseAlpha, } from "@tsparticles/engine";
+import { getRangeValue, getStyleFromHsl, parseAlpha, percentDenominator, } from "@tsparticles/engine";
+const rgbFactor = 255, double = 2, half = 0.5;
 export function rgbToHsv(rgb) {
     const rgbPercent = {
-        r: rgb.r / 255,
-        g: rgb.g / 255,
-        b: rgb.b / 255,
+        r: rgb.r / rgbFactor,
+        g: rgb.g / rgbFactor,
+        b: rgb.b / rgbFactor,
     }, xMax = Math.max(rgbPercent.r, rgbPercent.g, rgbPercent.b), xMin = Math.min(rgbPercent.r, rgbPercent.g, rgbPercent.b), v = xMax, c = xMax - xMin;
     let h = 0;
+    const phaseOffset = {
+        r: 0,
+        g: 2,
+        b: 4,
+    }, phaseValue = 60;
     if (v === rgbPercent.r) {
-        h = 60 * ((rgbPercent.g - rgbPercent.b) / c);
+        h = phaseValue * (phaseOffset.r + (rgbPercent.g - rgbPercent.b) / c);
     }
     else if (v === rgbPercent.g) {
-        h = 60 * (2 + (rgbPercent.b - rgbPercent.r) / c);
+        h = phaseValue * (phaseOffset.g + (rgbPercent.b - rgbPercent.r) / c);
     }
     else if (v === rgbPercent.b) {
-        h = 60 * (4 + (rgbPercent.r - rgbPercent.g) / c);
+        h = phaseValue * (phaseOffset.b + (rgbPercent.r - rgbPercent.g) / c);
     }
-    const s = !v ? 0 : c / v;
+    const defaultSaturation = 0, s = !v ? defaultSaturation : c / v;
     return {
         h,
-        s: s * 100,
-        v: v * 100,
+        s: s * percentDenominator,
+        v: v * percentDenominator,
     };
 }
 export function rgbaToHsva(rgba) {
@@ -32,11 +38,11 @@ export function getStyleFromHsv(color, opacity) {
     return getStyleFromHsl(hsvToHsl(color), opacity);
 }
 export function hslToHsv(hsl) {
-    const l = hsl.l / 100, sl = hsl.s / 100, v = l + sl * Math.min(l, 1 - l), sv = !v ? 0 : 2 * (1 - l / v);
+    const l = hsl.l / percentDenominator, sl = hsl.s / percentDenominator, offset = 1, noValue = 0, v = l + sl * Math.min(l, offset - l), sv = !v ? noValue : double * (offset - l / v);
     return {
         h: hsl.h,
-        s: sv * 100,
-        v: v * 100,
+        s: sv * percentDenominator,
+        v: v * percentDenominator,
     };
 }
 export function hslaToHsva(hsla) {
@@ -46,11 +52,11 @@ export function hslaToHsva(hsla) {
     };
 }
 export function hsvToHsl(hsv) {
-    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);
+    const v = hsv.v / percentDenominator, sv = hsv.s / percentDenominator, offset = 1, noValue = 0, l = v * (offset - sv * half), sl = !l || l === offset ? noValue : (v - l) / Math.min(l, offset - l);
     return {
         h: hsv.h,
-        l: l * 100,
-        s: sl * 100,
+        l: l * percentDenominator,
+        s: sl * percentDenominator,
     };
 }
 export function hsvaToHsla(hsva) {
@@ -60,48 +66,49 @@ export function hsvaToHsla(hsva) {
     };
 }
 export function hsvToRgb(hsv) {
-    const result = { b: 0, g: 0, r: 0 }, hsvPercent = {
-        h: hsv.h / 60,
-        s: hsv.s / 100,
-        v: hsv.v / 100,
-    }, c = hsvPercent.v * hsvPercent.s, x = c * (1 - Math.abs((hsvPercent.h % 2) - 1));
+    const result = { b: 0, g: 0, r: 0 }, phase = 60, hsvPercent = {
+        h: hsv.h / phase,
+        s: hsv.s / percentDenominator,
+        v: hsv.v / percentDenominator,
+    }, offset = 1, hPercentFactor = 2, c = hsvPercent.v * hsvPercent.s, x = c * (offset - Math.abs((hsvPercent.h % hPercentFactor) - offset));
     let tempRgb;
-    if (hsvPercent.h >= 0 && hsvPercent.h <= 1) {
+    const cxzRange = { min: 0, max: 1 }, xczRange = { min: 1, max: 2 }, zcxRange = { min: 2, max: 3 }, zxcRange = { min: 3, max: 4 }, xzcRange = { min: 4, max: 5 }, czxRange = { min: 5, max: 6 };
+    if (hsvPercent.h >= cxzRange.min && hsvPercent.h <= cxzRange.max) {
         tempRgb = {
             r: c,
             g: x,
             b: 0,
         };
     }
-    else if (hsvPercent.h > 1 && hsvPercent.h <= 2) {
+    else if (hsvPercent.h > xczRange.min && hsvPercent.h <= xczRange.max) {
         tempRgb = {
             r: x,
             g: c,
             b: 0,
         };
     }
-    else if (hsvPercent.h > 2 && hsvPercent.h <= 3) {
+    else if (hsvPercent.h > zcxRange.min && hsvPercent.h <= zcxRange.max) {
         tempRgb = {
             r: 0,
             g: c,
             b: x,
         };
     }
-    else if (hsvPercent.h > 3 && hsvPercent.h <= 4) {
+    else if (hsvPercent.h > zxcRange.min && hsvPercent.h <= zxcRange.max) {
         tempRgb = {
             r: 0,
             g: x,
             b: c,
         };
     }
-    else if (hsvPercent.h > 4 && hsvPercent.h <= 5) {
+    else if (hsvPercent.h > xzcRange.min && hsvPercent.h <= xzcRange.max) {
         tempRgb = {
             r: x,
             g: 0,
             b: c,
         };
     }
-    else if (hsvPercent.h > 5 && hsvPercent.h <= 6) {
+    else if (hsvPercent.h > czxRange.min && hsvPercent.h <= czxRange.max) {
         tempRgb = {
             r: c,
             g: 0,
@@ -110,9 +117,9 @@ export function hsvToRgb(hsv) {
     }
     if (tempRgb) {
         const m = hsvPercent.v - c;
-        result.r = Math.floor((tempRgb.r + m) * 255);
-        result.g = Math.floor((tempRgb.g + m) * 255);
-        result.b = Math.floor((tempRgb.b + m) * 255);
+        result.r = Math.floor((tempRgb.r + m) * rgbFactor);
+        result.g = Math.floor((tempRgb.g + m) * rgbFactor);
+        result.b = Math.floor((tempRgb.b + m) * rgbFactor);
     }
     return result;
 }
@@ -147,13 +154,18 @@ export class HsvColorManager {
         if (!input.startsWith("hsv")) {
             return;
         }
-        const regex = /hsva?\(\s*(\d+)°\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(,\s*([\d.%]+)\s*)?\)/i, result = regex.exec(input);
+        const regex = /hsva?\(\s*(\d+)°\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(,\s*([\d.%]+)\s*)?\)/i, result = regex.exec(input), fullLength = 4, indexes = {
+            h: 1,
+            s: 2,
+            v: 3,
+            a: 5,
+        }, defaultAlpha = 1, radix = 10;
         return result
             ? hsvaToRgba({
-                a: result.length > 4 ? parseAlpha(result[5]) : 1,
-                h: parseInt(result[1], 10),
-                s: parseInt(result[2], 10),
-                v: parseInt(result[3], 10),
+                a: result.length > fullLength ? parseAlpha(result[indexes.a]) : defaultAlpha,
+                h: parseInt(result[indexes.h], radix),
+                s: parseInt(result[indexes.s], radix),
+                v: parseInt(result[indexes.v], radix),
             })
             : undefined;
     }

package/esm/index.js

@@ -1,5 +1,5 @@
-import { HsvColorManager } from "./HsvColorManager.js";
 import { addColorManager } from "@tsparticles/engine";
 export async function loadHsvColorPlugin() {
+    const { HsvColorManager } = await import("./HsvColorManager.js");
     addColorManager(new HsvColorManager());
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/plugin-hsv-color",
-  "version": "3.0.3",
+  "version": "3.2.0",
   "description": "tsParticles HSV color plugin",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -100,7 +100,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "^3.0.3"
+    "@tsparticles/engine": "^3.2.0"
   },
   "publishConfig": {
     "access": "public"