Less redrawing of keys and fixed memory leak on valuePositions array

apps/jsonclock/app.js

@@ -36,7 +36,7 @@ const buttonHeight = 12;
 const buttonX = 78;
 const buttonY = 3;
 
-let valuePositions = [];
+let keysDrawn = false;
 const headerHeight = 16;
 const usableHeight = h - headerHeight;
 const maxLines = Math.floor(usableHeight / lineHeight);
@@ -143,7 +143,6 @@ let draw = function() {
     g.clear();
     g.setFontAlign(-1, -1);
     g.setFont("Vector", 10);
-    valuePositions = [];
 
     g.setColor(clrs.tab);
 
@@ -180,9 +179,11 @@ let redraw = function() {
             const key = kvMatch[1];
             let value = kvMatch[2];
     
-            if (prevVals.key == value) continue;
+            let valPrev = (prevVals[key] && prevVals[key].text) || null;
-            prevVals.key = value;
+            if (valPrev === value) continue;
             
+            if (!keysDrawn) {
+                prevVals[key] = {};
                 // Key
                 g.setColor(clrs.keys);
                 const keyText = indent + `"${key}"`;
@@ -194,6 +195,15 @@ let redraw = function() {
                 const colonText = ": ";
                 g.drawString(colonText, valueX, y);
                 valueX += g.stringWidth(colonText);
+                prevVals[key].x = valueX;
+                prevVals[key].y = y;
+            }
+            prevVals[key].text = value;
+            let pos = prevVals[key];
+
+            // Clear prev values
+            g.setColor(clrs.bg);
+            g.fillRect(pos.x, pos.y, w, pos.y + lineHeight);
             
             // Value color
             const endComma = value.endsWith(',');
@@ -205,36 +215,18 @@ let redraw = function() {
             } else {
                 g.setColor(clrs.ints);
             }
-            g.drawString(value, valueX, y);
+            g.drawString(value, pos.x, pos.y);
             if (endComma){
                 g.setColor(clrs.brackets);
-                g.drawString(',', valueX + g.stringWidth(value), y);
+                g.drawString(',', pos.x + g.stringWidth(value), pos.y);
-            }
-            valuePositions.push({
-                key,
-                x: valueX,
-                y,
-                text: value
-            });
-        } else {
-            g.setColor(clrs.brackets);
-            g.drawString(line, numWidth, y);
             }
         }
-};
+    }
-
+    keysDrawn = true;
-let clearVals = function() {
-    g.setFont("Vector", fontSize);
-    g.setFontAlign(-1, -1);
-    valuePositions.forEach(pos => {
-        g.setColor(clrs.bg);
-        g.fillRect(pos.x, pos.y, w, pos.y + lineHeight);
-    });
 };
 
 let redrawValues = function() {
     loadJson();
-    clearVals();
     redraw();
     if (drawTimeout) clearTimeout(drawTimeout);
     drawTimeout = setTimeout(function() {