feat: show some block for context when opening action menu (#191)

Previously it was shown over the top left, which obscured useful context.  I
considered positioning it below the block but it can be a long way down in some
cases. That can feel unexpected and makes it more likely that the menu is
repositioned to keep it on screen.

Mentioned on #184 (comment)

This is a less arbitrary version of the offset I had in "Demo A" (that just
used 50px which looked fine for zelos styling but not great in geras).

Author: microbit-matt-hillsdon

src/navigation.ts

@@ -1406,14 +1406,27 @@ function fakeEventForNode(node: Blockly.ASTNode): PointerEvent {
   // Get the location of the top-left corner of the block in
   // screen coordinates.
   const block = node.getLocation() as Blockly.BlockSvg;
-  const coords = Blockly.utils.svgMath.wsToScreenCoordinates(
+  const blockCoords = Blockly.utils.svgMath.wsToScreenCoordinates(
     block.workspace,
     block.getRelativeToSurfaceXY(),
   );
 
+  // Prefer a y position below the first field in the block.
+  const fieldBoundingClientRect = block.inputList
+    .filter((input) => input.isVisible())
+    .flatMap((input) => input.fieldRow)
+    .filter((f) => f.isVisible())[0]
+    ?.getSvgRoot()
+    ?.getBoundingClientRect();
+
+  const clientY =
+    fieldBoundingClientRect && fieldBoundingClientRect.height
+      ? fieldBoundingClientRect.y + fieldBoundingClientRect.height
+      : blockCoords.y + block.height;
+
   // Create a fake event for the action menu code to work from.
   return new PointerEvent('pointerdown', {
-    clientX: coords.x,
-    clientY: coords.y,
+    clientX: blockCoords.x + 5,
+    clientY: clientY + 5,
   });
 }