fix: Fixes #8764 by moving the event grouping calls up to dragger.ts (#8781)

core/dragging/block_drag_strategy.ts

@@ -62,8 +62,8 @@ export class BlockDragStrategy implements IDragStrategy {
    */
   private dragOffset = new Coordinate(0, 0);
 
-  /** Was there already an event group in progress when the drag started? */
-  private inGroup: boolean = false;
+  /** Used to persist an event group when snapping is done async. */
+  private originalEventGroup = '';
 
   constructor(private block: BlockSvg) {
     this.workspace = block.workspace;
@@ -96,10 +96,6 @@ export class BlockDragStrategy implements IDragStrategy {
     }
 
     this.dragging = true;
-    this.inGroup = !!eventUtils.getGroup();
-    if (!this.inGroup) {
-      eventUtils.setGroup(true);
-    }
     this.fireDragStartEvent();
 
     this.startLoc = this.block.getRelativeToSurfaceXY();
@@ -363,6 +359,7 @@ export class BlockDragStrategy implements IDragStrategy {
       this.block.getParent()?.endDrag(e);
       return;
     }
+    this.originalEventGroup = eventUtils.getGroup();
 
     this.fireDragEndEvent();
     this.fireMoveEvent();
@@ -388,20 +385,19 @@ export class BlockDragStrategy implements IDragStrategy {
     } else {
       this.block.queueRender().then(() => this.disposeStep());
     }
-
-    if (!this.inGroup) {
-      eventUtils.setGroup(false);
-    }
   }
 
   /** Disposes of any state at the end of the drag. */
   private disposeStep() {
+    const newGroup = eventUtils.getGroup();
+    eventUtils.setGroup(this.originalEventGroup);
     this.block.snapToGrid();
 
     // Must dispose after connections are applied to not break the dynamic
     // connections plugin. See #7859
     this.connectionPreviewer!.dispose();
     this.workspace.setResizesEnabled(true);
+    eventUtils.setGroup(newGroup);
   }
 
   /** Connects the given candidate connections. */

core/dragging/bubble_drag_strategy.ts

@@ -5,7 +5,6 @@
  */
 
 import {IBubble, WorkspaceSvg} from '../blockly.js';
-import * as eventUtils from '../events/utils.js';
 import {IDragStrategy} from '../interfaces/i_draggable.js';
 import * as layers from '../layers.js';
 import {Coordinate} from '../utils.js';
@@ -13,9 +12,6 @@ import {Coordinate} from '../utils.js';
 export class BubbleDragStrategy implements IDragStrategy {
   private startLoc: Coordinate | null = null;
 
-  /** Was there already an event group in progress when the drag started? */
-  private inGroup: boolean = false;
-
   constructor(
     private bubble: IBubble,
     private workspace: WorkspaceSvg,
@@ -26,10 +22,6 @@ export class BubbleDragStrategy implements IDragStrategy {
   }
 
   startDrag(): void {
-    this.inGroup = !!eventUtils.getGroup();
-    if (!this.inGroup) {
-      eventUtils.setGroup(true);
-    }
     this.startLoc = this.bubble.getRelativeToSurfaceXY();
     this.workspace.setResizesEnabled(false);
     this.workspace.getLayerManager()?.moveToDragLayer(this.bubble);
@@ -44,9 +36,6 @@ export class BubbleDragStrategy implements IDragStrategy {
 
   endDrag(): void {
     this.workspace.setResizesEnabled(true);
-    if (!this.inGroup) {
-      eventUtils.setGroup(false);
-    }
 
     this.workspace
       .getLayerManager()

core/dragging/comment_drag_strategy.ts

@@ -18,9 +18,6 @@ export class CommentDragStrategy implements IDragStrategy {
 
   private workspace: WorkspaceSvg;
 
-  /** Was there already an event group in progress when the drag started? */
-  private inGroup: boolean = false;
-
   constructor(private comment: RenderedWorkspaceComment) {
     this.workspace = comment.workspace;
   }
@@ -34,10 +31,6 @@ export class CommentDragStrategy implements IDragStrategy {
   }
 
   startDrag(): void {
-    this.inGroup = !!eventUtils.getGroup();
-    if (!this.inGroup) {
-      eventUtils.setGroup(true);
-    }
     this.fireDragStartEvent();
     this.startLoc = this.comment.getRelativeToSurfaceXY();
     this.workspace.setResizesEnabled(false);
@@ -61,9 +54,6 @@ export class CommentDragStrategy implements IDragStrategy {
     this.comment.snapToGrid();
 
     this.workspace.setResizesEnabled(true);
-    if (!this.inGroup) {
-      eventUtils.setGroup(false);
-    }
   }
 
   /** Fire a UI event at the start of a comment drag. */

core/dragging/dragger.ts

@@ -31,6 +31,9 @@ export class Dragger implements IDragger {
 
   /** Handles any drag startup. */
   onDragStart(e: PointerEvent) {
+    if (!eventUtils.getGroup()) {
+      eventUtils.setGroup(true);
+    }
     this.draggable.startDrag(e);
   }
 
@@ -119,13 +122,13 @@ export class Dragger implements IDragger {
     this.draggable.endDrag(e);
 
     if (wouldDelete && isDeletable(root)) {
-      // We want to make sure the delete gets grouped with any possible
-      // move event.
-      const newGroup = eventUtils.getGroup();
+      // We want to make sure the delete gets grouped with any possible move
+      // event. In core Blockly this shouldn't happen, but due to a change
+      // in behavior older custom draggables might still clear the group.
       eventUtils.setGroup(origGroup);
       root.dispose();
-      eventUtils.setGroup(newGroup);
     }
+    eventUtils.setGroup(false);
   }
 
   // We need to special case blocks for now so that we look at the root block