@tsparticles/plugin-hsv-color 3.9.1 → 4.0.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/202.min.js +2 -0
- package/202.min.js.LICENSE.txt +1 -0
- package/browser/HsvColorManager.js +21 -145
- package/browser/index.js +6 -4
- package/browser/utils.js +130 -0
- package/cjs/HsvColorManager.js +23 -160
- package/cjs/index.js +6 -7
- package/cjs/utils.js +130 -0
- package/dist_browser_HsvColorManager_js.js +40 -0
- package/esm/HsvColorManager.js +21 -145
- package/esm/index.js +6 -4
- package/esm/utils.js +130 -0
- package/package.json +4 -3
- package/report.html +5 -4
- package/tsparticles.plugin.hsvColor.js +209 -30
- package/tsparticles.plugin.hsvColor.min.js +1 -1
- package/tsparticles.plugin.hsvColor.min.js.LICENSE.txt +1 -1
- package/types/HsvColorManager.d.ts +2 -11
- package/types/index.d.ts +1 -1
- package/types/utils.d.ts +10 -0
- package/umd/HsvColorManager.js +22 -155
- package/umd/index.js +41 -5
- package/umd/utils.js +151 -0
package/202.min.js
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/*! For license information please see 202.min.js.LICENSE.txt */
|
|
2
|
+
(this.webpackChunk_tsparticles_plugin_hsv_color=this.webpackChunk_tsparticles_plugin_hsv_color||[]).push([[202],{202(s,r,a){a.d(r,{HsvColorManager:()=>h});var e=a(303);function t(s){const r={b:0,g:0,r:0},a=s.h/60,t=s.s/e.percentDenominator,n=s.v/e.percentDenominator,h=n*t,o=h*(1-Math.abs(a%2-1));let c;if(a>=0&&a<=1?c={r:h,g:o,b:0}:a>1&&a<=2?c={r:o,g:h,b:0}:a>2&&a<=3?c={r:0,g:h,b:o}:a>3&&a<=4?c={r:0,g:o,b:h}:a>4&&a<=5?c={r:o,g:0,b:h}:a>5&&a<=6&&(c={r:h,g:0,b:o}),c){const s=n-h;r.r=Math.floor((c.r+s)*e.rgbMax),r.g=Math.floor((c.g+s)*e.rgbMax),r.b=Math.floor((c.b+s)*e.rgbMax)}return r}const n=/hsva?\(\s*(\d+)°\s*[\s,]\s*(\d+)%\s*[\s,]\s*(\d+)%\s*([\s,]\s*(0|1|0?\.\d+|(\d{1,3})%)\s*)?\)/i;class h{constructor(){this.key="hsv"}accepts(s){return s.startsWith("hsv")}handleColor(s){const r=s.value.hsv??s.value;if(Object.hasOwn(r,"h")||Object.hasOwn(r,"v"))return t(r)}handleRangeColor(s){const r=s.value.hsv??s.value;if(Object.hasOwn(r,"h")||Object.hasOwn(r,"v"))return t({h:(0,e.getRangeValue)(r.h),s:(0,e.getRangeValue)(r.s),v:(0,e.getRangeValue)(r.v)})}parseString(s){if(!this.accepts(s))return;const r=n.exec(s),a=1,h=2,o=3,c=5;return r?{a:(l={a:r.length>4?(0,e.parseAlpha)(r[c]):1,h:parseInt(r[a]??"0",10),s:parseInt(r[h]??"0",10),v:parseInt(r[o]??"0",10)}).a,...t(l)}:void 0;var l}}}}]);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/*! tsParticles HSV Color Plugin v4.0.0-alpha.1 by Matteo Bruni */
|
|
@@ -1,160 +1,36 @@
|
|
|
1
|
-
import { getRangeValue,
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const rgbPercent = {
|
|
5
|
-
r: rgb.r / rgbFactor,
|
|
6
|
-
g: rgb.g / rgbFactor,
|
|
7
|
-
b: rgb.b / rgbFactor,
|
|
8
|
-
}, xMax = Math.max(rgbPercent.r, rgbPercent.g, rgbPercent.b), xMin = Math.min(rgbPercent.r, rgbPercent.g, rgbPercent.b), v = xMax, c = xMax - xMin;
|
|
9
|
-
let h = 0;
|
|
10
|
-
const phaseOffset = {
|
|
11
|
-
r: 0,
|
|
12
|
-
g: 2,
|
|
13
|
-
b: 4,
|
|
14
|
-
}, phaseValue = 60;
|
|
15
|
-
if (v === rgbPercent.r) {
|
|
16
|
-
h = phaseValue * (phaseOffset.r + (rgbPercent.g - rgbPercent.b) / c);
|
|
17
|
-
}
|
|
18
|
-
else if (v === rgbPercent.g) {
|
|
19
|
-
h = phaseValue * (phaseOffset.g + (rgbPercent.b - rgbPercent.r) / c);
|
|
20
|
-
}
|
|
21
|
-
else if (v === rgbPercent.b) {
|
|
22
|
-
h = phaseValue * (phaseOffset.b + (rgbPercent.r - rgbPercent.g) / c);
|
|
23
|
-
}
|
|
24
|
-
const defaultSaturation = 0, s = !v ? defaultSaturation : c / v;
|
|
25
|
-
return {
|
|
26
|
-
h,
|
|
27
|
-
s: s * percentDenominator,
|
|
28
|
-
v: v * percentDenominator,
|
|
29
|
-
};
|
|
30
|
-
}
|
|
31
|
-
export function rgbaToHsva(rgba) {
|
|
32
|
-
return {
|
|
33
|
-
a: rgba.a,
|
|
34
|
-
...rgbToHsv(rgba),
|
|
35
|
-
};
|
|
36
|
-
}
|
|
37
|
-
export function getStyleFromHsv(color, opacity) {
|
|
38
|
-
return getStyleFromHsl(hsvToHsl(color), opacity);
|
|
39
|
-
}
|
|
40
|
-
export function hslToHsv(hsl) {
|
|
41
|
-
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);
|
|
42
|
-
return {
|
|
43
|
-
h: hsl.h,
|
|
44
|
-
s: sv * percentDenominator,
|
|
45
|
-
v: v * percentDenominator,
|
|
46
|
-
};
|
|
47
|
-
}
|
|
48
|
-
export function hslaToHsva(hsla) {
|
|
49
|
-
return {
|
|
50
|
-
a: hsla.a,
|
|
51
|
-
...hslToHsv(hsla),
|
|
52
|
-
};
|
|
53
|
-
}
|
|
54
|
-
export function hsvToHsl(hsv) {
|
|
55
|
-
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);
|
|
56
|
-
return {
|
|
57
|
-
h: hsv.h,
|
|
58
|
-
l: l * percentDenominator,
|
|
59
|
-
s: sl * percentDenominator,
|
|
60
|
-
};
|
|
61
|
-
}
|
|
62
|
-
export function hsvaToHsla(hsva) {
|
|
63
|
-
return {
|
|
64
|
-
a: hsva.a,
|
|
65
|
-
...hsvToHsl(hsva),
|
|
66
|
-
};
|
|
67
|
-
}
|
|
68
|
-
export function hsvToRgb(hsv) {
|
|
69
|
-
const result = { b: 0, g: 0, r: 0 }, phase = 60, hsvPercent = {
|
|
70
|
-
h: hsv.h / phase,
|
|
71
|
-
s: hsv.s / percentDenominator,
|
|
72
|
-
v: hsv.v / percentDenominator,
|
|
73
|
-
}, offset = 1, hPercentFactor = 2, c = hsvPercent.v * hsvPercent.s, x = c * (offset - Math.abs((hsvPercent.h % hPercentFactor) - offset));
|
|
74
|
-
let tempRgb;
|
|
75
|
-
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 };
|
|
76
|
-
if (hsvPercent.h >= cxzRange.min && hsvPercent.h <= cxzRange.max) {
|
|
77
|
-
tempRgb = {
|
|
78
|
-
r: c,
|
|
79
|
-
g: x,
|
|
80
|
-
b: 0,
|
|
81
|
-
};
|
|
82
|
-
}
|
|
83
|
-
else if (hsvPercent.h > xczRange.min && hsvPercent.h <= xczRange.max) {
|
|
84
|
-
tempRgb = {
|
|
85
|
-
r: x,
|
|
86
|
-
g: c,
|
|
87
|
-
b: 0,
|
|
88
|
-
};
|
|
89
|
-
}
|
|
90
|
-
else if (hsvPercent.h > zcxRange.min && hsvPercent.h <= zcxRange.max) {
|
|
91
|
-
tempRgb = {
|
|
92
|
-
r: 0,
|
|
93
|
-
g: c,
|
|
94
|
-
b: x,
|
|
95
|
-
};
|
|
96
|
-
}
|
|
97
|
-
else if (hsvPercent.h > zxcRange.min && hsvPercent.h <= zxcRange.max) {
|
|
98
|
-
tempRgb = {
|
|
99
|
-
r: 0,
|
|
100
|
-
g: x,
|
|
101
|
-
b: c,
|
|
102
|
-
};
|
|
103
|
-
}
|
|
104
|
-
else if (hsvPercent.h > xzcRange.min && hsvPercent.h <= xzcRange.max) {
|
|
105
|
-
tempRgb = {
|
|
106
|
-
r: x,
|
|
107
|
-
g: 0,
|
|
108
|
-
b: c,
|
|
109
|
-
};
|
|
110
|
-
}
|
|
111
|
-
else if (hsvPercent.h > czxRange.min && hsvPercent.h <= czxRange.max) {
|
|
112
|
-
tempRgb = {
|
|
113
|
-
r: c,
|
|
114
|
-
g: 0,
|
|
115
|
-
b: x,
|
|
116
|
-
};
|
|
117
|
-
}
|
|
118
|
-
if (tempRgb) {
|
|
119
|
-
const m = hsvPercent.v - c;
|
|
120
|
-
result.r = Math.floor((tempRgb.r + m) * rgbFactor);
|
|
121
|
-
result.g = Math.floor((tempRgb.g + m) * rgbFactor);
|
|
122
|
-
result.b = Math.floor((tempRgb.b + m) * rgbFactor);
|
|
123
|
-
}
|
|
124
|
-
return result;
|
|
125
|
-
}
|
|
126
|
-
export function hsvaToRgba(hsva) {
|
|
127
|
-
return {
|
|
128
|
-
a: hsva.a,
|
|
129
|
-
...hsvToRgb(hsva),
|
|
130
|
-
};
|
|
131
|
-
}
|
|
1
|
+
import { getRangeValue, parseAlpha, } from "@tsparticles/engine";
|
|
2
|
+
import { hsvToRgb, hsvaToRgba } from "./utils.js";
|
|
3
|
+
const hsvRegex = /hsva?\(\s*(\d+)°\s*[\s,]\s*(\d+)%\s*[\s,]\s*(\d+)%\s*([\s,]\s*(0|1|0?\.\d+|(\d{1,3})%)\s*)?\)/i;
|
|
132
4
|
export class HsvColorManager {
|
|
133
5
|
constructor() {
|
|
134
6
|
this.key = "hsv";
|
|
135
|
-
|
|
7
|
+
}
|
|
8
|
+
accepts(input) {
|
|
9
|
+
return input.startsWith("hsv");
|
|
136
10
|
}
|
|
137
11
|
handleColor(color) {
|
|
138
12
|
const colorValue = color.value, hsvColor = colorValue.hsv ?? color.value;
|
|
139
|
-
if (hsvColor
|
|
140
|
-
return
|
|
13
|
+
if (!Object.hasOwn(hsvColor, "h") && !Object.hasOwn(hsvColor, "v")) {
|
|
14
|
+
return;
|
|
141
15
|
}
|
|
16
|
+
return hsvToRgb(hsvColor);
|
|
142
17
|
}
|
|
143
18
|
handleRangeColor(color) {
|
|
144
19
|
const colorValue = color.value, hsvColor = colorValue.hsv ?? color.value;
|
|
145
|
-
if (hsvColor
|
|
146
|
-
return
|
|
147
|
-
h: getRangeValue(hsvColor.h),
|
|
148
|
-
s: getRangeValue(hsvColor.s),
|
|
149
|
-
v: getRangeValue(hsvColor.v),
|
|
150
|
-
});
|
|
20
|
+
if (!Object.hasOwn(hsvColor, "h") && !Object.hasOwn(hsvColor, "v")) {
|
|
21
|
+
return;
|
|
151
22
|
}
|
|
23
|
+
return hsvToRgb({
|
|
24
|
+
h: getRangeValue(hsvColor.h),
|
|
25
|
+
s: getRangeValue(hsvColor.s),
|
|
26
|
+
v: getRangeValue(hsvColor.v),
|
|
27
|
+
});
|
|
152
28
|
}
|
|
153
29
|
parseString(input) {
|
|
154
|
-
if (!
|
|
30
|
+
if (!this.accepts(input)) {
|
|
155
31
|
return;
|
|
156
32
|
}
|
|
157
|
-
const
|
|
33
|
+
const result = hsvRegex.exec(input), fullLength = 4, indexes = {
|
|
158
34
|
h: 1,
|
|
159
35
|
s: 2,
|
|
160
36
|
v: 3,
|
|
@@ -163,9 +39,9 @@ export class HsvColorManager {
|
|
|
163
39
|
return result
|
|
164
40
|
? hsvaToRgba({
|
|
165
41
|
a: result.length > fullLength ? parseAlpha(result[indexes.a]) : defaultAlpha,
|
|
166
|
-
h: parseInt(result[indexes.h], radix),
|
|
167
|
-
s: parseInt(result[indexes.s], radix),
|
|
168
|
-
v: parseInt(result[indexes.v], radix),
|
|
42
|
+
h: parseInt(result[indexes.h] ?? "0", radix),
|
|
43
|
+
s: parseInt(result[indexes.s] ?? "0", radix),
|
|
44
|
+
v: parseInt(result[indexes.v] ?? "0", radix),
|
|
169
45
|
})
|
|
170
46
|
: undefined;
|
|
171
47
|
}
|
package/browser/index.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
engine.
|
|
4
|
-
|
|
1
|
+
export function loadHsvColorPlugin(engine) {
|
|
2
|
+
engine.checkVersion("4.0.0-alpha.1");
|
|
3
|
+
engine.register(async (e) => {
|
|
4
|
+
const { HsvColorManager } = await import("./HsvColorManager.js");
|
|
5
|
+
e.addColorManager(new HsvColorManager());
|
|
6
|
+
});
|
|
5
7
|
}
|
package/browser/utils.js
ADDED
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
import { double, getStyleFromHsl, half, percentDenominator, rgbMax, } from "@tsparticles/engine";
|
|
2
|
+
export function rgbToHsv(rgb) {
|
|
3
|
+
const rgbPercent = {
|
|
4
|
+
r: rgb.r / rgbMax,
|
|
5
|
+
g: rgb.g / rgbMax,
|
|
6
|
+
b: rgb.b / rgbMax,
|
|
7
|
+
}, xMax = Math.max(rgbPercent.r, rgbPercent.g, rgbPercent.b), xMin = Math.min(rgbPercent.r, rgbPercent.g, rgbPercent.b), v = xMax, c = xMax - xMin;
|
|
8
|
+
let h = 0;
|
|
9
|
+
const phaseOffset = {
|
|
10
|
+
r: 0,
|
|
11
|
+
g: 2,
|
|
12
|
+
b: 4,
|
|
13
|
+
}, phaseValue = 60;
|
|
14
|
+
if (v === rgbPercent.r) {
|
|
15
|
+
h = phaseValue * (phaseOffset.r + (rgbPercent.g - rgbPercent.b) / c);
|
|
16
|
+
}
|
|
17
|
+
else if (v === rgbPercent.g) {
|
|
18
|
+
h = phaseValue * (phaseOffset.g + (rgbPercent.b - rgbPercent.r) / c);
|
|
19
|
+
}
|
|
20
|
+
else if (v === rgbPercent.b) {
|
|
21
|
+
h = phaseValue * (phaseOffset.b + (rgbPercent.r - rgbPercent.g) / c);
|
|
22
|
+
}
|
|
23
|
+
const defaultSaturation = 0, s = !v ? defaultSaturation : c / v;
|
|
24
|
+
return {
|
|
25
|
+
h,
|
|
26
|
+
s: s * percentDenominator,
|
|
27
|
+
v: v * percentDenominator,
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
export function rgbaToHsva(rgba) {
|
|
31
|
+
return {
|
|
32
|
+
a: rgba.a,
|
|
33
|
+
...rgbToHsv(rgba),
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
export function getStyleFromHsv(color, hdr, opacity) {
|
|
37
|
+
return getStyleFromHsl(hsvToHsl(color), hdr, opacity);
|
|
38
|
+
}
|
|
39
|
+
export function hslToHsv(hsl) {
|
|
40
|
+
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);
|
|
41
|
+
return {
|
|
42
|
+
h: hsl.h,
|
|
43
|
+
s: sv * percentDenominator,
|
|
44
|
+
v: v * percentDenominator,
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
export function hslaToHsva(hsla) {
|
|
48
|
+
return {
|
|
49
|
+
a: hsla.a,
|
|
50
|
+
...hslToHsv(hsla),
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
export function hsvToHsl(hsv) {
|
|
54
|
+
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);
|
|
55
|
+
return {
|
|
56
|
+
h: hsv.h,
|
|
57
|
+
l: l * percentDenominator,
|
|
58
|
+
s: sl * percentDenominator,
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
export function hsvaToHsla(hsva) {
|
|
62
|
+
return {
|
|
63
|
+
a: hsva.a,
|
|
64
|
+
...hsvToHsl(hsva),
|
|
65
|
+
};
|
|
66
|
+
}
|
|
67
|
+
export function hsvToRgb(hsv) {
|
|
68
|
+
const result = { b: 0, g: 0, r: 0 }, phase = 60, hsvPercent = {
|
|
69
|
+
h: hsv.h / phase,
|
|
70
|
+
s: hsv.s / percentDenominator,
|
|
71
|
+
v: hsv.v / percentDenominator,
|
|
72
|
+
}, offset = 1, hPercentFactor = 2, c = hsvPercent.v * hsvPercent.s, x = c * (offset - Math.abs((hsvPercent.h % hPercentFactor) - offset));
|
|
73
|
+
let tempRgb;
|
|
74
|
+
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 };
|
|
75
|
+
if (hsvPercent.h >= cxzRange.min && hsvPercent.h <= cxzRange.max) {
|
|
76
|
+
tempRgb = {
|
|
77
|
+
r: c,
|
|
78
|
+
g: x,
|
|
79
|
+
b: 0,
|
|
80
|
+
};
|
|
81
|
+
}
|
|
82
|
+
else if (hsvPercent.h > xczRange.min && hsvPercent.h <= xczRange.max) {
|
|
83
|
+
tempRgb = {
|
|
84
|
+
r: x,
|
|
85
|
+
g: c,
|
|
86
|
+
b: 0,
|
|
87
|
+
};
|
|
88
|
+
}
|
|
89
|
+
else if (hsvPercent.h > zcxRange.min && hsvPercent.h <= zcxRange.max) {
|
|
90
|
+
tempRgb = {
|
|
91
|
+
r: 0,
|
|
92
|
+
g: c,
|
|
93
|
+
b: x,
|
|
94
|
+
};
|
|
95
|
+
}
|
|
96
|
+
else if (hsvPercent.h > zxcRange.min && hsvPercent.h <= zxcRange.max) {
|
|
97
|
+
tempRgb = {
|
|
98
|
+
r: 0,
|
|
99
|
+
g: x,
|
|
100
|
+
b: c,
|
|
101
|
+
};
|
|
102
|
+
}
|
|
103
|
+
else if (hsvPercent.h > xzcRange.min && hsvPercent.h <= xzcRange.max) {
|
|
104
|
+
tempRgb = {
|
|
105
|
+
r: x,
|
|
106
|
+
g: 0,
|
|
107
|
+
b: c,
|
|
108
|
+
};
|
|
109
|
+
}
|
|
110
|
+
else if (hsvPercent.h > czxRange.min && hsvPercent.h <= czxRange.max) {
|
|
111
|
+
tempRgb = {
|
|
112
|
+
r: c,
|
|
113
|
+
g: 0,
|
|
114
|
+
b: x,
|
|
115
|
+
};
|
|
116
|
+
}
|
|
117
|
+
if (tempRgb) {
|
|
118
|
+
const m = hsvPercent.v - c;
|
|
119
|
+
result.r = Math.floor((tempRgb.r + m) * rgbMax);
|
|
120
|
+
result.g = Math.floor((tempRgb.g + m) * rgbMax);
|
|
121
|
+
result.b = Math.floor((tempRgb.b + m) * rgbMax);
|
|
122
|
+
}
|
|
123
|
+
return result;
|
|
124
|
+
}
|
|
125
|
+
export function hsvaToRgba(hsva) {
|
|
126
|
+
return {
|
|
127
|
+
a: hsva.a,
|
|
128
|
+
...hsvToRgb(hsva),
|
|
129
|
+
};
|
|
130
|
+
}
|
package/cjs/HsvColorManager.js
CHANGED
|
@@ -1,172 +1,36 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
exports.rgbaToHsva = rgbaToHsva;
|
|
6
|
-
exports.getStyleFromHsv = getStyleFromHsv;
|
|
7
|
-
exports.hslToHsv = hslToHsv;
|
|
8
|
-
exports.hslaToHsva = hslaToHsva;
|
|
9
|
-
exports.hsvToHsl = hsvToHsl;
|
|
10
|
-
exports.hsvaToHsla = hsvaToHsla;
|
|
11
|
-
exports.hsvToRgb = hsvToRgb;
|
|
12
|
-
exports.hsvaToRgba = hsvaToRgba;
|
|
13
|
-
const engine_1 = require("@tsparticles/engine");
|
|
14
|
-
const rgbFactor = 255, double = 2, half = 0.5;
|
|
15
|
-
function rgbToHsv(rgb) {
|
|
16
|
-
const rgbPercent = {
|
|
17
|
-
r: rgb.r / rgbFactor,
|
|
18
|
-
g: rgb.g / rgbFactor,
|
|
19
|
-
b: rgb.b / rgbFactor,
|
|
20
|
-
}, xMax = Math.max(rgbPercent.r, rgbPercent.g, rgbPercent.b), xMin = Math.min(rgbPercent.r, rgbPercent.g, rgbPercent.b), v = xMax, c = xMax - xMin;
|
|
21
|
-
let h = 0;
|
|
22
|
-
const phaseOffset = {
|
|
23
|
-
r: 0,
|
|
24
|
-
g: 2,
|
|
25
|
-
b: 4,
|
|
26
|
-
}, phaseValue = 60;
|
|
27
|
-
if (v === rgbPercent.r) {
|
|
28
|
-
h = phaseValue * (phaseOffset.r + (rgbPercent.g - rgbPercent.b) / c);
|
|
29
|
-
}
|
|
30
|
-
else if (v === rgbPercent.g) {
|
|
31
|
-
h = phaseValue * (phaseOffset.g + (rgbPercent.b - rgbPercent.r) / c);
|
|
32
|
-
}
|
|
33
|
-
else if (v === rgbPercent.b) {
|
|
34
|
-
h = phaseValue * (phaseOffset.b + (rgbPercent.r - rgbPercent.g) / c);
|
|
35
|
-
}
|
|
36
|
-
const defaultSaturation = 0, s = !v ? defaultSaturation : c / v;
|
|
37
|
-
return {
|
|
38
|
-
h,
|
|
39
|
-
s: s * engine_1.percentDenominator,
|
|
40
|
-
v: v * engine_1.percentDenominator,
|
|
41
|
-
};
|
|
42
|
-
}
|
|
43
|
-
function rgbaToHsva(rgba) {
|
|
44
|
-
return {
|
|
45
|
-
a: rgba.a,
|
|
46
|
-
...rgbToHsv(rgba),
|
|
47
|
-
};
|
|
48
|
-
}
|
|
49
|
-
function getStyleFromHsv(color, opacity) {
|
|
50
|
-
return (0, engine_1.getStyleFromHsl)(hsvToHsl(color), opacity);
|
|
51
|
-
}
|
|
52
|
-
function hslToHsv(hsl) {
|
|
53
|
-
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);
|
|
54
|
-
return {
|
|
55
|
-
h: hsl.h,
|
|
56
|
-
s: sv * engine_1.percentDenominator,
|
|
57
|
-
v: v * engine_1.percentDenominator,
|
|
58
|
-
};
|
|
59
|
-
}
|
|
60
|
-
function hslaToHsva(hsla) {
|
|
61
|
-
return {
|
|
62
|
-
a: hsla.a,
|
|
63
|
-
...hslToHsv(hsla),
|
|
64
|
-
};
|
|
65
|
-
}
|
|
66
|
-
function hsvToHsl(hsv) {
|
|
67
|
-
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);
|
|
68
|
-
return {
|
|
69
|
-
h: hsv.h,
|
|
70
|
-
l: l * engine_1.percentDenominator,
|
|
71
|
-
s: sl * engine_1.percentDenominator,
|
|
72
|
-
};
|
|
73
|
-
}
|
|
74
|
-
function hsvaToHsla(hsva) {
|
|
75
|
-
return {
|
|
76
|
-
a: hsva.a,
|
|
77
|
-
...hsvToHsl(hsva),
|
|
78
|
-
};
|
|
79
|
-
}
|
|
80
|
-
function hsvToRgb(hsv) {
|
|
81
|
-
const result = { b: 0, g: 0, r: 0 }, phase = 60, hsvPercent = {
|
|
82
|
-
h: hsv.h / phase,
|
|
83
|
-
s: hsv.s / engine_1.percentDenominator,
|
|
84
|
-
v: hsv.v / engine_1.percentDenominator,
|
|
85
|
-
}, offset = 1, hPercentFactor = 2, c = hsvPercent.v * hsvPercent.s, x = c * (offset - Math.abs((hsvPercent.h % hPercentFactor) - offset));
|
|
86
|
-
let tempRgb;
|
|
87
|
-
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 };
|
|
88
|
-
if (hsvPercent.h >= cxzRange.min && hsvPercent.h <= cxzRange.max) {
|
|
89
|
-
tempRgb = {
|
|
90
|
-
r: c,
|
|
91
|
-
g: x,
|
|
92
|
-
b: 0,
|
|
93
|
-
};
|
|
94
|
-
}
|
|
95
|
-
else if (hsvPercent.h > xczRange.min && hsvPercent.h <= xczRange.max) {
|
|
96
|
-
tempRgb = {
|
|
97
|
-
r: x,
|
|
98
|
-
g: c,
|
|
99
|
-
b: 0,
|
|
100
|
-
};
|
|
101
|
-
}
|
|
102
|
-
else if (hsvPercent.h > zcxRange.min && hsvPercent.h <= zcxRange.max) {
|
|
103
|
-
tempRgb = {
|
|
104
|
-
r: 0,
|
|
105
|
-
g: c,
|
|
106
|
-
b: x,
|
|
107
|
-
};
|
|
108
|
-
}
|
|
109
|
-
else if (hsvPercent.h > zxcRange.min && hsvPercent.h <= zxcRange.max) {
|
|
110
|
-
tempRgb = {
|
|
111
|
-
r: 0,
|
|
112
|
-
g: x,
|
|
113
|
-
b: c,
|
|
114
|
-
};
|
|
115
|
-
}
|
|
116
|
-
else if (hsvPercent.h > xzcRange.min && hsvPercent.h <= xzcRange.max) {
|
|
117
|
-
tempRgb = {
|
|
118
|
-
r: x,
|
|
119
|
-
g: 0,
|
|
120
|
-
b: c,
|
|
121
|
-
};
|
|
122
|
-
}
|
|
123
|
-
else if (hsvPercent.h > czxRange.min && hsvPercent.h <= czxRange.max) {
|
|
124
|
-
tempRgb = {
|
|
125
|
-
r: c,
|
|
126
|
-
g: 0,
|
|
127
|
-
b: x,
|
|
128
|
-
};
|
|
129
|
-
}
|
|
130
|
-
if (tempRgb) {
|
|
131
|
-
const m = hsvPercent.v - c;
|
|
132
|
-
result.r = Math.floor((tempRgb.r + m) * rgbFactor);
|
|
133
|
-
result.g = Math.floor((tempRgb.g + m) * rgbFactor);
|
|
134
|
-
result.b = Math.floor((tempRgb.b + m) * rgbFactor);
|
|
135
|
-
}
|
|
136
|
-
return result;
|
|
137
|
-
}
|
|
138
|
-
function hsvaToRgba(hsva) {
|
|
139
|
-
return {
|
|
140
|
-
a: hsva.a,
|
|
141
|
-
...hsvToRgb(hsva),
|
|
142
|
-
};
|
|
143
|
-
}
|
|
144
|
-
class HsvColorManager {
|
|
1
|
+
import { getRangeValue, parseAlpha, } from "@tsparticles/engine";
|
|
2
|
+
import { hsvToRgb, hsvaToRgba } from "./utils.js";
|
|
3
|
+
const hsvRegex = /hsva?\(\s*(\d+)°\s*[\s,]\s*(\d+)%\s*[\s,]\s*(\d+)%\s*([\s,]\s*(0|1|0?\.\d+|(\d{1,3})%)\s*)?\)/i;
|
|
4
|
+
export class HsvColorManager {
|
|
145
5
|
constructor() {
|
|
146
6
|
this.key = "hsv";
|
|
147
|
-
|
|
7
|
+
}
|
|
8
|
+
accepts(input) {
|
|
9
|
+
return input.startsWith("hsv");
|
|
148
10
|
}
|
|
149
11
|
handleColor(color) {
|
|
150
12
|
const colorValue = color.value, hsvColor = colorValue.hsv ?? color.value;
|
|
151
|
-
if (hsvColor
|
|
152
|
-
return
|
|
13
|
+
if (!Object.hasOwn(hsvColor, "h") && !Object.hasOwn(hsvColor, "v")) {
|
|
14
|
+
return;
|
|
153
15
|
}
|
|
16
|
+
return hsvToRgb(hsvColor);
|
|
154
17
|
}
|
|
155
18
|
handleRangeColor(color) {
|
|
156
19
|
const colorValue = color.value, hsvColor = colorValue.hsv ?? color.value;
|
|
157
|
-
if (hsvColor
|
|
158
|
-
return
|
|
159
|
-
h: (0, engine_1.getRangeValue)(hsvColor.h),
|
|
160
|
-
s: (0, engine_1.getRangeValue)(hsvColor.s),
|
|
161
|
-
v: (0, engine_1.getRangeValue)(hsvColor.v),
|
|
162
|
-
});
|
|
20
|
+
if (!Object.hasOwn(hsvColor, "h") && !Object.hasOwn(hsvColor, "v")) {
|
|
21
|
+
return;
|
|
163
22
|
}
|
|
23
|
+
return hsvToRgb({
|
|
24
|
+
h: getRangeValue(hsvColor.h),
|
|
25
|
+
s: getRangeValue(hsvColor.s),
|
|
26
|
+
v: getRangeValue(hsvColor.v),
|
|
27
|
+
});
|
|
164
28
|
}
|
|
165
29
|
parseString(input) {
|
|
166
|
-
if (!
|
|
30
|
+
if (!this.accepts(input)) {
|
|
167
31
|
return;
|
|
168
32
|
}
|
|
169
|
-
const
|
|
33
|
+
const result = hsvRegex.exec(input), fullLength = 4, indexes = {
|
|
170
34
|
h: 1,
|
|
171
35
|
s: 2,
|
|
172
36
|
v: 3,
|
|
@@ -174,12 +38,11 @@ class HsvColorManager {
|
|
|
174
38
|
}, defaultAlpha = 1, radix = 10;
|
|
175
39
|
return result
|
|
176
40
|
? hsvaToRgba({
|
|
177
|
-
a: result.length > fullLength ?
|
|
178
|
-
h: parseInt(result[indexes.h], radix),
|
|
179
|
-
s: parseInt(result[indexes.s], radix),
|
|
180
|
-
v: parseInt(result[indexes.v], radix),
|
|
41
|
+
a: result.length > fullLength ? parseAlpha(result[indexes.a]) : defaultAlpha,
|
|
42
|
+
h: parseInt(result[indexes.h] ?? "0", radix),
|
|
43
|
+
s: parseInt(result[indexes.s] ?? "0", radix),
|
|
44
|
+
v: parseInt(result[indexes.v] ?? "0", radix),
|
|
181
45
|
})
|
|
182
46
|
: undefined;
|
|
183
47
|
}
|
|
184
48
|
}
|
|
185
|
-
exports.HsvColorManager = HsvColorManager;
|
package/cjs/index.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
await engine.addColorManager(new HsvColorManager_js_1.HsvColorManager(), refresh);
|
|
1
|
+
export function loadHsvColorPlugin(engine) {
|
|
2
|
+
engine.checkVersion("4.0.0-alpha.1");
|
|
3
|
+
engine.register(async (e) => {
|
|
4
|
+
const { HsvColorManager } = await import("./HsvColorManager.js");
|
|
5
|
+
e.addColorManager(new HsvColorManager());
|
|
6
|
+
});
|
|
8
7
|
}
|