drag-panes.src.js 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647
  1. /**
  2. * @license Highcharts JS v7.0.2 (2019-01-17)
  3. * Drag-panes module
  4. *
  5. * (c) 2010-2019 Highsoft AS
  6. * Author: Kacper Madej
  7. *
  8. * License: www.highcharts.com/license
  9. */
  10. 'use strict';
  11. (function (factory) {
  12. if (typeof module === 'object' && module.exports) {
  13. factory['default'] = factory;
  14. module.exports = factory;
  15. } else if (typeof define === 'function' && define.amd) {
  16. define(function () {
  17. return factory;
  18. });
  19. } else {
  20. factory(typeof Highcharts !== 'undefined' ? Highcharts : undefined);
  21. }
  22. }(function (Highcharts) {
  23. (function (H) {
  24. /* *
  25. * Plugin for resizing axes / panes in a chart.
  26. *
  27. * (c) 2010-2017 Highsoft AS
  28. * Author: Kacper Madej
  29. *
  30. * License: www.highcharts.com/license
  31. */
  32. var hasTouch = H.hasTouch,
  33. merge = H.merge,
  34. wrap = H.wrap,
  35. isNumber = H.isNumber,
  36. addEvent = H.addEvent,
  37. relativeLength = H.relativeLength,
  38. objectEach = H.objectEach,
  39. Axis = H.Axis,
  40. Pointer = H.Pointer,
  41. // Default options for AxisResizer.
  42. resizerOptions = {
  43. /**
  44. * Minimal size of a resizable axis. Could be set as a percent
  45. * of plot area or pixel size.
  46. *
  47. * This feature requires the `drag-panes.js` module.
  48. *
  49. * @type {Number|String}
  50. * @product highstock
  51. * @sample {highstock} stock/yaxis/resize-min-max-length
  52. * minLength and maxLength
  53. * @apioption yAxis.minLength
  54. */
  55. minLength: '10%',
  56. /**
  57. * Maximal size of a resizable axis. Could be set as a percent
  58. * of plot area or pixel size.
  59. *
  60. * This feature requires the `drag-panes.js` module.
  61. *
  62. * @type {String|Number}
  63. * @product highstock
  64. * @sample {highstock} stock/yaxis/resize-min-max-length
  65. * minLength and maxLength
  66. * @apioption yAxis.maxLength
  67. */
  68. maxLength: '100%',
  69. /**
  70. * Options for axis resizing. This feature requires the
  71. * `drag-panes.js` -
  72. * [classic](http://code.highcharts.com/stock/modules/drag-panes.js) or
  73. * [styled](http://code.highcharts.com/stock/js/modules/drag-panes.js)
  74. * mode - module.
  75. *
  76. * @product highstock
  77. * @sample {highstock} stock/demo/candlestick-and-volume
  78. * Axis resizing enabled
  79. * @optionparent yAxis.resize
  80. */
  81. resize: {
  82. /**
  83. * Contains two arrays of axes that are controlled by control line
  84. * of the axis.
  85. *
  86. * This feature requires the `drag-panes.js` module.
  87. */
  88. controlledAxis: {
  89. /**
  90. * Array of axes that should move out of the way of resizing
  91. * being done for the current axis. If not set, the next axis
  92. * will be used.
  93. *
  94. * This feature requires the `drag-panes.js` module.
  95. *
  96. * @type {Array<String|Number>}
  97. * @default []
  98. * @sample {highstock} stock/yaxis/multiple-resizers
  99. * Three panes with resizers
  100. * @sample {highstock} stock/yaxis/resize-multiple-axes
  101. * One resizer controlling multiple axes
  102. */
  103. next: [],
  104. /**
  105. * Array of axes that should move with the current axis
  106. * while resizing.
  107. *
  108. * This feature requires the `drag-panes.js` module.
  109. *
  110. * @type {Array<String|Number>}
  111. * @sample {highstock} stock/yaxis/multiple-resizers
  112. * Three panes with resizers
  113. * @sample {highstock} stock/yaxis/resize-multiple-axes
  114. * One resizer controlling multiple axes
  115. */
  116. prev: []
  117. },
  118. /**
  119. * Enable or disable resize by drag for the axis.
  120. *
  121. * This feature requires the `drag-panes.js` module.
  122. *
  123. * @sample {highstock} stock/demo/candlestick-and-volume
  124. * Enabled resizer
  125. */
  126. enabled: false,
  127. /**
  128. * Cursor style for the control line.
  129. *
  130. * In styled mode use class `highcharts-axis-resizer` instead.
  131. *
  132. * This feature requires the `drag-panes.js` module.
  133. */
  134. cursor: 'ns-resize',
  135. /**
  136. * Color of the control line.
  137. *
  138. * In styled mode use class `highcharts-axis-resizer` instead.
  139. *
  140. * This feature requires the `drag-panes.js` module.
  141. *
  142. * @type {Color}
  143. * @sample {highstock} stock/yaxis/styled-resizer Styled resizer
  144. */
  145. lineColor: '#cccccc',
  146. /**
  147. * Dash style of the control line.
  148. *
  149. * In styled mode use class `highcharts-axis-resizer` instead.
  150. *
  151. * This feature requires the `drag-panes.js` module.
  152. *
  153. * @sample {highstock} stock/yaxis/styled-resizer Styled resizer
  154. * @see For supported options check
  155. * [dashStyle](#plotOptions.series.dashStyle)
  156. */
  157. lineDashStyle: 'Solid',
  158. /**
  159. * Width of the control line.
  160. *
  161. * In styled mode use class `highcharts-axis-resizer` instead.
  162. *
  163. * This feature requires the `drag-panes.js` module.
  164. *
  165. * @sample {highstock} stock/yaxis/styled-resizer Styled resizer
  166. */
  167. lineWidth: 4,
  168. /**
  169. * Horizontal offset of the control line.
  170. *
  171. * This feature requires the `drag-panes.js` module.
  172. *
  173. * @sample {highstock} stock/yaxis/styled-resizer Styled resizer
  174. */
  175. x: 0,
  176. /**
  177. * Vertical offset of the control line.
  178. *
  179. * This feature requires the `drag-panes.js` module.
  180. *
  181. * @sample {highstock} stock/yaxis/styled-resizer Styled resizer
  182. */
  183. y: 0
  184. }
  185. };
  186. merge(true, Axis.prototype.defaultYAxisOptions, resizerOptions);
  187. /**
  188. * The AxisResizer class.
  189. *
  190. * @private
  191. * @class
  192. * @name Highcharts.AxisResizer
  193. *
  194. * @param {Highcharts.Axis} axis
  195. * Main axis for the AxisResizer.
  196. */
  197. H.AxisResizer = function (axis) {
  198. this.init(axis);
  199. };
  200. H.AxisResizer.prototype = {
  201. /**
  202. * Initiate the AxisResizer object.
  203. *
  204. * @function Highcharts.AxisResizer#init
  205. *
  206. * @param {Highcharts.Axis} axis
  207. * Main axis for the AxisResizer.
  208. */
  209. init: function (axis, update) {
  210. this.axis = axis;
  211. this.options = axis.options.resize;
  212. this.render();
  213. if (!update) {
  214. // Add mouse events.
  215. this.addMouseEvents();
  216. }
  217. },
  218. /**
  219. * Render the AxisResizer
  220. *
  221. * @function Highcharts.AxisResizer#render
  222. */
  223. render: function () {
  224. var resizer = this,
  225. axis = resizer.axis,
  226. chart = axis.chart,
  227. options = resizer.options,
  228. x = options.x,
  229. y = options.y,
  230. // Normalize control line position according to the plot area
  231. pos = Math.min(
  232. Math.max(
  233. axis.top + axis.height + y,
  234. chart.plotTop
  235. ),
  236. chart.plotTop + chart.plotHeight
  237. ),
  238. attr = {},
  239. lineWidth;
  240. if (!chart.styledMode) {
  241. attr = {
  242. cursor: options.cursor,
  243. stroke: options.lineColor,
  244. 'stroke-width': options.lineWidth,
  245. dashstyle: options.lineDashStyle
  246. };
  247. }
  248. // Register current position for future reference.
  249. resizer.lastPos = pos - y;
  250. if (!resizer.controlLine) {
  251. resizer.controlLine = chart.renderer.path()
  252. .addClass('highcharts-axis-resizer');
  253. }
  254. // Add to axisGroup after axis update, because the group is recreated
  255. // Do .add() before path is calculated because strokeWidth() needs it.
  256. resizer.controlLine.add(axis.axisGroup);
  257. lineWidth = chart.styledMode ?
  258. resizer.controlLine.strokeWidth() :
  259. options.lineWidth;
  260. attr.d = chart.renderer.crispLine(
  261. [
  262. 'M', axis.left + x, pos,
  263. 'L', axis.left + axis.width + x, pos
  264. ],
  265. lineWidth
  266. );
  267. resizer.controlLine.attr(attr);
  268. },
  269. /**
  270. * Set up the mouse and touch events for the control line.
  271. *
  272. * @function Highcharts.AxisResizer#addMouseEvents
  273. */
  274. addMouseEvents: function () {
  275. var resizer = this,
  276. ctrlLineElem = resizer.controlLine.element,
  277. container = resizer.axis.chart.container,
  278. eventsToUnbind = [],
  279. mouseMoveHandler,
  280. mouseUpHandler,
  281. mouseDownHandler;
  282. /**
  283. * Create mouse events' handlers.
  284. * Make them as separate functions to enable wrapping them:
  285. */
  286. resizer.mouseMoveHandler = mouseMoveHandler = function (e) {
  287. resizer.onMouseMove(e);
  288. };
  289. resizer.mouseUpHandler = mouseUpHandler = function (e) {
  290. resizer.onMouseUp(e);
  291. };
  292. resizer.mouseDownHandler = mouseDownHandler = function (e) {
  293. resizer.onMouseDown(e);
  294. };
  295. /**
  296. * Add mouse move and mouseup events. These are bind to doc/container,
  297. * because resizer.grabbed flag is stored in mousedown events.
  298. */
  299. eventsToUnbind.push(
  300. addEvent(container, 'mousemove', mouseMoveHandler),
  301. addEvent(container.ownerDocument, 'mouseup', mouseUpHandler),
  302. addEvent(ctrlLineElem, 'mousedown', mouseDownHandler)
  303. );
  304. // Touch events.
  305. if (hasTouch) {
  306. eventsToUnbind.push(
  307. addEvent(container, 'touchmove', mouseMoveHandler),
  308. addEvent(container.ownerDocument, 'touchend', mouseUpHandler),
  309. addEvent(ctrlLineElem, 'touchstart', mouseDownHandler)
  310. );
  311. }
  312. resizer.eventsToUnbind = eventsToUnbind;
  313. },
  314. /**
  315. * Mouse move event based on x/y mouse position.
  316. *
  317. * @function Highcharts.AxisResizer#onMouseMove
  318. *
  319. * @param {global.PointerEvent} e
  320. * Mouse event.
  321. */
  322. onMouseMove: function (e) {
  323. /*
  324. * In iOS, a mousemove event with e.pageX === 0 is fired when holding
  325. * the finger down in the center of the scrollbar. This should
  326. * be ignored. Borrowed from Navigator.
  327. */
  328. if (!e.touches || e.touches[0].pageX !== 0) {
  329. // Drag the control line
  330. if (this.grabbed) {
  331. this.hasDragged = true;
  332. this.updateAxes(this.axis.chart.pointer.normalize(e).chartY -
  333. this.options.y);
  334. }
  335. }
  336. },
  337. /**
  338. * Mouse up event based on x/y mouse position.
  339. *
  340. * @function Highcharts.AxisResizer#onMouseUp
  341. *
  342. * @param {global.PointerEvent} e
  343. * Mouse event.
  344. */
  345. onMouseUp: function (e) {
  346. if (this.hasDragged) {
  347. this.updateAxes(this.axis.chart.pointer.normalize(e).chartY -
  348. this.options.y);
  349. }
  350. // Restore runPointActions.
  351. this.grabbed = this.hasDragged = this.axis.chart.activeResizer = null;
  352. },
  353. /**
  354. * Mousedown on a control line.
  355. * Will store necessary information for drag&drop.
  356. *
  357. * @function Highcharts.AxisResizer#onMouseDown
  358. */
  359. onMouseDown: function () {
  360. // Clear all hover effects.
  361. this.axis.chart.pointer.reset(false, 0);
  362. // Disable runPointActions.
  363. this.grabbed = this.axis.chart.activeResizer = true;
  364. },
  365. /**
  366. * Update all connected axes after a change of control line position
  367. *
  368. * @function Highcharts.AxisResizer#updateAxes
  369. *
  370. * @param {number} chartY
  371. */
  372. updateAxes: function (chartY) {
  373. var resizer = this,
  374. chart = resizer.axis.chart,
  375. axes = resizer.options.controlledAxis,
  376. nextAxes = axes.next.length === 0 ?
  377. [chart.yAxis.indexOf(resizer.axis) + 1] : axes.next,
  378. // Main axis is included in the prev array by default
  379. prevAxes = [resizer.axis].concat(axes.prev),
  380. axesConfigs = [], // prev and next configs
  381. stopDrag = false,
  382. plotTop = chart.plotTop,
  383. plotHeight = chart.plotHeight,
  384. plotBottom = plotTop + plotHeight,
  385. yDelta,
  386. normalize = function (val, min, max) {
  387. return Math.round(Math.min(Math.max(val, min), max));
  388. };
  389. // Normalize chartY to plot area limits
  390. chartY = Math.max(Math.min(chartY, plotBottom), plotTop);
  391. yDelta = chartY - resizer.lastPos;
  392. // Update on changes of at least 1 pixel in the desired direction
  393. if (yDelta * yDelta < 1) {
  394. return;
  395. }
  396. // First gather info how axes should behave
  397. [prevAxes, nextAxes].forEach(function (axesGroup, isNext) {
  398. axesGroup.forEach(function (axisInfo, i) {
  399. // Axes given as array index, axis object or axis id
  400. var axis = isNumber(axisInfo) ?
  401. // If it's a number - it's an index
  402. chart.yAxis[axisInfo] :
  403. (
  404. // If it's first elem. in first group
  405. (!isNext && !i) ?
  406. // then it's an Axis object
  407. axisInfo :
  408. // else it should be an id
  409. chart.get(axisInfo)
  410. ),
  411. axisOptions = axis && axis.options,
  412. optionsToUpdate = {},
  413. hDelta = 0,
  414. height, top,
  415. minLength, maxLength;
  416. // Skip if axis is not found
  417. // or it is navigator's yAxis (#7732)
  418. if (
  419. !axisOptions ||
  420. axisOptions.id === 'navigator-y-axis'
  421. ) {
  422. return;
  423. }
  424. top = axis.top;
  425. minLength = Math.round(
  426. relativeLength(
  427. axisOptions.minLength,
  428. plotHeight
  429. )
  430. );
  431. maxLength = Math.round(
  432. relativeLength(
  433. axisOptions.maxLength,
  434. plotHeight
  435. )
  436. );
  437. if (isNext) {
  438. // Try to change height first. yDelta could had changed
  439. yDelta = chartY - resizer.lastPos;
  440. // Normalize height to option limits
  441. height = normalize(axis.len - yDelta, minLength, maxLength);
  442. // Adjust top, so the axis looks like shrinked from top
  443. top = axis.top + yDelta;
  444. // Check for plot area limits
  445. if (top + height > plotBottom) {
  446. hDelta = plotBottom - height - top;
  447. chartY += hDelta;
  448. top += hDelta;
  449. }
  450. // Fit to plot - when overflowing on top
  451. if (top < plotTop) {
  452. top = plotTop;
  453. if (top + height > plotBottom) {
  454. height = plotHeight;
  455. }
  456. }
  457. // If next axis meets min length, stop dragging:
  458. if (height === minLength) {
  459. stopDrag = true;
  460. }
  461. axesConfigs.push({
  462. axis: axis,
  463. options: {
  464. top: Math.round(top),
  465. height: height
  466. }
  467. });
  468. } else {
  469. // Normalize height to option limits
  470. height = normalize(chartY - top, minLength, maxLength);
  471. // If prev axis meets max length, stop dragging:
  472. if (height === maxLength) {
  473. stopDrag = true;
  474. }
  475. // Check axis size limits
  476. chartY = top + height;
  477. axesConfigs.push({
  478. axis: axis,
  479. options: {
  480. height: height
  481. }
  482. });
  483. }
  484. optionsToUpdate.height = height;
  485. });
  486. });
  487. // If we hit the min/maxLength with dragging, don't do anything:
  488. if (!stopDrag) {
  489. // Now update axes:
  490. axesConfigs.forEach(function (config) {
  491. config.axis.update(config.options, false);
  492. });
  493. chart.redraw(false);
  494. }
  495. },
  496. /**
  497. * Destroy AxisResizer. Clear outside references, clear events,
  498. * destroy elements, nullify properties.
  499. *
  500. * @function Highcharts.AxisResizer#destroy
  501. */
  502. destroy: function () {
  503. var resizer = this,
  504. axis = resizer.axis;
  505. // Clear resizer in axis
  506. delete axis.resizer;
  507. // Clear control line events
  508. if (this.eventsToUnbind) {
  509. this.eventsToUnbind.forEach(function (unbind) {
  510. unbind();
  511. });
  512. }
  513. // Destroy AxisResizer elements
  514. resizer.controlLine.destroy();
  515. // Nullify properties
  516. objectEach(resizer, function (val, key) {
  517. resizer[key] = null;
  518. });
  519. }
  520. };
  521. // Keep resizer reference on axis update
  522. Axis.prototype.keepProps.push('resizer');
  523. // Add new AxisResizer, update or remove it
  524. addEvent(Axis, 'afterRender', function () {
  525. var axis = this,
  526. resizer = axis.resizer,
  527. resizerOptions = axis.options.resize,
  528. enabled;
  529. if (resizerOptions) {
  530. enabled = resizerOptions.enabled !== false;
  531. if (resizer) {
  532. // Resizer present and enabled
  533. if (enabled) {
  534. // Update options
  535. resizer.init(axis, true);
  536. // Resizer present, but disabled
  537. } else {
  538. // Destroy the resizer
  539. resizer.destroy();
  540. }
  541. } else {
  542. // Resizer not present and enabled
  543. if (enabled) {
  544. // Add new resizer
  545. axis.resizer = new H.AxisResizer(axis);
  546. }
  547. // Resizer not present and disabled, so do nothing
  548. }
  549. }
  550. });
  551. // Clear resizer on axis remove.
  552. addEvent(Axis, 'destroy', function (e) {
  553. if (!e.keepEvents && this.resizer) {
  554. this.resizer.destroy();
  555. }
  556. });
  557. // Prevent any hover effects while dragging a control line of AxisResizer.
  558. wrap(Pointer.prototype, 'runPointActions', function (proceed) {
  559. if (!this.chart.activeResizer) {
  560. proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  561. }
  562. });
  563. // Prevent default drag action detection while dragging a control line of
  564. // AxisResizer. (#7563)
  565. wrap(Pointer.prototype, 'drag', function (proceed) {
  566. if (!this.chart.activeResizer) {
  567. proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  568. }
  569. });
  570. }(Highcharts));
  571. return (function () {
  572. }());
  573. }));