feat: introduce Mover actions + experimental DragMover implementation (RaspberryPiFoundation#352)

* feat: Introduce Mover class, moving mode

Introduce the Mover class, with shortcuts that will put a workspace
into (and exit from) moving mode.

While in moving mode, cursor navigation via the cursor keys is
disabled.

* feat: Save block starting location and connections

* feat: Experiment: unconstrained movement using Dragger

Create an experimental implementation of unconstrained dragging
using the existing Dragger class.  Implement this on a new
Mover subclass DragMover, to keep this experimental code (that
will probably be thrown away) separate from the main Mover
implementation.

Known bugs:

* Blocks lurch around somewhat wildly while being moved.
* Moving top-level blocks works reasonably well, but attempting
  to move a non-top-level block will result in it being deleted
  unless the move is aborted.

* feat: Add Move Block (M) context menu item

* fix: Allow ctrl+arrows to also perform unconstrained moves

Alt+arrows causes browser navigation on Windows.  :-(

* fix: Use better fake PointerEvents to prevent random deletions

There was a bug that would often cause blocks to be deleted.  This
was because the dragger thought the block was on the toolbox,
which is a delete area.

Fix this by giving the dragger much better fake PointerEvents,
so that it knows where the block actually is - good enough that
you can move the block to the trash can and it will be deleted!

* chore: address feedback from RaspberryPiFoundation#317

* chore: lint and format

* fix: remove allowCollision for m

* fix: RaspberryPiFoundation#356 by hiding the connection preview before reverting a drag

* fix: spelling

---------

Co-authored-by: Christopher Allen <[email protected]>

feat: heuristic insert (RaspberryPiFoundation#355)

* chore: simplify tryToConnectNodes

We only insert blocks so remove other cases.

* feat: heurstic insertion logic

- use first statement or value input
- in statement inputs move to the last next connection in the chain
- use next connections over previous connections

chore: convert webdriverio tests to TypeScript (RaspberryPiFoundation#353)

* chore: convert webdriverio tests to TypeScript

* chore: comment typo fix

feat: allow for toolbox with multiple tab stops (RaspberryPiFoundation#358)

- Switch to focusin/out for toolbox (maybe in future elsewhere)
- Drop the tab index fiddling as it's not practical to get it right in the face
  of more than one tab stop in the toolbox, especially if that toolbox has a
  DOM structure not known to the plugin.

  Given that we're reinstating the ability to shift-tab flyout->toolbox it
  makes sense to allow tab to the flyout. Shift-tab to the flyout remains not
  possible in the auto-hide case but that's not unreasonable.

This version can be made to work with MakeCode without further modifications.

feat: use ts and factor out helper functions

Author: rachel-fenichel

test/webdriverio/test/basic_test.ts

@@ -0,0 +1,192 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as chai from 'chai';
+import * as Blockly from 'blockly';
+import {
+  testSetup,
+  testFileLocations,
+  PAUSE_TIME,
+  getBlockElementById,
+  getSelectedBlockId,
+} from './test_setup.js';
+import {
+  ChainablePromiseElement,
+  Key,
+  KeyAction,
+  PointerAction,
+  WheelAction,
+} from 'webdriverio';
+
+/**
+ * Clicks a block, but slightly off-centre to avoid clicking on field.
+ *
+ * @param block Block to click.
+ * @returns A Promise that resolves once action completes.
+ */
+async function clickBlockOffCenter(block: ChainablePromiseElement) {
+  const offsetFromBlockCenter = -50;
+  await block.click({x: offsetFromBlockCenter});
+}
+
+/**
+ * Gets blocks that are the same as the reference block in terms of class
+ * they contain.
+ *
+ * @param browser The active WebdriverIO Browser object.
+ * @param block The reference element.
+ * @returns A Promise that resolves to blocks that are the same as the reference block.
+ */
+async function getSameBlocks(
+  browser: WebdriverIO.Browser,
+  block: ChainablePromiseElement,
+) {
+  const elClass = await block.getAttribute('class');
+  return browser.$$(`.${elClass.split(' ').join('.')}`);
+}
+
+/**
+ * Perform actions whilst dragging a given block around.
+ *
+ * @param browser The active WebdriverIO Browser object.
+ * @param blockToDrag The block to drag around.
+ * @param action Action to perform whilst dragging block.
+ * @returns A Promise that resolves once action completes.
+ */
+async function performActionWhileDraggingBlock(
+  browser: WebdriverIO.Browser,
+  blockToDrag: ChainablePromiseElement,
+  action: KeyAction | PointerAction | WheelAction,
+) {
+  const blockLoc = await blockToDrag.getLocation();
+  const blockX = Math.round(blockLoc.x);
+  const blockY = Math.round(blockLoc.y);
+  await browser.actions([
+    browser
+      .action('pointer')
+      .move(blockX, blockY)
+      .down()
+      .move(blockX + 20, blockY + 20)
+      .move(blockX, blockY),
+    action,
+  ]);
+  await browser.pause(PAUSE_TIME);
+}
+
+/**
+ * Serializes workspace blocks into JSON objects.
+ *
+ * @param browser The active WebdriverIO Browser object.
+ * @returns A Promise that resolves to JSON object serialization of the workspace blocks.
+ */
+async function serializeWorkspaceBlocks(browser: WebdriverIO.Browser) {
+  return await browser.execute(() => {
+    return Blockly.serialization.workspaces.save(Blockly.getMainWorkspace());
+  });
+}
+
+suite('Clipboard test', function () {
+  // Setting timeout to unlimited as these tests take a longer time to run than most mocha test
+  this.timeout(0);
+
+  // Clear the workspace and load start blocks
+  setup(async function () {
+    this.browser = await testSetup(testFileLocations.BASE);
+    await this.browser.pause(PAUSE_TIME);
+  });
+
+  test('Copy and paste while block selected', async function () {
+    const block = await getBlockElementById(this.browser, 'draw_circle_1');
+    await clickBlockOffCenter(block);
+
+    // Copy and paste
+
+    await this.browser.keys([Key.Ctrl, 'c']);
+    await this.browser.keys([Key.Ctrl, 'v']);
+    await this.browser.pause(PAUSE_TIME);
+
+    const blocks = await getSameBlocks(this.browser, block);
+    const selectedId = await getSelectedBlockId(this.browser);
+
+    chai.assert.equal(await blocks.length, 2);
+    // Duplicated block should be selected and after the copied one.
+    chai.assert.equal(selectedId, await blocks[1].getAttribute('data-id'));
+  });
+
+  test('Cut and paste while connection selected', async function () {
+    const block = await getBlockElementById(this.browser, 'draw_circle_1');
+    await clickBlockOffCenter(block);
+
+    // Cut and paste
+    await this.browser.keys([Key.Ctrl, 'x']);
+    await block.waitForExist({reverse: true});
+    await this.browser.keys([Key.Ctrl, 'v']);
+    await block.waitForExist();
+    await this.browser.pause(PAUSE_TIME);
+
+    const blocks = await getSameBlocks(this.browser, block);
+    const selectedId = await getSelectedBlockId(this.browser);
+
+    chai.assert.equal(await blocks.length, 1);
+    chai.assert.equal(selectedId, await blocks[0].getAttribute('data-id'));
+  });
+
+  test('Copy and paste whilst dragging block', async function () {
+    const initialWsBlocks = await serializeWorkspaceBlocks(this.browser);
+
+    // Simultaneously drag block and Ctrl+C then Ctrl+V
+    const block = await getBlockElementById(this.browser, 'draw_circle_1');
+    await performActionWhileDraggingBlock(
+      this.browser,
+      block,
+      this.browser
+        .action('key')
+        .down(Key.Ctrl)
+        .down('c')
+        .pause(10)
+        .up(Key.Ctrl)
+        .up('c')
+        .down(Key.Ctrl)
+        .down('v')
+        .pause(10)
+        .up(Key.Ctrl)
+        .up('v'),
+    );
+
+    await this.browser.pause(PAUSE_TIME);
+
+    // Assert no change in workspace blocks
+    chai.assert.deepEqual(
+      initialWsBlocks,
+      await serializeWorkspaceBlocks(this.browser),
+    );
+  });
+
+  test('Cut whilst dragging block', async function () {
+    const initialWsBlocks = await serializeWorkspaceBlocks(this.browser);
+
+    // Simultaneously drag block and Ctrl+X
+    const block = await getBlockElementById(this.browser, 'draw_circle_1');
+    await performActionWhileDraggingBlock(
+      this.browser,
+      block,
+      this.browser
+        .action('key')
+        .down(Key.Ctrl)
+        .down('x')
+        .pause(10)
+        .up(Key.Ctrl)
+        .up('x'),
+    );
+    await this.browser.pause(PAUSE_TIME);
+
+    // Assert no change in workspace blocks
+    chai.assert.deepEqual(
+      initialWsBlocks,
+      await serializeWorkspaceBlocks(this.browser),
+    );
+  });
+});