This is an automated email from the ASF dual-hosted git repository. wangzx pushed a commit to branch feat/datazoom/move-hanlde/border-radius in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 2ced7f4e8fb3f81542f19cdb0a252e5ff5b9ab0c Author: plainheart <[email protected]> AuthorDate: Fri Aug 4 12:13:08 2023 +0800 feat(dataZoom): allow customizing `borderRadius` of the move handle. --- src/component/dataZoom/SliderZoomModel.ts | 15 ++++++++++----- src/component/dataZoom/SliderZoomView.ts | 22 +++++++++++++++------- test/dataZoom-clip.html | 14 ++++++++++++-- 3 files changed, 37 insertions(+), 14 deletions(-) diff --git a/src/component/dataZoom/SliderZoomModel.ts b/src/component/dataZoom/SliderZoomModel.ts index a6d051e1b..c6cd94451 100644 --- a/src/component/dataZoom/SliderZoomModel.ts +++ b/src/component/dataZoom/SliderZoomModel.ts @@ -28,6 +28,10 @@ import { } from '../../util/types'; import { inheritDefaultOption } from '../../util/component'; +type MoveHandleStyle = ItemStyleOption & { + borderRadius?: number | number[] +}; + export interface SliderDataZoomOption extends DataZoomOption, BoxLayoutOptionMixin { show?: boolean @@ -91,7 +95,7 @@ export interface SliderDataZoomOption extends DataZoomOption, BoxLayoutOptionMix * 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. */ @@ -110,7 +114,7 @@ export interface SliderDataZoomOption extends DataZoomOption, BoxLayoutOptionMix textStyle?: LabelOption /** - * If eable select by brushing + * If enable select by brushing */ brushSelect?: boolean @@ -118,7 +122,7 @@ export interface SliderDataZoomOption extends DataZoomOption, BoxLayoutOptionMix emphasis?: { handleStyle?: ItemStyleOption - moveHandleStyle?: ItemStyleOption + moveHandleStyle?: MoveHandleStyle } } @@ -183,7 +187,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: '#D2DBEE', - opacity: 0.7 + opacity: 0.7, + borderRadius: [0, 0, 2, 2] }, showDetail: true, @@ -211,4 +216,4 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> { } as SliderDataZoomOption); } -export default SliderZoomModel; \ No newline at end of file +export default SliderZoomModel; diff --git a/src/component/dataZoom/SliderZoomView.ts b/src/component/dataZoom/SliderZoomView.ts index bd3de1ff5..7424b36cd 100644 --- a/src/component/dataZoom/SliderZoomView.ts +++ b/src/component/dataZoom/SliderZoomView.ts @@ -603,7 +603,8 @@ 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; @@ -611,7 +612,7 @@ class SliderZoomView extends DataZoomView { 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; } @@ -640,11 +641,12 @@ class SliderZoomView extends DataZoomView { let actualMoveZone: Displayable = 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 } @@ -659,9 +661,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({ diff --git a/test/dataZoom-clip.html b/test/dataZoom-clip.html index b360ee971..fa9249567 100644 --- a/test/dataZoom-clip.html +++ b/test/dataZoom-clip.html @@ -96,7 +96,17 @@ under the License. type: 'slider', filterMode: 'none', start: 5, - end: 40 + end: 40, + borderRadius: 20, + moveHandleSize: 14, + moveHandleStyle: { + borderRadius: 8 + }, + emphasis: { + moveHandleStyle: { + borderRadius: 0 + } + } }], series: [{ type: 'line', @@ -298,4 +308,4 @@ under the License. </body> -</html> \ No newline at end of file +</html> --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
