Run quirks mode fixes on costumes loaded from sb2s

package.json

@@ -61,6 +61,7 @@
     "scratch-parser": "^4.1.0",
     "scratch-render": "latest",
     "scratch-storage": "^0.4.0",
+    "scratch-svg-renderer": "0.1.0-prerelease.20180423193917",
     "script-loader": "0.7.2",
     "socket.io-client": "2.0.4",
     "stats.js": "^0.17.0",

src/import/load-costume.js

@@ -1,5 +1,6 @@
 const StringUtil = require('../util/string-util');
 const log = require('../util/log');
+const SvgRenderer = require('scratch-svg-renderer').SVGRenderer;
 
 /**
  * Initialize a costume from an asset asynchronously.
@@ -31,7 +32,24 @@ const loadCostumeFromAsset = function (costume, costumeAsset, runtime) {
     if (costumeAsset.assetType === AssetType.ImageVector) {
         // createSVGSkin does the right thing if rotationCenter isn't provided, so it's okay if it's
         // undefined here
-        costume.skinId = renderer.createSVGSkin(costumeAsset.decodeText(), rotationCenter);
+        let svgString = costumeAsset.decodeText();
+        if (costume.version && costume.version === 2) {
+            // SVG Renderer load fixes "quirks" associated with Scratch 2 projects
+            const svgRenderer = new SvgRenderer();
+            svgRenderer.loadString(svgString);
+            svgString = svgRenderer.toString();
+            delete costume.version;
+
+            // Put back into storage
+            const storage = runtime.storage;
+            costume.assetId = storage.builtinHelper.cache(
+                storage.AssetType.ImageVector,
+                storage.DataFormat.SVG,
+                (new TextEncoder()).encode(svgString)
+            );
+            costume.md5 = `${costume.assetId}.${costume.dataFormat}`;
+        }
+        costume.skinId = renderer.createSVGSkin(svgString, rotationCenter);
         costume.size = renderer.getSkinSize(costume.skinId);
         // Now we should have a rotationCenter even if we didn't before
         if (!rotationCenter) {

src/serialization/sb2.js

@@ -247,6 +247,7 @@ const parseScratchObject = function (object, runtime, extensions, topLevel, zip)
                 // will be a very extensive change across many repositories
                 // and should be done carefully and altogether
                 md5: costumeSource.baseLayerMD5,
+                version: 2, // Indicates loaded from sb2
                 skinId: null
             };
             const md5ext = costumeSource.baseLayerMD5;