Updated CTRLPainter and CTRLBanksStore to use the new Renderer system to draw surfaces to the canvas.

app/js/ctrls/CTRLBanksStore.js

@@ -1,5 +1,6 @@
 import GlobalEvents from "/app/js/common/EventCaller.js";
 import Utils from "/app/js/common/Utils.js";
+import Renderer from "/app/js/ui/Renderer.js";
 import NESBank from "/app/js/models/NESBank.js";
 import NESPalette from "/app/js/models/NESPalette.js";
 
@@ -38,65 +39,8 @@ function SetElBankName(el, name){
 var RenderBankToEl = Utils.throttle(function(el, bank){
   var cnv = el.querySelector("." + BLI_CANVAS);
   var ctx = cnv.getContext("2d");
-  var cw = (cnv.clientWidth > 0) ? Math.floor(cnv.clientWidth) : Math.floor(cnv.width);
-  var ch = (cnv.clientHeight > 0) ? Math.floor(cnv.clientHeight) : Math.floor(cnv.height);
-  if (cw <= 0 || ch <= 0){return;}
-  
-  var ctximg = ctx.getImageData(0,0,cw,ch);
-  var idat = ctximg.data;
-
-  var PutPixel = (i,j,s,c) => {
-    i = Math.round(i);
-    j = Math.round(j);
-    s = Math.ceil(s);
-
-    var r = parseInt(c.substring(1, 3), 16);
-    var g = parseInt(c.substring(3, 5), 16);
-    var b = parseInt(c.substring(5, 7), 16);
-
-    for (var y=j; y < j+s; y++){
-      for (var x=i; x < i+s; x++){
-        if (x >= 0 && x < cw && y >= 0 && y < ch){
-          var index = (y*cw*4) + (x*4);
-          idat[index] = r;
-          idat[index+1] = g;
-          idat[index+2] = b;
-          idat[index+3] = 255;
-        }
-      }
-    }
-  };
-
-  var pal = bank.palette;
-  if (pal === null){return;}
-
-  var scale = Math.min(
-    cw/bank.width,
-    ch/bank.height
-  );
-  var offX = Math.floor((cw - (bank.width*scale)) * 0.5);
-  var offY = Math.floor((ch - (bank.height*scale)) * 0.5);
-
-  ctx.save();
-  ctx.fillStyle = NESPalette.Default[4];
-  ctx.fillRect(0,0,cw,ch);
- 
-  for (let j=0; j < bank.height; j++){
-    var y = (j*scale) + offY;
-    for (let i=0; i < bank.width; i++){
-      var x = (i*scale) + offX;
-
-      if (x >= 0 && x < cw && y >= 0 && y < ch){
-        var color = NESPalette.Default[4];
-        var pinfo = bank.getColorIndex(i, j);
-        var color = (pinfo.ci >= 0) ? NESPalette.Default[pinfo.ci] : NESPalette.Default[4];
-        PutPixel(x,y,scale,color);
-      }
-    }
-  } 
 
-  ctx.putImageData(ctximg, 0, 0);
-  ctx.restore();
+  Renderer.renderToFit(bank, ctx); 
 }, 500); // Only update twice a second.
 
 

app/js/ctrls/CTRLPainter.js

@@ -2,6 +2,7 @@ import Utils from "/app/js/common/Utils.js";
 import GlobalEvents from "/app/js/common/EventCaller.js";
 
 import Input from "/app/js/ui/Input.js";
+import Renderer from "/app/js/ui/Renderer.js";
 
 import NESPalette from "/app/js/models/NESPalette.js";
 import ISurface from "/app/js/ifaces/ISurface.js";
@@ -17,52 +18,6 @@ var canvas = null;
 var context = null;
 var ctximg = null;
 
-function OpenCanvasPixels(){
-  if (context !== null){
-    if (ctximg === null){
-      ctximg = context.getImageData(0,0,Math.floor(canvas.clientWidth),Math.floor(canvas.clientHeight));
-    }
-    return (ctximg !== null)
-  }
-  return false;
-}
-
-function PutCanvasPixel(i,j,size,color){
-  if (ctximg === null)
-    return;
-
-  i = Math.round(i);
-  j = Math.round(j);
-  size = Math.ceil(size);
-  if (size <= 0){return;}
-
-  var cw = Math.floor(canvas.clientWidth);
-  var ch = Math.floor(canvas.clientHeight);
-
-  var r = parseInt(color.substring(1, 3), 16);
-  var g = parseInt(color.substring(3, 5), 16);
-  var b = parseInt(color.substring(5, 7), 16);
-  
-  var idat = ctximg.data;
-  for (var y=j; y < j+size; y++){
-    for (var x=i; x < i+size; x++){
-      if (x >= 0 && x < cw && y >= 0 && y < ch){
-        var index = (y*cw*4) + (x*4);
-        idat[index] = r;
-        idat[index+1] = g;
-        idat[index+2] = b;
-      }
-    }
-  }
-
-}
-
-function CloseCanvasPixels(){
-  if (ctximg !== null){
-    context.putImageData(ctximg, 0, 0);
-    ctximg = null;
-  }
-}
 
 function ResizeCanvasImg(w, h){
   if (canvas !== null){
@@ -400,37 +355,19 @@ class CTRLPainter {
     if (context === null || this.__surface === null)
       return;
 
-    context.save();
-
-    // Clearing the context surface...
-    context.fillStyle = NESPalette.Default[4];
-    context.fillRect(
-      0,0,
-      Math.floor(canvas.clientWidth),
-      Math.floor(canvas.clientHeight)
+    // Drawing the surface to the canvas.
+    Renderer.render(
+      this.__surface,
+      0, 0,
+      this.__surface.width, this.__surface.height,
+      this.__scale,
+      context,
+      this.__offset[0], this.__offset[1],
+      !this.__onePaletteMode
     );
 
-    OpenCanvasPixels();
-    for (var j = 0; j < this.__surface.height; j++){
-      var y = (j*this.__scale) + this.__offset[1];
-      for (var i = 0; i < this.__surface.width; i++){
-        var x = (i*this.__scale) + this.__offset[0];
-        
-        if (x >= 0 && x < canvas.clientWidth && y >= 0 && y < canvas.clientHeight){
-          var color = NESPalette.Default[4];
-          if (this.__onePaletteMode){
-            var pinfo = this.__surface.getColorIndex(i, j);
-            if (pinfo.ci >= 0)
-              color = NESPalette.Default[pinfo.ci];
-          } else {
-            color = this.__surface.getColor(i, j);
-          }
 
-          PutCanvasPixel(x,y, this.__scale, color);
-        }
-      }
-    }
-    CloseCanvasPixels();
+    context.save();
 
     // Draw the mouse position... if mouse is currently in bounds.
     if (input.isMouseInBounds()){
@@ -450,7 +387,6 @@ class CTRLPainter {
       }
     }
 
-
     // Draw grid.
     if (this.__gridEnabled && this.__scale > 0.5){
       context.strokeStyle = "#00FF00";