Fix selection overlay sizing, draw-selection scroll anchoring, and granularity precedence

- Expand selection overlays by 2 px left/right so they fully cover grid cells
- Match selection overlay border-radius to note-viewer cells (8 px)
- Anchor draw-selection start point to scroll host content so the rect
  does not jump when the user scrolls during a drag
- Auto-scroll the track viewer when the pointer is near the host edge
  during draw selection; speed scales with distance beyond the edge
- Always resolve entries by dominant granularity instead of giving
  Track entries unconditional priority — the lowest granularity level
  wins, preventing full-track selection from overriding individual
  cell selections

Signed-off-by: Mike Lischke <mike@lischke-online.de>

Author: mike-lischke

src/components/styles.scss

@@ -1091,7 +1091,7 @@
     position: absolute;
     background-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
     border: 1px solid color-mix(in srgb, var(--color-primary) 60%, transparent);
-    border-radius: 6px;
+    border-radius: 8px;
     pointer-events: none;
 }
 

src/components/ui/Arrangement/ArrangementViewer.tsx

@@ -94,6 +94,7 @@ export class ArrangementViewer extends UIComponent<IArrangementViewerProps, IArr
         const { autoFollowIsOn, viewerZoom } = this.state;
 
         services.selectionManager.setEventContainer(this.arrangementViewerRef.current!);
+        services.selectionManager.setScrollHost(this.viewerRef.current!);
 
         requisitions.register("settingsChanged", this.handleSettingsChanged);
         requisitions.register("trackViewModeToggled", this.handleTrackViewModeToggled);

src/ui/SelectionManager.ts

@@ -101,6 +101,16 @@ export class SelectionManager {
         this.view = new SelectionView(this, container);
     }
 
+    /**
+     * Sets the scroll host element for the selection view.
+     * Must be called after {@link setEventContainer}.
+     *
+     * @param host The scrollable container element (typically `#trackViewerHost`).
+     */
+    public setScrollHost(host: HTMLElement): void {
+        this.view?.setScrollHost(host);
+    }
+
     public registerHitTester(tester: ISelectionHitTester): void {
         this.hitTesters.add(tester);
     }
@@ -454,14 +464,6 @@ export class SelectionManager {
             rawEntries.push(...tester.hitTest(rect));
         }
 
-        if (rawEntries.some((e) => {
-            return e.granularity === SelectionGranularity.Track;
-        })) {
-            return rawEntries.filter((e) => {
-                return e.granularity === SelectionGranularity.Track;
-            });
-        }
-
         return this.filterToDominantGranularity(rawEntries);
     }
 

src/ui/SelectionView.ts

