scratch-paint/src/helper/tools/rect-tool.js

import paper from '@scratch/paper';
import Modes from '../../modes/modes';
import {styleShape} from '../style-path';
import BoundingBoxTool from '../selection-tools/bounding-box-tool';

/**
 * Tool for drawing rectangles.
 */
class RectTool extends paper.Tool {
    /**
     * @param {function} setSelectedItems Callback to set the set of selected items in the Redux state
     * @param {function} clearSelectedItems Callback to clear the set of selected items in the Redux state
     * @param {!function} onUpdateSvg A callback to call when the image visibly changes
     */
    constructor (setSelectedItems, clearSelectedItems, onUpdateSvg) {
        super();
        this.onUpdateSvg = onUpdateSvg;
        this.prevHoveredItemId = null;
        this.boundingBoxTool = new BoundingBoxTool(Modes.SELECT, setSelectedItems, clearSelectedItems, onUpdateSvg);
        
        // We have to set these functions instead of just declaring them because
        // paper.js tools hook up the listeners in the setter functions.
        this.onMouseDrag = this.handleMouseDrag;
        this.onMouseUp = this.handleMouseUp;

        this.downPoint = null;
        this.rect = null;
        this.colorState = null;
    }
    setColorState (colorState) {
        this.colorState = colorState;
    }
    handleMouseDrag (event) {
        if (event.event.button > 0) return;  // only first mouse button

        if (this.rect) {
            this.rect.remove();
        }
        this.rect = new paper.Path.Rectangle(event.downPoint, event.point);
        
        if (event.modifiers.shift) {
            this.rect.height = this.rect.width;
        }
        
        if (event.modifiers.alt) {
            this.rect.position = event.downPoint;
        }
        
        styleShape(this.rect, this.colorState);
    }
    handleMouseUp (event) {
        if (event.event.button > 0) return;  // only first mouse button
        
        if (this.rect) {
            this.onUpdateSvg();
            this.rect = null;
        }
    }
    deactivateTool () {
        this.downPoint = null;
        this.rect = null;
        this.colorState = null;
    }
}

export default RectTool;