Marching ants on copy target

quadratic-client/src/app/grid/actions/clipboard/clipboard.ts

@@ -31,6 +31,7 @@ export const copyToClipboardEvent = async (e: ClipboardEvent) => {
   debugTimeReset();
   const jsClipboard = await quadraticCore.copyToClipboard(sheets.getRustSelection());
   await toClipboard(jsClipboard.plainText, jsClipboard.html);
+  pixiApp.copy.changeCopyRanges();
   debugTimeCheck('copy to clipboard');
 };
 
@@ -111,6 +112,7 @@ export const copyToClipboard = async () => {
   debugTimeReset();
   const jsClipboard = await quadraticCore.copyToClipboard(sheets.getRustSelection());
   await toClipboard(jsClipboard.plainText, jsClipboard.html);
+  pixiApp.copy.changeCopyRanges();
   debugTimeCheck('copy to clipboard');
 };
 

quadratic-client/src/app/grid/sheet/Sheet.ts

@@ -149,9 +149,14 @@ export class Sheet {
   }
 
   // @returns screen rectangle for a column/row rectangle
-  getScreenRectangle(column: number, row: number, width: number, height: number): Rectangle {
-    const topLeft = this.getCellOffsets(column, row);
-    const bottomRight = this.getCellOffsets(column + width, row + height);
+  getScreenRectangle(
+    column: number | BigInt,
+    row: number | BigInt,
+    width: number | BigInt,
+    height: number | BigInt
+  ): Rectangle {
+    const topLeft = this.getCellOffsets(Number(column), Number(row));
+    const bottomRight = this.getCellOffsets(Number(column) + Number(width), Number(row) + Number(height));
     return new Rectangle(topLeft.left, topLeft.top, bottomRight.left - topLeft.left, bottomRight.top - topLeft.top);
   }
 

quadratic-client/src/app/grid/sheet/SheetCursor.ts

@@ -288,4 +288,14 @@ export class SheetCursor {
       return [];
     }
   }
+
+  getRanges(): CellRefRange[] {
+    const rangesStringified = this.jsSelection.getRanges();
+    try {
+      return JSON.parse(rangesStringified);
+    } catch (e) {
+      console.error(e);
+      return [];
+    }
+  }
 }

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

@@ -0,0 +1,116 @@
+import { events } from '@/app/events/events';
+import { sheets } from '@/app/grid/controller/Sheets';
+import { DASHED } from '@/app/gridGL/generateTextures';
+import { intersects } from '@/app/gridGL/helpers/intersects';
+import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
+import { drawDashedRectangleMarching } from '@/app/gridGL/UI/cellHighlights/cellHighlightsDraw';
+import { getCSSVariableTint } from '@/app/helpers/convertColor';
+import { CellRefRange } from '@/app/quadratic-core-types';
+import { Graphics } from 'pixi.js';
+
+const MARCH_TIME = 80;
+const ALPHA = 0.5;
+
+// walking rectangle offset
+const RECT_OFFSET = 1;
+
+export class UICopy extends Graphics {
+  private sheetId?: string;
+  private ranges?: CellRefRange[];
+  private time = 0;
+  private march = 0;
+  private dirty = false;
+
+  constructor() {
+    super();
+    events.on('changeSheet', this.updateNextTick);
+    events.on('viewportChanged', this.updateNextTick);
+    events.on('transactionStart', this.clearCopyRanges);
+  }
+
+  destroy() {
+    events.off('changeSheet', this.updateNextTick);
+    events.off('transactionStart', this.clearCopyRanges);
+    super.destroy();
+  }
+
+  isShowing(): boolean {
+    return !!this.ranges && this.sheetId === sheets.sheet.id;
+  }
+
+  private updateNextTick = () => (this.dirty = true);
+
+  clearCopyRanges = () => {
+    this.clear();
+    pixiApp.setViewportDirty();
+    this.ranges = undefined;
+    this.sheetId = undefined;
+  };
+
+  changeCopyRanges() {
+    const range = sheets.sheet.cursor.getRanges();
+    this.ranges = range;
+    this.time = 0;
+    this.march = 0;
+    this.sheetId = sheets.sheet.id;
+  }
+
+  private draw() {
+    if (!this.ranges) return;
+    const bounds = pixiApp.viewport.getVisibleBounds();
+    let render = false;
+    this.ranges.forEach((cellRefRange) => {
+      if (!cellRefRange.range) return;
+      const range = cellRefRange.range;
+      let minX = Number(range.start.col.coord);
+      let minY = Number(range.start.row.coord);
+      let maxX: number;
+      if (range.end.col.coord < 0) {
+        maxX = bounds.width + DASHED;
+      } else {
+        minX = Math.min(minX, Number(range.end.col.coord));
+        maxX = Math.max(Number(range.start.col.coord), Number(range.end.col.coord));
+      }
+      let maxY: number;
+      if (range.end.row.coord < 0) {
+        maxY = bounds.height + DASHED;
+      } else {
+        minY = Math.min(minY, Number(range.end.row.coord));
+        maxY = Math.max(Number(range.start.row.coord), Number(range.end.row.coord));
+      }
+      const rect = sheets.sheet.getScreenRectangle(minX, minY, maxX - minX + 1, maxY - minY + 1);
+      rect.x += RECT_OFFSET;
+      rect.y += RECT_OFFSET;
+      rect.width -= RECT_OFFSET * 2;
+      rect.height -= RECT_OFFSET * 2;
+      const color = getCSSVariableTint('primary');
+      drawDashedRectangleMarching(this, color, rect, this.march, true, ALPHA);
+      if (!render) {
+        if (intersects.rectangleRectangle(rect, bounds)) {
+          render = true;
+        }
+      }
+    });
+    if (render) {
+      pixiApp.setViewportDirty();
+    }
+  }
+
+  update() {
+    if (!this.ranges) return;
+    if (this.sheetId !== sheets.sheet.id) {
+      this.clear();
+      return;
+    }
+    const drawFrame = Date.now() - this.time > MARCH_TIME;
+    if (drawFrame) {
+      this.march = (this.march + 1) % Math.floor(DASHED);
+      this.time = Date.now();
+    }
+    if (drawFrame || this.dirty) {
+      this.clear();
+      this.draw();
+      this.dirty = false;
+    }
+  }
+}

