scratch-paint 4.0.21 → 4.0.23

package/eslint.config.mjs

@@ -0,0 +1,61 @@
+import {eslintConfigScratch} from 'eslint-config-scratch';
+import {globalIgnores} from 'eslint/config';
+import globals from 'globals';
+
+export default eslintConfigScratch.defineConfig(
+    eslintConfigScratch.legacy.base,
+    {
+        files: [
+            '*.{js,cjs,mjs,ts}', // for example, webpack.config.js
+            'scripts/**/*.{js,cjs,mjs,ts}'
+        ],
+        extends: [eslintConfigScratch.legacy.node],
+        languageOptions: {
+            globals: globals.node
+        },
+        rules: {
+            'no-console': 'off'
+        }
+    },
+    {
+        files: ['{src,test}/**/*.{js,cjs,mjs,jsx,ts,tsx}'],
+        extends: [
+            eslintConfigScratch.legacy.es6,
+            eslintConfigScratch.legacy.react
+        ],
+        languageOptions: {
+            globals: globals.browser
+        },
+        rules: {
+            // BEGIN: these caused trouble after upgrading eslint-plugin-react from 7.24.0 to 7.33.2
+            'react/forbid-prop-types': 'warn',
+            'react/no-unknown-property': 'warn',
+            // END: these caused trouble after upgrading eslint-plugin-react from 7.24.0 to 7.33.2
+
+            // we should probably just fix these...
+            'react/no-deprecated': 'warn'
+        },
+        settings: {
+            react: {
+                version: 'detect'
+            }
+        }
+    },
+    {
+        files: ['test/**/*.{js,cjs,mjs,jsx,ts,tsx}'],
+        extends: [
+            eslintConfigScratch.legacy.es6
+        ],
+        languageOptions: {
+            globals: {
+                ...globals.jest,
+                ...globals.node
+            }
+        }
+    },
+    globalIgnores([
+        'dist/**',
+        'node_modules/**',
+        'playground/**'
+    ])
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "scratch-paint",
-  "version": "4.0.21",
+  "version": "4.0.23",
   "description": "Graphical User Interface for the Scratch 3.0 paint editor, which is used to make and edit sprites for use in projects.",
   "main": "./dist/scratch-paint.js",
   "browser": "./src/index.js",
@@ -9,7 +9,7 @@
     "clean": "rimraf ./dist && mkdirp dist && rimraf ./playground && mkdirp playground",
     "i18n:push": "tx-push-src scratch-editor paint-editor ./translations/en.json",
     "i18n:src": "rimraf ./translations/messages && babel src > tmp.js && rimraf tmp.js && ./scripts/build-i18n-source.js ./translations/messages/ ./translations/",
-    "lint": "eslint . --ext .js,.jsx",
+    "lint": "eslint",
     "start": "webpack-dev-server",
     "test": "npm run unit",
     "unit": "jest --reporters=default",
@@ -55,18 +55,16 @@
     "@commitlint/config-conventional": "17.8.1",
     "@testing-library/react": "8.0.9",
     "autoprefixer": "9.8.8",
-    "babel-eslint": "10.1.0",
     "babel-jest": "29.7.0",
     "babel-loader": "8.4.1",
     "babel-plugin-react-intl": "3.5.1",
     "babel-plugin-transform-object-rest-spread": "6.26.0",
     "canvas": "2.11.2",
     "css-loader": "3.6.0",
-    "eslint": "8.57.1",
-    "eslint-config-scratch": "9.0.9",
-    "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-react": "7.37.5",
+    "eslint": "^9.38.0",
+    "eslint-config-scratch": "^12.0.13",
     "gh-pages": "3.2.3",
+    "globals": "^16.4.0",
     "html-webpack-plugin": "3.2.0",
     "husky": "8.0.3",
     "jest": "27.5.1",
@@ -83,7 +81,7 @@
     "redux-throttle": "0.1.1",
     "regenerator-runtime": "0.13.9",
     "rimraf": "2.7.1",
-    "scratch-l10n": "5.0.309",
+    "scratch-l10n": "6.0.69",
     "scratch-semantic-release-config": "4.0.0",
     "semantic-release": "19.0.5",
     "style-loader": "1.3.0",

package/scripts/build-i18n-source.js

@@ -31,7 +31,7 @@ let defaultMessages = glob.sync(MESSAGES_PATTERN)
     .map((file) => JSON.parse(file))
     .reduce((collection, descriptors) => {
         descriptors.forEach(({id, defaultMessage, description}) => {
-            if (collection.hasOwnProperty(id)) {
+            if (Object.prototype.hasOwnProperty.call(collection, id)) {
                 throw new Error(`Duplicate message id: ${id}`);
             }
 

package/src/components/paint-editor/paint-editor.jsx

@@ -133,7 +133,7 @@ const PaintEditorComponent = props => {
 
             <div className={styles.topAlignRow}>
                 {/* Modes */}
-                {props.canvas !== null && isVector(props.format) ? ( // eslint-disable-line no-negated-condition
+                {props.canvas !== null && isVector(props.format) ? (
                     <div className={styles.modeSelector}>
                         <SelectMode
                             onUpdateImage={props.onUpdateImage}
@@ -166,7 +166,7 @@ const PaintEditorComponent = props => {
                     </div>
                 ) : null}
 
-                {props.canvas !== null && isBitmap(props.format) ? ( // eslint-disable-line no-negated-condition
+                {props.canvas !== null && isBitmap(props.format) ? (
                     <div className={styles.modeSelector}>
                         <BitBrushMode
                             onUpdateImage={props.onUpdateImage}

package/src/containers/mode-tools.jsx

@@ -97,7 +97,7 @@ class ModeTools extends React.Component {
                 // Point is end point
                 // Direction is average of normal at the point and direction to prev point, using the
                 // normal that points out from the convex side
-                // Lenth is curve length * HANDLE_RATIO
+                // Length is curve length * HANDLE_RATIO
                 const convexity = prev.getCurve().getCurvatureAtTime(.5) < 0 ? -1 : 1;
                 point.handleIn = (prev.getCurve().getNormalAtTime(1)
                     .multiply(convexity)
@@ -108,7 +108,7 @@ class ModeTools extends React.Component {
                 // Point is start point
                 // Direction is average of normal at the point and direction to prev point, using the
                 // normal that points out from the convex side
-                // Lenth is curve length * HANDLE_RATIO
+                // Length is curve length * HANDLE_RATIO
                 const convexity = point.getCurve().getCurvatureAtTime(.5) < 0 ? -1 : 1;
                 point.handleOut = (point.getCurve().getNormalAtTime(0)
                     .multiply(convexity)
@@ -236,7 +236,7 @@ ModeTools.propTypes = {
     onUpdateImage: PropTypes.func.isRequired,
     // Listen on selected items to update hasSelectedPoints
     selectedItems:
-        PropTypes.arrayOf(PropTypes.instanceOf(paper.Item)), // eslint-disable-line react/no-unused-prop-types
+        PropTypes.arrayOf(PropTypes.instanceOf(paper.Item)),
     setSelectedItems: PropTypes.func.isRequired
 };
 

package/src/helper/bit-tools/brush-tool.js

@@ -7,7 +7,7 @@ import {forEachLinePoint, getBrushMark} from '../bitmap';
  */
 class BrushTool extends paper.Tool {
     /**
-     * @param {!function} onUpdateImage A callback to call when the image visibly changes
+     * @param {!Function} onUpdateImage A callback to call when the image visibly changes
      * @param {boolean} isEraser True if brush should erase
      */
     constructor (onUpdateImage, isEraser) {

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

@@ -10,7 +10,7 @@ const TRANSPARENT = 'rgba(0,0,0,0)';
  */
 class FillTool extends paper.Tool {
     /**
-     * @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) {
         super();

package/src/helper/bit-tools/line-tool.js

@@ -8,12 +8,12 @@ import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT} from '../view';
  */
 class LineTool extends paper.Tool {
     /**
-     * @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) {
         super();
         this.onUpdateImage = onUpdateImage;
-        
+
         // We have to set these functions instead of just declaring them because
         // paper.js tools hook up the listeners in the setter functions.
         this.onMouseMove = this.handleMouseMove;
@@ -97,7 +97,7 @@ class LineTool extends paper.Tool {
     }
     handleMouseUp (event) {
         if (event.event.button > 0 || !this.active) return; // only first mouse button
-        
+
         this.drawTarget.remove();
         this.drawTarget = getRaster();
         forEachLinePoint(this.startPoint, event.point, this.draw.bind(this));

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

@@ -19,7 +19,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/bit-tools/rect-tool.js

@@ -19,7 +19,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/bit-tools/select-tool.js

@@ -24,7 +24,7 @@ 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} onUpdateImage A callback to call when the image visibly changes
      */
     constructor (setSelectedItems, clearSelectedItems, setCursor, onUpdateImage) {
         super();
@@ -71,7 +71,7 @@ class SelectTool extends paper.Tool {
     }
     /**
      * Returns the hit options to use when conducting hit tests.
-     * @return {object} See paper.Item.hitTest for definition of options
+     * @returns {object} See paper.Item.hitTest for definition of options
      */
     getHitOptions () {
         // Tolerance needs to be scaled when the view is zoomed in in order to represent the same

package/src/helper/bitmap.js

@@ -38,7 +38,7 @@ const forEachLinePoint = function (point1, point2, callback) {
  * @param {!number} a Coefficient in ax^2 + bx + c = 0
  * @param {!number} b Coefficient in ax^2 + bx + c = 0
  * @param {!number} c Coefficient in ax^2 + bx + c = 0
- * @return {Array<number>} Array of 2 solutions, with the larger solution first
+ * @returns {Array<number>} Array of 2 solutions, with the larger solution first
  */
 const solveQuadratic_ = function (a, b, c) {
     const soln1 = (-b + Math.sqrt((b * b) - (4 * a * c))) / 2 / a;
@@ -54,10 +54,10 @@ const solveQuadratic_ = function (a, b, c) {
  * @param {!number} options.radiusY minor radius of ellipse
  * @param {!number} options.shearSlope slope of the sheared x axis
  * @param {?boolean} options.isFilled true if isFilled
- * @param {?function} options.drawFn The function called on each point in the outline, used only
+ * @param {?Function} options.drawFn The function called on each point in the outline, used only
  *     if isFilled is false.
  * @param {!CanvasRenderingContext2D} context for drawing
- * @return {boolean} true if anything was drawn, false if not
+ * @returns {boolean} true if anything was drawn, false if not
  */
 const drawShearedEllipse_ = function (options, context) {
     const centerX = ~~options.centerX;
@@ -83,8 +83,8 @@ const drawShearedEllipse_ = function (options, context) {
     /**
      * Vertical stepping portion of ellipse drawing algorithm
      * @param {!number} startY y to start drawing from
-     * @param {!function} conditionFn function which should become true when we should stop stepping
-     * @return {object} last point drawn to the canvas, or null if no points drawn
+     * @param {!Function} conditionFn function which should become true when we should stop stepping
+     * @returns {object} last point drawn to the canvas, or null if no points drawn
      */
     const drawEllipseStepVertical_ = function (startY, conditionFn) {
         // Points on the ellipse
@@ -114,8 +114,8 @@ const drawShearedEllipse_ = function (options, context) {
     /**
      * Horizontal stepping portion of ellipse drawing algorithm
      * @param {!number} startX x to start drawing from
-     * @param {!function} conditionFn function which should become false when we should stop stepping
-     * @return {object} last point drawn to the canvas, or null if no points drawn
+     * @param {!Function} conditionFn function which should become false when we should stop stepping
+     * @returns {object} last point drawn to the canvas, or null if no points drawn
      */
     const drawEllipseStepHorizontal_ = function (startX, conditionFn) {
         // Points on the ellipse
@@ -198,7 +198,7 @@ const drawShearedEllipse_ = function (options, context) {
  * @param {!number} size The diameter of the brush
  * @param {!string} color The css color of the brush
  * @param {?boolean} isEraser True if we want the brush mark for the eraser
- * @return {HTMLCanvasElement} a canvas with the brush mark printed on it
+ * @returns {HTMLCanvasElement} a canvas with the brush mark printed on it
  */
 const getBrushMark = function (size, color, isEraser) {
     size = ~~size;
@@ -251,7 +251,6 @@ const getBrushMark = function (size, color, isEraser) {
  * Draw an ellipse, given the original axis-aligned radii and
  * an affine transformation. Returns false if the ellipse could
  * not be drawn; for instance, the matrix is non-invertible.
- *
  * @param {!options} options Parameters for the ellipse
  * @param {!paper.Point} options.position Center of ellipse
  * @param {!number} options.radiusX x-aligned radius of ellipse
@@ -260,7 +259,7 @@ const getBrushMark = function (size, color, isEraser) {
  * @param {?boolean} options.isFilled true if isFilled
  * @param {?number} options.thickness Thickness of outline, used only if isFilled is false.
  * @param {!CanvasRenderingContext2D} context for drawing
- * @return {boolean} true if anything was drawn, false if not
+ * @returns {boolean} true if anything was drawn, false if not
  */
 const drawEllipse = function (options, context) {
     const positionX = options.position.x;
@@ -508,7 +507,6 @@ const colorPixel_ = function (x, y, imageData, newColor) {
 /**
  * Flood fill beginning at the given point.
  * Based on http://www.williammalone.com/articles/html5-canvas-javascript-paint-bucket-tool/
- *
  * @param {!int} x The x coordinate on the context at which to begin
  * @param {!int} y The y coordinate on the context at which to begin
  * @param {!ImageData} sourceImageData The image data to sample from. This is edited by the function.
@@ -555,7 +553,7 @@ const floodFillInternal_ = function (x, y, sourceImageData, destImageData, newCo
 /**
  * Given a fill style string, get the color
  * @param {string} fillStyleString the fill style
- * @return {Array<int>} Color, a length 4 array
+ * @returns {Array<int>} Color, a length 4 array
  */
 const fillStyleToColor_ = function (fillStyleString) {
     const tmpCanvas = document.createElement('canvas');
@@ -575,7 +573,7 @@ const fillStyleToColor_ = function (fillStyleString) {
  * @param {!HTMLCanvas2DContext} sourceContext The context from which to sample to determine where to flood fill
  * @param {!HTMLCanvas2DContext} destContext The context to which to draw. May match sourceContext. Should match
  *     the size of sourceContext.
- * @return {boolean} True if image changed, false otherwise
+ * @returns {boolean} True if image changed, false otherwise
  */
 const floodFill = function (x, y, color, sourceContext, destContext) {
     x = ~~x;
@@ -609,7 +607,7 @@ const floodFill = function (x, y, color, sourceContext, destContext) {
  * @param {!string} color A color string, which would go into context.fillStyle
  * @param {!HTMLCanvas2DContext} sourceContext The context from which to sample to determine where to flood fill
  * @param {!HTMLCanvas2DContext} destContext The context to which to draw. May match sourceContext. Should match
- * @return {boolean} True if image changed, false otherwise
+ * @returns {boolean} True if image changed, false otherwise
  */
 const floodFillAll = function (x, y, color, sourceContext, destContext) {
     x = ~~x;
@@ -887,7 +885,7 @@ const _paperColorToCanvasStyle = function (color, context) {
 /**
  * @param {paper.Shape.Ellipse} oval Vector oval to convert
  * @param {paper.Raster} bitmap raster to draw selection
- * @return {bool} true if the oval was drawn
+ * @returns {bool} true if the oval was drawn
  */
 const commitOvalToBitmap = function (oval, bitmap) {
     const radiusX = Math.abs(oval.size.width / 2);

package/src/helper/blob-tools/broad-brush-helper.js

@@ -10,7 +10,6 @@ import log from '../../log/log';
  * Broad brush draws strokes by drawing points equidistant from the mouse event, perpendicular to the
  * direction of motion. Shortcomings are that this path can cross itself, and 180 degree turns result
  * in a flat edge.
- *
  * @param {!Tool} tool paper.js mouse object
  */
 class BroadBrushHelper {
@@ -180,7 +179,7 @@ class BroadBrushHelper {
      * Like paper.Path.unite, but it removes the original 2 paths
      * @param {paper.Path} path1 to merge
      * @param {paper.Path} path2 to merge
-     * @return {paper.Path} merged path. Original paths 1 and 2 will be removed from the view.
+     * @returns {paper.Path} merged path. Original paths 1 and 2 will be removed from the view.
      */
     union (path1, path2) {
         const temp = path1.unite(path2);

package/src/helper/blob-tools/segment-brush-helper.js

@@ -11,7 +11,6 @@ import {styleBlob} from '../../helper/style-path';
  * worse, especially as the number of segments to join increase, and that there are problems in paper.js
  * with union on shapes with curves, so that chunks of the union tend to disappear.
  * (https://github.com/paperjs/paper.js/issues/1321)
- *
  * @param {!Tool} tool paper.js mouse object
  */
 class SegmentBrushHelper {
@@ -25,7 +24,7 @@ class SegmentBrushHelper {
 
         tool.minDistance = 2 / paper.view.zoom;
         tool.maxDistance = options.brushSize;
-        
+
         this.firstCircle = new paper.Path.Circle({
             center: event.point,
             radius: options.brushSize / 2
@@ -34,7 +33,7 @@ class SegmentBrushHelper {
         styleBlob(this.finalPath, options);
         this.lastPoint = event.point;
     }
-    
+
     onSegmentMouseDrag (event, tool, options) {
         if (event.event.button > 0) return; // only first mouse button
 
@@ -44,7 +43,7 @@ class SegmentBrushHelper {
         handleVec.angle += 90;
 
         const path = new paper.Path();
-        
+
         styleBlob(path, options);
 
         // Add handles to round the end caps
@@ -63,7 +62,7 @@ class SegmentBrushHelper {
         // The unite function on curved paths does not always work (sometimes deletes half the path)
         // so we have to flatten.
         path.flatten(Math.min(5, options.brushSize / 5));
-        
+
         this.lastPoint = event.point;
         const newPath = this.finalPath.unite(path);
         path.remove();

package/src/helper/group.js

@@ -9,10 +9,10 @@ const isGroup = function (item) {
 /**
  * Groups the given items. Other things are then deselected and the new group is selected.
  * @param {!Array<paper.Item>} items Root level items to group
- * @param {!function} clearSelectedItems Function to clear Redux state's selected items
- * @param {!function} setSelectedItems Function to set Redux state with new list of selected items
- * @param {!function} onUpdateImage Function to let listeners know that SVG has changed.
- * @return {paper.Group} the group if one is created, otherwise false.
+ * @param {!Function} clearSelectedItems Function to clear Redux state's selected items
+ * @param {!Function} setSelectedItems Function to set Redux state with new list of selected items
+ * @param {!Function} onUpdateImage Function to let listeners know that SVG has changed.
+ * @returns {paper.Group} the group if one is created, otherwise false.
  */
 const groupItems = function (items, clearSelectedItems, setSelectedItems, onUpdateImage) {
     if (items.length > 0) {
@@ -31,10 +31,10 @@ const groupItems = function (items, clearSelectedItems, setSelectedItems, onUpda
 
 /**
  * Groups the selected items. Other things are then deselected and the new group is selected.
- * @param {!function} clearSelectedItems Function to clear Redux state's selected items
- * @param {!function} setSelectedItems Function to set Redux state with new list of selected items
- * @param {!function} onUpdateImage Function to let listeners know that SVG has changed.
- * @return {paper.Group} the group if one is created, otherwise false.
+ * @param {!Function} clearSelectedItems Function to clear Redux state's selected items
+ * @param {!Function} setSelectedItems Function to set Redux state with new list of selected items
+ * @param {!Function} onUpdateImage Function to let listeners know that SVG has changed.
+ * @returns {paper.Group} the group if one is created, otherwise false.
  */
 const groupSelection = function (clearSelectedItems, setSelectedItems, onUpdateImage) {
     const items = getSelectedRootItems();
@@ -44,7 +44,7 @@ const groupSelection = function (clearSelectedItems, setSelectedItems, onUpdateI
 const _ungroupLoop = function (group, recursive, setSelectedItems) {
     // Can't ungroup items that are not groups
     if (!group || !group.children || !isGroup(group)) return;
-            
+
     group.applyMatrix = true;
     // iterate over group children recursively
     for (let i = 0; i < group.children.length; i++) {
@@ -74,10 +74,9 @@ const _ungroupLoop = function (group, recursive, setSelectedItems) {
  * onUpdateImage is called to notify listeners of a change on the SVG only if onUpdateImage is passed in.
  * The reason these arguments are optional on ungroupItems is because ungroupItems is used for parts of
  * SVG import, which shouldn't change the selection or undo state.
- *
  * @param {!Array<paper.Item>} items Items to ungroup if they are groups
- * @param {?function} setSelectedItems Function to set Redux state with new list of selected items
- * @param {?function} onUpdateImage Function to let listeners know that SVG has changed.
+ * @param {?Function} setSelectedItems Function to set Redux state with new list of selected items
+ * @param {?Function} onUpdateImage Function to let listeners know that SVG has changed.
  */
 const ungroupItems = function (items, setSelectedItems, onUpdateImage) {
     if (items.length === 0) {
@@ -111,10 +110,9 @@ const ungroupItems = function (items, setSelectedItems, onUpdateImage) {
 
 /**
  * Ungroups the selected items. Other items are deselected and the ungrouped items are selected.
- *
- * @param {!function} clearSelectedItems Function to clear Redux state's selected items
- * @param {!function} setSelectedItems Function to set Redux state with new list of selected items
- * @param {!function} onUpdateImage Function to let listeners know that SVG has changed.
+ * @param {!Function} clearSelectedItems Function to clear Redux state's selected items
+ * @param {!Function} setSelectedItems Function to set Redux state with new list of selected items
+ * @param {!Function} onUpdateImage Function to let listeners know that SVG has changed.
  */
 const ungroupSelection = function (clearSelectedItems, setSelectedItems, onUpdateImage) {
     const items = getSelectedRootItems();

package/src/helper/hover.js

@@ -9,7 +9,7 @@ import {sortItemsByZIndex} from './math';
  * @param {?object} hitOptions hit options to use
  * @param {?boolean} subselect Whether items within groups can be hovered. If false, the
  *    entire group should be hovered.
- * @return {paper.Item} the hovered item or null if there is none
+ * @returns {paper.Item} the hovered item or null if there is none
  */
 const getHoveredItem = function (event, hitOptions, subselect) {
     const oldMatch = hitOptions.match;

package/src/helper/layer.js

@@ -24,7 +24,7 @@ const _getPaintingLayer = function () {
  * Creates a canvas with width and height matching the art board size.
  * @param {?number} width Width of the canvas. Defaults to ART_BOARD_WIDTH.
  * @param {?number} height Height of the canvas. Defaults to ART_BOARD_HEIGHT.
- * @return {HTMLCanvasElement} the canvas
+ * @returns {HTMLCanvasElement} the canvas
  */
 const createCanvas = function (width, height) {
     const canvas = document.createElement('canvas');
@@ -37,7 +37,7 @@ const createCanvas = function (width, height) {
 const clearRaster = function () {
     const layer = _getLayer('isRasterLayer');
     layer.removeChildren();
-    
+
     // Generate blank raster
     const raster = new paper.Raster(createCanvas());
     raster.canvas.getContext('2d').imageSmoothingEnabled = false;
@@ -101,7 +101,7 @@ const setGuideItem = function (item) {
 /**
  * Removes the guide layers, e.g. for purposes of exporting the image. Must call showGuideLayers to re-add them.
  * @param {boolean} includeRaster true if the raster layer should also be hidden
- * @return {object} an object of the removed layers, which should be passed to showGuideLayers to re-add them.
+ * @returns {object} an object of the removed layers, which should be passed to showGuideLayers to re-add them.
  */
 const hideGuideLayers = function (includeRaster) {
     const backgroundGuideLayer = getBackgroundGuideLayer();
@@ -288,7 +288,7 @@ const _makeOutlineLayer = function () {
 const _makeBackgroundGuideLayer = function (format) {
     const guideLayer = new paper.Layer();
     guideLayer.locked = true;
-    
+
     const vWorkspaceBounds = new paper.Shape.Rectangle(MAX_WORKSPACE_BOUNDS);
     vWorkspaceBounds.fillColor = '#ECF1F9';
     vWorkspaceBounds.position = CENTER;
@@ -319,7 +319,7 @@ const _makeBackgroundGuideLayer = function (format) {
     guideLayer.bitmapBackground = bitmapBackground;
 
     _convertLayer(guideLayer, format);
-    
+
     _makeCrosshair(0.16, guideLayer);
 
     guideLayer.data.isBackgroundGuideLayer = true;

package/src/helper/math.js

@@ -137,7 +137,7 @@ const scaleWithStrokes = function (root, factor, pivot) {
  * for shapes like circles ("square ovals"), which fill the same dimensions.)
  * @param {!paper.Point} startPos The point where the user started dragging
  * @param {!paper.Point} eventPoint The point where the user has currently dragged to
- * @return {object} Information about the size and position of how the square should be drawn
+ * @returns {object} Information about the size and position of how the square should be drawn
  */
 const getSquareDimensions = function (startPos, eventPoint) {
     // These variables are used for determining the relative quadrant that the shape will appear in.

package/src/helper/selection-tools/bounding-box-tool.js

@@ -30,7 +30,7 @@ const BoundingBoxModes = keyMirror({
  * On mouse down, the type of function (move, scale, rotate) is determined based on what is clicked
  * (scale handle, rotate handle, the object itself). This determines the mode of the tool, which then
  * delegates actions to the MoveTool, RotateTool or ScaleTool accordingly.
- * @param {!function} onUpdateImage A callback to call when the image visibly changes
+ * @param {!Function} onUpdateImage A callback to call when the image visibly changes
  */
 class BoundingBoxTool {
     /**
@@ -38,8 +38,8 @@ class BoundingBoxTool {
      * @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 (mode, setSelectedItems, clearSelectedItems, setCursor, onUpdateImage, switchToTextTool) {
         this.dispatchSetCursor = setCursor;
@@ -72,10 +72,10 @@ class BoundingBoxTool {
      * @param {!MouseEvent} event The mouse event
      * @param {boolean} clone Whether to clone on mouse down (e.g. alt key held)
      * @param {boolean} multiselect Whether to multiselect on mouse down (e.g. shift key held)
-     * @param {?boolean} doubleClicked True if this is the second click in a short amout of time
+     * @param {?boolean} doubleClicked True if this is the second click in a short amount of time
      * @param {paper.hitOptions} hitOptions The options with which to detect whether mouse down has hit
      *     anything editable
-     * @return {boolean} True if there was a hit, false otherwise
+     * @returns {boolean} True if there was a hit, false otherwise
      */
     onMouseDown (event, clone, multiselect, doubleClicked, hitOptions) {
         if (event.event.button > 0) return; // only first mouse button

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

@@ -5,7 +5,7 @@ class HandleTool {
     /**
      * @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) {
         this.hitType = null;
@@ -23,7 +23,7 @@ class HandleTool {
         if (!hitProperties.multiselect) {
             clearSelection(this.clearSelectedItems);
         }
-        
+
         hitProperties.hitResult.segment.handleIn.selected = true;
         hitProperties.hitResult.segment.handleOut.selected = true;
         this.hitType = hitProperties.hitResult.type;

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

@@ -21,8 +21,8 @@ class MoveTool {
      * @param {Modes} mode Paint editor mode
      * @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 (mode, setSelectedItems, clearSelectedItems, onUpdateImage, switchToTextTool) {
         this.mode = mode;
@@ -41,7 +41,7 @@ class MoveTool {
      * @param {!paper.HitResult} hitProperties.hitResult Data about the location of the mouse click
      * @param {?boolean} hitProperties.clone Whether to clone on mouse down (e.g. alt key held)
      * @param {?boolean} hitProperties.multiselect Whether to multiselect on mouse down (e.g. shift key held)
-     * @param {?boolean} hitProperties.doubleClicked True if this is the second click in a short amout of time
+     * @param {?boolean} hitProperties.doubleClicked True if this is the second click in a short amount of time
      * @param {?boolean} hitProperties.subselect True if we allow selection of subgroups, false if we should
      *     select the whole group.
      */

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

@@ -13,7 +13,7 @@ class NudgeTool {
     /**
      * @param {Mode} mode Paint editor mode
      * @param {function} boundingBoxTool to control the bounding box
-     * @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, boundingBoxTool, onUpdateImage) {
         this.boundingBoxTool = boundingBoxTool;
@@ -31,7 +31,7 @@ class NudgeTool {
 
         const selected = getSelectedRootItems();
         if (selected.length === 0) return;
-        
+
         // Get bounds. Don't let item bounds go out of bounds.
         let rect;
         for (const item of selected) {