Add selection border

Signed-off-by: Hollow Man <[email protected]>

Author: HollowMan6

src/DOM_FOCUS_IMPLEMENTATION.md

@@ -0,0 +1,61 @@
+# DOM-Based Focus Management Implementation
+
+This implementation follows Christopher's suggestion to create a visible DOM element for the MultiselectDraggable that can hold browser focus, addressing the focus management issues in Blockly v12.
+
+## Key Changes
+
+### 1. Visual Selection Outline
+- Added a rectangular outline around all selected items (similar to Google Slides)
+- The outline is a visible SVG element that can receive browser focus
+- Styled with dashed border and proper focus indicators
+
+### 2. DOM Focus Management
+- `getFocusableElement()` now returns the actual DOM element (`selectionOutline_`)
+- Added proper `tabindex="0"` and accessibility attributes
+- Implemented keyboard event handling for accessibility
+
+### 3. Real-time Updates
+- Outline position and size updates automatically when:
+  - Items are added/removed from selection
+  - Items are dragged
+  - Selection changes
+- Visual feedback when gaining/losing focus
+
+### 4. Integration with Existing System
+- All existing `updateFocusedNode()` calls now trigger outline visibility
+- Added `onBecomeFocused()` method to ensure outline is shown
+- Proper cleanup in `dispose()` method
+
+## Technical Details
+
+### Visual Elements
+- **Container**: `.blocklyMultiselectOutline` - Transparent container
+- **Outline**: `.blocklyMultiselectOutlineRect` - Focusable dashed rectangle
+- **Styling**: Blue dashed border (#4285f4) with rounded corners
+
+### Focus States
+- **Normal**: 2px dashed border
+- **Focused**: 3px border with enhanced visibility
+- **Hover**: Reduced opacity for better UX
+
+### Accessibility
+- Proper `role="button"` and `aria-label`
+- Keyboard navigation support (Enter, Space, Escape)
+- Focus indicators follow web accessibility standards
+
+## Benefits
+
+1. **Solves v12 Focus Issues**: Provides a real DOM element that focus manager can work with
+2. **Visual Feedback**: Users can clearly see what's selected
+3. **Accessibility**: Screen readers and keyboard navigation work properly
+4. **Backward Compatible**: Doesn't break existing functionality
+
+## Usage
+
+The implementation is automatic - when multiple blocks are selected:
+1. The outline appears around the selection
+2. The outline can receive focus from the focus manager
+3. Users can interact with it via keyboard or mouse
+4. The outline updates in real-time during operations
+
+This follows the recommended approach (2) from Ben's suggestions and implements Christopher's DOM element idea successfully.

src/multiselect_contextmenu.js

@@ -235,6 +235,10 @@ const registerDuplicate = function() {
         connectionDB[0].connect(connectionDB[1]);
       });
       Blockly.getFocusManager().updateFocusedNode(multiDraggable);
+      // Call the new method to ensure outline is visible
+      if (multiDraggable.onBecomeFocused) {
+        multiDraggable.onBecomeFocused();
+      }
       Blockly.Events.setGroup(false);
     },
     scopeType: Blockly.ContextMenuRegistry.ScopeType.BLOCK,
@@ -790,6 +794,10 @@ const registerPaste = function(useCopyPasteCrossTab) {
       });
       Blockly.Events.setGroup(false);
       Blockly.getFocusManager().updateFocusedNode(multiDraggable);
+      // Call the new method to ensure outline is visible
+      if (multiDraggable.onBecomeFocused) {
+        multiDraggable.onBecomeFocused();
+      }
       return true;
     },
     scopeType: Blockly.ContextMenuRegistry.ScopeType.WORKSPACE,
@@ -857,6 +865,10 @@ const registerSelectAll = function() {
       });
 
       Blockly.getFocusManager().updateFocusedNode(multiDraggable);
+      // Call the new method to ensure outline is visible
+      if (multiDraggable.onBecomeFocused) {
+        multiDraggable.onBecomeFocused();
+      }
     },
     scopeType: Blockly.ContextMenuRegistry.ScopeType.WORKSPACE,
     id,
@@ -1128,6 +1140,10 @@ const registerCommentDuplicate = function() {
         }
       }
       Blockly.getFocusManager().updateFocusedNode(multiDraggable);
+      // Call the new method to ensure outline is visible
+      if (multiDraggable.onBecomeFocused) {
+        multiDraggable.onBecomeFocused();
+      }
       Blockly.Events.setGroup(false);
     },
     scopeType: Blockly.ContextMenuRegistry.ScopeType.COMMENT,

src/multiselect_controls.js

@@ -406,6 +406,10 @@ export class MultiselectControls {
       if (this.dragSelection.size && !(Blockly.getSelected() instanceof
           MultiselectDraggable)) {
         Blockly.getFocusManager().updateFocusedNode(this.multiDraggable);
+        // Call the new method to ensure outline is visible
+        if (this.multiDraggable.onBecomeFocused) {
+          this.multiDraggable.onBecomeFocused();
+        }
       } else if (this.lastSelectedElement_ &&
           !inPasteShortcut.get(this.workspace_)) {
         this.updateDraggables_(this.lastSelectedElement_);
@@ -529,6 +533,10 @@ export class MultiselectControls {
     // our set is not empty.
     if (this.dragSelection.size && !Blockly.getSelected()) {
       Blockly.getFocusManager().updateFocusedNode(this.multiDraggable);
+      // Call the new method to ensure outline is visible
+      if (this.multiDraggable.onBecomeFocused) {
+        this.multiDraggable.onBecomeFocused();
+      }
     }
     if (this.hasDisableWorkspaceDrag_) {
       this.workspace_.options.moveOptions.drag = true;
@@ -571,4 +579,22 @@ Blockly.Css.register(`
 .blocklyMultiselect>image:active, .blocklyMultiselect>svg>image:active {
   opacity: .8;
 }
+
+.blocklyMultiselectOutline {
+  pointer-events: none;
+}
+
+.blocklyMultiselectOutlineRect {
+  pointer-events: all;
+  cursor: move;
+}
+
+.blocklyMultiselectOutlineRect:focus {
+  outline: none;
+  stroke-width: 3;
+}
+
+.blocklyMultiselectOutlineRect:hover {
+  stroke-opacity: 0.8;
+}
 `);