TreeView.js 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622
  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 * as graphic from '../../util/graphic.js';
  43. import { getECData } from '../../util/innerStore.js';
  44. import SymbolClz from '../helper/Symbol.js';
  45. import { radialCoordinate } from './layoutHelper.js';
  46. import * as bbox from 'zrender/lib/core/bbox.js';
  47. import View from '../../coord/View.js';
  48. import * as roamHelper from '../../component/helper/roamHelper.js';
  49. import RoamController from '../../component/helper/RoamController.js';
  50. import { onIrrelevantElement } from '../../component/helper/cursorHelper.js';
  51. import { parsePercent } from '../../util/number.js';
  52. import ChartView from '../../view/Chart.js';
  53. import Path from 'zrender/lib/graphic/Path.js';
  54. import { setStatesStylesFromModel, setStatesFlag, setDefaultStateProxy, HOVER_STATE_BLUR } from '../../util/states.js';
  55. var TreeEdgeShape = /** @class */function () {
  56. function TreeEdgeShape() {
  57. this.parentPoint = [];
  58. this.childPoints = [];
  59. }
  60. return TreeEdgeShape;
  61. }();
  62. var TreePath = /** @class */function (_super) {
  63. __extends(TreePath, _super);
  64. function TreePath(opts) {
  65. return _super.call(this, opts) || this;
  66. }
  67. TreePath.prototype.getDefaultStyle = function () {
  68. return {
  69. stroke: '#000',
  70. fill: null
  71. };
  72. };
  73. TreePath.prototype.getDefaultShape = function () {
  74. return new TreeEdgeShape();
  75. };
  76. TreePath.prototype.buildPath = function (ctx, shape) {
  77. var childPoints = shape.childPoints;
  78. var childLen = childPoints.length;
  79. var parentPoint = shape.parentPoint;
  80. var firstChildPos = childPoints[0];
  81. var lastChildPos = childPoints[childLen - 1];
  82. if (childLen === 1) {
  83. ctx.moveTo(parentPoint[0], parentPoint[1]);
  84. ctx.lineTo(firstChildPos[0], firstChildPos[1]);
  85. return;
  86. }
  87. var orient = shape.orient;
  88. var forkDim = orient === 'TB' || orient === 'BT' ? 0 : 1;
  89. var otherDim = 1 - forkDim;
  90. var forkPosition = parsePercent(shape.forkPosition, 1);
  91. var tmpPoint = [];
  92. tmpPoint[forkDim] = parentPoint[forkDim];
  93. tmpPoint[otherDim] = parentPoint[otherDim] + (lastChildPos[otherDim] - parentPoint[otherDim]) * forkPosition;
  94. ctx.moveTo(parentPoint[0], parentPoint[1]);
  95. ctx.lineTo(tmpPoint[0], tmpPoint[1]);
  96. ctx.moveTo(firstChildPos[0], firstChildPos[1]);
  97. tmpPoint[forkDim] = firstChildPos[forkDim];
  98. ctx.lineTo(tmpPoint[0], tmpPoint[1]);
  99. tmpPoint[forkDim] = lastChildPos[forkDim];
  100. ctx.lineTo(tmpPoint[0], tmpPoint[1]);
  101. ctx.lineTo(lastChildPos[0], lastChildPos[1]);
  102. for (var i = 1; i < childLen - 1; i++) {
  103. var point = childPoints[i];
  104. ctx.moveTo(point[0], point[1]);
  105. tmpPoint[forkDim] = point[forkDim];
  106. ctx.lineTo(tmpPoint[0], tmpPoint[1]);
  107. }
  108. };
  109. return TreePath;
  110. }(Path);
  111. var TreeView = /** @class */function (_super) {
  112. __extends(TreeView, _super);
  113. function TreeView() {
  114. var _this = _super !== null && _super.apply(this, arguments) || this;
  115. _this.type = TreeView.type;
  116. _this._mainGroup = new graphic.Group();
  117. return _this;
  118. }
  119. TreeView.prototype.init = function (ecModel, api) {
  120. this._controller = new RoamController(api.getZr());
  121. this._controllerHost = {
  122. target: this.group
  123. };
  124. this.group.add(this._mainGroup);
  125. };
  126. TreeView.prototype.render = function (seriesModel, ecModel, api) {
  127. var data = seriesModel.getData();
  128. var layoutInfo = seriesModel.layoutInfo;
  129. var group = this._mainGroup;
  130. var layout = seriesModel.get('layout');
  131. if (layout === 'radial') {
  132. group.x = layoutInfo.x + layoutInfo.width / 2;
  133. group.y = layoutInfo.y + layoutInfo.height / 2;
  134. } else {
  135. group.x = layoutInfo.x;
  136. group.y = layoutInfo.y;
  137. }
  138. this._updateViewCoordSys(seriesModel, api);
  139. this._updateController(seriesModel, ecModel, api);
  140. var oldData = this._data;
  141. data.diff(oldData).add(function (newIdx) {
  142. if (symbolNeedsDraw(data, newIdx)) {
  143. // Create node and edge
  144. updateNode(data, newIdx, null, group, seriesModel);
  145. }
  146. }).update(function (newIdx, oldIdx) {
  147. var symbolEl = oldData.getItemGraphicEl(oldIdx);
  148. if (!symbolNeedsDraw(data, newIdx)) {
  149. symbolEl && removeNode(oldData, oldIdx, symbolEl, group, seriesModel);
  150. return;
  151. }
  152. // Update node and edge
  153. updateNode(data, newIdx, symbolEl, group, seriesModel);
  154. }).remove(function (oldIdx) {
  155. var symbolEl = oldData.getItemGraphicEl(oldIdx);
  156. // When remove a collapsed node of subtree, since the collapsed
  157. // node haven't been initialized with a symbol element,
  158. // you can't found it's symbol element through index.
  159. // so if we want to remove the symbol element we should insure
  160. // that the symbol element is not null.
  161. if (symbolEl) {
  162. removeNode(oldData, oldIdx, symbolEl, group, seriesModel);
  163. }
  164. }).execute();
  165. this._nodeScaleRatio = seriesModel.get('nodeScaleRatio');
  166. this._updateNodeAndLinkScale(seriesModel);
  167. if (seriesModel.get('expandAndCollapse') === true) {
  168. data.eachItemGraphicEl(function (el, dataIndex) {
  169. el.off('click').on('click', function () {
  170. api.dispatchAction({
  171. type: 'treeExpandAndCollapse',
  172. seriesId: seriesModel.id,
  173. dataIndex: dataIndex
  174. });
  175. });
  176. });
  177. }
  178. this._data = data;
  179. };
  180. TreeView.prototype._updateViewCoordSys = function (seriesModel, api) {
  181. var data = seriesModel.getData();
  182. var points = [];
  183. data.each(function (idx) {
  184. var layout = data.getItemLayout(idx);
  185. if (layout && !isNaN(layout.x) && !isNaN(layout.y)) {
  186. points.push([+layout.x, +layout.y]);
  187. }
  188. });
  189. var min = [];
  190. var max = [];
  191. bbox.fromPoints(points, min, max);
  192. // If don't Store min max when collapse the root node after roam,
  193. // the root node will disappear.
  194. var oldMin = this._min;
  195. var oldMax = this._max;
  196. // If width or height is 0
  197. if (max[0] - min[0] === 0) {
  198. min[0] = oldMin ? oldMin[0] : min[0] - 1;
  199. max[0] = oldMax ? oldMax[0] : max[0] + 1;
  200. }
  201. if (max[1] - min[1] === 0) {
  202. min[1] = oldMin ? oldMin[1] : min[1] - 1;
  203. max[1] = oldMax ? oldMax[1] : max[1] + 1;
  204. }
  205. var viewCoordSys = seriesModel.coordinateSystem = new View();
  206. viewCoordSys.zoomLimit = seriesModel.get('scaleLimit');
  207. viewCoordSys.setBoundingRect(min[0], min[1], max[0] - min[0], max[1] - min[1]);
  208. viewCoordSys.setCenter(seriesModel.get('center'), api);
  209. viewCoordSys.setZoom(seriesModel.get('zoom'));
  210. // Here we use viewCoordSys just for computing the 'position' and 'scale' of the group
  211. this.group.attr({
  212. x: viewCoordSys.x,
  213. y: viewCoordSys.y,
  214. scaleX: viewCoordSys.scaleX,
  215. scaleY: viewCoordSys.scaleY
  216. });
  217. this._min = min;
  218. this._max = max;
  219. };
  220. TreeView.prototype._updateController = function (seriesModel, ecModel, api) {
  221. var _this = this;
  222. var controller = this._controller;
  223. var controllerHost = this._controllerHost;
  224. var group = this.group;
  225. controller.setPointerChecker(function (e, x, y) {
  226. var rect = group.getBoundingRect();
  227. rect.applyTransform(group.transform);
  228. return rect.contain(x, y) && !onIrrelevantElement(e, api, seriesModel);
  229. });
  230. controller.enable(seriesModel.get('roam'));
  231. controllerHost.zoomLimit = seriesModel.get('scaleLimit');
  232. controllerHost.zoom = seriesModel.coordinateSystem.getZoom();
  233. controller.off('pan').off('zoom').on('pan', function (e) {
  234. roamHelper.updateViewOnPan(controllerHost, e.dx, e.dy);
  235. api.dispatchAction({
  236. seriesId: seriesModel.id,
  237. type: 'treeRoam',
  238. dx: e.dx,
  239. dy: e.dy
  240. });
  241. }).on('zoom', function (e) {
  242. roamHelper.updateViewOnZoom(controllerHost, e.scale, e.originX, e.originY);
  243. api.dispatchAction({
  244. seriesId: seriesModel.id,
  245. type: 'treeRoam',
  246. zoom: e.scale,
  247. originX: e.originX,
  248. originY: e.originY
  249. });
  250. _this._updateNodeAndLinkScale(seriesModel);
  251. // Only update label layout on zoom
  252. api.updateLabelLayout();
  253. });
  254. };
  255. TreeView.prototype._updateNodeAndLinkScale = function (seriesModel) {
  256. var data = seriesModel.getData();
  257. var nodeScale = this._getNodeGlobalScale(seriesModel);
  258. data.eachItemGraphicEl(function (el, idx) {
  259. el.setSymbolScale(nodeScale);
  260. });
  261. };
  262. TreeView.prototype._getNodeGlobalScale = function (seriesModel) {
  263. var coordSys = seriesModel.coordinateSystem;
  264. if (coordSys.type !== 'view') {
  265. return 1;
  266. }
  267. var nodeScaleRatio = this._nodeScaleRatio;
  268. var groupZoom = coordSys.scaleX || 1;
  269. // Scale node when zoom changes
  270. var roamZoom = coordSys.getZoom();
  271. var nodeScale = (roamZoom - 1) * nodeScaleRatio + 1;
  272. return nodeScale / groupZoom;
  273. };
  274. TreeView.prototype.dispose = function () {
  275. this._controller && this._controller.dispose();
  276. this._controllerHost = null;
  277. };
  278. TreeView.prototype.remove = function () {
  279. this._mainGroup.removeAll();
  280. this._data = null;
  281. };
  282. TreeView.type = 'tree';
  283. return TreeView;
  284. }(ChartView);
  285. function symbolNeedsDraw(data, dataIndex) {
  286. var layout = data.getItemLayout(dataIndex);
  287. return layout && !isNaN(layout.x) && !isNaN(layout.y);
  288. }
  289. function updateNode(data, dataIndex, symbolEl, group, seriesModel) {
  290. var isInit = !symbolEl;
  291. var node = data.tree.getNodeByDataIndex(dataIndex);
  292. var itemModel = node.getModel();
  293. var visualColor = node.getVisual('style').fill;
  294. var symbolInnerColor = node.isExpand === false && node.children.length !== 0 ? visualColor : '#fff';
  295. var virtualRoot = data.tree.root;
  296. var source = node.parentNode === virtualRoot ? node : node.parentNode || node;
  297. var sourceSymbolEl = data.getItemGraphicEl(source.dataIndex);
  298. var sourceLayout = source.getLayout();
  299. var sourceOldLayout = sourceSymbolEl ? {
  300. x: sourceSymbolEl.__oldX,
  301. y: sourceSymbolEl.__oldY,
  302. rawX: sourceSymbolEl.__radialOldRawX,
  303. rawY: sourceSymbolEl.__radialOldRawY
  304. } : sourceLayout;
  305. var targetLayout = node.getLayout();
  306. if (isInit) {
  307. symbolEl = new SymbolClz(data, dataIndex, null, {
  308. symbolInnerColor: symbolInnerColor,
  309. useNameLabel: true
  310. });
  311. symbolEl.x = sourceOldLayout.x;
  312. symbolEl.y = sourceOldLayout.y;
  313. } else {
  314. symbolEl.updateData(data, dataIndex, null, {
  315. symbolInnerColor: symbolInnerColor,
  316. useNameLabel: true
  317. });
  318. }
  319. symbolEl.__radialOldRawX = symbolEl.__radialRawX;
  320. symbolEl.__radialOldRawY = symbolEl.__radialRawY;
  321. symbolEl.__radialRawX = targetLayout.rawX;
  322. symbolEl.__radialRawY = targetLayout.rawY;
  323. group.add(symbolEl);
  324. data.setItemGraphicEl(dataIndex, symbolEl);
  325. symbolEl.__oldX = symbolEl.x;
  326. symbolEl.__oldY = symbolEl.y;
  327. graphic.updateProps(symbolEl, {
  328. x: targetLayout.x,
  329. y: targetLayout.y
  330. }, seriesModel);
  331. var symbolPath = symbolEl.getSymbolPath();
  332. if (seriesModel.get('layout') === 'radial') {
  333. var realRoot = virtualRoot.children[0];
  334. var rootLayout = realRoot.getLayout();
  335. var length_1 = realRoot.children.length;
  336. var rad = void 0;
  337. var isLeft = void 0;
  338. if (targetLayout.x === rootLayout.x && node.isExpand === true && realRoot.children.length) {
  339. var center = {
  340. x: (realRoot.children[0].getLayout().x + realRoot.children[length_1 - 1].getLayout().x) / 2,
  341. y: (realRoot.children[0].getLayout().y + realRoot.children[length_1 - 1].getLayout().y) / 2
  342. };
  343. rad = Math.atan2(center.y - rootLayout.y, center.x - rootLayout.x);
  344. if (rad < 0) {
  345. rad = Math.PI * 2 + rad;
  346. }
  347. isLeft = center.x < rootLayout.x;
  348. if (isLeft) {
  349. rad = rad - Math.PI;
  350. }
  351. } else {
  352. rad = Math.atan2(targetLayout.y - rootLayout.y, targetLayout.x - rootLayout.x);
  353. if (rad < 0) {
  354. rad = Math.PI * 2 + rad;
  355. }
  356. if (node.children.length === 0 || node.children.length !== 0 && node.isExpand === false) {
  357. isLeft = targetLayout.x < rootLayout.x;
  358. if (isLeft) {
  359. rad = rad - Math.PI;
  360. }
  361. } else {
  362. isLeft = targetLayout.x > rootLayout.x;
  363. if (!isLeft) {
  364. rad = rad - Math.PI;
  365. }
  366. }
  367. }
  368. var textPosition = isLeft ? 'left' : 'right';
  369. var normalLabelModel = itemModel.getModel('label');
  370. var rotate = normalLabelModel.get('rotate');
  371. var labelRotateRadian = rotate * (Math.PI / 180);
  372. var textContent = symbolPath.getTextContent();
  373. if (textContent) {
  374. symbolPath.setTextConfig({
  375. position: normalLabelModel.get('position') || textPosition,
  376. rotation: rotate == null ? -rad : labelRotateRadian,
  377. origin: 'center'
  378. });
  379. textContent.setStyle('verticalAlign', 'middle');
  380. }
  381. }
  382. // Handle status
  383. var focus = itemModel.get(['emphasis', 'focus']);
  384. var focusDataIndices = focus === 'relative' ? zrUtil.concatArray(node.getAncestorsIndices(), node.getDescendantIndices()) : focus === 'ancestor' ? node.getAncestorsIndices() : focus === 'descendant' ? node.getDescendantIndices() : null;
  385. if (focusDataIndices) {
  386. // Modify the focus to data indices.
  387. getECData(symbolEl).focus = focusDataIndices;
  388. }
  389. drawEdge(seriesModel, node, virtualRoot, symbolEl, sourceOldLayout, sourceLayout, targetLayout, group);
  390. if (symbolEl.__edge) {
  391. symbolEl.onHoverStateChange = function (toState) {
  392. if (toState !== 'blur') {
  393. // NOTE: Ensure the parent elements will been blurred firstly.
  394. // According to the return of getAncestorsIndices and getDescendantIndices
  395. // TODO: A bit tricky.
  396. var parentEl = node.parentNode && data.getItemGraphicEl(node.parentNode.dataIndex);
  397. if (!(parentEl && parentEl.hoverState === HOVER_STATE_BLUR)) {
  398. setStatesFlag(symbolEl.__edge, toState);
  399. }
  400. }
  401. };
  402. }
  403. }
  404. function drawEdge(seriesModel, node, virtualRoot, symbolEl, sourceOldLayout, sourceLayout, targetLayout, group) {
  405. var itemModel = node.getModel();
  406. var edgeShape = seriesModel.get('edgeShape');
  407. var layout = seriesModel.get('layout');
  408. var orient = seriesModel.getOrient();
  409. var curvature = seriesModel.get(['lineStyle', 'curveness']);
  410. var edgeForkPosition = seriesModel.get('edgeForkPosition');
  411. var lineStyle = itemModel.getModel('lineStyle').getLineStyle();
  412. var edge = symbolEl.__edge;
  413. // curve edge from node -> parent
  414. // polyline edge from node -> children
  415. if (edgeShape === 'curve') {
  416. if (node.parentNode && node.parentNode !== virtualRoot) {
  417. if (!edge) {
  418. edge = symbolEl.__edge = new graphic.BezierCurve({
  419. shape: getEdgeShape(layout, orient, curvature, sourceOldLayout, sourceOldLayout)
  420. });
  421. }
  422. graphic.updateProps(edge, {
  423. shape: getEdgeShape(layout, orient, curvature, sourceLayout, targetLayout)
  424. }, seriesModel);
  425. }
  426. } else if (edgeShape === 'polyline') {
  427. if (layout === 'orthogonal') {
  428. if (node !== virtualRoot && node.children && node.children.length !== 0 && node.isExpand === true) {
  429. var children = node.children;
  430. var childPoints = [];
  431. for (var i = 0; i < children.length; i++) {
  432. var childLayout = children[i].getLayout();
  433. childPoints.push([childLayout.x, childLayout.y]);
  434. }
  435. if (!edge) {
  436. edge = symbolEl.__edge = new TreePath({
  437. shape: {
  438. parentPoint: [targetLayout.x, targetLayout.y],
  439. childPoints: [[targetLayout.x, targetLayout.y]],
  440. orient: orient,
  441. forkPosition: edgeForkPosition
  442. }
  443. });
  444. }
  445. graphic.updateProps(edge, {
  446. shape: {
  447. parentPoint: [targetLayout.x, targetLayout.y],
  448. childPoints: childPoints
  449. }
  450. }, seriesModel);
  451. }
  452. } else {
  453. if (process.env.NODE_ENV !== 'production') {
  454. throw new Error('The polyline edgeShape can only be used in orthogonal layout');
  455. }
  456. }
  457. }
  458. // show all edge when edgeShape is 'curve', filter node `isExpand` is false when edgeShape is 'polyline'
  459. if (edge && !(edgeShape === 'polyline' && !node.isExpand)) {
  460. edge.useStyle(zrUtil.defaults({
  461. strokeNoScale: true,
  462. fill: null
  463. }, lineStyle));
  464. setStatesStylesFromModel(edge, itemModel, 'lineStyle');
  465. setDefaultStateProxy(edge);
  466. group.add(edge);
  467. }
  468. }
  469. function removeNodeEdge(node, data, group, seriesModel, removeAnimationOpt) {
  470. var virtualRoot = data.tree.root;
  471. var _a = getSourceNode(virtualRoot, node),
  472. source = _a.source,
  473. sourceLayout = _a.sourceLayout;
  474. var symbolEl = data.getItemGraphicEl(node.dataIndex);
  475. if (!symbolEl) {
  476. return;
  477. }
  478. var sourceSymbolEl = data.getItemGraphicEl(source.dataIndex);
  479. var sourceEdge = sourceSymbolEl.__edge;
  480. // 1. when expand the sub tree, delete the children node should delete the edge of
  481. // the source at the same time. because the polyline edge shape is only owned by the source.
  482. // 2.when the node is the only children of the source, delete the node should delete the edge of
  483. // the source at the same time. the same reason as above.
  484. var edge = symbolEl.__edge || (source.isExpand === false || source.children.length === 1 ? sourceEdge : undefined);
  485. var edgeShape = seriesModel.get('edgeShape');
  486. var layoutOpt = seriesModel.get('layout');
  487. var orient = seriesModel.get('orient');
  488. var curvature = seriesModel.get(['lineStyle', 'curveness']);
  489. if (edge) {
  490. if (edgeShape === 'curve') {
  491. graphic.removeElement(edge, {
  492. shape: getEdgeShape(layoutOpt, orient, curvature, sourceLayout, sourceLayout),
  493. style: {
  494. opacity: 0
  495. }
  496. }, seriesModel, {
  497. cb: function () {
  498. group.remove(edge);
  499. },
  500. removeOpt: removeAnimationOpt
  501. });
  502. } else if (edgeShape === 'polyline' && seriesModel.get('layout') === 'orthogonal') {
  503. graphic.removeElement(edge, {
  504. shape: {
  505. parentPoint: [sourceLayout.x, sourceLayout.y],
  506. childPoints: [[sourceLayout.x, sourceLayout.y]]
  507. },
  508. style: {
  509. opacity: 0
  510. }
  511. }, seriesModel, {
  512. cb: function () {
  513. group.remove(edge);
  514. },
  515. removeOpt: removeAnimationOpt
  516. });
  517. }
  518. }
  519. }
  520. function getSourceNode(virtualRoot, node) {
  521. var source = node.parentNode === virtualRoot ? node : node.parentNode || node;
  522. var sourceLayout;
  523. while (sourceLayout = source.getLayout(), sourceLayout == null) {
  524. source = source.parentNode === virtualRoot ? source : source.parentNode || source;
  525. }
  526. return {
  527. source: source,
  528. sourceLayout: sourceLayout
  529. };
  530. }
  531. function removeNode(data, dataIndex, symbolEl, group, seriesModel) {
  532. var node = data.tree.getNodeByDataIndex(dataIndex);
  533. var virtualRoot = data.tree.root;
  534. var sourceLayout = getSourceNode(virtualRoot, node).sourceLayout;
  535. // Use same duration and easing with update to have more consistent animation.
  536. var removeAnimationOpt = {
  537. duration: seriesModel.get('animationDurationUpdate'),
  538. easing: seriesModel.get('animationEasingUpdate')
  539. };
  540. graphic.removeElement(symbolEl, {
  541. x: sourceLayout.x + 1,
  542. y: sourceLayout.y + 1
  543. }, seriesModel, {
  544. cb: function () {
  545. group.remove(symbolEl);
  546. data.setItemGraphicEl(dataIndex, null);
  547. },
  548. removeOpt: removeAnimationOpt
  549. });
  550. symbolEl.fadeOut(null, data.hostModel, {
  551. fadeLabel: true,
  552. animation: removeAnimationOpt
  553. });
  554. // remove edge as parent node
  555. node.children.forEach(function (childNode) {
  556. removeNodeEdge(childNode, data, group, seriesModel, removeAnimationOpt);
  557. });
  558. // remove edge as child node
  559. removeNodeEdge(node, data, group, seriesModel, removeAnimationOpt);
  560. }
  561. function getEdgeShape(layoutOpt, orient, curvature, sourceLayout, targetLayout) {
  562. var cpx1;
  563. var cpy1;
  564. var cpx2;
  565. var cpy2;
  566. var x1;
  567. var x2;
  568. var y1;
  569. var y2;
  570. if (layoutOpt === 'radial') {
  571. x1 = sourceLayout.rawX;
  572. y1 = sourceLayout.rawY;
  573. x2 = targetLayout.rawX;
  574. y2 = targetLayout.rawY;
  575. var radialCoor1 = radialCoordinate(x1, y1);
  576. var radialCoor2 = radialCoordinate(x1, y1 + (y2 - y1) * curvature);
  577. var radialCoor3 = radialCoordinate(x2, y2 + (y1 - y2) * curvature);
  578. var radialCoor4 = radialCoordinate(x2, y2);
  579. return {
  580. x1: radialCoor1.x || 0,
  581. y1: radialCoor1.y || 0,
  582. x2: radialCoor4.x || 0,
  583. y2: radialCoor4.y || 0,
  584. cpx1: radialCoor2.x || 0,
  585. cpy1: radialCoor2.y || 0,
  586. cpx2: radialCoor3.x || 0,
  587. cpy2: radialCoor3.y || 0
  588. };
  589. } else {
  590. x1 = sourceLayout.x;
  591. y1 = sourceLayout.y;
  592. x2 = targetLayout.x;
  593. y2 = targetLayout.y;
  594. if (orient === 'LR' || orient === 'RL') {
  595. cpx1 = x1 + (x2 - x1) * curvature;
  596. cpy1 = y1;
  597. cpx2 = x2 + (x1 - x2) * curvature;
  598. cpy2 = y2;
  599. }
  600. if (orient === 'TB' || orient === 'BT') {
  601. cpx1 = x1;
  602. cpy1 = y1 + (y2 - y1) * curvature;
  603. cpx2 = x2;
  604. cpy2 = y2 + (y1 - y2) * curvature;
  605. }
  606. }
  607. return {
  608. x1: x1,
  609. y1: y1,
  610. x2: x2,
  611. y2: y2,
  612. cpx1: cpx1,
  613. cpy1: cpy1,
  614. cpx2: cpx2,
  615. cpy2: cpy2
  616. };
  617. }
  618. export default TreeView;