Fix the pointerdown event listener issue related to Drag to Select

[LappiLappland]

Check for duplicates

• I have searched for similar issues before opening a new one.

Description

Currently, there is an issue related to the pointerdown event listener workaround for the setStartBlock gesture handling. The SVG root of a block that has a next block overlaps with that next block. So, when we try to remove the pointerdown event listener for the next block, it does not matter as the pointerdown event listener for the parent (higher level) block is still present. (a fix may be introduced when the Blockly team introduces proper gesture handling for setStartBlock.)

Reproduction steps

Example 1:

1. Multi-select blocks
2. Click on any next connected block (beneath or to the right)

Expected: only pressed block is selected, others get deselected

Reality: click is ignored

Example 2:

1. Paste blocks (can be a single block or multiple blocks)
2. Insert new blocks into group
3. Click on any next connected block (beneath or to the right)

Expected: only pressed block is selected, others get deselected

Reality: click is ignored

Stack trace

Screenshots

issue.mp4

Browsers

No response

[LappiLappland]

I didn't find a related issue, even though it is mentioned in the Readme.md

Not sure about the real state of the issue, but it persists in the current version of plugin

I wanted to share a possible mitigation (through a monkey-patch in my case)

// Monkey-patch
const originalPointerDownEventHandler = multiselectPlugin.controls_.multiDraggable.pointerDownEventHandler_;
multiselectPlugin.controls_.multiDraggable.pointerDownEventHandler_ = function (event) {
  // Search for the closest "blocklyDraggable"
  const closestBlockEl = event.target.closest('.blocklyDraggable');
  // Check if it's actually selected. If not, then we do not need to keep focus
  if (!closestBlockEl || !closestBlockEl.isSelected_) return;

  return originalPointerDownEventHandler.call(this, event);
}

// This part is only for optimization. It's possible to just traverse map of selected items too
const originalAddPointerDownEventListener = multiselectPlugin.controls_.multiDraggable.addPointerDownEventListener_;
multiselectPlugin.controls_.multiDraggable.addPointerDownEventListener_ = function (subDraggable) {
  subDraggable.getSvgRoot().isSelected_ = true;
  return originalAddPointerDownEventListener.call(this, subDraggable);
}

const originalRemovePointerDownEventListener = multiselectPlugin.controls_.multiDraggable.removePointerDownEventListener_;
multiselectPlugin.controls_.multiDraggable.removePointerDownEventListener_ = function (subDraggable) {
  delete subDraggable.getSvgRoot().isSelected_;
  return originalRemovePointerDownEventListener.call(this, subDraggable);
}

[HollowMan6]

Yes, this one is exactly the 2nd known issue mentioned in the README https://github.com/mit-cml/workspace-multiselect?tab=readme-ov-file#known-issues, as you can see:

[saitejareddy05]

hi @LappiLappland @HollowMan6
can you please assign to will try once to solve these issues if i have any doubt i will mention where it self

[HollowMan6]

Sure @saitejareddy05, feel free to work on it as I don't think anyone is working on the issue.

[mjgallag]

@LappiLappland I implemented a workaround (and a test) that I believe addresses this issue. If there is a case this workaround doesn't cover please let me know, thanks!

[LappiLappland]

@mjgallag the workround indeed addresses the issue, thanks for fixing it! But I've just noticed another related issue. In simple Blockly if you grab block by its shadow block inputs, then the main block is still grabbed. This does not happen in the current workaround

• select block 1
• hold shift and select block 2
• click shadow block inside block 1
• Expect grab happening on selected blocks, but they get deselected instead

[mjgallag]

@LappiLappland feel free to submit a PR for this if you want and have an idea, just be sure to include test/tests, thanks!