Javascript

package.json

@@ -56,6 +56,7 @@
     "docker:up": "docker compose up -d --wait && npm run prisma:migrate --workspace=quadratic-api",
     "docker:down": "docker compose down",
     "docker:down:kill-volumes": "docker compose down -v",
+    "copy:esbuild": "cp -f node_modules/esbuild-wasm/esbuild.wasm quadratic-client/public/",
     "gen:pyright:initialization": "npm run gen:pyright:worker --workspace=quadratic-kernels/python-wasm",
     "gen:pyright:worker": "npm run gen:pyright:worker --workspace=quadratic-kernels/python-wasm"
   },

quadratic-client/.prettierignore

@@ -4,4 +4,5 @@ src/shared/shadcn/ui
 src/app/web-workers/pythonLanguageServer/pyright-initialization.json
 src/app/quadratic-core
 src/app/quadratic-core-types
-src/app/quadratic-rust-client
+src/app/quadratic-rust-client
+src/app/web-workers/javascriptWebWorker/worker/javascript/runner

quadratic-client/package.json

@@ -48,6 +48,7 @@
     "clsx": "^2.0.0",
     "cmdk": "^1.0.0",
     "color": "^4.2.3",
+    "esbuild-wasm": "^0.20.2",
     "eventemitter3": "^5.0.1",
     "fontfaceobserver": "^2.3.0",
     "fuzzysort": "^2.0.4",

quadratic-client/src/app/atoms/useJavascriptState.ts

@@ -0,0 +1,18 @@
+import { events } from '@/app/events/events';
+import { javascriptWebWorker } from '@/app/web-workers/javascriptWebWorker/javascriptWebWorker';
+import { LanguageState } from '@/app/web-workers/languageTypes';
+import { useEffect, useState } from 'react';
+
+export const useJavascriptState = (): LanguageState => {
+  const [state, setState] = useState<LanguageState>(javascriptWebWorker.state);
+
+  useEffect(() => {
+    const updatePythonState = (state: LanguageState) => setState(state);
+    events.on('javascriptState', updatePythonState);
+    return () => {
+      events.off('javascriptState', updatePythonState);
+    };
+  }, []);
+
+  return state;
+};

quadratic-client/src/app/atoms/usePythonState.ts

@@ -1,15 +1,15 @@
 import { events } from '@/app/events/events';
-import { PythonStateType } from '@/app/web-workers/pythonWebWorker/pythonClientMessages';
+import { LanguageState } from '@/app/web-workers/languageTypes';
 import { pythonWebWorker } from '@/app/web-workers/pythonWebWorker/pythonWebWorker';
 import { useEffect, useState } from 'react';
 
