ff20dc1739a09ee850c8d0124dec6ab797e38e2fb04170f7b15e016465f0070c20c2f702424c72ad5cada2e7ef3c48d1a6f75c2a2458a6bfc7ee33b3f63179 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports["default"] = void 0;
  7. var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
  8. var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
  9. var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
  10. var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
  11. var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
  12. var _style = _interopRequireDefault(require("./style.class"));
  13. var _transition = _interopRequireDefault(require("@jiaminghi/transition"));
  14. var _util = require("../plugin/util");
  15. /**
  16. * @description Class Graph
  17. * @param {Object} graph Graph default configuration
  18. * @param {Object} config Graph config
  19. * @return {Graph} Instance of Graph
  20. */
  21. var Graph = function Graph(graph, config) {
  22. (0, _classCallCheck2["default"])(this, Graph);
  23. config = (0, _util.deepClone)(config, true);
  24. var defaultConfig = {
  25. /**
  26. * @description Weather to render graph
  27. * @type {Boolean}
  28. * @default visible = true
  29. */
  30. visible: true,
  31. /**
  32. * @description Whether to enable drag
  33. * @type {Boolean}
  34. * @default drag = false
  35. */
  36. drag: false,
  37. /**
  38. * @description Whether to enable hover
  39. * @type {Boolean}
  40. * @default hover = false
  41. */
  42. hover: false,
  43. /**
  44. * @description Graph rendering index
  45. * Give priority to index high graph in rendering
  46. * @type {Number}
  47. * @example index = 1
  48. */
  49. index: 1,
  50. /**
  51. * @description Animation delay time(ms)
  52. * @type {Number}
  53. * @default animationDelay = 0
  54. */
  55. animationDelay: 0,
  56. /**
  57. * @description Number of animation frames
  58. * @type {Number}
  59. * @default animationFrame = 30
  60. */
  61. animationFrame: 30,
  62. /**
  63. * @description Animation dynamic curve (Supported by transition)
  64. * @type {String}
  65. * @default animationCurve = 'linear'
  66. * @link https://github.com/jiaming743/Transition
  67. */
  68. animationCurve: 'linear',
  69. /**
  70. * @description Weather to pause graph animation
  71. * @type {Boolean}
  72. * @default animationPause = false
  73. */
  74. animationPause: false,
  75. /**
  76. * @description Rectangular hover detection zone
  77. * Use this method for hover detection first
  78. * @type {Null|Array}
  79. * @default hoverRect = null
  80. * @example hoverRect = [0, 0, 100, 100] // [Rect start x, y, Rect width, height]
  81. */
  82. hoverRect: null,
  83. /**
  84. * @description Mouse enter event handler
  85. * @type {Function|Null}
  86. * @default mouseEnter = null
  87. */
  88. mouseEnter: null,
  89. /**
  90. * @description Mouse outer event handler
  91. * @type {Function|Null}
  92. * @default mouseOuter = null
  93. */
  94. mouseOuter: null,
  95. /**
  96. * @description Mouse click event handler
  97. * @type {Function|Null}
  98. * @default click = null
  99. */
  100. click: null
  101. };
  102. var configAbleNot = {
  103. status: 'static',
  104. animationRoot: [],
  105. animationKeys: [],
  106. animationFrameState: [],
  107. cache: {}
  108. };
  109. if (!config.shape) config.shape = {};
  110. if (!config.style) config.style = {};
  111. var shape = Object.assign({}, graph.shape, config.shape);
  112. Object.assign(defaultConfig, config, configAbleNot);
  113. Object.assign(this, graph, defaultConfig);
  114. this.shape = shape;
  115. this.style = new _style["default"](config.style);
  116. this.addedProcessor();
  117. };
  118. /**
  119. * @description Processor of added
  120. * @return {Undefined} Void
  121. */
  122. exports["default"] = Graph;
  123. Graph.prototype.addedProcessor = function () {
  124. if (typeof this.setGraphCenter === 'function') this.setGraphCenter(null, this); // The life cycle 'added"
  125. if (typeof this.added === 'function') this.added(this);
  126. };
  127. /**
  128. * @description Processor of draw
  129. * @param {CRender} render Instance of CRender
  130. * @param {Graph} graph Instance of Graph
  131. * @return {Undefined} Void
  132. */
  133. Graph.prototype.drawProcessor = function (render, graph) {
  134. var ctx = render.ctx;
  135. graph.style.initStyle(ctx);
  136. if (typeof this.beforeDraw === 'function') this.beforeDraw(this, render);
  137. graph.draw(render, graph);
  138. if (typeof this.drawed === 'function') this.drawed(this, render);
  139. graph.style.restoreTransform(ctx);
  140. };
  141. /**
  142. * @description Processor of hover check
  143. * @param {Array} position Mouse Position
  144. * @param {Graph} graph Instance of Graph
  145. * @return {Boolean} Result of hover check
  146. */
  147. Graph.prototype.hoverCheckProcessor = function (position, _ref) {
  148. var hoverRect = _ref.hoverRect,
  149. style = _ref.style,
  150. hoverCheck = _ref.hoverCheck;
  151. var graphCenter = style.graphCenter,
  152. rotate = style.rotate,
  153. scale = style.scale,
  154. translate = style.translate;
  155. if (graphCenter) {
  156. if (rotate) position = (0, _util.getRotatePointPos)(-rotate, position, graphCenter);
  157. if (scale) position = (0, _util.getScalePointPos)(scale.map(function (s) {
  158. return 1 / s;
  159. }), position, graphCenter);
  160. if (translate) position = (0, _util.getTranslatePointPos)(translate.map(function (v) {
  161. return v * -1;
  162. }), position);
  163. }
  164. if (hoverRect) return _util.checkPointIsInRect.apply(void 0, [position].concat((0, _toConsumableArray2["default"])(hoverRect)));
  165. return hoverCheck(position, this);
  166. };
  167. /**
  168. * @description Processor of move
  169. * @param {Event} e Mouse movement event
  170. * @return {Undefined} Void
  171. */
  172. Graph.prototype.moveProcessor = function (e) {
  173. this.move(e, this);
  174. if (typeof this.beforeMove === 'function') this.beforeMove(e, this);
  175. if (typeof this.setGraphCenter === 'function') this.setGraphCenter(e, this);
  176. if (typeof this.moved === 'function') this.moved(e, this);
  177. };
  178. /**
  179. * @description Update graph state
  180. * @param {String} attrName Updated attribute name
  181. * @param {Any} change Updated value
  182. * @return {Undefined} Void
  183. */
  184. Graph.prototype.attr = function (attrName) {
  185. var change = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
  186. if (!attrName || change === undefined) return false;
  187. var isObject = (0, _typeof2["default"])(this[attrName]) === 'object';
  188. if (isObject) change = (0, _util.deepClone)(change, true);
  189. var render = this.render;
  190. if (attrName === 'style') {
  191. this.style.update(change);
  192. } else if (isObject) {
  193. Object.assign(this[attrName], change);
  194. } else {
  195. this[attrName] = change;
  196. }
  197. if (attrName === 'index') render.sortGraphsByIndex();
  198. render.drawAllGraph();
  199. };
  200. /**
  201. * @description Update graphics state (with animation)
  202. * Only shape and style attributes are supported
  203. * @param {String} attrName Updated attribute name
  204. * @param {Any} change Updated value
  205. * @param {Boolean} wait Whether to store the animation waiting
  206. * for the next animation request
  207. * @return {Promise} Animation Promise
  208. */
  209. Graph.prototype.animation =
  210. /*#__PURE__*/
  211. function () {
  212. var _ref2 = (0, _asyncToGenerator2["default"])(
  213. /*#__PURE__*/
  214. _regenerator["default"].mark(function _callee2(attrName, change) {
  215. var wait,
  216. changeRoot,
  217. changeKeys,
  218. beforeState,
  219. animationFrame,
  220. animationCurve,
  221. animationDelay,
  222. animationFrameState,
  223. render,
  224. _args2 = arguments;
  225. return _regenerator["default"].wrap(function _callee2$(_context2) {
  226. while (1) {
  227. switch (_context2.prev = _context2.next) {
  228. case 0:
  229. wait = _args2.length > 2 && _args2[2] !== undefined ? _args2[2] : false;
  230. if (!(attrName !== 'shape' && attrName !== 'style')) {
  231. _context2.next = 4;
  232. break;
  233. }
  234. console.error('Only supported shape and style animation!');
  235. return _context2.abrupt("return");
  236. case 4:
  237. change = (0, _util.deepClone)(change, true);
  238. if (attrName === 'style') this.style.colorProcessor(change);
  239. changeRoot = this[attrName];
  240. changeKeys = Object.keys(change);
  241. beforeState = {};
  242. changeKeys.forEach(function (key) {
  243. return beforeState[key] = changeRoot[key];
  244. });
  245. animationFrame = this.animationFrame, animationCurve = this.animationCurve, animationDelay = this.animationDelay;
  246. animationFrameState = (0, _transition["default"])(animationCurve, beforeState, change, animationFrame, true);
  247. this.animationRoot.push(changeRoot);
  248. this.animationKeys.push(changeKeys);
  249. this.animationFrameState.push(animationFrameState);
  250. if (!wait) {
  251. _context2.next = 17;
  252. break;
  253. }
  254. return _context2.abrupt("return");
  255. case 17:
  256. if (!(animationDelay > 0)) {
  257. _context2.next = 20;
  258. break;
  259. }
  260. _context2.next = 20;
  261. return delay(animationDelay);
  262. case 20:
  263. render = this.render;
  264. return _context2.abrupt("return", new Promise(
  265. /*#__PURE__*/
  266. function () {
  267. var _ref3 = (0, _asyncToGenerator2["default"])(
  268. /*#__PURE__*/
  269. _regenerator["default"].mark(function _callee(resolve) {
  270. return _regenerator["default"].wrap(function _callee$(_context) {
  271. while (1) {
  272. switch (_context.prev = _context.next) {
  273. case 0:
  274. _context.next = 2;
  275. return render.launchAnimation();
  276. case 2:
  277. resolve();
  278. case 3:
  279. case "end":
  280. return _context.stop();
  281. }
  282. }
  283. }, _callee);
  284. }));
  285. return function (_x3) {
  286. return _ref3.apply(this, arguments);
  287. };
  288. }()));
  289. case 22:
  290. case "end":
  291. return _context2.stop();
  292. }
  293. }
  294. }, _callee2, this);
  295. }));
  296. return function (_x, _x2) {
  297. return _ref2.apply(this, arguments);
  298. };
  299. }();
  300. /**
  301. * @description Extract the next frame of data from the animation queue
  302. * and update the graph state
  303. * @return {Undefined} Void
  304. */
  305. Graph.prototype.turnNextAnimationFrame = function (timeStamp) {
  306. var animationDelay = this.animationDelay,
  307. animationRoot = this.animationRoot,
  308. animationKeys = this.animationKeys,
  309. animationFrameState = this.animationFrameState,
  310. animationPause = this.animationPause;
  311. if (animationPause) return;
  312. if (Date.now() - timeStamp < animationDelay) return;
  313. animationRoot.forEach(function (root, i) {
  314. animationKeys[i].forEach(function (key) {
  315. root[key] = animationFrameState[i][0][key];
  316. });
  317. });
  318. animationFrameState.forEach(function (stateItem, i) {
  319. stateItem.shift();
  320. var noFrame = stateItem.length === 0;
  321. if (noFrame) animationRoot[i] = null;
  322. if (noFrame) animationKeys[i] = null;
  323. });
  324. this.animationFrameState = animationFrameState.filter(function (state) {
  325. return state.length;
  326. });
  327. this.animationRoot = animationRoot.filter(function (root) {
  328. return root;
  329. });
  330. this.animationKeys = animationKeys.filter(function (keys) {
  331. return keys;
  332. });
  333. };
  334. /**
  335. * @description Skip to the last frame of animation
  336. * @return {Undefined} Void
  337. */
  338. Graph.prototype.animationEnd = function () {
  339. var animationFrameState = this.animationFrameState,
  340. animationKeys = this.animationKeys,
  341. animationRoot = this.animationRoot,
  342. render = this.render;
  343. animationRoot.forEach(function (root, i) {
  344. var currentKeys = animationKeys[i];
  345. var lastState = animationFrameState[i].pop();
  346. currentKeys.forEach(function (key) {
  347. return root[key] = lastState[key];
  348. });
  349. });
  350. this.animationFrameState = [];
  351. this.animationKeys = [];
  352. this.animationRoot = [];
  353. return render.drawAllGraph();
  354. };
  355. /**
  356. * @description Pause animation behavior
  357. * @return {Undefined} Void
  358. */
  359. Graph.prototype.pauseAnimation = function () {
  360. this.attr('animationPause', true);
  361. };
  362. /**
  363. * @description Try animation behavior
  364. * @return {Undefined} Void
  365. */
  366. Graph.prototype.playAnimation = function () {
  367. var render = this.render;
  368. this.attr('animationPause', false);
  369. return new Promise(
  370. /*#__PURE__*/
  371. function () {
  372. var _ref4 = (0, _asyncToGenerator2["default"])(
  373. /*#__PURE__*/
  374. _regenerator["default"].mark(function _callee3(resolve) {
  375. return _regenerator["default"].wrap(function _callee3$(_context3) {
  376. while (1) {
  377. switch (_context3.prev = _context3.next) {
  378. case 0:
  379. _context3.next = 2;
  380. return render.launchAnimation();
  381. case 2:
  382. resolve();
  383. case 3:
  384. case "end":
  385. return _context3.stop();
  386. }
  387. }
  388. }, _callee3);
  389. }));
  390. return function (_x4) {
  391. return _ref4.apply(this, arguments);
  392. };
  393. }());
  394. };
  395. /**
  396. * @description Processor of delete
  397. * @param {CRender} render Instance of CRender
  398. * @return {Undefined} Void
  399. */
  400. Graph.prototype.delProcessor = function (render) {
  401. var _this = this;
  402. var graphs = render.graphs;
  403. var index = graphs.findIndex(function (graph) {
  404. return graph === _this;
  405. });
  406. if (index === -1) return;
  407. if (typeof this.beforeDelete === 'function') this.beforeDelete(this);
  408. graphs.splice(index, 1, null);
  409. if (typeof this.deleted === 'function') this.deleted(this);
  410. };
  411. /**
  412. * @description Return a timed release Promise
  413. * @param {Number} time Release time
  414. * @return {Promise} A timed release Promise
  415. */
  416. function delay(time) {
  417. return new Promise(function (resolve) {
  418. setTimeout(resolve, time);
  419. });
  420. }