Pathfinder.js 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817
  1. /* *
  2. *
  3. * (c) 2016 Highsoft AS
  4. * Authors: Øystein Moseng, Lars A. V. Cabrera
  5. *
  6. * License: www.highcharts.com/license
  7. *
  8. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  9. *
  10. * */
  11. 'use strict';
  12. import Connection from './Connection.js';
  13. import Chart from '../Core/Chart/Chart.js';
  14. import H from '../Core/Globals.js';
  15. /**
  16. * The default pathfinder algorithm to use for a chart. It is possible to define
  17. * your own algorithms by adding them to the
  18. * `Highcharts.Pathfinder.prototype.algorithms`
  19. * object before the chart has been created.
  20. *
  21. * The default algorithms are as follows:
  22. *
  23. * `straight`: Draws a straight line between the connecting
  24. * points. Does not avoid other points when drawing.
  25. *
  26. * `simpleConnect`: Finds a path between the points using right angles
  27. * only. Takes only starting/ending points into
  28. * account, and will not avoid other points.
  29. *
  30. * `fastAvoid`: Finds a path between the points using right angles
  31. * only. Will attempt to avoid other points, but its
  32. * focus is performance over accuracy. Works well with
  33. * less dense datasets.
  34. *
  35. * @typedef {"fastAvoid"|"simpleConnect"|"straight"|string} Highcharts.PathfinderTypeValue
  36. */
  37. ''; // detach doclets above
  38. import D from '../Core/DefaultOptions.js';
  39. var defaultOptions = D.defaultOptions;
  40. import Point from '../Core/Series/Point.js';
  41. import U from '../Core/Utilities.js';
  42. var addEvent = U.addEvent, defined = U.defined, error = U.error, extend = U.extend, merge = U.merge, objectEach = U.objectEach, pick = U.pick, splat = U.splat;
  43. import pathfinderAlgorithms from './PathfinderAlgorithms.js';
  44. import '../Extensions/ArrowSymbols.js';
  45. var deg2rad = H.deg2rad, max = Math.max, min = Math.min;
  46. /*
  47. @todo:
  48. - Document how to write your own algorithms
  49. - Consider adding a Point.pathTo method that wraps creating a connection
  50. and rendering it
  51. */
  52. // Set default Pathfinder options
  53. extend(defaultOptions, {
  54. /**
  55. * The Pathfinder module allows you to define connections between any two
  56. * points, represented as lines - optionally with markers for the start
  57. * and/or end points. Multiple algorithms are available for calculating how
  58. * the connecting lines are drawn.
  59. *
  60. * Connector functionality requires Highcharts Gantt to be loaded. In Gantt
  61. * charts, the connectors are used to draw dependencies between tasks.
  62. *
  63. * @see [dependency](series.gantt.data.dependency)
  64. *
  65. * @sample gantt/pathfinder/demo
  66. * Pathfinder connections
  67. *
  68. * @declare Highcharts.ConnectorsOptions
  69. * @product gantt
  70. * @optionparent connectors
  71. */
  72. connectors: {
  73. /**
  74. * Enable connectors for this chart. Requires Highcharts Gantt.
  75. *
  76. * @type {boolean}
  77. * @default true
  78. * @since 6.2.0
  79. * @apioption connectors.enabled
  80. */
  81. /**
  82. * Set the default dash style for this chart's connecting lines.
  83. *
  84. * @type {string}
  85. * @default solid
  86. * @since 6.2.0
  87. * @apioption connectors.dashStyle
  88. */
  89. /**
  90. * Set the default color for this chart's Pathfinder connecting lines.
  91. * Defaults to the color of the point being connected.
  92. *
  93. * @type {Highcharts.ColorString}
  94. * @since 6.2.0
  95. * @apioption connectors.lineColor
  96. */
  97. /**
  98. * Set the default pathfinder margin to use, in pixels. Some Pathfinder
  99. * algorithms attempt to avoid obstacles, such as other points in the
  100. * chart. These algorithms use this margin to determine how close lines
  101. * can be to an obstacle. The default is to compute this automatically
  102. * from the size of the obstacles in the chart.
  103. *
  104. * To draw connecting lines close to existing points, set this to a low
  105. * number. For more space around existing points, set this number
  106. * higher.
  107. *
  108. * @sample gantt/pathfinder/algorithm-margin
  109. * Small algorithmMargin
  110. *
  111. * @type {number}
  112. * @since 6.2.0
  113. * @apioption connectors.algorithmMargin
  114. */
  115. /**
  116. * Set the default pathfinder algorithm to use for this chart. It is
  117. * possible to define your own algorithms by adding them to the
  118. * Highcharts.Pathfinder.prototype.algorithms object before the chart
  119. * has been created.
  120. *
  121. * The default algorithms are as follows:
  122. *
  123. * `straight`: Draws a straight line between the connecting
  124. * points. Does not avoid other points when drawing.
  125. *
  126. * `simpleConnect`: Finds a path between the points using right angles
  127. * only. Takes only starting/ending points into
  128. * account, and will not avoid other points.
  129. *
  130. * `fastAvoid`: Finds a path between the points using right angles
  131. * only. Will attempt to avoid other points, but its
  132. * focus is performance over accuracy. Works well with
  133. * less dense datasets.
  134. *
  135. * Default value: `straight` is used as default for most series types,
  136. * while `simpleConnect` is used as default for Gantt series, to show
  137. * dependencies between points.
  138. *
  139. * @sample gantt/pathfinder/demo
  140. * Different types used
  141. *
  142. * @type {Highcharts.PathfinderTypeValue}
  143. * @default undefined
  144. * @since 6.2.0
  145. */
  146. type: 'straight',
  147. /**
  148. * Set the default pixel width for this chart's Pathfinder connecting
  149. * lines.
  150. *
  151. * @since 6.2.0
  152. */
  153. lineWidth: 1,
  154. /**
  155. * Marker options for this chart's Pathfinder connectors. Note that
  156. * this option is overridden by the `startMarker` and `endMarker`
  157. * options.
  158. *
  159. * @declare Highcharts.ConnectorsMarkerOptions
  160. * @since 6.2.0
  161. */
  162. marker: {
  163. /**
  164. * Set the radius of the connector markers. The default is
  165. * automatically computed based on the algorithmMargin setting.
  166. *
  167. * Setting marker.width and marker.height will override this
  168. * setting.
  169. *
  170. * @type {number}
  171. * @since 6.2.0
  172. * @apioption connectors.marker.radius
  173. */
  174. /**
  175. * Set the width of the connector markers. If not supplied, this
  176. * is inferred from the marker radius.
  177. *
  178. * @type {number}
  179. * @since 6.2.0
  180. * @apioption connectors.marker.width
  181. */
  182. /**
  183. * Set the height of the connector markers. If not supplied, this
  184. * is inferred from the marker radius.
  185. *
  186. * @type {number}
  187. * @since 6.2.0
  188. * @apioption connectors.marker.height
  189. */
  190. /**
  191. * Set the color of the connector markers. By default this is the
  192. * same as the connector color.
  193. *
  194. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  195. * @since 6.2.0
  196. * @apioption connectors.marker.color
  197. */
  198. /**
  199. * Set the line/border color of the connector markers. By default
  200. * this is the same as the marker color.
  201. *
  202. * @type {Highcharts.ColorString}
  203. * @since 6.2.0
  204. * @apioption connectors.marker.lineColor
  205. */
  206. /**
  207. * Enable markers for the connectors.
  208. */
  209. enabled: false,
  210. /**
  211. * Horizontal alignment of the markers relative to the points.
  212. *
  213. * @type {Highcharts.AlignValue}
  214. */
  215. align: 'center',
  216. /**
  217. * Vertical alignment of the markers relative to the points.
  218. *
  219. * @type {Highcharts.VerticalAlignValue}
  220. */
  221. verticalAlign: 'middle',
  222. /**
  223. * Whether or not to draw the markers inside the points.
  224. */
  225. inside: false,
  226. /**
  227. * Set the line/border width of the pathfinder markers.
  228. */
  229. lineWidth: 1
  230. },
  231. /**
  232. * Marker options specific to the start markers for this chart's
  233. * Pathfinder connectors. Overrides the generic marker options.
  234. *
  235. * @declare Highcharts.ConnectorsStartMarkerOptions
  236. * @extends connectors.marker
  237. * @since 6.2.0
  238. */
  239. startMarker: {
  240. /**
  241. * Set the symbol of the connector start markers.
  242. */
  243. symbol: 'diamond'
  244. },
  245. /**
  246. * Marker options specific to the end markers for this chart's
  247. * Pathfinder connectors. Overrides the generic marker options.
  248. *
  249. * @declare Highcharts.ConnectorsEndMarkerOptions
  250. * @extends connectors.marker
  251. * @since 6.2.0
  252. */
  253. endMarker: {
  254. /**
  255. * Set the symbol of the connector end markers.
  256. */
  257. symbol: 'arrow-filled'
  258. }
  259. }
  260. });
  261. /**
  262. * Override Pathfinder connector options for a series. Requires Highcharts Gantt
  263. * to be loaded.
  264. *
  265. * @declare Highcharts.SeriesConnectorsOptionsObject
  266. * @extends connectors
  267. * @since 6.2.0
  268. * @excluding enabled, algorithmMargin
  269. * @product gantt
  270. * @apioption plotOptions.series.connectors
  271. */
  272. /**
  273. * Connect to a point. This option can be either a string, referring to the ID
  274. * of another point, or an object, or an array of either. If the option is an
  275. * array, each element defines a connection.
  276. *
  277. * @sample gantt/pathfinder/demo
  278. * Different connection types
  279. *
  280. * @declare Highcharts.XrangePointConnectorsOptionsObject
  281. * @type {string|Array<string|*>|*}
  282. * @extends plotOptions.series.connectors
  283. * @since 6.2.0
  284. * @excluding enabled
  285. * @product gantt
  286. * @requires highcharts-gantt
  287. * @apioption series.xrange.data.connect
  288. */
  289. /**
  290. * The ID of the point to connect to.
  291. *
  292. * @type {string}
  293. * @since 6.2.0
  294. * @product gantt
  295. * @apioption series.xrange.data.connect.to
  296. */
  297. /**
  298. * Get point bounding box using plotX/plotY and shapeArgs. If using
  299. * graphic.getBBox() directly, the bbox will be affected by animation.
  300. *
  301. * @private
  302. * @function
  303. *
  304. * @param {Highcharts.Point} point
  305. * The point to get BB of.
  306. *
  307. * @return {Highcharts.Dictionary<number>|null}
  308. * Result xMax, xMin, yMax, yMin.
  309. */
  310. function getPointBB(point) {
  311. var shapeArgs = point.shapeArgs, bb;
  312. // Prefer using shapeArgs (columns)
  313. if (shapeArgs) {
  314. return {
  315. xMin: shapeArgs.x || 0,
  316. xMax: (shapeArgs.x || 0) + (shapeArgs.width || 0),
  317. yMin: shapeArgs.y || 0,
  318. yMax: (shapeArgs.y || 0) + (shapeArgs.height || 0)
  319. };
  320. }
  321. // Otherwise use plotX/plotY and bb
  322. bb = point.graphic && point.graphic.getBBox();
  323. return bb ? {
  324. xMin: point.plotX - bb.width / 2,
  325. xMax: point.plotX + bb.width / 2,
  326. yMin: point.plotY - bb.height / 2,
  327. yMax: point.plotY + bb.height / 2
  328. } : null;
  329. }
  330. /**
  331. * Calculate margin to place around obstacles for the pathfinder in pixels.
  332. * Returns a minimum of 1 pixel margin.
  333. *
  334. * @private
  335. * @function
  336. *
  337. * @param {Array<object>} obstacles
  338. * Obstacles to calculate margin from.
  339. *
  340. * @return {number}
  341. * The calculated margin in pixels. At least 1.
  342. */
  343. function calculateObstacleMargin(obstacles) {
  344. var len = obstacles.length, i = 0, j, obstacleDistance, distances = [],
  345. // Compute smallest distance between two rectangles
  346. distance = function (a, b, bbMargin) {
  347. // Count the distance even if we are slightly off
  348. var margin = pick(bbMargin, 10), yOverlap = a.yMax + margin > b.yMin - margin &&
  349. a.yMin - margin < b.yMax + margin, xOverlap = a.xMax + margin > b.xMin - margin &&
  350. a.xMin - margin < b.xMax + margin, xDistance = yOverlap ? (a.xMin > b.xMax ? a.xMin - b.xMax : b.xMin - a.xMax) : Infinity, yDistance = xOverlap ? (a.yMin > b.yMax ? a.yMin - b.yMax : b.yMin - a.yMax) : Infinity;
  351. // If the rectangles collide, try recomputing with smaller margin.
  352. // If they collide anyway, discard the obstacle.
  353. if (xOverlap && yOverlap) {
  354. return (margin ?
  355. distance(a, b, Math.floor(margin / 2)) :
  356. Infinity);
  357. }
  358. return min(xDistance, yDistance);
  359. };
  360. // Go over all obstacles and compare them to the others.
  361. for (; i < len; ++i) {
  362. // Compare to all obstacles ahead. We will already have compared this
  363. // obstacle to the ones before.
  364. for (j = i + 1; j < len; ++j) {
  365. obstacleDistance = distance(obstacles[i], obstacles[j]);
  366. // TODO: Magic number 80
  367. if (obstacleDistance < 80) { // Ignore large distances
  368. distances.push(obstacleDistance);
  369. }
  370. }
  371. }
  372. // Ensure we always have at least one value, even in very spaceous charts
  373. distances.push(80);
  374. return max(Math.floor(distances.sort(function (a, b) {
  375. return (a - b);
  376. })[
  377. // Discard first 10% of the relevant distances, and then grab
  378. // the smallest one.
  379. Math.floor(distances.length / 10)] / 2 - 1 // Divide the distance by 2 and subtract 1.
  380. ), 1 // 1 is the minimum margin
  381. );
  382. }
  383. /* eslint-disable no-invalid-this, valid-jsdoc */
  384. /**
  385. * The Pathfinder class.
  386. *
  387. * @private
  388. * @class
  389. * @name Highcharts.Pathfinder
  390. *
  391. * @param {Highcharts.Chart} chart
  392. * The chart to operate on.
  393. */
  394. var Pathfinder = /** @class */ (function () {
  395. function Pathfinder(chart) {
  396. /* *
  397. *
  398. * Properties
  399. *
  400. * */
  401. this.chart = void 0;
  402. this.chartObstacles = void 0;
  403. this.chartObstacleMetrics = void 0;
  404. this.connections = void 0;
  405. this.group = void 0;
  406. this.lineObstacles = void 0;
  407. this.init(chart);
  408. }
  409. /**
  410. * @name Highcharts.Pathfinder#algorithms
  411. * @type {Highcharts.Dictionary<Function>}
  412. */
  413. /**
  414. * Initialize the Pathfinder object.
  415. *
  416. * @function Highcharts.Pathfinder#init
  417. *
  418. * @param {Highcharts.Chart} chart
  419. * The chart context.
  420. */
  421. Pathfinder.prototype.init = function (chart) {
  422. // Initialize pathfinder with chart context
  423. this.chart = chart;
  424. // Init connection reference list
  425. this.connections = [];
  426. // Recalculate paths/obstacles on chart redraw
  427. addEvent(chart, 'redraw', function () {
  428. this.pathfinder.update();
  429. });
  430. };
  431. /**
  432. * Update Pathfinder connections from scratch.
  433. *
  434. * @function Highcharts.Pathfinder#update
  435. *
  436. * @param {boolean} [deferRender]
  437. * Whether or not to defer rendering of connections until
  438. * series.afterAnimate event has fired. Used on first render.
  439. */
  440. Pathfinder.prototype.update = function (deferRender) {
  441. var chart = this.chart, pathfinder = this, oldConnections = pathfinder.connections;
  442. // Rebuild pathfinder connections from options
  443. pathfinder.connections = [];
  444. chart.series.forEach(function (series) {
  445. if (series.visible && !series.options.isInternal) {
  446. series.points.forEach(function (point) {
  447. var ganttPointOptions = point.options;
  448. // For Gantt series the connect could be
  449. // defined as a dependency
  450. if (ganttPointOptions && ganttPointOptions.dependency) {
  451. ganttPointOptions.connect = ganttPointOptions.dependency;
  452. }
  453. var to, connects = (point.options &&
  454. point.options.connect &&
  455. splat(point.options.connect));
  456. if (point.visible && point.isInside !== false && connects) {
  457. connects.forEach(function (connect) {
  458. to = chart.get(typeof connect === 'string' ?
  459. connect : connect.to);
  460. if (to instanceof Point &&
  461. to.series.visible &&
  462. to.visible &&
  463. to.isInside !== false) {
  464. // Add new connection
  465. pathfinder.connections.push(new Connection(point, // from
  466. to, typeof connect === 'string' ?
  467. {} :
  468. connect));
  469. }
  470. });
  471. }
  472. });
  473. }
  474. });
  475. // Clear connections that should not be updated, and move old info over
  476. // to new connections.
  477. for (var j = 0, k = void 0, found = void 0, lenOld = oldConnections.length, lenNew = pathfinder.connections.length; j < lenOld; ++j) {
  478. found = false;
  479. for (k = 0; k < lenNew; ++k) {
  480. if (oldConnections[j].fromPoint ===
  481. pathfinder.connections[k].fromPoint &&
  482. oldConnections[j].toPoint ===
  483. pathfinder.connections[k].toPoint) {
  484. pathfinder.connections[k].graphics =
  485. oldConnections[j].graphics;
  486. found = true;
  487. break;
  488. }
  489. }
  490. if (!found) {
  491. oldConnections[j].destroy();
  492. }
  493. }
  494. // Clear obstacles to force recalculation. This must be done on every
  495. // redraw in case positions have changed. Recalculation is handled in
  496. // Connection.getPath on demand.
  497. delete this.chartObstacles;
  498. delete this.lineObstacles;
  499. // Draw the pending connections
  500. pathfinder.renderConnections(deferRender);
  501. };
  502. /**
  503. * Draw the chart's connecting paths.
  504. *
  505. * @function Highcharts.Pathfinder#renderConnections
  506. *
  507. * @param {boolean} [deferRender]
  508. * Whether or not to defer render until series animation is finished.
  509. * Used on first render.
  510. */
  511. Pathfinder.prototype.renderConnections = function (deferRender) {
  512. if (deferRender) {
  513. // Render after series are done animating
  514. this.chart.series.forEach(function (series) {
  515. var render = function () {
  516. // Find pathfinder connections belonging to this series
  517. // that haven't rendered, and render them now.
  518. var pathfinder = series.chart.pathfinder, conns = pathfinder && pathfinder.connections || [];
  519. conns.forEach(function (connection) {
  520. if (connection.fromPoint &&
  521. connection.fromPoint.series === series) {
  522. connection.render();
  523. }
  524. });
  525. if (series.pathfinderRemoveRenderEvent) {
  526. series.pathfinderRemoveRenderEvent();
  527. delete series.pathfinderRemoveRenderEvent;
  528. }
  529. };
  530. if (series.options.animation === false) {
  531. render();
  532. }
  533. else {
  534. series.pathfinderRemoveRenderEvent = addEvent(series, 'afterAnimate', render);
  535. }
  536. });
  537. }
  538. else {
  539. // Go through connections and render them
  540. this.connections.forEach(function (connection) {
  541. connection.render();
  542. });
  543. }
  544. };
  545. /**
  546. * Get obstacles for the points in the chart. Does not include connecting
  547. * lines from Pathfinder. Applies algorithmMargin to the obstacles.
  548. *
  549. * @function Highcharts.Pathfinder#getChartObstacles
  550. *
  551. * @param {object} options
  552. * Options for the calculation. Currenlty only
  553. * options.algorithmMargin.
  554. *
  555. * @return {Array<object>}
  556. * An array of calculated obstacles. Each obstacle is defined as an
  557. * object with xMin, xMax, yMin and yMax properties.
  558. */
  559. Pathfinder.prototype.getChartObstacles = function (options) {
  560. var obstacles = [], series = this.chart.series, margin = pick(options.algorithmMargin, 0), calculatedMargin;
  561. for (var i = 0, sLen = series.length; i < sLen; ++i) {
  562. if (series[i].visible && !series[i].options.isInternal) {
  563. for (var j = 0, pLen = series[i].points.length, bb = void 0, point = void 0; j < pLen; ++j) {
  564. point = series[i].points[j];
  565. if (point.visible) {
  566. bb = getPointBB(point);
  567. if (bb) {
  568. obstacles.push({
  569. xMin: bb.xMin - margin,
  570. xMax: bb.xMax + margin,
  571. yMin: bb.yMin - margin,
  572. yMax: bb.yMax + margin
  573. });
  574. }
  575. }
  576. }
  577. }
  578. }
  579. // Sort obstacles by xMin for optimization
  580. obstacles = obstacles.sort(function (a, b) {
  581. return a.xMin - b.xMin;
  582. });
  583. // Add auto-calculated margin if the option is not defined
  584. if (!defined(options.algorithmMargin)) {
  585. calculatedMargin =
  586. options.algorithmMargin =
  587. calculateObstacleMargin(obstacles);
  588. obstacles.forEach(function (obstacle) {
  589. obstacle.xMin -= calculatedMargin;
  590. obstacle.xMax += calculatedMargin;
  591. obstacle.yMin -= calculatedMargin;
  592. obstacle.yMax += calculatedMargin;
  593. });
  594. }
  595. return obstacles;
  596. };
  597. /**
  598. * Utility function to get metrics for obstacles:
  599. * - Widest obstacle width
  600. * - Tallest obstacle height
  601. *
  602. * @function Highcharts.Pathfinder#getObstacleMetrics
  603. *
  604. * @param {Array<object>} obstacles
  605. * An array of obstacles to inspect.
  606. *
  607. * @return {object}
  608. * The calculated metrics, as an object with maxHeight and maxWidth
  609. * properties.
  610. */
  611. Pathfinder.prototype.getObstacleMetrics = function (obstacles) {
  612. var maxWidth = 0, maxHeight = 0, width, height, i = obstacles.length;
  613. while (i--) {
  614. width = obstacles[i].xMax - obstacles[i].xMin;
  615. height = obstacles[i].yMax - obstacles[i].yMin;
  616. if (maxWidth < width) {
  617. maxWidth = width;
  618. }
  619. if (maxHeight < height) {
  620. maxHeight = height;
  621. }
  622. }
  623. return {
  624. maxHeight: maxHeight,
  625. maxWidth: maxWidth
  626. };
  627. };
  628. /**
  629. * Utility to get which direction to start the pathfinding algorithm
  630. * (X vs Y), calculated from a set of marker options.
  631. *
  632. * @function Highcharts.Pathfinder#getAlgorithmStartDirection
  633. *
  634. * @param {Highcharts.ConnectorsMarkerOptions} markerOptions
  635. * Marker options to calculate from.
  636. *
  637. * @return {boolean}
  638. * Returns true for X, false for Y, and undefined for autocalculate.
  639. */
  640. Pathfinder.prototype.getAlgorithmStartDirection = function (markerOptions) {
  641. var xCenter = markerOptions.align !== 'left' &&
  642. markerOptions.align !== 'right', yCenter = markerOptions.verticalAlign !== 'top' &&
  643. markerOptions.verticalAlign !== 'bottom', undef;
  644. return xCenter ?
  645. (yCenter ? undef : false) : // x is centered
  646. (yCenter ? true : undef); // x is off-center
  647. };
  648. return Pathfinder;
  649. }());
  650. Pathfinder.prototype.algorithms = pathfinderAlgorithms;
  651. // Add to Highcharts namespace
  652. H.Pathfinder = Pathfinder;
  653. // Add pathfinding capabilities to Points
  654. extend(Point.prototype, /** @lends Point.prototype */ {
  655. /**
  656. * Get coordinates of anchor point for pathfinder connection.
  657. *
  658. * @private
  659. * @function Highcharts.Point#getPathfinderAnchorPoint
  660. *
  661. * @param {Highcharts.ConnectorsMarkerOptions} markerOptions
  662. * Connection options for position on point.
  663. *
  664. * @return {Highcharts.PositionObject}
  665. * An object with x/y properties for the position. Coordinates are
  666. * in plot values, not relative to point.
  667. */
  668. getPathfinderAnchorPoint: function (markerOptions) {
  669. var bb = getPointBB(this), x, y;
  670. switch (markerOptions.align) { // eslint-disable-line default-case
  671. case 'right':
  672. x = 'xMax';
  673. break;
  674. case 'left':
  675. x = 'xMin';
  676. }
  677. switch (markerOptions.verticalAlign) { // eslint-disable-line default-case
  678. case 'top':
  679. y = 'yMin';
  680. break;
  681. case 'bottom':
  682. y = 'yMax';
  683. }
  684. return {
  685. x: x ? bb[x] : (bb.xMin + bb.xMax) / 2,
  686. y: y ? bb[y] : (bb.yMin + bb.yMax) / 2
  687. };
  688. },
  689. /**
  690. * Utility to get the angle from one point to another.
  691. *
  692. * @private
  693. * @function Highcharts.Point#getRadiansToVector
  694. *
  695. * @param {Highcharts.PositionObject} v1
  696. * The first vector, as an object with x/y properties.
  697. *
  698. * @param {Highcharts.PositionObject} v2
  699. * The second vector, as an object with x/y properties.
  700. *
  701. * @return {number}
  702. * The angle in degrees
  703. */
  704. getRadiansToVector: function (v1, v2) {
  705. var box;
  706. if (!defined(v2)) {
  707. box = getPointBB(this);
  708. if (box) {
  709. v2 = {
  710. x: (box.xMin + box.xMax) / 2,
  711. y: (box.yMin + box.yMax) / 2
  712. };
  713. }
  714. }
  715. return Math.atan2(v2.y - v1.y, v1.x - v2.x);
  716. },
  717. /**
  718. * Utility to get the position of the marker, based on the path angle and
  719. * the marker's radius.
  720. *
  721. * @private
  722. * @function Highcharts.Point#getMarkerVector
  723. *
  724. * @param {number} radians
  725. * The angle in radians from the point center to another vector.
  726. *
  727. * @param {number} markerRadius
  728. * The radius of the marker, to calculate the additional distance to
  729. * the center of the marker.
  730. *
  731. * @param {object} anchor
  732. * The anchor point of the path and marker as an object with x/y
  733. * properties.
  734. *
  735. * @return {object}
  736. * The marker vector as an object with x/y properties.
  737. */
  738. getMarkerVector: function (radians, markerRadius, anchor) {
  739. var twoPI = Math.PI * 2.0, theta = radians, bb = getPointBB(this), rectWidth = bb.xMax - bb.xMin, rectHeight = bb.yMax - bb.yMin, rAtan = Math.atan2(rectHeight, rectWidth), tanTheta = 1, leftOrRightRegion = false, rectHalfWidth = rectWidth / 2.0, rectHalfHeight = rectHeight / 2.0, rectHorizontalCenter = bb.xMin + rectHalfWidth, rectVerticalCenter = bb.yMin + rectHalfHeight, edgePoint = {
  740. x: rectHorizontalCenter,
  741. y: rectVerticalCenter
  742. }, xFactor = 1, yFactor = 1;
  743. while (theta < -Math.PI) {
  744. theta += twoPI;
  745. }
  746. while (theta > Math.PI) {
  747. theta -= twoPI;
  748. }
  749. tanTheta = Math.tan(theta);
  750. if ((theta > -rAtan) && (theta <= rAtan)) {
  751. // Right side
  752. yFactor = -1;
  753. leftOrRightRegion = true;
  754. }
  755. else if (theta > rAtan && theta <= (Math.PI - rAtan)) {
  756. // Top side
  757. yFactor = -1;
  758. }
  759. else if (theta > (Math.PI - rAtan) || theta <= -(Math.PI - rAtan)) {
  760. // Left side
  761. xFactor = -1;
  762. leftOrRightRegion = true;
  763. }
  764. else {
  765. // Bottom side
  766. xFactor = -1;
  767. }
  768. // Correct the edgePoint according to the placement of the marker
  769. if (leftOrRightRegion) {
  770. edgePoint.x += xFactor * (rectHalfWidth);
  771. edgePoint.y += yFactor * (rectHalfWidth) * tanTheta;
  772. }
  773. else {
  774. edgePoint.x += xFactor * (rectHeight / (2.0 * tanTheta));
  775. edgePoint.y += yFactor * (rectHalfHeight);
  776. }
  777. if (anchor.x !== rectHorizontalCenter) {
  778. edgePoint.x = anchor.x;
  779. }
  780. if (anchor.y !== rectVerticalCenter) {
  781. edgePoint.y = anchor.y;
  782. }
  783. return {
  784. x: edgePoint.x + (markerRadius * Math.cos(theta)),
  785. y: edgePoint.y - (markerRadius * Math.sin(theta))
  786. };
  787. }
  788. });
  789. /**
  790. * Warn if using legacy options. Copy the options over. Note that this will
  791. * still break if using the legacy options in chart.update, addSeries etc.
  792. * @private
  793. */
  794. function warnLegacy(chart) {
  795. if (chart.options.pathfinder ||
  796. chart.series.reduce(function (acc, series) {
  797. if (series.options) {
  798. merge(true, (series.options.connectors = series.options.connectors ||
  799. {}), series.options.pathfinder);
  800. }
  801. return acc || series.options && series.options.pathfinder;
  802. }, false)) {
  803. merge(true, (chart.options.connectors = chart.options.connectors || {}), chart.options.pathfinder);
  804. error('WARNING: Pathfinder options have been renamed. ' +
  805. 'Use "chart.connectors" or "series.connectors" instead.');
  806. }
  807. }
  808. // Initialize Pathfinder for charts
  809. Chart.prototype.callbacks.push(function (chart) {
  810. var options = chart.options;
  811. if (options.connectors.enabled !== false) {
  812. warnLegacy(chart);
  813. this.pathfinder = new Pathfinder(this);
  814. this.pathfinder.update(true); // First draw, defer render
  815. }
  816. });
  817. export default Pathfinder;