drag-panes.src.js 25 KB

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