Skip to content

E
Echarts

强哥很慌张 / Echarts

通知 8
Star 0
Fork 0
E
Echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 c3329e42 编写于 作者: 1 100pah
浏览文件
操作

fix: rename $transition $enterFrom $leaveTo => transition enterFrom leaveTo.

上级 a7d4f698
隐藏空白更改
内联 并排
Showing with 140 addition and 68 deletion
src/chart/custom.ts
浏览文件 @ c3329e42
......@@ -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);
......
test/custom-transition.html
浏览文件 @ c3329e42
......@@ -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 }
}
}
}]
......
test/custom-transition2.html
浏览文件 @ c3329e42
......@@ -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
});
});
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或