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

@@ -2665,13 +2665,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;
         };
@@ -4269,6 +4271,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();
@@ -5427,7 +5434,7 @@ class Activity {
          */
         this._hideCartesian = () => {
             this.cartesianBitmap.visible = false;
-            this.cartesianBitmap.updateCache();
+            this.cartesianBitmap.uncache();
             this.update = true;
         };
 
@@ -5436,6 +5443,7 @@ class Activity {
          */
         this._showCartesian = () => {
             this.cartesianBitmap.visible = true;
+            this.cartesianBitmap.cache(0, 0, 1200, 900);
             this.cartesianBitmap.updateCache();
             this.update = true;
         };
@@ -5445,7 +5453,7 @@ class Activity {
          */
         this._hidePolar = () => {
             this.polarBitmap.visible = false;
-            this.polarBitmap.updateCache();
+            this.polarBitmap.uncache();
             this.update = true;
         };
 
@@ -5454,6 +5462,7 @@ class Activity {
          */
         this._showPolar = () => {
             this.polarBitmap.visible = true;
+            this.polarBitmap.cache(0, 0, 1200, 900);
             this.polarBitmap.updateCache();
             this.update = true;
         };
@@ -5514,7 +5523,7 @@ class Activity {
          */
         this._hideTreble = () => {
             this.trebleBitmap.visible = false;
-            this.trebleBitmap.updateCache();
+            this.trebleBitmap.uncache();
             this._hideAccidentals();
             this.update = true;
         };
@@ -5524,6 +5533,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
@@ -5573,7 +5583,7 @@ class Activity {
          */
         this._hideGrand = () => {
             this.grandBitmap.visible = false;
-            this.grandBitmap.updateCache();
+            this.grandBitmap.uncache();
             this._hideAccidentals();
             this.update = true;
         };
@@ -5583,6 +5593,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
@@ -5631,7 +5642,7 @@ class Activity {
          */
         this._hideSoprano = () => {
             this.sopranoBitmap.visible = false;
-            this.sopranoBitmap.updateCache();
+            this.sopranoBitmap.uncache();
             this.update = true;
         };
 
@@ -5640,6 +5651,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
@@ -5689,7 +5701,7 @@ class Activity {
          */
         this._hideAlto = () => {
             this.altoBitmap.visible = false;
-            this.altoBitmap.updateCache();
+            this.altoBitmap.uncache();
             this._hideAccidentals();
             this.update = true;
         };
@@ -5703,6 +5715,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
@@ -5752,7 +5765,7 @@ class Activity {
          */
         this._hideTenor = () => {
             this.tenorBitmap.visible = false;
-            this.tenorBitmap.updateCache();
+            this.tenorBitmap.uncache();
             this.update = true;
         };
 
@@ -5761,6 +5774,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
@@ -5810,7 +5824,7 @@ class Activity {
          */
         this._hideBass = () => {
             this.bassBitmap.visible = false;
-            this.bassBitmap.updateCache();
+            this.bassBitmap.uncache();
             this._hideAccidentals();
             this.update = true;
         };
@@ -5820,6 +5834,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
@@ -7796,11 +7811,12 @@ define(["domReady!"].concat(MYDEFINES), doc => {
     const initialize = () => {
         // Defensive check for multiple critical globals that may be delayed
         // due to 'defer' execution timing variances.
-        const globalsReady = typeof createDefaultStack !== "undefined" &&
-                           typeof createjs !== "undefined" &&
-                           typeof Tone !== "undefined" &&
-                           typeof GIFAnimator !== "undefined" &&
-                           typeof SuperGif !== "undefined";
+        const globalsReady =
+            typeof createDefaultStack !== "undefined" &&
+            typeof createjs !== "undefined" &&
+            typeof Tone !== "undefined" &&
+            typeof GIFAnimator !== "undefined" &&
+            typeof SuperGif !== "undefined";
 
         if (globalsReady) {
             activity.setupDependencies();

js/blocks.js

@@ -6921,6 +6921,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) {
@@ -6966,6 +6973,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

@@ -1358,14 +1358,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");
             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();
@@ -1375,15 +1377,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(