feat: save cursor position with undo/redo (#455)

---------

Co-authored-by: David Kircos <davidkircos@gmail.com>
Co-authored-by: Jim Nielsen <jimniels@gmail.com>

src/grid/controller/sheetController.ts

@@ -5,6 +5,7 @@ import { StatementRunner } from './runners/runner';
 import { PixiApp } from '../../gridGL/pixiApp/PixiApp';
 import * as Sentry from '@sentry/browser';
 import { debug } from '../../debugFlags';
+import { GridInteractionState } from '../../atoms/gridInteractionStateAtom';
 
 export class SheetController {
   app?: PixiApp; // TODO: Untangle PixiApp from SheetController.
@@ -34,7 +35,7 @@ export class SheetController {
   // execute_statement until end_transaction is called.
   //
 
-  public start_transaction(): void {
+  public start_transaction(interactionState?: GridInteractionState): void {
     if (this.transaction_in_progress) {
       // during debug mode, throw an error
       // otherwise, capture the error and continue
@@ -45,11 +46,20 @@ export class SheetController {
       this.end_transaction();
     }
 
+    // This is useful when the user clicks outside of the active cell to another
+    // cell, so the cursor moves to that new cell and the transaction finishes
+    let cursor = undefined;
+    if (interactionState) {
+      cursor = { ...interactionState, showInput: false };
+    } else if (this.app?.settings.interactionState) {
+      cursor = { ...this.app.settings.interactionState, showInput: false };
+    }
+
     // set transaction in progress to a new Transaction
     // transaction_in_progress represents the stack of commands needed
     // to undo the transaction currently being executed.
-    this.transaction_in_progress = { statements: [] };
-    this.transaction_in_progress_reverse = { statements: [] };
+    this.transaction_in_progress = { statements: [], cursor };
+    this.transaction_in_progress_reverse = { statements: [], cursor };
   }
 
   public execute_statement(statement: Statement): void {
@@ -135,9 +145,15 @@ export class SheetController {
     // add reverse transaction to redo stack
     this.redo_stack.push(reverse_transaction);
 
-    // TODO: The transaction should keep track of everything that becomes dirty while executing and then just sets the correct flags on app.
-    // This will be very inefficient on large files.
-    if (this.app) this.app.rebuild();
+    if (this.app) {
+      if (transaction.cursor) {
+        this.app.settings.setInteractionState?.(transaction.cursor);
+      }
+
+      // TODO: The transaction should keep track of everything that becomes dirty while executing and then just sets the correct flags on app.
+      // This will be very inefficient on large files.
+      this.app.rebuild();
+    }
   }
 
   public redo(): void {
@@ -169,9 +185,15 @@ export class SheetController {
     // add reverse transaction to undo stack
     this.undo_stack.push(reverse_transaction);
 
-    // TODO: The transaction should keep track of everything that becomes dirty while executing and then just sets the correct flags on app.
-    // This will be very inefficient on large files.
-    if (this.app) this.app.rebuild();
+    if (this.app) {
+      if (transaction.cursor) {
+        this.app.settings.setInteractionState?.(transaction.cursor);
+      }
+
+      // TODO: The transaction should keep track of everything that becomes dirty while executing and then just sets the correct flags on app.
+      // This will be very inefficient on large files.
+      this.app.rebuild();
+    }
   }
 
   public clear(): void {

src/grid/controller/transaction.ts

@@ -1,5 +1,7 @@
+import { GridInteractionState } from '../../atoms/gridInteractionStateAtom';
 import { Statement } from './statement';
 
 export type Transaction = {
   statements: Statement[];
+  cursor?: GridInteractionState;
 };

src/gridGL/interaction/CellInput.tsx

@@ -23,6 +23,9 @@ export const CellInput = (props: CellInputProps) => {
 
   const [value, setValue] = useState<string | undefined>(undefined);
 
+  // used to save interaction state when input starts
+  const [saveInteractionState, setSaveInteractionState] = useState<GridInteractionState>();
+
   const cellLocation = useRef(interactionState.cursorPosition);
   const textInput = useRef<HTMLInputElement>(null);
   // Effect for sizing the input width to the length of the value
@@ -82,6 +85,11 @@ export const CellInput = (props: CellInputProps) => {
     return null;
   }
 
+  // copy interaction state when input starts
+  if (!saveInteractionState) {
+    setSaveInteractionState(interactionState);
+  }
+
   // need this variable to cancel second closeInput call from blur after pressing Escape (this happens before the state can update)
   let closed = false;
 
@@ -91,6 +99,7 @@ export const CellInput = (props: CellInputProps) => {
     closed = true;
 
     if (!cancel) {
+      sheetController.start_transaction(saveInteractionState);
       // Update Cell and dependent cells
       if (value === '') {
         // delete cell if input is empty, and wasn't empty before
@@ -102,6 +111,7 @@ export const CellInput = (props: CellInputProps) => {
             y1: cellLocation.current.y,
             sheetController,
             app,
+            create_transaction: false,
           });
       } else {
         // create cell with value at input location
@@ -116,8 +126,10 @@ export const CellInput = (props: CellInputProps) => {
           ],
           sheetController,
           app,
+          create_transaction: false,
         });
       }
+      sheetController.end_transaction();
       app.quadrants.quadrantChanged({ cells: [cellLocation.current] });
     }
 
@@ -137,6 +149,8 @@ export const CellInput = (props: CellInputProps) => {
     });
     setValue(undefined);
 
+    setSaveInteractionState(undefined);
+
     // Set focus back to Grid
     focusGrid();