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/21 04:27:32 UTC
[incubator-echarts] branch optimize-style updated: feat(visualMap):
optimize indicator and handle in symbolSize visual mapping
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch optimize-style
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/optimize-style by this push:
new 9a665c5 feat(visualMap): optimize indicator and handle in symbolSize visual mapping
9a665c5 is described below
commit 9a665c51d2aeaa27f4b5be1a19d5e4cd4f49c776
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Jul 21 11:12:17 2020 +0800
feat(visualMap): optimize indicator and handle in symbolSize visual mapping
---
src/component/dataZoom/SliderZoomView.ts | 14 +++-
src/component/visualMap/ContinuousModel.ts | 10 ++-
src/component/visualMap/ContinuousView.ts | 108 ++++++++++++++++++++++-------
src/util/graphic.ts | 1 -
src/util/symbol.ts | 2 +-
test/visualMap-scatter-symbolSize.html | 1 +
6 files changed, 105 insertions(+), 31 deletions(-)
diff --git a/src/component/dataZoom/SliderZoomView.ts b/src/component/dataZoom/SliderZoomView.ts
index e6f0e22..d775d67 100644
--- a/src/component/dataZoom/SliderZoomView.ts
+++ b/src/component/dataZoom/SliderZoomView.ts
@@ -38,7 +38,9 @@ import SeriesModel from '../../model/Series';
import { AxisBaseModel } from '../../coord/AxisBaseModel';
import { getAxisMainType, collectReferCoordSysModelInfo } from './helper';
import { enableHoverEmphasis } from '../../util/states';
-import { createSymbol } from '../../util/symbol';
+import { createSymbol, symbolBuildProxies } from '../../util/symbol';
+import { deprecateLog } from '../../util/log';
+import { __DEV__ } from '../../config';
const Rect = graphic.Rect;
@@ -490,8 +492,16 @@ class SliderZoomView extends DataZoomView {
}));
each([0, 1] as const, function (handleIndex) {
+ let iconStr = dataZoomModel.get('handleIcon');
+ if (!symbolBuildProxies[iconStr] && iconStr.indexOf('path://') < 0) {
+ // Compatitable with the old icon parsers. Which can use a path string without path://
+ iconStr = 'path://' + iconStr;
+ if (__DEV__) {
+ deprecateLog('handleIcon now needs \'path://\' prefix when using a path string');
+ }
+ }
const path = createSymbol(
- dataZoomModel.get('handleIcon'),
+ iconStr,
-1, 0, 2, 2, null, true
) as graphic.Path;
path.attr({
diff --git a/src/component/visualMap/ContinuousModel.ts b/src/component/visualMap/ContinuousModel.ts
index 9bfae76..5759d5f 100644
--- a/src/component/visualMap/ContinuousModel.ts
+++ b/src/component/visualMap/ContinuousModel.ts
@@ -146,7 +146,7 @@ class ContinuousModel extends VisualMapModel<ContinousVisualMapOption> {
zrUtil.each(this.stateList, function (state: VisualState) {
const symbolSize = this.option.controller[state].symbolSize;
if (symbolSize && symbolSize[0] !== symbolSize[1]) {
- symbolSize[0] = 0; // For good looking.
+ symbolSize[0] = symbolSize[1] / 3; // For good looking.
}
}, this);
}
@@ -286,14 +286,18 @@ class ContinuousModel extends VisualMapModel<ContinousVisualMapOption> {
handleStyle: {
borderColor: '#fff',
- borderWidth: 2
+ borderWidth: 1
},
indicatorIcon: 'circle',
indicatorSize: '50%',
indicatorStyle: {
borderColor: '#fff',
- borderWidth: 2
+ borderWidth: 2,
+ shadowBlur: 2,
+ shadowOffsetX: 1,
+ shadowOffsetY: 1,
+ shadowColor: 'rgba(0,0,0,0.2)'
}
// emphasis: {
// handleStyle: {
diff --git a/src/component/visualMap/ContinuousView.ts b/src/component/visualMap/ContinuousView.ts
index 878e057..708f819 100644
--- a/src/component/visualMap/ContinuousView.ts
+++ b/src/component/visualMap/ContinuousView.ts
@@ -35,7 +35,7 @@ import Element, { ElementEvent } from 'zrender/src/Element';
import { TextVerticalAlign, TextAlign } from 'zrender/src/core/types';
import { ColorString, Payload } from '../../util/types';
import { parsePercent } from 'zrender/src/contain/text';
-import { setAsHighDownDispatcher } from '../../util/states';
+import { setAsHighDownDispatcher, enterBlur, leaveBlur } from '../../util/states';
import { createSymbol } from '../../util/symbol';
const linearMap = numberUtil.linearMap;
@@ -104,6 +104,8 @@ class ContinuousView extends VisualMapView {
private _hovering: boolean;
+ private _firstShowIndicator: boolean;
+
doRender(
visualMapModel: ContinuousModel,
@@ -250,10 +252,10 @@ class ContinuousView extends VisualMapView {
) {
const onDrift = zrUtil.bind(this._dragHandle, this, handleIndex, false);
const onDragEnd = zrUtil.bind(this._dragHandle, this, handleIndex, true);
- const scale = parsePercent(visualMapModel.get('handleSize'), itemSize[0]);
+ const handleSize = parsePercent(visualMapModel.get('handleSize'), itemSize[0]);
const handleThumb = createSymbol(
visualMapModel.get('handleIcon'),
- -scale / 2, -scale / 2, scale, scale,
+ -handleSize / 2, -handleSize / 2, handleSize, handleSize,
null, true
);
handleThumb.attr({
@@ -265,7 +267,7 @@ class ContinuousView extends VisualMapView {
eventTool.stop(e.event);
}
});
- handleThumb.x += itemSize[0] / 2;
+ handleThumb.x = itemSize[0] / 2;
handleThumb.useStyle(visualMapModel.getModel('handleStyle').getItemStyle());
(handleThumb as graphic.Path).setStyle({
@@ -298,16 +300,14 @@ class ContinuousView extends VisualMapView {
fill: textStyleModel.getTextColor()
}
});
+ handleLabel.ensureState('blur').style = {
+ opacity: 0.1
+ };
+ handleLabel.stateTransition = { duration: 200 };
+
this.group.add(handleLabel);
- const handleLabelPoint = [
- orient === 'horizontal'
- ? textSize / 2
- : textSize * 1.5,
- orient === 'horizontal'
- ? (handleIndex === 0 ? -(textSize * 1.5) : (textSize * 1.5))
- : (handleIndex === 0 ? -textSize / 2 : textSize / 2)
- ];
+ const handleLabelPoint = [handleSize, 0];
const shapes = this._shapes;
shapes.handleThumbs[handleIndex] = handleThumb;
@@ -351,7 +351,7 @@ class ContinuousView extends VisualMapView {
this.group.add(indicatorLabel);
const indicatorLabelPoint = [
- (orient === 'horizontal' ? textSize / 2 : HOVER_LINK_OUT) + 8,
+ (orient === 'horizontal' ? textSize / 2 : HOVER_LINK_OUT) + itemSize[0] / 2,
0
];
@@ -359,6 +359,8 @@ class ContinuousView extends VisualMapView {
shapes.indicator = indicator;
shapes.indicatorLabel = indicatorLabel;
shapes.indicatorLabelPoint = indicatorLabelPoint;
+
+ this._firstShowIndicator = true;
}
private _dragHandle(
@@ -379,6 +381,7 @@ class ContinuousView extends VisualMapView {
const vertex = this._applyTransform([dx as number, dy], this._shapes.mainGroup, true) as number[];
this._updateInterval(handleIndex, vertex[1]);
+ this._hideIndicator();
// Considering realtime, update view should be executed
// before dispatch action.
this._updateView();
@@ -576,12 +579,21 @@ class ContinuousView extends VisualMapView {
const visualMapModel = this.visualMapModel;
const handleThumbs = shapes.handleThumbs;
const handleLabels = shapes.handleLabels;
+ const itemSize = visualMapModel.itemSize;
+ const dataExtent = visualMapModel.getExtent();
each([0, 1], function (handleIndex) {
const handleThumb = handleThumbs[handleIndex];
handleThumb.setStyle('fill', visualInRange.handlesColor[handleIndex]);
handleThumb.y = handleEnds[handleIndex];
+ const val = linearMap(handleEnds[handleIndex], [0, itemSize[1]], dataExtent, true);
+ const symbolSize = this.getControllerVisual(val, 'symbolSize') as number;
+
+ const size = parsePercent(visualMapModel.get('handleSize'), symbolSize);
+ handleThumb.scaleX = handleThumb.scaleY = size / itemSize[0];
+ handleThumb.x = itemSize[0] - symbolSize / 2;
+
// Update handle label position.
const textPoint = graphic.applyTransform(
shapes.handleLabelPoints[handleIndex],
@@ -592,12 +604,10 @@ class ContinuousView extends VisualMapView {
y: textPoint[1],
text: visualMapModel.formatValueText(this._dataInterval[handleIndex]),
verticalAlign: 'middle',
- align: this._applyTransform(
- this._orient === 'horizontal'
- ? (handleIndex === 0 ? 'bottom' : 'top')
- : 'left',
+ align: this._orient === 'vertical' ? this._applyTransform(
+ 'left',
shapes.mainGroup
- ) as TextAlign
+ ) as TextAlign : 'center'
});
}, this);
}
@@ -612,7 +622,6 @@ class ContinuousView extends VisualMapView {
const dataExtent = visualMapModel.getExtent();
const itemSize = visualMapModel.itemSize;
const sizeExtent = [0, itemSize[1]];
- const pos = linearMap(cursorValue, dataExtent, sizeExtent, true);
const shapes = this._shapes;
const indicator = shapes.indicator;
@@ -620,14 +629,18 @@ class ContinuousView extends VisualMapView {
return;
}
- indicator.y = pos;
indicator.attr('invisible', false);
const opts = {convertOpacityToAlpha: true};
const color = this.getControllerVisual(cursorValue, 'color', opts) as ColorString;
- indicator.setStyle('fill', color);
+ const symbolSize = this.getControllerVisual(cursorValue, 'symbolSize') as number;
+ const y = linearMap(cursorValue, dataExtent, sizeExtent, true);
+ const x = itemSize[0] - symbolSize / 2;
+ const oldIndicatorPos = { x: indicator.x, y: indicator.y };
// Update handle label position.
+ indicator.y = y;
+ indicator.x = x;
const textPoint = graphic.applyTransform(
shapes.indicatorLabelPoint,
graphic.getTransform(indicator, this.group)
@@ -641,10 +654,49 @@ class ContinuousView extends VisualMapView {
indicatorLabel.setStyle({
text: (rangeSymbol ? rangeSymbol : '') + visualMapModel.formatValueText(textValue),
verticalAlign: isHorizontal ? align as TextVerticalAlign : 'middle',
- align: isHorizontal ? 'center' : align as TextAlign,
- x: textPoint[0],
- y: textPoint[1]
+ align: isHorizontal ? 'center' : align as TextAlign
});
+
+ const indicatorNewProps = {
+ x: x,
+ y: y,
+ style: {
+ fill: color
+ }
+ };
+ const labelNewProps = {
+ style: {
+ x: textPoint[0],
+ y: textPoint[1]
+ }
+ };
+
+ if (visualMapModel.ecModel.isAnimationEnabled() && !this._firstShowIndicator) {
+ const animationCfg = {
+ duration: 100,
+ easing: 'cubicInOut',
+ additive: true
+ } as const;
+ indicator.x = oldIndicatorPos.x;
+ indicator.y = oldIndicatorPos.y;
+ indicator.animateTo(indicatorNewProps, animationCfg);
+ indicatorLabel.animateTo(labelNewProps, animationCfg);
+ }
+ else {
+ indicator.attr(indicatorNewProps);
+ indicatorLabel.attr(labelNewProps);
+ }
+
+ this._firstShowIndicator = false;
+
+ const handleLabels = this._shapes.handleLabels;
+ if (handleLabels) {
+ for (let i = 0; i < handleLabels.length; i++) {
+ // Fade out handle labels.
+ // TODO not do twice.
+ enterBlur(handleLabels[i]);
+ }
+ }
}
private _enableHoverLinkToSeries() {
@@ -774,6 +826,14 @@ class ContinuousView extends VisualMapView {
const shapes = this._shapes;
shapes.indicator && shapes.indicator.attr('invisible', true);
shapes.indicatorLabel && shapes.indicatorLabel.attr('invisible', true);
+
+ const handleLabels = this._shapes.handleLabels;
+ if (handleLabels) {
+ for (let i = 0; i < handleLabels.length; i++) {
+ // Fade out handle labels.
+ leaveBlur(handleLabels[i]);
+ }
+ }
}
private _clearHoverLinkToSeries() {
diff --git a/src/util/graphic.ts b/src/util/graphic.ts
index 6e450d4..124e8bf 100644
--- a/src/util/graphic.ts
+++ b/src/util/graphic.ts
@@ -799,7 +799,6 @@ export function createIcon(
const style: ZRStyleProps = innerOpts.style = {strokeNoScale: true};
rect = rect || {x: -1, y: -1, width: 2, height: 2};
- // TODO support circle, rect?
if (iconStr) {
return iconStr.indexOf('image://') === 0
? (
diff --git a/src/util/symbol.ts b/src/util/symbol.ts
index a0bedde..8b5dc28 100644
--- a/src/util/symbol.ts
+++ b/src/util/symbol.ts
@@ -267,7 +267,7 @@ const symbolShapeMakers: Dictionary<SymbolShapeMaker> = {
}
};
-const symbolBuildProxies: Dictionary<ECSymbol> = {};
+export const symbolBuildProxies: Dictionary<ECSymbol> = {};
zrUtil.each(symbolCtors, function (Ctor, name) {
symbolBuildProxies[name] = new Ctor();
});
diff --git a/test/visualMap-scatter-symbolSize.html b/test/visualMap-scatter-symbolSize.html
index 1c01441..f3243be 100644
--- a/test/visualMap-scatter-symbolSize.html
+++ b/test/visualMap-scatter-symbolSize.html
@@ -109,6 +109,7 @@ under the License.
calculable: true,
inverse: true,
dimension: 'value',
+ top: 'center',
inRange: {
symbolSize: [10, 180]
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org