From d85fc797345291577c3f52f113803b2118058980 Mon Sep 17 00:00:00 2001 From: MrOnosa Date: Wed, 21 Oct 2020 19:45:27 -0500 Subject: [PATCH] Refactored color helpers into their own folder --- .../settings/sections/BackgroundSettings.jsx | 141 ++---------------- src/helpers/hexToRgb.js | 31 ++++ src/helpers/rgbToHex.js | 11 ++ src/helpers/rgbToHsv.js | 42 ++++++ src/helpers/setRgba.js | 21 +++ 5 files changed, 116 insertions(+), 130 deletions(-) create mode 100644 src/helpers/hexToRgb.js create mode 100644 src/helpers/rgbToHex.js create mode 100644 src/helpers/rgbToHsv.js create mode 100644 src/helpers/setRgba.js diff --git a/src/components/modals/settings/sections/BackgroundSettings.jsx b/src/components/modals/settings/sections/BackgroundSettings.jsx index 0c576793..6ec876f6 100644 --- a/src/components/modals/settings/sections/BackgroundSettings.jsx +++ b/src/components/modals/settings/sections/BackgroundSettings.jsx @@ -4,6 +4,8 @@ import Checkbox from '../Checkbox'; import Section from '../Section'; import { ColorPicker } from 'react-color-gradient-picker'; import 'react-color-gradient-picker/dist/index.css'; +import hexToRgb from '../../../../helpers/hexToRgb' +import rgbToHex from '../../../../helpers/rgbToHex' export default class BackgroundSettings extends React.PureComponent { DefaultGradientSettings = { "angle": "180", "gradient": [{ "colour": this.props.language.background.disabled, "stop": 0 }], "type": "linear" }; @@ -39,105 +41,10 @@ export default class BackgroundSettings extends React.PureComponent { toast(this.props.toastLanguage.reset); } - - setRGBA(red, green, blue, alpha) { - if (this.isValidRGBValue(red) && this.isValidRGBValue(green) && this.isValidRGBValue(blue)) { - var color = { - red: red | 0, - green: green | 0, - blue: blue | 0, - }; - - if (this.isValidRGBValue(alpha) === true) { - color.alpha = alpha | 0; - } - - // RGBToHSL(color.r, color.g, color.b); - - return color; - } - } - isValidRGBValue(value) { - return (typeof (value) === 'number' && Number.isNaN(value) === false && value >= 0 && value <= 255); - } - rgbToHSv(ref) { - var red = ref.red; - var green = ref.green; - var blue = ref.blue; - - var rr; - var gg; - var bb; - var h; - var s; - - var rabs = red / 255; - var gabs = green / 255; - var babs = blue / 255; - var v = Math.max(rabs, gabs, babs); - var diff = v - Math.min(rabs, gabs, babs); - var diffc = function (c) { return (v - c) / 6 / diff + 1 / 2; }; - if (diff === 0) { - h = 0; - s = 0; - } else { - s = diff / v; - rr = diffc(rabs); - gg = diffc(gabs); - bb = diffc(babs); - - if (rabs === v) { - h = bb - gg; - } else if (gabs === v) { - h = (1 / 3) + rr - bb; - } else if (babs === v) { - h = (2 / 3) + gg - rr; - } - if (h < 0) { - h += 1; - } else if (h > 1) { - h -= 1; - } - } - - return { - hue: Math.round(h * 360), - saturation: Math.round(s * 100), - value: Math.round(v * 100), - }; - } - - - hexToRgb(value) { - var hexRegexp = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)|(^#{0,1}[0-9A-F]{8}$)/i; - - var regexp = /([0-9A-F])([0-9A-F])([0-9A-F])/i; - var valid = hexRegexp.test(value); - - if (valid) { - if (value[0] === '#') { value = value.slice(1, value.length); } - - if (value.length === 3) { value = value.replace(regexp, '$1$1$2$2$3$3'); } - - var red = parseInt(value.substr(0, 2), 16); - var green = parseInt(value.substr(2, 2), 16); - var blue = parseInt(value.substr(4, 2), 16); - var alpha = parseInt(value.substr(6, 2), 16) / 255; - - var color = this.setRGBA(red, green, blue, alpha); - var hsv = this.rgbToHSv(Object.assign({}, color)); - - return Object.assign({}, color, - hsv); - } - - return false; - } - mapFromGradientSettingsToColorPickerInitalState(gradientSettings) { this.GradientPickerInitalState = { points: gradientSettings.gradient.map((g) => { - const rgb = this.hexToRgb(g.colour); + const rgb = hexToRgb(g.colour); return { left: +g.stop, red: rgb.red, @@ -204,11 +111,6 @@ export default class BackgroundSettings extends React.PureComponent { }); } - pickFirstColour = (event) => { - const value = event.target.value; - this.setState({ gradientSettings: { "angle": "180", "gradient": [{ "colour": value, "stop": 0 }], "type": "linear" } }); - } - addColour = () => { this.setState((s) => { const [lastGradient, ...initGradients] = s.gradientSettings.gradient.reverse(); @@ -222,18 +124,6 @@ export default class BackgroundSettings extends React.PureComponent { }); } - removeColour = (index) => { - this.setState((s) => { - const newState = { - gradientSettings: { - ...s.gradientSettings, - gradient: s.gradientSettings.gradient.filter((g, i) => i !== index) - } - }; - return newState; - }); - } - currentGradientSettings = () => { if (typeof this.state.gradientSettings === 'object' && this.state.gradientSettings.gradient.every(g => g.colour !== this.props.language.background.disabled)) { const clampNumber = (num, a, b) => Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b)); @@ -245,25 +135,16 @@ export default class BackgroundSettings extends React.PureComponent { return this.props.language.background.disabled; } - onChange = (attrs, name) => { - console.log(attrs, name); - function rgbToHex(red, green, blue) { - let r16 = red.toString(16); - let g16 = green.toString(16); - let b16 = blue.toString(16); - - if (red < 16) r16 = `0${r16}`; - if (green < 16) g16 = `0${g16}`; - if (blue < 16) b16 = `0${b16}`; - - return r16 + g16 + b16; + onColorPickerChange = (attrs, name) => { + if(process.env.NODE_ENV == 'development'){ + console.log(attrs, name); } this.setState({ gradientSettings: { 'angle': attrs.degree, 'gradient': attrs.points.map((p) => { return { 'colour': '#' + rgbToHex(p.red, p.green, p.blue), 'stop': p.left } }), 'type': attrs.type } }); }; - onSection = () => { + onSectionToggle = () => { this.setState((state) => { return { shown: !state.shown @@ -281,9 +162,9 @@ export default class BackgroundSettings extends React.PureComponent { this.mapFromGradientSettingsToColorPickerInitalState(this.state.gradientSettings); } gradientInputs = ( this.onChange(color, 'start')} - onChange={color => this.onChange(color, 'change')} - onEndChange={color => this.onChange(color, 'end')} + onStartChange={color => this.onColorPickerChange(color, 'start')} + onChange={color => this.onColorPickerChange(color, 'change')} + onEndChange={color => this.onColorPickerChange(color, 'end')} gradient={this.GradientPickerInitalState} isGradient />); } else { @@ -303,7 +184,7 @@ export default class BackgroundSettings extends React.PureComponent { } return ( -
+
    diff --git a/src/helpers/hexToRgb.js b/src/helpers/hexToRgb.js new file mode 100644 index 00000000..f9a2fa7c --- /dev/null +++ b/src/helpers/hexToRgb.js @@ -0,0 +1,31 @@ +import rgbToHsv from './rgbToHsv'; +import setRgba from './setRgba'; + +const hexRegexp = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)|(^#{0,1}[0-9A-F]{8}$)/i; + +const regexp = /([0-9A-F])([0-9A-F])([0-9A-F])/i; + +export default function hexToRgb(value) { + const valid = hexRegexp.test(value); + + if (valid) { + if (value[0] === '#') value = value.slice(1, value.length); + + if (value.length === 3) value = value.replace(regexp, '$1$1$2$2$3$3'); + + const red = parseInt(value.substr(0, 2), 16); + const green = parseInt(value.substr(2, 2), 16); + const blue = parseInt(value.substr(4, 2), 16); + const alpha = parseInt(value.substr(6, 2), 16) / 255; + + const color = setRgba(red, green, blue, alpha); + const hsv = rgbToHsv({ ...color }); + + return { + ...color, + ...hsv, + }; + } + + return false; +} diff --git a/src/helpers/rgbToHex.js b/src/helpers/rgbToHex.js new file mode 100644 index 00000000..81695e1d --- /dev/null +++ b/src/helpers/rgbToHex.js @@ -0,0 +1,11 @@ +export default function rgbToHex(red, green, blue) { + let r16 = red.toString(16); + let g16 = green.toString(16); + let b16 = blue.toString(16); + + if (red < 16) r16 = `0${r16}`; + if (green < 16) g16 = `0${g16}`; + if (blue < 16) b16 = `0${b16}`; + + return r16 + g16 + b16; +} diff --git a/src/helpers/rgbToHsv.js b/src/helpers/rgbToHsv.js new file mode 100644 index 00000000..a5c02bb6 --- /dev/null +++ b/src/helpers/rgbToHsv.js @@ -0,0 +1,42 @@ +export default function rgbToHSv({ red, green, blue }) { + let rr; + let gg; + let bb; + let h; + let s; + + const rabs = red / 255; + const gabs = green / 255; + const babs = blue / 255; + const v = Math.max(rabs, gabs, babs); + const diff = v - Math.min(rabs, gabs, babs); + const diffc = c => (v - c) / 6 / diff + 1 / 2; + if (diff === 0) { + h = 0; + s = 0; + } else { + s = diff / v; + rr = diffc(rabs); + gg = diffc(gabs); + bb = diffc(babs); + + if (rabs === v) { + h = bb - gg; + } else if (gabs === v) { + h = (1 / 3) + rr - bb; + } else if (babs === v) { + h = (2 / 3) + gg - rr; + } + if (h < 0) { + h += 1; + } else if (h > 1) { + h -= 1; + } + } + + return { + hue: Math.round(h * 360), + saturation: Math.round(s * 100), + value: Math.round(v * 100), + }; +} diff --git a/src/helpers/setRgba.js b/src/helpers/setRgba.js new file mode 100644 index 00000000..e93c26c6 --- /dev/null +++ b/src/helpers/setRgba.js @@ -0,0 +1,21 @@ +function isValidRGBValue(value) { + return (typeof (value) === 'number' && Number.isNaN(value) === false && value >= 0 && value <= 255); +} + +export default function setRGBA(red, green, blue, alpha) { + if (isValidRGBValue(red) && isValidRGBValue(green) && isValidRGBValue(blue)) { + const color = { + red: red | 0, + green: green | 0, + blue: blue | 0, + }; + + if (isValidRGBValue(alpha) === true) { + color.alpha = alpha | 0; + } + + // RGBToHSL(color.r, color.g, color.b); + + return color; + } +}