Updated UI to fix sidebar resize stuttering

Author: Balearica

scribe-ui/basic-viewer/pdf-viewer.js

@@ -236,7 +236,12 @@ class ScribePDFViewer {
         onExtract: (pageIndices) => this.newDocumentFromPages(pageIndices),
         onInsertFromFile: (index) => this._pickFilesToInsert(index),
         // The panel's width (or hiding it) changed, so re-inset the document into the area beside it.
-        onResize: () => { if (this.scribe.scrollContainer) this._relayout(); },
+        onResize: (_width, phase) => {
+          if (!this.scribe.scrollContainer) return;
+          if (phase === 'start') { this._beginSidebarResize(); return; }
+          if (phase === 'end') { this._endSidebarResize(); return; }
+          this._relayout();
+        },
       })
       : null;
     /**
@@ -246,8 +251,10 @@ class ScribePDFViewer {
     this._activeSidebar = showThumbnails ? 'thumbnails' : null;
     /** @type {?{raf: number}} In-flight sidebar open/close/switch transition (its live rAF handle), or null. */
     this._sidebarAnim = null;
-    /** @type {?{min: number, max: number}} Rail width bounds cached for the duration of a bookmarks-view resize drag. */
+    /** @type {?{min: number, max: number}} Rail width bounds cached for the duration of a bookmarks/comments-view resize drag. */
     this._sidebarResizeBounds = null;
+    /** True while a sidebar resize drag (any view) is in flight, so `_relayout` skips the scrollbar refresh per move. */
+    this._sidebarDragActive = false;
 
     /** Height the message banner currently claims from the document area (0 when hidden). */
     this._messageBannerHeight = 0;
