fix: show block at correct location during constrained drag

Author: rachel-fenichel

src/actions/mover.ts

@@ -336,6 +336,8 @@ export class Mover {
       info.fakePointerEvent('pointermove', direction),
       info.totalDelta,
     );
+
+    info.updateTotalDelta();
     return true;
   }
 
@@ -426,7 +428,7 @@ export class Mover {
  * Workspace.
  */
 export class MoveInfo {
-  /** Total distance moved, in screen pixels */
+  /** Total distance moved, in workspace units. */
   totalDelta = new utils.Coordinate(0, 0);
   readonly parentNext: Connection | null;
   readonly parentInput: Connection | null;
@@ -468,4 +470,19 @@ export class MoveInfo {
       tiltY: tilts.y,
     });
   }
+
+  /**
+   * The keyboard drag may have moved the block to an appropriate location
+   * for a preview. Update the saved delta to reflect the block's new
+   * location, so that it does not jump during the next unconstrained move.
+   */
+  updateTotalDelta() {
+    const workspace = this.block.workspace;
+    if (!(workspace instanceof WorkspaceSvg)) throw new TypeError();
+
+    this.totalDelta = new utils.Coordinate(
+      this.block.relativeCoords.x - this.startLocation.x,
+      this.block.relativeCoords.y - this.startLocation.y,
+    );
+  }
 }

src/keyboard_drag_strategy.ts

@@ -44,13 +44,19 @@ export class KeyboardDragStrategy extends dragging.BlockDragStrategy {
     super.drag(newLoc);
 
     // Handle the case when an unconstrained drag found a connection candidate.
-    // The next constrained move will resume the search from the current candidate
-    // location.
     // @ts-expect-error connectionCandidate is private.
     if (this.connectionCandidate) {
-      this.searchNode = ASTNode.createConnectionNode(
-        // @ts-expect-error connectionCandidate is private.
-        (this.connectionCandidate as ConnectionCandidate).neighbour,
+      // @ts-expect-error connectionCandidate is private.
+      const neighbour = (this.connectionCandidate as ConnectionCandidate)
+        .neighbour;
+      // The next constrained move will resume the search from the current
+      // candidate location.
+      this.searchNode = ASTNode.createConnectionNode(neighbour);
+      // The moving block will be positioned slightly down and to the
+      // right of the connection it found.
+      // @ts-expect-error block and startLoc are private.
+      this.block.moveDuringDrag(
+        new utils.Coordinate(neighbour.x + 10, neighbour.y + 10),
       );
     }
   }