drag-panes.src.js 18 KB

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