From 28307c27b8f23f61f04985e957b23b54408a0a7e Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Sat, 30 May 2020 18:59:33 +0100 Subject: [PATCH 1/9] Complete HSVAColor Class and Utils --- .../Colorpicker/Colorpicker.svelte | 0 .../Colorpicker/utils/HSVAColor.js | 66 +++++++++++ .../userInterface/Colorpicker/utils/utils.js | 108 ++++++++++++++++++ 3 files changed, 174 insertions(+) create mode 100644 packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte create mode 100644 packages/builder/src/components/userInterface/Colorpicker/utils/HSVAColor.js create mode 100644 packages/builder/src/components/userInterface/Colorpicker/utils/utils.js diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils/HSVAColor.js b/packages/builder/src/components/userInterface/Colorpicker/utils/HSVAColor.js new file mode 100644 index 0000000000..e39e700903 --- /dev/null +++ b/packages/builder/src/components/userInterface/Colorpicker/utils/HSVAColor.js @@ -0,0 +1,66 @@ +import { + getHexaValues, + getRgbaValues, + hsvToHSL, + isValidRgba, + rgbToHSV, + hsvToRgb, +} from "./utils" + +export class HSVAColor { + h = 0 + s = 0 + v = 0 + a = 1 + + constructor(color) { + if (color.startsWith("#")) { + let [rHex, gHex, bHex, aHex] = getHexaValues(color) + this.hexaToHSVA([rHex, gHex, bHex], aHex) + } else if (color.startsWith("rgb")) { + let rgba = getRgbaValues(color) + this.rgbaToHSVA(rgba) + } + } + + setHSVA([h, s, v, a]) { + this.h = h + this.s = s + this.v = v + this.a = a + } + + getHSLA() { + const [h, s, l] = hsvToHSL([this.h, this.s, this.v]) + return `hsla(${h}, ${s}, ${l}, ${this.a})` + } + + hexaToHSVA(hex, alpha = "FF") { + const rgba = hex + .map(v => parseInt(v, 16)) + .concat((parseInt(alpha, 16) / 255).toFixed(1)) + this.rgbaToHSVA(rgba) + } + + rgbaToHSVA(rgba) { + if (isValidRgba(rgba)) { + const [r, g, b, a = "1"] = rgba + let hsv = rgbToHSV([r, g, b]) + this.setHSVA([...hsv, a]) + } + } + + hsvaToHexa() { + const [r, g, b, a] = this.hsvaToRgba() + const hexa = [r, g, b] + .map(v => v.toString(16)) + .concat((a * 255).toFixed(1).toString(16)) + return hexa + } + + hsvaToRgba() { + const { h, s, v, a } = this + let rgb = hsvToRgb([h, s, v]) + return [...rgb, a] + } +} diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils/utils.js new file mode 100644 index 0000000000..7412c42e27 --- /dev/null +++ b/packages/builder/src/components/userInterface/Colorpicker/utils/utils.js @@ -0,0 +1,108 @@ +export const getRgbaValues = rgbaString => + rgbaString.replace(/[a-z\(\)\s]/gi, "").split(",") + +export const getHexaValues = hexString => + hexString.match(/[A-F]{2}|[A-F]\d{1}|\d{2}|\d[A-F]/gi) + +export const isValidRgba = rgba => { + let [r, g, b, a = 1] = rgba + + let isValidLengthRange = rgba.length === 3 || rgba.length === 4 + let isValidColorRange = [r, g, b].every(v => v >= 0 && v <= 255) + let isValidAlphaRange = rgba.length === 3 || (a >= 0 && a <= 1) + + return isValidLengthRange && isValidColorRange && isValidAlphaRange +} + +//Credit : https://github.com/Qix-/color-convert +export const rgbToHSV = rgb => { + 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 diffc = function(c) { + return (v - c) / 6 / diff + 1 / 2 + } + + if (diff === 0) { + h = 0 + s = 0 + } else { + s = diff / v + rdif = diffc(r) + gdif = diffc(g) + bdif = diffc(b) + + if (r === v) { + h = bdif - gdif + } else if (g === v) { + h = 1 / 3 + rdif - bdif + } else if (b === v) { + h = 2 / 3 + gdif - rdif + } + + if (h < 0) { + h += 1 + } else if (h > 1) { + h -= 1 + } + } + + const hsvResult = [h * 360, s * 100, v * 100].map(v => v.toFixed(0)) + 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 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] + case 1: + return [q, v, p] + case 2: + return [p, v, t] + case 3: + return [p, q, v] + case 4: + return [t, p, v] + case 5: + 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 + + l = (2 - s) * v + const lmin = (2 - s) * vmin + sl = s * vmin + sl /= lmin <= 1 ? lmin : 2 - lmin + sl = sl || 0 + l /= 2 + + return [h, sl * 100, l * 100] +} From 4ef62452ef2337ebbd18950ebd177be206e25388 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Sun, 31 May 2020 20:55:51 +0100 Subject: [PATCH 2/9] Palette, Slider Components and Util Updates --- .../Colorpicker/Colorpicker.svelte | 32 ++++ .../userInterface/Colorpicker/Palette.svelte | 49 ++++++ .../userInterface/Colorpicker/Slider.svelte | 87 +++++++++++ .../userInterface/Colorpicker/drag.js | 23 +++ .../userInterface/Colorpicker/index.js | 2 + .../userInterface/Colorpicker/utils.js | 146 ++++++++++++++++++ .../Colorpicker/utils/HSVAColor.js | 66 -------- .../userInterface/Colorpicker/utils/utils.js | 108 ------------- 8 files changed, 339 insertions(+), 174 deletions(-) create mode 100644 packages/builder/src/components/userInterface/Colorpicker/Palette.svelte create mode 100644 packages/builder/src/components/userInterface/Colorpicker/Slider.svelte create mode 100644 packages/builder/src/components/userInterface/Colorpicker/drag.js create mode 100644 packages/builder/src/components/userInterface/Colorpicker/index.js create mode 100644 packages/builder/src/components/userInterface/Colorpicker/utils.js delete mode 100644 packages/builder/src/components/userInterface/Colorpicker/utils/HSVAColor.js delete mode 100644 packages/builder/src/components/userInterface/Colorpicker/utils/utils.js diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte index e69de29bb2..db70f3ad64 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte +++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte @@ -0,0 +1,32 @@ + + + + +
+ + + + (h = hue.detail)} /> + + (a = alpha.detail)} /> +
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte b/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte new file mode 100644 index 0000000000..4a4decfda8 --- /dev/null +++ b/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte @@ -0,0 +1,49 @@ + + + + +
+
+
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte new file mode 100644 index 0000000000..82e00baa93 --- /dev/null +++ b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte @@ -0,0 +1,87 @@ + + + + +
handleClick(event.clientX)} + class="color-format-slider" + class:hue={type === 'hue'} + class:alpha={type === 'alpha'}> +
handleClick(e.detail)} + class="slider-thumb" + {style} /> +
diff --git a/packages/builder/src/components/userInterface/Colorpicker/drag.js b/packages/builder/src/components/userInterface/Colorpicker/drag.js new file mode 100644 index 0000000000..eb15c8d4fb --- /dev/null +++ b/packages/builder/src/components/userInterface/Colorpicker/drag.js @@ -0,0 +1,23 @@ +export default function(node) { + function handleMouseDown() { + window.addEventListener('mousemove', handleMouseMove); + window.addEventListener('mouseup', handleMouseUp); + } + + function handleMouseMove(event) { + let mouseX = event.clientX; + console.log(mouseX); + node.dispatchEvent( + new CustomEvent('drag', { + detail: mouseX + }) + ); + } + + function handleMouseUp() { + window.removeEventListener('mousedown', handleMouseDown); + window.removeEventListener('mousemove', handleMouseMove); + } + + node.addEventListener('mousedown', handleMouseDown); +} diff --git a/packages/builder/src/components/userInterface/Colorpicker/index.js b/packages/builder/src/components/userInterface/Colorpicker/index.js new file mode 100644 index 0000000000..ad8187a09b --- /dev/null +++ b/packages/builder/src/components/userInterface/Colorpicker/index.js @@ -0,0 +1,2 @@ +import Colorpicker from './Colorpicker.svelte'; +export default Colorpicker; diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils.js new file mode 100644 index 0000000000..98bb96d259 --- /dev/null +++ b/packages/builder/src/components/userInterface/Colorpicker/utils.js @@ -0,0 +1,146 @@ +export const getRgbaValues = (rgbaString) => rgbaString.replace(/[a-z()\s]/gi, '').split(','); + +export const getHexaValues = (hexString) => hexString.match(/[A-F]{2}|[A-F]\d{1}|\d{2}|\d[A-F]/gi); + +export const isValidRgba = (rgba) => { + let [ r, g, b, a = 1 ] = rgba; + + let isValidLengthRange = rgba.length === 3 || rgba.length === 4; + let isValidColorRange = [ r, g, b ].every((v) => v >= 0 && v <= 255); + let isValidAlphaRange = rgba.length === 3 || (a >= 0 && a <= 1); + + return isValidLengthRange && isValidColorRange && isValidAlphaRange; +}; + +export const determineColorType = (color) => { + let hsva = []; + if (color.startsWith('#')) { + let [ rHex, gHex, bHex, aHex ] = getHexaValues(color); + hsva = hexaToHSVA([ rHex, gHex, bHex ], aHex); + } else if (color.startsWith('rgb')) { + let rgba = getRgbaValues(color); + hsva = rgbaToHSVA(rgba); + } +}; + +export const getHSLA = (hsv, a) => { + const [ h, s, l ] = hsvToHSL(hsv); + return `hsla(${h}, ${s}, ${l}, ${a})`; +}; + +export const hexaToHSVA = (hex, alpha = 'FF') => { + const rgba = hex.map((v) => parseInt(v, 16)).concat((parseInt(alpha, 16) / 255).toFixed(1)); + return rgbaToHSVA(rgba); +}; + +export const rgbaToHSVA = (rgba) => { + if (isValidRgba(rgba)) { + const [ r, g, b, a = '1' ] = rgba; + let hsv = rgbToHSV([ r, g, b ]); + return [ ...hsv, a ]; + } +}; + +export const hsvaToHexa = () => { + const [ r, g, b, a ] = hsvaToRgba(); + const hexa = [ r, g, b ].map((v) => v.toString(16)).concat((a * 255).toFixed(1).toString(16)); + return hexa; +}; + +export const hsvaToRgba = (h, s, v, a) => { + let rgb = _hsvToRgb([ h, s, v ]); + return [ ...rgb, a ]; +}; + +//Credit : https://github.com/Qix-/color-convert +export const _rgbToHSV = (rgb) => { + 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 diffc = function(c) { + return (v - c) / 6 / diff + 1 / 2; + }; + + if (diff === 0) { + h = 0; + s = 0; + } else { + s = diff / v; + rdif = diffc(r); + gdif = diffc(g); + bdif = diffc(b); + + if (r === v) { + h = bdif - gdif; + } else if (g === v) { + h = 1 / 3 + rdif - bdif; + } else if (b === v) { + h = 2 / 3 + gdif - rdif; + } + + if (h < 0) { + h += 1; + } else if (h > 1) { + h -= 1; + } + } + + const hsvResult = [ h * 360, s * 100, v * 100 ].map((v) => v.toFixed(0)); + 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 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 ]; + case 1: + return [ q, v, p ]; + case 2: + return [ p, v, t ]; + case 3: + return [ p, q, v ]; + case 4: + return [ t, p, v ]; + case 5: + 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; + + l = (2 - s) * v; + const lmin = (2 - s) * vmin; + sl = s * vmin; + sl /= lmin <= 1 ? lmin : 2 - lmin; + sl = sl || 0; + l /= 2; + + return [ h, sl * 100, l * 100 ]; +}; diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils/HSVAColor.js b/packages/builder/src/components/userInterface/Colorpicker/utils/HSVAColor.js deleted file mode 100644 index e39e700903..0000000000 --- a/packages/builder/src/components/userInterface/Colorpicker/utils/HSVAColor.js +++ /dev/null @@ -1,66 +0,0 @@ -import { - getHexaValues, - getRgbaValues, - hsvToHSL, - isValidRgba, - rgbToHSV, - hsvToRgb, -} from "./utils" - -export class HSVAColor { - h = 0 - s = 0 - v = 0 - a = 1 - - constructor(color) { - if (color.startsWith("#")) { - let [rHex, gHex, bHex, aHex] = getHexaValues(color) - this.hexaToHSVA([rHex, gHex, bHex], aHex) - } else if (color.startsWith("rgb")) { - let rgba = getRgbaValues(color) - this.rgbaToHSVA(rgba) - } - } - - setHSVA([h, s, v, a]) { - this.h = h - this.s = s - this.v = v - this.a = a - } - - getHSLA() { - const [h, s, l] = hsvToHSL([this.h, this.s, this.v]) - return `hsla(${h}, ${s}, ${l}, ${this.a})` - } - - hexaToHSVA(hex, alpha = "FF") { - const rgba = hex - .map(v => parseInt(v, 16)) - .concat((parseInt(alpha, 16) / 255).toFixed(1)) - this.rgbaToHSVA(rgba) - } - - rgbaToHSVA(rgba) { - if (isValidRgba(rgba)) { - const [r, g, b, a = "1"] = rgba - let hsv = rgbToHSV([r, g, b]) - this.setHSVA([...hsv, a]) - } - } - - hsvaToHexa() { - const [r, g, b, a] = this.hsvaToRgba() - const hexa = [r, g, b] - .map(v => v.toString(16)) - .concat((a * 255).toFixed(1).toString(16)) - return hexa - } - - hsvaToRgba() { - const { h, s, v, a } = this - let rgb = hsvToRgb([h, s, v]) - return [...rgb, a] - } -} diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils/utils.js deleted file mode 100644 index 7412c42e27..0000000000 --- a/packages/builder/src/components/userInterface/Colorpicker/utils/utils.js +++ /dev/null @@ -1,108 +0,0 @@ -export const getRgbaValues = rgbaString => - rgbaString.replace(/[a-z\(\)\s]/gi, "").split(",") - -export const getHexaValues = hexString => - hexString.match(/[A-F]{2}|[A-F]\d{1}|\d{2}|\d[A-F]/gi) - -export const isValidRgba = rgba => { - let [r, g, b, a = 1] = rgba - - let isValidLengthRange = rgba.length === 3 || rgba.length === 4 - let isValidColorRange = [r, g, b].every(v => v >= 0 && v <= 255) - let isValidAlphaRange = rgba.length === 3 || (a >= 0 && a <= 1) - - return isValidLengthRange && isValidColorRange && isValidAlphaRange -} - -//Credit : https://github.com/Qix-/color-convert -export const rgbToHSV = rgb => { - 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 diffc = function(c) { - return (v - c) / 6 / diff + 1 / 2 - } - - if (diff === 0) { - h = 0 - s = 0 - } else { - s = diff / v - rdif = diffc(r) - gdif = diffc(g) - bdif = diffc(b) - - if (r === v) { - h = bdif - gdif - } else if (g === v) { - h = 1 / 3 + rdif - bdif - } else if (b === v) { - h = 2 / 3 + gdif - rdif - } - - if (h < 0) { - h += 1 - } else if (h > 1) { - h -= 1 - } - } - - const hsvResult = [h * 360, s * 100, v * 100].map(v => v.toFixed(0)) - 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 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] - case 1: - return [q, v, p] - case 2: - return [p, v, t] - case 3: - return [p, q, v] - case 4: - return [t, p, v] - case 5: - 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 - - l = (2 - s) * v - const lmin = (2 - s) * vmin - sl = s * vmin - sl /= lmin <= 1 ? lmin : 2 - lmin - sl = sl || 0 - l /= 2 - - return [h, sl * 100, l * 100] -} From 0fafe7565a555c5c9771df6ce8d4711f92869bcb Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Mon, 1 Jun 2020 23:01:56 +0100 Subject: [PATCH 3/9] Completed Palette and Slider with integration --- .../Colorpicker/Colorpicker.svelte | 44 +++++++++++++++-- .../userInterface/Colorpicker/Palette.svelte | 48 +++++++++++-------- .../userInterface/Colorpicker/Slider.svelte | 26 +++++----- .../userInterface/Colorpicker/drag.js | 1 - .../userInterface/Colorpicker/utils.js | 37 +++++++------- 5 files changed, 99 insertions(+), 57 deletions(-) diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte index db70f3ad64..4ca425bcb0 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte +++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte @@ -1,13 +1,49 @@ -
-
+
+
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte index 82e00baa93..13254c29c8 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte +++ b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte @@ -2,35 +2,30 @@ import { onMount, createEventDispatcher } from "svelte"; import dragable from "./drag.js"; + export let value = 1 export let type = "hue"; const dispatch = createEventDispatcher(); let slider; - let dimensions = {}; - let thumbPosition = 0; - - onMount(() => { - if (slider) { - dimensions = slider.getBoundingClientRect(); - } - }); + let sliderWidth = 0; function handleClick(mouseX) { - const { left, width } = dimensions; + const { left } = slider.getBoundingClientRect(); let clickPosition = mouseX - left; - debugger; - if (clickPosition >= 0 && clickPosition <= width) { - thumbPosition = clickPosition; - let percentageClick = thumbPosition / width; + + if (clickPosition >= 0 && clickPosition <= sliderWidth) { + let percentageClick = clickPosition / sliderWidth; let value = type === "hue" - ? Math.round(360 * percentageClick).toString() - : percentageClick.toFixed(2); + ? 360 * percentageClick.toString() + : percentageClick.toString(); dispatch("change", value); } } + $: thumbPosition = type === "hue" ? sliderWidth * (value / 360) : sliderWidth * (value) + $: style = `transform: translateX(${thumbPosition - 6}px);`; @@ -75,6 +70,7 @@
handleClick(event.clientX)} class="color-format-slider" class:hue={type === 'hue'} diff --git a/packages/builder/src/components/userInterface/Colorpicker/drag.js b/packages/builder/src/components/userInterface/Colorpicker/drag.js index eb15c8d4fb..842d157ad2 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/drag.js +++ b/packages/builder/src/components/userInterface/Colorpicker/drag.js @@ -6,7 +6,6 @@ export default function(node) { function handleMouseMove(event) { let mouseX = event.clientX; - console.log(mouseX); node.dispatchEvent( new CustomEvent('drag', { detail: mouseX diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils.js index 98bb96d259..6c8c8d48ed 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/utils.js +++ b/packages/builder/src/components/userInterface/Colorpicker/utils.js @@ -12,19 +12,19 @@ export const isValidRgba = (rgba) => { return isValidLengthRange && isValidColorRange && isValidAlphaRange; }; -export const determineColorType = (color) => { - let hsva = []; - if (color.startsWith('#')) { - let [ rHex, gHex, bHex, aHex ] = getHexaValues(color); - hsva = hexaToHSVA([ rHex, gHex, bHex ], aHex); - } else if (color.startsWith('rgb')) { - let rgba = getRgbaValues(color); - hsva = rgbaToHSVA(rgba); - } -}; -export const getHSLA = (hsv, a) => { - const [ h, s, l ] = hsvToHSL(hsv); +export const getAndConvertHexa = (color) => { + let [ rHex, gHex, bHex, aHex ] = getHexaValues(color); + return hexaToHSVA([ rHex, gHex, bHex ], aHex); +} + +export const getAndConvertRgba = color => { + let rgba = getRgbaValues(color); + return rgbaToHSVA(rgba); +} + +export const getHSLA = ([hue, sat, val, a]) => { + const [ h, s, l ] = _hsvToHSL([hue, sat, val]); return `hsla(${h}, ${s}, ${l}, ${a})`; }; @@ -36,20 +36,21 @@ export const hexaToHSVA = (hex, alpha = 'FF') => { export const rgbaToHSVA = (rgba) => { if (isValidRgba(rgba)) { const [ r, g, b, a = '1' ] = rgba; - let hsv = rgbToHSV([ r, g, b ]); + let hsv = _rgbToHSV([ r, g, b ]); return [ ...hsv, a ]; } }; -export const hsvaToHexa = () => { - const [ r, g, b, a ] = hsvaToRgba(); +export const hsvaToHexa = (hsva) => { + const [ r, g, b, a ] = hsvaToRgba(hsva); const hexa = [ r, g, b ].map((v) => v.toString(16)).concat((a * 255).toFixed(1).toString(16)); - return hexa; + return `#${hexa.join()}` }; -export const hsvaToRgba = (h, s, v, a) => { +export const hsvaToRgba = ([h, s, v, a]) => { let rgb = _hsvToRgb([ h, s, v ]); - return [ ...rgb, a ]; + let rgba = [ ...rgb, a ]; + return `rgba(${rgba.join(",")})` }; //Credit : https://github.com/Qix-/color-convert From 98710bffbe7df42cc70eebf179717884cd810838 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Mon, 8 Jun 2020 21:41:10 +0100 Subject: [PATCH 4/9] Utils update and Jest Tests --- .../Colorpicker/Colorpicker.svelte | 80 +++++++--- .../userInterface/Colorpicker/utils.js | 139 +++++++++++++++--- .../userInterface/Colorpicker/utils.test.js | 90 ++++++++++++ 3 files changed, 264 insertions(+), 45 deletions(-) create mode 100644 packages/builder/src/components/userInterface/Colorpicker/utils.test.js diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte index 4ca425bcb0..015114ded8 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte +++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte @@ -1,48 +1,80 @@ @@ -62,7 +94,7 @@ - (h = hue.detail)} /> + setHue(hue.detail)} /> - (a = alpha.detail)} /> + setAlpha(alpha.detail)} />
diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils.js index 6c8c8d48ed..b46ad6d202 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/utils.js +++ b/packages/builder/src/components/userInterface/Colorpicker/utils.js @@ -1,17 +1,82 @@ -export const getRgbaValues = (rgbaString) => rgbaString.replace(/[a-z()\s]/gi, '').split(','); +export const isValidHex = (str) => /^#(?:[A-F0-9]{3}$|[A-F0-9]{6}$|[A-F0-9]{8})$/gi.test(str) -export const getHexaValues = (hexString) => hexString.match(/[A-F]{2}|[A-F]\d{1}|\d{2}|\d[A-F]/gi); +const getHexaValues = (hexString) => hexString.match(/[A-F0-9]{2}/gi); -export const isValidRgba = (rgba) => { - let [ r, g, b, a = 1 ] = rgba; +export const isValidRgb = (str) => { + const hasValidStructure = /^(?:rgba\(|rgb\()[0-9,.\s]*\)$/gi.test(str); + if(hasValidStructure) { + return testRgbaValues(str.toLowerCase()); + } +} - let isValidLengthRange = rgba.length === 3 || rgba.length === 4; +const findNonNumericChars = /[a-z()%\s]/gi + +export const getNumericValues = (str) => str.replace(findNonNumericChars, '').split(',').map(c => Number(c)); + +export const testRgbaValues = (str) => { + const rgba = getNumericValues(str) + let [ 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 = rgba.length === 3 || (a >= 0 && a <= 1); + let isValidAlphaRange = str.startsWith("rgba(") ? a >= 0 && a <= 1 : true; return isValidLengthRange && isValidColorRange && isValidAlphaRange; }; +export const isValidHsl = (str) => { + const hasValidStructure = /^(?:hsl\(|hsla\()[0-9,.\s]*\)$/gi.test(str) + if(hasValidStructure) { + return testHslaValues(str.toLowerCase()) + } +} + +export const testHslaValues = (str) => { + + const hsla = getNumericValues(str) + const [h, s, l, a] = hsla + + let isValidLengthRange = (str.startsWith("hsl(") && hsla.length === 3) || (str.startsWith("hsla(") && hsla.length === 4); + let isValidColorRange = (h >= 0 && h <= 360) && [s, l].every(v => v >= 0 && v <= 100) + let isValidAlphaRange = str.startsWith("hsla(") ? (a >= 0 && a <= 1) : true + + return isValidLengthRange && isValidColorRange && isValidAlphaRange; +} + +export const getColorFormat = (color) => { + if(typeof color === "string") { + if(isValidHex(color)) { + return 'hex' + }else if(isValidRgb(color)) { + return 'rgb' + }else if(isValidHsl(color)) { + return 'hsl' + } + } +} + +export const convertToHSVA = (value, format) => { + switch(format) { + case "hex": + return getAndConvertHexa(value) + case "rgb": + return getAndConvertRgba(value) + case "hsl": + return getAndConvertHsla(value) + } +} + +export const convertHsvaToFormat = (hsva, format) => { + switch(format) { + case "hex": + return hsvaToHexa(hsva, true) + case "rgb": + return hsvaToRgba(hsva, true) + case "hsl": + return hsvaToHsla(hsva, true) + } +} + export const getAndConvertHexa = (color) => { let [ rHex, gHex, bHex, aHex ] = getHexaValues(color); @@ -19,40 +84,71 @@ export const getAndConvertHexa = (color) => { } export const getAndConvertRgba = color => { - let rgba = getRgbaValues(color); + let rgba = getNumericValues(color); return rgbaToHSVA(rgba); } +export const getAndConvertHsla = color => { + let hsla = getNumericValues(color); + return hslaToHSVA(hsla) +} + export const getHSLA = ([hue, sat, val, a]) => { const [ h, s, l ] = _hsvToHSL([hue, sat, val]); return `hsla(${h}, ${s}, ${l}, ${a})`; }; export const hexaToHSVA = (hex, alpha = 'FF') => { - const rgba = hex.map((v) => parseInt(v, 16)).concat((parseInt(alpha, 16) / 255).toFixed(1)); + const rgba = hex.map((v) => parseInt(v, 16)).concat(Number((parseInt(alpha, 16) / 255).toFixed(2))); return rgbaToHSVA(rgba); }; export const rgbaToHSVA = (rgba) => { - if (isValidRgba(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 hsvaToHexa = (hsva) => { +export const hslaToHSVA = ([h, s, l, a = 1]) => { + let hsv = _hslToHSV([h, s, l]) + return [...hsv, a] +} + +export const hsvaToHexa = (hsva, asString = false) => { const [ r, g, b, a ] = hsvaToRgba(hsva); - const hexa = [ r, g, b ].map((v) => v.toString(16)).concat((a * 255).toFixed(1).toString(16)); - return `#${hexa.join()}` + + const hexa = [ r, g, b ].map((v) => Math.round(v).toString(16)).concat(Math.round((a * 255)).toString(16)); + return asString ? `#${hexa.join('')}` : hexa }; -export const hsvaToRgba = ([h, s, v, a]) => { - let rgb = _hsvToRgb([ h, s, v ]); +export const hsvaToRgba = ([h, s, v, a], asString = false) => { + let rgb = _hsvToRgb([ h, s, v ]).map(x => Math.round(x)); let rgba = [ ...rgb, a ]; - return `rgba(${rgba.join(",")})` + return asString ? `rgba(${rgba.join(",")})` : rgba }; +export const hsvaToHsla = ([h, s, v, a = 1], asString = false) => { + let hsl = _hsvToHSL([h, s, v]) + let hsla = [...hsl, a] + return asString ? `hsla(${hsla.join(",")})` : hsla +} + +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); + + 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]; +} + //Credit : https://github.com/Qix-/color-convert export const _rgbToHSV = (rgb) => { let rdif; @@ -94,7 +190,7 @@ export const _rgbToHSV = (rgb) => { } } - const hsvResult = [ h * 360, s * 100, v * 100 ].map((v) => v.toFixed(0)); + const hsvResult = [ h * 360, s * 100, v * 100 ].map((v) => Math.round(v)); return hsvResult; }; @@ -129,6 +225,7 @@ export const _hsvToRgb = (hsv) => { //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; @@ -143,5 +240,5 @@ export const _hsvToHSL = (hsv) => { sl = sl || 0; l /= 2; - return [ h, sl * 100, l * 100 ]; + return [ h, Number((sl * 100).toFixed(1)), Number((l * 100).toFixed(1)) ]; }; diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.test.js b/packages/builder/src/components/userInterface/Colorpicker/utils.test.js new file mode 100644 index 0000000000..0354468b75 --- /dev/null +++ b/packages/builder/src/components/userInterface/Colorpicker/utils.test.js @@ -0,0 +1,90 @@ +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]) + }) + + 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 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]) + }) + +}) + +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 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") + }) + + test("Testing invalid hex string", () => { + expect(getColorFormat("#FFZ")).toBeUndefined() + }) + + 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("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 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 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 out of bounds hsl", () => { + expect(getColorFormat("hsl(375, 0, 50)")).toBeUndefined() + }) +}) + From 8fd475dec2914e723e64e815d2a94b6104b911db Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Fri, 12 Jun 2020 10:48:20 +0100 Subject: [PATCH 5/9] Fully functional Colorpicker with Preview --- .../Colorpicker/ButtonGroup.svelte | 27 ++ .../Colorpicker/Colorpicker.svelte | 142 ++++-- .../Colorpicker/Colorpreview.svelte | 78 ++++ .../Colorpicker/FlatButton.svelte | 26 ++ .../userInterface/Colorpicker/Input.svelte | 28 ++ .../userInterface/Colorpicker/Palette.svelte | 1 + .../userInterface/Colorpicker/Slider.svelte | 22 +- .../userInterface/Colorpicker/helpers.js | 14 + .../userInterface/Colorpicker/index.js | 5 +- .../userInterface/Colorpicker/utils.js | 426 +++++++++--------- 10 files changed, 510 insertions(+), 259 deletions(-) create mode 100644 packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte create mode 100644 packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte create mode 100644 packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte create mode 100644 packages/builder/src/components/userInterface/Colorpicker/Input.svelte create mode 100644 packages/builder/src/components/userInterface/Colorpicker/helpers.js diff --git a/packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte b/packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte new file mode 100644 index 0000000000..f9c402ac81 --- /dev/null +++ b/packages/builder/src/components/userInterface/Colorpicker/ButtonGroup.svelte @@ -0,0 +1,27 @@ + + + + +
+ {#each colorFormats as text} + onclick(text)} /> + {/each} +
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte index 015114ded8..8ec53d9b86 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte +++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte @@ -1,10 +1,17 @@ @@ -94,7 +125,24 @@ - setHue(hue.detail)} /> +
+
+
+
+
+
+ setHue(hue.detail)} /> + setAlpha(alpha.detail)} /> +
+
+ +
+ + handleColorInput(event.target.value)} /> +
+
- setAlpha(alpha.detail)} />
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte new file mode 100644 index 0000000000..329d4e4adc --- /dev/null +++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpreview.svelte @@ -0,0 +1,78 @@ + + +
+
+ {#if open} +
+ +
+ {/if} +
+{#if open} +
open = false} class="overlay">
+{/if} + + \ No newline at end of file diff --git a/packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte b/packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte new file mode 100644 index 0000000000..af1ea5e945 --- /dev/null +++ b/packages/builder/src/components/userInterface/Colorpicker/FlatButton.svelte @@ -0,0 +1,26 @@ + + + + +
{text}
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Input.svelte b/packages/builder/src/components/userInterface/Colorpicker/Input.svelte new file mode 100644 index 0000000000..04966c1f30 --- /dev/null +++ b/packages/builder/src/components/userInterface/Colorpicker/Input.svelte @@ -0,0 +1,28 @@ + + + + +
+ +
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte b/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte index 5f344e74a7..01a614124c 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte +++ b/packages/builder/src/components/userInterface/Colorpicker/Palette.svelte @@ -42,6 +42,7 @@ width: 100%; height: 175px; cursor: crosshair; + overflow: hidden; } .picker { diff --git a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte index 13254c29c8..ec8d99248d 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte +++ b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte @@ -2,7 +2,7 @@ import { onMount, createEventDispatcher } from "svelte"; import dragable from "./drag.js"; - export let value = 1 + export let value = 1; export let type = "hue"; const dispatch = createEventDispatcher(); @@ -11,20 +11,22 @@ let sliderWidth = 0; function handleClick(mouseX) { - const { left } = slider.getBoundingClientRect(); + const { left, width } = slider.getBoundingClientRect(); let clickPosition = mouseX - left; + + let percentageClick = (clickPosition / sliderWidth).toFixed(2) - if (clickPosition >= 0 && clickPosition <= sliderWidth) { - let percentageClick = clickPosition / sliderWidth; + if (percentageClick >= 0 && percentageClick <= 1) { let value = type === "hue" - ? 360 * percentageClick.toString() - : percentageClick.toString(); + ? 360 * percentageClick + : percentageClick; dispatch("change", value); } } - $: thumbPosition = type === "hue" ? sliderWidth * (value / 360) : sliderWidth * (value) + $: thumbPosition = + type === "hue" ? sliderWidth * (value / 360) : sliderWidth * value; $: style = `transform: translateX(${thumbPosition - 6}px);`; @@ -34,10 +36,11 @@ position: relative; align-self: center; height: 8px; - width: 220px; + width: 185px; border-radius: 10px; margin: 10px 0px; border: 1px solid #e8e8ef; + cursor: pointer; } .hue { @@ -62,9 +65,10 @@ bottom: -3px; height: 12px; width: 12px; - border: 1px solid black; + border: 1px solid #777676; border-radius: 50%; background-color: #ffffff; + cursor:grab; } diff --git a/packages/builder/src/components/userInterface/Colorpicker/helpers.js b/packages/builder/src/components/userInterface/Colorpicker/helpers.js new file mode 100644 index 0000000000..69f94bf208 --- /dev/null +++ b/packages/builder/src/components/userInterface/Colorpicker/helpers.js @@ -0,0 +1,14 @@ +export const buildStyle = styles => { + 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 diff --git a/packages/builder/src/components/userInterface/Colorpicker/index.js b/packages/builder/src/components/userInterface/Colorpicker/index.js index ad8187a09b..b497601edf 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/index.js +++ b/packages/builder/src/components/userInterface/Colorpicker/index.js @@ -1,2 +1,3 @@ -import Colorpicker from './Colorpicker.svelte'; -export default Colorpicker; +import Colorpreview from './Colorpreview.svelte'; + +export default Colorpreview; diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils.js index b46ad6d202..518e94ec9f 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/utils.js +++ b/packages/builder/src/components/userInterface/Colorpicker/utils.js @@ -1,244 +1,268 @@ -export const isValidHex = (str) => /^#(?:[A-F0-9]{3}$|[A-F0-9]{6}$|[A-F0-9]{8})$/gi.test(str) +export const isValidHex = str => + /^#(?:[A-F0-9]{3}$|[A-F0-9]{4}$|[A-F0-9]{6}$|[A-F0-9]{8})$/gi.test(str); -const getHexaValues = (hexString) => hexString.match(/[A-F0-9]{2}/gi); - -export const isValidRgb = (str) => { - const hasValidStructure = /^(?:rgba\(|rgb\()[0-9,.\s]*\)$/gi.test(str); - if(hasValidStructure) { - return testRgbaValues(str.toLowerCase()); - } -} - -const findNonNumericChars = /[a-z()%\s]/gi - -export const getNumericValues = (str) => str.replace(findNonNumericChars, '').split(',').map(c => Number(c)); - -export const testRgbaValues = (str) => { - const rgba = getNumericValues(str) - let [ 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 >= 0 && a <= 1 : true; - - return isValidLengthRange && isValidColorRange && isValidAlphaRange; +const getHexaValues = hexString => { + if (hexString.length <= 5) { + 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); + } }; -export const isValidHsl = (str) => { - const hasValidStructure = /^(?:hsl\(|hsla\()[0-9,.\s]*\)$/gi.test(str) - if(hasValidStructure) { - return testHslaValues(str.toLowerCase()) - } -} +export const isValidRgb = str => { + const hasValidStructure = /^(?:rgba\(|rgb\()(?:[0-9,\s]|\.(?=\d))*\)$/gi.test(str); + if (hasValidStructure) { + return testRgbaValues(str.toLowerCase()); + } +}; -export const testHslaValues = (str) => { +const findNonNumericChars = /[a-z()\s]/gi; - const hsla = getNumericValues(str) - const [h, s, l, a] = hsla +export const getNumericValues = str => + str + .replace(findNonNumericChars, "") + .split(",") + .map(v => v !== "" ? v : undefined); - let isValidLengthRange = (str.startsWith("hsl(") && hsla.length === 3) || (str.startsWith("hsla(") && hsla.length === 4); - let isValidColorRange = (h >= 0 && h <= 360) && [s, l].every(v => v >= 0 && v <= 100) - let isValidAlphaRange = str.startsWith("hsla(") ? (a >= 0 && a <= 1) : true +export const testRgbaValues = str => { + 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; - return isValidLengthRange && isValidColorRange && isValidAlphaRange; -} + return isValidLengthRange && isValidColorRange && isValidAlphaRange; +}; -export const getColorFormat = (color) => { - if(typeof color === "string") { - if(isValidHex(color)) { - return 'hex' - }else if(isValidRgb(color)) { - return 'rgb' - }else if(isValidHsl(color)) { - return 'hsl' - } - } -} +export const isValidHsl = str => { + const hasValidStructure = /^(?:hsl\(|hsla\()(?:[0-9,%\s]|\.(?=\d))*\)$/gi.test(str); + if (hasValidStructure) { + 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) + + if(isUndefined) return false; + + let isValidLengthRange = + (str.startsWith("hsl(") && hsla.length === 3) || + (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; + + return isValidLengthRange && isValidHue && isValidSatLum && isValidAlphaRange; +}; + +export const getColorFormat = color => { + if (typeof color === "string") { + if (isValidHex(color)) { + return "hex"; + } else if (isValidRgb(color)) { + return "rgb"; + } else if (isValidHsl(color)) { + return "hsl"; + } + } +}; export const convertToHSVA = (value, format) => { - switch(format) { - case "hex": - return getAndConvertHexa(value) - case "rgb": - return getAndConvertRgba(value) - case "hsl": - return getAndConvertHsla(value) - } -} + switch (format) { + case "hex": + return getAndConvertHexa(value); + case "rgb": + return getAndConvertRgba(value); + case "hsl": + return getAndConvertHsla(value); + } +}; export const convertHsvaToFormat = (hsva, format) => { - switch(format) { - case "hex": - return hsvaToHexa(hsva, true) - case "rgb": - return hsvaToRgba(hsva, true) - case "hsl": - return hsvaToHsla(hsva, true) - } -} + switch (format) { + case "hex": + return hsvaToHexa(hsva, true); + case "rgb": + return hsvaToRgba(hsva, true); + case "hsl": + return hsvaToHsla(hsva); + } +}; - -export const getAndConvertHexa = (color) => { - let [ rHex, gHex, bHex, aHex ] = getHexaValues(color); - return hexaToHSVA([ rHex, gHex, bHex ], aHex); -} +export const getAndConvertHexa = color => { + 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) -} - -export const getHSLA = ([hue, sat, val, a]) => { - const [ h, s, l ] = _hsvToHSL([hue, sat, val]); - return `hsla(${h}, ${s}, ${l}, ${a})`; + 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); + +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); }; -export const rgbaToHSVA = (rgba) => { - const [ r, g, b, a = 1 ] = rgba; - let hsv = _rgbToHSV([ r, g, b ]); - return [ ...hsv, a ]; +export const rgbaToHSVA = rgba => { + 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 hsv = _hslToHSV([h, s, l]) - return [...hsv, a] -} - -export const hsvaToHexa = (hsva, asString = false) => { - const [ r, g, b, a ] = hsvaToRgba(hsva); - - const hexa = [ r, g, b ].map((v) => Math.round(v).toString(16)).concat(Math.round((a * 255)).toString(16)); - return asString ? `#${hexa.join('')}` : hexa + let hsv = _hslToHSV([h, s, l]); + return [...hsv, a]; }; -export const hsvaToRgba = ([h, s, v, a], asString = false) => { - let rgb = _hsvToRgb([ h, s, v ]).map(x => Math.round(x)); - let rgba = [ ...rgb, a ]; - return asString ? `rgba(${rgba.join(",")})` : rgba +export const hsvaToHexa = (hsva, asString = false) => { + 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; +}; + +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; }; export const hsvaToHsla = ([h, s, v, a = 1], asString = false) => { - let hsl = _hsvToHSL([h, s, v]) - let hsla = [...hsl, a] - return asString ? `hsla(${hsla.join(",")})` : hsla -} + 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); +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); - 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]; -} - -//Credit : https://github.com/Qix-/color-convert -export const _rgbToHSV = (rgb) => { - 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 diffc = function(c) { - return (v - c) / 6 / diff + 1 / 2; - }; - - if (diff === 0) { - h = 0; - s = 0; - } else { - s = diff / v; - rdif = diffc(r); - gdif = diffc(g); - bdif = diffc(b); - - if (r === v) { - h = bdif - gdif; - } else if (g === v) { - h = 1 / 3 + rdif - bdif; - } else if (b === v) { - h = 2 / 3 + gdif - rdif; - } - - if (h < 0) { - h += 1; - } else if (h > 1) { - h -= 1; - } - } - - const hsvResult = [ h * 360, s * 100, v * 100 ].map((v) => Math.round(v)); - return hsvResult; + return [h, sv * 100, v * 100]; }; //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; +export const _rgbToHSV = rgb => { + let rdif; + let gdif; + let bdif; + let h; + let s; - 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 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; + }; - switch (hi) { - case 0: - return [ v, t, p ]; - case 1: - return [ q, v, p ]; - case 2: - return [ p, v, t ]; - case 3: - return [ p, q, v ]; - case 4: - return [ t, p, v ]; - case 5: - return [ v, p, q ]; - } + if (diff === 0) { + h = 0; + s = 0; + } else { + s = diff / v; + rdif = diffc(r); + gdif = diffc(g); + bdif = diffc(b); + + if (r === v) { + h = bdif - gdif; + } else if (g === v) { + h = 1 / 3 + rdif - bdif; + } else if (b === v) { + h = 2 / 3 + gdif - rdif; + } + + if (h < 0) { + h += 1; + } else if (h > 1) { + h -= 1; + } + } + + const hsvResult = [h * 360, s * 100, v * 100].map(v => Math.round(v)); + return hsvResult; }; //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; +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; - l = (2 - s) * v; - const lmin = (2 - s) * vmin; - sl = s * vmin; - sl /= lmin <= 1 ? lmin : 2 - lmin; - sl = sl || 0; - l /= 2; + 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; - return [ h, Number((sl * 100).toFixed(1)), Number((l * 100).toFixed(1)) ]; + switch (hi) { + case 0: + return [v, t, p]; + case 1: + return [q, v, p]; + case 2: + return [p, v, t]; + case 3: + return [p, q, v]; + case 4: + return [t, p, v]; + case 5: + 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; + + 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)]; +}; + +export const _fixNum = (value, decimalPlaces) => + Number(parseFloat(value).toFixed(decimalPlaces)); From ab5b7ccb39993e20c54ad266a34dcaddf73d8f99 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Wed, 17 Jun 2020 16:46:03 +0100 Subject: [PATCH 6/9] Integrating Colorpicker with Builder --- .../Colorpicker/Colorpicker.svelte | 11 +- .../Colorpicker/Colorpreview.svelte | 121 ++++++++++++++---- .../userInterface/Colorpicker/index.js | 5 +- .../userInterface/Colorpicker/utils.js | 8 +- .../ComponentPropertiesPanel.svelte | 3 - .../userInterface/DesignView.svelte | 9 +- .../userInterface/PropertyControl.svelte | 2 + .../userInterface/propertyCategories.js | 12 +- .../[application]/frontend/_layout.svelte | 1 - 9 files changed, 121 insertions(+), 51 deletions(-) diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte index 8ec53d9b86..936756f403 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte +++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte @@ -22,14 +22,11 @@ const dispatch = createEventDispatcher(); onMount(() => { - format = getColorFormat(value); if (format) { convertAndSetHSVA() } }); - const hsvaIsNull = () => [h, s, v, a].every(c => c === null); - function convertAndSetHSVA() { let hsva = convertToHSVA(value, format); setHSVA(hsva); @@ -53,17 +50,16 @@ function setHue(hue) { h = hue; value = convertHsvaToFormat([h, s, v, a], format); - dispatch("change", value) } function setAlpha(alpha) { a = alpha === "1.00" ? "1" :alpha; value = convertHsvaToFormat([h, s, v, a], format); - dispatch("change", value) } function changeFormatAndConvert(f) { format = f; + console.log(f) value = convertHsvaToFormat([h, s, v, a], format); } @@ -73,14 +69,16 @@ format = f; value = text convertAndSetHSVA() + dispatch("change", value) } } + \ No newline at end of file + + diff --git a/packages/builder/src/components/userInterface/Colorpicker/index.js b/packages/builder/src/components/userInterface/Colorpicker/index.js index b497601edf..21e19acc9b 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/index.js +++ b/packages/builder/src/components/userInterface/Colorpicker/index.js @@ -1,3 +1,2 @@ -import Colorpreview from './Colorpreview.svelte'; - -export default Colorpreview; +import Colorpreview from "./Colorpreview.svelte" +export default Colorpreview diff --git a/packages/builder/src/components/userInterface/Colorpicker/utils.js b/packages/builder/src/components/userInterface/Colorpicker/utils.js index 518e94ec9f..5e3791ae42 100644 --- a/packages/builder/src/components/userInterface/Colorpicker/utils.js +++ b/packages/builder/src/components/userInterface/Colorpicker/utils.js @@ -127,9 +127,11 @@ export const rgbaToHSVA = rgba => { }; export const hslaToHSVA = ([h, s, l, a = 1]) => { - let hsv = _hslToHSV([h, s, l]); - return [...hsv, a]; -}; + let sat = s.replace(/%/, "") + let lum = l.replace(/%/, "") + let hsv = _hslToHSV([h, sat, lum]) + return [...hsv, a] +} export const hsvaToHexa = (hsva, asString = false) => { const [r, g, b, a] = hsvaToRgba(hsva); diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index bcebb4d2d4..927f6ff13f 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -102,8 +102,6 @@ height: 100%; display: flex; flex-direction: column; - overflow-x: hidden; - overflow-y: hidden; padding: 20px; box-sizing: border-box; } @@ -121,6 +119,5 @@ margin-top: 20px; flex: 1 1 auto; min-height: 0; - overflow-y: auto; } diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte index 070ba502e3..6826bddc5c 100644 --- a/packages/builder/src/components/userInterface/DesignView.svelte +++ b/packages/builder/src/components/userInterface/DesignView.svelte @@ -31,6 +31,7 @@
+
{#if propertyGroupNames.length > 0} {#each propertyGroupNames as groupName} @@ -49,6 +50,7 @@ {/if}
+