WIP initial prototype of eye dropper

src/components/loupe/loupe.css

+.color-picker {
+    position: absolute;
+    border-radius: 100%;
+    border: 1px solid #222;
+}

src/components/loupe/loupe.jsx

+import PropTypes from 'prop-types';
+import React from 'react';
+import bindAll from 'lodash.bindall';
+
+import Box from '../box/box.jsx';
+import styles from './loupe.css';
+
+const zoomScale = 3;
+
+class LoupeComponent extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'setCanvas'
+        ]);
+    }
+    componentDidUpdate () {
+        this.draw();
+    }
+    draw () {
+        const boxSize = 6 / zoomScale;
+        const boxLineWidth = 1 / zoomScale;
+        const colorRingWidth = 15 / zoomScale;
+
+        const ctx = this.canvas.getContext('2d');
+        const {color, data, width, height} = this.props.colorInfo;
+        this.canvas.width = zoomScale * width;
+        this.canvas.height = zoomScale * height;
+
+        // In order to scale the image data, must draw to a tmp canvas first
+        const tmpCanvas = document.createElement('canvas');
+        tmpCanvas.width = width;
+        tmpCanvas.height = height;
+        const tmpCtx = tmpCanvas.getContext('2d');
+        const imageData = tmpCtx.createImageData(width, height);
+        imageData.data.set(data);
+        tmpCtx.putImageData(imageData, 0, 0);
+
+        // Scale the loupe canvas and draw the zoomed image
+        ctx.save();
+        ctx.scale(zoomScale, zoomScale);
+        ctx.drawImage(tmpCanvas, 0, 0, width, height);
+
+        // Draw an outlined square at the cursor position (cursor is hidden)
+        ctx.lineWidth = boxLineWidth;
+        ctx.strokeStyle = 'black';
+        ctx.fillStyle = `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`;
+        ctx.beginPath();
+        ctx.rect((width / 2) - (boxSize / 2), (height / 2) - (boxSize / 2), boxSize, boxSize);
+        ctx.fill();
+        ctx.stroke();
+
+        // Draw a thick ring around the loupe showing the current color
+        ctx.strokeStyle = `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`;
+        ctx.lineWidth = colorRingWidth;
+        ctx.beginPath();
+        ctx.moveTo(width, height / 2);
+        ctx.arc(width / 2, height / 2, width / 2, 0, 2 * Math.PI);
+        ctx.stroke();
+        ctx.restore();
+    }
+    setCanvas (element) {
+        this.canvas = element;
+    }
+    render () {
+        const {
+            colorInfo,
+            ...boxProps
+        } = this.props;
+        return (
+            <Box
+                {...boxProps}
+                className={styles.colorPicker}
+                componentRef={this.setCanvas}
+                element="canvas"
+                height={colorInfo.height}
+                style={{
+                    top: colorInfo.y - ((zoomScale * colorInfo.height) / 2),
+                    left: colorInfo.x - ((zoomScale * colorInfo.width) / 2),
+                    width: colorInfo.width * zoomScale,
+                    height: colorInfo.height * zoomScale
+                }}
+                width={colorInfo.width}
+            />
+        );
+    }
+}
+
+LoupeComponent.propTypes = {
+    colorInfo: PropTypes.shape({
+        color: PropTypes.shape({
+            r: PropTypes.number,
+            g: PropTypes.number,
+            b: PropTypes.number
+        }),
+        data: PropTypes.instanceOf(Uint8Array),
+        width: PropTypes.number,
+        height: PropTypes.number,
+        x: PropTypes.number,
+        y: PropTypes.number
+    })
+};
+
+export default LoupeComponent;

src/components/stage/stage.css

@@ -13,15 +13,32 @@
     background-color: transparent;
 }
 
+.with-color-picker {
+    cursor: none;
+    z-index: 2001;
+}
+
+.color-picker-background {
+    position: absolute;;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.55);
+    display: block;
+    z-index: 2000;
+    top: 0;
+    left: 0;
+}
+
 .stage-wrapper {
     position: relative;
 }
 
