TreeView.js 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598
  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 { parsePercent } from '../../util/number.js';
  51. import ChartView from '../../view/Chart.js';
  52. import Path from 'zrender/lib/graphic/Path.js';
  53. import { setStatesStylesFromModel, setStatesFlag, setDefaultStateProxy, HOVER_STATE_BLUR } from '../../util/states.js';
  54. import tokens from '../../visual/tokens.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: tokens.color.neutral99,
  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, null, 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(null, {
  206. api: api,
  207. ecModel: seriesModel.ecModel
  208. });
  209. viewCoordSys.zoomLimit = seriesModel.get('scaleLimit');
  210. viewCoordSys.setBoundingRect(min[0], min[1], max[0] - min[0], max[1] - min[1]);
  211. viewCoordSys.setCenter(seriesModel.get('center'));
  212. viewCoordSys.setZoom(seriesModel.get('zoom'));
  213. // Here we use viewCoordSys just for computing the 'position' and 'scale' of the group,
  214. // and 'treeRoam' action.
  215. this.group.attr({
  216. x: viewCoordSys.x,
  217. y: viewCoordSys.y,
  218. scaleX: viewCoordSys.scaleX,
  219. scaleY: viewCoordSys.scaleY
  220. });
  221. this._min = min;
  222. this._max = max;
  223. };
  224. TreeView.prototype._updateController = function (seriesModel, clipRect, ecModel, api) {
  225. var _this = this;
  226. roamHelper.updateController(seriesModel, api, this.group, this._controller, this._controllerHost, clipRect);
  227. this._controller.on('zoom', function (e) {
  228. _this._updateNodeAndLinkScale(seriesModel);
  229. });
  230. };
  231. TreeView.prototype._updateNodeAndLinkScale = function (seriesModel) {
  232. var data = seriesModel.getData();
  233. var nodeScale = this._getNodeGlobalScale(seriesModel);
  234. data.eachItemGraphicEl(function (el, idx) {
  235. el.setSymbolScale(nodeScale);
  236. });
  237. };
  238. TreeView.prototype._getNodeGlobalScale = function (seriesModel) {
  239. var coordSys = seriesModel.coordinateSystem;
  240. if (coordSys.type !== 'view') {
  241. return 1;
  242. }
  243. var nodeScaleRatio = this._nodeScaleRatio;
  244. var groupZoom = coordSys.scaleX || 1;
  245. // Scale node when zoom changes
  246. var roamZoom = coordSys.getZoom();
  247. var nodeScale = (roamZoom - 1) * nodeScaleRatio + 1;
  248. return nodeScale / groupZoom;
  249. };
  250. TreeView.prototype.dispose = function () {
  251. this._controller && this._controller.dispose();
  252. this._controllerHost = null;
  253. };
  254. TreeView.prototype.remove = function () {
  255. this._mainGroup.removeAll();
  256. this._data = null;
  257. };
  258. TreeView.type = 'tree';
  259. return TreeView;
  260. }(ChartView);
  261. function symbolNeedsDraw(data, dataIndex) {
  262. var layout = data.getItemLayout(dataIndex);
  263. return layout && !isNaN(layout.x) && !isNaN(layout.y);
  264. }
  265. function updateNode(data, dataIndex, symbolEl, group, seriesModel) {
  266. var isInit = !symbolEl;
  267. var node = data.tree.getNodeByDataIndex(dataIndex);
  268. var itemModel = node.getModel();
  269. var visualColor = node.getVisual('style').fill;
  270. var symbolInnerColor = node.isExpand === false && node.children.length !== 0 ? visualColor : tokens.color.neutral00;
  271. var virtualRoot = data.tree.root;
  272. var source = node.parentNode === virtualRoot ? node : node.parentNode || node;
  273. var sourceSymbolEl = data.getItemGraphicEl(source.dataIndex);
  274. var sourceLayout = source.getLayout();
  275. var sourceOldLayout = sourceSymbolEl ? {
  276. x: sourceSymbolEl.__oldX,
  277. y: sourceSymbolEl.__oldY,
  278. rawX: sourceSymbolEl.__radialOldRawX,
  279. rawY: sourceSymbolEl.__radialOldRawY
  280. } : sourceLayout;
  281. var targetLayout = node.getLayout();
  282. if (isInit) {
  283. symbolEl = new SymbolClz(data, dataIndex, null, {
  284. symbolInnerColor: symbolInnerColor,
  285. useNameLabel: true
  286. });
  287. symbolEl.x = sourceOldLayout.x;
  288. symbolEl.y = sourceOldLayout.y;
  289. } else {
  290. symbolEl.updateData(data, dataIndex, null, {
  291. symbolInnerColor: symbolInnerColor,
  292. useNameLabel: true
  293. });
  294. }
  295. symbolEl.__radialOldRawX = symbolEl.__radialRawX;
  296. symbolEl.__radialOldRawY = symbolEl.__radialRawY;
  297. symbolEl.__radialRawX = targetLayout.rawX;
  298. symbolEl.__radialRawY = targetLayout.rawY;
  299. group.add(symbolEl);
  300. data.setItemGraphicEl(dataIndex, symbolEl);
  301. symbolEl.__oldX = symbolEl.x;
  302. symbolEl.__oldY = symbolEl.y;
  303. graphic.updateProps(symbolEl, {
  304. x: targetLayout.x,
  305. y: targetLayout.y
  306. }, seriesModel);
  307. var symbolPath = symbolEl.getSymbolPath();
  308. if (seriesModel.get('layout') === 'radial') {
  309. var realRoot = virtualRoot.children[0];
  310. var rootLayout = realRoot.getLayout();
  311. var length_1 = realRoot.children.length;
  312. var rad = void 0;
  313. var isLeft = void 0;
  314. if (targetLayout.x === rootLayout.x && node.isExpand === true && realRoot.children.length) {
  315. var center = {
  316. x: (realRoot.children[0].getLayout().x + realRoot.children[length_1 - 1].getLayout().x) / 2,
  317. y: (realRoot.children[0].getLayout().y + realRoot.children[length_1 - 1].getLayout().y) / 2
  318. };
  319. rad = Math.atan2(center.y - rootLayout.y, center.x - rootLayout.x);
  320. if (rad < 0) {
  321. rad = Math.PI * 2 + rad;
  322. }
  323. isLeft = center.x < rootLayout.x;
  324. if (isLeft) {
  325. rad = rad - Math.PI;
  326. }
  327. } else {
  328. rad = Math.atan2(targetLayout.y - rootLayout.y, targetLayout.x - rootLayout.x);
  329. if (rad < 0) {
  330. rad = Math.PI * 2 + rad;
  331. }
  332. if (node.children.length === 0 || node.children.length !== 0 && node.isExpand === false) {
  333. isLeft = targetLayout.x < rootLayout.x;
  334. if (isLeft) {
  335. rad = rad - Math.PI;
  336. }
  337. } else {
  338. isLeft = targetLayout.x > rootLayout.x;
  339. if (!isLeft) {
  340. rad = rad - Math.PI;
  341. }
  342. }
  343. }
  344. var textPosition = isLeft ? 'left' : 'right';
  345. var normalLabelModel = itemModel.getModel('label');
  346. var rotate = normalLabelModel.get('rotate');
  347. var labelRotateRadian = rotate * (Math.PI / 180);
  348. var textContent = symbolPath.getTextContent();
  349. if (textContent) {
  350. symbolPath.setTextConfig({
  351. position: normalLabelModel.get('position') || textPosition,
  352. rotation: rotate == null ? -rad : labelRotateRadian,
  353. origin: 'center'
  354. });
  355. textContent.setStyle('verticalAlign', 'middle');
  356. }
  357. }
  358. // Handle status
  359. var focus = itemModel.get(['emphasis', 'focus']);
  360. var focusDataIndices = focus === 'relative' ? zrUtil.concatArray(node.getAncestorsIndices(), node.getDescendantIndices()) : focus === 'ancestor' ? node.getAncestorsIndices() : focus === 'descendant' ? node.getDescendantIndices() : null;
  361. if (focusDataIndices) {
  362. // Modify the focus to data indices.
  363. getECData(symbolEl).focus = focusDataIndices;
  364. }
  365. drawEdge(seriesModel, node, virtualRoot, symbolEl, sourceOldLayout, sourceLayout, targetLayout, group);
  366. if (symbolEl.__edge) {
  367. symbolEl.onHoverStateChange = function (toState) {
  368. if (toState !== 'blur') {
  369. // NOTE: Ensure the parent elements will been blurred firstly.
  370. // According to the return of getAncestorsIndices and getDescendantIndices
  371. // TODO: A bit tricky.
  372. var parentEl = node.parentNode && data.getItemGraphicEl(node.parentNode.dataIndex);
  373. if (!(parentEl && parentEl.hoverState === HOVER_STATE_BLUR)) {
  374. setStatesFlag(symbolEl.__edge, toState);
  375. }
  376. }
  377. };
  378. }
  379. }
  380. function drawEdge(seriesModel, node, virtualRoot, symbolEl, sourceOldLayout, sourceLayout, targetLayout, group) {
  381. var itemModel = node.getModel();
  382. var edgeShape = seriesModel.get('edgeShape');
  383. var layout = seriesModel.get('layout');
  384. var orient = seriesModel.getOrient();
  385. var curvature = seriesModel.get(['lineStyle', 'curveness']);
  386. var edgeForkPosition = seriesModel.get('edgeForkPosition');
  387. var lineStyle = itemModel.getModel('lineStyle').getLineStyle();
  388. var edge = symbolEl.__edge;
  389. // curve edge from node -> parent
  390. // polyline edge from node -> children
  391. if (edgeShape === 'curve') {
  392. if (node.parentNode && node.parentNode !== virtualRoot) {
  393. if (!edge) {
  394. edge = symbolEl.__edge = new graphic.BezierCurve({
  395. shape: getEdgeShape(layout, orient, curvature, sourceOldLayout, sourceOldLayout)
  396. });
  397. }
  398. graphic.updateProps(edge, {
  399. shape: getEdgeShape(layout, orient, curvature, sourceLayout, targetLayout)
  400. }, seriesModel);
  401. }
  402. } else if (edgeShape === 'polyline') {
  403. if (layout === 'orthogonal') {
  404. if (node !== virtualRoot && node.children && node.children.length !== 0 && node.isExpand === true) {
  405. var children = node.children;
  406. var childPoints = [];
  407. for (var i = 0; i < children.length; i++) {
  408. var childLayout = children[i].getLayout();
  409. childPoints.push([childLayout.x, childLayout.y]);
  410. }
  411. if (!edge) {
  412. edge = symbolEl.__edge = new TreePath({
  413. shape: {
  414. parentPoint: [targetLayout.x, targetLayout.y],
  415. childPoints: [[targetLayout.x, targetLayout.y]],
  416. orient: orient,
  417. forkPosition: edgeForkPosition
  418. }
  419. });
  420. }
  421. graphic.updateProps(edge, {
  422. shape: {
  423. parentPoint: [targetLayout.x, targetLayout.y],
  424. childPoints: childPoints
  425. }
  426. }, seriesModel);
  427. }
  428. } else {
  429. if (process.env.NODE_ENV !== 'production') {
  430. throw new Error('The polyline edgeShape can only be used in orthogonal layout');
  431. }
  432. }
  433. }
  434. // show all edge when edgeShape is 'curve', filter node `isExpand` is false when edgeShape is 'polyline'
  435. if (edge && !(edgeShape === 'polyline' && !node.isExpand)) {
  436. edge.useStyle(zrUtil.defaults({
  437. strokeNoScale: true,
  438. fill: null
  439. }, lineStyle));
  440. setStatesStylesFromModel(edge, itemModel, 'lineStyle');
  441. setDefaultStateProxy(edge);
  442. group.add(edge);
  443. }
  444. }
  445. function removeNodeEdge(node, data, group, seriesModel, removeAnimationOpt) {
  446. var virtualRoot = data.tree.root;
  447. var _a = getSourceNode(virtualRoot, node),
  448. source = _a.source,
  449. sourceLayout = _a.sourceLayout;
  450. var symbolEl = data.getItemGraphicEl(node.dataIndex);
  451. if (!symbolEl) {
  452. return;
  453. }
  454. var sourceSymbolEl = data.getItemGraphicEl(source.dataIndex);
  455. var sourceEdge = sourceSymbolEl.__edge;
  456. // 1. when expand the sub tree, delete the children node should delete the edge of
  457. // the source at the same time. because the polyline edge shape is only owned by the source.
  458. // 2.when the node is the only children of the source, delete the node should delete the edge of
  459. // the source at the same time. the same reason as above.
  460. var edge = symbolEl.__edge || (source.isExpand === false || source.children.length === 1 ? sourceEdge : undefined);
  461. var edgeShape = seriesModel.get('edgeShape');
  462. var layoutOpt = seriesModel.get('layout');
  463. var orient = seriesModel.get('orient');
  464. var curvature = seriesModel.get(['lineStyle', 'curveness']);
  465. if (edge) {
  466. if (edgeShape === 'curve') {
  467. graphic.removeElement(edge, {
  468. shape: getEdgeShape(layoutOpt, orient, curvature, sourceLayout, sourceLayout),
  469. style: {
  470. opacity: 0
  471. }
  472. }, seriesModel, {
  473. cb: function () {
  474. group.remove(edge);
  475. },
  476. removeOpt: removeAnimationOpt
  477. });
  478. } else if (edgeShape === 'polyline' && seriesModel.get('layout') === 'orthogonal') {
  479. graphic.removeElement(edge, {
  480. shape: {
  481. parentPoint: [sourceLayout.x, sourceLayout.y],
  482. childPoints: [[sourceLayout.x, sourceLayout.y]]
  483. },
  484. style: {
  485. opacity: 0
  486. }
  487. }, seriesModel, {
  488. cb: function () {
  489. group.remove(edge);
  490. },
  491. removeOpt: removeAnimationOpt
  492. });
  493. }
  494. }
  495. }
  496. function getSourceNode(virtualRoot, node) {
  497. var source = node.parentNode === virtualRoot ? node : node.parentNode || node;
  498. var sourceLayout;
  499. while (sourceLayout = source.getLayout(), sourceLayout == null) {
  500. source = source.parentNode === virtualRoot ? source : source.parentNode || source;
  501. }
  502. return {
  503. source: source,
  504. sourceLayout: sourceLayout
  505. };
  506. }
  507. function removeNode(data, dataIndex, symbolEl, group, seriesModel) {
  508. var node = data.tree.getNodeByDataIndex(dataIndex);
  509. var virtualRoot = data.tree.root;
  510. var sourceLayout = getSourceNode(virtualRoot, node).sourceLayout;
  511. // Use same duration and easing with update to have more consistent animation.
  512. var removeAnimationOpt = {
  513. duration: seriesModel.get('animationDurationUpdate'),
  514. easing: seriesModel.get('animationEasingUpdate')
  515. };
  516. graphic.removeElement(symbolEl, {
  517. x: sourceLayout.x + 1,
  518. y: sourceLayout.y + 1
  519. }, seriesModel, {
  520. cb: function () {
  521. group.remove(symbolEl);
  522. data.setItemGraphicEl(dataIndex, null);
  523. },
  524. removeOpt: removeAnimationOpt
  525. });
  526. symbolEl.fadeOut(null, data.hostModel, {
  527. fadeLabel: true,
  528. animation: removeAnimationOpt
  529. });
  530. // remove edge as parent node
  531. node.children.forEach(function (childNode) {
  532. removeNodeEdge(childNode, data, group, seriesModel, removeAnimationOpt);
  533. });
  534. // remove edge as child node
  535. removeNodeEdge(node, data, group, seriesModel, removeAnimationOpt);
  536. }
  537. function getEdgeShape(layoutOpt, orient, curvature, sourceLayout, targetLayout) {
  538. var cpx1;
  539. var cpy1;
  540. var cpx2;
  541. var cpy2;
  542. var x1;
  543. var x2;
  544. var y1;
  545. var y2;
  546. if (layoutOpt === 'radial') {
  547. x1 = sourceLayout.rawX;
  548. y1 = sourceLayout.rawY;
  549. x2 = targetLayout.rawX;
  550. y2 = targetLayout.rawY;
  551. var radialCoor1 = radialCoordinate(x1, y1);
  552. var radialCoor2 = radialCoordinate(x1, y1 + (y2 - y1) * curvature);
  553. var radialCoor3 = radialCoordinate(x2, y2 + (y1 - y2) * curvature);
  554. var radialCoor4 = radialCoordinate(x2, y2);
  555. return {
  556. x1: radialCoor1.x || 0,
  557. y1: radialCoor1.y || 0,
  558. x2: radialCoor4.x || 0,
  559. y2: radialCoor4.y || 0,
  560. cpx1: radialCoor2.x || 0,
  561. cpy1: radialCoor2.y || 0,
  562. cpx2: radialCoor3.x || 0,
  563. cpy2: radialCoor3.y || 0
  564. };
  565. } else {
  566. x1 = sourceLayout.x;
  567. y1 = sourceLayout.y;
  568. x2 = targetLayout.x;
  569. y2 = targetLayout.y;
  570. if (orient === 'LR' || orient === 'RL') {
  571. cpx1 = x1 + (x2 - x1) * curvature;
  572. cpy1 = y1;
  573. cpx2 = x2 + (x1 - x2) * curvature;
  574. cpy2 = y2;
  575. }
  576. if (orient === 'TB' || orient === 'BT') {
  577. cpx1 = x1;
  578. cpy1 = y1 + (y2 - y1) * curvature;
  579. cpx2 = x2;
  580. cpy2 = y2 + (y1 - y2) * curvature;
  581. }
  582. }
  583. return {
  584. x1: x1,
  585. y1: y1,
  586. x2: x2,
  587. y2: y2,
  588. cpx1: cpx1,
  589. cpy1: cpy1,
  590. cpx2: cpx2,
  591. cpy2: cpy2
  592. };
  593. }
  594. export default TreeView;