From c41ea148858b6b51044e3e303f5e9c4b1c07d800 Mon Sep 17 00:00:00 2001
From: Sam Saccone <samccone@gmail.com>
Date: Tue, 30 Aug 2016 21:05:24 -0700
Subject: [PATCH] Utilize translate when drawing cells.

---
 cell_renderer.ts | 33 ++++++++++++++-------------------
 grid.ts          | 13 ++++++++++++-
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/cell_renderer.ts b/cell_renderer.ts
index 18cd996..99d9ab3 100644
--- a/cell_renderer.ts
+++ b/cell_renderer.ts
@@ -11,7 +11,8 @@ class CellRenderer {
         return 'grey';
       }
 
-      if (this.grid.isColumnHovered(colIndex) || this.grid.isRowHovered(rowIndex)) {
+      if (this.grid.isColumnHovered(colIndex) ||
+          this.grid.isRowHovered(rowIndex)) {
         return '#AAA';
       }
 
@@ -30,7 +31,7 @@ class CellRenderer {
         innerHeight);
     }
 
-    private getCellDrawCoords(rowIndex: number, colIndex: number):{
+    getCellDrawCoords(rowIndex: number, colIndex: number):{
       leftX: number,
       topY: number,
       innerWidth: number,
@@ -40,7 +41,8 @@ class CellRenderer {
           this.grid.s(((1 + colIndex) * this.grid.dimensions.cellMargin) +
                  colIndex * this.grid.dimensions.cellWidth);
         let topY = this.grid.s(this.grid.dimensions.columnHeaderHeight) +
-          this.grid.s(((1 + rowIndex) * this.grid.dimensions.cellMargin) + rowIndex * this.grid.dimensions.cellHeight)
+          this.grid.s(((1 + rowIndex) * this.grid.dimensions.cellMargin) +
+                      rowIndex * this.grid.dimensions.cellHeight);
 
         let innerWidth = this.grid.s(this.grid.dimensions.cellWidth);
         let innerHeight = this.grid.s(this.grid.dimensions.cellHeight);
@@ -74,25 +76,18 @@ class CellRenderer {
           rowIndex,
           columnIndex);
 
-        let {leftX, topY, innerWidth, innerHeight} = this.getCellDrawCoords(
-            rowIndex,
-            columnIndex);
-
+        let width = this.grid.s(this.grid.dimensions.cellWidth)
+        let height = this.grid.s(this.grid.dimensions.cellHeight)
         this.grid.debug && this.grid.debugInfo.drawnCells++;
 
-        this.grid.ctx.fillRect(
-          leftX - this.grid.viewportOffset.x,
-          topY - this.grid.viewportOffset.y,
-          innerWidth,
-          innerHeight);
-
-          this.grid.ctx.fillStyle = 'red';
+        this.grid.ctx.fillRect(0, 0, width, height);
+        this.grid.ctx.fillStyle = 'red';
 
-          this.grid.drawText(
-            this.grid.s(12),
-            leftX - this.grid.viewportOffset.x,
-            topY + innerHeight / 2 - this.grid.viewportOffset.y,
-            String(rowIndex) + ' - ' + String(columnIndex))
+        this.grid.drawText(
+          this.grid.s(12),
+          0,
+          innerHeight / 2,
+          String(rowIndex) + ' - ' + String(columnIndex))
       }
 }
 
diff --git a/grid.ts b/grid.ts
index ec608ef..d382712 100644
--- a/grid.ts
+++ b/grid.ts
@@ -337,7 +337,18 @@ class InfiniteGrid {
           const cell = row.columns[columnIndex];
           if (!cell) break;
 
-          this.cellRenderer.drawCell(rowIndex, columnIndex, cell, this);
+          this.ctx.save()
+          let cellCoords = this.cellRenderer.getCellDrawCoords(rowIndex, columnIndex);
+          this.ctx.translate(
+            cellCoords.leftX - this.viewportOffset.x,
+            cellCoords.topY - this.viewportOffset.y);
+
+          this.cellRenderer.drawCell(
+            rowIndex,
+            columnIndex,
+            cell);
+
+          this.ctx.restore()
         }
 
         this.renderRowGuide(rowIndex);