scratch-paint/src/helper/selection-tools/nudge-tool.js

import {getSelectedRootItems} from '../selection';
import paper from '@scratch/paper';

/**
 * Tool containing handlers for arrow key events for nudging the selection.
 * Note that this tool is built for selection mode, not reshape mode.
 */
class NudgeTool {
    /**
     * @param {function} boundingBoxTool to control the bounding box
     * @param {!function} onUpdateSvg A callback to call when the image visibly changes
     */
    constructor (boundingBoxTool, onUpdateSvg) {
        this.boundingBoxTool = boundingBoxTool;
        this.onUpdateSvg = onUpdateSvg;
    }
    onKeyDown (event) {
        // Bail if the real event target is an input
        if (event.event.target.tagName === 'INPUT') return;

        const nudgeAmount = 1 / paper.view.zoom;
        const selected = getSelectedRootItems();
        if (selected.length === 0) return;

        let translation;
        if (event.key === 'up') {
            translation = new paper.Point(0, -nudgeAmount);
        } else if (event.key === 'down') {
            translation = new paper.Point(0, nudgeAmount);
        } else if (event.key === 'left') {
            translation = new paper.Point(-nudgeAmount, 0);
        } else if (event.key === 'right') {
            translation = new paper.Point(nudgeAmount, 0);
        }

        if (translation) {
            for (const item of selected) {
                item.translate(translation);
            }
        }
        this.boundingBoxTool.setSelectionBounds();
    }
    onKeyUp (event) {
        const selected = getSelectedRootItems();
        if (selected.length === 0) return;

        if (event.key === 'up' || event.key === 'down' || event.key === 'left' || event.key === 'right') {
            this.onUpdateSvg();
        }
    }
}

export default NudgeTool;