This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch feature/clip
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit dc7aadef65cbcca1cae66745029260ed4d006003
Author: pissang <bm2736...@gmail.com>
AuthorDate: Tue Sep 17 15:09:41 2019 +0800
WIP(clip): Rename clipOverflow to clip in line series
---
src/chart/line/LineSeries.js | 2 +-
src/chart/line/LineView.js | 64 ++++++++++++++++++++------------------
src/chart/lines/LinesSeries.js | 4 +++
src/coord/polar/Polar.js | 18 +++++------
src/preprocessor/backwardCompat.js | 9 ++++--
5 files changed, 53 insertions(+), 44 deletions(-)
diff --git a/src/chart/line/LineSeries.js b/src/chart/line/LineSeries.js
index c8abf58..0441d13 100644
--- a/src/chart/line/LineSeries.js
+++ b/src/chart/line/LineSeries.js
@@ -51,7 +51,7 @@ export default SeriesModel.extend({
// polarIndex: 0,
// If clip the overflow value
- clipOverflow: true,
+ clip: true,
// cursor: null,
label: {
diff --git a/src/chart/line/LineView.js b/src/chart/line/LineView.js
index 725e21a..de172c0 100644
--- a/src/chart/line/LineView.js
+++ b/src/chart/line/LineView.js
@@ -68,7 +68,7 @@ function getStackedOnPoints(coordSys, data, dataCoordInfo) {
return points;
}
-function createGridClipShape(cartesian, hasAnimation, forSymbol, seriesModel) {
+function createGridClipShape(cartesian, hasAnimation, seriesModel) {
var rect = cartesian.getArea();
var isHorizontal = cartesian.getBaseAxis().isHorizontal();
@@ -77,26 +77,16 @@ function createGridClipShape(cartesian, hasAnimation,
forSymbol, seriesModel) {
var width = rect.width;
var height = rect.height;
- // Avoid float number rounding error for symbol on the edge of axis extent.
- // See #7913 and `test/dataZoom-clip.html`.
- if (forSymbol) {
- x -= 0.5;
- width += 0.5;
- y -= 0.5;
- height += 0.5;
+ var lineWidth = seriesModel.get('lineStyle.width') || 2;
+ // Expand clip shape to avoid clipping when line value exceeds axis
+ var expandSize = seriesModel.get('clip') ? lineWidth / 2 : Math.max(width,
height);
+ if (isHorizontal) {
+ y -= expandSize;
+ height += expandSize * 2;
}
else {
- var lineWidth = seriesModel.get('lineStyle.width') || 2;
- // Expand clip shape to avoid clipping when line value exceeds axis
- var expandSize = seriesModel.get('clipOverflow') ? lineWidth / 2 :
Math.max(width, height);
- if (isHorizontal) {
- y -= expandSize;
- height += expandSize * 2;
- }
- else {
- x -= expandSize;
- width += expandSize * 2;
- }
+ x -= expandSize;
+ width += expandSize * 2;
}
var clipPath = new graphic.Rect({
@@ -121,13 +111,9 @@ function createGridClipShape(cartesian, hasAnimation,
forSymbol, seriesModel) {
return clipPath;
}
-function createPolarClipShape(polar, hasAnimation, forSymbol, seriesModel) {
+function createPolarClipShape(polar, hasAnimation, seriesModel) {
var sectorArea = polar.getArea();
// Avoid float number rounding error for symbol on the edge of axis extent.
- if (forSymbol) {
- sectorArea.r0 -= 0.5;
- sectorArea.r1 += 0.5;
- }
var clipPath = new graphic.Sector({
shape: {
@@ -153,10 +139,10 @@ function createPolarClipShape(polar, hasAnimation,
forSymbol, seriesModel) {
return clipPath;
}
-function createClipShape(coordSys, hasAnimation, forSymbol, seriesModel) {
+function createClipShape(coordSys, hasAnimation, seriesModel) {
return coordSys.type === 'polar'
- ? createPolarClipShape(coordSys, hasAnimation, forSymbol, seriesModel)
- : createGridClipShape(coordSys, hasAnimation, forSymbol, seriesModel);
+ ? createPolarClipShape(coordSys, hasAnimation, seriesModel)
+ : createGridClipShape(coordSys, hasAnimation, seriesModel);
}
function turnPointsIntoStep(points, coordSys, stepTurnAt) {
@@ -419,13 +405,29 @@ export default ChartView.extend({
// FIXME step not support polar
var step = !isCoordSysPolar && seriesModel.get('step');
+ var clipShapeForSymbol;
+ if (coordSys && coordSys.getArea) {
+ clipShapeForSymbol = coordSys.getArea();
+ // Avoid float number rounding error for symbol on the edge of
axis extent.
+ // See #7913 and `test/dataZoom-clip.html`.
+ if (clipShapeForSymbol.width != null) {
+ clipShapeForSymbol.x -= 0.1;
+ clipShapeForSymbol.y -= 0.1;
+ clipShapeForSymbol.width += 0.2;
+ clipShapeForSymbol.height += 0.2;
+ }
+ else if (clipShapeForSymbol.r0) {
+ clipShapeForSymbol.r0 -= 0.5;
+ clipShapeForSymbol.r1 += 0.5;
+ }
+ }
// Initialization animation or coordinate system changed
if (
!(polyline && prevCoordSys.type === coordSys.type && step ===
this._step)
) {
showSymbol && symbolDraw.updateData(data, {
isIgnore: isIgnoreFunc,
- clipShape: coordSys.getArea()
+ clipShape: clipShapeForSymbol
});
if (step) {
@@ -441,7 +443,7 @@ export default ChartView.extend({
coordSys, hasAnimation
);
}
- lineGroup.setClipPath(createClipShape(coordSys, true, false,
seriesModel));
+ lineGroup.setClipPath(createClipShape(coordSys, true,
seriesModel));
}
else {
if (isAreaChart && !polygon) {
@@ -458,13 +460,13 @@ export default ChartView.extend({
}
// Update clipPath
- lineGroup.setClipPath(createClipShape(coordSys, false, false,
seriesModel));
+ lineGroup.setClipPath(createClipShape(coordSys, false,
seriesModel));
// Always update, or it is wrong in the case turning on legend
// because points are not changed
showSymbol && symbolDraw.updateData(data, {
isIgnore: isIgnoreFunc,
- clipShape: createClipShape(coordSys, false, true, seriesModel)
+ clipShape: clipShapeForSymbol
});
// Stop symbol animation and sync with line points
diff --git a/src/chart/lines/LinesSeries.js b/src/chart/lines/LinesSeries.js
index 59747be..047f0b6 100644
--- a/src/chart/lines/LinesSeries.js
+++ b/src/chart/lines/LinesSeries.js
@@ -316,6 +316,10 @@ var LinesSeries = SeriesModel.extend({
// polyline not support curveness, label, animation
polyline: false,
+ // If clip the overflow.
+ // Available when coordinateSystem is cartesian or polar.
+ clip: true,
+
label: {
show: false,
position: 'end'
diff --git a/src/coord/polar/Polar.js b/src/coord/polar/Polar.js
index 7185b0f..5e21ac7 100644
--- a/src/coord/polar/Polar.js
+++ b/src/coord/polar/Polar.js
@@ -272,24 +272,22 @@ Polar.prototype = {
var RADIAN = Math.PI / 180;
- var cx = this.cx;
- var cy = this.cy;
- var r = radiusExtent[1];
- var r0 = radiusExtent[0];
return {
- cx: cx,
- cy: cy,
- r0: r0,
- r: r,
+ cx: this.cx,
+ cy: this.cy,
+ r0: radiusExtent[0],
+ r: radiusExtent[1],
startAngle: -angleExtent[0] * RADIAN,
endAngle: -angleExtent[1] * RADIAN,
clockwise: angleAxis.inverse,
contain: function (x, y) {
// It's a ring shape.
// Start angle and end angle don't matter
- var dx = x - cx;
- var dy = y - cy;
+ var dx = x - this.cx;
+ var dy = y - this.cy;
var d2 = dx * dx + dy * dy;
+ var r = this.r;
+ var r0 = this.r0;
return d2 <= r * r && d2 >= r0 * r0;
}
diff --git a/src/preprocessor/backwardCompat.js
b/src/preprocessor/backwardCompat.js
index 249c0f3..50f09e8 100644
--- a/src/preprocessor/backwardCompat.js
+++ b/src/preprocessor/backwardCompat.js
@@ -80,12 +80,17 @@ export default function (option, isTheme) {
var seriesType = seriesOpt.type;
- if (seriesType === 'pie' || seriesType === 'gauge') {
+ if (seriesType === 'line') {
+ if (seriesOpt.clipOverflow != null) {
+ seriesOpt.clip = seriesOpt.clipOverflow;
+ }
+ }
+ else if (seriesType === 'pie' || seriesType === 'gauge') {
if (seriesOpt.clockWise != null) {
seriesOpt.clockwise = seriesOpt.clockWise;
}
}
- if (seriesType === 'gauge') {
+ else if (seriesType === 'gauge') {
var pointerColor = get(seriesOpt, 'pointer.color');
pointerColor != null
&& set(seriesOpt, 'itemStyle.color', pointerColor);
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
