Merge pull request #3531 from scratchfoundation/fix-hover-targets

fix: prevent drag surface from interfering with hover targets

Author: cwillisf

src/css.ts

@@ -1221,6 +1221,18 @@ const styles = `
     width: 100%;
     height: 100%;
   }
+
+  /* Prevent children of the drag surface from intercepting pointer
+     events. Blockly's field elements set pointer-events:auto for
+     click/edit interactions, but during a drag, Blockly's gesture
+     handler binds pointermove/pointerup on document so the dragged
+     block does not need to receive pointer events. Without this rule,
+     the field elements steal hover and pointer events from elements
+     underneath the dragged block (e.g. sprite selector tiles, the
+     backpack drop target). */
+  .blocklyBlockDragSurface * {
+    pointer-events: none;
+  }
 `
 
 Blockly.Css.register(styles)

src/scratch_dragger.ts

@@ -59,9 +59,12 @@ export class ScratchDragger extends Blockly.dragging.Dragger {
    * @param event The event that triggered this call.
    * @param totalDelta The change in pointer position since the last invocation.
    */
-  onDrag(event: PointerEvent, totalDelta: Blockly.utils.Coordinate) {
-    super.onDrag(event, totalDelta)
+  override onDrag(event: PointerEvent, totalDelta: Blockly.utils.Coordinate) {
+    // Update out-of-bounds state BEFORE the base onDrag so that
+    // wouldDeleteDraggable (called by super.onDrag to set the delete
+    // cursor) sees the current draggedOutOfBounds value.
     this.updateOutOfBoundsState(event)
+    super.onDrag(event, totalDelta)
   }
 
   /**
@@ -84,6 +87,11 @@ export class ScratchDragger extends Blockly.dragging.Dragger {
    * @param event The event that ended the drag.
    */
   onDragEnd(event: PointerEvent) {
+    // Update out-of-bounds state BEFORE any wouldDeleteDraggable checks
+    // so the override sees the position from the pointerup event, not
+    // the last pointermove (which could be stale if the user moved fast).
+    this.updateOutOfBoundsState(event)
+
     // When the prototype block is dragged (via its DelegateToParentDraggable
     // strategy), this.draggable is the prototype, but getDragRoot returns the
     // definition. Handle both cases for the "procedure is in use" check.
@@ -108,8 +116,6 @@ export class ScratchDragger extends Blockly.dragging.Dragger {
     }
 
     super.onDragEnd(event)
-
-    this.updateOutOfBoundsState(event)
     if (this.draggable instanceof Blockly.BlockSvg) {
       const event = new BlockDragEnd(this.getDragRoot(this.draggable) as Blockly.BlockSvg, this.draggedOutOfBounds)
       Blockly.Events.fire(event)
@@ -129,6 +135,21 @@ export class ScratchDragger extends Blockly.dragging.Dragger {
     this.workspace.removeClass(BOUNDLESS_CLASS)
   }
 
+  /**
+   * Returns whether or not the dragged item would be deleted if dropped at
+   * the current location. When a block is dragged outside the workspace
+   * bounds (e.g. onto the backpack or a different sprite), the GUI handles
+   * the drop — the flyout should not delete the block even if the pointer
+   * happens to overlap the flyout's bounding rect.
+   * @param event The drag event that triggered this check.
+   * @param rootDraggable The topmost item being dragged.
+   * @returns True if the draggable would be deleted.
+   */
+  override wouldDeleteDraggable(event: PointerEvent, rootDraggable: Blockly.IDraggable & Blockly.IDeletable) {
+    if (this.draggedOutOfBounds) return false
+    return super.wouldDeleteDraggable(event, rootDraggable)
+  }
+
   /**
    * Returns whether or not the dragged item should return to its starting
    * position.

tests/browser/procedures.test.ts

@@ -182,7 +182,7 @@ describe('procedure call mutation round-trip', () => {
             </mutation>
           </block>
         </xml>
-      `)
+      `),
     ).not.toThrow()
 
     const callBlock = workspace.getAllBlocks(false).find((b) => b.type === 'procedures_call')

tests/browser/scratch_dragger.test.ts

@@ -0,0 +1,99 @@
+/**
+ * Copyright 2026 Scratch Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import * as Blockly from 'blockly/core'
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import '../../src/css'
+import { ScratchDragger } from '../../src/scratch_dragger'
+
+beforeAll(() => {
+  Blockly.Blocks.test_block = {
+    init(this: Blockly.Block) {
+      this.jsonInit({
+        message0: 'test',
+        previousStatement: null,
+        nextStatement: null,
+      })
+    },
+  }
+})
+
+afterAll(() => {
+  delete Blockly.Blocks.test_block
+})
+
+let container: HTMLElement
+let workspace: Blockly.WorkspaceSvg
+
+beforeEach(() => {
+  container = document.createElement('div')
+  container.style.width = '800px'
+  container.style.height = '600px'
+  document.body.appendChild(container)
+  workspace = Blockly.inject(container, {})
+})
+
+afterEach(() => {
+  workspace.dispose()
+  container.remove()
+  vi.restoreAllMocks()
+})
+
+describe('ScratchDragger', () => {
+  describe('wouldDeleteDraggable', () => {
+    it('returns false when the block is outside the workspace, even over a delete area', () => {
+      const block = workspace.newBlock('test_block')
+      block.initSvg()
+      block.render()
+
+      const dragger = new ScratchDragger(block, workspace)
+      dragger.draggedOutOfBounds = true
+
+      // Mock getDragTarget to return a delete area (simulating the
+      // flyout being at the pointer position).
+      const fakeDragTarget = { id: 'fake-flyout', wouldDelete: () => true }
+      vi.spyOn(workspace, 'getDragTarget').mockReturnValue(fakeDragTarget as unknown as Blockly.IDragTarget)
+      vi.spyOn(workspace.getComponentManager(), 'hasCapability').mockReturnValue(true)
+
+      const event = new PointerEvent('pointerup', { clientX: 100, clientY: 100 })
+      expect(dragger.wouldDeleteDraggable(event, block)).toBe(false)
+    })
+
+    it('allows deletion when the block is inside the workspace over a delete area', () => {
+      const block = workspace.newBlock('test_block')
+      block.initSvg()
+      block.render()
+
+      const dragger = new ScratchDragger(block, workspace)
+      dragger.draggedOutOfBounds = false
+
+      const fakeDragTarget = { id: 'fake-flyout', wouldDelete: () => true }
+      vi.spyOn(workspace, 'getDragTarget').mockReturnValue(fakeDragTarget as unknown as Blockly.IDragTarget)
+      vi.spyOn(workspace.getComponentManager(), 'hasCapability').mockReturnValue(true)
+
+      const event = new PointerEvent('pointerup', { clientX: 100, clientY: 100 })
+      expect(dragger.wouldDeleteDraggable(event, block)).toBe(true)
+    })
+  })
+
+  describe('pointer-events on drag surface', () => {
+    it('overrides pointer-events:auto on dragged blocks', () => {
+      const dragSurface = container.querySelector('.blocklyBlockDragSurface')
+      expect(dragSurface).not.toBeNull()
+
+      // Blockly core sets pointer-events:auto on .blocklyDragging so
+      // the grab cursor works during drags. Our CSS rule overrides
+      // this for children of the drag surface so that pointer events
+      // pass through to elements underneath (backpack, sprite tiles).
+      const child = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      child.setAttribute('class', 'blocklyDragging')
+      const dragGroup = dragSurface?.querySelector('g')
+      expect(dragGroup).not.toBeNull()
+      dragGroup?.appendChild(child)
+
+      const style = window.getComputedStyle(child)
+      expect(style.pointerEvents).toBe('none')
+    })
+  })
+})