From 245973a6904b53478994a024e419e8ce87d0756c Mon Sep 17 00:00:00 2001 From: David Figatner Date: Wed, 3 Jul 2024 05:36:18 +0800 Subject: [PATCH 1/8] better move cells --- quadratic-client/src/app/gridGL/UI/Cursor.ts | 5 ++-- .../interaction/pointer/PointerCellMoving.ts | 26 ++++++++----------- 2 files changed, 14 insertions(+), 17 deletions(-) diff --git a/quadratic-client/src/app/gridGL/UI/Cursor.ts b/quadratic-client/src/app/gridGL/UI/Cursor.ts index d3a1654271..2d56e9e296 100644 --- a/quadratic-client/src/app/gridGL/UI/Cursor.ts +++ b/quadratic-client/src/app/gridGL/UI/Cursor.ts @@ -131,10 +131,11 @@ 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, + startCell.x, + startCell.y, this.endCell.x + this.endCell.width - this.startCell.x, this.endCell.y + this.endCell.height - this.startCell.y ); diff --git a/quadratic-client/src/app/gridGL/interaction/pointer/PointerCellMoving.ts b/quadratic-client/src/app/gridGL/interaction/pointer/PointerCellMoving.ts index ad11c0eedf..12c9e9380a 100644 --- a/quadratic-client/src/app/gridGL/interaction/pointer/PointerCellMoving.ts +++ b/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; From c435ca0b1f6ed8cc22b9dfe53854f2c2cf8cbd9e Mon Sep 17 00:00:00 2001 From: David Figatner Date: Thu, 4 Jul 2024 04:39:31 +0800 Subject: [PATCH 2/8] fix bug with backwards selection --- quadratic-client/src/app/gridGL/UI/Cursor.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/quadratic-client/src/app/gridGL/UI/Cursor.ts b/quadratic-client/src/app/gridGL/UI/Cursor.ts index 2d56e9e296..efa86ff93c 100644 --- a/quadratic-client/src/app/gridGL/UI/Cursor.ts +++ b/quadratic-client/src/app/gridGL/UI/Cursor.ts @@ -136,8 +136,8 @@ export class Cursor extends Graphics { this.cursorRectangle = new Rectangle( startCell.x, startCell.y, - this.endCell.x + this.endCell.width - this.startCell.x, - this.endCell.y + this.endCell.height - this.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); From 3f26c48bd852bc88b66f529858e567407b3978ef Mon Sep 17 00:00:00 2001 From: David Figatner Date: Thu, 4 Jul 2024 04:42:28 +0800 Subject: [PATCH 3/8] remove console.log and debugger statement --- quadratic-client/src/app/ui/menus/CodeEditor/CodeEditorBody.tsx | 1 - .../javascriptWebWorker/worker/javascript/javascriptCompile.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditorBody.tsx b/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditorBody.tsx index c88f1e8462..58a02e5192 100644 --- a/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditorBody.tsx +++ b/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(); diff --git a/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/javascriptCompile.ts b/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/javascriptCompile.ts index 45974987f9..b27733c6fc 100644 --- a/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/javascriptCompile.ts +++ b/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/javascriptCompile.ts @@ -79,7 +79,6 @@ export function javascriptAddLineNumberVars(transform: JavascriptTransformedCode add++; } } - console.log(s); return s; } From 448e4892eec4e6dd0765bff63b8d9a38f258c262 Mon Sep 17 00:00:00 2001 From: David Figatner Date: Thu, 4 Jul 2024 04:55:42 +0800 Subject: [PATCH 4/8] allow moving of code cells --- .../gridGL/interaction/pointer/PointerCellMoving.ts | 13 +++++++++++++ .../src/app/gridGL/pixiApp/PixiAppSettings.ts | 5 ++++- .../src/app/ui/menus/CodeEditor/CodeEditor.tsx | 3 ++- 3 files changed, 19 insertions(+), 2 deletions(-) diff --git a/quadratic-client/src/app/gridGL/interaction/pointer/PointerCellMoving.ts b/quadratic-client/src/app/gridGL/interaction/pointer/PointerCellMoving.ts index 12c9e9380a..e90495a145 100644 --- a/quadratic-client/src/app/gridGL/interaction/pointer/PointerCellMoving.ts +++ b/quadratic-client/src/app/gridGL/interaction/pointer/PointerCellMoving.ts @@ -207,6 +207,19 @@ 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; diff --git a/quadratic-client/src/app/gridGL/pixiApp/PixiAppSettings.ts b/quadratic-client/src/app/gridGL/pixiApp/PixiAppSettings.ts index c5728d0c4a..dc4d6604d4 100644 --- a/quadratic-client/src/app/gridGL/pixiApp/PixiAppSettings.ts +++ b/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; diff --git a/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx b/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx index 9f9d0c94a4..62a77c877d 100644 --- a/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx +++ b/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]); From f8f60ebcbf71385ea473f20485e59ba66dc6507d Mon Sep 17 00:00:00 2001 From: David Figatner Date: Thu, 4 Jul 2024 04:56:51 +0800 Subject: [PATCH 5/8] fix bug with JS not compiling if no line return at end --- .../javascriptWebWorker/worker/javascript/javascriptCompile.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/javascriptCompile.ts b/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/javascriptCompile.ts index b27733c6fc..5c27d16c74 100644 --- a/quadratic-client/src/app/web-workers/javascriptWebWorker/worker/javascript/javascriptCompile.ts +++ b/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; From b26a3223f320178f34ac3f410c557092f51665b4 Mon Sep 17 00:00:00 2001 From: David Figatner Date: Thu, 4 Jul 2024 04:57:39 +0800 Subject: [PATCH 6/8] prettier --- .../gridGL/interaction/pointer/PointerCellMoving.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/quadratic-client/src/app/gridGL/interaction/pointer/PointerCellMoving.ts b/quadratic-client/src/app/gridGL/interaction/pointer/PointerCellMoving.ts index e90495a145..ee9621e184 100644 --- a/quadratic-client/src/app/gridGL/interaction/pointer/PointerCellMoving.ts +++ b/quadratic-client/src/app/gridGL/interaction/pointer/PointerCellMoving.ts @@ -212,11 +212,17 @@ export class PointerCellMoving { // 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))) { + 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 }, + selectedCell: { + x: state.selectedCell.x + this.moving.toColumn - this.moving.column, + y: state.selectedCell.y + this.moving.toRow - this.moving.row, + }, }); } } From ae3a558ab3348652e489fd5a16fa60cdae64dcdc Mon Sep 17 00:00:00 2001 From: David Figatner Date: Fri, 5 Jul 2024 04:42:07 +0800 Subject: [PATCH 7/8] code hint shouldn't show on when content in cell --- quadratic-client/src/app/gridGL/HTMLGrid/CodeHint.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/CodeHint.tsx b/quadratic-client/src/app/gridGL/HTMLGrid/CodeHint.tsx index 62bd0462f3..bd7fa9628c 100644 --- a/quadratic-client/src/app/gridGL/HTMLGrid/CodeHint.tsx +++ b/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); From 9fffe2f8bb47d47e9f3687b092f4de34b91a7ebb Mon Sep 17 00:00:00 2001 From: David Figatner Date: Fri, 5 Jul 2024 04:56:09 +0800 Subject: [PATCH 8/8] fix bug with double clicking in CodeRun --- .../src/app/gridGL/interaction/pointer/doubleClickCell.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/quadratic-client/src/app/gridGL/interaction/pointer/doubleClickCell.ts b/quadratic-client/src/app/gridGL/interaction/pointer/doubleClickCell.ts index bbe208ab26..fd534b29da 100644 --- a/quadratic-client/src/app/gridGL/interaction/pointer/doubleClickCell.ts +++ b/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({