scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2025-01-08 13:42:00 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Only update the full color state after eyedropper changes.

Browse source 
This prevents the sliders from changing when other sliders change (i.e.
bringing brightness down to 0). I needed to reorder the callback before
deactivate so the color picker can know that the update is coming from
the eyedropper. Also updated the comment to reflect what is really going
on.
This commit is contained in:
Paul Kaplan 2018-01-19 09:58:47 -05:00
parent 0279ba095c
commit 7aff96c3ff
2 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/containers/color-picker.jsx
View file

@ -28,9 +28,9 @@ const hsvToHex = (h, s, v) =>
parseColor(`hsv(${3.6 * h}, ${s}, ${v})`).hex
;
// Important! This component ignores new color props and cannot be updated
// This is to make the HSV <=> RGB conversion stable. Because of this, the
// component MUST be unmounted in order to change the props externally.
// 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);
@ -51,7 +51,7 @@ class ColorPicker extends React.Component {
};
}
componentWillReceiveProps (newProps) {
if (this.props.color !== newProps.color) {
if (this.props.isEyeDropping && this.props.color !== newProps.color) {
// color set by eye dropper, so update slider states
const hsv = this.getHsv(newProps.color);
this.setState({

6
src/containers/paint-editor.jsx
View file

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