Fix: [Regions] dragging with CSS scale (katspaugh#3442)

* Fix: [Regions] dragging with CSS scale
phill2mj · Dec 26, 2023 · ca3fc5a · ca3fc5a
1 parent fc79124
commit ca3fc5a
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 5 deletions.
diff --git a/cypress/e2e/regions.cy.js b/cypress/e2e/regions.cy.js
@@ -329,7 +329,7 @@ describe('WaveSurfer Regions plugin tests', () => {
     })
   })
 
-  it('should be able to add region to a specific channel', () => {
+  it('should add a region to a specific channel by index', () => {
     cy.window().then((win) => {
       const regionsPlugin = win.wavesurfer.getActivePlugins()[0]
 
@@ -339,7 +339,7 @@ describe('WaveSurfer Regions plugin tests', () => {
         channelIdx: 1,
       })
 
-      cy.get('#waveform').matchImageSnapshot('region-with-split-channels')
+      cy.get('#waveform').matchImageSnapshot('regions-channelIdx')
     })
   })
 })
diff --git a/cypress/snapshots/region-with-split-channels.snap.png b/cypress/snapshots/region-with-split-channels.snap.png
diff --git a/...cy.js/region-with-split-channels.snap.png → ...regions.cy.js/regions-channelIdx.snap.png b/...cy.js/region-with-split-channels.snap.png → ...regions.cy.js/regions-channelIdx.snap.png
diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
     "cypress": "cypress open --e2e",
     "cypress:canary": "cypress open --e2e -b chrome:canary",
     "test": "cypress run --browser chrome",
-    "serve": "npx live-server --port=9090 --no-browser --ignore='.*,src'",
+    "serve": "npx live-server --port=9090 --no-browser --ignore='.*,src,cypress,scripts'",
     "start": "npm run build:dev & npm run serve"
   },
   "devDependencies": {

diff --git a/src/plugins/regions.ts b/src/plugins/regions.ts
@@ -238,7 +238,8 @@ class SingleRegion extends EventEmitter<RegionEvents> {
 
   public _onUpdate(dx: number, side?: 'start' | 'end') {
     if (!this.element.parentElement) return
-    const deltaSeconds = (dx / this.element.parentElement.clientWidth) * this.totalDuration
+    const { width } = this.element.parentElement.getBoundingClientRect()
+    const deltaSeconds = (dx / width) * this.totalDuration
     const newStart = !side || side === 'start' ? this.start + deltaSeconds : this.start
     const newEnd = !side || side === 'end' ? this.end + deltaSeconds : this.end
     const length = newEnd - newStart
@@ -561,7 +562,7 @@ class RegionsPlugin extends BasePlugin<RegionsPluginEvents, RegionsPluginOptions
         if (!this.wavesurfer) return
         const duration = this.wavesurfer.getDuration()
         const numberOfChannels = this.wavesurfer?.getDecodedData()?.numberOfChannels
-        const width = this.wavesurfer.getWrapper().clientWidth
+        const { width } = this.wavesurfer.getWrapper().getBoundingClientRect()
         // Calculate the start time of the region
         const start = (x / width) * duration
         // Give the region a small initial size