@@ -1227,9 +1234,8 @@ class ScribePDFViewer {
     const inset = Math.min(panelW, Math.max(0, this._width - 80));
     this.scribe.scrollContainer.style.marginLeft = `${inset}px`;
     this.scribe.resize(this._width - inset, this._height - top);
-    // Skip the overlay-scrollbar refresh during an active sidebar-resize drag: reading the scroll metrics forces a synchronous reflow every pointermove (resize just invalidated the metrics cache).
-    // The drag's `end` phase runs one final `_relayout` that refreshes them, and a horizontal drag changes neither track's thumb until release anyway.
-    if (this._updateScrollbars && !this._sidebarResizeBounds) this._updateScrollbars();
+    // The scrollbar refresh rereads the scroll metrics the resize above just invalidated, forcing a synchronous reflow.
+    if (this._updateScrollbars && !this._sidebarDragActive) this._updateScrollbars();
   }
 
   /**
@@ -1262,29 +1268,24 @@ class ScribePDFViewer {
   }
 
   /**
-   * Apply a sidebar resize dragged from the bookmarks view, keeping the two views one shared width. The phases keep
-   * each frame cheap — the jank otherwise comes from doing the rail's `computeGeometry` (O(pages)) and forced layout
-   * reads on every pointermove:
-   * - `start`: cache the rail's width bounds once (one layout read), so each move clamps with pure arithmetic.
-   * - `move`: clamp with the cached bounds, resize ONLY the visible bookmarks panel, and re-inset the document. The
-   *   hidden rail is left untouched — no per-frame re-column.
-   * - `end`: commit through the rail's `setWidth`, which clamps, applies, and re-columns the rail ONCE so it's
-   *   correct when next shown; mirror the applied width onto the bookmarks panel.
+   * Apply a sidebar resize dragged from the bookmarks or comments view, keeping every view one shared width.
    * @param {number} desiredWidth
    * @param {'start'|'move'|'end'} phase
    */
   _resizeSidebar(desiredWidth, phase) {
     if (!this._thumbnailPanel || !this._bookmarksPanel) return;
     if (phase === 'start') {
+      // One layout read here lets every move clamp with pure arithmetic.
       this._sidebarResizeBounds = this._thumbnailPanel.getResizeBounds();
+      this._beginSidebarResize();
       return;
     }
     if (phase === 'end') {
       const applied = this._thumbnailPanel.setWidth(desiredWidth);
       this._bookmarksPanel.panelElem.style.width = `${applied}px`;
       if (this._commentsPanel) this._commentsPanel.panelElem.style.width = `${applied}px`;
       this._sidebarResizeBounds = null;
-      this._relayout();
+      this._endSidebarResize();
       return;
     }
     const b = this._sidebarResizeBounds;
@@ -1294,6 +1295,20 @@ class ScribePDFViewer {
     this._relayout();
   }
 
+  /** Enter a sidebar resize drag; paired with `_endSidebarResize` at release. */
+  _beginSidebarResize() {
+    this._sidebarDragActive = true;
+    this.scribe.startInteractionTextHide();
+  }
+
+  /** End a sidebar resize drag: settle the document area, then restore the text layers. */
+  _endSidebarResize() {
+    this._sidebarDragActive = false;
+    // Settle while the layers are still hidden so the scrollbar refresh's forced reflow stays cheap.
+    this._relayout();
+    this.scribe.endInteractionTextHide();
+  }
+
   /**
    * Animate the left sidebar between its states as one coherent motion: open and close slide the view in/out from the dock edge,
    * and a switch crossfades the two views in place.

scribe-ui/js/controls/bookmarksPanel.js

@@ -313,6 +313,7 @@ export function createBookmarksPanel(scribe, { onNavigate, onResize }) {
   function onResizeEnd(e) {
     window.removeEventListener('pointermove', onResizeMove);
     window.removeEventListener('pointerup', onResizeEnd);
+    window.removeEventListener('pointercancel', onResizeEnd);
     if (onResize) onResize(resizeStartW + (e.clientX - resizeStartX), 'end');
   }
   resizeHandle.addEventListener('pointerdown', (e) => {
@@ -322,6 +323,8 @@ export function createBookmarksPanel(scribe, { onNavigate, onResize }) {
     if (onResize) onResize(resizeStartW, 'start');
     window.addEventListener('pointermove', onResizeMove);
     window.addEventListener('pointerup', onResizeEnd);
+    // The host stays in its drag regime until an 'end' report, so a canceled drag must deliver one too.
+    window.addEventListener('pointercancel', onResizeEnd);
   });
 
   /**

scribe-ui/js/controls/commentsPanel.js

@@ -643,6 +643,7 @@ export function createCommentsPanel(scribe, { onNavigate, onResize }) {
   function onResizeEnd(e) {
     window.removeEventListener('pointermove', onResizeMove);
     window.removeEventListener('pointerup', onResizeEnd);
+    window.removeEventListener('pointercancel', onResizeEnd);
     if (onResize) onResize(resizeStartW + (e.clientX - resizeStartX), 'end');
   }
   resizeHandle.addEventListener('pointerdown', (e) => {
@@ -652,6 +653,8 @@ export function createCommentsPanel(scribe, { onNavigate, onResize }) {
     if (onResize) onResize(resizeStartW, 'start');
     window.addEventListener('pointermove', onResizeMove);
     window.addEventListener('pointerup', onResizeEnd);
+    // The host stays in its drag regime until an 'end' report, so a canceled drag must deliver one too.
+    window.addEventListener('pointercancel', onResizeEnd);
   });
 
   /** Reflect `selected` on the rendered rows. */

scribe-ui/js/controls/panels.js

@@ -90,7 +90,8 @@ function clearPageClipboard() {
  * @param {(n: number) => void} cfg.onSelect - Called with the page index when a thumbnail is clicked.
  * @param {(pageIndices: Array<number>) => void} [cfg.onExtract] - Called with the page indices to open as a new document.
  * @param {(at: number) => void} [cfg.onInsertFromFile] - Called with the gap index at which to insert pages picked from a file.
- * @param {(width: number) => void} [cfg.onResize] - Called with the panel's current visible width in px (0 when hidden), so the host can inset the document to the remaining area.
+ * @param {(width: number, phase?: 'start'|'move'|'end') => void} [cfg.onResize] - Called with the panel's current visible width in px (0 when hidden).
+ *   `phase` is set on handle-drag reports and absent on non-drag reports (view shown or hidden).
  * @returns {{
  *   panelElem: HTMLDivElement, toggleElem: HTMLSpanElement,
  *   rebuild: (activeN?: number) => void, cancelCut: () => void, setActive: (n: number) => void,
@@ -804,7 +805,7 @@ export function createThumbnailPanel(scribe, {
   let resizeStartPanelW = 0;
   let resizeContainerW = 0;
   let resizeLivePanelW = 0;
-  // The page centered when the drag began, plus its fractional position, so every reflow re-centers the same page.
+  // The page pinned at drag start, plus its fractional position, so every reflow re-centers the same page.
   let resizeAnchorPage = -1;
   let resizeAnchorFrac = 0;
   // The panel's extra width (scrollbar gutter + padding + border) measured at drag start.
@@ -822,14 +823,15 @@ export function createThumbnailPanel(scribe, {
     // The width just changed. Refresh the cache once here so reflow/gridColsFor/windowRange read it without each forcing a layout.
     measureViewport();
     reflow();
-    notifyResize();
+    if (onResize) onResize(resizeLivePanelW, 'move');
   }
 
   function onResizeEnd() {
     window.removeEventListener('pointermove', onResizeMove);
     window.removeEventListener('pointerup', onResizeEnd);
+    window.removeEventListener('pointercancel', onResizeEnd);
     updateWindow(true);
-    notifyResize();
+    if (onResize) onResize(resizeLivePanelW, 'end');
   }
 
   resizeHandle.addEventListener('pointerdown', (event) => {
@@ -838,8 +840,6 @@ export function createThumbnailPanel(scribe, {
     resizeStartPanelW = panelElem.getBoundingClientRect().width;
     resizeLivePanelW = resizeStartPanelW;
     resizeContainerW = (panelElem.parentElement && panelElem.parentElement.clientWidth) || resizeStartPanelW;
-    // Pin the active page (the one shown in the viewer) for the whole drag so it stays in the pane across column changes,
-    // or fall back to the page at the viewport center when nothing is active.
     measureViewport();
     resizeExtraW = resizeStartPanelW - viewportW;
     const centerY = scrollElem.scrollTop + viewportH / 2;
@@ -848,8 +848,11 @@ export function createThumbnailPanel(scribe, {
       : (pageCount > 0 ? rowAt(Math.max(0, centerY - PAD)) : -1);
     resizeAnchorFrac = resizeAnchorPage >= 0 && heights[resizeAnchorPage]
       ? Math.max(0, Math.min(1, (centerY - (PAD + offsets[resizeAnchorPage])) / heights[resizeAnchorPage])) : 0;
+    if (onResize) onResize(resizeStartPanelW, 'start');
     window.addEventListener('pointermove', onResizeMove);
     window.addEventListener('pointerup', onResizeEnd);
+    // The host stays in its drag regime until an 'end' report, so a canceled drag must deliver one too.
+    window.addEventListener('pointercancel', onResizeEnd);
   });
 
   // Drag-to-select: a press in the panel's empty space rubber-bands a rectangle that selects every page it covers.

scribe-ui/viewer.js

@@ -1049,6 +1049,34 @@ export class ScribeViewer {
     }
   }
 
+  /**
+   * Hide the built text layers until `endInteractionTextHide`, so a host interaction that moves or re-clips the content
+   * (a sidebar resize drag) does not repaint every built word per frame.
+   * No-ops when hiding is unsafe: visible-text modes, a focused edit input, or an active selection.
+   */
+  startInteractionTextHide() {
+    const editing = document.activeElement && /** @type {HTMLElement} */ (document.activeElement).isContentEditable
+      && this.elem?.contains(document.activeElement);
+    // Hiding visible text blanks the page, display:none blurs a focused edit (committing it), and a selection's layers must stay live.
+    if (this.state.displayMode !== 'invis' || editing || this._selectionPages().size) return;
+    // Take over a scroll-hide already in flight: its pending settle would otherwise restore the layers mid-interaction.
+    if (this._scrollTextHideTimer) {
+      clearTimeout(this._scrollTextHideTimer);
+      this._scrollTextHideTimer = null;
+    }
+    this._scrollTextHideEngaged = true;
+    for (const n of this.textGroupsRenderIndices) {
+      for (const grp of Object.values(this._textGroups[n] || {})) {
+        if (grp.style.display !== 'none') grp.style.display = 'none';
+      }
+    }
+  }
+
+  /** Restore the text layers hidden by `startInteractionTextHide`; sharing the scroll-hide restore keeps either hide source from leaving a group stuck hidden. */
+  endInteractionTextHide() {
+    this._endScrollTextHide();
+  }
+
   /**
    * Scroll the viewport by a pixel delta. Positive `deltaY` follows a downward drag (revealing content above).
    * The old stage model moved `stage.y` (negative-of-scroll) by `+delta`, so native scroll uses the inverse sign.