Merge branch 'main' into xlsx_formula

quadratic-client/src/app/gridGL/HTMLGrid/CodeHint.tsx

@@ -21,7 +21,7 @@ export const CodeHint = () => {
   useEffect(() => {
     const updateCursor = async () => {
       const { x, y } = sheets.sheet.cursor.cursorPosition;
-      const newCellHasValue = await quadraticCore.hasRenderCells(sheets.sheet.id, x, y, 0, 0);
+      const newCellHasValue = await quadraticCore.hasRenderCells(sheets.sheet.id, x, y, 1, 1);
       setHide(true);
       setCellHasValue(newCellHasValue);
 

quadratic-client/src/app/gridGL/UI/Cursor.ts

@@ -131,12 +131,13 @@ export class Cursor extends Graphics {
       // endCell is only interesting for one multiCursor since we use it to draw
       // the indicator, which is only active for one multiCursor
       const multiCursor = cursor.multiCursor[0];
+      const startCell = sheet.getCellOffsets(multiCursor.left, multiCursor.top);
       this.endCell = sheet.getCellOffsets(multiCursor.right - 1, multiCursor.bottom - 1);
       this.cursorRectangle = new Rectangle(
-        this.startCell.x,
-        this.startCell.y,
-        this.endCell.x + this.endCell.width - this.startCell.x,
-        this.endCell.y + this.endCell.height - this.startCell.y
+        startCell.x,
+        startCell.y,
+        this.endCell.x + this.endCell.width - startCell.x,
+        this.endCell.y + this.endCell.height - startCell.y
       );
     } else {
       this.endCell = sheet.getCellOffsets(cursor.cursorPosition.x, cursor.cursorPosition.y);

quadratic-client/src/app/gridGL/interaction/pointer/PointerCellMoving.ts

@@ -75,12 +75,10 @@ export class PointerCellMoving {
       throw new Error('Expected moving to be defined in pointerMoveMoving');
     }
     const sheet = sheets.sheet;
-    const position = sheet.getColumnRowFromScreen(world.x + this.moving.offset.x, world.y + this.moving.offset.y);
-    if (this.moving.toColumn !== position.column || this.moving.toRow !== position.row) {
-      this.moving.toColumn = position.column;
-      this.moving.toRow = position.row;
-      pixiApp.cellMoving.dirty = true;
-    }
+    const position = sheet.getColumnRowFromScreen(world.x, world.y);
+    this.moving.toColumn = position.column + this.moving.offset.x;
+    this.moving.toRow = position.row + this.moving.offset.y;
+    pixiApp.cellMoving.dirty = true;
   }
 
   private moveOverlaps(world: Point): false | 'corner' | 'top' | 'bottom' | 'left' | 'right' {
@@ -162,13 +160,11 @@ export class PointerCellMoving {
       this.state = 'hover';
       const screenRectangle = pixiApp.cursor.cursorRectangle;
       if (!screenRectangle) return false;
-      let adjustX = 0,
-        adjustY = 0;
-      if (overlap === 'right') {
-        adjustX = sheets.sheet.offsets.getColumnWidth(rectangle.right);
-      } else if (overlap === 'bottom') {
-        adjustY = sheets.sheet.offsets.getRowHeight(rectangle.bottom);
-      }
+
+      // the offset is the clamped value of the rectangle based on where the user clicks
+      const offset = sheets.sheet.getColumnRowFromScreen(world.x, world.y);
+      offset.column = Math.min(Math.max(offset.column, rectangle.left), rectangle.right);
+      offset.row = Math.min(Math.max(offset.row, rectangle.top), rectangle.bottom);
       this.moving = {
         column,
         row,
@@ -177,8 +173,8 @@ export class PointerCellMoving {
         toColumn: column,
         toRow: row,
         offset: {
-          x: screenRectangle.x - world.x + adjustX,
-          y: screenRectangle.y - world.y + adjustY,
+          x: rectangle.left - offset.column,
+          y: rectangle.top - offset.row,
         },
       };
       return true;
@@ -211,6 +207,25 @@ export class PointerCellMoving {
           this.moving.toRow,
           sheets.sheet.id
         );
+
+        // if we moved the code cell, we need to repopulate the code editor with
+        // unsaved content.
+        if (pixiAppSettings.unsavedEditorChanges) {
+          const state = pixiAppSettings.editorInteractionState;
+          if (
+            state.selectedCellSheet === sheets.sheet.id &&
+            intersects.rectanglePoint(rectangle, new Point(state.selectedCell.x, state.selectedCell.y))
+          ) {
+            pixiAppSettings.setEditorInteractionState?.({
+              ...pixiAppSettings.editorInteractionState,
+              initialCode: pixiAppSettings.unsavedEditorChanges,
+              selectedCell: {
+                x: state.selectedCell.x + this.moving.toColumn - this.moving.column,
+                y: state.selectedCell.y + this.moving.toRow - this.moving.row,
+              },
+            });
+          }
+        }
       }
       this.reset();
       return true;

quadratic-client/src/app/gridGL/interaction/pointer/doubleClickCell.ts

@@ -40,6 +40,12 @@ export function doubleClickCell(options: {
       });
     } else {
       if (hasPermission && formula) {
+        const cursor = sheets.sheet.cursor.cursorPosition;
+
+        // ensure we're in the right cell (which may change if we double clicked on a CodeRun)
+        if (cursor.x !== column || cursor.y !== row) {
+          sheets.sheet.cursor.changePosition({ cursorPosition: { x: column, y: row } });
+        }
         settings.changeInput(true, cell);
       } else {
         settings.setEditorInteractionState({

quadratic-client/src/app/gridGL/pixiApp/PixiAppSettings.ts

@@ -28,7 +28,10 @@ class PixiAppSettings {
   private lastSettings: GridSettings;
   private _panMode: PanMode;
   private _input: Input;
-  unsavedEditorChanges = false;
+
+  // Keeps track of code editor content. This is used when moving code cells to
+  // keep track of any unsaved changes, and keyboardCell.
+  unsavedEditorChanges?: string;
 
   temporarilyHideCellTypeOutlines = false;
   editorInteractionState = editorInteractionStateDefault;

quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx

@@ -86,7 +86,8 @@ export const CodeEditor = () => {
 
     // we use the for keyboardCell so we know whether we can delete a cell with
     // the code editor open
-    pixiAppSettings.unsavedEditorChanges = unsaved;
+    pixiAppSettings.unsavedEditorChanges = unsaved ? editorContent : undefined;
+
     return unsaved;
   }, [codeString, editorContent]);
 

quadratic-client/src/app/ui/menus/CodeEditor/CodeEditorBody.tsx

@@ -71,7 +71,6 @@ export const CodeEditorBody = (props: Props) => {
 
   useEffect(() => {
     const insertText = (text: string) => {
-      debugger;
       if (!editorRef.current) return;
       const position = editorRef.current.getPosition();
       const model = editorRef.current.getModel();

quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/javascriptCompile.ts

@@ -23,7 +23,7 @@ export async function javascriptFindSyntaxError(transformed: {
   imports: string;
 }): Promise<{ text: string; lineNumber?: number } | false> {
   try {
-    await esbuild.transform(`${transformed.imports};(async() => {;${transformed.code};})()`, { loader: 'js' });
+    await esbuild.transform(`${transformed.imports};(async() => {;${transformed.code};\n})()`, { loader: 'js' });
     return false;
   } catch (e: any) {
     const error = e as esbuild.TransformFailure;
@@ -79,7 +79,6 @@ export function javascriptAddLineNumberVars(transform: JavascriptTransformedCode
       add++;
     }
   }
-  console.log(s);
   return s;
 }