fixed sheet mutli-sheet rendering bug

quadratic-client/src/grid/controller/Grid.ts

@@ -1,3 +1,4 @@
+import { htmlCellsHandler } from '@/gridGL/htmlCells/htmlCellsHandler';
 import * as Sentry from '@sentry/react';
 import { Point, Rectangle } from 'pixi.js';
 import { debugMockLargeData } from '../../debugFlags';
@@ -105,6 +106,7 @@ export class Grid {
     if (summary.offsets_modified.length) {
       sheets.updateOffsets(summary.offsets_modified);
       pixiApp.cellsSheets.updateBorders(summary.offsets_modified);
+      htmlCellsHandler.updateOffsets(summary.offsets_modified.map((offset) => offset.id));
     }
 
     if (summary.code_cells_modified.length) {

quadratic-client/src/grid/controller/Sheets.ts

@@ -95,6 +95,7 @@ class Sheets {
       pixiAppSettings.changeInput(false);
       pixiApp.cellsSheets.show(sheets.sheet.id);
       this.updateSheetBar();
+      pixiApp.loadViewport();
     }
   }
 

quadratic-client/src/gridGL/cells/CellsSheets.ts

@@ -49,7 +49,6 @@ export class CellsSheets extends Container<CellsSheet> {
         if (this.current?.sheet.id !== child?.sheet.id) {
           this.current = child;
           child.show(pixiApp.viewport.getVisibleBounds());
-          pixiApp.loadViewport();
         }
       } else {
         child.hide();

quadratic-client/src/gridGL/htmlCells/HtmlCell.ts

@@ -1,5 +1,6 @@
 import { CELL_HEIGHT, CELL_WIDTH } from '@/constants/gridConstants';
 import { sheets } from '@/grid/controller/Sheets';
+import { Sheet } from '@/grid/sheet/Sheet';
 import { JsHtmlOutput } from '@/quadratic-core/types';
 import { colors } from '@/theme/colors';
 import { InteractionEvent } from 'pixi.js';
@@ -20,15 +21,22 @@ export class HtmlCell {
   private resizing: HtmlCellResizing | undefined;
   private hoverSide: 'right' | 'bottom' | 'corner' | undefined;
 
+  sheet: Sheet;
+
   div: HTMLDivElement;
 
   constructor(htmlCell: JsHtmlOutput) {
     this.htmlCell = htmlCell;
+    const sheet = sheets.getById(htmlCell.sheet_id)!;
+    if (!sheet) {
+      throw new Error(`Expected to find sheet with id ${htmlCell.sheet_id}`);
+    }
+    this.sheet = sheet;
 
     this.div = document.createElement('div');
     this.div.className = 'html-cell';
     this.div.style.border = `1px solid ${colors.cellColorUserPythonRgba}`;
-    const offset = sheets.sheet.getCellOffsets(Number(htmlCell.x), Number(htmlCell.y));
+    const offset = this.sheet.getCellOffsets(Number(htmlCell.x), Number(htmlCell.y));
 
     // the 0.5 is adjustment for the border
     this.div.style.left = `${offset.x - 0.5}px`;
@@ -57,6 +65,10 @@ export class HtmlCell {
     } else {
       this.iframe.addEventListener('load', this.afterLoad);
     }
+
+    if (this.sheet.id !== sheets.sheet.id) {
+      this.div.style.visibility = 'hidden';
+    }
   }
 
   get x(): number {
@@ -253,4 +265,12 @@ export class HtmlCell {
   setHeight(height: number) {
     this.iframe.height = height.toString();
   }
+
+  updateOffsets() {
+    const offset = this.sheet.getCellOffsets(this.x, this.y);
+
+    // the 0.5 is adjustment for the border
+    this.div.style.left = `${offset.x - 0.5}px`;
+    this.div.style.top = `${offset.y + offset.height - 0.5}px`;
+  }
 }

quadratic-client/src/gridGL/htmlCells/htmlCellsHandler.ts

@@ -105,6 +105,13 @@ class HTMLCellsHandler {
   getCells(): HtmlCell[] {
     return Array.from(this.cells.values());
   }
+
+  // handle changes to offsets
+  updateOffsets(sheetIds: string[]) {
+    this.cells.forEach((cell) => {
+      if (sheetIds.includes(cell.sheet.id)) cell.updateOffsets();
+    });
+  }
 }
 
 export const htmlCellsHandler = new HTMLCellsHandler();

quadratic-client/src/gridGL/interaction/pointer/PointerHeading.ts

@@ -1,3 +1,4 @@
+import { htmlCellsHandler } from '@/gridGL/htmlCells/htmlCellsHandler';
 import { InteractivePointerEvent, Point } from 'pixi.js';
 import { isEditorOrAbove } from '../../../actions';
 import { CELL_TEXT_MARGIN_LEFT, CELL_WIDTH } from '../../../constants/gridConstants';
@@ -181,6 +182,7 @@ export class PointerHeading {
             column: this.resizing.column,
             delta: size - this.resizing.lastSize,
           });
+          htmlCellsHandler.updateOffsets([sheets.sheet.id]);
           this.resizing.lastSize = size;
         }
       } else if (this.resizing.row !== undefined) {

scripts/run-ci-build.sh

@@ -3,8 +3,6 @@ if [ "$VERCEL_ENV" == "preview" ]; then
   echo "On preview branch. Setting VITE_QUADRATIC_API_URL to quadratic-api-dev-pr-$VERCEL_GIT_PULL_REQUEST_ID.herokuapp.com"
 fi
 
-cd ..
-
 echo 'Installing rustup...'
 curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
 source "$HOME/.cargo/env"
@@ -23,4 +21,5 @@ cargo run --bin export_types
 cd ../quadratic-client
 
 echo 'Building front-end...'
+npm ci
 npm run build

vercel.json

@@ -0,0 +1,5 @@
+{
+  "buildCommand": "./scripts/run-ci-build.sh",
+  "installCommand": "npm install",
+  "outputDirectory": "build"
+}