-export const usePythonState = (): { pythonState: PythonStateType; version?: string } => {
-  const [pythonState, setPythonState] = useState<PythonStateType>(pythonWebWorker.state);
+export const usePythonState = (): { pythonState: LanguageState; version?: string } => {
+  const [pythonState, setPythonState] = useState<LanguageState>(pythonWebWorker.state);
   const [version, setVersion] = useState<string | undefined>(undefined);
 
   useEffect(() => {
     const updatePythonVersion = (version: string) => setVersion(version);
-    const updatePythonState = (state: PythonStateType) => {
+    const updatePythonState = (state: LanguageState) => {
       setPythonState(state);
     };
     events.on('pythonInit', updatePythonVersion);

quadratic-client/src/app/events/events.ts

@@ -12,10 +12,12 @@ import {
   SheetBounds,
   SheetInfo,
 } from '@/app/quadratic-core-types';
+import { LanguageState } from '@/app/web-workers/languageTypes';
 import { MultiplayerState } from '@/app/web-workers/multiplayerWebWorker/multiplayerClientMessages';
 import { CellEdit, MultiplayerUser } from '@/app/web-workers/multiplayerWebWorker/multiplayerTypes';
-import { CodeRun, PythonStateType } from '@/app/web-workers/pythonWebWorker/pythonClientMessages';
+import { CodeRun } from '@/app/web-workers/pythonWebWorker/pythonClientMessages';
 import {
+  CoreClientImage,
   CoreClientImportProgress,
   CoreClientTransactionProgress,
   CoreClientTransactionStart,
@@ -56,14 +58,18 @@ interface EventTypes {
   renderCodeCells: (sheetId: string, codeCells: JsRenderCodeCell[]) => void;
 
   pythonInit: (version: string) => void;
-  pythonState: (state: PythonStateType, current?: CodeRun, awaitingExecution?: CodeRun[]) => void;
+  pythonState: (state: LanguageState, current?: CodeRun, awaitingExecution?: CodeRun[]) => void;
+  javascriptInit: (version: string) => void;
+  javascriptState: (state: LanguageState, current?: CodeRun, awaitingExecution?: CodeRun[]) => void;
+
   updateCodeCell: (options: {
     sheetId: string;
     x: number;
     y: number;
     codeCell?: JsCodeCell;
     renderCodeCell?: JsRenderCodeCell;
   }) => void;
+  updateImage: (message: CoreClientImage) => void;
 
   importProgress: (message: CoreClientImportProgress) => void;
   transactionStart: (message: CoreClientTransactionStart) => void;

quadratic-client/src/app/gridGL/HTMLGrid/codeRunning/CodeRunning.tsx

@@ -1,7 +1,8 @@
 import { events } from '@/app/events/events';
 import { sheets } from '@/app/grid/controller/Sheets';
+import { LanguageState } from '@/app/web-workers/languageTypes';
 import { MultiplayerUser } from '@/app/web-workers/multiplayerWebWorker/multiplayerTypes';
-import { CodeRun, PythonStateType } from '@/app/web-workers/pythonWebWorker/pythonClientMessages';
+import { CodeRun } from '@/app/web-workers/pythonWebWorker/pythonClientMessages';
 import { CircularProgress } from '@mui/material';
 import { useEffect, useState } from 'react';
 import './CodeRunning.css';
@@ -23,7 +24,7 @@ export const CodeRunning = () => {
 
   // update player's code runs
   useEffect(() => {
-    const updatePythonState = (_state: PythonStateType, current?: CodeRun, awaitingExecution?: CodeRun[]) => {
+    const updateRunningState = (_state: LanguageState, current?: CodeRun, awaitingExecution?: CodeRun[]) => {
       const code: Code[] = [];
       if (current) {
         const rectangle = sheets.sheet.getCellOffsets(current.sheetPos.x, current.sheetPos.y);
@@ -47,7 +48,8 @@ export const CodeRunning = () => {
       });
       setPlayerCode(code);
     };
-    events.on('pythonState', updatePythonState);
+    events.on('pythonState', updateRunningState);
+    events.on('javascriptState', updateRunningState);
   }, []);
 
   // update multiplayer's code runs

quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorMonaco.ts

@@ -5,9 +5,10 @@ import { inlineEditorKeyboard } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineE
 import { CURSOR_THICKNESS } from '@/app/gridGL/UI/Cursor';
 import { provideCompletionItems, provideHover } from '@/app/quadratic-rust-client/quadratic_rust_client';
 import { FormulaLanguageConfig, FormulaTokenizerConfig } from '@/app/ui/menus/CodeEditor/FormulaLanguageModel';
-import * as monaco from 'monaco-editor';
 import { editor } from 'monaco-editor';
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import * as monaco from 'monaco-editor';
+import DefaultEditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import TsEditorWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 
 const theme: editor.IStandaloneThemeData = {
   base: 'vs',
@@ -17,11 +18,17 @@ const theme: editor.IStandaloneThemeData = {
 };
 monaco.editor.defineTheme('inline-editor', theme);
 
-// We are only defining the worker for the editor itself. We may need other
-// types down the road, however.
+// This is where we globally define worker types for Monaco. See
+// https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md
 window.MonacoEnvironment = {
   getWorker(_, label) {
-    return new editorWorker();
+    switch (label) {
+      case 'typescript':
+      case 'javascript':
+        return new TsEditorWorker({ name: label });
+      default:
+        return new DefaultEditorWorker({ name: label });
+    }
   },
 };
 

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

@@ -57,9 +57,13 @@ export class Cursor extends Graphics {
     const editor_selected_cell = editorInteractionState.selectedCell;
 
     // draw cursor but leave room for cursor indicator if needed
-    const indicatorSize = hasPermissionToEditFile(pixiAppSettings.editorInteractionState.permissions)
-      ? Math.max(INDICATOR_SIZE / viewport.scale.x, 4)
-      : 0;
+    const indicatorSize =
+      hasPermissionToEditFile(pixiAppSettings.editorInteractionState.permissions) &&
+      (!pixiAppSettings.editorInteractionState.showCodeEditor ||
+        cursor.cursorPosition.x !== editor_selected_cell.x ||
+        cursor.cursorPosition.y !== editor_selected_cell.y)
+        ? Math.max(INDICATOR_SIZE / viewport.scale.x, 4)
+        : 0;
     this.indicator.width = this.indicator.height = indicatorSize;
     const indicatorPadding = Math.max(INDICATOR_PADDING / viewport.scale.x, 1);
     let indicatorOffset = 0;
@@ -169,12 +173,7 @@ export class Cursor extends Graphics {
           editor_selected_cell.x === cell.x &&
           editor_selected_cell.y === cell.y)
       )
-        color =
-          editorInteractionState.mode === 'Python'
-            ? colors.cellColorUserPython
-            : editorInteractionState.mode === 'Formula'
-            ? colors.cellColorUserFormula
-            : colors.cursorCell;
+        color = colors.cursorCell;
       this.beginFill(color).drawShape(this.indicator).endFill();
     }
   }
@@ -198,11 +197,13 @@ export class Cursor extends Graphics {
           ? colors.cellColorUserPython
           : editorInteractionState.mode === 'Formula'
           ? colors.cellColorUserFormula
+          : editorInteractionState.mode === 'Javascript'
+          ? colors.cellColorUserJavascript
           : colors.independence;
     }
     if (!color || !offsets) return;
     this.lineStyle({
-      width: CURSOR_THICKNESS * 1.5,
+      width: CURSOR_THICKNESS * 1,
       color,
       alignment: 0.5,
     });

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

@@ -0,0 +1,143 @@
+import { events } from '@/app/events/events';
+import { convertColorStringToTint } from '@/app/helpers/convertColor';
+import { colors } from '@/app/theme/colors';
+import { Container, Graphics } from 'pixi.js';
+import { CellsImage } from '../cells/cellsImages/CellsImage';
+import { pixiApp } from '../pixiApp/PixiApp';
+
+// These should be consistent with ResizeControl.tsx
+export const IMAGE_BORDER_WIDTH = 5;
+export const IMAGE_BORDER_OFFSET = 2;
+const TRANSITION_DELAY_MS = 200;
+const TRANSITION_TIME_MS = 300;
+
+export class UICellImages extends Container {
+  private borders: Graphics;
+  private resizing: Graphics;
+
+  private active?: CellsImage;
+  private animationState?: 'delay-enter' | 'delay-exit' | 'enter' | 'exit';
+  private animationTime = 0;
+  private animationLastTime = 0;
+
+  dirtyBorders = false;
+  dirtyResizing = false;
+
+  constructor() {
+    super();
+    this.borders = this.addChild(new Graphics());
+    this.resizing = this.addChild(new Graphics());
+    events.on('changeSheet', this.changeSheet);
+  }
+
+  private changeSheet = () => {
+    this.active = undefined;
+    this.dirtyBorders = true;
+    this.dirtyResizing = true;
+  };
+
+  activate(sprite?: CellsImage) {
+    if (!sprite && this.active) {
+      this.active = undefined;
+      this.animationState = 'delay-exit';
+      this.animationLastTime = Date.now();
+      this.animationTime = 0;
+    } else if (this.active !== sprite) {
+      this.active = sprite;
+      this.dirtyResizing = true;
+      this.animationTime = 0;
+      this.animationState = 'delay-enter';
+      this.resizing.alpha = 0;
+      this.animationLastTime = Date.now();
+    }
+  }
+
+  drawBorders(): boolean {
+    if (this.dirtyBorders) {
+      this.dirtyBorders = false;
+      this.borders.clear();
+      const images = pixiApp.cellsSheets.current?.getCellsImages();
+      if (!images) return true;
+      const color = convertColorStringToTint(colors.quadraticPrimary);
+      this.borders.lineStyle({ color, width: 1 });
+      images.forEach((image) => {
+        this.borders.drawRect(image.x, image.y, image.width, image.height);
+      });
+      return true;
+    }
+    return false;
+  }
+
+  drawResizing(): boolean {
+    if (this.dirtyResizing) {
+      this.dirtyResizing = false;
+
+      this.resizing.clear();
+      if (this.active) {
+        const color = convertColorStringToTint(colors.quadraticPrimary);
+        this.resizing.lineStyle({ color, width: IMAGE_BORDER_WIDTH });
+
+        // vertical line on the right
+        this.resizing.moveTo(this.active.x + this.active.width + IMAGE_BORDER_OFFSET, this.active.y);
+        this.resizing.lineTo(
+          this.active.x + this.active.width,
+          this.active.y + this.active.height + IMAGE_BORDER_OFFSET
+        );
+
+        // horizontal line on the bottom
+        this.resizing.moveTo(this.active.x, this.active.y + this.active.height + IMAGE_BORDER_OFFSET);
+        this.resizing.lineTo(
+          this.active.x + this.active.width + IMAGE_BORDER_OFFSET,
+          this.active.y + this.active.height
+        );
+      }
+      return true;
+    }
+    return false;
+  }
+
+  private easeInOutSine(time: number, duration: number): number {
+    let t = time / duration;
+    return 0.5 * (1 - Math.cos(t * Math.PI));
+  }
+
+  get dirty(): boolean {
+    return !!this.animationState || this.dirtyBorders || this.dirtyResizing;
+  }
+
+  update(): boolean {
+    if (this.animationState) {
+      const now = Date.now();
+      this.animationTime += now - this.animationLastTime;
+      this.animationLastTime = now;
+      if (this.animationState.includes('delay')) {
+        if (this.animationTime > TRANSITION_DELAY_MS) {
+          this.animationState = this.animationState.replace('delay-', '') as 'enter' | 'exit';
+          this.animationTime -= TRANSITION_DELAY_MS;
+        }
+      }
+      if (this.animationState === 'enter') {
+        if (this.animationTime > TRANSITION_TIME_MS) {
+          this.animationState = undefined;
+          this.resizing.alpha = 1;
+        } else {
+          this.resizing.alpha = this.easeInOutSine(this.animationTime, TRANSITION_TIME_MS) as number;
+        }
+      } else if (this.animationState === 'exit') {
+        if (this.animationTime > TRANSITION_TIME_MS) {
+          this.animationState = undefined;
+          this.resizing.alpha = 0;
+        } else {
+          this.resizing.alpha = (1 - this.easeInOutSine(this.animationTime, TRANSITION_TIME_MS)) as number;
+        }
+      }
+      this.drawBorders();
+      this.drawResizing();
+      return true;
+    } else {
+      let rendered = this.drawBorders();
+      if (this.drawResizing()) return true;
+      return rendered;
+    }
+  }
+}

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

@@ -77,7 +77,7 @@ export const drawMultiCursor = (g: Graphics, color: number, alpha: number, recta
   const sheet = sheets.sheet;
   g.lineStyle(1, color, 1, 0, true);
   g.beginFill(color, alpha);
-  rectangles.forEach((rectangle, index) => {
+  rectangles.forEach((rectangle) => {
     const rect = sheet.getScreenRectangle(rectangle.x, rectangle.y, rectangle.width - 1, rectangle.height - 1);
     g.drawShape(rect);
   });