-
Notifications
You must be signed in to change notification settings - Fork 9
/
api.js
165 lines (156 loc) · 5.35 KB
/
api.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
import {fontColorContrast} from "./lib/FontColorContrast.js"
const API = {
/**
* Turn hex rgba into rgba object
* @param {String} hex 8 long hex value in string form, eg: "#123456ff"
* @returns object of {r, g, b, a}
*/
hexToRGBA(hex) {
const hexArr = hex.slice(1).match(new RegExp(".{2}", "g"));
const [r, g, b, a] = hexArr.map((hexStr) => {
return parseInt(hexStr.repeat(2 / hexStr.length), 16);
});
const realAlpha = this._isRealNumber(a) ? a : 1;
const rgba = [r, g, b, Math.round((realAlpha / 256 + Number.EPSILON) * 100) / 100];
return {
r: rgba[0] ?? 255,
g: rgba[1] ?? 255,
b: rgba[2] ?? 255,
a: rgba[3] ?? 255,
};
},
/**
* Makes text white or black according to background color
* @href https://wunnle.com/dynamic-text-color-based-on-background
* @href https://stackoverflow.com/questions/54230440/how-to-change-text-color-based-on-rgb-and-rgba-background-color
* @param {String} rgbaHex 8 long hex value in string form, eg: "#123456ff"
* @param {number} threshold Contrast threshold to control the resulting font color, float values from 0 to 1. Default is 0.5.
* @returns {( '#ffffff'|'#000000')} hex color
*/
getTextColor(rgbaHex, threshold = 0.5) {
// return game.modules.get("colorsettings").api.getTextColor(rgbaHex);
const rgba = this.hexToRGBA(rgbaHex);
// OLD METHOD
/*
//const realAlpha = this._isRealNumber(rgba.a) ? rgba.a : 1;
const brightness = Math.round((rgba.r * 299 + rgba.g * 587 + rgba.b * 114) / 1000);
// const realAlpha = this._isRealNumber(rgba.a) ? rgba.a : 1;
if (this._isRealNumber(rgba.a) && rgba.a > 0.5) {
return brightness > 125 ? "black" : "white";
} else {
//return 'black';
return brightness > 125 ? "black" : "white";
}
*/
const hexTextColor = fontColorContrast(rgba.r, rgba.g, rgba.b, threshold);
return hexTextColor;
},
/**
* Convert a Array of rgba[r, g, b, a] in string format to a hex string
* @param {String} rgba as string e.g. rgba('xxx','xxx','xxx','xxx')
* @param {boolean} forceRemoveAlpha
* @returns turns the hex string
*/
RGBAToHexFromString(rgba, forceRemoveAlpha = false) {
return (
"#" +
rgba
.replace(/^rgba?\(|\s+|\)$/g, "") // Get's rgba / rgb string values
.split(",") // splits them at ","
.filter((string, index) => !forceRemoveAlpha || index !== 3)
.map((string) => parseFloat(string)) // Converts them to numbers
.map((number, index) => (index === 3 ? Math.round(number * 255) : number)) // Converts alpha to 255 number
.map((number) => number.toString(16)) // Converts numbers to hex
.map((string) => (string.length === 1 ? "0" + string : string)) // Adds 0 when length of one number is 1
.join("")
); // Puts the array to together to a string
},
/**
* Convert a Array of rgba[r, g, b, a] in to a hex string
* @param {*} r
* @param {*} g
* @param {*} b
* @param {*} a
* @returns the hex string
*/
RGBAToHex(r, g, b, a) {
let r2 = r.toString(16);
let g2 = g.toString(16);
let b2 = b.toString(16);
let a2 = Math.round(a * 255).toString(16);
if (r2.length == 1) {
r2 = "0" + r2;
}
if (g2.length == 1) {
g2 = "0" + g2;
}
if (b2.length == 1) {
b2 = "0" + b2;
}
if (a2.length == 1) {
a2 = "0" + a2;
}
return "#" + r2 + g2 + b2 + a2;
},
/**
* Turn hex rgba into rgba string
* @href https://stackoverflow.com/questions/19799777/how-to-add-transparency-information-to-a-hex-color-code
* @href https://stackoverflow.com/questions/21646738/convert-hex-to-rgba
* @param colorHex
* @param alpha
* @return rgba as string e.g. rgba('xxx','xxx','xxx','xxx')
*/
hexToRGBAString(colorHex, alpha = 1) {
let rgba = Color.from(colorHex);
// return "rgba(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ", " + alpha + ")";
if (colorHex.length > 7) {
rgba = this.hexToRGBA(colorHex);
} else {
const colorHex2 = `${colorHex}${Math.floor(alpha * 255)
.toString(16)
.padStart(2, "0")}`;
rgba = this.hexToRGBA(colorHex2);
// const c = Color.from(colorHex);
// rgba = c.toRGBA();
}
const realAlpha = this._isRealNumber(rgba.a) ? rgba.a : alpha;
return "rgba(" + rgba.r + ", " + rgba.g + ", " + rgba.b + ", " + realAlpha + ")";
},
/**
* Calculate brightness value by RGB or HEX color.
* @param color (String) The color value in RGB or HEX (for example: #000000 || #000 || rgb(0,0,0) || rgba(0,0,0,0))
* @returns (Number) The brightness value (dark) 0 ... 255 (light)
* @return {number} brigthness
*/
brightnessByColor(colorHexOrRgb) {
let color = "" + colorHexOrRgb;
let isHEX = color.indexOf("#") == 0;
let isRGB = color.indexOf("rgb") == 0;
let r = 0;
let g = 0;
let b = 0;
if (isHEX) {
const rgba = this.hexToRGBA(color);
r = rgba.r;
g = rgba.g;
b = rgba.b;
}
if (isRGB) {
var m = color.match(/(\d+){3}/g);
if (m) {
r = m[0];
g = m[1];
b = m[2];
}
}
if (typeof r != "undefined") {
return (r * 299 + g * 587 + b * 114) / 1000;
} else {
return undefined;
}
},
_isRealNumber(inNumber) {
return !isNaN(inNumber) && typeof inNumber === "number" && isFinite(inNumber);
}
}
export default API;