diff --git a/src/containers/costume-library.jsx b/src/containers/costume-library.jsx index fdef46f07fe03192469f3e79583193f77de9d038..0de5fba13ef18fc579d2b8014d41224d8ea77552 100644 --- a/src/containers/costume-library.jsx +++ b/src/containers/costume-library.jsx @@ -28,8 +28,8 @@ class CostumeLibrary extends React.PureComponent { handleItemSelected (item) { const vmCostume = { name: item.name, - rotationCenterX: item.info[0], - rotationCenterY: item.info[1], + rotationCenterX: item.info[0] / 2, + rotationCenterY: item.info[1] / 2, bitmapResolution: item.info.length > 2 ? item.info[2] : 1, skinId: null }; diff --git a/src/containers/costume-tab.jsx b/src/containers/costume-tab.jsx index 248ce989be56d7767bd6866de858bfd17e968400..9cd10ec8b9a787c73669b6aca6a043d982fc57db 100644 --- a/src/containers/costume-tab.jsx +++ b/src/containers/costume-tab.jsx @@ -164,8 +164,8 @@ class CostumeTab extends React.Component { const vmCostume = { name: item.name, md5: item.md5, - rotationCenterX: item.info[0], - rotationCenterY: item.info[1], + rotationCenterX: item.info[0] / 2, + rotationCenterY: item.info[1] / 2, bitmapResolution: item.info.length > 2 ? item.info[2] : 1, skinId: null }; diff --git a/src/containers/stage.jsx b/src/containers/stage.jsx index 01fc3ec7c72f668196496859159896292ae6d68f..0ff48ef0216f2482d0d01e340340b95c274be0f0 100644 --- a/src/containers/stage.jsx +++ b/src/containers/stage.jsx @@ -9,6 +9,7 @@ import {STAGE_DISPLAY_SIZES} from '../lib/layout-constants'; import {getEventXY} from '../lib/touch-utils'; import VideoProvider from '../lib/video/video-provider'; import {SVGRenderer as V2SVGAdapter} from 'scratch-svg-renderer'; +import {BitmapAdapter as V2BitmapAdapter} from 'scratch-svg-renderer'; import StageComponent from '../components/stage/stage.jsx'; @@ -60,6 +61,7 @@ class Stage extends React.Component { this.props.vm.attachRenderer(this.renderer); } this.props.vm.attachV2SVGAdapter(new V2SVGAdapter()); + this.props.vm.attachV2BitmapAdapter(new V2BitmapAdapter()); this.props.vm.setVideoProvider(new VideoProvider()); } componentDidMount () { diff --git a/src/lib/file-uploader.js b/src/lib/file-uploader.js index d32f5cc1cdf4d055ba9d5078d7bc9589e2d8002b..2df9f8593907012efa71aba51bde5359880167b6 100644 --- a/src/lib/file-uploader.js +++ b/src/lib/file-uploader.js @@ -1,4 +1,4 @@ -import {importBitmap} from 'scratch-svg-renderer'; +import {BitmapAdapter} from 'scratch-svg-renderer'; import log from './log.js'; /** @@ -79,7 +79,7 @@ const cacheAsset = function (storage, fileName, assetType, dataFormat, data) { /** * Handles loading a costume or a backdrop using the provided, context-relevant information. - * @param {ArrayBuffer | string} fileData The costume data to load (this can be an image url + * @param {ArrayBuffer | string} fileData The costume data to load (this can be a base64 string * iff the image is a bitmap) * @param {string} fileType The MIME type of this file * @param {string} costumeName The user-readable name to use for the costume. @@ -112,13 +112,15 @@ const costumeUpload = function (fileData, fileType, costumeName, storage, handle return; } - const addCostumeFromBuffer = function (error, costumeBuffer) { - if (error) { - log.warn(`An error occurred while trying to extract image data: ${error}`); - return; - } - - const vmCostume = cacheAsset(storage, costumeName, assetType, costumeFormat, costumeBuffer); + const bitmapAdapter = new BitmapAdapter(); + const addCostumeFromBuffer = function (dataURI) { + const vmCostume = cacheAsset( + storage, + costumeName, + assetType, + costumeFormat, + bitmapAdapter.convertDataURIToBinary(dataURI) + ); handleCostume(vmCostume); }; @@ -130,7 +132,12 @@ const costumeUpload = function (fileData, fileType, costumeName, storage, handle addCostumeFromBuffer(null, new Uint8Array(fileData)); } else { // otherwise it's a bitmap - importBitmap(fileData, addCostumeFromBuffer); + let dataURI = fileData; + if (fileData instanceof ArrayBuffer) { + dataURI = bitmapAdapter.convertBinaryToDataURI(fileData, fileType); + } + // @todo show an error message to user on failure? + bitmapAdapter.importBitmap(dataURI).then(value => addCostumeFromBuffer(value)); } };