From 53cb72d5272ababc813635da116f167f0d9eaf25 Mon Sep 17 00:00:00 2001
From: DD Liu <liudi@media.mit.edu>
Date: Tue, 13 Oct 2020 20:59:07 -0400
Subject: [PATCH] Remove dependency on svg renderer

---
 package.json                    |  2 +-
 src/containers/paint-editor.jsx |  3 ++-
 src/helper/bitmap.js            | 10 +++++++---
 src/playground/playground.jsx   |  3 +++
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index f5b9716e..26937893 100644
--- a/package.json
+++ b/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.20200610220938"
+    "scratch-render-fonts": "latest"
   },
   "peerDependencies": {
     "react": "^16",
diff --git a/src/containers/paint-editor.jsx b/src/containers/paint-editor.jsx
index 23658563..1e2d3ac0 100644
--- a/src/containers/paint-editor.jsx
+++ b/src/containers/paint-editor.jsx
@@ -129,7 +129,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 +344,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([
diff --git a/src/helper/bitmap.js b/src/helper/bitmap.js
index b070e2a2..bb9d78ab 100644
--- a/src/helper/bitmap.js
+++ b/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();
diff --git a/src/playground/playground.jsx b/src/playground/playground.jsx
index 963ed980..88efe019 100644
--- a/src/playground/playground.jsx
+++ b/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);