universalTransition.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. /**
  20. * AUTO-GENERATED FILE. DO NOT MODIFY.
  21. */
  22. /*
  23. * Licensed to the Apache Software Foundation (ASF) under one
  24. * or more contributor license agreements. See the NOTICE file
  25. * distributed with this work for additional information
  26. * regarding copyright ownership. The ASF licenses this file
  27. * to you under the Apache License, Version 2.0 (the
  28. * "License"); you may not use this file except in compliance
  29. * with the License. You may obtain a copy of the License at
  30. *
  31. * http://www.apache.org/licenses/LICENSE-2.0
  32. *
  33. * Unless required by applicable law or agreed to in writing,
  34. * software distributed under the License is distributed on an
  35. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  36. * KIND, either express or implied. See the License for the
  37. * specific language governing permissions and limitations
  38. * under the License.
  39. */
  40. // Universal transitions that can animate between any shapes(series) and any properties in any amounts.
  41. import { SERIES_UNIVERSAL_TRANSITION_PROP } from '../model/Series';
  42. import { createHashMap, each, map, filter, isArray } from 'zrender/lib/core/util';
  43. import { applyMorphAnimation, getPathList } from './morphTransitionHelper';
  44. import Path from 'zrender/lib/graphic/Path';
  45. import { initProps } from '../util/graphic';
  46. import DataDiffer from '../data/DataDiffer';
  47. import { makeInner, normalizeToArray } from '../util/model';
  48. import { warn } from '../util/log';
  49. import { getAnimationConfig, getOldStyle } from './basicTrasition';
  50. import Displayable from 'zrender/lib/graphic/Displayable';
  51. var DATA_COUNT_THRESHOLD = 1e4;
  52. ;
  53. var getUniversalTransitionGlobalStore = makeInner();
  54. function getGroupIdDimension(data) {
  55. var dimensions = data.dimensions;
  56. for (var i = 0; i < dimensions.length; i++) {
  57. var dimInfo = data.getDimensionInfo(dimensions[i]);
  58. if (dimInfo && dimInfo.otherDims.itemGroupId === 0) {
  59. return dimensions[i];
  60. }
  61. }
  62. }
  63. function flattenDataDiffItems(list) {
  64. var items = [];
  65. each(list, function (seriesInfo) {
  66. var data = seriesInfo.data;
  67. if (data.count() > DATA_COUNT_THRESHOLD) {
  68. if (process.env.NODE_ENV !== 'production') {
  69. warn('Universal transition is disabled on large data > 10k.');
  70. }
  71. return;
  72. }
  73. var indices = data.getIndices();
  74. var groupDim = getGroupIdDimension(data);
  75. for (var dataIndex = 0; dataIndex < indices.length; dataIndex++) {
  76. items.push({
  77. data: data,
  78. dim: seriesInfo.dim || groupDim,
  79. divide: seriesInfo.divide,
  80. dataIndex: dataIndex
  81. });
  82. }
  83. });
  84. return items;
  85. }
  86. function fadeInElement(newEl, newSeries, newIndex) {
  87. newEl.traverse(function (el) {
  88. if (el instanceof Path) {
  89. // TODO use fade in animation for target element.
  90. initProps(el, {
  91. style: {
  92. opacity: 0
  93. }
  94. }, newSeries, {
  95. dataIndex: newIndex,
  96. isFrom: true
  97. });
  98. }
  99. });
  100. }
  101. function removeEl(el) {
  102. if (el.parent) {
  103. // Bake parent transform to element.
  104. // So it can still have proper transform to transition after it's removed.
  105. var computedTransform = el.getComputedTransform();
  106. el.setLocalTransform(computedTransform);
  107. el.parent.remove(el);
  108. }
  109. }
  110. function stopAnimation(el) {
  111. el.stopAnimation();
  112. if (el.isGroup) {
  113. el.traverse(function (child) {
  114. child.stopAnimation();
  115. });
  116. }
  117. }
  118. function animateElementStyles(el, dataIndex, seriesModel) {
  119. var animationConfig = getAnimationConfig('update', seriesModel, dataIndex);
  120. animationConfig && el.traverse(function (child) {
  121. if (child instanceof Displayable) {
  122. var oldStyle = getOldStyle(child);
  123. if (oldStyle) {
  124. child.animateFrom({
  125. style: oldStyle
  126. }, animationConfig);
  127. }
  128. }
  129. });
  130. }
  131. function isAllIdSame(oldDiffItems, newDiffItems) {
  132. var len = oldDiffItems.length;
  133. if (len !== newDiffItems.length) {
  134. return false;
  135. }
  136. for (var i = 0; i < len; i++) {
  137. var oldItem = oldDiffItems[i];
  138. var newItem = newDiffItems[i];
  139. if (oldItem.data.getId(oldItem.dataIndex) !== newItem.data.getId(newItem.dataIndex)) {
  140. return false;
  141. }
  142. }
  143. return true;
  144. }
  145. function transitionBetween(oldList, newList, api) {
  146. var oldDiffItems = flattenDataDiffItems(oldList);
  147. var newDiffItems = flattenDataDiffItems(newList);
  148. function updateMorphingPathProps(from, to, rawFrom, rawTo, animationCfg) {
  149. if (rawFrom || from) {
  150. to.animateFrom({
  151. style: (rawFrom || from).style
  152. }, animationCfg);
  153. }
  154. }
  155. function findKeyDim(items) {
  156. for (var i = 0; i < items.length; i++) {
  157. if (items[i].dim) {
  158. return items[i].dim;
  159. }
  160. }
  161. }
  162. var oldKeyDim = findKeyDim(oldDiffItems);
  163. var newKeyDim = findKeyDim(newDiffItems);
  164. var hasMorphAnimation = false;
  165. function createKeyGetter(isOld, onlyGetId) {
  166. return function (diffItem) {
  167. var data = diffItem.data;
  168. var dataIndex = diffItem.dataIndex; // TODO if specified dim
  169. if (onlyGetId) {
  170. return data.getId(dataIndex);
  171. } // Use group id as transition key by default.
  172. // So we can achieve multiple to multiple animation like drilldown / up naturally.
  173. // If group id not exits. Use id instead. If so, only one to one transition will be applied.
  174. var dataGroupId = data.hostModel && data.hostModel.get('dataGroupId'); // If specified key dimension(itemGroupId by default). Use this same dimension from other data.
  175. // PENDING: If only use key dimension of newData.
  176. var keyDim = isOld ? oldKeyDim || newKeyDim : newKeyDim || oldKeyDim;
  177. var dimInfo = keyDim && data.getDimensionInfo(keyDim);
  178. var dimOrdinalMeta = dimInfo && dimInfo.ordinalMeta;
  179. if (dimInfo) {
  180. // Get from encode.itemGroupId.
  181. var key = data.get(dimInfo.name, dataIndex);
  182. if (dimOrdinalMeta) {
  183. return dimOrdinalMeta.categories[key] || key + '';
  184. }
  185. return key + '';
  186. } // Get groupId from raw item. { groupId: '' }
  187. var itemVal = data.getRawDataItem(dataIndex);
  188. if (itemVal && itemVal.groupId) {
  189. return itemVal.groupId + '';
  190. }
  191. return dataGroupId || data.getId(dataIndex);
  192. };
  193. } // Use id if it's very likely to be an one to one animation
  194. // It's more robust than groupId
  195. // TODO Check if key dimension is specified.
  196. var useId = isAllIdSame(oldDiffItems, newDiffItems);
  197. var isElementStillInChart = {};
  198. if (!useId) {
  199. // We may have different diff strategy with basicTransition if we use other dimension as key.
  200. // If so, we can't simply check if oldEl is same with newEl. We need a map to check if oldEl is still being used in the new chart.
  201. // We can't use the elements that already being morphed. Let it keep it's original basic transition.
  202. for (var i = 0; i < newDiffItems.length; i++) {
  203. var newItem = newDiffItems[i];
  204. var el = newItem.data.getItemGraphicEl(newItem.dataIndex);
  205. if (el) {
  206. isElementStillInChart[el.id] = true;
  207. }
  208. }
  209. }
  210. function updateOneToOne(newIndex, oldIndex) {
  211. var oldItem = oldDiffItems[oldIndex];
  212. var newItem = newDiffItems[newIndex];
  213. var newSeries = newItem.data.hostModel; // TODO Mark this elements is morphed and don't morph them anymore
  214. var oldEl = oldItem.data.getItemGraphicEl(oldItem.dataIndex);
  215. var newEl = newItem.data.getItemGraphicEl(newItem.dataIndex); // Can't handle same elements.
  216. if (oldEl === newEl) {
  217. newEl && animateElementStyles(newEl, newItem.dataIndex, newSeries);
  218. return;
  219. }
  220. if ( // We can't use the elements that already being morphed
  221. oldEl && isElementStillInChart[oldEl.id]) {
  222. return;
  223. }
  224. if (newEl) {
  225. // TODO: If keep animating the group in case
  226. // some of the elements don't want to be morphed.
  227. // TODO Label?
  228. stopAnimation(newEl);
  229. if (oldEl) {
  230. stopAnimation(oldEl); // If old element is doing leaving animation. stop it and remove it immediately.
  231. removeEl(oldEl);
  232. hasMorphAnimation = true;
  233. applyMorphAnimation(getPathList(oldEl), getPathList(newEl), newItem.divide, newSeries, newIndex, updateMorphingPathProps);
  234. } else {
  235. fadeInElement(newEl, newSeries, newIndex);
  236. }
  237. } // else keep oldEl leaving animation.
  238. }
  239. new DataDiffer(oldDiffItems, newDiffItems, createKeyGetter(true, useId), createKeyGetter(false, useId), null, 'multiple').update(updateOneToOne).updateManyToOne(function (newIndex, oldIndices) {
  240. var newItem = newDiffItems[newIndex];
  241. var newData = newItem.data;
  242. var newSeries = newData.hostModel;
  243. var newEl = newData.getItemGraphicEl(newItem.dataIndex);
  244. var oldElsList = filter(map(oldIndices, function (idx) {
  245. return oldDiffItems[idx].data.getItemGraphicEl(oldDiffItems[idx].dataIndex);
  246. }), function (oldEl) {
  247. return oldEl && oldEl !== newEl && !isElementStillInChart[oldEl.id];
  248. });
  249. if (newEl) {
  250. stopAnimation(newEl);
  251. if (oldElsList.length) {
  252. // If old element is doing leaving animation. stop it and remove it immediately.
  253. each(oldElsList, function (oldEl) {
  254. stopAnimation(oldEl);
  255. removeEl(oldEl);
  256. });
  257. hasMorphAnimation = true;
  258. applyMorphAnimation(getPathList(oldElsList), getPathList(newEl), newItem.divide, newSeries, newIndex, updateMorphingPathProps);
  259. } else {
  260. fadeInElement(newEl, newSeries, newItem.dataIndex);
  261. }
  262. } // else keep oldEl leaving animation.
  263. }).updateOneToMany(function (newIndices, oldIndex) {
  264. var oldItem = oldDiffItems[oldIndex];
  265. var oldEl = oldItem.data.getItemGraphicEl(oldItem.dataIndex); // We can't use the elements that already being morphed
  266. if (oldEl && isElementStillInChart[oldEl.id]) {
  267. return;
  268. }
  269. var newElsList = filter(map(newIndices, function (idx) {
  270. return newDiffItems[idx].data.getItemGraphicEl(newDiffItems[idx].dataIndex);
  271. }), function (el) {
  272. return el && el !== oldEl;
  273. });
  274. var newSeris = newDiffItems[newIndices[0]].data.hostModel;
  275. if (newElsList.length) {
  276. each(newElsList, function (newEl) {
  277. return stopAnimation(newEl);
  278. });
  279. if (oldEl) {
  280. stopAnimation(oldEl); // If old element is doing leaving animation. stop it and remove it immediately.
  281. removeEl(oldEl);
  282. hasMorphAnimation = true;
  283. applyMorphAnimation(getPathList(oldEl), getPathList(newElsList), oldItem.divide, // Use divide on old.
  284. newSeris, newIndices[0], updateMorphingPathProps);
  285. } else {
  286. each(newElsList, function (newEl) {
  287. return fadeInElement(newEl, newSeris, newIndices[0]);
  288. });
  289. }
  290. } // else keep oldEl leaving animation.
  291. }).updateManyToMany(function (newIndices, oldIndices) {
  292. // If two data are same and both have groupId.
  293. // Normally they should be diff by id.
  294. new DataDiffer(oldIndices, newIndices, function (rawIdx) {
  295. return oldDiffItems[rawIdx].data.getId(oldDiffItems[rawIdx].dataIndex);
  296. }, function (rawIdx) {
  297. return newDiffItems[rawIdx].data.getId(newDiffItems[rawIdx].dataIndex);
  298. }).update(function (newIndex, oldIndex) {
  299. // Use the original index
  300. updateOneToOne(newIndices[newIndex], oldIndices[oldIndex]);
  301. }).execute();
  302. }).execute();
  303. if (hasMorphAnimation) {
  304. each(newList, function (_a) {
  305. var data = _a.data;
  306. var seriesModel = data.hostModel;
  307. var view = seriesModel && api.getViewOfSeriesModel(seriesModel);
  308. var animationCfg = getAnimationConfig('update', seriesModel, 0); // use 0 index.
  309. if (view && seriesModel.isAnimationEnabled() && animationCfg && animationCfg.duration > 0) {
  310. view.group.traverse(function (el) {
  311. if (el instanceof Path && !el.animators.length) {
  312. // We can't accept there still exists element that has no animation
  313. // if universalTransition is enabled
  314. el.animateFrom({
  315. style: {
  316. opacity: 0
  317. }
  318. }, animationCfg);
  319. }
  320. });
  321. }
  322. });
  323. }
  324. }
  325. function getSeriesTransitionKey(series) {
  326. var seriesKey = series.getModel('universalTransition').get('seriesKey');
  327. if (!seriesKey) {
  328. // Use series id by default.
  329. return series.id;
  330. }
  331. return seriesKey;
  332. }
  333. function convertArraySeriesKeyToString(seriesKey) {
  334. if (isArray(seriesKey)) {
  335. // Order independent.
  336. return seriesKey.sort().join(',');
  337. }
  338. return seriesKey;
  339. }
  340. function getDivideShapeFromData(data) {
  341. if (data.hostModel) {
  342. return data.hostModel.getModel('universalTransition').get('divideShape');
  343. }
  344. }
  345. function findTransitionSeriesBatches(globalStore, params) {
  346. var updateBatches = createHashMap();
  347. var oldDataMap = createHashMap(); // Map that only store key in array seriesKey.
  348. // Which is used to query the old data when transition from one to multiple series.
  349. var oldDataMapForSplit = createHashMap();
  350. each(globalStore.oldSeries, function (series, idx) {
  351. var oldData = globalStore.oldData[idx];
  352. var transitionKey = getSeriesTransitionKey(series);
  353. var transitionKeyStr = convertArraySeriesKeyToString(transitionKey);
  354. oldDataMap.set(transitionKeyStr, oldData);
  355. if (isArray(transitionKey)) {
  356. // Same key can't in different array seriesKey.
  357. each(transitionKey, function (key) {
  358. oldDataMapForSplit.set(key, {
  359. data: oldData,
  360. key: transitionKeyStr
  361. });
  362. });
  363. }
  364. });
  365. function checkTransitionSeriesKeyDuplicated(transitionKeyStr) {
  366. if (updateBatches.get(transitionKeyStr)) {
  367. warn("Duplicated seriesKey in universalTransition " + transitionKeyStr);
  368. }
  369. }
  370. each(params.updatedSeries, function (series) {
  371. if (series.isUniversalTransitionEnabled() && series.isAnimationEnabled()) {
  372. var newData = series.getData();
  373. var transitionKey = getSeriesTransitionKey(series);
  374. var transitionKeyStr = convertArraySeriesKeyToString(transitionKey); // Only transition between series with same id.
  375. var oldData = oldDataMap.get(transitionKeyStr); // string transition key is the best match.
  376. if (oldData) {
  377. if (process.env.NODE_ENV !== 'production') {
  378. checkTransitionSeriesKeyDuplicated(transitionKeyStr);
  379. } // TODO check if data is same?
  380. updateBatches.set(transitionKeyStr, {
  381. oldSeries: [{
  382. divide: getDivideShapeFromData(oldData),
  383. data: oldData
  384. }],
  385. newSeries: [{
  386. divide: getDivideShapeFromData(newData),
  387. data: newData
  388. }]
  389. });
  390. } else {
  391. // Transition from multiple series.
  392. if (isArray(transitionKey)) {
  393. if (process.env.NODE_ENV !== 'production') {
  394. checkTransitionSeriesKeyDuplicated(transitionKeyStr);
  395. }
  396. var oldSeries_1 = [];
  397. each(transitionKey, function (key) {
  398. var oldData = oldDataMap.get(key);
  399. if (oldData) {
  400. oldSeries_1.push({
  401. divide: getDivideShapeFromData(oldData),
  402. data: oldData
  403. });
  404. }
  405. });
  406. if (oldSeries_1.length) {
  407. updateBatches.set(transitionKeyStr, {
  408. oldSeries: oldSeries_1,
  409. newSeries: [{
  410. data: newData,
  411. divide: getDivideShapeFromData(newData)
  412. }]
  413. });
  414. }
  415. } else {
  416. // Try transition to multiple series.
  417. var oldData_1 = oldDataMapForSplit.get(transitionKey);
  418. if (oldData_1) {
  419. var batch = updateBatches.get(oldData_1.key);
  420. if (!batch) {
  421. batch = {
  422. oldSeries: [{
  423. data: oldData_1.data,
  424. divide: getDivideShapeFromData(oldData_1.data)
  425. }],
  426. newSeries: []
  427. };
  428. updateBatches.set(oldData_1.key, batch);
  429. }
  430. batch.newSeries.push({
  431. data: newData,
  432. divide: getDivideShapeFromData(newData)
  433. });
  434. }
  435. }
  436. }
  437. }
  438. });
  439. return updateBatches;
  440. }
  441. function querySeries(series, finder) {
  442. for (var i = 0; i < series.length; i++) {
  443. var found = finder.seriesIndex != null && finder.seriesIndex === series[i].seriesIndex || finder.seriesId != null && finder.seriesId === series[i].id;
  444. if (found) {
  445. return i;
  446. }
  447. }
  448. }
  449. function transitionSeriesFromOpt(transitionOpt, globalStore, params, api) {
  450. var from = [];
  451. var to = [];
  452. each(normalizeToArray(transitionOpt.from), function (finder) {
  453. var idx = querySeries(globalStore.oldSeries, finder);
  454. if (idx >= 0) {
  455. from.push({
  456. data: globalStore.oldData[idx],
  457. // TODO can specify divideShape in transition.
  458. divide: getDivideShapeFromData(globalStore.oldData[idx]),
  459. dim: finder.dimension
  460. });
  461. }
  462. });
  463. each(normalizeToArray(transitionOpt.to), function (finder) {
  464. var idx = querySeries(params.updatedSeries, finder);
  465. if (idx >= 0) {
  466. var data = params.updatedSeries[idx].getData();
  467. to.push({
  468. data: data,
  469. divide: getDivideShapeFromData(data),
  470. dim: finder.dimension
  471. });
  472. }
  473. });
  474. if (from.length > 0 && to.length > 0) {
  475. transitionBetween(from, to, api);
  476. }
  477. }
  478. export function installUniversalTransition(registers) {
  479. registers.registerUpdateLifecycle('series:beforeupdate', function (ecMOdel, api, params) {
  480. each(normalizeToArray(params.seriesTransition), function (transOpt) {
  481. each(normalizeToArray(transOpt.to), function (finder) {
  482. var series = params.updatedSeries;
  483. for (var i = 0; i < series.length; i++) {
  484. if (finder.seriesIndex != null && finder.seriesIndex === series[i].seriesIndex || finder.seriesId != null && finder.seriesId === series[i].id) {
  485. series[i][SERIES_UNIVERSAL_TRANSITION_PROP] = true;
  486. }
  487. }
  488. });
  489. });
  490. });
  491. registers.registerUpdateLifecycle('series:transition', function (ecModel, api, params) {
  492. // TODO api provide an namespace that can save stuff per instance
  493. var globalStore = getUniversalTransitionGlobalStore(api); // TODO multiple to multiple series.
  494. if (globalStore.oldSeries && params.updatedSeries && params.optionChanged) {
  495. // Use give transition config if its' give;
  496. var transitionOpt = params.seriesTransition;
  497. if (transitionOpt) {
  498. each(normalizeToArray(transitionOpt), function (opt) {
  499. transitionSeriesFromOpt(opt, globalStore, params, api);
  500. });
  501. } else {
  502. // Else guess from series based on transition series key.
  503. var updateBatches_1 = findTransitionSeriesBatches(globalStore, params);
  504. each(updateBatches_1.keys(), function (key) {
  505. var batch = updateBatches_1.get(key);
  506. transitionBetween(batch.oldSeries, batch.newSeries, api);
  507. });
  508. } // Reset
  509. each(params.updatedSeries, function (series) {
  510. // Reset;
  511. if (series[SERIES_UNIVERSAL_TRANSITION_PROP]) {
  512. series[SERIES_UNIVERSAL_TRANSITION_PROP] = false;
  513. }
  514. });
  515. } // Save all series of current update. Not only the updated one.
  516. var allSeries = ecModel.getSeries();
  517. var savedSeries = globalStore.oldSeries = [];
  518. var savedData = globalStore.oldData = [];
  519. for (var i = 0; i < allSeries.length; i++) {
  520. var data = allSeries[i].getData(); // Only save the data that can have transition.
  521. // Avoid large data costing too much extra memory
  522. if (data.count() < DATA_COUNT_THRESHOLD) {
  523. savedSeries.push(allSeries[i]);
  524. savedData.push(data);
  525. }
  526. }
  527. });
  528. }