feat(dataZoom): allow customizing borderRadius of the move handle

src/component/dataZoom/SliderZoomModel.ts

@@ -35,6 +35,10 @@ interface SliderHandleLabelOption {
     show?: boolean
 }
 
+type MoveHandleStyle = ItemStyleOption & {
+    borderRadius?: number | number[]
+};
+
 export interface SliderDataZoomOption
     extends DataZoomOption, BoxLayoutOptionMixin,
     ComponentOnCalendarOptionMixin, ComponentOnMatrixOptionMixin {
@@ -102,7 +106,7 @@ export interface SliderDataZoomOption
      * Icon to indicate it is a draggable panel.
      */
     moveHandleIcon?: string
-    moveHandleStyle?: ItemStyleOption
+    moveHandleStyle?: MoveHandleStyle
     /**
      * Height of handle rect. Can be a percent string relative to the slider height.
      */
@@ -121,7 +125,7 @@ export interface SliderDataZoomOption
     textStyle?: LabelOption
 
     /**
-     * If eable select by brushing
+     * If enable select by brushing
      */
     brushSelect?: boolean
 
@@ -130,7 +134,7 @@ export interface SliderDataZoomOption
     emphasis?: {
         handleLabel?: SliderHandleLabelOption
         handleStyle?: ItemStyleOption
-        moveHandleStyle?: ItemStyleOption
+        moveHandleStyle?: MoveHandleStyle
     },
 
     /**
@@ -201,7 +205,8 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
         moveHandleIcon: 'path://M-320.9-50L-320.9-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-348-41-339-50-320.9-50z M-212.3-50L-212.3-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-239.4-41-230.4-50-212.3-50z M-103.7-50L-103.7-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-130.9-41-121.8-50-103.7-50z',
         moveHandleStyle: {
             color: tokens.color.accent40,
-            opacity: 0.5
+            opacity: 0.5,
+            borderRadius: [0, 0, 2, 2]
         },
 
         showDetail: true,
@@ -235,4 +240,4 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
     } as SliderDataZoomOption);
 }
 
-export default SliderZoomModel;
+export default SliderZoomModel;

src/component/dataZoom/SliderZoomView.ts

@@ -40,10 +40,10 @@ import { enableHoverEmphasis } from '../../util/states';
 import { createSymbol, symbolBuildProxies } from '../../util/symbol';
 import { deprecateLog } from '../../util/log';
 import { PointLike } from 'zrender/src/core/Point';
-import Displayable from 'zrender/src/graphic/Displayable';
 import { createTextStyle } from '../../label/labelStyle';
 import SeriesData from '../../data/SeriesData';
 import tokens from '../../visual/tokens';
+import { normalizeCssArray } from '../../util/format';
 
 const Rect = graphic.Rect;
 
@@ -620,15 +620,16 @@ class SliderZoomView extends DataZoomView {
             this._handleHeight = parsePercent(handleSize, this._size[1]);
             this._handleWidth = bRect.width / bRect.height * this._handleHeight;
 
-            path.setStyle(dataZoomModel.getModel('handleStyle').getItemStyle());
+            const handleStyleModel = dataZoomModel.getModel('handleStyle');
+            path.setStyle(handleStyleModel.getItemStyle());
             path.style.strokeNoScale = true;
             path.rectHover = true;
 
             path.ensureState('emphasis').style = dataZoomModel.getModel(['emphasis', 'handleStyle']).getItemStyle();
             enableHoverEmphasis(path);
 
             const handleColor = dataZoomModel.get('handleColor' as any); // deprecated option
-            // Compatitable with previous version
+            // Compatible with previous version
             if (handleColor != null) {
                 path.style.fill = handleColor;
             }
@@ -656,14 +657,15 @@ class SliderZoomView extends DataZoomView {
         }, this);
 
         // Handle to move. Only visible when brushSelect is set true.
-        let actualMoveZone: Displayable = filler;
+        let actualMoveZone: graphic.Rect = filler;
         if (brushSelect) {
             const moveHandleHeight = parsePercent(dataZoomModel.get('moveHandleSize'), size[1]);
+            const moveHandleStyleModel = dataZoomModel.getModel('moveHandleStyle');
             const moveHandle = displayables.moveHandle = new graphic.Rect({
-                style: dataZoomModel.getModel('moveHandleStyle').getItemStyle(),
+                style: moveHandleStyleModel.getItemStyle(),
                 silent: true,
                 shape: {
-                    r: [0, 0, 2, 2],
+                    r: moveHandleStyleModel.get('borderRadius'),
                     y: size[1] - 0.5,
                     height: moveHandleHeight
                 }
@@ -678,9 +680,15 @@ class SliderZoomView extends DataZoomView {
             moveHandleIcon.silent = true;
             moveHandleIcon.y = size[1] + moveHandleHeight / 2 - 0.5;
 
-            moveHandle.ensureState('emphasis').style = dataZoomModel.getModel(
-                ['emphasis', 'moveHandleStyle']
-            ).getItemStyle();
+            const moveHandleEmphasisStyle = dataZoomModel.getModel(['emphasis', 'moveHandleStyle']);
+            const moveHandleEmphasisState = moveHandle.ensureState('emphasis');
+            moveHandleEmphasisState.style = moveHandleEmphasisStyle.getItemStyle();
+            const moveHandleEmphasisBorderRadius = moveHandleEmphasisStyle.get('borderRadius');
+            if (moveHandleEmphasisBorderRadius != null) {
+                moveHandleEmphasisState.shape = {
+                    r: moveHandleEmphasisBorderRadius
+                };
+            }
 
             const moveZoneExpandSize = Math.min(size[1] / 2, Math.max(moveHandleHeight, 10));
             actualMoveZone = displayables.moveZone = new graphic.Rect({
@@ -771,12 +779,14 @@ class SliderZoomView extends DataZoomView {
             });
         }, this);
 
+        const borderRadius = normalizeCssArray(this.dataZoomModel.get('borderRadius') || 0);
         // Filler
         displaybles.filler.setShape({
             x: handleInterval[0],
             y: 0,
             width: handleInterval[1] - handleInterval[0],
-            height: size[1]
+            height: size[1],
+            r: borderRadius
         });
 
         const viewExtent = {
@@ -796,9 +806,10 @@ class SliderZoomView extends DataZoomView {
         const dataShadowSegs = displaybles.dataShadowSegs;
         const segIntervals = [0, handleInterval[0], handleInterval[1], size[0]];
 
-        for (let i = 0; i < dataShadowSegs.length; i++) {
+        const segNum = dataShadowSegs.length;
+        for (let i = 0; i < segNum; i++) {
             const segGroup = dataShadowSegs[i];
-            let clipPath = segGroup.getClipPath();
+            let clipPath = segGroup.getClipPath() as graphic.Rect;
             if (!clipPath) {
                 clipPath = new graphic.Rect();
                 segGroup.setClipPath(clipPath);
@@ -809,6 +820,12 @@ class SliderZoomView extends DataZoomView {
                 width: segIntervals[i + 1] - segIntervals[i],
                 height: size[1]
             });
+            // prevent shadow from overflow when `borderRadius` is set
+            if (i === 0 || i === segNum - 1) {
+                clipPath.shape.r = i === 0
+                    ? [borderRadius[0], 0, 0, borderRadius[3]]
+                    : [0, borderRadius[1], borderRadius[2], 0];
+            }
         }
 
         this._updateDataInfo(nonRealtime);