drag-panes.src.js 24 KB

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