perf: clipboard and move cells

.vscode/settings.json

@@ -78,7 +78,6 @@
     "healthchecks",
     "hljs",
     "HLOOKUP",
-    "htmlescape",
     "iloc",
     "indexeddb",
     "indexmap",

Cargo.toml

@@ -7,9 +7,7 @@ members = [
   "quadratic-multiplayer",
   "quadratic-rust-shared",
 ]
-exclude = [
-  "poc/number_type",
-]
+exclude = ["poc/number_type"]
 
 [workspace.package]
 authors = ["Quadratic"]

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

@@ -4,7 +4,8 @@ import { debugTimeCheck, debugTimeReset } from '@/app/gridGL/helpers/debugPerfor
 import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
 import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
 import { copyAsPNG } from '@/app/gridGL/pixiApp/copyAsPNG';
-import type { PasteSpecial } from '@/app/quadratic-core-types';
+import type { JsClipboard, PasteSpecial } from '@/app/quadratic-core-types';
+import { toUint8Array } from '@/app/shared/utils/Uint8Array';
 import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
 import type { GlobalSnackbar } from '@/shared/components/GlobalSnackbarProvider';
 import * as Sentry from '@sentry/react';
@@ -27,21 +28,33 @@ const canvasIsTarget = () => {
 };
 
 export const copyToClipboardEvent = async (e: ClipboardEvent) => {
-  if (!canvasIsTarget()) return;
-  e.preventDefault();
-  debugTimeReset();
-  await toClipboardCopy();
-  pixiApp.copy.changeCopyRanges();
-  debugTimeCheck('copy to clipboard');
+  try {
+    if (!canvasIsTarget()) return;
+    e.preventDefault();
+    debugTimeReset();
+    await toClipboardCopy();
+    pixiApp.copy.changeCopyRanges();
+    debugTimeCheck('copy to clipboard');
+  } catch (error) {
+    console.error(error);
+    pixiAppSettings.addGlobalSnackbar?.('Failed to copy to clipboard.', { severity: 'error' });
+    Sentry.captureException(error);
+  }
 };
 
 export const cutToClipboardEvent = async (e: ClipboardEvent) => {
-  if (!canvasIsTarget()) return;
-  if (!hasPermissionToEditFile(pixiAppSettings.permissions)) return;
-  e.preventDefault();
-  debugTimeReset();
-  await toClipboardCut();
-  debugTimeCheck('[Clipboard] cut to clipboard');
+  try {
+    if (!canvasIsTarget()) return;
+    if (!hasPermissionToEditFile(pixiAppSettings.permissions)) return;
+    e.preventDefault();
+    debugTimeReset();
+    await toClipboardCut();
+    debugTimeCheck('[Clipboard] cut to clipboard');
+  } catch (error) {
+    console.error(error);
+    pixiAppSettings.addGlobalSnackbar?.('Failed to cut to clipboard.', { severity: 'error' });
+    Sentry.captureException(error);
+  }
 };
 
 export const pasteFromClipboardEvent = (e: ClipboardEvent) => {
@@ -53,21 +66,29 @@ export const pasteFromClipboardEvent = (e: ClipboardEvent) => {
     return;
   }
   e.preventDefault();
-  let html: string | undefined;
-  let plainText: string | undefined;
 
-  if (e.clipboardData.types.includes('text/html')) {
-    html = e.clipboardData.getData('text/html');
-  }
+  let plainText = '';
   if (e.clipboardData.types.includes('text/plain')) {
     plainText = e.clipboardData.getData('text/plain');
   }
 
+  let html = '';
+  if (e.clipboardData.types.includes('text/html')) {
+    html = e.clipboardData.getData('text/html');
+  }
+
   if (plainText || html) {
-    quadraticCore.pasteFromClipboard({
-      selection: sheets.sheet.cursor.save(),
+    const jsClipboard: JsClipboard = {
       plainText,
       html,
+    };
+    const jsClipboardUint8Array = toUint8Array(jsClipboard);
+    plainText = '';
+    html = '';
+
+    quadraticCore.pasteFromClipboard({
+      selection: sheets.sheet.cursor.save(),
+      jsClipboard: jsClipboardUint8Array,
       special: 'None',
       cursor: sheets.getCursorPosition(),
     });
@@ -156,17 +177,29 @@ const toClipboardCopy = async () => {
 };
 
 export const cutToClipboard = async () => {
-  if (!hasPermissionToEditFile(pixiAppSettings.permissions)) return;
-  debugTimeReset();
-  await toClipboardCut();
-  debugTimeCheck('cut to clipboard (fallback)');
+  try {
+    if (!hasPermissionToEditFile(pixiAppSettings.permissions)) return;
+    debugTimeReset();
+    await toClipboardCut();
+    debugTimeCheck('cut to clipboard (fallback)');
+  } catch (error) {
+    console.error(error);
+    pixiAppSettings.addGlobalSnackbar?.('Failed to cut to clipboard.', { severity: 'error' });
+    Sentry.captureException(error);
+  }
 };
 
 export const copyToClipboard = async () => {
-  debugTimeReset();
-  await toClipboardCopy();
-  pixiApp.copy.changeCopyRanges();
-  debugTimeCheck('copy to clipboard');
+  try {
+    debugTimeReset();
+    await toClipboardCopy();
+    pixiApp.copy.changeCopyRanges();
+    debugTimeCheck('copy to clipboard');
+  } catch (error) {
+    console.error(error);
+    pixiAppSettings.addGlobalSnackbar?.('Failed to copy to clipboard.', { severity: 'error' });
+    Sentry.captureException(error);
+  }
 };
 
 export const copySelectionToPNG = async (addGlobalSnackbar: GlobalSnackbar['addGlobalSnackbar']) => {
@@ -201,47 +234,69 @@ export const copySelectionToPNG = async (addGlobalSnackbar: GlobalSnackbar['addG
 };
 
 export const pasteFromClipboard = async (special: PasteSpecial = 'None') => {
-  if (!hasPermissionToEditFile(pixiAppSettings.permissions)) return;
+  try {
+    if (!hasPermissionToEditFile(pixiAppSettings.permissions)) return;
 
-  if (fullClipboardSupport()) {
-    const clipboardData = await navigator.clipboard.read();
-
-    // get text/plain if available
-    const plainTextItem = clipboardData.find((item) => item.types.includes('text/plain'));
-    let plainText: string | undefined;
-    if (plainTextItem) {
-      const item = await plainTextItem.getType('text/plain');
-      plainText = await item.text();
-    }
+    if (fullClipboardSupport()) {
+      const clipboardData = await navigator.clipboard.read();
+
+      // get text/plain if available
+      let plainText = '';
+      const plainTextItem = clipboardData.find((item) => item.types.includes('text/plain'));
+      if (plainTextItem) {
+        const item = await plainTextItem.getType('text/plain');
+        plainText = await item.text();
+      }
 
-    // gets text/html if available
-    let html: string | undefined;
-    const htmlItem = clipboardData.find((item) => item.types.includes('text/html'));
-    if (htmlItem) {
-      const item = await htmlItem.getType('text/html');
-      html = await item.text();
+      // gets text/html if available
+      let html = '';
+      const htmlItem = clipboardData.find((item) => item.types.includes('text/html'));
+      if (htmlItem) {
+        const item = await htmlItem.getType('text/html');
+        html = await item.text();
+      }
+
+      if (plainText || html) {
+        const jsClipboard: JsClipboard = {
+          plainText,
+          html,
+        };
+        const jsClipboardUint8Array = toUint8Array(jsClipboard);
+        plainText = '';
+        html = '';
+
+        quadraticCore.pasteFromClipboard({
+          selection: sheets.sheet.cursor.save(),
+          jsClipboard: jsClipboardUint8Array,
+          special,
+          cursor: sheets.getCursorPosition(),
+        });
+      }
     }
-    quadraticCore.pasteFromClipboard({
-      selection: sheets.sheet.cursor.save(),
-      plainText,
-      html,
-      special,
-      cursor: sheets.getCursorPosition(),
-    });
-  }
 
-  // handles firefox using localStorage :(
-  else {
-    const html = (await localforage.getItem(clipboardLocalStorageKey)) as string;
-    if (html) {
-      quadraticCore.pasteFromClipboard({
-        selection: sheets.sheet.cursor.save(),
-        plainText: undefined,
-        html,
-        special,
-        cursor: sheets.getCursorPosition(),
-      });
+    // handles firefox using localStorage :(
+    else {
+      let html = (await localforage.getItem(clipboardLocalStorageKey)) as string;
+      if (html) {
+        const jsClipboard: JsClipboard = {
+          plainText: '',
+          html,
+        };
+        const jsClipboardUint8Array = toUint8Array(jsClipboard);
+        html = '';
+
+        quadraticCore.pasteFromClipboard({
+          selection: sheets.sheet.cursor.save(),
+          jsClipboard: jsClipboardUint8Array,
+          special,
+          cursor: sheets.getCursorPosition(),
+        });
+      }
     }
+  } catch (error) {
+    console.error(error);
+    pixiAppSettings.addGlobalSnackbar?.('Failed to paste from clipboard.', { severity: 'error' });
+    Sentry.captureException(error);
   }
 };
 

quadratic-client/src/app/gridGL/pixiApp/viewport/Viewport.ts

@@ -17,7 +17,7 @@ const MINIMUM_VIEWPORT_SCALE = 0.01;
 const MAXIMUM_VIEWPORT_SCALE = 10;
 const WHEEL_ZOOM_PERCENT = 1.5;
 
-export const WAIT_TO_SNAP_TIME = 200;
+const WAIT_TO_SNAP_TIME = 200;
 const SNAPPING_TIME = 50;
 
 type SnapState = 'waiting' | 'snapping' | undefined;

quadratic-client/src/app/ui/components/ImportProgress.tsx

@@ -1,17 +1,16 @@
 import { filesImportProgressAtom } from '@/dashboard/atoms/filesImportProgressAtom';
-import { Button } from '@/shared/shadcn/ui/button';
 import { Progress } from '@/shared/shadcn/ui/progress';
+import { memo } from 'react';
 import { useRecoilValue } from 'recoil';
 
-export const ImportProgress = () => {
+export const ImportProgress = memo(() => {
   const { importing, files, currentFileIndex } = useRecoilValue(filesImportProgressAtom);
   if (!importing || currentFileIndex === undefined) return;
 
   const fileNo = currentFileIndex + 1;
   const totalFiles = files.length;
   const name = files[currentFileIndex].name;
   const progress = files[currentFileIndex].progress;
-  const abortController = files[currentFileIndex].abortController;
 
   return (
     <div className="absolute bottom-4 left-4 z-50 w-96 select-none rounded border border-border bg-background pb-2 pl-4 pr-4 pt-2 tracking-tight shadow-lg">
@@ -25,18 +24,9 @@ export const ImportProgress = () => {
             {name}
           </div>
         </div>
-
-        <Button
-          variant="outline"
-          size="sm"
-          disabled={abortController === undefined}
-          onClick={() => abortController?.abort()}
-        >
-          Cancel
-        </Button>
       </div>
 
       <Progress key={fileNo} value={progress} />
     </div>
   );
-};
+});

quadratic-client/src/app/ui/menus/BottomBar/TopLeftPosition.tsx

@@ -1,35 +1,28 @@
 import { events } from '@/app/events/events';
 import { sheets } from '@/app/grid/controller/Sheets';
 import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
-import { WAIT_TO_SNAP_TIME } from '@/app/gridGL/pixiApp/viewport/Viewport';
 import { xyToA1 } from '@/app/quadratic-core/quadratic_core';
 import { useEffect, useState } from 'react';
 
 export const TopLeftPosition = () => {
   const [topLeftCoordinate, SetTopLeftCoordinate] = useState('');
 
   useEffect(() => {
-    let timeoutId: NodeJS.Timeout | undefined;
     const updateTopLeftCoordinate = () => {
-      // need to wait for the animation to complete before querying the viewport location
-      timeoutId = setTimeout(() => {
-        timeoutId = undefined;
-        const topLeft = pixiApp.viewport.getVisibleBounds();
-        const gridHeadings = pixiApp.headings.headingSize;
-        const topLeftCoordinate = sheets.sheet.getColumnRowFromScreen(
-          topLeft.x + gridHeadings.width,
-          topLeft.y + gridHeadings.height
-        );
-        SetTopLeftCoordinate(xyToA1(topLeftCoordinate.column, topLeftCoordinate.row));
-      }, WAIT_TO_SNAP_TIME);
+      const topLeft = pixiApp.viewport.getVisibleBounds();
+      const gridHeadings = pixiApp.headings.headingSize;
+      const topLeftCoordinate = sheets.sheet.getColumnRowFromScreen(
+        topLeft.x + gridHeadings.width,
+        topLeft.y + gridHeadings.height
+      );
+      SetTopLeftCoordinate(xyToA1(topLeftCoordinate.column, topLeftCoordinate.row));
     };
+
     updateTopLeftCoordinate();
-    events.on('viewportChanged', updateTopLeftCoordinate);
+
+    events.on('viewportReadyAfterUpdate', updateTopLeftCoordinate);
     return () => {
-      events.off('viewportChanged', updateTopLeftCoordinate);
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
+      events.off('viewportReadyAfterUpdate', updateTopLeftCoordinate);
     };
   }, []);
 

quadratic-client/src/app/web-workers/quadraticCore/coreClientMessages.ts

@@ -657,8 +657,7 @@ export interface CoreClientCutToClipboard {
 export interface ClientCorePasteFromClipboard {
   type: 'clientCorePasteFromClipboard';
   selection: string;
-  plainText: string | undefined;
-  html: string | undefined;
+  jsClipboard: Uint8Array;
   special: string;
   cursor: string;
 }

quadratic-client/src/app/web-workers/quadraticCore/quadraticCore.ts

@@ -869,17 +869,18 @@ class QuadraticCore {
     });
   }
 
-  pasteFromClipboard(options: {
-    selection: string;
-    plainText: string | undefined;
-    html: string | undefined;
-    special: PasteSpecial;
-    cursor: string;
-  }) {
-    this.send({
-      type: 'clientCorePasteFromClipboard',
-      ...options,
-    });
+  pasteFromClipboard(options: { selection: string; jsClipboard: Uint8Array; special: PasteSpecial; cursor: string }) {
+    const { selection, jsClipboard, special, cursor } = options;
+    this.send(
+      {
+        type: 'clientCorePasteFromClipboard',
+        selection,
+        jsClipboard,
+        special,
+        cursor,
+      },
+      jsClipboard.buffer
+    );
   }
 
   //#endregion