NESTile and ISurface are now event emitters. NESTile and by extension NESBank will emit 'data_changed' when there's a change to the data. CTRLPainter updated to utilize the new events.

app/js/ctrls/CTRLPainter.js

 import Input from "/app/js/ui/Input.js";
 
 import NESPalette from "/app/js/models/NESPalette.js";
-//import NESTile from "/app/js/models/NESTile.js";
-//import NESBank from "/app/js/models/NESBank.js";
 import ISurface from "/app/js/ifaces/ISurface.js";
 
 const EL_CANVAS_ID = "painter";
     }).bind(this);
     GlobalEvents.listen("set_app_palette", handle_setapppalette);
 
+    var handle_surface_data_changed = (function(){
+      RenderD();
+    }).bind(this);
+
     var handle_change_surface = (function(surf){
       if (!(surf instanceof ISurface)){
         console.log("WARNING: Attempted to set painter to non-surface instance.");
         return;
       }
-      this.__surface = surf;
-      if (this.__palette === null && this.__surface.palette !== null){
-        this.__palette = this.__surface.palette;
-      } else if (this.__palette !== null && this.__surface.palette !== this.__palette){
-        this.__surface.palette = this.__palette;
+      if (surf !== this.__surface){
+        if (this.__surface !== null){
+          this.__surface.unlisten("data_changed", handle_surface_data_changed);
+        }
+        this.__surface = surf;
+        this.__surface.listen("data_changed", handle_surface_data_changed);
+        if (this.__palette === null && this.__surface.palette !== null){
+          this.__palette = this.__surface.palette;
+        } else if (this.__palette !== null && this.__surface.palette !== this.__palette){
+          this.__surface.palette = this.__palette;
+        }
+        this.center_surface();
       }
-      this.center_surface();
       RenderD();
     }).bind(this);
     GlobalEvents.listen("change_surface", handle_change_surface);
           var sy = (e.isCombo) ? Math.floor((this.__brushLastPos[1] - this.__offset[1]) * (1.0 / this.__scale)) : y;
           if (x >= 0 && x < this.__surface.width && y >= 0 && y < this.__surface.height){
             LineToSurface(sx, sy, x, y, this.__brushColor, this.__brushPalette);
-            RenderD();
+            //RenderD();
           }
         }
       }

app/js/ifaces/ISurface.js

 import Utils from "/app/js/common/Utils.js"
+import {EventCaller} from "/app/js/common/EventCaller.js"
 
-
-export default class ISurface{
-  constructor(){}
+export default class ISurface extends EventCaller{
+  constructor(){
+    super();
+  }
 
   get width(){return 0;}
   get height(){return 0;}

app/js/models/NESBank.js

     this.__RP = []; // Right Patterns (Backgrounds) 
     this.__AccessMode = 2; // 0 = Sprites only | 1 = BG only | 2 = Sprites and BG
 
+    var handle_datachanged = function(side){
+      if ((side == 0 && (this.__AccessMode == 0 || this.__AccessMode == 2)) ||
+        (side == 1 && (this.__AccessMode == 1 || this.__AccessMode == 2))){
+        this.emit("data_changed");
+      }
+    }
+
     for (var i=0; i < 256; i++){
       this.__LP.push(new NESTile());
+      this.__LP[i].listen("data_changed", handle_datachanged.bind(this, 0));
       this.__RP.push(new NESTile());
+      this.__RP[i].listen("data_changed", handle_datachanged.bind(this, 1));
     }
 
     this.__palette = null;
     return buff;
   }
 
+  set chr(buff){
+    if (!(buff instanceof Uint8Array))
+      throw new TypeError("Expected Uint8Array buffer.");
+    if (buff.length !== 8192)
+      throw new RangeError("Data buffer has invalid byte length.");
+    var offset = 0;
+    this.__LP.forEach((i) => {
+      i.chr = buff.slice(offset, offset+15);
+      offset += 16;
+    });
+    this.__RP.forEach((i) => {
+      i.chr = buff.slice(offset, offset+15);
+      offset += 16;
+    });
+  }
+
   get palette(){return this.__palette;}
   set palette(p){
     if (p !== null && !(p instanceof NESPalette))

app/js/models/NESTile.js

 import Utils from "/app/js/common/Utils.js";
+import {EventCaller} from "/app/js/common/EventCaller.js";
 import NESPalette from "/app/js/models/NESPalette.js";
 
 
 }
 
 
+var BLOCK_CHANGE_EMIT = false; // This will block the "data_changed" event when class is processing
+                               // lots of changes.
 
-export default class NESTile{
+
+export default class NESTile extends EventCaller{
   constructor(){
+    super();
     this.__paletteIndex = 0;
     this.__data = new Uint8Array(16);
   }
         } else {
           obj.__data[8+dindex] &= BitMask(bitoffset, true);
         }
+        if (!BLOCK_CHANGE_EMIT)
+          obj.emit("data_changed");
         return true;
       }
     });
     return new Uint8Array(this.__data);
   }
 
+  set chr(buff){
+    if (!(buff instanceof Uint8Array))
+      throw new TypeError("Expected Uint8Array buffer");
+    if (buff.length !== 16)
+      throw new RangeError("Buffer contains invalid byte length.");
+    this.__data = new Uint8Array(buff);
+    this.emit("data_changed");
+  }
+
   get base64(){
     var b = ""
     for (var i = 0; i < this.__data.length; i++) {
     }
     this.__data = bytes;
     this.__paletteIndex = b.charCodeAt(b.length-1);
+    this.emit("data_changed");
   }
 
 
       throw new RangeError("Palette index out of bounds.");
     }
     this.__paletteIndex = pi;
+    this.emit("data_changed");
   }
 
   setPixelIndex(x, y, ci){
     if (flag >= 1 && flag <= 3){
       var oldData = this.__data;
       var newData = new Uint8Array(16);
+      BLOCK_CHANGE_EMIT = true;
       for (var x = 0; x < 8; x++){
         for (var y = 0; y < 8; y++){
           this.__data = oldData;
           );
         }
       }
+      BLOCK_CHANGE_EMIT = false;
+      this.emit("data_changed");
     }
     return this;
   }
     if (!(t instanceof NESTile))
       throw new TypeError("Expected NESTile object.");
     this.__data.set(t.__data);
+    this.emit("data_changed");
     return this;
   }