123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647 |
- /**
- * @license Highcharts JS v7.0.2 (2019-01-17)
- * Drag-panes module
- *
- * (c) 2010-2019 Highsoft AS
- * Author: Kacper Madej
- *
- * License: www.highcharts.com/license
- */
- 'use strict';
- (function (factory) {
- if (typeof module === 'object' && module.exports) {
- factory['default'] = factory;
- module.exports = factory;
- } else if (typeof define === 'function' && define.amd) {
- define(function () {
- return factory;
- });
- } else {
- factory(typeof Highcharts !== 'undefined' ? Highcharts : undefined);
- }
- }(function (Highcharts) {
- (function (H) {
- /* *
- * Plugin for resizing axes / panes in a chart.
- *
- * (c) 2010-2017 Highsoft AS
- * Author: Kacper Madej
- *
- * License: www.highcharts.com/license
- */
- var hasTouch = H.hasTouch,
- merge = H.merge,
- wrap = H.wrap,
- isNumber = H.isNumber,
- addEvent = H.addEvent,
- relativeLength = H.relativeLength,
- objectEach = H.objectEach,
- Axis = H.Axis,
- Pointer = H.Pointer,
- // Default options for AxisResizer.
- resizerOptions = {
- /**
- * Minimal size of a resizable axis. Could be set as a percent
- * of plot area or pixel size.
- *
- * This feature requires the `drag-panes.js` module.
- *
- * @type {Number|String}
- * @product highstock
- * @sample {highstock} stock/yaxis/resize-min-max-length
- * minLength and maxLength
- * @apioption yAxis.minLength
- */
- minLength: '10%',
- /**
- * Maximal size of a resizable axis. Could be set as a percent
- * of plot area or pixel size.
- *
- * This feature requires the `drag-panes.js` module.
- *
- * @type {String|Number}
- * @product highstock
- * @sample {highstock} stock/yaxis/resize-min-max-length
- * minLength and maxLength
- * @apioption yAxis.maxLength
- */
- maxLength: '100%',
- /**
- * Options for axis resizing. This feature requires the
- * `drag-panes.js` -
- * [classic](http://code.highcharts.com/stock/modules/drag-panes.js) or
- * [styled](http://code.highcharts.com/stock/js/modules/drag-panes.js)
- * mode - module.
- *
- * @product highstock
- * @sample {highstock} stock/demo/candlestick-and-volume
- * Axis resizing enabled
- * @optionparent yAxis.resize
- */
- resize: {
- /**
- * Contains two arrays of axes that are controlled by control line
- * of the axis.
- *
- * This feature requires the `drag-panes.js` module.
- */
- controlledAxis: {
- /**
- * Array of axes that should move out of the way of resizing
- * being done for the current axis. If not set, the next axis
- * will be used.
- *
- * This feature requires the `drag-panes.js` module.
- *
- * @type {Array<String|Number>}
- * @default []
- * @sample {highstock} stock/yaxis/multiple-resizers
- * Three panes with resizers
- * @sample {highstock} stock/yaxis/resize-multiple-axes
- * One resizer controlling multiple axes
- */
- next: [],
- /**
- * Array of axes that should move with the current axis
- * while resizing.
- *
- * This feature requires the `drag-panes.js` module.
- *
- * @type {Array<String|Number>}
- * @sample {highstock} stock/yaxis/multiple-resizers
- * Three panes with resizers
- * @sample {highstock} stock/yaxis/resize-multiple-axes
- * One resizer controlling multiple axes
- */
- prev: []
- },
- /**
- * Enable or disable resize by drag for the axis.
- *
- * This feature requires the `drag-panes.js` module.
- *
- * @sample {highstock} stock/demo/candlestick-and-volume
- * Enabled resizer
- */
- enabled: false,
- /**
- * Cursor style for the control line.
- *
- * In styled mode use class `highcharts-axis-resizer` instead.
- *
- * This feature requires the `drag-panes.js` module.
- */
- cursor: 'ns-resize',
- /**
- * Color of the control line.
- *
- * In styled mode use class `highcharts-axis-resizer` instead.
- *
- * This feature requires the `drag-panes.js` module.
- *
- * @type {Color}
- * @sample {highstock} stock/yaxis/styled-resizer Styled resizer
- */
- lineColor: '#cccccc',
- /**
- * Dash style of the control line.
- *
- * In styled mode use class `highcharts-axis-resizer` instead.
- *
- * This feature requires the `drag-panes.js` module.
- *
- * @sample {highstock} stock/yaxis/styled-resizer Styled resizer
- * @see For supported options check
- * [dashStyle](#plotOptions.series.dashStyle)
- */
- lineDashStyle: 'Solid',
- /**
- * Width of the control line.
- *
- * In styled mode use class `highcharts-axis-resizer` instead.
- *
- * This feature requires the `drag-panes.js` module.
- *
- * @sample {highstock} stock/yaxis/styled-resizer Styled resizer
- */
- lineWidth: 4,
- /**
- * Horizontal offset of the control line.
- *
- * This feature requires the `drag-panes.js` module.
- *
- * @sample {highstock} stock/yaxis/styled-resizer Styled resizer
- */
- x: 0,
- /**
- * Vertical offset of the control line.
- *
- * This feature requires the `drag-panes.js` module.
- *
- * @sample {highstock} stock/yaxis/styled-resizer Styled resizer
- */
- y: 0
- }
- };
- merge(true, Axis.prototype.defaultYAxisOptions, resizerOptions);
- /**
- * The AxisResizer class.
- *
- * @private
- * @class
- * @name Highcharts.AxisResizer
- *
- * @param {Highcharts.Axis} axis
- * Main axis for the AxisResizer.
- */
- H.AxisResizer = function (axis) {
- this.init(axis);
- };
- H.AxisResizer.prototype = {
- /**
- * Initiate the AxisResizer object.
- *
- * @function Highcharts.AxisResizer#init
- *
- * @param {Highcharts.Axis} axis
- * Main axis for the AxisResizer.
- */
- init: function (axis, update) {
- this.axis = axis;
- this.options = axis.options.resize;
- this.render();
- if (!update) {
- // Add mouse events.
- this.addMouseEvents();
- }
- },
- /**
- * Render the AxisResizer
- *
- * @function Highcharts.AxisResizer#render
- */
- render: function () {
- var resizer = this,
- axis = resizer.axis,
- chart = axis.chart,
- options = resizer.options,
- x = options.x,
- y = options.y,
- // Normalize control line position according to the plot area
- pos = Math.min(
- Math.max(
- axis.top + axis.height + y,
- chart.plotTop
- ),
- chart.plotTop + chart.plotHeight
- ),
- attr = {},
- lineWidth;
- if (!chart.styledMode) {
- attr = {
- cursor: options.cursor,
- stroke: options.lineColor,
- 'stroke-width': options.lineWidth,
- dashstyle: options.lineDashStyle
- };
- }
- // Register current position for future reference.
- resizer.lastPos = pos - y;
- if (!resizer.controlLine) {
- resizer.controlLine = chart.renderer.path()
- .addClass('highcharts-axis-resizer');
- }
- // Add to axisGroup after axis update, because the group is recreated
- // Do .add() before path is calculated because strokeWidth() needs it.
- resizer.controlLine.add(axis.axisGroup);
- lineWidth = chart.styledMode ?
- resizer.controlLine.strokeWidth() :
- options.lineWidth;
- attr.d = chart.renderer.crispLine(
- [
- 'M', axis.left + x, pos,
- 'L', axis.left + axis.width + x, pos
- ],
- lineWidth
- );
- resizer.controlLine.attr(attr);
- },
- /**
- * Set up the mouse and touch events for the control line.
- *
- * @function Highcharts.AxisResizer#addMouseEvents
- */
- addMouseEvents: function () {
- var resizer = this,
- ctrlLineElem = resizer.controlLine.element,
- container = resizer.axis.chart.container,
- eventsToUnbind = [],
- mouseMoveHandler,
- mouseUpHandler,
- mouseDownHandler;
- /**
- * Create mouse events' handlers.
- * Make them as separate functions to enable wrapping them:
- */
- resizer.mouseMoveHandler = mouseMoveHandler = function (e) {
- resizer.onMouseMove(e);
- };
- resizer.mouseUpHandler = mouseUpHandler = function (e) {
- resizer.onMouseUp(e);
- };
- resizer.mouseDownHandler = mouseDownHandler = function (e) {
- resizer.onMouseDown(e);
- };
- /**
- * Add mouse move and mouseup events. These are bind to doc/container,
- * because resizer.grabbed flag is stored in mousedown events.
- */
- eventsToUnbind.push(
- addEvent(container, 'mousemove', mouseMoveHandler),
- addEvent(container.ownerDocument, 'mouseup', mouseUpHandler),
- addEvent(ctrlLineElem, 'mousedown', mouseDownHandler)
- );
- // Touch events.
- if (hasTouch) {
- eventsToUnbind.push(
- addEvent(container, 'touchmove', mouseMoveHandler),
- addEvent(container.ownerDocument, 'touchend', mouseUpHandler),
- addEvent(ctrlLineElem, 'touchstart', mouseDownHandler)
- );
- }
- resizer.eventsToUnbind = eventsToUnbind;
- },
- /**
- * Mouse move event based on x/y mouse position.
- *
- * @function Highcharts.AxisResizer#onMouseMove
- *
- * @param {global.PointerEvent} e
- * Mouse event.
- */
- onMouseMove: function (e) {
- /*
- * In iOS, a mousemove event with e.pageX === 0 is fired when holding
- * the finger down in the center of the scrollbar. This should
- * be ignored. Borrowed from Navigator.
- */
- if (!e.touches || e.touches[0].pageX !== 0) {
- // Drag the control line
- if (this.grabbed) {
- this.hasDragged = true;
- this.updateAxes(this.axis.chart.pointer.normalize(e).chartY -
- this.options.y);
- }
- }
- },
- /**
- * Mouse up event based on x/y mouse position.
- *
- * @function Highcharts.AxisResizer#onMouseUp
- *
- * @param {global.PointerEvent} e
- * Mouse event.
- */
- onMouseUp: function (e) {
- if (this.hasDragged) {
- this.updateAxes(this.axis.chart.pointer.normalize(e).chartY -
- this.options.y);
- }
- // Restore runPointActions.
- this.grabbed = this.hasDragged = this.axis.chart.activeResizer = null;
- },
- /**
- * Mousedown on a control line.
- * Will store necessary information for drag&drop.
- *
- * @function Highcharts.AxisResizer#onMouseDown
- */
- onMouseDown: function () {
- // Clear all hover effects.
- this.axis.chart.pointer.reset(false, 0);
- // Disable runPointActions.
- this.grabbed = this.axis.chart.activeResizer = true;
- },
- /**
- * Update all connected axes after a change of control line position
- *
- * @function Highcharts.AxisResizer#updateAxes
- *
- * @param {number} chartY
- */
- updateAxes: function (chartY) {
- var resizer = this,
- chart = resizer.axis.chart,
- axes = resizer.options.controlledAxis,
- nextAxes = axes.next.length === 0 ?
- [chart.yAxis.indexOf(resizer.axis) + 1] : axes.next,
- // Main axis is included in the prev array by default
- prevAxes = [resizer.axis].concat(axes.prev),
- axesConfigs = [], // prev and next configs
- stopDrag = false,
- plotTop = chart.plotTop,
- plotHeight = chart.plotHeight,
- plotBottom = plotTop + plotHeight,
- yDelta,
- normalize = function (val, min, max) {
- return Math.round(Math.min(Math.max(val, min), max));
- };
- // Normalize chartY to plot area limits
- chartY = Math.max(Math.min(chartY, plotBottom), plotTop);
- yDelta = chartY - resizer.lastPos;
- // Update on changes of at least 1 pixel in the desired direction
- if (yDelta * yDelta < 1) {
- return;
- }
- // First gather info how axes should behave
- [prevAxes, nextAxes].forEach(function (axesGroup, isNext) {
- axesGroup.forEach(function (axisInfo, i) {
- // Axes given as array index, axis object or axis id
- var axis = isNumber(axisInfo) ?
- // If it's a number - it's an index
- chart.yAxis[axisInfo] :
- (
- // If it's first elem. in first group
- (!isNext && !i) ?
- // then it's an Axis object
- axisInfo :
- // else it should be an id
- chart.get(axisInfo)
- ),
- axisOptions = axis && axis.options,
- optionsToUpdate = {},
- hDelta = 0,
- height, top,
- minLength, maxLength;
- // Skip if axis is not found
- // or it is navigator's yAxis (#7732)
- if (
- !axisOptions ||
- axisOptions.id === 'navigator-y-axis'
- ) {
- return;
- }
- top = axis.top;
- minLength = Math.round(
- relativeLength(
- axisOptions.minLength,
- plotHeight
- )
- );
- maxLength = Math.round(
- relativeLength(
- axisOptions.maxLength,
- plotHeight
- )
- );
- if (isNext) {
- // Try to change height first. yDelta could had changed
- yDelta = chartY - resizer.lastPos;
- // Normalize height to option limits
- height = normalize(axis.len - yDelta, minLength, maxLength);
- // Adjust top, so the axis looks like shrinked from top
- top = axis.top + yDelta;
- // Check for plot area limits
- if (top + height > plotBottom) {
- hDelta = plotBottom - height - top;
- chartY += hDelta;
- top += hDelta;
- }
- // Fit to plot - when overflowing on top
- if (top < plotTop) {
- top = plotTop;
- if (top + height > plotBottom) {
- height = plotHeight;
- }
- }
- // If next axis meets min length, stop dragging:
- if (height === minLength) {
- stopDrag = true;
- }
- axesConfigs.push({
- axis: axis,
- options: {
- top: Math.round(top),
- height: height
- }
- });
- } else {
- // Normalize height to option limits
- height = normalize(chartY - top, minLength, maxLength);
- // If prev axis meets max length, stop dragging:
- if (height === maxLength) {
- stopDrag = true;
- }
- // Check axis size limits
- chartY = top + height;
- axesConfigs.push({
- axis: axis,
- options: {
- height: height
- }
- });
- }
- optionsToUpdate.height = height;
- });
- });
- // If we hit the min/maxLength with dragging, don't do anything:
- if (!stopDrag) {
- // Now update axes:
- axesConfigs.forEach(function (config) {
- config.axis.update(config.options, false);
- });
- chart.redraw(false);
- }
- },
- /**
- * Destroy AxisResizer. Clear outside references, clear events,
- * destroy elements, nullify properties.
- *
- * @function Highcharts.AxisResizer#destroy
- */
- destroy: function () {
- var resizer = this,
- axis = resizer.axis;
- // Clear resizer in axis
- delete axis.resizer;
- // Clear control line events
- if (this.eventsToUnbind) {
- this.eventsToUnbind.forEach(function (unbind) {
- unbind();
- });
- }
- // Destroy AxisResizer elements
- resizer.controlLine.destroy();
- // Nullify properties
- objectEach(resizer, function (val, key) {
- resizer[key] = null;
- });
- }
- };
- // Keep resizer reference on axis update
- Axis.prototype.keepProps.push('resizer');
- // Add new AxisResizer, update or remove it
- addEvent(Axis, 'afterRender', function () {
- var axis = this,
- resizer = axis.resizer,
- resizerOptions = axis.options.resize,
- enabled;
- if (resizerOptions) {
- enabled = resizerOptions.enabled !== false;
- if (resizer) {
- // Resizer present and enabled
- if (enabled) {
- // Update options
- resizer.init(axis, true);
- // Resizer present, but disabled
- } else {
- // Destroy the resizer
- resizer.destroy();
- }
- } else {
- // Resizer not present and enabled
- if (enabled) {
- // Add new resizer
- axis.resizer = new H.AxisResizer(axis);
- }
- // Resizer not present and disabled, so do nothing
- }
- }
- });
- // Clear resizer on axis remove.
- addEvent(Axis, 'destroy', function (e) {
- if (!e.keepEvents && this.resizer) {
- this.resizer.destroy();
- }
- });
- // Prevent any hover effects while dragging a control line of AxisResizer.
- wrap(Pointer.prototype, 'runPointActions', function (proceed) {
- if (!this.chart.activeResizer) {
- proceed.apply(this, Array.prototype.slice.call(arguments, 1));
- }
- });
- // Prevent default drag action detection while dragging a control line of
- // AxisResizer. (#7563)
- wrap(Pointer.prototype, 'drag', function (proceed) {
- if (!this.chart.activeResizer) {
- proceed.apply(this, Array.prototype.slice.call(arguments, 1));
- }
- });
- }(Highcharts));
- return (function () {
- }());
- }));
|