-.monitor-wrapper {
+.monitor-wrapper, .color-picker-wrapper {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
+    overflow: hidden;
 }

src/components/stage/stage.jsx

 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
 
 import Box from '../box/box.jsx';
+import Loupe from '../loupe/loupe.jsx';
 import MonitorList from '../../containers/monitor-list.jsx';
 import styles from './stage.css';
 
@@ -10,27 +12,50 @@ const StageComponent = props => {
         canvasRef,
         width,
         height,
+        colorInfo,
+        onDeactivateColorPicker,
+        isColorPicking,
         ...boxProps
     } = props;
     return (
-        <Box className={styles.stageWrapper}>
+        <div>
             <Box
-                className={styles.stage}
-                componentRef={canvasRef}
-                element="canvas"
-                height={height}
-                width={width}
-                {...boxProps}
-            />
-            <Box className={styles.monitorWrapper}>
-                <MonitorList />
+                className={classNames(styles.stageWrapper, {
+                    [styles.withColorPicker]: isColorPicking
+                })}
+            >
+                <Box
+                    className={styles.stage}
+                    componentRef={canvasRef}
+                    element="canvas"
+                    height={height}
+                    width={width}
+                    {...boxProps}
+                />
+                <Box className={styles.monitorWrapper}>
+                    <MonitorList />
+                </Box>
+                {isColorPicking && colorInfo ? (
+                    <Box className={styles.colorPickerWrapper}>
+                        <Loupe colorInfo={colorInfo} />
+                    </Box>
+                ) : null}
             </Box>
-        </Box>
+            {isColorPicking ? (
+                <Box
+                    className={styles.colorPickerBackground}
+                    onClick={onDeactivateColorPicker}
+                />
+            ) : null}
+        </div>
     );
 };
 StageComponent.propTypes = {
     canvasRef: PropTypes.func,
+    colorInfo: Loupe.propTypes.colorInfo,
     height: PropTypes.number,
+    isColorPicking: PropTypes.bool,
+    onDeactivateColorPicker: PropTypes.func,
     width: PropTypes.number
 };
 StageComponent.defaultProps = {

src/containers/blocks.jsx

@@ -11,6 +11,7 @@ import BlocksComponent from '../components/blocks/blocks.jsx';
 
 import {connect} from 'react-redux';
 import {updateToolbox} from '../reducers/toolbox';
+import {activateColorPicker} from '../reducers/color-picker';
 
 const addFunctionListener = (object, property, callback) => {
     const oldFn = object[property];
@@ -50,6 +51,8 @@ class Blocks extends React.Component {
         this.onTargetsUpdate = debounce(this.onTargetsUpdate, 100);
     }
     componentDidMount () {
+        this.ScratchBlocks.FieldColourSlider.activateEyedropper_ = this.props.onActivateColorPicker;
+
         const workspaceConfig = defaultsDeep({}, Blocks.defaultOptions, this.props.options);
         this.workspace = this.ScratchBlocks.inject(this.blocks, workspaceConfig);
 
@@ -219,14 +222,17 @@ class Blocks extends React.Component {
         this.setState({prompt: null});
     }
     render () {
+        /* eslint-disable no-unused-vars */
         const {
-            options, // eslint-disable-line no-unused-vars
-            vm, // eslint-disable-line no-unused-vars
-            isVisible, // eslint-disable-line no-unused-vars
-            onExtensionAdded, // eslint-disable-line no-unused-vars
-            toolboxXML, // eslint-disable-line no-unused-vars
+            options,
+            vm,
+            isVisible,
+            onActivateColorPicker,
+            onExtensionAdded,
+            toolboxXML,
             ...props
         } = this.props;
+        /* eslint-enable no-unused-vars */
         return (
             <div>
                 <BlocksComponent
@@ -249,6 +255,7 @@ class Blocks extends React.Component {
 
 Blocks.propTypes = {
     isVisible: PropTypes.bool,
+    onActivateColorPicker: PropTypes.func,
     onExtensionAdded: PropTypes.func,
     options: PropTypes.shape({
         media: PropTypes.string,
@@ -311,6 +318,7 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
+    onActivateColorPicker: callback => dispatch(activateColorPicker(callback)),
     onExtensionAdded: toolboxXML => {
         dispatch(updateToolbox(toolboxXML));
     }

src/containers/stage.jsx

@@ -3,10 +3,19 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Renderer from 'scratch-render';
 import VM from 'scratch-vm';
+import {connect} from 'react-redux';
+
 import {getEventXY} from '../lib/touch-utils';
 
 import StageComponent from '../components/stage/stage.jsx';
 
+import {
+    activateColorPicker,
+    deactivateColorPicker
+} from '../reducers/color-picker';
+
+const colorPickerRadius = 20;
+
 class Stage extends React.Component {
     constructor (props) {
         super(props);
@@ -28,7 +37,8 @@ class Stage extends React.Component {
             mouseDownPosition: null,
             isDragging: false,
             dragOffset: null,
-            dragId: null
+            dragId: null,
+            colorInfo: null
         };
     }
     componentDidMount () {
@@ -38,8 +48,11 @@ class Stage extends React.Component {
         this.renderer = new Renderer(this.canvas);
         this.props.vm.attachRenderer(this.renderer);
     }
-    shouldComponentUpdate (nextProps) {
-        return this.props.width !== nextProps.width || this.props.height !== nextProps.height;
+    shouldComponentUpdate (nextProps, nextState) {
+        return this.props.width !== nextProps.width ||
+            this.props.height !== nextProps.height ||
+            this.props.isColorPicking !== nextProps.isColorPicking ||
+            this.state.colorInfo !== nextState.colorInfo;
     }
     componentWillUnmount () {
         this.detachMouseEvents(this.canvas);
@@ -79,6 +92,13 @@ class Stage extends React.Component {
             (nativeSize[1] / this.rect.height) * (y - (this.rect.height / 2))
         ];
     }
+    getColorInfo (x, y) {
+        return {
+            x: x,
+            y: y,
+            ...this.renderer.extractColor(x, y, colorPickerRadius)
+        };
+    }
     handleDoubleClick (e) {
         const {x, y} = getEventXY(e);
         // Set editing target from cursor position, if clicking on a sprite.
@@ -113,6 +133,10 @@ class Stage extends React.Component {
             canvasHeight: this.rect.height
         };
         this.props.vm.postIOData('mouse', coordinates);
+
+        if (this.props.isColorPicking) {
+            this.setState({colorInfo: this.getColorInfo(mousePosition[0], mousePosition[1])});
+        }
     }
     onMouseUp (e) {
         const {x, y} = getEventXY(e);
@@ -157,6 +181,16 @@ class Stage extends React.Component {
         if (e.preventDefault) {
             e.preventDefault();
         }
+        if (this.props.isColorPicking) {
+            const {r, g, b} = this.state.colorInfo.color;
+            const componentToString = c => {
+                const hex = c.toString(16);
+                return hex.length === 1 ? `0${hex}` : hex;
+            };
+            const colorString = `#${componentToString(r)}${componentToString(g)}${componentToString(b)}`;
+            this.props.onDeactivateColorPicker(colorString);
+            this.setState({colorInfo: null});
+        }
     }
     cancelMouseDownTimeout () {
         if (this.state.mouseDownTimeoutId !== null) {
@@ -191,11 +225,13 @@ class Stage extends React.Component {
     render () {
         const {
             vm, // eslint-disable-line no-unused-vars
+            onActivateColorPicker, // eslint-disable-line no-unused-vars
             ...props
         } = this.props;
         return (
             <StageComponent
                 canvasRef={this.setCanvas}
+                colorInfo={this.state.colorInfo}
                 onDoubleClick={this.handleDoubleClick}
                 {...props}
             />
@@ -205,8 +241,23 @@ class Stage extends React.Component {
 
 Stage.propTypes = {
     height: PropTypes.number,
+    isColorPicking: PropTypes.bool,
+    onActivateColorPicker: PropTypes.func,
+    onDeactivateColorPicker: PropTypes.func,
     vm: PropTypes.instanceOf(VM).isRequired,
     width: PropTypes.number
 };
 
-export default Stage;
+const mapStateToProps = state => ({
+    isColorPicking: state.colorPicker.active
+});
+
+const mapDispatchToProps = dispatch => ({
+    onActivateColorPicker: () => dispatch(activateColorPicker()),
+    onDeactivateColorPicker: color => dispatch(deactivateColorPicker(color))
+});
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(Stage);

src/reducers/color-picker.js

+const ACTIVATE_COLOR_PICKER = 'scratch-gui/color-picker/ACTIVATE_COLOR_PICKER';
+const DEACTIVATE_COLOR_PICKER = 'scratch-gui/color-picker/DEACTIVATE_COLOR_PICKER';
+const SET_CALLBACK = 'scratch-gui/color-picker/SET_CALLBACK';
+
+const initialState = {
+    active: false,
+    callback: () => {
+        throw new Error('Color picker callback not initialized');
+    }
+};
+
+const reducer = function (state, action) {
+    if (typeof state === 'undefined') state = initialState;
+    switch (action.type) {
+    case ACTIVATE_COLOR_PICKER:
+        return Object.assign({}, state, {active: true, callback: action.callback});
+    case DEACTIVATE_COLOR_PICKER:
+        // Can be called without a string to deactivate without setting color
+        // i.e. when clicking on the modal background
+        if (typeof action.color === 'string') {
+            state.callback(action.color);
+        }
+        return Object.assign({}, state, {active: false});
+    case SET_CALLBACK:
+        return Object.assign({}, state, {callback: action.callback});
+    default:
+        return state;
+    }
+};
+
+const activateColorPicker = callback => ({type: ACTIVATE_COLOR_PICKER, callback: callback});
+const deactivateColorPicker = color => ({type: DEACTIVATE_COLOR_PICKER, color: color});
+const setCallback = callback => ({type: SET_CALLBACK, callback: callback});
+
+export {
+    reducer as default,
+    activateColorPicker,
+    deactivateColorPicker,
+    setCallback
+};

src/reducers/gui.js

 import {combineReducers} from 'redux';
+import colorPickerReducer from './color-picker';
 import intlReducer from './intl';
 import modalReducer from './modals';
 import monitorReducer from './monitors';
@@ -6,8 +7,8 @@ import targetReducer from './targets';
 import toolboxReducer from './toolbox';
 import vmReducer from './vm';
 
-
 export default combineReducers({
+    colorPicker: colorPickerReducer,
     intl: intlReducer,
     modals: modalReducer,
     monitors: monitorReducer,