From da83bedd67ec65fd12c508476b716e567898a585 Mon Sep 17 00:00:00 2001 From: Brian Byassee Date: Thu, 25 Jan 2024 10:51:58 -0700 Subject: [PATCH 1/2] Feat: improve scroll position adjustment on rerender --- src/renderer.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/renderer.ts b/src/renderer.ts index 655f1c8a0..53a88c88e 100644 --- a/src/renderer.ts +++ b/src/renderer.ts @@ -625,15 +625,15 @@ class Renderer extends EventEmitter { // Remember the current cursor position const { scrollWidth } = this.scrollContainer - const oldCursorPosition = this.progressWrapper.clientWidth + const before = this.progressWrapper.getBoundingClientRect() // Re-render the waveform this.render(this.audioData) // Adjust the scroll position so that the cursor stays in the same place if (this.isScrollable && scrollWidth !== this.scrollContainer.scrollWidth) { - const newCursorPosition = this.progressWrapper.clientWidth - this.scrollContainer.scrollLeft += newCursorPosition - oldCursorPosition + const after = this.progressWrapper.getBoundingClientRect() + this.scrollContainer.scrollLeft += Math.floor(after.right - before.right) } } From 02f9b73a961b1081024c85306f49e0d50edf6661 Mon Sep 17 00:00:00 2001 From: Brian Byassee Date: Thu, 25 Jan 2024 14:44:30 -0700 Subject: [PATCH 2/2] Feat: Improve playhead positioning on zoom in/out --- src/renderer.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/renderer.ts b/src/renderer.ts index 53a88c88e..a65e1d2ba 100644 --- a/src/renderer.ts +++ b/src/renderer.ts @@ -625,15 +625,21 @@ class Renderer extends EventEmitter { // Remember the current cursor position const { scrollWidth } = this.scrollContainer - const before = this.progressWrapper.getBoundingClientRect() + const { right: before } = this.progressWrapper.getBoundingClientRect() // Re-render the waveform this.render(this.audioData) // Adjust the scroll position so that the cursor stays in the same place if (this.isScrollable && scrollWidth !== this.scrollContainer.scrollWidth) { - const after = this.progressWrapper.getBoundingClientRect() - this.scrollContainer.scrollLeft += Math.floor(after.right - before.right) + const { right: after } = this.progressWrapper.getBoundingClientRect() + let delta = after - before + // to limit compounding floating-point drift + // we need to round to the half px furthest from 0 + delta *= 2 + delta = delta < 0 ? Math.floor(delta) : Math.ceil(delta) + delta /= 2 + this.scrollContainer.scrollLeft += delta } }