MapNavigation.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302
  1. /* *
  2. *
  3. * (c) 2010-2021 Torstein Honsi
  4. *
  5. * License: www.highcharts.com/license
  6. *
  7. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  8. *
  9. * */
  10. 'use strict';
  11. import Chart from '../Core/Chart/Chart.js';
  12. import H from '../Core/Globals.js';
  13. var doc = H.doc;
  14. import U from '../Core/Utilities.js';
  15. var addEvent = U.addEvent, extend = U.extend, merge = U.merge, objectEach = U.objectEach, pick = U.pick;
  16. import './MapNavigationOptionsDefault.js';
  17. /* eslint-disable no-invalid-this, valid-jsdoc */
  18. /**
  19. * @private
  20. */
  21. function stopEvent(e) {
  22. if (e) {
  23. if (e.preventDefault) {
  24. e.preventDefault();
  25. }
  26. if (e.stopPropagation) {
  27. e.stopPropagation();
  28. }
  29. e.cancelBubble = true;
  30. }
  31. }
  32. /**
  33. * The MapNavigation handles buttons for navigation in addition to mousewheel
  34. * and doubleclick handlers for chart zooming.
  35. *
  36. * @private
  37. * @class
  38. * @name MapNavigation
  39. *
  40. * @param {Highcharts.Chart} chart
  41. * The Chart instance.
  42. */
  43. function MapNavigation(chart) {
  44. this.init(chart);
  45. }
  46. /**
  47. * Initialize function.
  48. *
  49. * @function MapNavigation#init
  50. *
  51. * @param {Highcharts.Chart} chart
  52. * The Chart instance.
  53. *
  54. * @return {void}
  55. */
  56. MapNavigation.prototype.init = function (chart) {
  57. this.chart = chart;
  58. chart.mapNavButtons = [];
  59. };
  60. /**
  61. * Update the map navigation with new options. Calling this is the same as
  62. * calling `chart.update({ mapNavigation: {} })`.
  63. *
  64. * @function MapNavigation#update
  65. *
  66. * @param {Highcharts.MapNavigationOptions} [options]
  67. * New options for the map navigation.
  68. *
  69. * @return {void}
  70. */
  71. MapNavigation.prototype.update = function (options) {
  72. var chart = this.chart, o = chart.options.mapNavigation, buttonOptions, attr, states, hoverStates, selectStates, outerHandler = function (e) {
  73. this.handler.call(chart, e);
  74. stopEvent(e); // Stop default click event (#4444)
  75. }, mapNavButtons = chart.mapNavButtons;
  76. // Merge in new options in case of update, and register back to chart
  77. // options.
  78. if (options) {
  79. o = chart.options.mapNavigation =
  80. merge(chart.options.mapNavigation, options);
  81. }
  82. // Destroy buttons in case of dynamic update
  83. while (mapNavButtons.length) {
  84. mapNavButtons.pop().destroy();
  85. }
  86. if (pick(o.enableButtons, o.enabled) && !chart.renderer.forExport) {
  87. objectEach(o.buttons, function (button, n) {
  88. buttonOptions = merge(o.buttonOptions, button);
  89. // Presentational
  90. if (!chart.styledMode) {
  91. attr = buttonOptions.theme;
  92. attr.style = merge(buttonOptions.theme.style, buttonOptions.style // #3203
  93. );
  94. states = attr.states;
  95. hoverStates = states && states.hover;
  96. selectStates = states && states.select;
  97. }
  98. button = chart.renderer
  99. .button(buttonOptions.text, 0, 0, outerHandler, attr, hoverStates, selectStates, 0, n === 'zoomIn' ? 'topbutton' : 'bottombutton')
  100. .addClass('highcharts-map-navigation highcharts-' + {
  101. zoomIn: 'zoom-in',
  102. zoomOut: 'zoom-out'
  103. }[n])
  104. .attr({
  105. width: buttonOptions.width,
  106. height: buttonOptions.height,
  107. title: chart.options.lang[n],
  108. padding: buttonOptions.padding,
  109. zIndex: 5
  110. })
  111. .add();
  112. button.handler = buttonOptions.onclick;
  113. // Stop double click event (#4444)
  114. addEvent(button.element, 'dblclick', stopEvent);
  115. mapNavButtons.push(button);
  116. // Align it after the plotBox is known (#12776)
  117. var bo = buttonOptions;
  118. var un = addEvent(chart, 'load', function () {
  119. button.align(extend(bo, {
  120. width: button.width,
  121. height: 2 * button.height
  122. }), null, bo.alignTo);
  123. un();
  124. });
  125. });
  126. }
  127. this.updateEvents(o);
  128. };
  129. /**
  130. * Update events, called internally from the update function. Add new event
  131. * handlers, or unbinds events if disabled.
  132. *
  133. * @function MapNavigation#updateEvents
  134. *
  135. * @param {Highcharts.MapNavigationOptions} options
  136. * Options for map navigation.
  137. *
  138. * @return {void}
  139. */
  140. MapNavigation.prototype.updateEvents = function (options) {
  141. var chart = this.chart;
  142. // Add the double click event
  143. if (pick(options.enableDoubleClickZoom, options.enabled) ||
  144. options.enableDoubleClickZoomTo) {
  145. this.unbindDblClick = this.unbindDblClick || addEvent(chart.container, 'dblclick', function (e) {
  146. chart.pointer.onContainerDblClick(e);
  147. });
  148. }
  149. else if (this.unbindDblClick) {
  150. // Unbind and set unbinder to undefined
  151. this.unbindDblClick = this.unbindDblClick();
  152. }
  153. // Add the mousewheel event
  154. if (pick(options.enableMouseWheelZoom, options.enabled)) {
  155. this.unbindMouseWheel = this.unbindMouseWheel || addEvent(chart.container, typeof doc.onmousewheel === 'undefined' ?
  156. 'DOMMouseScroll' : 'mousewheel', function (e) {
  157. chart.pointer.onContainerMouseWheel(e);
  158. // Issue #5011, returning false from non-jQuery event does
  159. // not prevent default
  160. stopEvent(e);
  161. return false;
  162. });
  163. }
  164. else if (this.unbindMouseWheel) {
  165. // Unbind and set unbinder to undefined
  166. this.unbindMouseWheel = this.unbindMouseWheel();
  167. }
  168. };
  169. // Add events to the Chart object itself
  170. extend(Chart.prototype, /** @lends Chart.prototype */ {
  171. /**
  172. * Fit an inner box to an outer. If the inner box overflows left or right,
  173. * align it to the sides of the outer. If it overflows both sides, fit it
  174. * within the outer. This is a pattern that occurs more places in
  175. * Highcharts, perhaps it should be elevated to a common utility function.
  176. *
  177. * @ignore
  178. * @function Highcharts.Chart#fitToBox
  179. *
  180. * @param {Highcharts.BBoxObject} inner
  181. *
  182. * @param {Highcharts.BBoxObject} outer
  183. *
  184. * @return {Highcharts.BBoxObject}
  185. * The inner box
  186. */
  187. fitToBox: function (inner, outer) {
  188. [['x', 'width'], ['y', 'height']].forEach(function (dim) {
  189. var pos = dim[0], size = dim[1];
  190. if (inner[pos] + inner[size] >
  191. outer[pos] + outer[size]) { // right
  192. // the general size is greater, fit fully to outer
  193. if (inner[size] > outer[size]) {
  194. inner[size] = outer[size];
  195. inner[pos] = outer[pos];
  196. }
  197. else { // align right
  198. inner[pos] = outer[pos] +
  199. outer[size] - inner[size];
  200. }
  201. }
  202. if (inner[size] > outer[size]) {
  203. inner[size] = outer[size];
  204. }
  205. if (inner[pos] < outer[pos]) {
  206. inner[pos] = outer[pos];
  207. }
  208. });
  209. return inner;
  210. },
  211. /**
  212. * Highmaps only. Zoom in or out of the map. See also {@link Point#zoomTo}.
  213. * See {@link Chart#fromLatLonToPoint} for how to get the `centerX` and
  214. * `centerY` parameters for a geographic location.
  215. *
  216. * @function Highcharts.Chart#mapZoom
  217. *
  218. * @param {number} [howMuch]
  219. * How much to zoom the map. Values less than 1 zooms in. 0.5 zooms
  220. * in to half the current view. 2 zooms to twice the current view. If
  221. * omitted, the zoom is reset.
  222. *
  223. * @param {number} [centerX]
  224. * The X axis position to center around if available space.
  225. *
  226. * @param {number} [centerY]
  227. * The Y axis position to center around if available space.
  228. *
  229. * @param {number} [mouseX]
  230. * Fix the zoom to this position if possible. This is used for
  231. * example in mousewheel events, where the area under the mouse
  232. * should be fixed as we zoom in.
  233. *
  234. * @param {number} [mouseY]
  235. * Fix the zoom to this position if possible.
  236. *
  237. * @return {void}
  238. */
  239. mapZoom: function (howMuch, centerXArg, centerYArg, mouseX, mouseY) {
  240. var chart = this, xAxis = chart.xAxis[0], xRange = xAxis.max - xAxis.min, centerX = pick(centerXArg, xAxis.min + xRange / 2), newXRange = xRange * howMuch, yAxis = chart.yAxis[0], yRange = yAxis.max - yAxis.min, centerY = pick(centerYArg, yAxis.min + yRange / 2), newYRange = yRange * howMuch, fixToX = mouseX ? ((mouseX - xAxis.pos) / xAxis.len) : 0.5, fixToY = mouseY ? ((mouseY - yAxis.pos) / yAxis.len) : 0.5, newXMin = centerX - newXRange * fixToX, newYMin = centerY - newYRange * fixToY, newExt = chart.fitToBox({
  241. x: newXMin,
  242. y: newYMin,
  243. width: newXRange,
  244. height: newYRange
  245. }, {
  246. x: xAxis.dataMin,
  247. y: yAxis.dataMin,
  248. width: xAxis.dataMax - xAxis.dataMin,
  249. height: yAxis.dataMax - yAxis.dataMin
  250. }), zoomOut = (newExt.x <= xAxis.dataMin &&
  251. newExt.width >=
  252. xAxis.dataMax - xAxis.dataMin &&
  253. newExt.y <= yAxis.dataMin &&
  254. newExt.height >= yAxis.dataMax - yAxis.dataMin);
  255. // When mousewheel zooming, fix the point under the mouse
  256. if (mouseX && xAxis.mapAxis) {
  257. xAxis.mapAxis.fixTo = [mouseX - xAxis.pos, centerXArg];
  258. }
  259. if (mouseY && yAxis.mapAxis) {
  260. yAxis.mapAxis.fixTo = [mouseY - yAxis.pos, centerYArg];
  261. }
  262. // Zoom
  263. if (typeof howMuch !== 'undefined' && !zoomOut) {
  264. xAxis.setExtremes(newExt.x, newExt.x + newExt.width, false);
  265. yAxis.setExtremes(newExt.y, newExt.y + newExt.height, false);
  266. // Reset zoom
  267. }
  268. else {
  269. xAxis.setExtremes(void 0, void 0, false);
  270. yAxis.setExtremes(void 0, void 0, false);
  271. }
  272. // Prevent zooming until this one is finished animating
  273. /*
  274. chart.holdMapZoom = true;
  275. setTimeout(function () {
  276. chart.holdMapZoom = false;
  277. }, 200);
  278. */
  279. /*
  280. delay = animation ? animation.duration || 500 : 0;
  281. if (delay) {
  282. chart.isMapZooming = true;
  283. setTimeout(function () {
  284. chart.isMapZooming = false;
  285. if (chart.mapZoomQueue) {
  286. chart.mapZoom.apply(chart, chart.mapZoomQueue);
  287. }
  288. chart.mapZoomQueue = null;
  289. }, delay);
  290. }
  291. */
  292. chart.redraw();
  293. }
  294. });
  295. // Extend the Chart.render method to add zooming and panning
  296. addEvent(Chart, 'beforeRender', function () {
  297. // Render the plus and minus buttons. Doing this before the shapes makes
  298. // getBBox much quicker, at least in Chrome.
  299. this.mapNavigation = new MapNavigation(this);
  300. this.mapNavigation.update();
  301. });
  302. H.MapNavigation = MapNavigation;