You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2020/06/27 04:38:43 UTC
[incubator-echarts] 01/03: fix: rename $transition $enterFrom
$leaveTo => transition enterFrom leaveTo.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch custom-series-enhance
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit c3329e42468dbe162b4bffdce9e50438afbe79b4
Author: 100pah <su...@gmail.com>
AuthorDate: Tue Jun 23 18:49:36 2020 +0800
fix: rename $transition $enterFrom $leaveTo => transition enterFrom leaveTo.
---
src/chart/custom.ts | 66 +++++++++++++++++++---------------
test/custom-transition.html | 56 ++++++++++++++---------------
test/custom-transition2.html | 86 +++++++++++++++++++++++++++++++++++++-------
3 files changed, 140 insertions(+), 68 deletions(-)
diff --git a/src/chart/custom.ts b/src/chart/custom.ts
index d7fcccc..a29d872 100644
--- a/src/chart/custom.ts
+++ b/src/chart/custom.ts
@@ -78,6 +78,7 @@ import {
import Transformable from 'zrender/src/core/Transformable';
import { ItemStyleProps } from '../model/mixin/itemStyle';
import { cloneValue } from 'zrender/src/animation/Animator';
+import { number } from '../export';
const inner = makeInner<{
@@ -109,14 +110,14 @@ type TransitionAnyProps = string | string[];
type TransitionTransformProps = TransformProps | TransformProps[];
// Do not declare "Dictionary" in TransitionAnyOption to restrict the type check.
type TransitionAnyOption = {
- $transition?: TransitionAnyProps;
- $enterFrom?: Dictionary<unknown>;
- $leaveTo?: Dictionary<unknown>;
+ transition?: TransitionAnyProps;
+ enterFrom?: Dictionary<unknown>;
+ leaveTo?: Dictionary<unknown>;
};
type TransitionTransformOption = {
- $transition?: TransitionTransformProps;
- $enterFrom?: Dictionary<unknown>;
- $leaveTo?: Dictionary<unknown>;
+ transition?: TransitionTransformProps;
+ enterFrom?: Dictionary<unknown>;
+ leaveTo?: Dictionary<unknown>;
};
interface CustomBaseElementOption extends Partial<Pick<
@@ -610,12 +611,12 @@ function createEl(elOption: CustomElementOption): Element {
* ---------------------------------------------
* [STRATEGY_TRANSITION] The rule of transition:
* + For props on the root level of a element:
- * If there is no `$transition` specified, tansform props will be transitioned by default,
+ * If there is no `transition` specified, tansform props will be transitioned by default,
* which is the same as the previous setting in echarts4 and suitable for the scenario
* of dataZoom change.
- * If `$transition` specified, only the specified props will be transitioned.
+ * If `transition` specified, only the specified props will be transitioned.
* + For props in `shape` and `style`:
- * Only props specified in `$transition` will be transitioned.
+ * Only props specified in `transition` will be transitioned.
* + Break:
* Since ec5, do not make transition to shape by default, because it might result in
* performance issue (especially `points` of polygon) and do not necessary in most cases.
@@ -738,22 +739,22 @@ function prepareShapeUpdate(
const elShape = (el as LooseElementProps).shape;
let tranFromShapeProps: LooseElementProps['shape'];
- const enterFrom = shapeOpt.$enterFrom;
+ const enterFrom = shapeOpt.enterFrom;
if (isInit && enterFrom) {
!tranFromShapeProps && (tranFromShapeProps = transFromProps.shape = {});
const enterFromKeys = keys(enterFrom);
for (let i = 0; i < enterFromKeys.length; i++) {
- // `$enterFrom` props are not necessarily also declared in `shape`/`style`/...,
- // for example, `opacity` can only declared in `$enterFrom` but not in `style`.
+ // `enterFrom` props are not necessarily also declared in `shape`/`style`/...,
+ // for example, `opacity` can only declared in `enterFrom` but not in `style`.
const key = enterFromKeys[i];
// Do not clone, animator will perform that clone.
tranFromShapeProps[key] = enterFrom[key];
}
}
- if (!isInit && elShape && shapeOpt.$transition) {
+ if (!isInit && elShape && shapeOpt.transition) {
!tranFromShapeProps && (tranFromShapeProps = transFromProps.shape = {});
- const transitionKeys = normalizeToArray(shapeOpt.$transition);
+ const transitionKeys = normalizeToArray(shapeOpt.transition);
for (let i = 0; i < transitionKeys.length; i++) {
const key = transitionKeys[i];
const elVal = elShape[key];
@@ -774,7 +775,7 @@ function prepareShapeUpdate(
allPropsShape[key] = cloneValue((shapeOpt as any)[key]);
}
- const leaveTo = shapeOpt.$leaveTo;
+ const leaveTo = shapeOpt.leaveTo;
if (leaveTo) {
const leaveToProps = getOrCreateLeaveToPropsFromEl(el);
const leaveToShapeProps = leaveToProps.shape || (leaveToProps.shape = {});
@@ -794,13 +795,13 @@ function prepareTransformUpdate(
transFromProps: ElementProps,
isInit: boolean
): void {
- const enterFrom = elOption.$enterFrom;
+ const enterFrom = elOption.enterFrom;
if (isInit && enterFrom) {
const enterFromKeys = keys(enterFrom);
for (let i = 0; i < enterFromKeys.length; i++) {
const key = enterFromKeys[i] as TransformProps;
if (__DEV__) {
- checkTransformPropRefer(key, 'el.$enterFrom');
+ checkTransformPropRefer(key, 'el.enterFrom');
}
// Do not clone, animator will perform that clone.
transFromProps[key] = enterFrom[key] as number;
@@ -808,13 +809,13 @@ function prepareTransformUpdate(
}
if (!isInit) {
- if (elOption.$transition) {
- const transitionKeys = normalizeToArray(elOption.$transition);
+ if (elOption.transition) {
+ const transitionKeys = normalizeToArray(elOption.transition);
for (let i = 0; i < transitionKeys.length; i++) {
const key = transitionKeys[i];
const elVal = el[key];
if (__DEV__) {
- checkTransformPropRefer(key, 'el.$transition');
+ checkTransformPropRefer(key, 'el.transition');
checkTansitionRefer(key, elOption[key], elVal);
}
// Do not clone, see `checkTansitionRefer`.
@@ -840,14 +841,14 @@ function prepareTransformUpdate(
setTransProp(elOption, allProps, 'originY');
setTransProp(elOption, allProps, 'rotation');
- const leaveTo = elOption.$leaveTo;
+ const leaveTo = elOption.leaveTo;
if (leaveTo) {
const leaveToProps = getOrCreateLeaveToPropsFromEl(el);
const leaveToKeys = keys(leaveTo);
for (let i = 0; i < leaveToKeys.length; i++) {
const key = leaveToKeys[i] as TransformProps;
if (__DEV__) {
- checkTransformPropRefer(key, 'el.$leaveTo');
+ checkTransformPropRefer(key, 'el.leaveTo');
}
leaveToProps[key] = leaveTo[key] as number;
}
@@ -868,7 +869,7 @@ function prepareStyleUpdate(
const elStyle = (el as LooseElementProps).style as LooseElementProps['style'];
let transFromStyleProps: LooseElementProps['style'];
- const enterFrom = styleOpt.$enterFrom;
+ const enterFrom = styleOpt.enterFrom;
if (isInit && enterFrom) {
const enterFromKeys = keys(enterFrom);
!transFromStyleProps && (transFromStyleProps = transFromProps.style = {});
@@ -879,8 +880,8 @@ function prepareStyleUpdate(
}
}
- if (!isInit && elStyle && styleOpt.$transition) {
- const transitionKeys = normalizeToArray(styleOpt.$transition);
+ if (!isInit && elStyle && styleOpt.transition) {
+ const transitionKeys = normalizeToArray(styleOpt.transition);
!transFromStyleProps && (transFromStyleProps = transFromProps.style = {});
for (let i = 0; i < transitionKeys.length; i++) {
const key = transitionKeys[i];
@@ -893,7 +894,7 @@ function prepareStyleUpdate(
}
}
- const leaveTo = styleOpt.$leaveTo;
+ const leaveTo = styleOpt.leaveTo;
if (leaveTo) {
const leaveToKeys = keys(leaveTo);
const leaveToProps = getOrCreateLeaveToPropsFromEl(el);
@@ -941,12 +942,16 @@ const tmpDuringScope = {} as {
const customDuringAPI = {
// Usually other props do not need to be changed in animation during.
setTransform(key: TransformProps, val: unknown) {
- assert(hasOwn(TRANSFORM_PROPS, key), 'Only ' + transformPropNamesStr + ' available in `setTransform`.');
+ if (__DEV__) {
+ assert(hasOwn(TRANSFORM_PROPS, key), 'Only ' + transformPropNamesStr + ' available in `setTransform`.');
+ }
tmpDuringScope.el[key] = val as number;
return this;
},
getTransform(key: TransformProps): unknown {
- assert(hasOwn(TRANSFORM_PROPS, key), 'Only ' + transformPropNamesStr + ' available in `getTransform`.');
+ if (__DEV__) {
+ assert(hasOwn(TRANSFORM_PROPS, key), 'Only ' + transformPropNamesStr + ' available in `getTransform`.');
+ }
return tmpDuringScope.el[key];
},
setShape(key: string, val: unknown) {
@@ -979,6 +984,11 @@ const customDuringAPI = {
};
function elUpdateDuringAnimation(this: Element, key: string): void {
+ // Do not provide "percent" until some requirements come.
+ // Because consider thies case:
+ // enterFrom: {x: 100, y: 30}, transition: 'x'.
+ // And enter duration is different from update duration.
+ // Thus it might be confused about the meaning of "percent" in during callback.
const innerEl = inner(this);
// FIXME `this.markRedraw();` directly ?
innerEl.orginalDuring.call(this, key);
diff --git a/test/custom-transition.html b/test/custom-transition.html
index f757125..27c0a0b 100644
--- a/test/custom-transition.html
+++ b/test/custom-transition.html
@@ -179,7 +179,7 @@ under the License.
shape: {
points: makeShapePoints(api, valOnRadius, valOnAngle),
valOnAngle: valOnAngle,
- $transition: 'valOnAngle'
+ transition: 'valOnAngle'
},
style: {
lineWidth: 1,
@@ -219,7 +219,7 @@ under the License.
y: point[1],
shape: {
valOnAngle: valOnAngle,
- $transition: 'valOnAngle'
+ transition: 'valOnAngle'
},
style: {
text: getText(valOnAngle),
@@ -407,7 +407,7 @@ under the License.
widthRadius: widthRadius,
startRadius: startRadius,
endRadian: endRadian,
- $transition: ['widthRadius', 'startRadius', 'endRadian']
+ transition: ['widthRadius', 'startRadius', 'endRadian']
},
style: {
lineWidth: 1,
@@ -464,7 +464,7 @@ under the License.
startRadius: startRadius,
endRadian: endRadian,
widthRadius: widthRadius,
- $transition: ['startRadius', 'endRadian', 'widthRadius']
+ transition: ['startRadius', 'endRadian', 'widthRadius']
},
style: {
text: makeText(endRadian),
@@ -652,8 +652,8 @@ under the License.
// polor: anticlockwise-positive radian
// sector: clockwise-positive radian
endAngle: -polarEndRadian,
- $transition: 'endAngle',
- $enterFrom: { endAngle: 0 }
+ transition: 'endAngle',
+ enterFrom: { endAngle: 0 }
}
}
}, {
@@ -664,8 +664,8 @@ under the License.
shape: {
points: makePionterPoints(params, polarEndRadian),
polarEndRadian: polarEndRadian,
- $transition: 'polarEndRadian',
- $enterFrom: { polarEndRadian: 0 }
+ transition: 'polarEndRadian',
+ enterFrom: { polarEndRadian: 0 }
},
during: function (apiDuring) {
apiDuring.setShape(
@@ -692,8 +692,8 @@ under the License.
type: 'text',
shape: {
valOnRadian: valOnRadian,
- $transition: 'valOnRadian',
- $enterFrom: { valOnRadian: 0 }
+ transition: 'valOnRadian',
+ enterFrom: { valOnRadian: 0 }
},
style: {
text: makeText(valOnRadian),
@@ -703,7 +703,7 @@ under the License.
fill: 'rgb(0,50,190)',
align: 'center',
verticalAlign: 'middle',
- $enterFrom: { opacity: 0 }
+ enterFrom: { opacity: 0 }
},
during: function (apiDuring) {
apiDuring.setStyle('text', makeText(apiDuring.getShape('valOnRadian')));
@@ -961,7 +961,7 @@ under the License.
},
style: {
fill: 'blue',
- // $enterFrom: { opacity: 0 }
+ // enterFrom: { opacity: 0 }
}
}, {
type: 'circle',
@@ -972,7 +972,7 @@ under the License.
},
style: {
fill: 'green',
- // $enterFrom: { opacity: 0 }
+ // enterFrom: { opacity: 0 }
},
textConfig: {
position: 'bottom'
@@ -981,7 +981,7 @@ under the License.
style: {
text: 'xxxx',
fill: 'black',
- // $enterFrom: { opacity: 0 }
+ // enterFrom: { opacity: 0 }
}
}
}]
@@ -1078,7 +1078,7 @@ under the License.
type: 'group',
x: pos[0],
y: pos[1],
- $enterFrom: {
+ enterFrom: {
y: 0
},
children: [{
@@ -1164,7 +1164,7 @@ under the License.
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height,
- $enterFrom: {width: 0}
+ enterFrom: {width: 0}
}
}
};
@@ -1225,7 +1225,7 @@ under the License.
style: {
image: weatherIcons.Showers,
width: width,
- $transition: 'width'
+ transition: 'width'
}
};
},
@@ -1277,7 +1277,7 @@ under the License.
x: pos[0],
y: pos[1],
rotation: pos[0] / 500 * Math.PI,
- $transition: ['rotation'],
+ transition: ['rotation'],
originX: -50,
originY: 50,
children: [{
@@ -1291,7 +1291,7 @@ under the License.
},
style: {
fill: 'green',
- $enterFrom: { opacity: 0 }
+ enterFrom: { opacity: 0 }
}
}, {
type: 'circle',
@@ -1302,7 +1302,7 @@ under the License.
},
style: {
fill: 'blue',
- $enterFrom: { opacity: 0 }
+ enterFrom: { opacity: 0 }
},
textConfig: {
position: 'bottom'
@@ -1311,7 +1311,7 @@ under the License.
style: {
text: 'xxxx',
fill: 'black',
- $enterFrom: { opacity: 0 }
+ enterFrom: { opacity: 0 }
}
}
}]
@@ -1363,7 +1363,7 @@ under the License.
return {
type: 'rect',
position: pos,
- $transition: [],
+ transition: [],
shape: {
x: -50,
y: 50,
@@ -1373,7 +1373,7 @@ under the License.
},
style: {
fill: 'green',
- $enterFrom: { opacity: 0 }
+ enterFrom: { opacity: 0 }
}
};
},
@@ -1426,10 +1426,10 @@ under the License.
x: pos[0],
y: pos[1],
rotation: pos[0] / 500 * Math.PI,
- $transition: ['x', 'y', 'rotation'],
+ transition: ['x', 'y', 'rotation'],
originX: -50,
originY: 50,
- $leaveTo: {scaleX: 0, scaleY: 0},
+ leaveTo: {scaleX: 0, scaleY: 0},
children: [{
type: 'rect',
shape: {
@@ -1441,7 +1441,7 @@ under the License.
},
style: {
fill: 'green',
- $enterFrom: { opacity: 0 }
+ enterFrom: { opacity: 0 }
}
}, {
type: 'circle',
@@ -1452,7 +1452,7 @@ under the License.
},
style: {
fill: 'blue',
- $enterFrom: { opacity: 0 }
+ enterFrom: { opacity: 0 }
},
textConfig: {
position: 'bottom'
@@ -1461,7 +1461,7 @@ under the License.
style: {
text: 'xxxx',
fill: 'black',
- $enterFrom: { opacity: 0 }
+ enterFrom: { opacity: 0 }
}
}
}]
diff --git a/test/custom-transition2.html b/test/custom-transition2.html
index 7550c55..a2a4caf 100644
--- a/test/custom-transition2.html
+++ b/test/custom-transition2.html
@@ -75,7 +75,7 @@ under the License.
}];
var colorAll = [
- '#37A2DA', '#e06343', '#37a354', '#b55dba', '#b5bd48', '#8378EA', '#96BFFF'
+ '#bbb', '#37A2DA', '#e06343', '#37a354', '#b55dba', '#b5bd48', '#8378EA', '#96BFFF'
];
var ANIMATION_DURATION_UPDATE = 1500;
@@ -106,13 +106,18 @@ under the License.
for (var stepIdx = 0; stepIdx < allStepsData.length; stepIdx++) {
var stepData = allStepsData[stepIdx];
+ var ptsInCluster = stepData.pointsInCluster;
+ var newestClusterIdx = ptsInCluster.length - 1;
+
var stepResult = {
centroids: stepData.centroids,
- points: []
+ points: [],
+ newestClusterIndex: newestClusterIdx,
+ newestClusterMaxAssessmentIndex: -1
};
result.push(stepResult);
- var ptsInCluster = stepData.pointsInCluster;
- var newestClusterIdx = ptsInCluster.length - 1;
+
+
for (var cIdx = 0; cIdx < ptsInCluster.length; cIdx++) {
var clusterPoints = ptsInCluster[cIdx];
for (var i = 0; i < clusterPoints.length; i++) {
@@ -125,6 +130,15 @@ under the License.
stepResult.points[ptsIdx] = [point[0], point[1], cIdx, newestClusterIdx];
}
}
+
+ var assessment = -Infinity;
+ for (var i = 0; i < stepData.clusterAssment.length; i++) {
+ var assessmentRecord = stepData.clusterAssment[i];
+ if (assessmentRecord[0] === newestClusterIdx && assessmentRecord[1] > assessment) {
+ assessment = assessmentRecord[1];
+ stepResult.newestClusterMaxAssessmentIndex = i;
+ }
+ }
}
return result;
}
@@ -138,7 +152,7 @@ under the License.
cx: 0,
cy: 0,
r: 10,
- $transition: []
+ transition: []
};
var contentColor = colorAll[clusterIdx];
@@ -152,15 +166,15 @@ under the License.
y: coord[1],
// scaleX: isNewCluster ? 1.2 : 1,
// scaleY: isNewCluster ? 1.2 : 1,
- // $transition: ['scaleX', 'scaleY'],
+ // transition: ['scaleX', 'scaleY'],
shape: shape,
style: {
fill: contentColor,
stroke: '#333',
lineWidth: 1,
shadowColor: contentColor,
- shadowBlur: isNewCluster ? 7 : 0,
- $transition: 'shadowBlur'
+ shadowBlur: isNewCluster ? 12 : 0,
+ transition: 'shadowBlur'
},
during: function (apiDuring) {
var currContentColor = getColorInTransition(apiDuring, 'content');
@@ -177,7 +191,7 @@ under the License.
shape[key + 'G'] = colorRGBA[1];
shape[key + 'B'] = colorRGBA[2];
shape[key + 'A'] = colorRGBA[3];
- var transition = shape.$transition || (shape.$transition = []);
+ var transition = shape.transition || (shape.transition = []);
transition.push(key + 'R', key + 'G', key + 'B', key + 'A');
}
@@ -191,19 +205,66 @@ under the License.
return echarts.color.stringify(colorArr, 'rgba');
}
+ function renderBoundary(params, api) {
+ var center = api.coord([api.value(2), api.value(3)]);
+ var endP = api.coord([api.value(0), api.value(1)]);
+ var diffX = center[0] - endP[0];
+ var diffY = center[1] - endP[1];
+ var radius = Math.pow(diffX * diffX + diffY * diffY, 0.5) + 10;
+ var newCluIdx = api.value(4);
+
+ return {
+ type: 'circle',
+ shape: {
+ cx: isNaN(center[0]) ? 0 : center[0],
+ cy: isNaN(center[1]) ? 0 : center[1],
+ r: isNaN(radius) ? 0 : radius,
+ // transition: 'newCluIdx'
+ },
+ style: {
+ fill: null,
+ stroke: '#bbb',
+ lineDash: [5, 5],
+ lineWidth: 3,
+ // opacity: 0
+ },
+ during: function (apiDuring) {
+ apiDuring.setShape('cx', Math.random() * 10);
+ // var cluIdx = apiDuring.setShape('newCluIdx');
+ // var percent = Math.ceil(cluIdx) - cluIdx;
+ // var opacity = (Math.ceil(cluIdx) - cluIdx) > 0.5 ?
+ }
+ };
+ }
+
function makeStepOption(option, stepResult) {
- var centroids = stepResult.centroids;
+ var centroids = stepResult.centroids || [];
var points = stepResult.points;
+ var newMaxAssmIdx = stepResult.newestClusterMaxAssessmentIndex;
+ var newCluIdx = stepResult.newestClusterIndex;
option.options.push({
- series: {
+ series: [{
type: 'custom',
encode: {
tooltip: [0, 1]
},
renderItem: renderItemPoint,
data: points
- }
+ }, {
+ type: 'custom',
+ renderItem: renderBoundary,
+ animationDuration: 3000,
+ data: [
+ [
+ (points[newMaxAssmIdx] || [])[0],
+ (points[newMaxAssmIdx] || [])[1],
+ (centroids[newCluIdx] || [])[0],
+ (centroids[newCluIdx] || [])[1],
+ newCluIdx
+ ]
+ ]
+ }]
});
}
@@ -258,6 +319,7 @@ under the License.
title: [
'Cluster algorithm visualization'
],
+ height: 600,
option: option
});
});
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org