GraphView.js 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306
  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 * as zrUtil from 'zrender/lib/core/util';
  42. import SymbolDraw from '../helper/SymbolDraw';
  43. import LineDraw from '../helper/LineDraw';
  44. import RoamController from '../../component/helper/RoamController';
  45. import * as roamHelper from '../../component/helper/roamHelper';
  46. import { onIrrelevantElement } from '../../component/helper/cursorHelper';
  47. import * as graphic from '../../util/graphic';
  48. import adjustEdge from './adjustEdge';
  49. import { getNodeGlobalScale } from './graphHelper';
  50. import ChartView from '../../view/Chart';
  51. import { getECData } from '../../util/innerStore';
  52. function isViewCoordSys(coordSys) {
  53. return coordSys.type === 'view';
  54. }
  55. var GraphView =
  56. /** @class */
  57. function (_super) {
  58. __extends(GraphView, _super);
  59. function GraphView() {
  60. var _this = _super !== null && _super.apply(this, arguments) || this;
  61. _this.type = GraphView.type;
  62. return _this;
  63. }
  64. GraphView.prototype.init = function (ecModel, api) {
  65. var symbolDraw = new SymbolDraw();
  66. var lineDraw = new LineDraw();
  67. var group = this.group;
  68. this._controller = new RoamController(api.getZr());
  69. this._controllerHost = {
  70. target: group
  71. };
  72. group.add(symbolDraw.group);
  73. group.add(lineDraw.group);
  74. this._symbolDraw = symbolDraw;
  75. this._lineDraw = lineDraw;
  76. this._firstRender = true;
  77. };
  78. GraphView.prototype.render = function (seriesModel, ecModel, api) {
  79. var _this = this;
  80. var coordSys = seriesModel.coordinateSystem;
  81. this._model = seriesModel;
  82. var symbolDraw = this._symbolDraw;
  83. var lineDraw = this._lineDraw;
  84. var group = this.group;
  85. if (isViewCoordSys(coordSys)) {
  86. var groupNewProp = {
  87. x: coordSys.x,
  88. y: coordSys.y,
  89. scaleX: coordSys.scaleX,
  90. scaleY: coordSys.scaleY
  91. };
  92. if (this._firstRender) {
  93. group.attr(groupNewProp);
  94. } else {
  95. graphic.updateProps(group, groupNewProp, seriesModel);
  96. }
  97. } // Fix edge contact point with node
  98. adjustEdge(seriesModel.getGraph(), getNodeGlobalScale(seriesModel));
  99. var data = seriesModel.getData();
  100. symbolDraw.updateData(data);
  101. var edgeData = seriesModel.getEdgeData(); // TODO: TYPE
  102. lineDraw.updateData(edgeData);
  103. this._updateNodeAndLinkScale();
  104. this._updateController(seriesModel, ecModel, api);
  105. clearTimeout(this._layoutTimeout);
  106. var forceLayout = seriesModel.forceLayout;
  107. var layoutAnimation = seriesModel.get(['force', 'layoutAnimation']);
  108. if (forceLayout) {
  109. this._startForceLayoutIteration(forceLayout, layoutAnimation);
  110. }
  111. data.graph.eachNode(function (node) {
  112. var idx = node.dataIndex;
  113. var el = node.getGraphicEl();
  114. var itemModel = node.getModel(); // Update draggable
  115. el.off('drag').off('dragend');
  116. var draggable = itemModel.get('draggable');
  117. if (draggable) {
  118. el.on('drag', function () {
  119. if (forceLayout) {
  120. forceLayout.warmUp();
  121. !_this._layouting && _this._startForceLayoutIteration(forceLayout, layoutAnimation);
  122. forceLayout.setFixed(idx); // Write position back to layout
  123. data.setItemLayout(idx, [el.x, el.y]);
  124. }
  125. }).on('dragend', function () {
  126. if (forceLayout) {
  127. forceLayout.setUnfixed(idx);
  128. }
  129. });
  130. }
  131. el.setDraggable(draggable && !!forceLayout);
  132. var focus = itemModel.get(['emphasis', 'focus']);
  133. if (focus === 'adjacency') {
  134. getECData(el).focus = node.getAdjacentDataIndices();
  135. }
  136. });
  137. data.graph.eachEdge(function (edge) {
  138. var el = edge.getGraphicEl();
  139. var focus = edge.getModel().get(['emphasis', 'focus']);
  140. if (focus === 'adjacency') {
  141. getECData(el).focus = {
  142. edge: [edge.dataIndex],
  143. node: [edge.node1.dataIndex, edge.node2.dataIndex]
  144. };
  145. }
  146. });
  147. var circularRotateLabel = seriesModel.get('layout') === 'circular' && seriesModel.get(['circular', 'rotateLabel']);
  148. var cx = data.getLayout('cx');
  149. var cy = data.getLayout('cy');
  150. data.eachItemGraphicEl(function (el, idx) {
  151. var itemModel = data.getItemModel(idx);
  152. var labelRotate = itemModel.get(['label', 'rotate']) || 0;
  153. var symbolPath = el.getSymbolPath();
  154. if (circularRotateLabel) {
  155. var pos = data.getItemLayout(idx);
  156. var rad = Math.atan2(pos[1] - cy, pos[0] - cx);
  157. if (rad < 0) {
  158. rad = Math.PI * 2 + rad;
  159. }
  160. var isLeft = pos[0] < cx;
  161. if (isLeft) {
  162. rad = rad - Math.PI;
  163. }
  164. var textPosition = isLeft ? 'left' : 'right';
  165. symbolPath.setTextConfig({
  166. rotation: -rad,
  167. position: textPosition,
  168. origin: 'center'
  169. });
  170. var emphasisState = symbolPath.ensureState('emphasis');
  171. zrUtil.extend(emphasisState.textConfig || (emphasisState.textConfig = {}), {
  172. position: textPosition
  173. });
  174. } else {
  175. symbolPath.setTextConfig({
  176. rotation: labelRotate *= Math.PI / 180
  177. });
  178. }
  179. });
  180. this._firstRender = false;
  181. };
  182. GraphView.prototype.dispose = function () {
  183. this._controller && this._controller.dispose();
  184. this._controllerHost = null;
  185. };
  186. GraphView.prototype._startForceLayoutIteration = function (forceLayout, layoutAnimation) {
  187. var self = this;
  188. (function step() {
  189. forceLayout.step(function (stopped) {
  190. self.updateLayout(self._model);
  191. (self._layouting = !stopped) && (layoutAnimation ? self._layoutTimeout = setTimeout(step, 16) : step());
  192. });
  193. })();
  194. };
  195. GraphView.prototype._updateController = function (seriesModel, ecModel, api) {
  196. var _this = this;
  197. var controller = this._controller;
  198. var controllerHost = this._controllerHost;
  199. var group = this.group;
  200. controller.setPointerChecker(function (e, x, y) {
  201. var rect = group.getBoundingRect();
  202. rect.applyTransform(group.transform);
  203. return rect.contain(x, y) && !onIrrelevantElement(e, api, seriesModel);
  204. });
  205. if (!isViewCoordSys(seriesModel.coordinateSystem)) {
  206. controller.disable();
  207. return;
  208. }
  209. controller.enable(seriesModel.get('roam'));
  210. controllerHost.zoomLimit = seriesModel.get('scaleLimit');
  211. controllerHost.zoom = seriesModel.coordinateSystem.getZoom();
  212. controller.off('pan').off('zoom').on('pan', function (e) {
  213. roamHelper.updateViewOnPan(controllerHost, e.dx, e.dy);
  214. api.dispatchAction({
  215. seriesId: seriesModel.id,
  216. type: 'graphRoam',
  217. dx: e.dx,
  218. dy: e.dy
  219. });
  220. }).on('zoom', function (e) {
  221. roamHelper.updateViewOnZoom(controllerHost, e.scale, e.originX, e.originY);
  222. api.dispatchAction({
  223. seriesId: seriesModel.id,
  224. type: 'graphRoam',
  225. zoom: e.scale,
  226. originX: e.originX,
  227. originY: e.originY
  228. });
  229. _this._updateNodeAndLinkScale();
  230. adjustEdge(seriesModel.getGraph(), getNodeGlobalScale(seriesModel));
  231. _this._lineDraw.updateLayout(); // Only update label layout on zoom
  232. api.updateLabelLayout();
  233. });
  234. };
  235. GraphView.prototype._updateNodeAndLinkScale = function () {
  236. var seriesModel = this._model;
  237. var data = seriesModel.getData();
  238. var nodeScale = getNodeGlobalScale(seriesModel);
  239. data.eachItemGraphicEl(function (el, idx) {
  240. el.setSymbolScale(nodeScale);
  241. });
  242. };
  243. GraphView.prototype.updateLayout = function (seriesModel) {
  244. adjustEdge(seriesModel.getGraph(), getNodeGlobalScale(seriesModel));
  245. this._symbolDraw.updateLayout();
  246. this._lineDraw.updateLayout();
  247. };
  248. GraphView.prototype.remove = function (ecModel, api) {
  249. this._symbolDraw && this._symbolDraw.remove();
  250. this._lineDraw && this._lineDraw.remove();
  251. };
  252. GraphView.type = 'graph';
  253. return GraphView;
  254. }(ChartView);
  255. export default GraphView;