Calculate rotation center if it's not supplied

When a new skin is added, previously the rotation center was set to `[0, 0]`.  In the case of costumes and backdrops added from libraries, the center should be calculated from the bounding box of the imported skin.

Toward LLK/scratch-gui#18

src/BitmapSkin.js

@@ -55,8 +55,9 @@ class BitmapSkin extends Skin {
      * Set the contents of this skin to a snapshot of the provided bitmap data.
      * @param {ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement} bitmapData - new contents for this skin.
      * @param {int} [costumeResolution=1] - The resolution to use for this bitmap.
+     * @param {bool} [calculateRotationCenter=false] - Set the rotation center to the bitmap center
      */
-    setBitmap (bitmapData, costumeResolution) {
+    setBitmap (bitmapData, costumeResolution, calculateRotationCenter) {
         const gl = this._renderer.gl;
 
         if (this._texture) {
@@ -78,6 +79,8 @@ class BitmapSkin extends Skin {
         this._costumeResolution = costumeResolution || 1;
         this._textureSize = BitmapSkin._getBitmapSize(bitmapData);
 
+        if (calculateRotationCenter) this.setRotationCenter.apply(this, this.calculateRotationCenter());
+
         this.emit(Skin.Events.WasAltered);
     }
 

src/RenderWebGL.js

@@ -140,10 +140,11 @@ class RenderWebGL {
      * Use `createBitmapSkin` or `createSVGSkin` instead.
      * @param {!string} skinUrl The URL of the skin.
      * @param {!int} [costumeResolution] Optional: resolution for the skin. Ignored unless creating a new Bitmap skin.
+     * @param {!boolean} [calculateRotationCenter] Optional: set the rotation center of the skin to the box center
      * @returns {!int} The ID of the Skin.
      * @deprecated
      */
-    createSkinFromURL (skinUrl, costumeResolution) {
+    createSkinFromURL (skinUrl, costumeResolution, calculateRotationCenter) {
         if (this._skinUrlMap.hasOwnProperty(skinUrl)) {
             const existingId = this._skinUrlMap[skinUrl];
 
@@ -179,7 +180,7 @@ class RenderWebGL {
                 url: skinUrl
             }, (err, response, body) => {
                 if (!err) {
-                    newSkin.setSVG(body);
+                    newSkin.setSVG(body, calculateRotationCenter);
                 }
             });
         } else {
@@ -187,7 +188,7 @@ class RenderWebGL {
             const img = new Image();
             img.crossOrigin = 'anonymous';
             img.onload = () => {
-                newSkin.setBitmap(img, costumeResolution);
+                newSkin.setBitmap(img, costumeResolution, calculateRotationCenter);
             };
             img.src = skinUrl;
         }
@@ -679,7 +680,12 @@ class RenderWebGL {
         // TODO: remove this after fully deprecating URL-based skin paths
         if ('skin' in properties) {
             const {skin, costumeResolution} = properties;
-            const skinId = this.createSkinFromURL(skin, costumeResolution);
+            const skinId = this.createSkinFromURL(
+                skin,
+                costumeResolution,
+                // If no rotationCenter, calculate one
+                !('rotationCenter' in properties)
+            );
             drawable.skin = this._allSkins[skinId];
         }
         if ('skinId' in properties) {

src/SVGSkin.js

@@ -53,8 +53,9 @@ class SVGSkin extends Skin {
     /**
      * Set the contents of this skin to a snapshot of the provided SVG data.
      * @param {string} svgData - new SVG to use.
+     * @param {bool} [calculateRotationCenter=false] set the rotation center to the SVG center
      */
-    setSVG (svgData) {
+    setSVG (svgData, calculateRotationCenter) {
         this._svgRenderer.fromString(svgData, () => {
             const gl = this._renderer.gl;
             if (this._texture) {
@@ -71,6 +72,7 @@ class SVGSkin extends Skin {
 
                 this._texture = twgl.createTexture(gl, textureOptions);
             }
+            if (calculateRotationCenter) this.setRotationCenter.apply(this, this.calculateRotationCenter());
             this.emit(Skin.Events.WasAltered);
         });
     }

src/Skin.js

@@ -83,6 +83,14 @@ class Skin extends EventEmitter {
         }
     }
 
+    /**
+     * Get the center of the current bounding box
+     * @return {[number,number]} the center of the current bounding box
+     */
+    calculateRotationCenter () {
+        return [this.size[0] / 2, this.size[1] / 2];
+    }
+
     /**
      * @abstract
      * @param {[number,number]} scale - The scaling factors to be used.