quadratic-client/src/app/gridGL/UI/cellHighlights/cellHighlightsDraw.ts

@@ -50,26 +50,38 @@ export function drawDashedRectangle(options: {
   }
 }
 
-export function drawDashedRectangleMarching(g: Graphics, color: number, startCell: Rectangle, march: number) {
+export function drawDashedRectangleMarching(
+  g: Graphics,
+  color: number,
+  startCell: Rectangle,
+  march: number,
+  noFill?: boolean,
+  alpha = 1
+) {
   const minX = startCell.x;
   const minY = startCell.y;
   const maxX = startCell.width + startCell.x;
   const maxY = startCell.y + startCell.height;
 
-  g.clear();
+  if (!noFill) {
+    g.clear();
+  }
 
   g.lineStyle({
     alignment: 0,
   });
-  g.moveTo(minX, minY);
-  g.beginFill(color, FILL_ALPHA);
-  g.drawRect(minX, minY, maxX - minX, maxY - minY);
-  g.endFill();
+  if (!noFill) {
+    g.beginFill(color, FILL_ALPHA);
+    g.drawRect(minX, minY, maxX - minX, maxY - minY);
+    g.endFill();
+  }
 
+  g.moveTo(minX, minY);
   g.lineStyle({
     width: CURSOR_THICKNESS,
     color,
     alignment: 0,
+    alpha,
   });
 
   const clamp = (n: number, min: number, max: number): number => {

quadratic-client/src/app/gridGL/interaction/keyboard/keyboardViewport.ts

@@ -68,6 +68,12 @@ export function keyboardViewport(event: React.KeyboardEvent<HTMLElement>): boole
 
   // Close overlay
   if (matchShortcut(Action.CloseOverlay, event)) {
+    // clear copy range if it is showing
+    if (pixiApp.copy.isShowing()) {
+      pixiApp.copy.clearCopyRanges();
+      return true;
+    }
+
     if (gridSettings.presentationMode) {
       setGridSettings({ ...gridSettings, presentationMode: false });
       return true;

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

@@ -13,6 +13,7 @@ import { GridLines } from '@/app/gridGL/UI/GridLines';
 import { HtmlPlaceholders } from '@/app/gridGL/UI/HtmlPlaceholders';
 import { UICellImages } from '@/app/gridGL/UI/UICellImages';
 import { UICellMoving } from '@/app/gridGL/UI/UICellMoving';
+import { UICopy } from '@/app/gridGL/UI/UICopy';
 import { UIMultiPlayerCursor } from '@/app/gridGL/UI/UIMultiplayerCursor';
 import { UIValidations } from '@/app/gridGL/UI/UIValidations';
 import { BoxCells } from '@/app/gridGL/UI/boxCells';
@@ -66,6 +67,7 @@ export class PixiApp {
   imagePlaceholders!: Container;
   cellImages!: UICellImages;
   validations: UIValidations;
+  copy: UICopy;
 
   renderer!: Renderer;
   stage = new Container();
@@ -90,6 +92,7 @@ export class PixiApp {
     this.validations = new UIValidations();
     this.viewport = new Viewport();
     this.background = new Background();
+    this.copy = new UICopy();
   }
 
   init() {
@@ -154,6 +157,7 @@ export class PixiApp {
     this.gridLines = this.viewportContents.addChild(new GridLines());
     this.boxCells = this.viewportContents.addChild(new BoxCells());
     this.cellImages = this.viewportContents.addChild(this.cellImages);
+    this.copy = this.viewportContents.addChild(this.copy);
     this.multiplayerCursor = this.viewportContents.addChild(new UIMultiPlayerCursor());
     this.cursor = this.viewportContents.addChild(new Cursor());
     this.htmlPlaceholders = this.viewportContents.addChild(new HtmlPlaceholders());

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

@@ -104,6 +104,8 @@ export class Update {
     pixiApp.validations.update(pixiApp.viewport.dirty);
     debugTimeCheck('[Update] backgrounds');
     pixiApp.background.update(pixiApp.viewport.dirty);
+    debugTimeCheck('[Update] copy');
+    pixiApp.copy.update();
 
     if (pixiApp.viewport.dirty || rendererDirty) {
       debugTimeReset();