Support separate horizontal and vertical scroll hosts for draw-selection anchoring and auto-scroll

- Split single scrollHost into horizontalScrollHost and verticalScrollHost
  so the selection rectangle stays anchored to content during both
  horizontal and vertical scrolling
- Auto-scroll scrolls the horizontal host for X and the vertical host
  for Y independently
- Remove unused PermMatrix component and its tests.

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

Author: mike-lischke

src/components/ui/Arrangement/ArrangementViewer.tsx

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

src/ui/PermMatrix.tsx

@@ -102,13 +102,14 @@ export class SelectionManager {
     }
 
     /**
-     * Sets the scroll host element for the selection view.
+     * Sets the scroll host elements for the selection view.
      * Must be called after {@link setEventContainer}.
      *
-     * @param host The scrollable container element (typically `#trackViewerHost`).
+     * @param horizontal The horizontally-scrollable container (typically `#trackViewerHost`).
+     * @param vertical The vertically-scrollable container.
      */
-    public setScrollHost(host: HTMLElement): void {
-        this.view?.setScrollHost(host);
+    public setScrollHosts(horizontal: HTMLElement, vertical: HTMLElement): void {
+        this.view?.setScrollHosts(horizontal, vertical);
     }
 
     public registerHitTester(tester: ISelectionHitTester): void {

src/ui/SelectionManager.ts

@@ -26,14 +26,16 @@ const formElementNames = new Set(["BUTTON", "INPUT", "SELECT", "TEXTAREA"]);
 export class SelectionView {
     private rectElement?: HTMLDivElement;
     private captureElement?: HTMLElement;
-    private scrollHost?: HTMLElement;
+    private horizontalScrollHost?: HTMLElement;
+    private verticalScrollHost?: HTMLElement;
 
     private dragPending = false;
     private isDragging = false;
     private startX = 0;
     private startY = 0;
     private startScrollLeft = 0;
     private startScrollTop = 0;
+    private startVerticalScrollTop = 0;
     private lastPointerX = 0;
     private lastPointerY = 0;
     private autoScrollTimer?: ReturnType<typeof setInterval>;
@@ -63,13 +65,15 @@ export class SelectionView {
     }
 
     /**
-     * Sets the scroll host element whose scroll position is tracked during drag selection
+     * Sets the scroll host elements whose scroll positions are 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`).
+     * @param horizontal The horizontally-scrollable container (typically `#trackViewerHost`).
+     * @param vertical The vertically-scrollable container (typically the arrangement viewer parent).
      */
-    public setScrollHost(host: HTMLElement): void {
-        this.scrollHost = host;
+    public setScrollHosts(horizontal: HTMLElement, vertical: HTMLElement): void {
+        this.horizontalScrollHost = horizontal;
+        this.verticalScrollHost = vertical;
     }
 
     private handlePointerDown = (event: PointerEvent): void => {
@@ -90,10 +94,15 @@ export class SelectionView {
         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 });
+        if (this.horizontalScrollHost) {
+            this.startScrollLeft = this.horizontalScrollHost.scrollLeft;
+            this.startScrollTop = this.horizontalScrollHost.scrollTop;
+            this.horizontalScrollHost.addEventListener("scroll", this.handleScroll, { passive: true });
+        }
+
+        if (this.verticalScrollHost && this.verticalScrollHost !== this.horizontalScrollHost) {
+            this.startVerticalScrollTop = this.verticalScrollHost.scrollTop;
+            this.verticalScrollHost.addEventListener("scroll", this.handleScroll, { passive: true });
         }
 
         this.createRectElement(event.clientX, event.clientY);
@@ -148,21 +157,44 @@ export class SelectionView {
     };
 
     /**
-     * Adjusts the selection start point when the scroll host scrolls during a drag,
+     * Adjusts the selection start point when any scroll host scrolls during a drag,
      * keeping the anchor pinned to the content rather than the viewport.
+     *
+     * @param event The scroll event from one of the registered scroll hosts.
      */
-    private handleScroll = (): void => {
-        if (!this.scrollHost || !this.rectElement) {
+    private handleScroll = (event: Event): void => {
+        if (!this.rectElement) {
             return;
         }
 
-        const deltaX = this.scrollHost.scrollLeft - this.startScrollLeft;
-        const deltaY = this.scrollHost.scrollTop - this.startScrollTop;
+        const target = event.target;
+        let deltaX = 0;
+        let deltaY = 0;
+        let handled = false;
+
+        const hHost = this.horizontalScrollHost;
+        if (hHost && target === hHost) {
+            deltaX = hHost.scrollLeft - this.startScrollLeft;
+            deltaY = hHost.scrollTop - this.startScrollTop;
+            this.startScrollLeft = hHost.scrollLeft;
+            this.startScrollTop = hHost.scrollTop;
+            handled = true;
+        }
+
+        const vHost = this.verticalScrollHost;
+        if (vHost && target === vHost) {
+            const verticalDelta = vHost.scrollTop - this.startVerticalScrollTop;
+            deltaY += verticalDelta;
+            this.startVerticalScrollTop = vHost.scrollTop;
+            handled = true;
+        }
+
+        if (!handled) {
+            return;
+        }
 
         this.startX -= deltaX;
         this.startY -= deltaY;
-        this.startScrollLeft = this.scrollHost.scrollLeft;
-        this.startScrollTop = this.scrollHost.scrollTop;
 
         this.updateRectElement(this.lastPointerX, this.lastPointerY);
 
@@ -203,12 +235,17 @@ export class SelectionView {
         this.stopAutoScroll();
         this.removeRectElement();
 
-        if (this.scrollHost) {
-            this.scrollHost.removeEventListener("scroll", this.handleScroll);
+        if (this.horizontalScrollHost) {
+            this.horizontalScrollHost.removeEventListener("scroll", this.handleScroll);
             this.startScrollLeft = 0;
             this.startScrollTop = 0;
         }
 
+        if (this.verticalScrollHost && this.verticalScrollHost !== this.horizontalScrollHost) {
+            this.verticalScrollHost.removeEventListener("scroll", this.handleScroll);
+            this.startVerticalScrollTop = 0;
+        }
+
         if (this.captureElement) {
             this.captureElement.removeEventListener("pointermove", this.handlePointerMove);
             this.captureElement.removeEventListener("pointerup", this.handlePointerUp);
@@ -225,38 +262,56 @@ export class SelectionView {
      * @param clientY The current pointer Y position in viewport coordinates.
      */
     private updateAutoScroll(clientX: number, clientY: number): void {
-        if (!this.scrollHost) {
+        if (!this.horizontalScrollHost && !this.verticalScrollHost) {
             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;
+        // Horizontal auto-scroll on the horizontal host.
+        if (this.horizontalScrollHost) {
+            const hostRect = this.horizontalScrollHost.getBoundingClientRect();
+            const distLeft = clientX - hostRect.left;
+            const distRight = hostRect.right - clientX;
 
-        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 (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));
+        // Vertical auto-scroll on the vertical host.
+        const verticalHost = this.verticalScrollHost ?? this.horizontalScrollHost;
+        if (verticalHost) {
+            const hostRect = verticalHost.getBoundingClientRect();
+            const distTop = clientY - hostRect.top;
+            const distBottom = hostRect.bottom - clientY;
+
+            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);
+                if (this.autoScrollDX !== 0 && this.horizontalScrollHost) {
+                    this.horizontalScrollHost.scrollBy(this.autoScrollDX, 0);
+                }
+
+                if (this.autoScrollDY !== 0) {
+                    const vh = this.verticalScrollHost ?? this.horizontalScrollHost;
+                    if (vh) {
+                        vh.scrollBy(0, this.autoScrollDY);
+                    }
+                }
             }, 16);
         } else {
             this.stopAutoScroll();