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 2021/06/15 14:47:16 UTC
[echarts] branch enhance-morph updated (8601129 -> 1800eb2)
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a change to branch enhance-morph
in repository https://gitbox.apache.org/repos/asf/echarts.git.
from 8601129 feat(ut): fix old element remove when transition to new
new 18c8374 feat(ut): add transition between different symbol of scatters
new 1800eb2 feat(ut): bake transform before old element is removed.
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
src/animation/universalTransition.ts | 12 +++-
src/chart/helper/Symbol.ts | 3 +
src/chart/helper/SymbolDraw.ts | 9 ++-
src/core/echarts.ts | 2 +-
test/universalTransition.html | 129 ++++++++++++++++++++++++++++++++++-
test/universalTransition2.html | 5 +-
6 files changed, 152 insertions(+), 8 deletions(-)
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts] 01/02: feat(ut): add transition between different symbol
of scatters
Posted by sh...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch enhance-morph
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 18c83747ec6011162c141f7c434144e23d446b40
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Jun 15 22:26:36 2021 +0800
feat(ut): add transition between different symbol of scatters
---
src/chart/helper/Symbol.ts | 3 +
src/chart/helper/SymbolDraw.ts | 9 ++-
src/core/echarts.ts | 2 +-
test/universalTransition.html | 129 ++++++++++++++++++++++++++++++++++++++++-
test/universalTransition2.html | 5 +-
5 files changed, 141 insertions(+), 7 deletions(-)
diff --git a/src/chart/helper/Symbol.ts b/src/chart/helper/Symbol.ts
index 15fc84c..ad9efea 100644
--- a/src/chart/helper/Symbol.ts
+++ b/src/chart/helper/Symbol.ts
@@ -102,6 +102,9 @@ class Symbol extends graphic.Group {
this.childAt(0).stopAnimation(null, toLastFrame);
}
+ getSymbolType() {
+ return this._symbolType;
+ }
/**
* FIXME:
* Caution: This method breaks the encapsulation of this module,
diff --git a/src/chart/helper/SymbolDraw.ts b/src/chart/helper/SymbolDraw.ts
index 97c01a0..db61fbb 100644
--- a/src/chart/helper/SymbolDraw.ts
+++ b/src/chart/helper/SymbolDraw.ts
@@ -206,7 +206,14 @@ class SymbolDraw {
group.remove(symbolEl);
return;
}
- if (!symbolEl) {
+ const newSymbolType = data.getItemVisual(newIdx, 'symbol') || 'circle';
+ const oldSymbolType = symbolEl
+ && (symbolEl as SymbolClz).getSymbolType
+ && (symbolEl as SymbolClz).getSymbolType();
+
+ // Create a new if symbol type changed.
+ if (oldSymbolType !== newSymbolType) {
+ symbolEl && group.remove(symbolEl);
symbolEl = new SymbolCtor(data, newIdx);
symbolEl.setPosition(point);
}
diff --git a/src/core/echarts.ts b/src/core/echarts.ts
index c76fc1a..014aa27 100644
--- a/src/core/echarts.ts
+++ b/src/core/echarts.ts
@@ -2040,7 +2040,7 @@ class ECharts extends Eventful<ECEventDefinition> {
// Render all charts
const scheduler = ecIns._scheduler;
- updateParams = extend(updateParams, {
+ updateParams = extend(updateParams || {}, {
updatedSeries: ecModel.getSeries()
});
diff --git a/test/universalTransition.html b/test/universalTransition.html
index 9ddf153..e9e8890 100644
--- a/test/universalTransition.html
+++ b/test/universalTransition.html
@@ -41,6 +41,7 @@ under the License.
<div id="main1"></div>
<div id="main2"></div>
<div id="main3"></div>
+ <div id="main4"></div>
@@ -174,6 +175,127 @@ under the License.
</script>
+ <script>
+ require([
+ 'echarts'
+ ], function (echarts) {
+ var option;
+ var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
+ '7a', '8a', '9a','10a','11a',
+ '12p', '1p', '2p', '3p', '4p', '5p',
+ '6p', '7p', '8p', '9p', '10p', '11p'];
+ var days = ['Saturday', 'Friday', 'Thursday',
+ 'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
+
+ var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2 [...]
+
+ data = data.map(function (item) {
+ return [item[1], item[0], item[2] || '-'];
+ });
+
+ const heatmapSeries = {
+ name: 'Punch Card',
+ id: 'punch-card',
+ type: 'heatmap',
+ data: data,
+ label: {
+ show: true
+ },
+ universalTransition: {
+ enabled: true
+ }
+ }
+
+ function makeScatterSeries(symbolType) {
+ return {
+ name: 'Punch Card',
+ id: 'punch-card',
+ type: 'scatter',
+ symbol: symbolType,
+ symbolSize: item => {
+ return Math.sqrt(item[2]) * 10;
+ },
+ data: data,
+ label: {
+ show: true
+ },
+ universalTransition: {
+ enabled: true
+ }
+ }
+ }
+
+ option = {
+ tooltip: {
+ position: 'top'
+ },
+ grid: {
+ height: '50%',
+ top: '10%'
+ },
+ xAxis: {
+ type: 'category',
+ data: hours,
+ splitArea: {
+ show: true
+ }
+ },
+ yAxis: {
+ type: 'category',
+ data: days,
+ splitArea: {
+ show: true
+ }
+ },
+ visualMap: {
+ min: 0,
+ max: 10,
+ calculable: true,
+ orient: 'horizontal',
+ left: 'center',
+ bottom: '15%'
+ },
+ series: heatmapSeries
+ };
+
+ var chart = testHelper.create(echarts, 'main1', {
+ title: [
+ 'Convert between heatmap, scatter (with different symbols)'
+ ],
+ // height: 300,
+ buttons: [{
+ text: 'Heatmap',
+ onclick: function () {
+ chart.setOption({
+ series: heatmapSeries
+ });
+ }
+ }, {
+ text: 'Scatter (Rect)',
+ onclick: function () {
+ chart.setOption({
+ series: makeScatterSeries('rect')
+ });
+ }
+ }, {
+ text: 'Scatter (Diamond)',
+ onclick: function () {
+ chart.setOption({
+ series: makeScatterSeries('diamond')
+ });
+ }
+ }, {
+ text: 'Scatter (Circle)',
+ onclick: function () {
+ chart.setOption({
+ series: makeScatterSeries('circle')
+ });
+ }
+ }],
+ option: option
+ });
+ });
+ </script>
<script>
require([
@@ -370,7 +492,7 @@ under the License.
};
}
- var chart = testHelper.create(echarts, 'main1', {
+ var chart = testHelper.create(echarts, 'main2', {
title: [
'Convert between treemap, sunburst'
],
@@ -511,7 +633,7 @@ under the License.
};
}
- var chart = testHelper.create(echarts, 'main2', {
+ var chart = testHelper.create(echarts, 'main3', {
title: [
'Convert between bar, pictorialBar'
],
@@ -656,7 +778,7 @@ under the License.
}
}
}
- var chart = testHelper.create(echarts, 'main3', {
+ var chart = testHelper.create(echarts, 'main4', {
title: [
'Convert between bar, map'
],
@@ -676,6 +798,7 @@ under the License.
});
});
</script>
+
</body>
</html>
diff --git a/test/universalTransition2.html b/test/universalTransition2.html
index 7cc0bb5..478d5ca 100644
--- a/test/universalTransition2.html
+++ b/test/universalTransition2.html
@@ -57,6 +57,7 @@ under the License.
data: ['Animals', 'Fruits', 'Cars']
},
yAxis: {},
+ dataGroupId: '',
// animationDurationUpdate: 1000,
series: {
type: 'bar',
@@ -142,10 +143,10 @@ under the License.
fontSize: 18
},
onclick() {
- chart.setOption(option, true);
+ chart.setOption(option);
}
}]
- }, true);
+ });
}
});
});
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[echarts] 02/02: feat(ut): bake transform before old element is
removed.
Posted by sh...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch enhance-morph
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 1800eb252111d175e088a0b618373c293ddedfc1
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Jun 15 22:44:15 2021 +0800
feat(ut): bake transform before old element is removed.
---
src/animation/universalTransition.ts | 12 +++++++++++-
1 file changed, 11 insertions(+), 1 deletion(-)
diff --git a/src/animation/universalTransition.ts b/src/animation/universalTransition.ts
index f1acaa9..686569a 100644
--- a/src/animation/universalTransition.ts
+++ b/src/animation/universalTransition.ts
@@ -40,6 +40,10 @@ function transitionBetweenData(
return;
}
+ // const oldSeriesModel = oldData.hostModel;
+ // const isTransitionSameSeries = oldSeriesModel === seriesModel;
+
+
function stopAnimation(pathList: Path[] | Path[][]) {
if (isArray(pathList[0])) {
for (let i = 0; i < pathList.length; i++) {
@@ -83,7 +87,13 @@ function transitionBetweenData(
}
function removeEl(el: Element) {
- el.parent && el.parent.remove(el);
+ if (el.parent) {
+ // Bake parent transform to element.
+ // So it can still have proper transform to transition after it's removed.
+ const computedTransform = el.getComputedTransform();
+ el.setLocalTransform(computedTransform);
+ el.parent.remove(el);
+ }
}
// TODO share it to other modules. or put it in the List
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org