SankeyView.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361
  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 graphic from '../../util/graphic.js';
  42. import { enterEmphasis, leaveEmphasis, toggleHoverEmphasis, setStatesStylesFromModel } from '../../util/states.js';
  43. import ChartView from '../../view/Chart.js';
  44. import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle.js';
  45. import { getECData } from '../../util/innerStore.js';
  46. import { isString, retrieve3 } from 'zrender/lib/core/util.js';
  47. import RoamController from '../../component/helper/RoamController.js';
  48. import * as roamHelper from '../../component/helper/roamHelper.js';
  49. import View from '../../coord/View.js';
  50. var SankeyPathShape = /** @class */function () {
  51. function SankeyPathShape() {
  52. this.x1 = 0;
  53. this.y1 = 0;
  54. this.x2 = 0;
  55. this.y2 = 0;
  56. this.cpx1 = 0;
  57. this.cpy1 = 0;
  58. this.cpx2 = 0;
  59. this.cpy2 = 0;
  60. this.extent = 0;
  61. }
  62. return SankeyPathShape;
  63. }();
  64. var SankeyPath = /** @class */function (_super) {
  65. __extends(SankeyPath, _super);
  66. function SankeyPath(opts) {
  67. return _super.call(this, opts) || this;
  68. }
  69. SankeyPath.prototype.getDefaultShape = function () {
  70. return new SankeyPathShape();
  71. };
  72. SankeyPath.prototype.buildPath = function (ctx, shape) {
  73. var extent = shape.extent;
  74. ctx.moveTo(shape.x1, shape.y1);
  75. ctx.bezierCurveTo(shape.cpx1, shape.cpy1, shape.cpx2, shape.cpy2, shape.x2, shape.y2);
  76. if (shape.orient === 'vertical') {
  77. ctx.lineTo(shape.x2 + extent, shape.y2);
  78. ctx.bezierCurveTo(shape.cpx2 + extent, shape.cpy2, shape.cpx1 + extent, shape.cpy1, shape.x1 + extent, shape.y1);
  79. } else {
  80. ctx.lineTo(shape.x2, shape.y2 + extent);
  81. ctx.bezierCurveTo(shape.cpx2, shape.cpy2 + extent, shape.cpx1, shape.cpy1 + extent, shape.x1, shape.y1 + extent);
  82. }
  83. ctx.closePath();
  84. };
  85. SankeyPath.prototype.highlight = function () {
  86. enterEmphasis(this);
  87. };
  88. SankeyPath.prototype.downplay = function () {
  89. leaveEmphasis(this);
  90. };
  91. return SankeyPath;
  92. }(graphic.Path);
  93. var SankeyView = /** @class */function (_super) {
  94. __extends(SankeyView, _super);
  95. function SankeyView() {
  96. var _this = _super !== null && _super.apply(this, arguments) || this;
  97. _this.type = SankeyView.type;
  98. _this._mainGroup = new graphic.Group();
  99. _this._focusAdjacencyDisabled = false;
  100. return _this;
  101. }
  102. SankeyView.prototype.init = function (ecModel, api) {
  103. this._controller = new RoamController(api.getZr());
  104. this._controllerHost = {
  105. target: this.group
  106. };
  107. this.group.add(this._mainGroup);
  108. };
  109. SankeyView.prototype.render = function (seriesModel, ecModel, api) {
  110. var sankeyView = this;
  111. var graph = seriesModel.getGraph();
  112. var mainGroup = this._mainGroup;
  113. var layoutInfo = seriesModel.layoutInfo;
  114. // view width
  115. var width = layoutInfo.width;
  116. // view height
  117. var height = layoutInfo.height;
  118. var nodeData = seriesModel.getData();
  119. var edgeData = seriesModel.getData('edge');
  120. var orient = seriesModel.get('orient');
  121. this._model = seriesModel;
  122. mainGroup.removeAll();
  123. mainGroup.x = layoutInfo.x;
  124. mainGroup.y = layoutInfo.y;
  125. this._updateViewCoordSys(seriesModel, api);
  126. roamHelper.updateController(seriesModel, api, mainGroup, this._controller, this._controllerHost, null);
  127. // generate a bezire Curve for each edge
  128. graph.eachEdge(function (edge) {
  129. var curve = new SankeyPath();
  130. var ecData = getECData(curve);
  131. ecData.dataIndex = edge.dataIndex;
  132. ecData.seriesIndex = seriesModel.seriesIndex;
  133. ecData.dataType = 'edge';
  134. var edgeModel = edge.getModel();
  135. var lineStyleModel = edgeModel.getModel('lineStyle');
  136. var curvature = lineStyleModel.get('curveness');
  137. var n1Layout = edge.node1.getLayout();
  138. var node1Model = edge.node1.getModel();
  139. var dragX1 = node1Model.get('localX');
  140. var dragY1 = node1Model.get('localY');
  141. var n2Layout = edge.node2.getLayout();
  142. var node2Model = edge.node2.getModel();
  143. var dragX2 = node2Model.get('localX');
  144. var dragY2 = node2Model.get('localY');
  145. var edgeLayout = edge.getLayout();
  146. var x1;
  147. var y1;
  148. var x2;
  149. var y2;
  150. var cpx1;
  151. var cpy1;
  152. var cpx2;
  153. var cpy2;
  154. curve.shape.extent = Math.max(1, edgeLayout.dy);
  155. curve.shape.orient = orient;
  156. if (orient === 'vertical') {
  157. x1 = (dragX1 != null ? dragX1 * width : n1Layout.x) + edgeLayout.sy;
  158. y1 = (dragY1 != null ? dragY1 * height : n1Layout.y) + n1Layout.dy;
  159. x2 = (dragX2 != null ? dragX2 * width : n2Layout.x) + edgeLayout.ty;
  160. y2 = dragY2 != null ? dragY2 * height : n2Layout.y;
  161. cpx1 = x1;
  162. cpy1 = y1 * (1 - curvature) + y2 * curvature;
  163. cpx2 = x2;
  164. cpy2 = y1 * curvature + y2 * (1 - curvature);
  165. } else {
  166. x1 = (dragX1 != null ? dragX1 * width : n1Layout.x) + n1Layout.dx;
  167. y1 = (dragY1 != null ? dragY1 * height : n1Layout.y) + edgeLayout.sy;
  168. x2 = dragX2 != null ? dragX2 * width : n2Layout.x;
  169. y2 = (dragY2 != null ? dragY2 * height : n2Layout.y) + edgeLayout.ty;
  170. cpx1 = x1 * (1 - curvature) + x2 * curvature;
  171. cpy1 = y1;
  172. cpx2 = x1 * curvature + x2 * (1 - curvature);
  173. cpy2 = y2;
  174. }
  175. curve.setShape({
  176. x1: x1,
  177. y1: y1,
  178. x2: x2,
  179. y2: y2,
  180. cpx1: cpx1,
  181. cpy1: cpy1,
  182. cpx2: cpx2,
  183. cpy2: cpy2
  184. });
  185. curve.useStyle(lineStyleModel.getItemStyle());
  186. // Special color, use source node color or target node color
  187. applyCurveStyle(curve.style, orient, edge);
  188. var defaultEdgeLabelText = "" + edgeModel.get('value');
  189. var edgeLabelStateModels = getLabelStatesModels(edgeModel, 'edgeLabel');
  190. setLabelStyle(curve, edgeLabelStateModels, {
  191. labelFetcher: {
  192. getFormattedLabel: function (dataIndex, stateName, dataType, labelDimIndex, formatter, extendParams) {
  193. return seriesModel.getFormattedLabel(dataIndex, stateName, 'edge', labelDimIndex,
  194. // ensure edgeLabel formatter is provided
  195. // to prevent the inheritance from `label.formatter` of the series
  196. retrieve3(formatter, edgeLabelStateModels.normal && edgeLabelStateModels.normal.get('formatter'), defaultEdgeLabelText), extendParams);
  197. }
  198. },
  199. labelDataIndex: edge.dataIndex,
  200. defaultText: defaultEdgeLabelText
  201. });
  202. curve.setTextConfig({
  203. position: 'inside'
  204. });
  205. var emphasisModel = edgeModel.getModel('emphasis');
  206. setStatesStylesFromModel(curve, edgeModel, 'lineStyle', function (model) {
  207. var style = model.getItemStyle();
  208. applyCurveStyle(style, orient, edge);
  209. return style;
  210. });
  211. mainGroup.add(curve);
  212. edgeData.setItemGraphicEl(edge.dataIndex, curve);
  213. var focus = emphasisModel.get('focus');
  214. toggleHoverEmphasis(curve, focus === 'adjacency' ? edge.getAdjacentDataIndices() : focus === 'trajectory' ? edge.getTrajectoryDataIndices() : focus, emphasisModel.get('blurScope'), emphasisModel.get('disabled'));
  215. });
  216. // Generate a rect for each node
  217. graph.eachNode(function (node) {
  218. var layout = node.getLayout();
  219. var itemModel = node.getModel();
  220. var dragX = itemModel.get('localX');
  221. var dragY = itemModel.get('localY');
  222. var emphasisModel = itemModel.getModel('emphasis');
  223. var borderRadius = itemModel.get(['itemStyle', 'borderRadius']) || 0;
  224. var rect = new graphic.Rect({
  225. shape: {
  226. x: dragX != null ? dragX * width : layout.x,
  227. y: dragY != null ? dragY * height : layout.y,
  228. width: layout.dx,
  229. height: layout.dy,
  230. r: borderRadius
  231. },
  232. style: itemModel.getModel('itemStyle').getItemStyle(),
  233. z2: 10
  234. });
  235. setLabelStyle(rect, getLabelStatesModels(itemModel), {
  236. labelFetcher: {
  237. getFormattedLabel: function (dataIndex, stateName) {
  238. return seriesModel.getFormattedLabel(dataIndex, stateName, 'node');
  239. }
  240. },
  241. labelDataIndex: node.dataIndex,
  242. defaultText: node.id
  243. });
  244. rect.disableLabelAnimation = true;
  245. rect.setStyle('fill', node.getVisual('color'));
  246. rect.setStyle('decal', node.getVisual('style').decal);
  247. setStatesStylesFromModel(rect, itemModel);
  248. mainGroup.add(rect);
  249. nodeData.setItemGraphicEl(node.dataIndex, rect);
  250. getECData(rect).dataType = 'node';
  251. var focus = emphasisModel.get('focus');
  252. toggleHoverEmphasis(rect, focus === 'adjacency' ? node.getAdjacentDataIndices() : focus === 'trajectory' ? node.getTrajectoryDataIndices() : focus, emphasisModel.get('blurScope'), emphasisModel.get('disabled'));
  253. });
  254. nodeData.eachItemGraphicEl(function (el, dataIndex) {
  255. var itemModel = nodeData.getItemModel(dataIndex);
  256. if (itemModel.get('draggable')) {
  257. el.drift = function (dx, dy) {
  258. sankeyView._focusAdjacencyDisabled = true;
  259. this.shape.x += dx;
  260. this.shape.y += dy;
  261. this.dirty();
  262. api.dispatchAction({
  263. type: 'dragNode',
  264. seriesId: seriesModel.id,
  265. dataIndex: nodeData.getRawIndex(dataIndex),
  266. localX: this.shape.x / width,
  267. localY: this.shape.y / height
  268. });
  269. };
  270. el.ondragend = function () {
  271. sankeyView._focusAdjacencyDisabled = false;
  272. };
  273. el.draggable = true;
  274. el.cursor = 'move';
  275. }
  276. });
  277. if (!this._data && seriesModel.isAnimationEnabled()) {
  278. mainGroup.setClipPath(createGridClipShape(mainGroup.getBoundingRect(), seriesModel, function () {
  279. mainGroup.removeClipPath();
  280. }));
  281. }
  282. this._data = seriesModel.getData();
  283. };
  284. SankeyView.prototype.dispose = function () {
  285. this._controller && this._controller.dispose();
  286. this._controllerHost = null;
  287. };
  288. SankeyView.prototype._updateViewCoordSys = function (seriesModel, api) {
  289. var layoutInfo = seriesModel.layoutInfo;
  290. var width = layoutInfo.width;
  291. var height = layoutInfo.height;
  292. var viewCoordSys = seriesModel.coordinateSystem = new View(null, {
  293. api: api,
  294. ecModel: seriesModel.ecModel
  295. });
  296. viewCoordSys.zoomLimit = seriesModel.get('scaleLimit');
  297. viewCoordSys.setBoundingRect(0, 0, width, height);
  298. viewCoordSys.setCenter(seriesModel.get('center'));
  299. viewCoordSys.setZoom(seriesModel.get('zoom'));
  300. this._controllerHost.target.attr({
  301. x: viewCoordSys.x,
  302. y: viewCoordSys.y,
  303. scaleX: viewCoordSys.scaleX,
  304. scaleY: viewCoordSys.scaleY
  305. });
  306. };
  307. SankeyView.type = 'sankey';
  308. return SankeyView;
  309. }(ChartView);
  310. /**
  311. * Special color, use source node color or target node color
  312. * @param curveProps curve's style to parse
  313. * @param orient direction
  314. * @param edge current curve data
  315. */
  316. function applyCurveStyle(curveProps, orient, edge) {
  317. switch (curveProps.fill) {
  318. case 'source':
  319. curveProps.fill = edge.node1.getVisual('color');
  320. curveProps.decal = edge.node1.getVisual('style').decal;
  321. break;
  322. case 'target':
  323. curveProps.fill = edge.node2.getVisual('color');
  324. curveProps.decal = edge.node2.getVisual('style').decal;
  325. break;
  326. case 'gradient':
  327. var sourceColor = edge.node1.getVisual('color');
  328. var targetColor = edge.node2.getVisual('color');
  329. if (isString(sourceColor) && isString(targetColor)) {
  330. curveProps.fill = new graphic.LinearGradient(0, 0, +(orient === 'horizontal'), +(orient === 'vertical'), [{
  331. color: sourceColor,
  332. offset: 0
  333. }, {
  334. color: targetColor,
  335. offset: 1
  336. }]);
  337. }
  338. }
  339. }
  340. // Add animation to the view
  341. function createGridClipShape(rect, seriesModel, cb) {
  342. var rectEl = new graphic.Rect({
  343. shape: {
  344. x: rect.x - 10,
  345. y: rect.y - 10,
  346. width: 0,
  347. height: rect.height + 20
  348. }
  349. });
  350. graphic.initProps(rectEl, {
  351. shape: {
  352. width: rect.width + 20
  353. }
  354. }, seriesModel, cb);
  355. return rectEl;
  356. }
  357. export default SankeyView;