drag-panes.src.js 20 KB

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