GraphView.js 9.5 KB

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