GraphView.js 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  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.js';
  42. import SymbolDraw from '../helper/SymbolDraw.js';
  43. import LineDraw from '../helper/LineDraw.js';
  44. import RoamController from '../../component/helper/RoamController.js';
  45. import * as roamHelper from '../../component/helper/roamHelper.js';
  46. import { onIrrelevantElement } from '../../component/helper/cursorHelper.js';
  47. import * as graphic from '../../util/graphic.js';
  48. import adjustEdge from './adjustEdge.js';
  49. import { getNodeGlobalScale } from './graphHelper.js';
  50. import ChartView from '../../view/Chart.js';
  51. import { getECData } from '../../util/innerStore.js';
  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();
  115. if (!el) {
  116. return;
  117. } // Update draggable
  118. el.off('drag').off('dragend');
  119. var draggable = itemModel.get('draggable');
  120. if (draggable) {
  121. el.on('drag', function () {
  122. if (forceLayout) {
  123. forceLayout.warmUp();
  124. !_this._layouting && _this._startForceLayoutIteration(forceLayout, layoutAnimation);
  125. forceLayout.setFixed(idx); // Write position back to layout
  126. data.setItemLayout(idx, [el.x, el.y]);
  127. }
  128. }).on('dragend', function () {
  129. if (forceLayout) {
  130. forceLayout.setUnfixed(idx);
  131. }
  132. });
  133. }
  134. el.setDraggable(draggable && !!forceLayout, !!itemModel.get('cursor'));
  135. var focus = itemModel.get(['emphasis', 'focus']);
  136. if (focus === 'adjacency') {
  137. getECData(el).focus = node.getAdjacentDataIndices();
  138. }
  139. });
  140. data.graph.eachEdge(function (edge) {
  141. var el = edge.getGraphicEl();
  142. var focus = edge.getModel().get(['emphasis', 'focus']);
  143. if (!el) {
  144. return;
  145. }
  146. if (focus === 'adjacency') {
  147. getECData(el).focus = {
  148. edge: [edge.dataIndex],
  149. node: [edge.node1.dataIndex, edge.node2.dataIndex]
  150. };
  151. }
  152. });
  153. var circularRotateLabel = seriesModel.get('layout') === 'circular' && seriesModel.get(['circular', 'rotateLabel']);
  154. var cx = data.getLayout('cx');
  155. var cy = data.getLayout('cy');
  156. data.eachItemGraphicEl(function (el, idx) {
  157. var itemModel = data.getItemModel(idx);
  158. var labelRotate = itemModel.get(['label', 'rotate']) || 0;
  159. var symbolPath = el.getSymbolPath();
  160. if (circularRotateLabel) {
  161. var pos = data.getItemLayout(idx);
  162. var rad = Math.atan2(pos[1] - cy, pos[0] - cx);
  163. if (rad < 0) {
  164. rad = Math.PI * 2 + rad;
  165. }
  166. var isLeft = pos[0] < cx;
  167. if (isLeft) {
  168. rad = rad - Math.PI;
  169. }
  170. var textPosition = isLeft ? 'left' : 'right';
  171. symbolPath.setTextConfig({
  172. rotation: -rad,
  173. position: textPosition,
  174. origin: 'center'
  175. });
  176. var emphasisState = symbolPath.ensureState('emphasis');
  177. zrUtil.extend(emphasisState.textConfig || (emphasisState.textConfig = {}), {
  178. position: textPosition
  179. });
  180. } else {
  181. symbolPath.setTextConfig({
  182. rotation: labelRotate *= Math.PI / 180
  183. });
  184. }
  185. });
  186. this._firstRender = false;
  187. };
  188. GraphView.prototype.dispose = function () {
  189. this._controller && this._controller.dispose();
  190. this._controllerHost = null;
  191. };
  192. GraphView.prototype._startForceLayoutIteration = function (forceLayout, layoutAnimation) {
  193. var self = this;
  194. (function step() {
  195. forceLayout.step(function (stopped) {
  196. self.updateLayout(self._model);
  197. (self._layouting = !stopped) && (layoutAnimation ? self._layoutTimeout = setTimeout(step, 16) : step());
  198. });
  199. })();
  200. };
  201. GraphView.prototype._updateController = function (seriesModel, ecModel, api) {
  202. var _this = this;
  203. var controller = this._controller;
  204. var controllerHost = this._controllerHost;
  205. var group = this.group;
  206. controller.setPointerChecker(function (e, x, y) {
  207. var rect = group.getBoundingRect();
  208. rect.applyTransform(group.transform);
  209. return rect.contain(x, y) && !onIrrelevantElement(e, api, seriesModel);
  210. });
  211. if (!isViewCoordSys(seriesModel.coordinateSystem)) {
  212. controller.disable();
  213. return;
  214. }
  215. controller.enable(seriesModel.get('roam'));
  216. controllerHost.zoomLimit = seriesModel.get('scaleLimit');
  217. controllerHost.zoom = seriesModel.coordinateSystem.getZoom();
  218. controller.off('pan').off('zoom').on('pan', function (e) {
  219. roamHelper.updateViewOnPan(controllerHost, e.dx, e.dy);
  220. api.dispatchAction({
  221. seriesId: seriesModel.id,
  222. type: 'graphRoam',
  223. dx: e.dx,
  224. dy: e.dy
  225. });
  226. }).on('zoom', function (e) {
  227. roamHelper.updateViewOnZoom(controllerHost, e.scale, e.originX, e.originY);
  228. api.dispatchAction({
  229. seriesId: seriesModel.id,
  230. type: 'graphRoam',
  231. zoom: e.scale,
  232. originX: e.originX,
  233. originY: e.originY
  234. });
  235. _this._updateNodeAndLinkScale();
  236. adjustEdge(seriesModel.getGraph(), getNodeGlobalScale(seriesModel));
  237. _this._lineDraw.updateLayout(); // Only update label layout on zoom
  238. api.updateLabelLayout();
  239. });
  240. };
  241. GraphView.prototype._updateNodeAndLinkScale = function () {
  242. var seriesModel = this._model;
  243. var data = seriesModel.getData();
  244. var nodeScale = getNodeGlobalScale(seriesModel);
  245. data.eachItemGraphicEl(function (el, idx) {
  246. el && el.setSymbolScale(nodeScale);
  247. });
  248. };
  249. GraphView.prototype.updateLayout = function (seriesModel) {
  250. adjustEdge(seriesModel.getGraph(), getNodeGlobalScale(seriesModel));
  251. this._symbolDraw.updateLayout();
  252. this._lineDraw.updateLayout();
  253. };
  254. GraphView.prototype.remove = function (ecModel, api) {
  255. this._symbolDraw && this._symbolDraw.remove();
  256. this._lineDraw && this._lineDraw.remove();
  257. };
  258. GraphView.type = 'graph';
  259. return GraphView;
  260. }(ChartView);
  261. export default GraphView;