fix mousewheel zoom for rangebar charts

apexcharts · Sep 26, 2024 · e025c29 · e025c29
1 parent bbdca6c
commit e025c29
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 15 deletions.
diff --git a/src/charts/Bar.js b/src/charts/Bar.js
@@ -380,9 +380,10 @@ class Bar {
       initialSpeed: w.config.chart.animations.speed,
       dataChangeSpeed: w.config.chart.animations.dynamicAnimation.speed,
       className: `apexcharts-${type}-area`,
+      chartType: type,
     })
 
-    renderedPath.attr('clip-path', `url(#gridRectMask${w.globals.cuid})`)
+    renderedPath.attr('clip-path', `url(#gridRectBarMask${w.globals.cuid})`)
 
     const forecast = w.config.forecastDataPoints
     if (forecast.count > 0) {

diff --git a/src/modules/Graphics.js b/src/modules/Graphics.js
@@ -392,6 +392,7 @@ class Graphics {
     initialSpeed,
     dataChangeSpeed,
     className,
+    chartType,
     shouldClipToGrid = true,
     bindEventsOnPaths = true,
     drawShadow = true,
@@ -439,9 +440,18 @@ class Graphics {
     el.attr('index', realIndex)
 
     if (shouldClipToGrid) {
-      el.attr({
-        'clip-path': `url(#gridRectMask${w.globals.cuid})`,
-      })
+      if (
+        (chartType === 'bar' && !w.globals.isHorizontal) ||
+        w.globals.comboCharts
+      ) {
+        el.attr({
+          'clip-path': `url(#gridRectBarMask${w.globals.cuid})`,
+        })
+      } else {
+        el.attr({
+          'clip-path': `url(#gridRectMask${w.globals.cuid})`,
+        })
+      }
     }
 
     // const defaultFilter = el.filterer

diff --git a/src/modules/ZoomPanSelection.js b/src/modules/ZoomPanSelection.js
@@ -298,15 +298,17 @@ export default class ZoomPanSelection extends Toolbar {
     }
 
     // Constrain within original chart bounds
-    newMinX = Math.max(newMinX, w.globals.initialMinX)
-    newMaxX = Math.min(newMaxX, w.globals.initialMaxX)
-
-    // Ensure minimum range
-    const minRange = (w.globals.initialMaxX - w.globals.initialMinX) * 0.01
-    if (newMaxX - newMinX < minRange) {
-      const midPoint = (newMinX + newMaxX) / 2
-      newMinX = midPoint - minRange / 2
-      newMaxX = midPoint + minRange / 2
+    if (!w.globals.isRangeBar) {
+      newMinX = Math.max(newMinX, w.globals.initialMinX)
+      newMaxX = Math.min(newMaxX, w.globals.initialMaxX)
+
+      // Ensure minimum range
+      const minRange = (w.globals.initialMaxX - w.globals.initialMinX) * 0.01
+      if (newMaxX - newMinX < minRange) {
+        const midPoint = (newMinX + newMaxX) / 2
+        newMinX = midPoint - minRange / 2
+        newMaxX = midPoint + minRange / 2
+      }
     }
 
     const newMinXMaxX = this._getNewMinXMaxX(newMinX, newMaxX)

diff --git a/src/modules/axes/Grid.js b/src/modules/axes/Grid.js
@@ -82,6 +82,7 @@ class Grid {
     }
 
     gl.dom.elGridRectMask = createClipPath(`gridRectMask${gl.cuid}`)
+    gl.dom.elGridRectBarMask = createClipPath(`gridRectBarMask${gl.cuid}`)
     gl.dom.elGridRectMarkerMask = createClipPath(`gridRectMarkerMask${gl.cuid}`)
     gl.dom.elForecastMask = createClipPath(`forecastMask${gl.cuid}`)
     gl.dom.elNonForecastMask = createClipPath(`nonForecastMask${gl.cuid}`)
@@ -105,6 +106,15 @@ class Grid {
     }
 
     gl.dom.elGridRect = graphics.drawRect(
+      0,
+      0,
+      gl.gridWidth,
+      gl.gridHeight,
+      0,
+      '#fff'
+    )
+
+    gl.dom.elGridRectBar = graphics.drawRect(
       -strokeSize / 2 - barWidthLeft - 2,
       -strokeSize / 2 - 2,
       gl.gridWidth + strokeSize + barWidthRight + barWidthLeft + 4,
@@ -113,7 +123,7 @@ class Grid {
       '#fff'
     )
 
-    const markerSize = w.globals.markers.largestSize + 1
+    const markerSize = w.globals.markers.largestSize
 
     gl.dom.elGridRectMarker = graphics.drawRect(
       -markerSize,
@@ -125,13 +135,15 @@ class Grid {
     )
 
     gl.dom.elGridRectMask.appendChild(gl.dom.elGridRect.node)
+    gl.dom.elGridRectBarMask.appendChild(gl.dom.elGridRectBar.node)
     gl.dom.elGridRectMarkerMask.appendChild(gl.dom.elGridRectMarker.node)
 
     const defs = gl.dom.baseEl.querySelector('defs')
     defs.appendChild(gl.dom.elGridRectMask)
+    defs.appendChild(gl.dom.elGridRectBarMask)
+    defs.appendChild(gl.dom.elGridRectMarkerMask)
     defs.appendChild(gl.dom.elForecastMask)
     defs.appendChild(gl.dom.elNonForecastMask)
-    defs.appendChild(gl.dom.elGridRectMarkerMask)
   }
 
   _drawGridLines({ i, x1, y1, x2, y2, xCount, parent }) {

diff --git a/src/modules/helpers/Destroy.js b/src/modules/helpers/Destroy.js
@@ -81,6 +81,7 @@ export default class Destroy {
     domEls.baseEl = null
     domEls.elGridRect = null
     domEls.elGridRectMask = null
+    domEls.elGridRectBarMask = null
     domEls.elGridRectMarkerMask = null
     domEls.elForecastMask = null
     domEls.elNonForecastMask = null