Merge branch 'develop' into update-eslint

package.json

@@ -32,7 +32,7 @@
     "minilog": "3.1.0",
     "parse-color": "1.0.0",
     "prop-types": "^15.5.10",
-    "scratch-svg-renderer": "0.2.0-prerelease.20201019174008"
+    "scratch-render-fonts": "latest"
   },
   "peerDependencies": {
     "react": "^16",
@@ -62,7 +62,7 @@
     "enzyme-adapter-react-16": "^1.5.0",
     "eslint": "^7.13.0",
     "eslint-config-import": "^0.13.0",
-    "eslint-config-scratch": "^5.0.0",
+    "eslint-config-scratch": "^6.0.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-react": "7.20.3",
     "gh-pages": "github:rschamp/gh-pages#publish-branch-to-subfolder",
@@ -91,7 +91,7 @@
     "redux-throttle": "0.1.1",
     "regenerator-runtime": "^0.13.3",
     "rimraf": "^2.6.1",
-    "scratch-l10n": "3.1.20181129221712",
+    "scratch-l10n": "3.11.20210308031514",
     "style-loader": "^1.0.0",
     "svg-url-loader": "^3.0.0",
     "tap": "^14.4.3",

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';

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';
 

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';

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';

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 {

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';

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 {

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([

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';

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';

src/containers/stroke-width-indicator.jsx

@@ -11,8 +11,7 @@ import {applyColorToSelection, applyStrokeWidthToSelection, getColorsFromSelecti
     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) {

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

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';
 
 /**

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();

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

@@ -1,6 +1,5 @@
 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';

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';

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';
 
 /**

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';

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) {

src/hocs/undo-hoc.jsx

@@ -6,11 +6,12 @@ import {connect} from 'react-redux';
 
 import {getSelectedLeafItems} from '../helper/selection';
 import {setSelectedItems} from '../reducers/selected-items';
-import {performUndo, performRedo, shouldShowUndo, shouldShowRedo} from '../helper/undo';
+import {
+    performUndo, performRedo, shouldShowUndo, shouldShowRedo
+} from '../helper/undo';
 import {undo, redo} from '../reducers/undo';
 
-import {isBitmap} from '../lib/format';
-import Formats from '../lib/format';
+import Formats, {isBitmap} from '../lib/format';
 
 const UndoHOC = function (WrappedComponent) {
     class UndoWrapper extends React.Component {

src/hocs/update-image-hoc.jsx

@@ -16,13 +16,13 @@ import {commitRectToBitmap, commitOvalToBitmap, commitSelectionToBitmap, getHitB
 import {performSnapshot} from '../helper/undo';
 import {scaleWithStrokes} from '../helper/math';
 
-import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT, SVG_ART_BOARD_WIDTH, SVG_ART_BOARD_HEIGHT} from '../helper/view';
-import {setWorkspaceBounds} from '../helper/view';
+import {
+    ART_BOARD_WIDTH, ART_BOARD_HEIGHT, SVG_ART_BOARD_WIDTH, SVG_ART_BOARD_HEIGHT,
+    setWorkspaceBounds
+} from '../helper/view';
 
-import Modes from '../lib/modes';
-import {BitmapModes} from '../lib/modes';
-import Formats from '../lib/format';
-import {isBitmap, isVector} from '../lib/format';
+import Modes, {BitmapModes} from '../lib/modes';
+import Formats, {isBitmap, isVector} from '../lib/format';
 
 const UpdateImageHOC = function (WrappedComponent) {
     class UpdateImageWrapper extends React.Component {

src/playground/playground.jsx

@@ -7,6 +7,9 @@ import {createStore} from 'redux';
 import reducer from './reducers/combine-reducers';
 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';
 
 const appTarget = document.createElement('div');
 appTarget.setAttribute('class', styles.playgroundContainer);

test/unit/blob-mode-reducer.test.js

@@ -1,8 +1,6 @@
 /* eslint-env jest */
-import brushReducer from '../../src/reducers/brush-mode';
-import {changeBrushSize} from '../../src/reducers/brush-mode';
-import eraserReducer from '../../src/reducers/eraser-mode';
-import {changeBrushSize as changeEraserSize} from '../../src/reducers/eraser-mode';
+import brushReducer, {changeBrushSize} from '../../src/reducers/brush-mode';
+import eraserReducer, {changeBrushSize as changeEraserSize} from '../../src/reducers/eraser-mode';
 
 test('initialState', () => {
     let defaultState;

test/unit/clipboard-reducer.test.js

@@ -1,6 +1,7 @@
 /* eslint-env jest */
-import clipboardReducer from '../../src/reducers/clipboard';
-import {clearPasteOffset, incrementPasteOffset, setClipboardItems} from '../../src/reducers/clipboard';
+import clipboardReducer, {
+    clearPasteOffset, incrementPasteOffset, setClipboardItems
+} from '../../src/reducers/clipboard';
 
 test('initialState', () => {
     let defaultState;

test/unit/format-reducer.test.js

@@ -1,7 +1,6 @@
 /* eslint-env jest */
 import Formats from '../../src/lib/format';
-import reducer from '../../src/reducers/format';
-import {changeFormat} from '../../src/reducers/format';
+import reducer, {changeFormat} from '../../src/reducers/format';
 import {undo, redo} from '../../src/reducers/undo';
 
 test('initialState', () => {

test/unit/hover-reducer.test.js

@@ -1,6 +1,5 @@
 /* eslint-env jest */
-import reducer from '../../src/reducers/hover';
-import {clearHoveredItem, setHoveredItem} from '../../src/reducers/hover';
+import reducer, {clearHoveredItem, setHoveredItem} from '../../src/reducers/hover';
 
 test('initialState', () => {
     let defaultState;

test/unit/modes-reducer.test.js

@@ -1,7 +1,6 @@
 /* eslint-env jest */
 import Modes from '../../src/lib/modes';
-import reducer from '../../src/reducers/modes';
-import {changeMode} from '../../src/reducers/modes';
+import reducer, {changeMode} from '../../src/reducers/modes';
 
 test('initialState', () => {
     let defaultState;

test/unit/selected-items-reducer.test.js

@@ -1,6 +1,7 @@
 /* eslint-env jest */
-import selectedItemsReducer from '../../src/reducers/selected-items';
-import {setSelectedItems, clearSelectedItems} from '../../src/reducers/selected-items';
+import selectedItemsReducer, {
+    setSelectedItems, clearSelectedItems
+} from '../../src/reducers/selected-items';
 
 test('initialState', () => {
     let defaultState;

test/unit/stroke-width-reducer.test.js

@@ -1,6 +1,7 @@
 /* eslint-env jest */
-import strokeWidthReducer from '../../src/reducers/stroke-width';
-import {MAX_STROKE_WIDTH, changeStrokeWidth} from '../../src/reducers/stroke-width';
+import strokeWidthReducer, {
+    MAX_STROKE_WIDTH, changeStrokeWidth
+} from '../../src/reducers/stroke-width';
 import {setSelectedItems} from '../../src/reducers/selected-items';
 import {mockPaperRootItem} from '../__mocks__/paperMocks';
 

test/unit/undo-reducer.test.js

@@ -1,6 +1,7 @@
 /* eslint-env jest */
-import undoReducer from '../../src/reducers/undo';
-import {undoSnapshot, undo, redo, clearUndoState, MAX_STACK_SIZE} from '../../src/reducers/undo';
+import undoReducer, {
+    undoSnapshot, undo, redo, clearUndoState, MAX_STACK_SIZE
+} from '../../src/reducers/undo';
 
 test('initialState', () => {
     let defaultState;