110 lines
2.6 KiB
JavaScript
110 lines
2.6 KiB
JavaScript
import { fabric } from "./fabric.js";
|
|
|
|
// RGB, HSV, and HSL color conversion algorithms in JavaScript https://gist.github.com/mjackson/5311256
|
|
function rgbToHsv(r, g, b) {
|
|
r /= 255;
|
|
g /= 255;
|
|
b /= 255;
|
|
|
|
let max = Math.max(r, g, b),
|
|
min = Math.min(r, g, b),
|
|
h,
|
|
s,
|
|
v = max,
|
|
d = max - min;
|
|
s = max == 0 ? 0 : d / max;
|
|
|
|
if (max == min) {
|
|
h = 0; // achromatic
|
|
} else {
|
|
switch (max) {
|
|
case r:
|
|
h = (g - b) / d + (g < b ? 6 : 0);
|
|
break;
|
|
case g:
|
|
h = (b - r) / d + 2;
|
|
break;
|
|
case b:
|
|
h = (r - g) / d + 4;
|
|
break;
|
|
}
|
|
|
|
h /= 6;
|
|
}
|
|
|
|
return [h, s, v];
|
|
}
|
|
// ---
|
|
|
|
function toRGBA(hex, alpha = 1.0) {
|
|
let array_hex = hex.match(/[^#]./g);
|
|
if (array_hex) {
|
|
return `rgba(${array_hex
|
|
.map((h) => parseInt(h, 16))
|
|
.join(", ")}, ${alpha})`;
|
|
}
|
|
return hex;
|
|
}
|
|
|
|
function getColorHEX(c) {
|
|
let colorStyle = new fabric.Color(c),
|
|
color = colorStyle.toHex(),
|
|
alpha = colorStyle.getAlpha();
|
|
return { color: `#${color}`, alpha: parseFloat(alpha) };
|
|
}
|
|
|
|
function showHide({ elements = [], hide = null, displayProp = "block" }) {
|
|
Array.from(elements).forEach((el) => {
|
|
if (hide !== null) {
|
|
el.style.display = !hide ? displayProp : "none";
|
|
} else {
|
|
el.style.display =
|
|
!el.style.display || el.style.display == "none" ? displayProp : "none";
|
|
}
|
|
});
|
|
}
|
|
|
|
function makeElement(tag, attrs = {}) {
|
|
if (!tag) tag = "div";
|
|
const element = document.createElement(tag);
|
|
Object.keys(attrs).forEach((key) => {
|
|
const currValue = attrs[key];
|
|
if (key === "class") {
|
|
if (Array.isArray(currValue)) {
|
|
element.classList.add(...currValue);
|
|
} else if (currValue instanceof String && typeof currValue === "string") {
|
|
element.className = currValue;
|
|
}
|
|
} else if (key === "dataset") {
|
|
try {
|
|
if (Array.isArray(currValue)) {
|
|
currValue.forEach((datasetArr) => {
|
|
const [prop, propval] = Object.entries(datasetArr)[0];
|
|
element.dataset[prop] = propval;
|
|
});
|
|
} else {
|
|
const [prop, propval] = Object.entries(currValue)[0];
|
|
element.dataset[prop] = propval;
|
|
}
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
} else {
|
|
element[key] = currValue;
|
|
}
|
|
});
|
|
return element;
|
|
}
|
|
|
|
async function getDataJSON(url) {
|
|
try {
|
|
const response = await fetch(url);
|
|
const jsonData = await response.json();
|
|
return jsonData;
|
|
} catch (err) {
|
|
return new Error(err);
|
|
}
|
|
}
|
|
|
|
export { makeElement, rgbToHsv, getDataJSON, toRGBA, getColorHEX, showHide };
|