drag-panes.src.js 23 KB

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