scratch-paint 0.2.0 → 1.0.2

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "scratch-paint",
-  "version": "0.2.0",
+  "version": "1.0.2",
   "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",
   "scripts": {
     "build": "npm run clean && webpack --progress --colors --bail",
     "clean": "rimraf ./dist && mkdirp dist && rimraf ./playground && mkdirp playground",
-    "deploy": "touch playground/.nojekyll && gh-pages -t -d playground -m \"Build for $(git log --pretty=format:%H -n1)\"",
+    "deploy": "touch playground/.nojekyll && gh-pages -t -d playground -m \"[skip ci] Build for $(git log --pretty=format:%H -n1)\"",
     "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",
+    "prepare": "husky install",
     "start": "webpack-dev-server",
     "test": "npm run lint && npm run unit && NODE_ENV=production npm run build",
-    "unit": "jest",
+    "unit": "jest --reporters=default",
     "watch": "webpack --progress --colors --watch"
   },
   "author": "Massachusetts Institute of Technology",
@@ -21,7 +22,7 @@
   "homepage": "https://github.com/LLK/scratch-paint#readme",
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@github.com/LLK/scratch-paint.git"
+    "url": "https://github.com/LLK/scratch-paint.git"
   },
   "dependencies": {
     "@scratch/paper": "0.11.20200728195508",
@@ -31,8 +32,7 @@
     "lodash.omit": "4.5.0",
     "minilog": "3.1.0",
     "parse-color": "1.0.0",
-    "prop-types": "^15.5.10",
-    "scratch-svg-renderer": "0.2.0-prerelease.20200610220938"
+    "prop-types": "^15.5.10"
   },
   "peerDependencies": {
     "react": "^16",
@@ -44,37 +44,42 @@
     "react-responsive": "^4",
     "react-style-proptype": "^3",
     "react-tooltip": "^3",
-    "redux": "^3"
+    "redux": "^3",
+    "scratch-render-fonts": "^1.0.0-prerelease.20210401210003"
   },
   "devDependencies": {
+    "@commitlint/cli": "17.0.3",
+    "@commitlint/config-conventional": "17.0.3",
     "autoprefixer": "9.7.4",
     "babel-cli": "6.26.0",
-    "babel-core": "^6.23.1",
-    "babel-eslint": "^8.2.1",
-    "babel-jest": "^23.0.1",
-    "babel-loader": "^7.1.4",
+    "babel-core": "6.26.3",
+    "babel-eslint": "10.1.0",
+    "babel-jest": "23.6.0",
+    "babel-loader": "7.1.5",
     "babel-plugin-react-intl": "3.0.1",
-    "babel-plugin-transform-object-rest-spread": "^6.22.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.22.0",
+    "babel-plugin-transform-object-rest-spread": "6.26.0",
+    "babel-preset-env": "1.7.0",
+    "babel-preset-react": "6.24.1",
     "css-loader": "3.4.0",
-    "enzyme": "^3.6.0",
-    "enzyme-adapter-react-16": "^1.5.0",
-    "eslint": "^4.4.1",
-    "eslint-config-import": "^0.13.0",
-    "eslint-config-scratch": "^5.0.0",
-    "eslint-plugin-import": "^2.18.2",
+    "enzyme": "3.11.0",
+    "enzyme-adapter-react-16": "1.15.6",
+    "eslint": "7.32.0",
+    "eslint-config-scratch": "7.0.0",
+    "eslint-plugin-import": "2.26.0",
     "eslint-plugin-react": "7.20.3",
-    "gh-pages": "github:rschamp/gh-pages#publish-branch-to-subfolder",
+    "gh-pages": "3.2.3",
     "html-webpack-plugin": "3.2.0",
-    "jest": "^22.2.2",
-    "jest-canvas-mock": "^2.2.0",
+    "husky": "8.0.1",
+    "jest": "22.4.4",
+    "jest-canvas-mock": "2.3.1",
+    "jest-junit": "13.0.0",
+    "json": "9.0.6",
     "lodash.defaultsdeep": "4.6.1",
-    "mkdirp": "^1.0.3",
-    "postcss-import": "^12.0.0",
-    "postcss-loader": "^3.0.0",
-    "postcss-simple-vars": "^5.0.1",
-    "raf": "^3.4.0",
+    "mkdirp": "1.0.4",
+    "postcss-import": "12.0.1",
+    "postcss-loader": "3.0.0",
+    "postcss-simple-vars": "5.0.2",
+    "raf": "3.4.1",
     "react": "16.2.0",
     "react-dom": "16.4.0",
     "react-intl": "2.9.0",
@@ -83,22 +88,29 @@
     "react-redux": "5.1.0",
     "react-responsive": "4.1.0",
     "react-style-proptype": "3.2.2",
-    "react-test-renderer": "^16.0.0",
+    "react-test-renderer": "16.5.1",
     "react-tooltip": "3.8.4",
     "redux": "3.7.2",
-    "redux-mock-store": "^1.2.3",
+    "redux-mock-store": "1.5.4",
     "redux-throttle": "0.1.1",
-    "regenerator-runtime": "^0.13.3",
-    "rimraf": "^2.6.1",
-    "scratch-l10n": "3.1.20181129221712",
-    "style-loader": "^1.0.0",
-    "svg-url-loader": "^3.0.0",
-    "tap": "^14.4.3",
-    "uglifyjs-webpack-plugin": "^2.0.1",
-    "url-loader": "^2.1.0",
-    "webpack": "^4.8.0",
-    "webpack-cli": "^3.1.0",
-    "webpack-dev-server": "^3.1.9"
+    "regenerator-runtime": "0.13.9",
+    "rimraf": "2.7.1",
+    "scratch-l10n": "3.14.20220826031556",
+    "scratch-render-fonts": "1.0.0-prerelease.20210401210003",
+    "scratch-semantic-release-config": "1.0.4",
+    "style-loader": "1.3.0",
+    "svg-url-loader": "3.0.3",
+    "tap": "14.11.0",
+    "uglifyjs-webpack-plugin": "2.2.0",
+    "url-loader": "2.3.0",
+    "webpack": "4.46.0",
+    "webpack-cli": "3.3.12",
+    "webpack-dev-server": "3.11.2"
+  },
+  "config": {
+    "commitizen": {
+      "path": "cz-conventional-changelog"
+    }
   },
   "jest": {
     "setupFiles": [
@@ -111,5 +123,13 @@
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/__mocks__/fileMock.js",
       "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js"
     }
-  }
+  },
+  "jest-junit": {
+    "outputDirectory": "./test/results"
+  },
+  "browserslist": [
+    "last 3 versions",
+    "Safari >= 8",
+    "iOS >= 8"
+  ]
 }

