fix: reduce canvas and bitmap memory by lazy-caching grids and shrinking scroll buffer

- Remove eager bitmap.cache() from _createGrid() — 8 grids were each
  allocating a 1200x900x4 (~4.3 MB) backing canvas at startup even
  though at most 1 grid is visible at a time (~35 MB wasted)
- Add cache(0,0,1200,900) in _show*() methods so grids are only cached
  when made visible, and uncache() in _hide*() to free the backing
  canvas immediately when hidden
- Skip trashed blocks in clearCache() to avoid re-creating backing
  canvases for invisible blocks on every theme/resize event
- Uncache trashed block containers in sendStackToTrash() and delete
  their blockArt/blockCollapseArt SVG strings to free memory
- Cap trashStacks undo history at 100 entries to prevent unbounded
  growth during long editing sessions
- Reduce scroll canvas from 3x to 2x viewport dimensions in
  doScrollXY(), saving ~40 MB at 1920x1080 (75 MB -> 33 MB)
- Update scroll boundary clamps to match the new 2x canvas size

Estimated RAM savings: ~70-120 MB depending on viewport size and
number of trashed blocks.

Author: Ashutoshx7

js/activity.js

@@ -2849,13 +2849,15 @@ class Activity {
 
             const bitmap = new createjs.Bitmap(img);
             container.addChild(bitmap);
-            bitmap.cache(0, 0, 1200, 900);
+            // Do NOT cache the bitmap here. Each cached grid allocates a
+            // 1200x900x4 = ~4.3 MB backing canvas, and with 8 grids that
+            // totals ~35 MB even though at most 1 grid is visible at a time.
+            // Instead, we cache lazily in _show*() and uncache in _hide*().
 
             bitmap.x = (this.canvas.width - 1200) / 2;
             bitmap.y = (this.canvas.height - 900) / 2;
             bitmap.scaleX = bitmap.scaleY = bitmap.scale = 1;
             bitmap.visible = false;
-            bitmap.updateCache();
 
             return bitmap;
         };
