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