scratch-paint 4.0.21 → 4.0.23

package/src/helper/selection-tools/point-tool.js

@@ -7,7 +7,7 @@ class PointTool {
     /**
      * @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} onUpdateImage A callback to call when the image visibly changes
+     * @param {!Function} onUpdateImage A callback to call when the image visibly changes
      */
     constructor (setSelectedItems, clearSelectedItems, onUpdateImage) {
         /**

package/src/helper/selection-tools/reshape-tool.js

@@ -56,8 +56,8 @@ class ReshapeTool extends paper.Tool {
      * @param {function} clearHoveredItem Callback to clear the hovered item
      * @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} onUpdateImage A callback to call when the image visibly changes
-     * @param {!function} switchToTextTool A callback to call to switch to the text tool
+     * @param {!Function} onUpdateImage A callback to call when the image visibly changes
+     * @param {!Function} switchToTextTool A callback to call to switch to the text tool
      */
     constructor (setHoveredItem, clearHoveredItem, setSelectedItems, clearSelectedItems, onUpdateImage,
         switchToTextTool) {
@@ -95,7 +95,7 @@ class ReshapeTool extends paper.Tool {
      * Returns the hit options for segments to use when conducting hit tests. Segments are only visible
      * when the shape is selected. Segments take precedence, since they are always over curves and need
      * to be grabbable. (Segments are the little circles)
-     * @return {object} See paper.Item.hitTest for definition of options
+     * @returns {object} See paper.Item.hitTest for definition of options
      */
     getSelectedSegmentHitOptions () {
         const hitOptions = {
@@ -114,7 +114,7 @@ class ReshapeTool extends paper.Tool {
      * Returns the hit options for handles to use when conducting hit tests. Handles need to be done
      * separately because we want to ignore hidden handles, but we don't want hidden handles to negate
      * legitimate hits on other things (like if the handle is over part of the fill). (Handles are the diamonds)
-     * @return {object} See paper.Item.hitTest for definition of options
+     * @returns {object} See paper.Item.hitTest for definition of options
      */
     getHandleHitOptions () {
         const hitOptions = {
@@ -135,7 +135,7 @@ class ReshapeTool extends paper.Tool {
     /**
      * Returns the hit options for curves of selected objects, which take precedence over
      * unselected things and fills.
-     * @return {object} See paper.Item.hitTest for definition of options
+     * @returns {object} See paper.Item.hitTest for definition of options
      */
     getSelectedStrokeHitOptions () {
         const hitOptions = {
@@ -159,7 +159,7 @@ class ReshapeTool extends paper.Tool {
      * Returns the hit options for fills and unselected strokes/curves to use when conducting hit tests.
      * @param {boolean} preselectedOnly True if we should only return results that are already
      *     selected.
-     * @return {object} See paper.Item.hitTest for definition of options
+     * @returns {object} See paper.Item.hitTest for definition of options
      */
     getUnselectedAndFillHitOptions () {
         const hitOptions = {
@@ -187,7 +187,7 @@ class ReshapeTool extends paper.Tool {
     /**
      * Given the point at which the mouse is, return the prioritized hit result, or null if nothing was hit.
      * @param {paper.Point} point Point to hit test on canvas
-     * @return {?paper.HitResult} hitResult
+     * @returns {?paper.HitResult} hitResult
      */
     getHitResult (point) {
         // Prefer hits on segments to other types of hits, since segments always overlap curves.

package/src/helper/selection-tools/rotate-tool.js

@@ -5,7 +5,7 @@ import paper from '@scratch/paper';
  */
 class RotateTool {
     /**
-     * @param {!function} onUpdateImage A callback to call when the image visibly changes
+     * @param {!Function} onUpdateImage A callback to call when the image visibly changes
      */
     constructor (onUpdateImage) {
         this.rotItems = [];

package/src/helper/selection-tools/scale-tool.js

@@ -12,7 +12,7 @@ const MIN_SCALE_FACTOR = 0.0001;
 class ScaleTool {
     /**
      * @param {Mode} mode Paint editor mode
-     * @param {!function} onUpdateImage A callback to call when the image visibly changes
+     * @param {!Function} onUpdateImage A callback to call when the image visibly changes
      */
     constructor (mode, onUpdateImage) {
         this.isBitmap = mode in BitmapModes;
@@ -150,7 +150,7 @@ class ScaleTool {
         }
         this.boundsPath.remove();
         this.boundsPath = null;
-        
+
         // mark text items as scaled (for later use on font size calc)
         for (let i = 0; i < this.itemGroup.children.length; i++) {
             const child = this.itemGroup.children[i];
@@ -169,7 +169,7 @@ class ScaleTool {
             this.itemGroup.layer.addChildren(this.itemGroup.children);
         }
         this.itemGroup.remove();
-        
+
         this.onUpdateImage();
         this.active = false;
     }

package/src/helper/selection-tools/select-tool.js

@@ -29,8 +29,8 @@ class SelectTool 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} setCursor Callback to set the visible mouse cursor
-     * @param {!function} onUpdateImage A callback to call when the image visibly changes
-     * @param {!function} switchToTextTool A callback to call to switch to the text tool
+     * @param {!Function} onUpdateImage A callback to call when the image visibly changes
+     * @param {!Function} switchToTextTool A callback to call to switch to the text tool
      */
     constructor (setHoveredItem, clearHoveredItem, setSelectedItems, clearSelectedItems, setCursor, onUpdateImage,
         switchToTextTool) {
@@ -86,7 +86,7 @@ class SelectTool extends paper.Tool {
      * Returns the hit options to use when conducting hit tests.
      * @param {boolean} preselectedOnly True if we should only return results that are already
      *     selected.
-     * @return {object} See paper.Item.hitTest for definition of options
+     * @returns {object} See paper.Item.hitTest for definition of options
      */
     getHitOptions (preselectedOnly) {
         // Tolerance needs to be scaled when the view is zoomed in in order to represent the same

package/src/helper/selection.js

@@ -9,7 +9,7 @@ import {sortItemsByZIndex} from './math';
 /**
  * Wrapper for paper.project.getItems that excludes our helper items
  * @param {?object} options See paper.js docs for paper.Item.getItems
- * @return {Array<paper.Item>} items that match options
+ * @returns {Array<paper.Item>} items that match options
  */
 const getItems = function (options) {
     const newMatcher = function (item) {
@@ -27,7 +27,7 @@ const getItems = function (options) {
 /**
  * @param {boolean} includeGuides True if guide layer items like the bounding box should
  *     be included in the returned items.
- * @return {Array<paper.item>} all top-level (direct descendants of a paper.Layer) items
+ * @returns {Array<paper.item>} all top-level (direct descendants of a paper.Layer) items
  */
 const getAllRootItems = function (includeGuides) {
     includeGuides = includeGuides || false;
@@ -45,7 +45,7 @@ const getAllRootItems = function (includeGuides) {
 };
 
 /**
- * @return {Array<paper.item>} all top-level (direct descendants of a paper.Layer) items
+ * @returns {Array<paper.item>} all top-level (direct descendants of a paper.Layer) items
  *     that aren't guide items or helper items.
  */
 const getAllSelectableRootItems = function () {
@@ -98,7 +98,7 @@ const _setGroupSelection = function (root, selected, fullySelected) {
 const setItemSelection = function (item, state, fullySelected) {
     const parentGroup = getItemsGroup(item);
     const itemsCompoundPath = getItemsCompoundPath(item);
-    
+
     // if selection is in a group, select group
     if (parentGroup) {
         // do it recursive
@@ -111,32 +111,32 @@ const setItemSelection = function (item, state, fullySelected) {
         }
         _setGroupSelection(item, state, fullySelected);
     }
-    
+
 };
 
-/** @return {boolean} true if anything was selected */
+/** @returns {boolean} true if anything was selected */
 const selectAllItems = function () {
     const items = getAllSelectableRootItems();
     if (items.length === 0) return false;
-    
+
     for (let i = 0; i < items.length; i++) {
         setItemSelection(items[i], true);
     }
     return true;
 };
 
-/** @return {boolean} true if anything was selected */
+/** @returns {boolean} true if anything was selected */
 const selectAllSegments = function () {
     const items = getAllSelectableRootItems();
     if (items.length === 0) return false;
-    
+
     for (let i = 0; i < items.length; i++) {
         selectItemSegments(items[i], true);
     }
     return true;
 };
 
-/** @param {!function} dispatchClearSelect Function to update the Redux select state */
+/** @param {!Function} dispatchClearSelect Function to update the Redux select state */
 const clearSelection = function (dispatchClearSelect) {
     paper.project.deselectAll();
     dispatchClearSelect();
@@ -146,7 +146,7 @@ const clearSelection = function (dispatchClearSelect) {
  * This gets all selected non-grouped items and groups
  * (alternative to paper.project.selectedItems, which includes
  * group children in addition to the group)
- * @return {Array<paper.Item>} in increasing Z order.
+ * @returns {Array<paper.Item>} in increasing Z order.
  */
 const getSelectedRootItems = function () {
     const allItems = getAllSelectableRootItems();
@@ -174,7 +174,7 @@ const getSelectedRootItems = function () {
 /**
  * This gets all selected items that are as deeply nested as possible. Does not
  * return the parent groups.
- * @return {Array<paper.Item>} in increasing Z order.
+ * @returns {Array<paper.Item>} in increasing Z order.
  */
 const getSelectedLeafItems = function () {
     const allItems = paper.project.selectedItems;
@@ -192,7 +192,7 @@ const getSelectedLeafItems = function () {
 
 /**
  * This gets all selected path segments.
- * @return {Array<paper.Segment>} selected segments
+ * @returns {Array<paper.Segment>} selected segments
  */
 const getSelectedSegments = function () {
     const selected = getSelectedLeafItems();
@@ -225,7 +225,7 @@ const _deleteItemSelection = function (items, onUpdateImage) {
 // Return true if anything was removed
 const _removeSelectedSegments = function (items, onUpdateImage) {
     const segmentsToRemove = [];
-    
+
     for (let i = 0; i < items.length; i++) {
         if (!items[i].segments) continue;
         const segments = items[i].segments;
@@ -236,7 +236,7 @@ const _removeSelectedSegments = function (items, onUpdateImage) {
             }
         }
     }
-    
+
     let removedSegments = false;
     for (let i = 0; i < segmentsToRemove.length; i++) {
         const seg = segmentsToRemove[i];
@@ -295,7 +295,7 @@ const _checkBoundsItem = function (selectionRect, item, event) {
             }
             itemBounds.remove();
             return true;
-            
+
         }
     }
 
@@ -305,7 +305,7 @@ const _checkBoundsItem = function (selectionRect, item, event) {
 const _handleRectangularSelectionItems = function (item, event, rect, mode, root) {
     if (isPathItem(item)) {
         let segmentMode = false;
-        
+
         // first round checks for segments inside the selectionRect
         for (let j = 0; j < item.segments.length; j++) {
             const seg = item.segments[j];
@@ -373,7 +373,7 @@ const _handleRectangularSelectionItems = function (item, event, rect, mode, root
 const _rectangularSelectionGroupLoop = function (group, rect, root, event, mode) {
     for (let i = 0; i < group.children.length; i++) {
         const child = group.children[i];
-        
+
         if (isGroup(child) || isCompoundPathItem(child)) {
             _rectangularSelectionGroupLoop(child, rect, root, event, mode);
         } else {
@@ -393,7 +393,7 @@ const _rectangularSelectionGroupLoop = function (group, rect, root, event, mode)
  */
 const processRectangularSelection = function (event, rect, mode) {
     const allItems = getAllSelectableRootItems();
-    
+
     for (let i = 0; i < allItems.length; i++) {
         const item = allItems[i];
         if (mode === Modes.RESHAPE && isPGTextItem(getRootItem(item))) {

package/src/helper/snapping.js

@@ -5,7 +5,7 @@ import {getItems} from './selection';
  * @param {paper.Point} point1 point 1
  * @param {paper.Point} point2 point 2
  * @param {number} tolerance Distance allowed between points that are "touching"
- * @return {boolean} true if points are within the tolerance distance.
+ * @returns {boolean} true if points are within the tolerance distance.
  */
 const touching = function (point1, point2, tolerance) {
     return point1.getDistance(point2, true) < Math.pow(tolerance / paper.view.zoom, 2);
@@ -16,7 +16,7 @@ const touching = function (point1, point2, tolerance) {
  * @param {!number} tolerance Distance within which it counts as a hit
  * @param {?paper.Path} excludePath Path to exclude from hit test, if any. For instance, you
  *     are drawing a line and don't want it to snap to its own start point.
- * @return {object} data about the end point of an unclosed path, if any such point is within the
+ * @returns {object} data about the end point of an unclosed path, if any such point is within the
  *     tolerance distance of the given point, or null if none exists.
  */
 const endPointHit = function (point, tolerance, excludePath) {

package/src/helper/style-path.js

@@ -37,7 +37,7 @@ const _getColorStateListeners = function (textEditTargetId) {
  * in order to form a smooth gradient, otherwise it fades through black. This
  * function gets the transparent color for a given color string.
  * @param {?string} colorToMatch CSS string of other color of gradient, or null for transparent
- * @return {string} CSS string for matching color of transparent
+ * @returns {string} CSS string for matching color of transparent
  */
 const getColorStringForTransparent = function (colorToMatch) {
     const color = new paper.Color(colorToMatch);
@@ -48,7 +48,7 @@ const getColorStringForTransparent = function (colorToMatch) {
 /**
  * Generate a color that contrasts well with the passed-in color.
  * @param {string} firstColor The "primary" color
- * @return {string} CSS string for generated color
+ * @returns {string} CSS string for generated color
  */
 const generateSecondaryColor = function (firstColor) {
     if (firstColor === MIXED) return null;
@@ -83,7 +83,7 @@ const generateSecondaryColor = function (firstColor) {
  * @param {?paper.Point} [radialCenter] Where the center of a radial gradient should be, if the gradient is radial.
  * Defaults to center of bounds.
  * @param {number} [minSize] The minimum width/height of the gradient object.
- * @return {paper.Color} Color object with gradient, may be null or color string if the gradient type is solid
+ * @returns {paper.Color} Color object with gradient, may be null or color string if the gradient type is solid
  */
 const createGradientObject = function (color1, color2, gradientType, bounds, radialCenter, minSize) {
     if (gradientType === GradientTypes.SOLID) return color1;
@@ -156,7 +156,7 @@ const createGradientObject = function (color1, color2, gradientType, bounds, rad
  *     When changing the color in this case, the solid gradient should override the existing gradient on the item.
  * @param {?boolean} applyToStroke True if changing the selection's stroke, false if changing its fill.
  * @param {?string} textEditTargetId paper.Item.id of text editing target, if any
- * @return {boolean} Whether the color application actually changed visibly.
+ * @returns {boolean} Whether the color application actually changed visibly.
  */
 const applyColorToSelection = function (
     colorString,
@@ -213,7 +213,7 @@ const applyColorToSelection = function (
  * Called to swap gradient colors
  * @param {?boolean} applyToStroke True if changing the selection's stroke, false if changing its fill.
  * @param {?string} textEditTargetId paper.Item.id of text editing target, if any
- * @return {boolean} Whether the color application actually changed visibly.
+ * @returns {boolean} Whether the color application actually changed visibly.
  */
 const swapColorsInSelection = function (applyToStroke, textEditTargetId) {
     const items = _getColorStateListeners(textEditTargetId);
@@ -247,7 +247,7 @@ const swapColorsInSelection = function (applyToStroke, textEditTargetId) {
  * @param {GradientType} gradientType gradient type
  * @param {?boolean} applyToStroke True if changing the selection's stroke, false if changing its fill.
  * @param {?string} textEditTargetId paper.Item.id of text editing target, if any
- * @return {boolean} Whether the color application actually changed visibly.
+ * @returns {boolean} Whether the color application actually changed visibly.
  */
 const applyGradientTypeToSelection = function (gradientType, applyToStroke, textEditTargetId) {
     const items = _getColorStateListeners(textEditTargetId);
@@ -367,7 +367,7 @@ const applyGradientTypeToSelection = function (gradientType, applyToStroke, text
  * Called when setting stroke width
  * @param {number} value New stroke width
  * @param {?string} textEditTargetId paper.Item.id of text editing target, if any
- * @return {boolean} Whether the color application actually changed visibly.
+ * @returns {boolean} Whether the color application actually changed visibly.
  */
 const applyStrokeWidthToSelection = function (value, textEditTargetId) {
     let changed = false;
@@ -417,7 +417,7 @@ const _colorStateFromGradient = gradient => {
  * Get state of colors and stroke width for selection
  * @param {!Array<paper.Item>} selectedItems Selected paper items
  * @param {?boolean} bitmapMode True if the item is being selected in bitmap mode
- * @return {?object} Object of strokeColor, strokeWidth, fillColor, thickness of the selection.
+ * @returns {?object} Object of strokeColor, strokeWidth, fillColor, thickness of the selection.
  *     Gives MIXED when there are mixed values for a color, and null for transparent.
  *     Gives null when there are mixed values for stroke width.
  *     Thickness is line thickness, used in the bitmap editor

package/src/helper/tools/fill-tool.js

@@ -11,7 +11,7 @@ class FillTool extends paper.Tool {
     /**
      * @param {function} setHoveredItem Callback to set the hovered item
      * @param {function} clearHoveredItem Callback to clear the hovered item
-     * @param {!function} onUpdateImage A callback to call when the image visibly changes
+     * @param {!Function} onUpdateImage A callback to call when the image visibly changes
      */
     constructor (setHoveredItem, clearHoveredItem, onUpdateImage) {
         super();

package/src/helper/tools/oval-tool.js

@@ -17,7 +17,7 @@ class OvalTool 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} setCursor Callback to set the visible mouse cursor
-     * @param {!function} onUpdateImage A callback to call when the image visibly changes
+     * @param {!Function} onUpdateImage A callback to call when the image visibly changes
      */
     constructor (setSelectedItems, clearSelectedItems, setCursor, onUpdateImage) {
         super();

package/src/helper/tools/rect-tool.js

@@ -17,7 +17,7 @@ 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} setCursor Callback to set the visible mouse cursor
-     * @param {!function} onUpdateImage A callback to call when the image visibly changes
+     * @param {!Function} onUpdateImage A callback to call when the image visibly changes
      */
     constructor (setSelectedItems, clearSelectedItems, setCursor, onUpdateImage) {
         super();

package/src/helper/tools/rounded-rect-tool.js

@@ -10,7 +10,7 @@ class RoundedRectTool extends paper.Tool {
      * @param {function} clearHoveredItem Callback to clear the hovered item
      * @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} onUpdateImage A callback to call when the image visibly changes
+     * @param {!Function} onUpdateImage A callback to call when the image visibly changes
      */
     constructor (setHoveredItem, clearHoveredItem, setSelectedItems, clearSelectedItems, onUpdateImage) {
         super();
@@ -20,7 +20,7 @@ class RoundedRectTool extends paper.Tool {
         this.clearSelectedItems = clearSelectedItems;
         this.onUpdateImage = onUpdateImage;
         this.prevHoveredItemId = null;
-        
+
         // We have to set these functions instead of just declaring them because
         // paper.js tools hook up the listeners in the setter functions.
         this.onMouseDown = this.handleMouseDown;

package/src/helper/tools/text-tool.js

@@ -36,9 +36,9 @@ class TextTool 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} setCursor Callback to set the visible mouse cursor
-     * @param {!function} onUpdateImage A callback to call when the image visibly changes
-     * @param {!function} setTextEditTarget Call to set text editing target whenever text editing is active
-     * @param {!function} changeFont Call to change the font in the dropdown
+     * @param {!Function} onUpdateImage A callback to call when the image visibly changes
+     * @param {!Function} setTextEditTarget Call to set text editing target whenever text editing is active
+     * @param {!Function} changeFont Call to change the font in the dropdown
      * @param {?boolean} isBitmap True if text should be rasterized once it's deselected
      */
     constructor (textAreaElement, setSelectedItems, clearSelectedItems, setCursor, onUpdateImage, setTextEditTarget,
@@ -173,7 +173,7 @@ class TextTool extends paper.Tool {
         calculated.append(viewMtx);
         calculated.append(textBoxMtx);
         this.element.style.transform = `matrix(${calculated.a}, ${calculated.b}, ${calculated.c}, ${calculated.d},
-             ${calculated.tx}, ${calculated.ty})`;
+            ${calculated.tx}, ${calculated.ty})`;
     }
     setColorState (colorState) {
         this.colorState = colorState;

package/src/helper/view.js

@@ -31,16 +31,15 @@ let _workspaceBounds = ART_BOARD_BOUNDS;
 const getWorkspaceBounds = () => _workspaceBounds;
 
 /**
-* The workspace bounds define the areas that the scroll bars can access.
-* They include at minimum the artboard, and extend to a bit beyond the
-* farthest item off tne edge in any given direction (so items can't be
-* "lost" off the edge)
-*
-* @param {boolean} clipEmpty Clip empty space from bounds, even if it
-* means discontinuously jumping the viewport. This should probably be
-* false unless the viewport is going to move discontinuously anyway
-* (such as in a zoom button click)
-*/
+ * The workspace bounds define the areas that the scroll bars can access.
+ * They include at minimum the artboard, and extend to a bit beyond the
+ * farthest item off the edge in any given direction (so items can't be
+ * "lost" off the edge)
+ * @param {boolean} clipEmpty Clip empty space from bounds, even if it
+ * means discontinuously jumping the viewport. This should probably be
+ * false unless the viewport is going to move discontinuously anyway
+ * (such as in a zoom button click)
+ */
 const setWorkspaceBounds = clipEmpty => {
     const items = getAllRootItems();
     // Include the artboard and what's visible in the viewport

package/src/playground/playground.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-console, no-alert */
 import bindAll from 'lodash.bindall';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -9,7 +10,7 @@ import {intlInitialState, IntlProvider} from './reducers/intl.js';
 import styles from './playground.css';
 // scratch-render-fonts is a playground-only dep. Fonts are expected to be imported
 // as a peer dependency, otherwise there will be two copies of them.
-import {FONTS} from 'scratch-render-fonts';
+import {FONTS as _FONTS} from 'scratch-render-fonts';
 
 const appTarget = document.createElement('div');
 appTarget.setAttribute('class', styles.playgroundContainer);
@@ -39,7 +40,7 @@ class Playground extends React.Component {
         ]);
         // Append ?dir=rtl to URL to get RTL layout
         const match = location.search.match(/dir=([^&]+)/);
-        const rtl = match && match[1] == 'rtl';
+        const rtl = match && match[1] === 'rtl';
         this.id = 0;
         this.state = {
             name: 'meow',
@@ -48,7 +49,7 @@ class Playground extends React.Component {
             imageFormat: 'svg', // 'svg', 'png', or 'jpg'
             image: svgString, // svg string or data URI
             imageId: this.id, // If this changes, the paint editor will reload
-            rtl: rtl,
+            rtl: rtl
         };
         this.reusableCanvas = document.createElement('canvas');
     }
@@ -111,7 +112,7 @@ class Playground extends React.Component {
         }
         document.body.removeChild(downloadLink);
     }
-    b64toByteArray (b64Data, sliceSize=512) {
+    b64toByteArray (b64Data, sliceSize = 512) {
         // Remove header
         b64Data = b64Data.substring(b64Data.indexOf('base64,') + 7);
 
@@ -126,45 +127,46 @@ class Playground extends React.Component {
                 byteNumbers[i] = slice.charCodeAt(i);
             }
 
-        const byteArray = new Uint8Array(byteNumbers);
-        byteArrays.push(byteArray);
-      }
+            const byteArray = new Uint8Array(byteNumbers);
+            byteArrays.push(byteArray);
+        }
 
-      return byteArrays;
+        return byteArrays;
     }
-    uploadImage() {
+    uploadImage () {
         document.getElementById(styles.fileInput).click();
     }
-    onUploadImage(event) {
-        var file = event.target.files[0];
-        var type = file.type === 'image/svg+xml' ? 'svg' :
+    onUploadImage (event) {
+        const file = event.target.files[0];
+        const type = file.type === 'image/svg+xml' ? 'svg' :
             file.type === 'image/png' ? 'png' :
-            file.type === 'image/jpg' ? 'jpg' :
-            file.type === 'image/jpeg' ? 'jpg' :
-            null;
+                file.type === 'image/jpg' ? 'jpg' :
+                    file.type === 'image/jpeg' ? 'jpg' :
+                        null;
 
-        var reader = new FileReader();
+        const reader = new FileReader();
         if (type === 'svg') {
-            reader.readAsText(file,'UTF-8');
+            reader.readAsText(file, 'UTF-8');
         } else if (type === 'png' || type === 'jpg'){
             reader.readAsDataURL(file);
         } else {
-            alert("Couldn't read file type: " + file.type);
+            alert(`Couldn't read file type: ${file.type}`);
         }
 
         const that = this;
         reader.onload = readerEvent => {
-            var content = readerEvent.target.result; // this is the content!
+            const content = readerEvent.target.result; // this is the content!
 
             that.setState({
                 image: content,
-                name: file.name.split('.').slice(0, -1).join('.'),
+                name: file.name.split('.').slice(0, -1)
+                    .join('.'),
                 imageId: ++that.id,
                 imageFormat: type,
-                rotationCenterX: undefined,
-                rotationCenterY: undefined,
+                rotationCenterX: void 0,
+                rotationCenterY: void 0
             });
-       }
+        };
     }
     render () {
         return (
@@ -174,7 +176,8 @@ class Playground extends React.Component {
                     onUpdateName={this.handleUpdateName}
                     onUpdateImage={this.handleUpdateImage}
                 />
-                <button className={styles.playgroundButton}  onClick={this.uploadImage}>Upload</button>
+                {/* eslint-disable react/jsx-max-props-per-line, react/jsx-handler-names */}
+                <button className={styles.playgroundButton} onClick={this.uploadImage}>Upload</button>
                 <input id={styles.fileInput} type="file" name="name" onChange={this.onUploadImage} />
                 <button className={styles.playgroundButton} onClick={this.downloadImage}>Download</button>
             </div>
@@ -190,4 +193,4 @@ root.render(
             <Playground />
         </IntlProvider>
     </Provider>
-);
+);

package/src/playground/reducers/intl.js

@@ -1,5 +1,4 @@
-import {updateIntl as superUpdateIntl} from 'react-intl-redux';
-import {IntlProvider, intlReducer} from 'react-intl-redux';
+import {updateIntl as superUpdateIntl, IntlProvider, intlReducer} from 'react-intl-redux';
 
 import paintMessages from 'scratch-l10n/locales/paint-editor-msgs';
 

package/src/reducers/cursor.js

@@ -30,7 +30,7 @@ const reducer = function (state, action) {
 /**
  * Set the mouse cursor state to the given string
  * @param {string} cursorString The CSS cursor string.
- * @return {object} Redux action to change the cursor.
+ * @returns {object} Redux action to change the cursor.
  */
 const setCursor = function (cursorString) {
     return {

package/src/reducers/hover.js

@@ -24,7 +24,7 @@ const reducer = function (state, action) {
 /**
  * Set the hovered item state to the given item ID
  * @param {number} hoveredItemId The paper.Item ID of the hover indicator item.
- * @return {object} Redux action to change the hovered item.
+ * @returns {object} Redux action to change the hovered item.
  */
 const setHoveredItem = function (hoveredItemId) {
     return {

package/src/reducers/layout.js

@@ -22,7 +22,7 @@ const reducer = function (state, action) {
 /**
  * Change the layout to the new layout
  * @param {string} layout either 'ltr' or 'rtl'
- * @return {object} Redux action to change the selected items.
+ * @returns {object} Redux action to change the selected items.
  */
 const setLayout = function (layout) {
     return {

package/src/reducers/selected-items.js

@@ -33,7 +33,7 @@ const reducer = function (state, action) {
  * Set the selected item state to the given array of items
  * @param {Array<paper.Item>} selectedItems from paper.project.selectedItems
  * @param {?boolean} bitmapMode True if the items are being selected in bitmap mode
- * @return {object} Redux action to change the selected items.
+ * @returns {object} Redux action to change the selected items.
  */
 const setSelectedItems = function (selectedItems, bitmapMode) {
     return {

package/src/reducers/text-edit-target.js

@@ -25,7 +25,7 @@ const reducer = function (state, action) {
  * Set the currently-being-edited text field to the given item ID
  * @param {?number} textEditTargetId The paper.Item ID of the active text field.
  *     Leave empty if there is no text editing target.
- * @return {object} Redux action to change the text edit target.
+ * @returns {object} Redux action to change the text edit target.
  */
 const setTextEditTarget = function (textEditTargetId) {
     return {