GraphView.js 9.4 KB

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