@@ -26,11 +26,19 @@ const formElementNames = new Set(["BUTTON", "INPUT", "SELECT", "TEXTAREA"]);
 export class SelectionView {
     private rectElement?: HTMLDivElement;
     private captureElement?: HTMLElement;
+    private scrollHost?: HTMLElement;
 
     private dragPending = false;
     private isDragging = false;
     private startX = 0;
     private startY = 0;
+    private startScrollLeft = 0;
+    private startScrollTop = 0;
+    private lastPointerX = 0;
+    private lastPointerY = 0;
+    private autoScrollTimer?: ReturnType<typeof setInterval>;
+    private autoScrollDX = 0;
+    private autoScrollDY = 0;
 
     /**
      * Ratio of viewport pixels to CSS pixels inside #trackViewerContainer.
@@ -54,6 +62,16 @@ export class SelectionView {
         requisitions.unregister("selectionChanged", this.handleSelectionChanged);
     }
 
+    /**
+     * Sets the scroll host element whose scroll position is tracked during drag selection
+     * so the selection rectangle stays anchored to the content. Also enables edge auto-scroll.
+     *
+     * @param host The scrollable container element (typically `#trackViewerHost`).
+     */
+    public setScrollHost(host: HTMLElement): void {
+        this.scrollHost = host;
+    }
+
     private handlePointerDown = (event: PointerEvent): void => {
         if (event.defaultPrevented || this.isFormElement(event.target)) {
             return;
@@ -69,6 +87,15 @@ export class SelectionView {
         this.dragPending = true;
         this.startX = event.clientX;
         this.startY = event.clientY;
+        this.lastPointerX = event.clientX;
+        this.lastPointerY = event.clientY;
+
+        if (this.scrollHost) {
+            this.startScrollLeft = this.scrollHost.scrollLeft;
+            this.startScrollTop = this.scrollHost.scrollTop;
+            this.scrollHost.addEventListener("scroll", this.handleScroll, { passive: true });
+        }
+
         this.createRectElement(event.clientX, event.clientY);
 
         event.preventDefault();
@@ -79,7 +106,11 @@ export class SelectionView {
             return;
         }
 
+        this.lastPointerX = event.clientX;
+        this.lastPointerY = event.clientY;
+
         this.updateRectElement(event.clientX, event.clientY);
+        this.updateAutoScroll(event.clientX, event.clientY);
 
         const rect = this.rectElement.getBoundingClientRect();
         if (rect.width > 2 || rect.height > 2) {
@@ -116,6 +147,31 @@ export class SelectionView {
         this.cancelDrag();
     };
 
+    /**
+     * Adjusts the selection start point when the scroll host scrolls during a drag,
+     * keeping the anchor pinned to the content rather than the viewport.
+     */
+    private handleScroll = (): void => {
+        if (!this.scrollHost || !this.rectElement) {
+            return;
+        }
+
+        const deltaX = this.scrollHost.scrollLeft - this.startScrollLeft;
+        const deltaY = this.scrollHost.scrollTop - this.startScrollTop;
+
+        this.startX -= deltaX;
+        this.startY -= deltaY;
+        this.startScrollLeft = this.scrollHost.scrollLeft;
+        this.startScrollTop = this.scrollHost.scrollTop;
+
+        this.updateRectElement(this.lastPointerX, this.lastPointerY);
+
+        if (this.isDragging) {
+            const rect = this.rectElement.getBoundingClientRect();
+            void requisitions.execute("selectionRectChanged", { rect });
+        }
+    };
+
     private selectionModeFromEvent(event: KeyboardEvent | MouseEvent): SelectionMode {
         if (event.shiftKey) {
             return SelectionMode.Add;
@@ -144,8 +200,15 @@ export class SelectionView {
     private cancelDrag(): void {
         this.isDragging = false;
         this.dragPending = false;
+        this.stopAutoScroll();
         this.removeRectElement();
 
+        if (this.scrollHost) {
+            this.scrollHost.removeEventListener("scroll", this.handleScroll);
+            this.startScrollLeft = 0;
+            this.startScrollTop = 0;
+        }
+
         if (this.captureElement) {
             this.captureElement.removeEventListener("pointermove", this.handlePointerMove);
             this.captureElement.removeEventListener("pointerup", this.handlePointerUp);
@@ -154,6 +217,61 @@ export class SelectionView {
         }
     }
 
+    /**
+     * Starts, updates or stops auto-scroll based on the pointer's distance from the scroll host edges.
+     * The further the pointer is outside the host, the faster the scroll speed.
+     *
+     * @param clientX The current pointer X position in viewport coordinates.
+     * @param clientY The current pointer Y position in viewport coordinates.
+     */
+    private updateAutoScroll(clientX: number, clientY: number): void {
+        if (!this.scrollHost) {
+            return;
+        }
+
+        const hostRect = this.scrollHost.getBoundingClientRect();
+        const edgeThreshold = 10;
+        let scrollDX = 0;
+        let scrollDY = 0;
+
+        const distLeft = clientX - hostRect.left;
+        const distRight = hostRect.right - clientX;
+        const distTop = clientY - hostRect.top;
+        const distBottom = hostRect.bottom - clientY;
+
+        if (distLeft < edgeThreshold) {
+            scrollDX = -Math.max(1, Math.ceil((edgeThreshold - distLeft) / 2));
+        } else if (distRight < edgeThreshold) {
+            scrollDX = Math.max(1, Math.ceil((edgeThreshold - distRight) / 2));
+        }
+
+        if (distTop < edgeThreshold) {
+            scrollDY = -Math.max(1, Math.ceil((edgeThreshold - distTop) / 2));
+        } else if (distBottom < edgeThreshold) {
+            scrollDY = Math.max(1, Math.ceil((edgeThreshold - distBottom) / 2));
+        }
+
+        this.autoScrollDX = scrollDX;
+        this.autoScrollDY = scrollDY;
+
+        if (scrollDX !== 0 || scrollDY !== 0) {
+            this.autoScrollTimer ??= setInterval(() => {
+                this.scrollHost!.scrollBy(this.autoScrollDX, this.autoScrollDY);
+            }, 16);
+        } else {
+            this.stopAutoScroll();
+        }
+    }
+
+    private stopAutoScroll(): void {
+        if (this.autoScrollTimer) {
+            clearInterval(this.autoScrollTimer);
+            this.autoScrollTimer = undefined;
+            this.autoScrollDX = 0;
+            this.autoScrollDY = 0;
+        }
+    }
+
     private createRectElement(x: number, y: number): void {
         this.removeRectElement();
 
@@ -906,9 +1024,9 @@ export class SelectionView {
         const overlay = document.createElement("div");
         overlay.className = selectionOverlayClass;
         overlay.style.position = "absolute";
-        overlay.style.left = `${rect.x}px`;
+        overlay.style.left = `${rect.x - 2}px`;
         overlay.style.top = `${rect.y}px`;
-        overlay.style.width = `${rect.width}px`;
+        overlay.style.width = `${rect.width + 4}px`;
         overlay.style.height = `${rect.height}px`;
         container.appendChild(overlay);
     }