From 6a0798062bf67424be59d093a99050abe0df2f4d Mon Sep 17 00:00:00 2001
From: Christopher Willis-Ford <cwillisf@media.mit.edu>
Date: Thu, 29 Dec 2016 10:46:12 -0800
Subject: [PATCH] Make a `Skin` emit an event when it is altered

This allows any `Drawable` using the `Skin` to update its transform as
necessary.
---
 src/BitmapSkin.js  |  2 ++
 src/Drawable.js    | 21 +++++++++++++++++++--
 src/RenderWebGL.js |  6 ++----
 src/SVGSkin.js     |  1 +
 src/Skin.js        | 21 +++++++++++++++++----
 5 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/src/BitmapSkin.js b/src/BitmapSkin.js
index 9d9980d..8db2004 100644
--- a/src/BitmapSkin.js
+++ b/src/BitmapSkin.js
@@ -77,6 +77,8 @@ class BitmapSkin extends Skin {
         // Do these last in case any of the above throws an exception
         this._costumeResolution = costumeResolution || 1;
         this._textureSize = BitmapSkin._getBitmapSize(bitmapData);
+
+        this.emit(Skin.Events.WasAltered);
     }
 
     /**
diff --git a/src/Drawable.js b/src/Drawable.js
index f29cbad..dec9c9e 100644
--- a/src/Drawable.js
+++ b/src/Drawable.js
@@ -3,6 +3,7 @@ const twgl = require('twgl.js');
 const Rectangle = require('./Rectangle');
 const RenderConstants = require('./RenderConstants');
 const ShaderManager = require('./ShaderManager');
+const Skin = require('./Skin');
 
 /**
  * @callback Drawable~idFilterFunc
@@ -60,6 +61,8 @@ class Drawable {
         // TODO: move convex hull functionality, maybe bounds functionality overall, to Skin classes
         this._convexHullPoints = null;
         this._convexHullDirty = true;
+
+        this._skinWasAltered = this._skinWasAltered.bind(this);
     }
 
     /**
@@ -98,9 +101,14 @@ class Drawable {
      */
     set skin (newSkin) {
         if (this._skin !== newSkin) {
+            if (this._skin) {
+                this._skin.removeListener(Skin.Events.WasAltered, this._skinWasAltered);
+            }
             this._skin = newSkin;
-            this.setConvexHullDirty();
-            this.setTransformDirty();
+            if (this._skin) {
+                this._skin.addListener(Skin.Events.WasAltered, this._skinWasAltered);
+            }
+            this._skinWasAltered();
         }
     }
 
@@ -312,6 +320,15 @@ class Drawable {
         return this.getAABB();
     }
 
+    /**
+     * Respond to an internal change in the current Skin.
+     * @private
+     */
+    _skinWasAltered () {
+        this.setConvexHullDirty();
+        this.setTransformDirty();
+    }
+
     /**
      * Calculate a color to represent the given ID number. At least one component of
      * the resulting color will be non-zero if the ID is not RenderConstants.ID_NONE.
diff --git a/src/RenderWebGL.js b/src/RenderWebGL.js
index 4311771..a941df8 100644
--- a/src/RenderWebGL.js
+++ b/src/RenderWebGL.js
@@ -672,10 +672,8 @@ class RenderWebGL {
             drawable.skin = this._allSkins[properties.skinId];
         }
         if ('rotationCenter' in properties) {
-            const centerChanged = drawable.skin.setRotationCenter(properties.rotationCenter);
-            if (centerChanged) {
-                drawable.setTransformDirty();
-            }
+            const newRotationCenter = properties.rotationCenter;
+            drawable.skin.setRotationCenter(newRotationCenter[0], newRotationCenter[1]);
         }
         drawable.updateProperties(properties);
     }
diff --git a/src/SVGSkin.js b/src/SVGSkin.js
index 2533ff3..345c61f 100644
--- a/src/SVGSkin.js
+++ b/src/SVGSkin.js
@@ -71,6 +71,7 @@ class SVGSkin extends Skin {
 
                 this._texture = twgl.createTexture(gl, textureOptions);
             }
+            this.emit(Skin.Events.WasAltered);
         });
     }
 }
diff --git a/src/Skin.js b/src/Skin.js
index b2a5bce..8386f3b 100644
--- a/src/Skin.js
+++ b/src/Skin.js
@@ -1,13 +1,17 @@
+const EventEmitter = require('events');
+
 const twgl = require('twgl.js');
 
 const RenderConstants = require('./RenderConstants');
 
-class Skin {
+class Skin extends EventEmitter {
     /**
      * Create a Skin, which stores and/or generates textures for use in rendering.
      * @param {int} id - The unique ID for this Skin.
      */
     constructor (id) {
+        super();
+
         /** @type {int} */
         this._id = id;
 
@@ -68,15 +72,13 @@ class Skin {
      * Set the origin, in object space, about which this Skin should rotate.
      * @param {number} x - The x coordinate of the new rotation center.
      * @param {number} y - The y coordinate of the new rotation center.
-     * @returns {boolean} true iff the new rotation center differs from the old one.
      */
     setRotationCenter (x, y) {
         if (x !== this._rotationCenter[0] || y !== this._rotationCenter[1]) {
             this._rotationCenter[0] = x;
             this._rotationCenter[1] = y;
-            return true;
+            this.emit(Skin.Events.WasAltered);
         }
-        return false;
     }
 
     /**
@@ -101,4 +103,15 @@ class Skin {
     }
 }
 
+/**
+ * These are the events which can be emitted by instances of this class.
+ * @type {object.<string,string>}
+ */
+Skin.Events = {
+    /**
+     * Emitted when anything about the Skin has been altered, such as the appearance or rotation center.
+     */
+    WasAltered: 'WasAltered'
+};
+
 module.exports = Skin;