@@ -4672,6 +4674,11 @@ class Activity {
          */
         this.clearCache = () => {
             this.blocks.blockList.forEach(block => {
+                // Skip trashed blocks — they are hidden and their backing
+                // canvases are freed in sendStackToTrash(). Re-caching them
+                // here would waste ~0.5–2 MB per trashed block.
+                if (block.trash) return;
+
                 if (block.container) {
                     block.container.uncache();
                     block.container.cache();
@@ -5855,7 +5862,7 @@ class Activity {
          */
         this._hideCartesian = () => {
             this.cartesianBitmap.visible = false;
-            this.cartesianBitmap.updateCache();
+            this.cartesianBitmap.uncache();
             this.update = true;
         };
 
@@ -5864,6 +5871,7 @@ class Activity {
          */
         this._showCartesian = () => {
             this.cartesianBitmap.visible = true;
+            this.cartesianBitmap.cache(0, 0, 1200, 900);
             this.cartesianBitmap.updateCache();
             this.update = true;
         };
@@ -5873,7 +5881,7 @@ class Activity {
          */
         this._hidePolar = () => {
             this.polarBitmap.visible = false;
-            this.polarBitmap.updateCache();
+            this.polarBitmap.uncache();
             this.update = true;
         };
 
@@ -5882,6 +5890,7 @@ class Activity {
          */
         this._showPolar = () => {
             this.polarBitmap.visible = true;
+            this.polarBitmap.cache(0, 0, 1200, 900);
             this.polarBitmap.updateCache();
             this.update = true;
         };
@@ -5942,7 +5951,7 @@ class Activity {
          */
         this._hideTreble = () => {
             this.trebleBitmap.visible = false;
-            this.trebleBitmap.updateCache();
+            this.trebleBitmap.uncache();
             this._hideAccidentals();
             this.update = true;
         };
@@ -5952,6 +5961,7 @@ class Activity {
          */
         this._showTreble = () => {
             this.trebleBitmap.visible = true;
+            this.trebleBitmap.cache(0, 0, 1200, 900);
             this.trebleBitmap.updateCache();
             this._hideAccidentals();
             // eslint-disable-next-line no-console
@@ -6001,7 +6011,7 @@ class Activity {
          */
         this._hideGrand = () => {
             this.grandBitmap.visible = false;
-            this.grandBitmap.updateCache();
+            this.grandBitmap.uncache();
             this._hideAccidentals();
             this.update = true;
         };
@@ -6011,6 +6021,7 @@ class Activity {
          */
         this._showGrand = () => {
             this.grandBitmap.visible = true;
+            this.grandBitmap.cache(0, 0, 1200, 900);
             this.grandBitmap.updateCache();
             this._hideAccidentals();
             // eslint-disable-next-line no-console
@@ -6059,7 +6070,7 @@ class Activity {
          */
         this._hideSoprano = () => {
             this.sopranoBitmap.visible = false;
-            this.sopranoBitmap.updateCache();
+            this.sopranoBitmap.uncache();
             this.update = true;
         };
 
@@ -6068,6 +6079,7 @@ class Activity {
          */
         this._showSoprano = () => {
             this.sopranoBitmap.visible = true;
+            this.sopranoBitmap.cache(0, 0, 1200, 900);
             this.sopranoBitmap.updateCache();
             this._hideAccidentals();
             // eslint-disable-next-line no-console
@@ -6117,7 +6129,7 @@ class Activity {
          */
         this._hideAlto = () => {
             this.altoBitmap.visible = false;
-            this.altoBitmap.updateCache();
+            this.altoBitmap.uncache();
             this._hideAccidentals();
             this.update = true;
         };
@@ -6131,6 +6143,7 @@ class Activity {
          */
         this._showAlto = () => {
             this.altoBitmap.visible = true;
+            this.altoBitmap.cache(0, 0, 1200, 900);
             this.altoBitmap.updateCache();
             this._hideAccidentals();
             // eslint-disable-next-line no-console
@@ -6180,7 +6193,7 @@ class Activity {
          */
         this._hideTenor = () => {
             this.tenorBitmap.visible = false;
-            this.tenorBitmap.updateCache();
+            this.tenorBitmap.uncache();
             this.update = true;
         };
 
@@ -6189,6 +6202,7 @@ class Activity {
          */
         this._showTenor = () => {
             this.tenorBitmap.visible = true;
+            this.tenorBitmap.cache(0, 0, 1200, 900);
             this.tenorBitmap.updateCache();
             this._hideAccidentals();
             // eslint-disable-next-line no-console
@@ -6238,7 +6252,7 @@ class Activity {
          */
         this._hideBass = () => {
             this.bassBitmap.visible = false;
-            this.bassBitmap.updateCache();
+            this.bassBitmap.uncache();
             this._hideAccidentals();
             this.update = true;
         };
@@ -6248,6 +6262,7 @@ class Activity {
          */
         this._showBass = () => {
             this.bassBitmap.visible = true;
+            this.bassBitmap.cache(0, 0, 1200, 900);
             this.bassBitmap.updateCache();
             this._hideAccidentals();
             // eslint-disable-next-line no-console

js/blocks.js

@@ -6943,6 +6943,13 @@ class Blocks {
             /** Add this block to the list of blocks in the trash so we can undo this action. */
             this.trashStacks.push(thisBlock);
 
+            // Cap the undo history to prevent unbounded memory growth.
+            // Keep the 100 most recent trashed stacks.
+            const MAX_TRASH_UNDO = 100;
+            if (this.trashStacks.length > MAX_TRASH_UNDO) {
+                this.trashStacks = this.trashStacks.slice(-MAX_TRASH_UNDO);
+            }
+
             /** Disconnect block. */
             const parentBlock = myBlock.connections[0];
             if (parentBlock != null) {
@@ -6988,6 +6995,21 @@ class Blocks {
                 const blk = this.dragGroup[b];
                 this.blockList[blk].trash = true;
                 this.blockList[blk].hide();
+
+                // Free the backing canvas memory for trashed blocks.
+                // Each cached block holds a bitmap canvas (~0.5-2 MB).
+                if (this.blockList[blk].container) {
+                    this.blockList[blk].container.uncache();
+                }
+
+                // Clean up SVG art strings for trashed blocks to free memory.
+                if (this.blockArt[blk]) {
+                    delete this.blockArt[blk];
+                }
+                if (this.blockCollapseArt[blk]) {
+                    delete this.blockCollapseArt[blk];
+                }
+
                 const title = this.blockList[blk].protoblock.staticLabels[0];
                 closeBlkWidgets(_(title));
                 this.activity.refreshCanvas();

js/turtle-painter.js

@@ -1366,14 +1366,16 @@ class Painter {
             turtles.gx = this.turtle.ctx.canvas.width;
             turtles.gy = this.turtle.ctx.canvas.height;
             turtles.canvas1 = document.createElement("canvas");
-            turtles.canvas1.width = 3 * this.turtle.ctx.canvas.width;
-            turtles.canvas1.height = 3 * this.turtle.ctx.canvas.height;
+            // Use 2x viewport instead of 3x to save ~40 MB of memory.
+            // At 1920x1080: 2x = 3840x2160x4 = 33 MB vs 3x = 5760x3240x4 = 75 MB.
+            turtles.canvas1.width = 2 * this.turtle.ctx.canvas.width;
+            turtles.canvas1.height = 2 * this.turtle.ctx.canvas.height;
             turtles.c1ctx = turtles.canvas1.getContext("2d", { willReadFrequently: true });
             turtles.c1ctx.rect(
                 0,
                 0,
-                3 * this.turtle.ctx.canvas.width,
-                3 * this.turtle.ctx.canvas.height
+                2 * this.turtle.ctx.canvas.width,
+                2 * this.turtle.ctx.canvas.height
             );
             turtles.c1ctx.fillStyle = "#F9F9F9";
             turtles.c1ctx.fill();
@@ -1383,15 +1385,12 @@ class Painter {
 
         turtles.gy -= dy;
         turtles.gx -= dx;
+        // Clamp to the bounds of the 2x scroll canvas (max offset = 1x viewport)
         turtles.gx =
-            2 * this.turtle.ctx.canvas.width > turtles.gx
-                ? turtles.gx
-                : 2 * this.turtle.ctx.canvas.width;
+            this.turtle.ctx.canvas.width > turtles.gx ? turtles.gx : this.turtle.ctx.canvas.width;
         turtles.gx = 0 > turtles.gx ? 0 : turtles.gx;
         turtles.gy =
-            2 * this.turtle.ctx.canvas.height > turtles.gy
-                ? turtles.gy
-                : 2 * this.turtle.ctx.canvas.height;
+            this.turtle.ctx.canvas.height > turtles.gy ? turtles.gy : this.turtle.ctx.canvas.height;
         turtles.gy = 0 > turtles.gy ? 0 : turtles.gy;
 
         const newImgData = turtles.c1ctx.getImageData(