Remove dependency on svg renderer

This commit is contained in:
DD Liu 2020-10-13 20:59:07 -04:00
parent 6107361318
commit 53cb72d527
4 changed files with 13 additions and 5 deletions

View file

@ -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",

View file

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

View file

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

View file

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