Use Paper.Color instead of CSS color strings

package.json

@@ -30,7 +30,6 @@
     "lodash.bindall": "4.4.0",
     "lodash.omit": "4.5.0",
     "minilog": "3.1.0",
-    "parse-color": "1.0.0",
     "prop-types": "^15.5.10",
     "scratch-svg-renderer": "0.2.0-prerelease.20200610220938"
   },

src/components/color-button/color-button.jsx

@@ -9,11 +9,15 @@ import mixedFillIcon from './mixed-fill.svg';
 import styles from './color-button.css';
 import GradientTypes from '../../lib/gradient-types';
 import log from '../../log/log';
+import ColorProptype from '../../lib/color-proptype';
 
 const colorToBackground = (color, color2, gradientType) => {
     if (color === MIXED || (gradientType !== GradientTypes.SOLID && color2 === MIXED)) return 'white';
-    if (color === null) color = 'white';
-    if (color2 === null) color2 = 'white';
+    if (color === MIXED || color2 === MIXED) return 'white';
+
+    color = (color === null) ? 'white' : color.toCSS();
+    color2 = (color2 === null) ? 'white' : color2.toCSS();
+
     switch (gradientType) {
     case GradientTypes.SOLID: return color;
     case GradientTypes.HORIZONTAL: return `linear-gradient(to right, ${color}, ${color2})`;
@@ -55,8 +59,8 @@ const ColorButtonComponent = props => (
 );
 
 ColorButtonComponent.propTypes = {
-    color: PropTypes.string,
-    color2: PropTypes.string,
+    color: ColorProptype,
+    color2: ColorProptype,
     gradientType: PropTypes.oneOf(Object.keys(GradientTypes)).isRequired,
     onClick: PropTypes.func.isRequired,
     outline: PropTypes.bool.isRequired

src/components/color-indicator.jsx

@@ -8,6 +8,7 @@ import InputGroup from './input-group/input-group.jsx';
 import Label from './forms/label.jsx';
 
 import GradientTypes from '../lib/gradient-types';
+import ColorProptype from '../lib/color-proptype';
 
 const ColorIndicatorComponent = props => (
     <InputGroup
@@ -46,8 +47,8 @@ const ColorIndicatorComponent = props => (
 ColorIndicatorComponent.propTypes = {
     className: PropTypes.string,
     disabled: PropTypes.bool.isRequired,
-    color: PropTypes.string,
-    color2: PropTypes.string,
+    color: ColorProptype,
+    color2: ColorProptype,
     colorModalVisible: PropTypes.bool.isRequired,
     gradientType: PropTypes.oneOf(Object.keys(GradientTypes)).isRequired,
     label: PropTypes.string.isRequired,

src/components/color-picker/color-picker.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import {defineMessages, FormattedMessage, injectIntl, intlShape} from 'react-intl';
 
 import classNames from 'classnames';
-import parseColor from 'parse-color';
 
 import Slider from '../forms/slider.jsx';
 import LabeledIconButton from '../labeled-icon-button/labeled-icon-button.jsx';
@@ -20,11 +19,23 @@ import fillSolidIcon from './icons/fill-solid-enabled.svg';
 import fillVertGradientIcon from './icons/fill-vert-gradient-enabled.svg';
 import swapIcon from './icons/swap.svg';
 import Modes from '../../lib/modes';
+import ColorProptype from '../../lib/color-proptype';
 
-const hsvToHex = (h, s, v) =>
-    // Scale hue back up to [0, 360] from [0, 100]
-    parseColor(`hsv(${3.6 * h}, ${s}, ${v})`).hex
-;
+/**
+ * Converts the color picker's internal color representation (HSV 0-100) into a CSS color string.
+ * @param {number} h Hue, from 0 to 100.
+ * @param {number} s Saturation, from 0 to 100.
+ * @param {number} v Value, from 0 to 100.
+ * @returns {string} A valid CSS color string representing the input HSV color.
+ */
+const hsvToCssString = (h, s, v) => {
+    const scaledValue = v * 0.01;
+    const hslLightness = scaledValue - ((scaledValue * (s * 0.01)) / 2);
+    const m = Math.min(hslLightness, 1 - hslLightness);
+    const hslSaturation = (m === 0) ? 0 : (scaledValue - hslLightness) / m;
+
+    return `hsl(${h * 3.6}, ${hslSaturation * 100}%, ${hslLightness * 100}%)`;
+};
 
 const messages = defineMessages({
     swap: {
@@ -41,13 +52,13 @@ class ColorPickerComponent extends React.Component {
         for (let n = 100; n >= 0; n -= 10) {
             switch (channel) {
             case 'hue':
-                stops.push(hsvToHex(n, this.props.saturation, this.props.brightness));
+                stops.push(hsvToCssString(n, this.props.saturation, this.props.brightness));
                 break;
             case 'saturation':
-                stops.push(hsvToHex(this.props.hue, n, this.props.brightness));
+                stops.push(hsvToCssString(this.props.hue, n, this.props.brightness));
                 break;
             case 'brightness':
-                stops.push(hsvToHex(this.props.hue, this.props.saturation, n));
+                stops.push(hsvToCssString(this.props.hue, this.props.saturation, n));
                 break;
             default:
                 throw new Error(`Unknown channel for color sliders: ${channel}`);
@@ -122,7 +133,7 @@ class ColorPickerComponent extends React.Component {
                                         })}
                                         style={{
                                             backgroundColor: this.props.color === null || this.props.color === MIXED ?
-                                                'white' : this.props.color
+                                                'white' : this.props.color.toCSS()
                                         }}
                                         onClick={this.props.onSelectColor}
                                     >
@@ -155,7 +166,7 @@ class ColorPickerComponent extends React.Component {
                                         })}
                                         style={{
                                             backgroundColor: this.props.color2 === null || this.props.color2 === MIXED ?
-                                                'white' : this.props.color2
+                                                'white' : this.props.color2.toCSS()
                                         }}
                                         onClick={this.props.onSelectColor2}
                                     >
@@ -290,8 +301,8 @@ class ColorPickerComponent extends React.Component {
 
 ColorPickerComponent.propTypes = {
     brightness: PropTypes.number.isRequired,
-    color: PropTypes.string,
-    color2: PropTypes.string,
+    color: ColorProptype,
+    color2: ColorProptype,
     colorIndex: PropTypes.number.isRequired,
     gradientType: PropTypes.oneOf(Object.keys(GradientTypes)).isRequired,
     hue: PropTypes.number.isRequired,

src/containers/bit-brush-mode.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {connect} from 'react-redux';
+import ColorProptype from '../lib/color-proptype';
 import bindAll from 'lodash.bindall';
 import Modes from '../lib/modes';
 import {MIXED} from '../helper/style-path';
@@ -84,7 +85,7 @@ BitBrushMode.propTypes = {
     bitBrushSize: PropTypes.number.isRequired,
     clearGradient: PropTypes.func.isRequired,
     clearSelectedItems: PropTypes.func.isRequired,
-    color: PropTypes.string,
+    color: ColorProptype,
     handleMouseDown: PropTypes.func.isRequired,
     isBitBrushModeActive: PropTypes.bool.isRequired,
     onChangeFillColor: PropTypes.func.isRequired,

src/containers/bit-fill-mode.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {connect} from 'react-redux';
+import ColorProptype from '../lib/color-proptype';
 import bindAll from 'lodash.bindall';
 import Modes from '../lib/modes';
 import GradientTypes from '../lib/gradient-types';
@@ -102,8 +103,8 @@ class BitFillMode extends React.Component {
 BitFillMode.propTypes = {
     changeGradientType: PropTypes.func.isRequired,
     clearSelectedItems: PropTypes.func.isRequired,
-    color: PropTypes.string,
-    color2: PropTypes.string,
+    color: ColorProptype,
+    color2: ColorProptype,
     styleGradientType: PropTypes.oneOf(Object.keys(GradientTypes)).isRequired,
     fillModeGradientType: PropTypes.oneOf(Object.keys(GradientTypes)),
     handleMouseDown: PropTypes.func.isRequired,

src/containers/bit-line-mode.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {connect} from 'react-redux';
+import ColorProptype from '../lib/color-proptype';
 import bindAll from 'lodash.bindall';
 import Modes from '../lib/modes';
 import {MIXED} from '../helper/style-path';
@@ -84,7 +85,7 @@ BitLineMode.propTypes = {
     bitBrushSize: PropTypes.number.isRequired,
     clearGradient: PropTypes.func.isRequired,
     clearSelectedItems: PropTypes.func.isRequired,
-    color: PropTypes.string,
+    color: ColorProptype,
     handleMouseDown: PropTypes.func.isRequired,
     isBitLineModeActive: PropTypes.bool.isRequired,
     onChangeFillColor: PropTypes.func.isRequired,

src/containers/color-indicator.jsx

@@ -1,21 +1,20 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import bindAll from 'lodash.bindall';
-import parseColor from 'parse-color';
 import {injectIntl, intlShape} from 'react-intl';
 
 import {getSelectedLeafItems} from '../helper/selection';
 import Formats from '../lib/format';
 import {isBitmap} from '../lib/format';
 import GradientTypes from '../lib/gradient-types';
+import ColorProptype from '../lib/color-proptype';
 
 import ColorIndicatorComponent from '../components/color-indicator.jsx';
 import {applyColorToSelection,
     applyGradientTypeToSelection,
     applyStrokeWidthToSelection,
     generateSecondaryColor,
-    swapColorsInSelection,
-    MIXED} from '../helper/style-path';
+    swapColorsInSelection} from '../helper/style-path';
 
 const makeColorIndicator = (label, isStroke) => {
     class ColorIndicator extends React.Component {
@@ -123,12 +122,8 @@ const makeColorIndicator = (label, isStroke) => {
                 this.props.setSelectedItems(this.props.format);
                 this._hasChanged = this._hasChanged || isDifferent;
             } else {
-                let color1 = this.props.color;
-                let color2 = this.props.color2;
-                color1 = color1 === null || color1 === MIXED ? color1 : parseColor(color1).hex;
-                color2 = color2 === null || color2 === MIXED ? color2 : parseColor(color2).hex;
-                this.props.onChangeColor(color1, 1);
-                this.props.onChangeColor(color2, 0);
+                this.props.onChangeColor(this.props.color, 1);
+                this.props.onChangeColor(this.props.color2, 0);
             }
         }
         render () {
@@ -149,8 +144,8 @@ const makeColorIndicator = (label, isStroke) => {
     ColorIndicator.propTypes = {
         colorIndex: PropTypes.number.isRequired,
         disabled: PropTypes.bool.isRequired,
-        color: PropTypes.string,
-        color2: PropTypes.string,
+        color: ColorProptype,
+        color2: ColorProptype,
         colorModalVisible: PropTypes.bool.isRequired,
         fillBitmapShapes: PropTypes.bool.isRequired,
         format: PropTypes.oneOf(Object.keys(Formats)),

src/containers/color-picker.jsx

@@ -1,7 +1,7 @@
 import bindAll from 'lodash.bindall';
 import {connect} from 'react-redux';
 import paper from '@scratch/paper';
-import parseColor from 'parse-color';
+import ColorProptype from '../lib/color-proptype';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -14,31 +14,13 @@ import ColorPickerComponent from '../components/color-picker/color-picker.jsx';
 import {MIXED} from '../helper/style-path';
 import Modes from '../lib/modes';
 
-const colorStringToHsv = hexString => {
-    const hsv = parseColor(hexString).hsv;
-    // Hue comes out in [0, 360], limit to [0, 100]
-    hsv[0] = hsv[0] / 3.6;
-    // Black is parsed as {0, 0, 0}, but turn saturation up to 100
-    // to make it easier to see slider values.
-    if (hsv[1] === 0 && hsv[2] === 0) {
-        hsv[1] = 100;
-    }
-    return hsv;
-};
-
-const hsvToHex = (h, s, v) =>
-    // Scale hue back up to [0, 360] from [0, 100]
-    parseColor(`hsv(${3.6 * h}, ${s}, ${v})`).hex
-;
-
 // Important! This component ignores new color props except when isEyeDropping
 // This is to make the HSV <=> RGB conversion stable. The sliders manage their
 // own changes until unmounted or color changes with props.isEyeDropping = true.
 class ColorPicker extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
-            'getHsv',
             'handleChangeGradientTypeHorizontal',
             'handleChangeGradientTypeRadial',
             'handleChangeGradientTypeSolid',
@@ -75,7 +57,11 @@ class ColorPicker extends React.Component {
         const isTransparent = color === null;
         const isMixed = color === MIXED;
         return isTransparent || isMixed ?
-            [50, 100, 100] : colorStringToHsv(color);
+            [50, 100, 100] : [
+                color.hue * (100 / 360),
+                color.saturation * 100,
+                color.brightness * 100
+            ];
     }
     handleHueChange (hue) {
         this.setState({hue: hue}, () => {
@@ -93,11 +79,11 @@ class ColorPicker extends React.Component {
         });
     }
     handleColorChange () {
-        this.props.onChangeColor(hsvToHex(
-            this.state.hue,
-            this.state.saturation,
-            this.state.brightness
-        ));
+        this.props.onChangeColor(new paper.Color({
+            hue: this.state.hue * (360 / 100),
+            saturation: this.state.saturation / 100,
+            brightness: this.state.brightness / 100
+        }));
     }
     handleTransparent () {
         this.props.onChangeColor(null);
@@ -152,8 +138,8 @@ class ColorPicker extends React.Component {
 }
 
 ColorPicker.propTypes = {
-    color: PropTypes.string,
-    color2: PropTypes.string,
+    color: ColorProptype,
+    color2: ColorProptype,
     colorIndex: PropTypes.number.isRequired,
     gradientType: PropTypes.oneOf(Object.keys(GradientTypes)).isRequired,
     isEyeDropping: PropTypes.bool.isRequired,

src/containers/fill-mode.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {connect} from 'react-redux';
+import ColorProptype from '../lib/color-proptype';
 import bindAll from 'lodash.bindall';
 import Modes from '../lib/modes';
 import GradientTypes from '../lib/gradient-types';
@@ -112,8 +113,8 @@ FillMode.propTypes = {
     changeGradientType: PropTypes.func.isRequired,
     clearHoveredItem: PropTypes.func.isRequired,
     clearSelectedItems: PropTypes.func.isRequired,
-    fillColor: PropTypes.string,
-    fillColor2: PropTypes.string,
+    fillColor: ColorProptype,
+    fillColor2: ColorProptype,
     fillStyleGradientType: PropTypes.oneOf(Object.keys(GradientTypes)).isRequired,
     fillModeGradientType: PropTypes.oneOf(Object.keys(GradientTypes)),
     handleMouseDown: PropTypes.func.isRequired,

src/containers/line-mode.jsx

@@ -23,7 +23,7 @@ class LineMode extends React.Component {
         return 6;
     }
     static get DEFAULT_COLOR () {
-        return '#000000';
+        return new paper.Color({hue: 0, saturation: 0, brightness: 0});
     }
     constructor (props) {
         super(props);

src/containers/paint-editor.jsx

@@ -254,14 +254,14 @@ class PaintEditor extends React.Component {
     }
     onMouseUp () {
         if (this.props.isEyeDropping) {
-            const colorString = this.eyeDropper.colorString;
+            const color = this.eyeDropper.color;
             const callback = this.props.changeColorToEyeDropper;
 
             this.eyeDropper.remove();
             if (!this.eyeDropper.hideLoupe) {
                 // If not hide loupe, that means the click is inside the canvas,
                 // so apply the new color
-                callback(colorString);
+                callback(color);
             }
             if (this.props.previousTool) this.props.previousTool.activate();
             this.props.onDeactivateEyeDropper();