package/release.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+    extends: 'scratch-semantic-release-config',
+    branches: [
+        {
+            name: 'develop'
+            // default channel
+        },
+        {
+            name: 'hotfix/*',
+            channel: 'hotfix'
+        }
+    ]
+};

package/renovate.json5

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+
+  "extends": [
+    "github>LLK/scratch-renovate-config:conservative"
+  ]
+}

package/src/.eslintrc.js

@@ -1,6 +1,8 @@
+/* eslint-disable import/no-commonjs */
 module.exports = {
+/* eslint-enable import/no-commonjs */
     root: true,
-    extends: ['scratch', 'scratch/es6', 'scratch/react', 'import'],
+    extends: ['scratch', 'scratch/es6', 'scratch/react', 'plugin:import/recommended'],
     env: {
         browser: true
     },

package/src/components/color-picker/color-picker.jsx

@@ -5,7 +5,7 @@ import {defineMessages, FormattedMessage, injectIntl, intlShape} from 'react-int
 import classNames from 'classnames';
 import parseColor from 'parse-color';
 
-import Slider from '../forms/slider.jsx';
+import Slider, {CONTAINER_WIDTH, HANDLE_WIDTH} from '../forms/slider.jsx';
 import LabeledIconButton from '../labeled-icon-button/labeled-icon-button.jsx';
 import styles from './color-picker.css';
 import GradientTypes from '../../lib/gradient-types';
@@ -53,6 +53,16 @@ class ColorPickerComponent extends React.Component {
                 throw new Error(`Unknown channel for color sliders: ${channel}`);
             }
         }
