ThemeRiverView.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  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. import { __extends } from "tslib";
  41. import { ECPolygon } from '../line/poly.js';
  42. import * as graphic from '../../util/graphic.js';
  43. import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states.js';
  44. import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle.js';
  45. import { bind } from 'zrender/lib/core/util.js';
  46. import DataDiffer from '../../data/DataDiffer.js';
  47. import ChartView from '../../view/Chart.js';
  48. import { SERIES_TYPE_THEME_RIVER } from './ThemeRiverSeries.js';
  49. import { saveOldStyle } from '../../animation/basicTransition.js';
  50. var ThemeRiverView = /** @class */function (_super) {
  51. __extends(ThemeRiverView, _super);
  52. function ThemeRiverView() {
  53. var _this = _super !== null && _super.apply(this, arguments) || this;
  54. _this.type = SERIES_TYPE_THEME_RIVER;
  55. _this._layers = [];
  56. return _this;
  57. }
  58. ThemeRiverView.prototype.render = function (seriesModel, ecModel, api) {
  59. var data = seriesModel.getData();
  60. var self = this;
  61. var group = this.group;
  62. var layersSeries = seriesModel.getLayerSeries();
  63. var layoutInfo = data.getLayout('layoutInfo');
  64. var rect = layoutInfo.rect;
  65. var boundaryGap = layoutInfo.boundaryGap;
  66. group.x = 0;
  67. group.y = rect.y + boundaryGap[0];
  68. function keyGetter(item) {
  69. return item.name;
  70. }
  71. var dataDiffer = new DataDiffer(this._layersSeries || [], layersSeries, keyGetter, keyGetter);
  72. var newLayersGroups = [];
  73. dataDiffer.add(bind(process, this, 'add')).update(bind(process, this, 'update')).remove(bind(process, this, 'remove')).execute();
  74. function process(status, idx, oldIdx) {
  75. var oldLayersGroups = self._layers;
  76. if (status === 'remove') {
  77. group.remove(oldLayersGroups[idx]);
  78. return;
  79. }
  80. var points0 = [];
  81. var points1 = [];
  82. var style;
  83. var indices = layersSeries[idx].indices;
  84. var j = 0;
  85. for (; j < indices.length; j++) {
  86. var layout = data.getItemLayout(indices[j]);
  87. var x = layout.x;
  88. var y0 = layout.y0;
  89. var y = layout.y;
  90. points0.push(x, y0);
  91. points1.push(x, y0 + y);
  92. style = data.getItemVisual(indices[j], 'style');
  93. }
  94. var polygon;
  95. var textLayout = data.getItemLayout(indices[0]);
  96. var labelModel = seriesModel.getModel('label');
  97. var margin = labelModel.get('margin');
  98. var emphasisModel = seriesModel.getModel('emphasis');
  99. if (status === 'add') {
  100. var layerGroup = newLayersGroups[idx] = new graphic.Group();
  101. polygon = new ECPolygon({
  102. shape: {
  103. points: points0,
  104. stackedOnPoints: points1,
  105. smooth: 0.4,
  106. stackedOnSmooth: 0.4,
  107. smoothConstraint: false
  108. },
  109. z2: 0
  110. });
  111. layerGroup.add(polygon);
  112. group.add(layerGroup);
  113. if (seriesModel.isAnimationEnabled()) {
  114. polygon.setClipPath(createGridClipShape(polygon.getBoundingRect(), seriesModel, function () {
  115. polygon.removeClipPath();
  116. }));
  117. }
  118. } else {
  119. var layerGroup = oldLayersGroups[oldIdx];
  120. polygon = layerGroup.childAt(0);
  121. group.add(layerGroup);
  122. newLayersGroups[idx] = layerGroup;
  123. graphic.updateProps(polygon, {
  124. shape: {
  125. points: points0,
  126. stackedOnPoints: points1
  127. }
  128. }, seriesModel);
  129. saveOldStyle(polygon);
  130. }
  131. setLabelStyle(polygon, getLabelStatesModels(seriesModel), {
  132. labelDataIndex: indices[j - 1],
  133. defaultText: data.getName(indices[j - 1]),
  134. inheritColor: style.fill
  135. }, {
  136. normal: {
  137. verticalAlign: 'middle'
  138. // align: 'right'
  139. }
  140. });
  141. polygon.setTextConfig({
  142. position: null,
  143. local: true
  144. });
  145. var labelEl = polygon.getTextContent();
  146. // TODO More label position options.
  147. if (labelEl) {
  148. labelEl.x = textLayout.x - margin;
  149. labelEl.y = textLayout.y0 + textLayout.y / 2;
  150. }
  151. polygon.useStyle(style);
  152. data.setItemGraphicEl(idx, polygon);
  153. setStatesStylesFromModel(polygon, seriesModel);
  154. toggleHoverEmphasis(polygon, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled'));
  155. }
  156. this._layersSeries = layersSeries;
  157. this._layers = newLayersGroups;
  158. };
  159. ThemeRiverView.type = SERIES_TYPE_THEME_RIVER;
  160. return ThemeRiverView;
  161. }(ChartView);
  162. ;
  163. // add animation to the view
  164. function createGridClipShape(rect, seriesModel, cb) {
  165. var rectEl = new graphic.Rect({
  166. shape: {
  167. x: rect.x - 10,
  168. y: rect.y - 10,
  169. width: 0,
  170. height: rect.height + 20
  171. }
  172. });
  173. graphic.initProps(rectEl, {
  174. shape: {
  175. x: rect.x - 50,
  176. width: rect.width + 100,
  177. height: rect.height + 20
  178. }
  179. }, seriesModel, cb);
  180. return rectEl;
  181. }
  182. export default ThemeRiverView;