Add costume dataURI to costumes from storage (#517)

* Add costume dataURI to costumes from storage

Towards #515, LLK/scratch-gui#279

* Fix tests

* Load costumes incrementally

Some of our tests assume that at least some of our costume data is available before the costume data is loaded. So, provide as much costume data as is available.

* Remove unnecessary filter for null costumes

Resolved when we updated to load costumes incrementally.

/ht @cwillisf

src/import/load-costume.js

@@ -16,13 +16,9 @@ var log = require('../util/log');
 var loadCostume = function (md5ext, costume, runtime) {
     if (!runtime.storage) {
         log.error('No storage module present; cannot load costume asset: ', md5ext);
-        return Promise.resolve(null);
+        return Promise.resolve(costume);
     }
 
-    if (!runtime.renderer) {
-        log.error('No rendering module present; cannot load costume asset: ', md5ext);
-        return Promise.resolve(null);
-    }
 
     var idParts = md5ext.split('.');
     var md5 = idParts[0];
@@ -34,11 +30,22 @@ var loadCostume = function (md5ext, costume, runtime) {
         costume.rotationCenterY / costume.bitmapResolution
     ];
 
-    var promise = runtime.storage.load(assetType, md5);
+    var promise = runtime.storage.load(assetType, md5).then(function (costumeAsset) {
+        costume.url = costumeAsset.encodeDataURI();
+        return costumeAsset;
+    });
+
+    if (!runtime.renderer) {
+        log.error('No rendering module present; cannot load costume asset: ', md5ext);
+        return promise.then(function () {
+            return costume;
+        });
+    }
 
     if (assetType === AssetType.ImageVector) {
         promise = promise.then(function (costumeAsset) {
             costume.skinId = runtime.renderer.createSVGSkin(costumeAsset.decodeText(), rotationCenter);
+            return costume;
         });
     } else {
         promise = promise.then(function (costumeAsset) {
@@ -63,6 +70,7 @@ var loadCostume = function (md5ext, costume, runtime) {
             });
         }).then(function (imageElement) {
             costume.skinId = runtime.renderer.createBitmapSkin(imageElement, costume.bitmapResolution, rotationCenter);
+            return costume;
         });
     }
     return promise;

src/import/sb2import.js

@@ -53,11 +53,8 @@ var parseScratchObject = function (object, runtime, topLevel) {
                 rotationCenterY: costumeSource.rotationCenterY,
                 skinId: null
             };
-            var costumePromise = loadCostume(costumeSource.baseLayerMD5, costume, runtime);
-            if (costumePromise) {
-                costumePromises.push(costumePromise);
-            }
             sprite.costumes.push(costume);
+            costumePromises.push(loadCostume(costumeSource.baseLayerMD5, costume, runtime));
         }
     }
     // Sounds from JSON
@@ -138,7 +135,8 @@ var parseScratchObject = function (object, runtime, topLevel) {
         }
     }
     target.isStage = topLevel;
-    Promise.all(costumePromises).then(function () {
+    Promise.all(costumePromises).then(function (costumes) {
+        sprite.costumes = costumes;
         target.updateAllDrawableProperties();
     });
     // The stage will have child objects; recursively process them.

test/integration/complex.js

@@ -40,14 +40,17 @@ test('complex', function (t) {
                 rotationStyle: 'all around',
                 visible: true
             });
-            vm.addCostume({
-                costumeName: 'costume1',
-                baseLayerID: 0,
-                baseLayerMD5: 'f9a1c175dbe2e5dee472858dd30d16bb.svg',
-                bitmapResolution: 1,
-                rotationCenterX: 47,
-                rotationCenterY: 55
-            });
+            vm.addCostume(
+                'f9a1c175dbe2e5dee472858dd30d16bb.svg',
+                {
+                    costumeName: 'costume1',
+                    baseLayerID: 0,
+                    baseLayerMD5: 'f9a1c175dbe2e5dee472858dd30d16bb.svg',
+                    bitmapResolution: 1,
+                    rotationCenterX: 47,
+                    rotationCenterY: 55
+                }
+            );
         }
     });
 
@@ -73,14 +76,17 @@ test('complex', function (t) {
         vm.addSprite2(sprite);
 
         // Add backdrop
-        vm.addBackdrop({
-            costumeName: 'baseball-field',
-            baseLayerID: 26,
-            baseLayerMD5: '6b3d87ba2a7f89be703163b6c1d4c964.png',
-            bitmapResolution: 2,
-            rotationCenterX: 480,
-            rotationCenterY: 360
-        });
+        vm.addBackdrop(
+            '6b3d87ba2a7f89be703163b6c1d4c964.png',
+            {
+                costumeName: 'baseball-field',
+                baseLayerID: 26,
+                baseLayerMD5: '6b3d87ba2a7f89be703163b6c1d4c964.png',
+                bitmapResolution: 2,
+                rotationCenterX: 480,
+                rotationCenterY: 360
+            }
+        );
     });
 
     // After two seconds, get playground data and stop