+
+        // The sliders are a rounded capsule shape, and the slider handles are circles. As a consequence, when the
+        // slider handle is fully to one side, its center is actually moved away from the start/end of the slider by
+        // the slider handle's radius, meaning that the effective range of the slider excludes the rounded caps.
+        // To compensate for this, position the first stop to where the rounded cap ends, and position the last stop
+        // to where the rounded cap begins.
+        const halfHandleWidth = HANDLE_WIDTH / 2;
+        stops[0] += ` 0 ${halfHandleWidth}px`;
+        stops[stops.length - 1] += ` ${CONTAINER_WIDTH - halfHandleWidth}px 100%`;
+
         return `linear-gradient(to left, ${stops.join(',')})`;
     }
     render () {

package/src/components/fixed-tools/fixed-tools.jsx

@@ -12,12 +12,11 @@ import Button from '../button/button.jsx';
 import ButtonGroup from '../button-group/button-group.jsx';
 import Dropdown from '../dropdown/dropdown.jsx';
 import {defineMessages, injectIntl, intlShape} from 'react-intl';
-import Formats from '../../lib/format';
+import Formats, {isVector} from '../../lib/format';
 import Input from '../forms/input.jsx';
 import InputGroup from '../input-group/input-group.jsx';
 import Label from '../forms/label.jsx';
 import LabeledIconButton from '../labeled-icon-button/labeled-icon-button.jsx';
-import {isVector} from '../../lib/format';
 import layout from '../../lib/layout-constants';
 import {hideLabel} from '../../lib/hide-label';
 import styles from './fixed-tools.css';

package/src/components/forms/slider.jsx

@@ -17,15 +17,21 @@ class SliderComponent extends React.Component {
             'handleMouseUp',
             'handleMouseMove',
             'handleClickBackground',
-            'setBackground'
+            'setBackground',
+            'setHandle'
         ]);
+
+        // Distance from the left edge of the slider handle to the mouse down/click event
+        this.handleClickOffset = 0;
     }
 
