You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/07/26 03:47:30 UTC
[incubator-echarts] branch datazoom-brush updated: feat(dataZoom):
add drag zone when using brush in dataZoom
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch datazoom-brush
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/datazoom-brush by this push:
new 08a965a feat(dataZoom): add drag zone when using brush in dataZoom
08a965a is described below
commit 08a965a157590ef65a08d18faa08d2b5f6f32327
Author: pissang <bm...@gmail.com>
AuthorDate: Sun Jul 26 11:47:09 2020 +0800
feat(dataZoom): add drag zone when using brush in dataZoom
---
src/component/dataZoom/SliderZoomModel.ts | 14 +++++-
src/component/dataZoom/SliderZoomView.ts | 84 +++++++++++++++++++++++++------
src/component/visualMap/ContinuousView.ts | 3 +-
3 files changed, 83 insertions(+), 18 deletions(-)
diff --git a/src/component/dataZoom/SliderZoomModel.ts b/src/component/dataZoom/SliderZoomModel.ts
index e051a0f..ac5f427 100644
--- a/src/component/dataZoom/SliderZoomModel.ts
+++ b/src/component/dataZoom/SliderZoomModel.ts
@@ -88,8 +88,11 @@ export interface SliderDataZoomOption extends DataZoomOption, BoxLayoutOptionMix
handleStyle?: ItemStyleOption
- moveHandleIcon?: string
+ // moveHandleIcon?: string
moveHandleStyle?: ItemStyleOption
+ /**
+ * Height of handle rect. Can be a percent string relative to the slider height.
+ */
moveHandleSize?: number
labelPrecision?: number | 'auto'
@@ -113,6 +116,7 @@ export interface SliderDataZoomOption extends DataZoomOption, BoxLayoutOptionMix
emphasis?: {
handleStyle?: ItemStyleOption
+ moveHandleStyle?: ItemStyleOption
}
}
@@ -173,6 +177,11 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
borderColor: '#ACB8D1'
},
+ moveHandleSize: 6,
+ moveHandleStyle: {
+ color: '#D2DBEE'
+ },
+
showDetail: true,
showDataShadow: 'auto', // Default auto decision.
realtime: true,
@@ -190,6 +199,9 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
handleStyle: {
borderColor: '#8FB0F7',
borderWidth: 2
+ },
+ moveHandleStyle: {
+ color: '#8FB0F7'
}
}
});
diff --git a/src/component/dataZoom/SliderZoomView.ts b/src/component/dataZoom/SliderZoomView.ts
index f9cc371..5c6df76 100644
--- a/src/component/dataZoom/SliderZoomView.ts
+++ b/src/component/dataZoom/SliderZoomView.ts
@@ -42,6 +42,7 @@ import { createSymbol, symbolBuildProxies } from '../../util/symbol';
import { deprecateLog } from '../../util/log';
import { __DEV__ } from '../../config';
import { PointLike } from 'zrender/src/core/Point';
+import Displayable from 'zrender/src/graphic/Displayable';
const Rect = graphic.Rect;
@@ -74,7 +75,8 @@ interface Displayables {
brushRect: graphic.Rect;
- moveHandle: graphic.Group;
+ moveHandle: graphic.Rect;
+ moveHandleIcon: graphic.Path;
// invisible move zone.
moveZone: graphic.Rect;
}
@@ -495,18 +497,20 @@ class SliderZoomView extends DataZoomView {
}
private _renderHandle() {
- const displaybles = this._displayables;
- const handles: [graphic.Path, graphic.Path] = displaybles.handles = [null, null];
- const handleLabels: [graphic.Text, graphic.Text] = displaybles.handleLabels = [null, null];
+ const thisGroup = this.group;
+ const displayables = this._displayables;
+ const handles: [graphic.Path, graphic.Path] = displayables.handles = [null, null];
+ const handleLabels: [graphic.Text, graphic.Text] = displayables.handleLabels = [null, null];
const sliderGroup = this._displayables.sliderGroup;
const size = this._size;
const dataZoomModel = this.dataZoomModel;
+ const api = this.api;
const borderRadius = dataZoomModel.get('borderRadius') || 0;
const brushSelect = dataZoomModel.get('brushSelect');
- const filler = displaybles.filler = new Rect({
+ const filler = displayables.filler = new Rect({
silent: brushSelect,
style: {
fill: dataZoomModel.get('fillerColor')
@@ -516,16 +520,6 @@ class SliderZoomView extends DataZoomView {
}
});
- filler.attr({
- draggable: true,
- cursor: getCursor(this._orient),
- drift: bind(this._onDragMove, this, 'all'),
- ondragstart: bind(this._showDataInfo, this, true),
- ondragend: bind(this._onDragEnd, this),
- onmouseover: bind(this._showDataInfo, this, true),
- onmouseout: bind(this._showDataInfo, this, false)
- });
-
sliderGroup.add(filler);
// Frame border.
@@ -547,6 +541,7 @@ class SliderZoomView extends DataZoomView {
}
}));
+ // Left and right handle to resize
each([0, 1] as const, function (handleIndex) {
let iconStr = dataZoomModel.get('handleIcon');
if (!symbolBuildProxies[iconStr] && iconStr.indexOf('path://') < 0) {
@@ -592,7 +587,7 @@ class SliderZoomView extends DataZoomView {
const textStyleModel = dataZoomModel.getModel('textStyle');
- this.group.add(
+ thisGroup.add(
handleLabels[handleIndex] = new graphic.Text({
silent: true,
invisible: true,
@@ -607,6 +602,53 @@ class SliderZoomView extends DataZoomView {
}));
}, this);
+
+ // Handle to move. Only visible when brushSelect is set true.
+ let actualMoveZone: Displayable = filler;
+ if (brushSelect) {
+ const moveHandleHeight = parsePercent(dataZoomModel.get('moveHandleSize'), size[1]);
+ const moveHandle = displayables.moveHandle = new graphic.Rect({
+ style: dataZoomModel.getModel('moveHandleStyle').getItemStyle(),
+ shape: {
+ r: [0, 0, 2, 2],
+ y: size[1],
+ height: moveHandleHeight
+ }
+ });
+ moveHandle.ensureState('emphasis').style = dataZoomModel.getModel(
+ ['emphasis', 'moveHandleStyle']
+ ).getItemStyle();
+
+ const moveZoneExpandSize = Math.min(size[1] / 2, Math.max(moveHandleHeight, 15));
+ actualMoveZone = displayables.moveZone = new graphic.Rect({
+ invisible: true,
+ cursor: 'move',
+ shape: {
+ y: size[1] - moveZoneExpandSize,
+ height: moveHandleHeight + moveZoneExpandSize
+ }
+ });
+
+ actualMoveZone.on('mouseover', () => {
+ api.enterEmphasis(moveHandle);
+ })
+ .on('mouseout', () => {
+ api.leaveEmphasis(moveHandle);
+ });
+
+ sliderGroup.add(moveHandle);
+ sliderGroup.add(actualMoveZone);
+ }
+
+ actualMoveZone.attr({
+ draggable: true,
+ cursor: getCursor(this._orient),
+ drift: bind(this._onDragMove, this, 'all'),
+ ondragstart: bind(this._showDataInfo, this, true),
+ ondragend: bind(this._onDragEnd, this),
+ onmouseover: bind(this._showDataInfo, this, true),
+ onmouseout: bind(this._showDataInfo, this, false)
+ });
}
private _resetInterval() {
@@ -672,6 +714,16 @@ class SliderZoomView extends DataZoomView {
height: size[1]
});
+ const viewExtent = {
+ x: handleInterval[0],
+ width: handleInterval[1] - handleInterval[0]
+ };
+ // Move handle
+ if (displaybles.moveHandle) {
+ displaybles.moveHandle.setShape(viewExtent);
+ displaybles.moveZone.setShape(viewExtent);
+ }
+
// update clip path of shadow.
const dataShadowSegs = displaybles.dataShadowSegs;
const segIntervals = [0, handleInterval[0], handleInterval[1], size[0]];
diff --git a/src/component/visualMap/ContinuousView.ts b/src/component/visualMap/ContinuousView.ts
index de7b8b0..01a222f 100644
--- a/src/component/visualMap/ContinuousView.ts
+++ b/src/component/visualMap/ContinuousView.ts
@@ -711,7 +711,7 @@ class ContinuousView extends VisualMapView {
if (handleLabels) {
for (let i = 0; i < handleLabels.length; i++) {
// Fade out handle labels.
- // TODO not do twice.
+ // NOTE: Must use api enter/leave on emphasis/blur/select state. Or the global states manager will change it.
this._api.enterBlur(handleLabels[i]);
}
}
@@ -849,6 +849,7 @@ class ContinuousView extends VisualMapView {
if (handleLabels) {
for (let i = 0; i < handleLabels.length; i++) {
// Fade out handle labels.
+ // NOTE: Must use api enter/leave on emphasis/blur/select state. Or the global states manager will change it.
this._api.leaveBlur(handleLabels[i]);
}
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org