add a separate dependency list for array lines

.github/workflows/test-unit.yml

@@ -26,6 +26,6 @@ jobs:
       - name: Install wasm-pack
         run: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
 
-      - run: npm install
       - run: npm run build:wasm:nodejs
+      - run: npm install
       - run: npm run test:unit:ci

src/grid/sheet/Sheet.ts

@@ -13,15 +13,24 @@ export class Sheet {
   gridOffsets: GridOffsets;
   grid: GridSparse;
   borders: GridBorders;
+
+  // visual dependency for overflowing cells
   render_dependency: GridRenderDependency;
+
+  // visual dependency for drawing array lines
+  array_dependency: GridRenderDependency;
+
+  // cell calculation dependency
   cell_dependency: CellDependencyManager;
+
   onRebuild?: () => void;
 
   constructor() {
     this.gridOffsets = new GridOffsets();
     this.grid = new GridSparse(this.gridOffsets);
     this.borders = new GridBorders(this.gridOffsets);
     this.render_dependency = new GridRenderDependency();
+    this.array_dependency = new GridRenderDependency();
     this.cell_dependency = new CellDependencyManager();
   }
 

src/grid/sheet/tests/gridDependency.test.ts → src/grid/sheet/tests/gridRenderDependency.test.ts

@@ -124,6 +124,7 @@ describe('gridOffsets', () => {
     expect(gridRenderDependency.getDependents({ x: 3, y: 2 })?.length).toBe(1);
     expect(gridRenderDependency.getDependents({ x: 4, y: 2 })?.length).toBe(undefined);
     expect(gridRenderDependency.getChangedCells({ x: 1, y: 2 })?.length).toBe(2);
+    expect(gridRenderDependency.getDependents({ x: 2, y: 2 })).toEqual([{ x: 1, y: 2 }]);
   });
 
   it('gets dependency within bounds', () => {

src/gridGL/UI/cells/Cells.ts

@@ -37,6 +37,9 @@ export class Cells extends Container {
   private cellLabels: CellsLabels;
   private cellsMarkers: CellsMarkers;
 
+  // track the cells that have arrays to update the visual dependency (used only after rendering a quadrant)
+  private trackCellsWithArrays: Coordinate[] = [];
+
   cellsBackground: CellsBackground;
   dirty = true;
 
@@ -103,6 +106,27 @@ export class Cells extends Container {
     }
   }
 
+  /** update visual dependency to ensure array boxes are drawn when zooming in */
+  private handleArrayCells(cellRectangle: CellRectangle): void {
+    const { array_dependency } = this.app.sheet;
+
+    for (const coordinate of this.trackCellsWithArrays) {
+      const cell = cellRectangle.get(coordinate.x, coordinate.y);
+      const array = cell?.cell?.array_cells;
+      if (!array) {
+        throw new Error('Expected to find array_cells in handleArrayCells');
+      }
+      const cellsToRender = array.flatMap((array: [number, number]) => {
+        if (!cell.cell) return [];
+        if (array[0] !== cell.cell.x || array[1] !== cell.cell.y) {
+          return [{ x: array[0], y: array[1] }];
+        }
+        return [];
+      });
+      array_dependency.update(coordinate, cellsToRender);
+    }
+  }
+
   private renderCell(options: {
     entry?: CellAndFormat;
     x: number;
@@ -171,6 +195,7 @@ export class Cells extends Container {
     this.cellsArray.clear();
     this.cellsBackground.clear();
     this.cellsBorder.clear();
+    this.trackCellsWithArrays = [];
   }
 
   /**
@@ -191,7 +216,7 @@ export class Cells extends Container {
     const { boundsWithData, bounds, cellRectangle, ignoreInput, isQuadrant } = options;
     const renderedCells = new Set<string>();
 
-    const { gridOffsets, render_dependency, grid } = this.app.sheet;
+    const { gridOffsets, render_dependency, array_dependency, grid } = this.app.sheet;
     this.clear();
 
     const input =
@@ -203,7 +228,6 @@ export class Cells extends Container {
         : undefined;
 
     // keeps track of screen position
-
     const xStart = gridOffsets.getColumnPlacement(boundsWithData.left).x;
     const yStart = gridOffsets.getRowPlacement(boundsWithData.top).y;
     let y = yStart;
@@ -221,6 +245,12 @@ export class Cells extends Container {
         const isInput = input && input.column === column && input.row === row;
 
         const rendered = this.renderCell({ entry, x, y, width, height, isQuadrant, isInput });
+
+        // track cells with arrays to add visual dependencies
+        if (entry && this.app.settings.showCellTypeOutlines && entry.cell?.array_cells) {
+          this.trackCellsWithArrays.push({ x: entry.cell.x, y: entry.cell.y });
+        }
+
         content = content ? intersects.rectangleUnion(content, rendered) : rendered;
         x += width;
 
@@ -234,7 +264,10 @@ export class Cells extends Container {
     const clipRectangle = gridOffsets.getScreenRectangle(bounds.x, bounds.y, bounds.width, bounds.height);
 
     // check for dependencies across entire bounds
-    const dependentCells = render_dependency.getDependentsInBounds(bounds);
+    const dependentCells = [
+      ...render_dependency.getDependentsInBounds(bounds),
+      ...array_dependency.getDependentsInBounds(bounds),
+    ];
     if (dependentCells.length) {
       dependentCells.forEach((coordinate) => {
         const key = `${coordinate.x},${coordinate.y}`;
@@ -260,7 +293,10 @@ export class Cells extends Container {
     }
 
     // only calculate overflow when rendering quadrants so it's only done one time
-    if (isQuadrant) this.handleOverflow();
+    if (isQuadrant) {
+      this.handleOverflow();
+      this.handleArrayCells(cellRectangle);
+    }
 
     return content;
   }

src/gridGL/UI/cells/CellsArray.ts

@@ -61,20 +61,6 @@ export class CellsArray extends Container {
       bottom: true,
       right: true,
     });
-
-    // drawBorder({
-    //   tint: colors.cellColorUserPython,
-    //   alpha: 0.25,
-    //   x,
-    //   y,
-    //   width,
-    //   height,
-    //   getSprite: this.getSprite,
-    //   top: true,
-    //   left: true,
-    //   bottom: true,
-    //   right: true,
-    // });
   }
 
   debugShowCachedCounts(): void {