diff --git a/packages/builder/src/components/userInterface/Colorpicker/drag.js b/packages/builder/src/components/userInterface/Colorpicker/drag.js index 842d157ad2..0d7a9c2481 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/drag.js +++ b/packages/builder/src/components/userInterface/Colorpicker/drag.js @@ -1,22 +1,22 @@ export default function(node) { - function handleMouseDown() { - window.addEventListener('mousemove', handleMouseMove); - window.addEventListener('mouseup', handleMouseUp); - } + function handleMouseDown() { + window.addEventListener("mousemove", handleMouseMove) + window.addEventListener("mouseup", handleMouseUp) + } - function handleMouseMove(event) { - let mouseX = event.clientX; - node.dispatchEvent( - new CustomEvent('drag', { - detail: mouseX - }) - ); - } + function handleMouseMove(event) { + let mouseX = event.clientX + node.dispatchEvent( + new CustomEvent("drag", { + detail: mouseX, + }) + ) + } - function handleMouseUp() { - window.removeEventListener('mousedown', handleMouseDown); - window.removeEventListener('mousemove', handleMouseMove); - } + function handleMouseUp() { + window.removeEventListener("mousedown", handleMouseDown) + window.removeEventListener("mousemove", handleMouseMove) + } - node.addEventListener('mousedown', handleMouseDown); + node.addEventListener("mousedown", handleMouseDown) } diff --git a/packages/builder/src/components/userInterface/Colorpicker/helpers.js b/packages/builder/src/components/userInterface/Colorpicker/helpers.js index 69f94bf208..5d9ff750af 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/helpers.js +++ b/packages/builder/src/components/userInterface/Colorpicker/helpers.js @@ -1,14 +1,14 @@ export const buildStyle = styles => { - let str = "" - for (let s in styles) { - if (styles[s]) { - let key = convertCamel(s) - str += `${key}: ${styles[s]}; ` - } + let str = "" + for (let s in styles) { + if (styles[s]) { + let key = convertCamel(s) + str += `${key}: ${styles[s]}; ` } - return str } - - export const convertCamel = str => { - return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`) - } \ No newline at end of file + return str +} + +export const convertCamel = str => { + return str.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`) +} diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils.js index 5e3791ae42..d49efc876e 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/utils.js +++ b/packages/builder/src/components/userInterface/Colorpicker/utils.js @@ -1,130 +1,139 @@ export const isValidHex = str => - /^#(?:[A-F0-9]{3}$|[A-F0-9]{4}$|[A-F0-9]{6}$|[A-F0-9]{8})$/gi.test(str); + /^#(?:[A-F0-9]{3}$|[A-F0-9]{4}$|[A-F0-9]{6}$|[A-F0-9]{8})$/gi.test(str) const getHexaValues = hexString => { if (hexString.length <= 5) { - let hexArr = hexString.match(/[A-F0-9]/gi); - let t = hexArr.map(c => (c += c)); - return t; + let hexArr = hexString.match(/[A-F0-9]/gi) + let t = hexArr.map(c => (c += c)) + return t } else { - return hexString.match(/[A-F0-9]{2}/gi); + return hexString.match(/[A-F0-9]{2}/gi) } -}; +} export const isValidRgb = str => { - const hasValidStructure = /^(?:rgba\(|rgb\()(?:[0-9,\s]|\.(?=\d))*\)$/gi.test(str); + const hasValidStructure = /^(?:rgba\(|rgb\()(?:[0-9,\s]|\.(?=\d))*\)$/gi.test( + str + ) if (hasValidStructure) { - return testRgbaValues(str.toLowerCase()); + return testRgbaValues(str.toLowerCase()) } -}; +} -const findNonNumericChars = /[a-z()\s]/gi; +const findNonNumericChars = /[a-z()\s]/gi export const getNumericValues = str => str .replace(findNonNumericChars, "") .split(",") - .map(v => v !== "" ? v : undefined); + .map(v => (v !== "" ? v : undefined)) export const testRgbaValues = str => { - const rgba = getNumericValues(str); - const [r, g, b, a] = rgba; - + const rgba = getNumericValues(str) + const [r, g, b, a] = rgba + let isValidLengthRange = (str.startsWith("rgb(") && rgba.length === 3) || - (str.startsWith("rgba(") && rgba.length === 4); - let isValidColorRange = [r, g, b].every(v => v >= 0 && v <= 255); - let isValidAlphaRange = str.startsWith("rgba(") ? `${a}`.length <= 4 && a >= 0 && a <= 1 : true; + (str.startsWith("rgba(") && rgba.length === 4) + let isValidColorRange = [r, g, b].every(v => v >= 0 && v <= 255) + let isValidAlphaRange = str.startsWith("rgba(") + ? `${a}`.length <= 4 && a >= 0 && a <= 1 + : true - return isValidLengthRange && isValidColorRange && isValidAlphaRange; -}; + return isValidLengthRange && isValidColorRange && isValidAlphaRange +} export const isValidHsl = str => { - const hasValidStructure = /^(?:hsl\(|hsla\()(?:[0-9,%\s]|\.(?=\d))*\)$/gi.test(str); + const hasValidStructure = /^(?:hsl\(|hsla\()(?:[0-9,%\s]|\.(?=\d))*\)$/gi.test( + str + ) if (hasValidStructure) { - return testHslaValues(str.toLowerCase()); + return testHslaValues(str.toLowerCase()) } -}; +} export const testHslaValues = str => { - const hsla = getNumericValues(str); - const [h, s, l, a] = hsla; - const isUndefined = [h,s,l].some(v => v === undefined) + const hsla = getNumericValues(str) + const [h, s, l, a] = hsla + const isUndefined = [h, s, l].some(v => v === undefined) - if(isUndefined) return false; + if (isUndefined) return false let isValidLengthRange = (str.startsWith("hsl(") && hsla.length === 3) || - (str.startsWith("hsla(") && hsla.length === 4); + (str.startsWith("hsla(") && hsla.length === 4) let isValidHue = h >= 0 && h <= 360 - let isValidSatLum = [s, l].every(v => v.endsWith('%') && parseInt(v) >= 0 && parseInt(v) <= 100 ) - let isValidAlphaRange = str.startsWith("hsla(") ? `${a}`.length <= 4 && a >= 0 && a <= 1 : true; + let isValidSatLum = [s, l].every( + v => v.endsWith("%") && parseInt(v) >= 0 && parseInt(v) <= 100 + ) + let isValidAlphaRange = str.startsWith("hsla(") + ? `${a}`.length <= 4 && a >= 0 && a <= 1 + : true - return isValidLengthRange && isValidHue && isValidSatLum && isValidAlphaRange; -}; + return isValidLengthRange && isValidHue && isValidSatLum && isValidAlphaRange +} export const getColorFormat = color => { if (typeof color === "string") { if (isValidHex(color)) { - return "hex"; + return "hex" } else if (isValidRgb(color)) { - return "rgb"; + return "rgb" } else if (isValidHsl(color)) { - return "hsl"; + return "hsl" } } -}; +} export const convertToHSVA = (value, format) => { switch (format) { case "hex": - return getAndConvertHexa(value); + return getAndConvertHexa(value) case "rgb": - return getAndConvertRgba(value); + return getAndConvertRgba(value) case "hsl": - return getAndConvertHsla(value); + return getAndConvertHsla(value) } -}; +} export const convertHsvaToFormat = (hsva, format) => { switch (format) { case "hex": - return hsvaToHexa(hsva, true); + return hsvaToHexa(hsva, true) case "rgb": - return hsvaToRgba(hsva, true); + return hsvaToRgba(hsva, true) case "hsl": - return hsvaToHsla(hsva); + return hsvaToHsla(hsva) } -}; +} export const getAndConvertHexa = color => { - let [rHex, gHex, bHex, aHex] = getHexaValues(color); - return hexaToHSVA([rHex, gHex, bHex], aHex); -}; + let [rHex, gHex, bHex, aHex] = getHexaValues(color) + return hexaToHSVA([rHex, gHex, bHex], aHex) +} export const getAndConvertRgba = color => { - let rgba = getNumericValues(color); - return rgbaToHSVA(rgba); -}; + let rgba = getNumericValues(color) + return rgbaToHSVA(rgba) +} export const getAndConvertHsla = color => { - let hsla = getNumericValues(color); - return hslaToHSVA(hsla); -}; - + let hsla = getNumericValues(color) + return hslaToHSVA(hsla) +} export const hexaToHSVA = (hex, alpha = "FF") => { const rgba = hex .map(v => parseInt(v, 16)) - .concat(Number((parseInt(alpha, 16) / 255).toFixed(2))); - return rgbaToHSVA(rgba); -}; + .concat(Number((parseInt(alpha, 16) / 255).toFixed(2))) + return rgbaToHSVA(rgba) +} export const rgbaToHSVA = rgba => { - const [r, g, b, a = 1] = rgba; - let hsv = _rgbToHSV([r, g, b]); - return [...hsv, a]; -}; + const [r, g, b, a = 1] = rgba + let hsv = _rgbToHSV([r, g, b]) + return [...hsv, a] +} export const hslaToHSVA = ([h, s, l, a = 1]) => { let sat = s.replace(/%/, "") @@ -134,137 +143,137 @@ export const hslaToHSVA = ([h, s, l, a = 1]) => { } export const hsvaToHexa = (hsva, asString = false) => { - const [r, g, b, a] = hsvaToRgba(hsva); + const [r, g, b, a] = hsvaToRgba(hsva) const hexa = [r, g, b] .map(v => { - let hex = Math.round(v).toString(16) - return hex.length === 1 ? `0${hex}` : hex - }) - .concat(Math.round(a * 255).toString(16)); - return asString ? `#${hexa.join("")}` : hexa; -}; + let hex = Math.round(v).toString(16) + return hex.length === 1 ? `0${hex}` : hex + }) + .concat(Math.round(a * 255).toString(16)) + return asString ? `#${hexa.join("")}` : hexa +} export const hsvaToRgba = ([h, s, v, a = 1], asString = false) => { - let rgb = _hsvToRgb([h, s, v]).map(x => Math.round(x)); - let rgba = [...rgb, a < 1 ? _fixNum(a, 2) : a]; - return asString ? `rgba(${rgba.join(",")})` : rgba; -}; + let rgb = _hsvToRgb([h, s, v]).map(x => Math.round(x)) + let rgba = [...rgb, a < 1 ? _fixNum(a, 2) : a] + return asString ? `rgba(${rgba.join(",")})` : rgba +} export const hsvaToHsla = ([h, s, v, a = 1], asString = false) => { - let [hue, sat, lum] = _hsvToHSL([h, s, v]); - let hsla = [hue, sat + "%", lum + "%", a < 1 ? _fixNum(a, 2) : a]; - return `hsla(${hsla.join(",")})`; -}; + let [hue, sat, lum] = _hsvToHSL([h, s, v]) + let hsla = [hue, sat + "%", lum + "%", a < 1 ? _fixNum(a, 2) : a] + return `hsla(${hsla.join(",")})` +} export const _hslToHSV = hsl => { - const h = hsl[0]; - let s = hsl[1] / 100; - let l = hsl[2] / 100; - let smin = s; - const lmin = Math.max(l, 0.01); + const h = hsl[0] + let s = hsl[1] / 100 + let l = hsl[2] / 100 + let smin = s + const lmin = Math.max(l, 0.01) - l *= 2; - s *= l <= 1 ? l : 2 - l; - smin *= lmin <= 1 ? lmin : 2 - lmin; - const v = (l + s) / 2; - const sv = l === 0 ? (2 * smin) / (lmin + smin) : (2 * s) / (l + s); + l *= 2 + s *= l <= 1 ? l : 2 - l + smin *= lmin <= 1 ? lmin : 2 - lmin + const v = (l + s) / 2 + const sv = l === 0 ? (2 * smin) / (lmin + smin) : (2 * s) / (l + s) - return [h, sv * 100, v * 100]; -}; + return [h, sv * 100, v * 100] +} //Credit : https://github.com/Qix-/color-convert export const _rgbToHSV = rgb => { - let rdif; - let gdif; - let bdif; - let h; - let s; + let rdif + let gdif + let bdif + let h + let s - const r = rgb[0] / 255; - const g = rgb[1] / 255; - const b = rgb[2] / 255; - const v = Math.max(r, g, b); - const diff = v - Math.min(r, g, b); + const r = rgb[0] / 255 + const g = rgb[1] / 255 + const b = rgb[2] / 255 + const v = Math.max(r, g, b) + const diff = v - Math.min(r, g, b) const diffc = function(c) { - return (v - c) / 6 / diff + 1 / 2; - }; + return (v - c) / 6 / diff + 1 / 2 + } if (diff === 0) { - h = 0; - s = 0; + h = 0 + s = 0 } else { - s = diff / v; - rdif = diffc(r); - gdif = diffc(g); - bdif = diffc(b); + s = diff / v + rdif = diffc(r) + gdif = diffc(g) + bdif = diffc(b) if (r === v) { - h = bdif - gdif; + h = bdif - gdif } else if (g === v) { - h = 1 / 3 + rdif - bdif; + h = 1 / 3 + rdif - bdif } else if (b === v) { - h = 2 / 3 + gdif - rdif; + h = 2 / 3 + gdif - rdif } if (h < 0) { - h += 1; + h += 1 } else if (h > 1) { - h -= 1; + h -= 1 } } - const hsvResult = [h * 360, s * 100, v * 100].map(v => Math.round(v)); - return hsvResult; -}; + const hsvResult = [h * 360, s * 100, v * 100].map(v => Math.round(v)) + return hsvResult +} //Credit : https://github.com/Qix-/color-convert export const _hsvToRgb = hsv => { - const h = hsv[0] / 60; - const s = hsv[1] / 100; - let v = hsv[2] / 100; - const hi = Math.floor(h) % 6; + const h = hsv[0] / 60 + const s = hsv[1] / 100 + let v = hsv[2] / 100 + const hi = Math.floor(h) % 6 - const f = h - Math.floor(h); - const p = 255 * v * (1 - s); - const q = 255 * v * (1 - s * f); - const t = 255 * v * (1 - s * (1 - f)); - v *= 255; + const f = h - Math.floor(h) + const p = 255 * v * (1 - s) + const q = 255 * v * (1 - s * f) + const t = 255 * v * (1 - s * (1 - f)) + v *= 255 switch (hi) { case 0: - return [v, t, p]; + return [v, t, p] case 1: - return [q, v, p]; + return [q, v, p] case 2: - return [p, v, t]; + return [p, v, t] case 3: - return [p, q, v]; + return [p, q, v] case 4: - return [t, p, v]; + return [t, p, v] case 5: - return [v, p, q]; + return [v, p, q] } -}; +} //Credit : https://github.com/Qix-/color-convert export const _hsvToHSL = hsv => { - const h = hsv[0]; - const s = hsv[1] / 100; - const v = hsv[2] / 100; - const vmin = Math.max(v, 0.01); - let sl; - let l; + const h = hsv[0] + const s = hsv[1] / 100 + const v = hsv[2] / 100 + const vmin = Math.max(v, 0.01) + let sl + let l - l = (2 - s) * v; - const lmin = (2 - s) * vmin; - sl = s * vmin; - sl /= lmin <= 1 ? lmin : 2 - lmin; - sl = sl || 0; - l /= 2; + l = (2 - s) * v + const lmin = (2 - s) * vmin + sl = s * vmin + sl /= lmin <= 1 ? lmin : 2 - lmin + sl = sl || 0 + l /= 2 - return [_fixNum(h, 0), _fixNum(sl * 100, 0), _fixNum(l * 100, 0)]; -}; + return [_fixNum(h, 0), _fixNum(sl * 100, 0), _fixNum(l * 100, 0)] +} export const _fixNum = (value, decimalPlaces) => - Number(parseFloat(value).toFixed(decimalPlaces)); + Number(parseFloat(value).toFixed(decimalPlaces)) diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.test.js b/packages/builder/src/components/userInterface/Colorpicker/utils.test.js index 0354468b75..56ea17419a 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/utils.test.js +++ b/packages/builder/src/components/userInterface/Colorpicker/utils.test.js @@ -1,90 +1,106 @@ -import {getColorFormat, convertToHSVA, convertHsvaToFormat} from "./utils" +import { getColorFormat, convertToHSVA, convertHsvaToFormat } from "./utils" -describe('convertToHSVA - convert to hsva from format', () => { - test("convert from hexa", () => { - expect(convertToHSVA("#f222d382", "hex")).toEqual([309, 86, 95, 0.51]) - }) +describe("convertToHSVA - convert to hsva from format", () => { + test("convert from hexa", () => { + expect(convertToHSVA("#f222d382", "hex")).toEqual([309, 86, 95, 0.51]) + }) - test("convert from hex", () => { - expect(convertToHSVA("#f222d3", "hex")).toEqual([309, 86, 95, 1]) - }) + test("convert from hex", () => { + expect(convertToHSVA("#f222d3", "hex")).toEqual([309, 86, 95, 1]) + }) - test("convert from rgba", () => { - expect(convertToHSVA("rgba(242, 34, 211, 1)", "rgb")).toEqual([309, 86, 95, 1]) - }) + test("convert from rgba", () => { + expect(convertToHSVA("rgba(242, 34, 211, 1)", "rgb")).toEqual([ + 309, + 86, + 95, + 1, + ]) + }) - test("convert from rgb", () => { - expect(convertToHSVA("rgb(150, 80, 255)", "rgb")).toEqual([264, 69, 100, 1]) - }) + test("convert from rgb", () => { + expect(convertToHSVA("rgb(150, 80, 255)", "rgb")).toEqual([264, 69, 100, 1]) + }) - test("convert from from hsl", () => { - expect(convertToHSVA("hsl(264, 100%, 65.7%)", "hsl")).toEqual([264, 68.6, 100, 1]) - }) - - test("convert from from hsla", () => { - expect(convertToHSVA("hsla(264, 100%, 65.7%, 0.51)", "hsl")).toEqual([264, 68.6, 100, 0.51]) - }) + test("convert from from hsl", () => { + expect(convertToHSVA("hsl(264, 100%, 65.7%)", "hsl")).toEqual([ + 264, + 68.6, + 100, + 1, + ]) + }) + test("convert from from hsla", () => { + expect(convertToHSVA("hsla(264, 100%, 65.7%, 0.51)", "hsl")).toEqual([ + 264, + 68.6, + 100, + 0.51, + ]) + }) }) -describe('convertHsvaToFormat - convert from hsva to format', () => { - test('Convert to hexa', () => { - expect(convertHsvaToFormat([264, 68.63, 100, 0.5], "hex")).toBe("#9650ff80") - }) +describe("convertHsvaToFormat - convert from hsva to format", () => { + test("Convert to hexa", () => { + expect(convertHsvaToFormat([264, 68.63, 100, 0.5], "hex")).toBe("#9650ff80") + }) - test('Convert to rgba', () => { - expect(convertHsvaToFormat([264, 68.63, 100, 0.75], "rgb")).toBe("rgba(150,80,255,0.75)") - }) + test("Convert to rgba", () => { + expect(convertHsvaToFormat([264, 68.63, 100, 0.75], "rgb")).toBe( + "rgba(150,80,255,0.75)" + ) + }) - test('Convert to hsla', () => { - expect(convertHsvaToFormat([264, 68.63, 100, 1], "hsl")).toBe("hsla(264,100,65.7,1)") - }) + test("Convert to hsla", () => { + expect(convertHsvaToFormat([264, 68.63, 100, 1], "hsl")).toBe( + "hsla(264,100,65.7,1)" + ) + }) }) +describe("Get Color Format", () => { + test("Testing valid hex string", () => { + expect(getColorFormat("#FFF")).toBe("hex") + }) -describe('Get Color Format', () => { - test("Testing valid hex string", () => { - expect(getColorFormat("#FFF")).toBe("hex") - }) + test("Testing invalid hex string", () => { + expect(getColorFormat("#FFZ")).toBeUndefined() + }) - test("Testing invalid hex string", () => { - expect(getColorFormat("#FFZ")).toBeUndefined() - }) + test("Testing valid hex with alpha", () => { + expect(getColorFormat("#FF00BB80")).toBe("hex") + }) - test("Testing valid hex with alpha", () => { - expect(getColorFormat("#FF00BB80")).toBe("hex") - }) + test("Test valid rgb value", () => { + expect(getColorFormat("RGB(255, 20, 50)")).toBe("rgb") + }) - test("Test valid rgb value", () => { - expect(getColorFormat("RGB(255, 20, 50)")).toBe("rgb") - }) + test("Testing invalid rgb value", () => { + expect(getColorFormat("rgb(255, 0)")).toBeUndefined() + }) - test("Testing invalid rgb value", () => { - expect(getColorFormat("rgb(255, 0)")).toBeUndefined() - }) + test("Testing rgb value with alpha", () => { + expect(getColorFormat("rgba(255, 0, 50, 0.5)")).toBe("rgb") + }) - test("Testing rgb value with alpha", () => { - expect(getColorFormat("rgba(255, 0, 50, 0.5)")).toBe("rgb") - }) + test("Testing rgb value with incorrectly provided alpha", () => { + expect(getColorFormat("rgb(255, 0, 50, 0.5)")).toBeUndefined() + }) - test("Testing rgb value with incorrectly provided alpha", () => { - expect(getColorFormat("rgb(255, 0, 50, 0.5)")).toBeUndefined() - }) + test("Testing invalid hsl value", () => { + expect(getColorFormat("hsla(255, 0)")).toBeUndefined() + }) - test("Testing invalid hsl value", () => { - expect(getColorFormat("hsla(255, 0)")).toBeUndefined() - }) + test("Testing hsla value with alpha", () => { + expect(getColorFormat("hsla(150, 60, 50, 0.5)")).toBe("hsl") + }) - test("Testing hsla value with alpha", () => { - expect(getColorFormat("hsla(150, 60, 50, 0.5)")).toBe("hsl") - }) + test("Testing hsl value with incorrectly provided alpha", () => { + expect(getColorFormat("hsl(150, 0, 50, 0.5)")).toBeUndefined() + }) - test("Testing hsl value with incorrectly provided alpha", () => { - expect(getColorFormat("hsl(150, 0, 50, 0.5)")).toBeUndefined() - }) - - test("Testing out of bounds hsl", () => { - expect(getColorFormat("hsl(375, 0, 50)")).toBeUndefined() - }) + test("Testing out of bounds hsl", () => { + expect(getColorFormat("hsl(375, 0, 50)")).toBeUndefined() + }) }) -