Merge pull request #2575 from fsih/bitmapAdapter

Use bitmapAdapter for costume upload

package.json

@@ -101,8 +101,8 @@
     "scratch-paint": "0.2.0-prerelease.20180712144339",
     "scratch-render": "0.1.0-prerelease.20180618173030",
     "scratch-storage": "0.5.1",
-    "scratch-svg-renderer": "0.2.0-prerelease.20180618172917",
-    "scratch-vm": "0.1.0-prerelease.1531340421",
+    "scratch-svg-renderer": "0.2.0-prerelease.20180712223402",
+    "scratch-vm": "0.1.0-prerelease.1531436232",
     "selenium-webdriver": "3.6.0",
     "startaudiocontext": "1.2.1",
     "style-loader": "^0.21.0",

src/containers/costume-library.jsx

@@ -26,10 +26,14 @@ class CostumeLibrary extends React.PureComponent {
         ]);
     }
     handleItemSelected (item) {
+        const split = item.md5.split('.');
+        const type = split.length > 1 ? split[1] : null;
+        const rotationCenterX = type === 'svg' ? item.info[0] : item.info[0] / 2;
+        const rotationCenterY = type === 'svg' ? item.info[1] : item.info[1] / 2;
         const vmCostume = {
             name: item.name,
-            rotationCenterX: item.info[0],
-            rotationCenterY: item.info[1],
+            rotationCenterX,
+            rotationCenterY,
             bitmapResolution: item.info.length > 2 ? item.info[2] : 1,
             skinId: null
         };

src/containers/costume-tab.jsx

@@ -161,11 +161,15 @@ class CostumeTab extends React.Component {
     }
     handleSurpriseCostume () {
         const item = costumeLibraryContent[Math.floor(Math.random() * costumeLibraryContent.length)];
+        const split = item.md5.split('.');
+        const type = split.length > 1 ? split[1] : null;
+        const rotationCenterX = type === 'svg' ? item.info[0] : item.info[0] / 2;
+        const rotationCenterY = type === 'svg' ? item.info[1] : item.info[1] / 2;
         const vmCostume = {
             name: item.name,
             md5: item.md5,
-            rotationCenterX: item.info[0],
-            rotationCenterY: item.info[1],
+            rotationCenterX,
+            rotationCenterY,
             bitmapResolution: item.info.length > 2 ? item.info[2] : 1,
             skinId: null
         };

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

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 (dataBuffer) {
+        const vmCostume = cacheAsset(
+            storage,
+            costumeName,
+            assetType,
+            costumeFormat,
+            dataBuffer
+        );
         handleCostume(vmCostume);
     };
 
@@ -127,10 +129,13 @@ const costumeUpload = function (fileData, fileType, costumeName, storage, handle
         // passing in an array buffer causes the sprite/costume
         // thumbnails to not display because the data URI for the costume
         // is invalid
-        addCostumeFromBuffer(null, new Uint8Array(fileData));
+        addCostumeFromBuffer(new Uint8Array(fileData));
     } else {
         // otherwise it's a bitmap
-        importBitmap(fileData, addCostumeFromBuffer);
+        bitmapAdapter.importBitmap(fileData, fileType).then(addCostumeFromBuffer)
+            .catch(e => {
+                log.error(e);
+            });
     }
 };