Update 0BDFDB.plugin.js
This commit is contained in:
parent
2d91b1fc42
commit
dc677405b2
|
@ -3153,7 +3153,7 @@ module.exports = (_ => {
|
||||||
else {
|
else {
|
||||||
if (typeof color == "string") color = color.replace(/calc\(.+\s*\*\s*([0-9\.\%]+)\)/g, "$1");
|
if (typeof color == "string") color = color.replace(/calc\(.+\s*\*\s*([0-9\.\%]+)\)/g, "$1");
|
||||||
conv = conv === undefined || !conv ? conv = "RGBCOMP" : conv.toUpperCase();
|
conv = conv === undefined || !conv ? conv = "RGBCOMP" : conv.toUpperCase();
|
||||||
type = type === undefined || !type || !["RGB", "RGBA", "RGBCOMP", "HSL", "HSLA", "HSLCOMP", "HEX", "HEXA", "INT"].includes(type.toUpperCase()) ? BDFDB.ColorUtils.getType(color) : type.toUpperCase();
|
type = type === undefined || !type || !["RGB", "RGBA", "RGBCOMP", "HSL", "HSLA", "HSLCOMP", "HSV", "HSVA", "HSVCOMP", "HEX", "HEXA", "INT"].includes(type.toUpperCase()) ? BDFDB.ColorUtils.getType(color) : type.toUpperCase();
|
||||||
if (conv == "RGBCOMP") {
|
if (conv == "RGBCOMP") {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case "RGBCOMP":
|
case "RGBCOMP":
|
||||||
|
@ -3172,14 +3172,14 @@ module.exports = (_ => {
|
||||||
return processRGB(rgbComp).concat(a);
|
return processRGB(rgbComp).concat(a);
|
||||||
case "HSLCOMP":
|
case "HSLCOMP":
|
||||||
var hslComp = [].concat(color);
|
var hslComp = [].concat(color);
|
||||||
if (hslComp.length == 3) return BDFDB.ColorUtils.convert(`hsl(${processHSL(hslComp).join(",")})`, "RGBCOMP");
|
if (hslComp.length == 3) return BDFDB.ColorUtils.convert(`hsl(${processHSX(hslComp).join(",")})`, "RGBCOMP");
|
||||||
else if (hslComp.length == 4) {
|
else if (hslComp.length == 4) {
|
||||||
let a = processA(hslComp.pop());
|
let a = processA(hslComp.pop());
|
||||||
return BDFDB.ColorUtils.convert(`hsl(${processHSL(hslComp).join(",")})`, "RGBCOMP").concat(a);
|
return BDFDB.ColorUtils.convert(`hsl(${processHSX(hslComp).join(",")})`, "RGBCOMP").concat(a);
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "HSL":
|
case "HSL":
|
||||||
var hslComp = processHSL(color.replace(/\s/g, "").slice(4, -1).split(","));
|
var hslComp = processHSX(color.replace(/\s/g, "").slice(4, -1).split(","));
|
||||||
var r, g, b, m, c, x, p, q;
|
var r, g, b, m, c, x, p, q;
|
||||||
var h = hslComp[0], s = processPercentage(hslComp[1]), l = processPercentage(hslComp[2]);
|
var h = hslComp[0], s = processPercentage(hslComp[1]), l = processPercentage(hslComp[2]);
|
||||||
var a = s * Math.min(l, 1-l);
|
var a = s * Math.min(l, 1-l);
|
||||||
|
@ -3188,6 +3188,32 @@ module.exports = (_ => {
|
||||||
case "HSLA":
|
case "HSLA":
|
||||||
var hslComp = color.replace(/\s/g, "").slice(5, -1).split(",");
|
var hslComp = color.replace(/\s/g, "").slice(5, -1).split(",");
|
||||||
return BDFDB.ColorUtils.convert(`hsl(${hslComp.slice(0, 3).join(",")})`, "RGBCOMP").concat(processA(hslComp.pop()));
|
return BDFDB.ColorUtils.convert(`hsl(${hslComp.slice(0, 3).join(",")})`, "RGBCOMP").concat(processA(hslComp.pop()));
|
||||||
|
case "HSVCOMP":
|
||||||
|
var hsvComp = [].concat(color);
|
||||||
|
if (hsvComp.length == 3) return BDFDB.ColorUtils.convert(`hsv(${processHSX(hsvComp).join(",")})`, "RGBCOMP");
|
||||||
|
else if (hsvComp.length == 4) {
|
||||||
|
let a = processA(hsvComp.pop());
|
||||||
|
return BDFDB.ColorUtils.convert(`hsv(${processHSX(hsvComp).join(",")})`, "RGBCOMP").concat(a);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "HSV":
|
||||||
|
var hsvComp = processHSX(color.replace(/\s/g, "").slice(4, -1).split(","));
|
||||||
|
var r, g, b, i, f, p, q, t;
|
||||||
|
var h = hsvComp[0] / 360, s = processPercentage(hsvComp[1]), v = processPercentage(hsvComp[2]);
|
||||||
|
i = Math.floor(h * 6), f = h * 6 - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);
|
||||||
|
|
||||||
|
switch (i % 6) {
|
||||||
|
case 0: r = v, g = t, b = p; break;
|
||||||
|
case 1: r = q, g = v, b = p; break;
|
||||||
|
case 2: r = p, g = v, b = t; break;
|
||||||
|
case 3: r = p, g = q, b = v; break;
|
||||||
|
case 4: r = t, g = p, b = v; break;
|
||||||
|
case 5: r = v, g = p, b = q; break;
|
||||||
|
}
|
||||||
|
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
|
||||||
|
case "HSVA":
|
||||||
|
var hsvComp = color.replace(/\s/g, "").slice(5, -1).split(",");
|
||||||
|
return BDFDB.ColorUtils.convert(`hsv(${hsvComp.slice(0, 3).join(",")})`, "RGBCOMP").concat(processA(hsvComp.pop()));
|
||||||
case "HEX":
|
case "HEX":
|
||||||
var hex = /^#([a-f\d]{1})([a-f\d]{1})([a-f\d]{1})$|^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
|
var hex = /^#([a-f\d]{1})([a-f\d]{1})([a-f\d]{1})$|^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
|
||||||
return [parseInt(hex[1] + hex[1] || hex[4], 16), parseInt(hex[2] + hex[2] || hex[5], 16), parseInt(hex[3] + hex[3] || hex[6], 16)];
|
return [parseInt(hex[1] + hex[1] || hex[4], 16), parseInt(hex[2] + hex[2] || hex[5], 16), parseInt(hex[3] + hex[3] || hex[6], 16)];
|
||||||
|
@ -3202,26 +3228,27 @@ module.exports = (_ => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
if (conv && type && conv.indexOf("HSL") == 0 && type.indexOf("HSL") == 0) {
|
if (conv && type && (conv.indexOf("HSL") == 0 && type.indexOf("HSL") == 0 || conv.indexOf("HSV") == 0 && type.indexOf("HSV") == 0)) {
|
||||||
if (type == "HSLCOMP") {
|
let name = type.indexOf("HSL") == 0 ? "HSL" : "HSV";
|
||||||
let hslComp = [].concat(color);
|
if (type == `${name}COMP`) {
|
||||||
|
let comp = [].concat(color);
|
||||||
switch (conv) {
|
switch (conv) {
|
||||||
case "HSLCOMP":
|
case `${name}COMP`:
|
||||||
if (hslComp.length == 3) return processHSL(hslComp);
|
if (comp.length == 3) return processHSX(comp);
|
||||||
else if (hslComp.length == 4) {
|
else if (comp.length == 4) {
|
||||||
var a = processA(hslComp.pop());
|
var a = processA(comp.pop());
|
||||||
return processHSL(hslComp).concat(a);
|
return processHSX(comp).concat(a);
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "HSL":
|
case name:
|
||||||
return `hsl(${processHSL(hslComp.slice(0, 3)).join(",")})`;
|
return `${name.toLowerCase()}(${processHSX(comp.slice(0, 3)).join(",")})`;
|
||||||
case "HSLA":
|
case `${name}A`:
|
||||||
hslComp = hslComp.slice(0, 4);
|
comp = comp.slice(0, 4);
|
||||||
var a = hslComp.length == 4 ? processA(hslComp.pop()) : 1;
|
var a = comp.length == 4 ? processA(comp.pop()) : 1;
|
||||||
return `hsla(${processHSL(hslComp).concat(a).join(",")})`;
|
return `${name.toLowerCase()}a(${processHSX(comp).concat(a).join(",")})`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return BDFDB.ColorUtils.convert(color.replace(/\s/g, "").slice(color.toUpperCase().indexOf("HSLA") == 0 ? 5 : 4, -1).split(","), conv, "HSLCOMP");
|
return BDFDB.ColorUtils.convert(color.replace(/\s/g, "").slice(color.toUpperCase().indexOf("A") == 3 ? 5 : 4, -1).split(","), conv, `${name}COMP`);
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
let rgbComp = type == "RGBCOMP" ? [].concat(color) : BDFDB.ColorUtils.convert(color, "RGBCOMP", type);
|
let rgbComp = type == "RGBCOMP" ? [].concat(color) : BDFDB.ColorUtils.convert(color, "RGBCOMP", type);
|
||||||
|
@ -3234,21 +3261,45 @@ module.exports = (_ => {
|
||||||
return `rgba(${processRGB(rgbComp).concat(a).join(",")})`;
|
return `rgba(${processRGB(rgbComp).concat(a).join(",")})`;
|
||||||
case "HSLCOMP":
|
case "HSLCOMP":
|
||||||
var a = rgbComp.length == 4 ? processA(rgbComp.pop()) : null;
|
var a = rgbComp.length == 4 ? processA(rgbComp.pop()) : null;
|
||||||
var hslComp = processHSL(BDFDB.ColorUtils.convert(rgbComp, "HSL").replace(/\s/g, "").split(","));
|
var hslComp = processHSX(BDFDB.ColorUtils.convert(rgbComp, "HSL").replace(/\s/g, "").split(","));
|
||||||
return a != null ? hslComp.concat(a) : hslComp;
|
return a != null ? hslComp.concat(a) : hslComp;
|
||||||
case "HSL":
|
case "HSL":
|
||||||
|
var r = processC(rgbComp[0]) / 255, g = processC(rgbComp[1]) / 255, b = processC(rgbComp[2]) / 255;
|
||||||
|
var max = Math.max(r, g, b), min = Math.min(r, g, b);
|
||||||
|
|
||||||
|
var h, s, l;
|
||||||
|
h = s = l = (max + min) / 2;
|
||||||
|
|
||||||
|
if (max === min) return `hsl(${processHSX([0, 0, l * 100]).join(",")})`;
|
||||||
|
|
||||||
|
var dif = max - min;
|
||||||
|
s = l >= 0.5 ? dif / (2 - (max + min)) : dif / (max + min);
|
||||||
|
switch (max) {
|
||||||
|
case r: h = ((g - b) / dif + 0) * 60; break;
|
||||||
|
case g: h = ((b - r) / dif + 2) * 60; break;
|
||||||
|
case b: h = ((r - g) / dif + 4) * 60; break;
|
||||||
|
}
|
||||||
|
return `hsl(${processHSX([Math.round(h * 360), s * 100, l * 100]).join(",")})`;
|
||||||
|
case "HSLA":
|
||||||
|
var a = rgbComp.length == 4 ? processA(rgbComp.pop()) : 1;
|
||||||
|
return `hsla(${BDFDB.ColorUtils.convert(rgbComp, "HSL").slice(4, -1).split(",").concat(a).join(",")})`;
|
||||||
|
case "HSVCOMP":
|
||||||
|
var a = rgbComp.length == 4 ? processA(rgbComp.pop()) : null;
|
||||||
|
var hsvComp = processHSX(BDFDB.ColorUtils.convert(rgbComp, "HSV").replace(/\s/g, "").split(","));
|
||||||
|
return a != null ? hsvComp.concat(a) : hsvComp;
|
||||||
|
case "HSV":
|
||||||
var r = processC(rgbComp[0]), g = processC(rgbComp[1]), b = processC(rgbComp[2]);
|
var r = processC(rgbComp[0]), g = processC(rgbComp[1]), b = processC(rgbComp[2]);
|
||||||
var max = Math.max(r, g, b), min = Math.min(r, g, b), dif = max - min, h, l = max === 0 ? 0 : dif / max, s = max / 255;
|
var max = Math.max(r, g, b), min = Math.min(r, g, b), dif = max - min, h, s = max === 0 ? 0 : dif / max, v = max / 255;
|
||||||
switch (max) {
|
switch (max) {
|
||||||
case min: h = 0; break;
|
case min: h = 0; break;
|
||||||
case r: h = g - b + dif * (g < b ? 6 : 0); h /= 6 * dif; break;
|
case r: h = g - b + dif * (g < b ? 6 : 0); h /= 6 * dif; break;
|
||||||
case g: h = b - r + dif * 2; h /= 6 * dif; break;
|
case g: h = b - r + dif * 2; h /= 6 * dif; break;
|
||||||
case b: h = r - g + dif * 4; h /= 6 * dif; break;
|
case b: h = r - g + dif * 4; h /= 6 * dif; break;
|
||||||
}
|
}
|
||||||
return `hsl(${processHSL([Math.round(h * 360), l * 100, s * 100]).join(",")})`;
|
return `hsv(${processHSX([Math.round(h * 360), s * 100, v * 100]).join(",")})`;
|
||||||
case "HSLA":
|
case "HSVA":
|
||||||
var a = rgbComp.length == 4 ? processA(rgbComp.pop()) : 1;
|
var a = rgbComp.length == 4 ? processA(rgbComp.pop()) : 1;
|
||||||
return `hsla(${BDFDB.ColorUtils.convert(rgbComp, "HSL").slice(4, -1).split(",").concat(a).join(",")})`;
|
return `hsva(${BDFDB.ColorUtils.convert(rgbComp, "HSV").slice(4, -1).split(",").concat(a).join(",")})`;
|
||||||
case "HEX":
|
case "HEX":
|
||||||
return ("#" + (0x1000000 + (rgbComp[2] | rgbComp[1] << 8 | rgbComp[0] << 16)).toString(16).slice(1)).toUpperCase();
|
return ("#" + (0x1000000 + (rgbComp[2] | rgbComp[1] << 8 | rgbComp[0] << 16)).toString(16).slice(1)).toUpperCase();
|
||||||
case "HEXA":
|
case "HEXA":
|
||||||
|
@ -3291,7 +3342,7 @@ module.exports = (_ => {
|
||||||
return (isNaN(sl) || sl > 100 ? 100 : sl < 0 ? 0 : sl) + "%";
|
return (isNaN(sl) || sl > 100 ? 100 : sl < 0 ? 0 : sl) + "%";
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
function processHSL (comp) {
|
function processHSX (comp) {
|
||||||
comp = [].concat(comp);
|
comp = [].concat(comp);
|
||||||
let h = parseFloat(comp.shift().toString().replace(/[^0-9\.\-]/g, ""));
|
let h = parseFloat(comp.shift().toString().replace(/[^0-9\.\-]/g, ""));
|
||||||
h = isNaN(h) || h > 360 ? 360 : h < 0 ? 0 : h;
|
h = isNaN(h) || h > 360 ? 360 : h < 0 ? 0 : h;
|
||||||
|
@ -3410,6 +3461,8 @@ module.exports = (_ => {
|
||||||
else if (color.indexOf("RGBA(") == 0 && comp.length == 4 && isRGB(comp)) return "RGBA";
|
else if (color.indexOf("RGBA(") == 0 && comp.length == 4 && isRGB(comp)) return "RGBA";
|
||||||
else if (color.indexOf("HSL(") == 0 && comp.length == 3 && isHSL(comp)) return "HSL";
|
else if (color.indexOf("HSL(") == 0 && comp.length == 3 && isHSL(comp)) return "HSL";
|
||||||
else if (color.indexOf("HSLA(") == 0 && comp.length == 4 && isHSL(comp)) return "HSLA";
|
else if (color.indexOf("HSLA(") == 0 && comp.length == 4 && isHSL(comp)) return "HSLA";
|
||||||
|
else if (color.indexOf("HSV(") == 0 && comp.length == 3 && isHSL(comp)) return "HSV";
|
||||||
|
else if (color.indexOf("HSVA(") == 0 && comp.length == 4 && isHSL(comp)) return "HSVA";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if (typeof color === "number" && parseInt(color) == color && color > -1 && color < 16777216) return "INT";
|
else if (typeof color === "number" && parseInt(color) == color && color > -1 && color < 16777216) return "INT";
|
||||||
|
@ -5106,13 +5159,13 @@ module.exports = (_ => {
|
||||||
render() {
|
render() {
|
||||||
if (this.state.isGradient) this.props.color = Object.assign({}, this.props.color);
|
if (this.state.isGradient) this.props.color = Object.assign({}, this.props.color);
|
||||||
|
|
||||||
let hslFormat = this.props.alpha ? "HSLA" : "HSL";
|
let colorFormat = this.props.alpha ? "HSVA" : "HSV";
|
||||||
let hexRegex = this.props.alpha ? /^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i : /^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
|
let hexRegex = this.props.alpha ? /^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i : /^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
|
||||||
|
|
||||||
let selectedColor = BDFDB.ColorUtils.convert(this.state.isGradient ? this.props.color[this.state.selectedGradientCursor] : this.props.color, hslFormat) || BDFDB.ColorUtils.convert("#000000FF", hslFormat);
|
let selectedColor = BDFDB.ColorUtils.convert(this.state.isGradient ? this.props.color[this.state.selectedGradientCursor] : this.props.color, colorFormat) || BDFDB.ColorUtils.convert("#000000FF", colorFormat);
|
||||||
let currentGradient = (this.state.isGradient ? Object.entries(this.props.color, hslFormat) : [[0, selectedColor], [1, selectedColor]]);
|
let currentGradient = (this.state.isGradient ? Object.entries(this.props.color, colorFormat) : [[0, selectedColor], [1, selectedColor]]);
|
||||||
|
|
||||||
let [h, s, l] = BDFDB.ColorUtils.convert(selectedColor, "HSLCOMP");
|
let [h, s, v] = BDFDB.ColorUtils.convert(selectedColor, "HSVCOMP");
|
||||||
let a = BDFDB.ColorUtils.getAlpha(selectedColor);
|
let a = BDFDB.ColorUtils.getAlpha(selectedColor);
|
||||||
a = a == null ? 1 : a;
|
a = a == null ? 1 : a;
|
||||||
|
|
||||||
|
@ -5129,10 +5182,10 @@ module.exports = (_ => {
|
||||||
className: BDFDB.disCN.colorpickersaturation,
|
className: BDFDB.disCN.colorpickersaturation,
|
||||||
children: BDFDB.ReactUtils.createElement("div", {
|
children: BDFDB.ReactUtils.createElement("div", {
|
||||||
className: BDFDB.disCN.colorpickersaturationcolor,
|
className: BDFDB.disCN.colorpickersaturationcolor,
|
||||||
style: {position: "absolute", top: 0, right: 0, bottom: 0, left: 0, cursor: "crosshair", backgroundColor: BDFDB.ColorUtils.convert([h, "100%", "100%"], "RGB")},
|
style: {position: "absolute", top: 0, right: 0, bottom: 0, left: 0, cursor: "crosshair", backgroundColor: BDFDB.ColorUtils.convert([h, "100%", "50%"], "RGB")},
|
||||||
onClick: event => {
|
onClick: event => {
|
||||||
let rects = BDFDB.DOMUtils.getRects(BDFDB.DOMUtils.getParent(BDFDB.dotCN.colorpickersaturationcolor, event.target));
|
let rects = BDFDB.DOMUtils.getRects(BDFDB.DOMUtils.getParent(BDFDB.dotCN.colorpickersaturationcolor, event.target));
|
||||||
this.handleColorChange(BDFDB.ColorUtils.convert([h, BDFDB.NumberUtils.mapRange([rects.left, rects.left + rects.width], [0, 100], event.clientX) + "%", BDFDB.NumberUtils.mapRange([rects.top, rects.top + rects.height], [100, 0], event.clientY) + "%", a], hslFormat));
|
this.handleColorChange(BDFDB.ColorUtils.convert([h, BDFDB.NumberUtils.mapRange([rects.left, rects.left + rects.width], [0, 100], event.clientX) + "%", BDFDB.NumberUtils.mapRange([rects.top, rects.top + rects.height], [100, 0], event.clientY) + "%", a], colorFormat, "HSVCOMP"));
|
||||||
},
|
},
|
||||||
onMouseDown: event => {
|
onMouseDown: event => {
|
||||||
let rects = BDFDB.DOMUtils.getRects(BDFDB.DOMUtils.getParent(BDFDB.dotCN.colorpickersaturationcolor, event.target));
|
let rects = BDFDB.DOMUtils.getRects(BDFDB.DOMUtils.getParent(BDFDB.dotCN.colorpickersaturationcolor, event.target));
|
||||||
|
@ -5141,7 +5194,7 @@ module.exports = (_ => {
|
||||||
document.removeEventListener("mousemove", mouseMove);
|
document.removeEventListener("mousemove", mouseMove);
|
||||||
};
|
};
|
||||||
let mouseMove = event2 => {
|
let mouseMove = event2 => {
|
||||||
this.handleColorChange(BDFDB.ColorUtils.convert([h, BDFDB.NumberUtils.mapRange([rects.left, rects.left + rects.width], [0, 100], event2.clientX) + "%", BDFDB.NumberUtils.mapRange([rects.top, rects.top + rects.height], [100, 0], event2.clientY) + "%", a], hslFormat));
|
this.handleColorChange(BDFDB.ColorUtils.convert([h, BDFDB.NumberUtils.mapRange([rects.left, rects.left + rects.width], [0, 100], event2.clientX) + "%", BDFDB.NumberUtils.mapRange([rects.top, rects.top + rects.height], [100, 0], event2.clientY) + "%", a], colorFormat, "HSVCOMP"));
|
||||||
};
|
};
|
||||||
document.addEventListener("mouseup", mouseUp);
|
document.addEventListener("mouseup", mouseUp);
|
||||||
document.addEventListener("mousemove", mouseMove);
|
document.addEventListener("mousemove", mouseMove);
|
||||||
|
@ -5160,7 +5213,7 @@ module.exports = (_ => {
|
||||||
}),
|
}),
|
||||||
BDFDB.ReactUtils.createElement("div", {
|
BDFDB.ReactUtils.createElement("div", {
|
||||||
className: BDFDB.disCN.colorpickersaturationcursor,
|
className: BDFDB.disCN.colorpickersaturationcursor,
|
||||||
style: {position: "absolute", cursor: "crosshair", left: s, top: `${BDFDB.NumberUtils.mapRange([0, 100], [100, 0], parseFloat(l))}%`},
|
style: {position: "absolute", cursor: "crosshair", left: s, top: `${BDFDB.NumberUtils.mapRange([0, 100], [100, 0], parseFloat(v))}%`},
|
||||||
children: BDFDB.ReactUtils.createElement("div", {
|
children: BDFDB.ReactUtils.createElement("div", {
|
||||||
style: {width: 4, height: 4, boxShadow: "rgb(255, 255, 255) 0px 0px 0px 1.5px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px", borderRadius: "50%", transform: "translate(-2px, -2px)"}
|
style: {width: 4, height: 4, boxShadow: "rgb(255, 255, 255) 0px 0px 0px 1.5px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset, rgba(0, 0, 0, 0.4) 0px 0px 1px 2px", borderRadius: "50%", transform: "translate(-2px, -2px)"}
|
||||||
})
|
})
|
||||||
|
@ -5179,7 +5232,7 @@ module.exports = (_ => {
|
||||||
style: {padding: "0px 2px", position: "relative", height: "100%"},
|
style: {padding: "0px 2px", position: "relative", height: "100%"},
|
||||||
onClick: event => {
|
onClick: event => {
|
||||||
let rects = BDFDB.DOMUtils.getRects(BDFDB.DOMUtils.getParent(BDFDB.dotCN.colorpickerhuehorizontal, event.target));
|
let rects = BDFDB.DOMUtils.getRects(BDFDB.DOMUtils.getParent(BDFDB.dotCN.colorpickerhuehorizontal, event.target));
|
||||||
this.handleColorChange(BDFDB.ColorUtils.convert([BDFDB.NumberUtils.mapRange([rects.left, rects.left + rects.width], [0, 360], event.clientX), s, l, a], hslFormat));
|
this.handleColorChange(BDFDB.ColorUtils.convert([BDFDB.NumberUtils.mapRange([rects.left, rects.left + rects.width], [0, 360], event.clientX), s, v, a], colorFormat, "HSVCOMP"));
|
||||||
},
|
},
|
||||||
onMouseDown: event => {
|
onMouseDown: event => {
|
||||||
let rects = BDFDB.DOMUtils.getRects(BDFDB.DOMUtils.getParent(BDFDB.dotCN.colorpickerhuehorizontal, event.target));
|
let rects = BDFDB.DOMUtils.getRects(BDFDB.DOMUtils.getParent(BDFDB.dotCN.colorpickerhuehorizontal, event.target));
|
||||||
|
@ -5188,7 +5241,7 @@ module.exports = (_ => {
|
||||||
document.removeEventListener("mousemove", mouseMove);
|
document.removeEventListener("mousemove", mouseMove);
|
||||||
};
|
};
|
||||||
let mouseMove = event2 => {
|
let mouseMove = event2 => {
|
||||||
this.handleColorChange(BDFDB.ColorUtils.convert([BDFDB.NumberUtils.mapRange([rects.left, rects.left + rects.width], [0, 360], event2.clientX), s, l, a], hslFormat));
|
this.handleColorChange(BDFDB.ColorUtils.convert([BDFDB.NumberUtils.mapRange([rects.left, rects.left + rects.width], [0, 360], event2.clientX), s, v, a], colorFormat, "HSVCOMP"));
|
||||||
};
|
};
|
||||||
document.addEventListener("mouseup", mouseUp);
|
document.addEventListener("mouseup", mouseUp);
|
||||||
document.addEventListener("mousemove", mouseMove);
|
document.addEventListener("mousemove", mouseMove);
|
||||||
|
@ -5222,10 +5275,10 @@ module.exports = (_ => {
|
||||||
style: {position: "absolute", top: 0, right: 0, bottom: 0, left: 0},
|
style: {position: "absolute", top: 0, right: 0, bottom: 0, left: 0},
|
||||||
children: BDFDB.ReactUtils.createElement("div", {
|
children: BDFDB.ReactUtils.createElement("div", {
|
||||||
className: BDFDB.disCN.colorpickeralphahorizontal,
|
className: BDFDB.disCN.colorpickeralphahorizontal,
|
||||||
style: {padding: "0px 2px", position: "relative", height: "100%", background: `linear-gradient(to right, ${BDFDB.ColorUtils.setAlpha([h, s, l], 0, "RGBA")}, ${BDFDB.ColorUtils.setAlpha([h, s, l], 1, "RGBA")}`},
|
style: {padding: "0px 2px", position: "relative", height: "100%", background: `linear-gradient(to right, ${BDFDB.ColorUtils.setAlpha([h, s, v], 0, "RGBA")}, ${BDFDB.ColorUtils.setAlpha([h, s, v], 1, "RGBA")}`},
|
||||||
onClick: event => {
|
onClick: event => {
|
||||||
let rects = BDFDB.DOMUtils.getRects(BDFDB.DOMUtils.getParent(BDFDB.dotCN.colorpickeralphahorizontal, event.target));
|
let rects = BDFDB.DOMUtils.getRects(BDFDB.DOMUtils.getParent(BDFDB.dotCN.colorpickeralphahorizontal, event.target));
|
||||||
this.handleColorChange(BDFDB.ColorUtils.setAlpha([h, s, l], BDFDB.NumberUtils.mapRange([rects.left, rects.left + rects.width], [0, 1], event.clientX), hslFormat));
|
this.handleColorChange(BDFDB.ColorUtils.setAlpha([h, s, v], BDFDB.NumberUtils.mapRange([rects.left, rects.left + rects.width], [0, 1], event.clientX), colorFormat));
|
||||||
},
|
},
|
||||||
onMouseDown: event => {
|
onMouseDown: event => {
|
||||||
let rects = BDFDB.DOMUtils.getRects(BDFDB.DOMUtils.getParent(BDFDB.dotCN.colorpickeralphahorizontal, event.target));
|
let rects = BDFDB.DOMUtils.getRects(BDFDB.DOMUtils.getParent(BDFDB.dotCN.colorpickeralphahorizontal, event.target));
|
||||||
|
@ -5237,7 +5290,7 @@ module.exports = (_ => {
|
||||||
};
|
};
|
||||||
let mouseMove = event2 => {
|
let mouseMove = event2 => {
|
||||||
this.state.draggingAlphaCursor = true;
|
this.state.draggingAlphaCursor = true;
|
||||||
this.handleColorChange(BDFDB.ColorUtils.setAlpha([h, s, l], BDFDB.NumberUtils.mapRange([rects.left, rects.left + rects.width], [0, 1], event2.clientX), hslFormat));
|
this.handleColorChange(BDFDB.ColorUtils.setAlpha([h, s, v], BDFDB.NumberUtils.mapRange([rects.left, rects.left + rects.width], [0, 1], event2.clientX), colorFormat));
|
||||||
};
|
};
|
||||||
document.addEventListener("mouseup", mouseUp);
|
document.addEventListener("mouseup", mouseUp);
|
||||||
document.addEventListener("mousemove", mouseMove);
|
document.addEventListener("mousemove", mouseMove);
|
||||||
|
@ -5279,7 +5332,7 @@ module.exports = (_ => {
|
||||||
let rects = BDFDB.DOMUtils.getRects(event.target);
|
let rects = BDFDB.DOMUtils.getRects(event.target);
|
||||||
let pos = BDFDB.NumberUtils.mapRange([rects.left, rects.left + rects.width], [0.01, 0.99], event.clientX);
|
let pos = BDFDB.NumberUtils.mapRange([rects.left, rects.left + rects.width], [0.01, 0.99], event.clientX);
|
||||||
if (Object.keys(this.props.color).indexOf(pos) == -1) {
|
if (Object.keys(this.props.color).indexOf(pos) == -1) {
|
||||||
this.props.color[pos] = BDFDB.ColorUtils.convert("#000000FF", hslFormat);
|
this.props.color[pos] = BDFDB.ColorUtils.convert("#000000FF", colorFormat);
|
||||||
this.state.selectedGradientCursor = pos;
|
this.state.selectedGradientCursor = pos;
|
||||||
this.handleColorChange();
|
this.handleColorChange();
|
||||||
}
|
}
|
||||||
|
@ -6277,7 +6330,6 @@ module.exports = (_ => {
|
||||||
}
|
}
|
||||||
else controlRef.current && controlRef.current.blur && controlRef.current.blur(controlRef.current);
|
else controlRef.current && controlRef.current.blur && controlRef.current.blur(controlRef.current);
|
||||||
}), [props.isFocused]);
|
}), [props.isFocused]);
|
||||||
|
|
||||||
return BDFDB.ReactUtils.createElement("div", Object.assign({
|
return BDFDB.ReactUtils.createElement("div", Object.assign({
|
||||||
className: BDFDB.DOMUtils.formatClassName(BDFDB.disCN.menuitem, BDFDB.disCN[`menucolor${(props.color && InternalData.DiscordClasses[`menucolor${props.color.toLowerCase()}`] || Internal.DiscordConstants.MenuItemColors.DEFAULT || "").toLowerCase()}`], props.disabled && BDFDB.disCN.menudisabled, props.showDefaultFocus && props.isFocused && BDFDB.disCN.menufocused, !props.showDefaultFocus && BDFDB.disCN.menuhideinteraction),
|
className: BDFDB.DOMUtils.formatClassName(BDFDB.disCN.menuitem, BDFDB.disCN[`menucolor${(props.color && InternalData.DiscordClasses[`menucolor${props.color.toLowerCase()}`] || Internal.DiscordConstants.MenuItemColors.DEFAULT || "").toLowerCase()}`], props.disabled && BDFDB.disCN.menudisabled, props.showDefaultFocus && props.isFocused && BDFDB.disCN.menufocused, !props.showDefaultFocus && BDFDB.disCN.menuhideinteraction),
|
||||||
onClick: BDFDB.ReactUtils.useCallback((_ => {
|
onClick: BDFDB.ReactUtils.useCallback((_ => {
|
||||||
|
|
Loading…
Reference in New Issue