-    handleMouseDown () {
+    handleMouseDown (event) {
         document.addEventListener('mousemove', this.handleMouseMove);
         document.addEventListener('mouseup', this.handleMouseUp);
         document.addEventListener('touchmove', this.handleMouseMove, {passive: false});
         document.addEventListener('touchend', this.handleMouseUp);
+
+        this.handleClickOffset = getEventXY(event).x - this.handle.getBoundingClientRect().left;
     }
 
     handleMouseUp () {
@@ -41,20 +47,29 @@ class SliderComponent extends React.Component {
     }
 
     handleClickBackground (event) {
+        // Because the slider handle is a child of the "background" element this handler is registered to, it calls this
+        // when clicked as well. We only want to change the slider value if the user clicked on the background itself.
+        if (event.target !== this.background) return;
+        // Move slider handle's center to the cursor
+        this.handleClickOffset = HANDLE_WIDTH / 2;
         this.props.onChange(this.scaleMouseToSliderPosition(event));
     }
 
     scaleMouseToSliderPosition (event){
         const {x} = getEventXY(event);
         const backgroundBBox = this.background.getBoundingClientRect();
-        const scaledX = x - backgroundBBox.left;
-        return Math.max(0, Math.min(100, 100 * scaledX / backgroundBBox.width));
+        const scaledX = x - backgroundBBox.left - this.handleClickOffset;
+        return Math.max(0, Math.min(100, 100 * scaledX / (backgroundBBox.width - HANDLE_WIDTH)));
     }
 
     setBackground (ref) {
         this.background = ref;
     }
 
+    setHandle (ref) {
+        this.handle = ref;
+    }
+
     render () {
         const halfHandleWidth = HANDLE_WIDTH / 2;
         const pixelMin = halfHandleWidth;
@@ -76,6 +91,7 @@ class SliderComponent extends React.Component {
             >
                 <div
                     className={styles.handle}
+                    ref={this.setHandle}
                     style={{
                         left: `${handleOffset}px`
                     }}
@@ -99,3 +115,4 @@ SliderComponent.defaultProps = {
 };
 
 export default SliderComponent;
+export {CONTAINER_WIDTH, HANDLE_WIDTH};

package/src/components/mode-tools/mode-tools.jsx

@@ -17,8 +17,7 @@ import Input from '../forms/input.jsx';
 import InputGroup from '../input-group/input-group.jsx';
 import LabeledIconButton from '../labeled-icon-button/labeled-icon-button.jsx';
 import Modes from '../../lib/modes';
-import Formats from '../../lib/format';
-import {isBitmap, isVector} from '../../lib/format';
+import Formats, {isBitmap, isVector} from '../../lib/format';
 import {hideLabel} from '../../lib/hide-label';
 import styles from './mode-tools.css';
 

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

@@ -34,8 +34,7 @@ import StrokeColorIndicatorComponent from '../../containers/stroke-color-indicat
 import StrokeWidthIndicatorComponent from '../../containers/stroke-width-indicator.jsx';
 import TextMode from '../../containers/text-mode.jsx';
 
-import Formats from '../../lib/format';
-import {isBitmap, isVector} from '../../lib/format';
+import Formats, {isBitmap, isVector} from '../../lib/format';
 import styles from './paint-editor.css';
 
 import bitmapIcon from './icons/bitmap.svg';

package/src/containers/color-indicator.jsx

@@ -5,8 +5,7 @@ import parseColor from 'parse-color';
 import {injectIntl, intlShape} from 'react-intl';
 
 import {getSelectedLeafItems} from '../helper/selection';
-import Formats from '../lib/format';
-import {isBitmap} from '../lib/format';
+import Formats, {isBitmap} from '../lib/format';
 import GradientTypes from '../lib/gradient-types';
 
 import ColorIndicatorComponent from '../components/color-indicator.jsx';

package/src/containers/fixed-tools.jsx

@@ -15,8 +15,7 @@ import {getSelectedLeafItems} from '../helper/selection';
 import {bringToFront, sendBackward, sendToBack, bringForward} from '../helper/order';
 import {groupSelection, ungroupSelection} from '../helper/group';
 
-import Formats from '../lib/format';
-import {isBitmap} from '../lib/format';
+import Formats, {isBitmap} from '../lib/format';
 import bindAll from 'lodash.bindall';
 
 class FixedTools extends React.Component {

package/src/containers/line-mode.jsx

@@ -8,12 +8,11 @@ import ColorStyleProptype from '../lib/color-style-proptype';
 import {clearSelection} from '../helper/selection';
 import {endPointHit, touching} from '../helper/snapping';
 import {drawHitPoint, removeHitPoint} from '../helper/guides';
-import {styleShape} from '../helper/style-path';
+import {styleShape, MIXED} from '../helper/style-path';
 import {changeStrokeColor, clearStrokeGradient} from '../reducers/stroke-style';
 import {changeStrokeWidth} from '../reducers/stroke-width';
 import {changeMode} from '../reducers/modes';
 import {clearSelectedItems} from '../reducers/selected-items';
-import {MIXED} from '../helper/style-path';
 import {snapDeltaToAngle} from '../helper/math';
 
 import LineModeComponent from '../components/line-mode/line-mode.jsx';

package/src/containers/mode-tools.jsx

@@ -18,8 +18,7 @@ import {
 import {HANDLE_RATIO, ensureClockwise} from '../helper/math';
 import {getRaster} from '../helper/layer';
 import {flipBitmapHorizontal, flipBitmapVertical, selectAllBitmap} from '../helper/bitmap';
-import {isBitmap} from '../lib/format';
-import Formats from '../lib/format';
+import Formats, {isBitmap} from '../lib/format';
 import Modes from '../lib/modes';
 
 class ModeTools extends React.Component {

package/src/containers/paint-editor.jsx

@@ -23,10 +23,8 @@ import {convertToBitmap, convertToVector} from '../helper/bitmap';
 import {resetZoom, zoomOnSelection, OUTERMOST_ZOOM_LEVEL} from '../helper/view';
 import EyeDropperTool from '../helper/tools/eye-dropper';
 
-import Modes from '../lib/modes';
-import {BitmapModes, VectorModes} from '../lib/modes';
-import Formats from '../lib/format';
-import {isBitmap, isVector} from '../lib/format';
+import Modes, {BitmapModes, VectorModes} from '../lib/modes';
+import Formats, {isBitmap, isVector} from '../lib/format';
 import bindAll from 'lodash.bindall';
 
 /**
@@ -129,7 +127,7 @@ class PaintEditor extends React.Component {
         if (this.props.format === Formats.VECTOR && isBitmap(prevProps.format)) {
             convertToVector(this.props.clearSelectedItems, this.props.onUpdateImage);
         } else if (isVector(prevProps.format) && this.props.format === Formats.BITMAP) {
-            convertToBitmap(this.props.clearSelectedItems, this.props.onUpdateImage);
+            convertToBitmap(this.props.clearSelectedItems, this.props.onUpdateImage, this.props.fontInlineFn);
         }
     }
     componentWillUnmount () {
@@ -344,6 +342,7 @@ PaintEditor.propTypes = {
     changeMode: PropTypes.func.isRequired,
     clearSelectedItems: PropTypes.func.isRequired,
     format: PropTypes.oneOf(Object.keys(Formats)), // Internal, up-to-date data format
+    fontInlineFn: PropTypes.func,
     handleSwitchToBitmap: PropTypes.func.isRequired,
     handleSwitchToVector: PropTypes.func.isRequired,
     image: PropTypes.oneOfType([

package/src/containers/paper-canvas.jsx

@@ -11,8 +11,10 @@ import {undoSnapshot, clearUndoState} from '../reducers/undo';
 import {isGroup, ungroupItems} from '../helper/group';
 import {clearRaster, convertBackgroundGuideLayer, getRaster, setupLayers} from '../helper/layer';
 import {clearSelectedItems} from '../reducers/selected-items';
-import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT, CENTER, MAX_WORKSPACE_BOUNDS} from '../helper/view';
-import {clampViewBounds, resetZoom, setWorkspaceBounds, zoomToFit, resizeCrosshair} from '../helper/view';
+import {
+    ART_BOARD_WIDTH, ART_BOARD_HEIGHT, CENTER, MAX_WORKSPACE_BOUNDS,
+    clampViewBounds, resetZoom, setWorkspaceBounds, zoomToFit, resizeCrosshair
+} from '../helper/view';
 import {ensureClockwise, scaleWithStrokes} from '../helper/math';
 import {clearHoveredItem} from '../reducers/hover';
 import {clearPasteOffset} from '../reducers/clipboard';
@@ -195,6 +197,7 @@ class PaperCanvas extends React.Component {
         const paperCanvas = this;
         // Pre-process SVG to prevent parsing errors (discussion from #213)
         // 1. Remove svg: namespace on elements.
+        // TODO: remove
         svg = svg.split(/<\s*svg:/).join('<');
         svg = svg.split(/<\/\s*svg:/).join('</');
         // 2. Add root svg namespace if it does not exist.

package/src/containers/stroke-color-indicator.jsx

@@ -2,9 +2,8 @@ import {connect} from 'react-redux';
 import {defineMessages} from 'react-intl';
 
 import {changeColorIndex} from '../reducers/color-index';
-import {changeStrokeColor, changeStrokeColor2} from '../reducers/stroke-style';
+import {changeStrokeColor, changeStrokeColor2, changeStrokeGradientType} from '../reducers/stroke-style';
 import {changeStrokeWidth} from '../reducers/stroke-width';
-import {changeStrokeGradientType} from '../reducers/stroke-style';
 import {openStrokeColor, closeStrokeColor} from '../reducers/modals';
 import {getSelectedLeafItems} from '../helper/selection';
 import {setSelectedItems} from '../reducers/selected-items';

package/src/containers/stroke-width-indicator.jsx

@@ -7,12 +7,12 @@ import {changeStrokeColor, changeStrokeColor2, changeStrokeGradientType} from '.
 import {changeStrokeWidth} from '../reducers/stroke-width';
 import StrokeWidthIndicatorComponent from '../components/stroke-width-indicator.jsx';
 import {getSelectedLeafItems} from '../helper/selection';
-import {applyColorToSelection, applyStrokeWidthToSelection, getColorsFromSelection, MIXED}
-    from '../helper/style-path';
+import {
+    applyColorToSelection, applyStrokeWidthToSelection, getColorsFromSelection, MIXED
+} from '../helper/style-path';
 import GradientTypes from '../lib/gradient-types';
 import Modes from '../lib/modes';
-import Formats from '../lib/format';
-import {isBitmap} from '../lib/format';
+import Formats, {isBitmap} from '../lib/format';
 
 class StrokeWidthIndicator extends React.Component {
     constructor (props) {

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

@@ -1,7 +1,6 @@
 import paper from '@scratch/paper';
-import {getRaster} from '../layer';
+import {getRaster, getGuideLayer} from '../layer';
 import {forEachLinePoint, getBrushMark} from '../bitmap';
-import {getGuideLayer} from '../layer';
 
 /**
  * Tool for drawing with the bitmap brush and eraser

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

@@ -1,7 +1,6 @@
 import paper from '@scratch/paper';
-import {getRaster} from '../layer';
+import {getRaster, createCanvas, getGuideLayer} from '../layer';
 import {forEachLinePoint, getBrushMark} from '../bitmap';
-import {createCanvas, getGuideLayer} from '../layer';
 import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT} from '../view';
 
 /**

package/src/helper/bitmap.js

@@ -3,8 +3,8 @@ import {createCanvas, clearRaster, getRaster, hideGuideLayers, showGuideLayers}
 import {getGuideColor} from './guides';
 import {clearSelection} from './selection';
 import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT, CENTER, MAX_WORKSPACE_BOUNDS} from './view';
-import {inlineSvgFonts} from 'scratch-svg-renderer';
 import Formats from '../lib/format';
+import log from '../log/log';
 
 const forEachLinePoint = function (point1, point2, callback) {
     // Bresenham line algorithm
@@ -404,7 +404,7 @@ const getTrimmedRaster = function (shouldInsert) {
     return trimmedRaster;
 };
 
-const convertToBitmap = function (clearSelectedItems, onUpdateImage) {
+const convertToBitmap = function (clearSelectedItems, onUpdateImage, optFontInlineFn) {
     // @todo if the active layer contains only rasters, drawing them directly to the raster layer
     // would be more efficient.
 
@@ -424,7 +424,11 @@ const convertToBitmap = function (clearSelectedItems, onUpdateImage) {
     svg.setAttribute('shape-rendering', 'crispEdges');
 
     let svgString = (new XMLSerializer()).serializeToString(svg);
-    svgString = inlineSvgFonts(svgString);
+    if (optFontInlineFn) {
+        svgString = optFontInlineFn(svgString);
+    } else {
+        log.error('Fonts may be converted to bitmap incorrectly if fontInlineFn prop is not set on PaintEditor.');
+    }
 
     // Put anti-aliased SVG into image, and dump image back into canvas
     const img = new Image();

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

@@ -1,12 +1,12 @@
 import paper from '@scratch/paper';
-import Modes from '../../lib/modes';
-import {BitmapModes} from '../../lib/modes';
+import Modes, {BitmapModes} from '../../lib/modes';
 import {isGroup} from '../group';
 import {isCompoundPathItem, getRootItem} from '../item';
 import {checkPointsClose, snapDeltaToAngle} from '../math';
 import {getActionBounds, CENTER} from '../view';
-import {clearSelection, cloneSelection, getSelectedLeafItems, getSelectedRootItems, setItemSelection}
-    from '../selection';
+import {
+    clearSelection, cloneSelection, getSelectedLeafItems, getSelectedRootItems, setItemSelection
+} from '../selection';
 import {getDragCrosshairLayer, CROSSHAIR_FULL_OPACITY} from '../layer';
 
 /** Snap to align selection center to rotation center within this distance */
@@ -128,7 +128,7 @@ class MoveTool {
 
         point.x = Math.max(actionBounds.left, Math.min(point.x, actionBounds.right));
         point.y = Math.max(actionBounds.top, Math.min(point.y, actionBounds.bottom));
-        
+
         const dragVector = point.subtract(event.downPoint);
         let snapVector;
 
@@ -168,7 +168,7 @@ class MoveTool {
                 bounds = item.bounds;
             }
         }
-        
+
         if (this.firstDrag) {
             // Show the center crosshair above the selected item while dragging.
             getDragCrosshairLayer().visible = true;

package/src/helper/style-path.js

@@ -1,8 +1,7 @@
 import paper from '@scratch/paper';
-import {getSelectedLeafItems} from './selection';
+import {getSelectedLeafItems, getItems} from './selection';
 import {isPointTextItem} from './item';
 import {isGroup} from './group';
-import {getItems} from './selection';
 import GradientTypes from '../lib/gradient-types';
 import {DEFAULT_COLOR} from '../reducers/fill-style';
 import {isCompoundPathChild} from '../helper/compound-path';
@@ -634,8 +633,7 @@ const styleShape = function (path, options) {
             );
         }
     }
-
-    if (options.hasOwnProperty('strokeWidth')) path.strokeWidth = options.strokeWidth;
+    if (Object.prototype.hasOwnProperty.call(options, 'strokeWidth')) path.strokeWidth = options.strokeWidth;
 };
 
 export {

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

@@ -21,6 +21,7 @@ class FillTool extends paper.Tool {
 
         // 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;
         this.onMouseMove = this.handleMouseMove;
         this.onMouseUp = this.handleMouseUp;
 
@@ -91,7 +92,7 @@ class FillTool extends paper.Tool {
     setPrevHoveredItemId (prevHoveredItemId) {
         this.prevHoveredItemId = prevHoveredItemId;
     }
-    handleMouseMove (event) {
+    updateFillPreview (event) {
         const hoveredItem = getHoveredItem(event, this.getHitOptions(), true /* subselect */);
         if ((!hoveredItem && this.prevHoveredItemId) || // There is no longer a hovered item
                 (hoveredItem && !this.prevHoveredItemId) || // There is now a hovered item
@@ -152,6 +153,15 @@ class FillTool extends paper.Tool {
             this._setFillItemColor(this.fillColor, this.fillColor2, this.gradientType, event.point);
         }
     }
+    handleMouseDown (event) {
+        // on touch, the user might touch-and-hold to preview what the fill tool would do
+        // if they don't move their finger at all after the "mouse down" event
+        // then this might be our only chance to give them a good preview
+        this.updateFillPreview(event);
+    }
+    handleMouseMove (event) {
+        this.updateFillPreview(event);
+    }
     handleMouseUp (event) {
         if (event.event.button > 0) return; // only first mouse button
         if (this.fillItem) {

package/src/helper/undo.js

@@ -3,8 +3,7 @@
 import paper from '@scratch/paper';
 import {hideGuideLayers, showGuideLayers, getRaster} from '../helper/layer';
 import {getSelectedLeafItems} from '../helper/selection';
-import Formats from '../lib/format';
-import {isVector, isBitmap} from '../lib/format';
+import Formats, {isVector, isBitmap} from '../lib/format';
 import log from '../log/log';
 
 /**

package/src/hocs/copy-paste-hoc.jsx

@@ -12,8 +12,7 @@ import {
     getSelectedRootItems
 } from '../helper/selection';
 import {getTrimmedRaster} from '../helper/bitmap';
-import {isBitmap} from '../lib/format';
-import Formats from '../lib/format';
+import Formats, {isBitmap} from '../lib/format';
 import Modes from '../lib/modes';
 
 import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items';

package/src/hocs/keyboard-shortcuts-hoc.jsx

@@ -13,8 +13,7 @@ import {groupSelection, shouldShowGroup, ungroupSelection, shouldShowUngroup} fr
 import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items';
 import {changeMode} from '../reducers/modes';
 
-import {isBitmap} from '../lib/format';
-import Formats from '../lib/format';
+import Formats, {isBitmap} from '../lib/format';
 import Modes from '../lib/modes';
 
 const KeyboardShortcutsHOC = function (WrappedComponent) {