#7808 Throttle mousemove to improve dragging performance in sketching (#7812)

* throttle mousemove events to avoid executeAstMock to be invoked while a previous one is still running

* Update snapshots

* Update snapshots

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: andrewvarga

e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-segments-should-look-right-3-Google-Chrome-linux.png

@@ -1185,7 +1185,7 @@ export class SceneEntities {
           )
         }
       },
-      onMove: (args) => {
+      onMove: async (args) => {
         const expressionIndex = Number(sketchEntryNodePath[1][0])
         const activeSegmentsInCorrectExpression = Object.values(
           this.activeSegments
@@ -1196,7 +1196,7 @@ export class SceneEntities {
           activeSegmentsInCorrectExpression[
             activeSegmentsInCorrectExpression.length - 1
           ]
-        this.onDragSegment({
+        await this.onDragSegment({
           intersection2d: args.intersectionPoint.twoD,
           object,
           intersects: args.intersects,
@@ -2576,7 +2576,7 @@ export class SceneEntities {
           } else if (addingNewSegmentStatus === 'added') {
             const pathToNodeForNewSegment = pathToNode.slice(0, pathToNodeIndex)
             pathToNodeForNewSegment.push([pipeIndex - 2, 'index'])
-            this.onDragSegment({
+            await this.onDragSegment({
               sketchNodePaths,
               sketchEntryNodePath: pathToNodeForNewSegment,
               object: selected,
@@ -2588,7 +2588,7 @@ export class SceneEntities {
           return
         }
 
-        this.onDragSegment({
+        await this.onDragSegment({
           object: selected,
           intersection2d: intersectionPoint.twoD,
           intersects,
@@ -2817,7 +2817,7 @@ export class SceneEntities {
     return intersection2d
   }
 
-  onDragSegment({
+  async onDragSegment({
     object,
     intersection2d: _intersection2d,
     sketchEntryNodePath,
@@ -3074,17 +3074,19 @@ export class SceneEntities {
       : this.prepareTruncatedAst(sketchNodePaths || [], modifiedAst)
     if (trap(info, { suppress: true })) return
     const { truncatedAst } = info
-    ;(async () => {
+    try {
       const code = recast(modifiedAst)
       if (trap(code)) return
       if (!draftInfo)
         // don't want to mod the user's code yet as they have't committed to the change yet
         // plus this would be the truncated ast being recast, it would be wrong
         this.codeManager.updateCodeEditor(code)
+
       const { execState } = await executeAstMock({
         ast: truncatedAst,
         rustContext: this.rustContext,
       })
+
       const variables = execState.variables
       const sketchesInfo = getSketchesInfo({
         sketchNodePaths,
@@ -3138,7 +3140,9 @@ export class SceneEntities {
         )
       }
       this.sceneInfra.overlayCallbacks(callbacks)
-    })().catch(reportRejection)
+    } catch (e) {
+      reportRejection(e)
+    }
   }
 
   /**

src/clientSideScene/sceneEntities.ts

@@ -449,7 +449,24 @@ export class SceneInfra {
       intersection: planeIntersects[0],
     }
   }
+
+  public mouseMoveThrottling = true // Can be turned off for debugging
+  private _processingMouseMove = false
+  private _lastUnprocessedMouseEvent: MouseEvent | undefined
+
   onMouseMove = async (mouseEvent: MouseEvent) => {
+    if (this.mouseMoveThrottling) {
+      // Throttle mouse move events to help with performance.
+      // Without this a new call to executeAstMock() is made by SceneEntities/onDragSegment() while the
+      // previous one is still running, causing multiple wasm calls to be running at the same time.
+      // Here we simply ignore the mouse move event if we are already processing one, until the processing is done.
+      if (this._processingMouseMove) {
+        this._lastUnprocessedMouseEvent = mouseEvent
+        return
+      }
+      this._processingMouseMove = true
+    }
+
     this.currentMouseVector.x = (mouseEvent.clientX / window.innerWidth) * 2 - 1
     this.currentMouseVector.y =
       -(mouseEvent.clientY / window.innerHeight) * 2 + 1
@@ -473,18 +490,19 @@ export class SceneInfra {
         planeIntersectPoint.twoD &&
         planeIntersectPoint.threeD
       ) {
+        const selected = this.selected
         await this.onDragCallback({
           mouseEvent,
           intersectionPoint: {
             twoD: planeIntersectPoint.twoD,
             threeD: planeIntersectPoint.threeD,
           },
           intersects,
-          selected: this.selected.object,
+          selected: selected.object,
         })
         this.updateMouseState({
           type: 'isDragging',
-          on: this.selected.object,
+          on: selected.object,
         })
       }
     } else if (
@@ -545,6 +563,17 @@ export class SceneInfra {
         if (!this.selected) this.updateMouseState({ type: 'idle' })
       }
     }
+
+    if (this.mouseMoveThrottling) {
+      this._processingMouseMove = false
+      const lastUnprocessedMouseEvent = this._lastUnprocessedMouseEvent
+      if (lastUnprocessedMouseEvent) {
+        // Another mousemove happened during the time this callback was processing
+        // -> process that event now
+        this._lastUnprocessedMouseEvent = undefined
+        void this.onMouseMove(lastUnprocessedMouseEvent)
+      }
+    }
   }
 
   raycastRing = (