draggable-points.src.js 94 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288
  1. /**
  2. * @license Highcharts JS v8.0.0 (2019-12-10)
  3. *
  4. * (c) 2009-2019 Torstein Honsi
  5. *
  6. * License: www.highcharts.com/license
  7. */
  8. 'use strict';
  9. (function (factory) {
  10. if (typeof module === 'object' && module.exports) {
  11. factory['default'] = factory;
  12. module.exports = factory;
  13. } else if (typeof define === 'function' && define.amd) {
  14. define('highcharts/modules/draggable-points', ['highcharts'], function (Highcharts) {
  15. factory(Highcharts);
  16. factory.Highcharts = Highcharts;
  17. return factory;
  18. });
  19. } else {
  20. factory(typeof Highcharts !== 'undefined' ? Highcharts : undefined);
  21. }
  22. }(function (Highcharts) {
  23. var _modules = Highcharts ? Highcharts._modules : {};
  24. function _registerModule(obj, path, args, fn) {
  25. if (!obj.hasOwnProperty(path)) {
  26. obj[path] = fn.apply(null, args);
  27. }
  28. }
  29. _registerModule(_modules, 'modules/draggable-points.src.js', [_modules['parts/Globals.js'], _modules['parts/Utilities.js']], function (H, U) {
  30. /* *
  31. *
  32. * (c) 2009-2019 Highsoft AS
  33. *
  34. * Authors: Øystein Moseng, Torstein Hønsi, Jon A. Nygård
  35. *
  36. * License: www.highcharts.com/license
  37. *
  38. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  39. *
  40. * */
  41. /**
  42. * Current drag and drop position.
  43. *
  44. * @interface Highcharts.DragDropPositionObject
  45. */ /**
  46. * Chart x position
  47. * @name Highcharts.DragDropPositionObject#chartX
  48. * @type {number}
  49. */ /**
  50. * Chart y position
  51. * @name Highcharts.DragDropPositionObject#chartY
  52. * @type {number}
  53. */ /**
  54. * Drag and drop guide box.
  55. * @name Highcharts.DragDropPositionObject#guideBox
  56. * @type {Highcharts.BBoxObject|undefined}
  57. */ /**
  58. * Updated point data.
  59. * @name Highcharts.DragDropPositionObject#points
  60. * @type {Highcharts.Dictionary<Highcharts.Dictionary<number>>}
  61. */ /**
  62. * Delta of previous x position.
  63. * @name Highcharts.DragDropPositionObject#prevdX
  64. * @type {number|undefined}
  65. */ /**
  66. * Delta of previous y position.
  67. * @name Highcharts.DragDropPositionObject#prevdY
  68. * @type {number|undefined}
  69. */
  70. /**
  71. * Function callback to execute while series points are dragged. Return false to
  72. * stop the default drag action.
  73. *
  74. * @callback Highcharts.PointDragCallbackFunction
  75. *
  76. * @param {Highcharts.Point} this
  77. * Point where the event occured.
  78. *
  79. * @param {Highcharts.PointDragEventObject} event
  80. * Event arguments.
  81. */
  82. /**
  83. * Contains information about a points new values.
  84. *
  85. * @interface Highcharts.PointDragDropObject
  86. */ /**
  87. * New values.
  88. * @name Highcharts.PointDragDropObject#newValues
  89. * @type {Highcharts.Dictionary<number>}
  90. */ /**
  91. * Updated point.
  92. * @name Highcharts.PointDragDropObject#point
  93. * @type {Highcharts.Point}
  94. */
  95. /**
  96. * Contains common information for a drag event on series points.
  97. *
  98. * @interface Highcharts.PointDragEventObject
  99. */ /**
  100. * New point after drag if only a single one.
  101. * @name Highcharts.PointDropEventObject#newPoint
  102. * @type {Highcharts.PointDragDropObject|undefined}
  103. */ /**
  104. * New point id after drag if only a single one.
  105. * @name Highcharts.PointDropEventObject#newPointId
  106. * @type {string|undefined}
  107. */ /**
  108. * New points during drag.
  109. * @name Highcharts.PointDragEventObject#newPoints
  110. * @type {Highcharts.Dictionary<Highcharts.PointDragDropObject>}
  111. */ /**
  112. * Original data.
  113. * @name Highcharts.PointDragEventObject#origin
  114. * @type {Highcharts.DragDropPositionObject}
  115. */ /**
  116. * Prevent default drag action.
  117. * @name Highcharts.PointDragEventObject#preventDefault
  118. * @type {Function}
  119. */ /**
  120. * Target point that caused the event.
  121. * @name Highcharts.PointDragEventObject#target
  122. * @type {Highcharts.Point}
  123. */ /**
  124. * Event type.
  125. * @name Highcharts.PointDragEventObject#type
  126. * @type {"drag"}
  127. */
  128. /**
  129. * Function callback to execute when a series point is dragged.
  130. *
  131. * @callback Highcharts.PointDragStartCallbackFunction
  132. *
  133. * @param {Highcharts.Point} this
  134. * Point where the event occured.
  135. *
  136. * @param {Highcharts.PointDragStartEventObject} event
  137. * Event arguments.
  138. */
  139. /**
  140. * Contains common information for a drag event on series point.
  141. *
  142. * @interface Highcharts.PointDragStartEventObject
  143. * @extends global.MouseEvent
  144. */ /**
  145. * Data property being dragged.
  146. * @name Highcharts.PointDragStartEventObject#updateProp
  147. * @type {string|undefined}
  148. */
  149. /**
  150. * Function callback to execute when series points are dropped.
  151. *
  152. * @callback Highcharts.PointDropCallbackFunction
  153. *
  154. * @param {Highcharts.Point} this
  155. * Point where the event occured.
  156. *
  157. * @param {Highcharts.PointDropEventObject} event
  158. * Event arguments.
  159. */
  160. /**
  161. * Contains common information for a drop event on series points.
  162. *
  163. * @interface Highcharts.PointDropEventObject
  164. */ /**
  165. * New point after drop if only a single one.
  166. * @name Highcharts.PointDropEventObject#newPoint
  167. * @type {Highcharts.PointDragDropObject|undefined}
  168. */ /**
  169. * New point id after drop if only a single one.
  170. * @name Highcharts.PointDropEventObject#newPointId
  171. * @type {string|undefined}
  172. */ /**
  173. * New points after drop.
  174. * @name Highcharts.PointDropEventObject#newPoints
  175. * @type {Highcharts.Dictionary<Highcharts.PointDragDropObject>}
  176. */ /**
  177. * Number of new points.
  178. * @name Highcharts.PointDropEventObject#numNewPoints
  179. * @type {number}
  180. */ /**
  181. * Original data.
  182. * @name Highcharts.PointDropEventObject#origin
  183. * @type {Highcharts.DragDropPositionObject}
  184. */ /**
  185. * Prevent default drop action.
  186. * @name Highcharts.PointDropEventObject#preventDefault
  187. * @type {Function}
  188. */ /**
  189. * Target point that caused the event.
  190. * @name Highcharts.PointDropEventObject#target
  191. * @type {Highcharts.Point}
  192. */ /**
  193. * Event type.
  194. * @name Highcharts.PointDropEventObject#type
  195. * @type {"drop"}
  196. */
  197. var clamp = U.clamp, objectEach = U.objectEach, pick = U.pick;
  198. var addEvent = H.addEvent, merge = H.merge, seriesTypes = H.seriesTypes;
  199. /**
  200. * Flip a side property, used with resizeRect. If input side is "left", return
  201. * "right" etc.
  202. *
  203. * @private
  204. * @function flipResizeSide
  205. *
  206. * @param {string} side
  207. * Side prop to flip. Can be `left`, `right`, `top` or `bottom`.
  208. *
  209. * @return {"bottom"|"left"|"right"|"top"|undefined}
  210. * The flipped side.
  211. */
  212. function flipResizeSide(side) {
  213. return {
  214. left: 'right',
  215. right: 'left',
  216. top: 'bottom',
  217. bottom: 'top'
  218. }[side];
  219. }
  220. /* @todo
  221. Add drag/drop support to specific data props for different series types.
  222. The dragDrop.draggableX/Y user options on series enable/disable all of these per
  223. irection unless they are specifically set in options using
  224. dragDrop.{optionName}. If the prop does not specify an optionName here, it can
  225. only be enabled/disabled by the user with draggableX/Y.
  226. Supported options for each prop:
  227. optionName: User option in series.dragDrop that enables/disables
  228. dragging this prop.
  229. axis: Can be 'x' or 'y'. Whether this prop is linked to x or y axis.
  230. move: Whether or not this prop should be updated when moving points.
  231. resize: Whether or not to draw a drag handle and allow user to drag and
  232. update this prop by itself.
  233. beforeResize: Hook to perform tasks before a resize is made. Gets
  234. the guide box, the new points values, and the point as args.
  235. resizeSide: Which side of the guide box to resize when dragging the
  236. handle. Can be "left", "right", "top", "bottom". Chart.inverted is
  237. handled automatically. Can also be a function, taking the new point
  238. values as parameter, as well as the point, and returning a string
  239. with the side.
  240. propValidate: Function that takes the prop value and the point as
  241. arguments, and returns true if the prop value is valid, false if
  242. not. It is used to prevent e.g. resizing "low" above "high".
  243. handlePositioner: For resizeable props, return 0,0 in SVG plot coords of
  244. where to place the dragHandle. Gets point as argument. Should return
  245. object with x and y properties.
  246. handleFormatter: For resizeable props, return the path of the drag
  247. handle as an SVG path array. Gets the point as argument. The handle
  248. is translated according to handlePositioner.
  249. handleOptions: Options to merge with the default handle options.
  250. TODO:
  251. - It makes sense to have support for resizing the size of bubbles and
  252. e.g variwide columns. This requires us to support dragging along a
  253. z-axis, somehow computing a relative value from old to new pixel
  254. size.
  255. - Moving maps could be useful, although we would have to compute new
  256. point.path values in order to do it properly (using SVG translate
  257. is easier, but won't update the data).
  258. */
  259. // 90deg rotated column handle path, used in multiple series types
  260. var horizHandleFormatter = function (point) {
  261. var shapeArgs = point.shapeArgs || point.graphic.getBBox(), top = shapeArgs.r || 0, // Rounding of bar corners
  262. bottom = shapeArgs.height - top, centerY = shapeArgs.height / 2;
  263. return [
  264. // Top wick
  265. 'M', 0, top,
  266. 'L', 0, centerY - 5,
  267. // Circle
  268. 'A', 1, 1, 0, 0, 0, 0, centerY + 5,
  269. 'A', 1, 1, 0, 0, 0, 0, centerY - 5,
  270. // Bottom wick
  271. 'M', 0, centerY + 5,
  272. 'L', 0, bottom
  273. ];
  274. };
  275. // Line series - only draggableX/Y, no drag handles
  276. var lineDragDropProps = seriesTypes.line.prototype.dragDropProps = {
  277. x: {
  278. axis: 'x',
  279. move: true
  280. },
  281. y: {
  282. axis: 'y',
  283. move: true
  284. }
  285. };
  286. // Flag series - same as line/scatter
  287. if (seriesTypes.flags) {
  288. seriesTypes.flags.prototype.dragDropProps = lineDragDropProps;
  289. }
  290. // Column series - x can be moved, y can only be resized. Note extra
  291. // functionality for handling upside down columns (below threshold).
  292. var columnDragDropProps = seriesTypes.column.prototype.dragDropProps = {
  293. x: {
  294. axis: 'x',
  295. move: true
  296. },
  297. y: {
  298. axis: 'y',
  299. move: false,
  300. resize: true,
  301. // Force guideBox start coordinates
  302. beforeResize: function (guideBox, pointVals, point) {
  303. // We need to ensure that guideBox always starts at threshold.
  304. // We flip whether or not we update the top or bottom of the guide
  305. // box at threshold, but if we drag the mouse fast, the top has not
  306. // reached threshold before we cross over and update the bottom.
  307. var threshold = point.series.translatedThreshold, y = guideBox.attr('y'), height, diff;
  308. if (pointVals.y >= point.series.options.threshold || 0) {
  309. // Above threshold - always set height to hit the threshold
  310. height = guideBox.attr('height');
  311. diff = threshold ?
  312. threshold - (y + height) :
  313. 0;
  314. guideBox.attr({
  315. height: Math.max(0, Math.round(height + diff))
  316. });
  317. }
  318. else {
  319. // Below - always set y to start at threshold
  320. guideBox.attr({
  321. y: Math.round(y + (threshold ? threshold - y : 0))
  322. });
  323. }
  324. },
  325. // Flip the side of the resize handle if column is below threshold.
  326. // Make sure we remove the handle on the other side.
  327. resizeSide: function (pointVals, point) {
  328. var chart = point.series.chart, dragHandles = chart.dragHandles, side = pointVals.y >= (point.series.options.threshold || 0) ?
  329. 'top' : 'bottom', flipSide = flipResizeSide(side);
  330. // Force remove handle on other side
  331. if (dragHandles[flipSide]) {
  332. dragHandles[flipSide].destroy();
  333. delete dragHandles[flipSide];
  334. }
  335. return side;
  336. },
  337. // Position handle at bottom if column is below threshold
  338. handlePositioner: function (point) {
  339. var bBox = point.shapeArgs || point.graphic.getBBox();
  340. return {
  341. x: bBox.x,
  342. y: point.y >= (point.series.options.threshold || 0) ?
  343. bBox.y : bBox.y + bBox.height
  344. };
  345. },
  346. // Horizontal handle
  347. handleFormatter: function (point) {
  348. var shapeArgs = point.shapeArgs, radius = shapeArgs.r || 0, // Rounding of bar corners
  349. centerX = shapeArgs.width / 2;
  350. return [
  351. // Left wick
  352. 'M', radius, 0,
  353. 'L', centerX - 5, 0,
  354. // Circle
  355. 'A', 1, 1, 0, 0, 0, centerX + 5, 0,
  356. 'A', 1, 1, 0, 0, 0, centerX - 5, 0,
  357. // Right wick
  358. 'M', centerX + 5, 0,
  359. 'L', shapeArgs.width - radius, 0
  360. ];
  361. }
  362. }
  363. };
  364. // Bullet graph, x/y same as column, but also allow target to be dragged.
  365. if (seriesTypes.bullet) {
  366. seriesTypes.bullet.prototype.dragDropProps = {
  367. x: columnDragDropProps.x,
  368. y: columnDragDropProps.y,
  369. /**
  370. * Allow target value to be dragged individually.
  371. *
  372. * @type {boolean}
  373. * @default true
  374. * @requires modules/draggable-points
  375. * @apioption plotOptions.bullet.dragDrop.draggableTarget
  376. */
  377. target: {
  378. optionName: 'draggableTarget',
  379. axis: 'y',
  380. move: true,
  381. resize: true,
  382. resizeSide: 'top',
  383. handlePositioner: function (point) {
  384. var bBox = point.targetGraphic.getBBox();
  385. return {
  386. x: point.barX,
  387. y: bBox.y + bBox.height / 2
  388. };
  389. },
  390. handleFormatter: columnDragDropProps.y.handleFormatter
  391. }
  392. };
  393. }
  394. // Columnrange series - move x, resize or move low/high
  395. if (seriesTypes.columnrange) {
  396. seriesTypes.columnrange.prototype.dragDropProps = {
  397. x: {
  398. axis: 'x',
  399. move: true
  400. },
  401. /**
  402. * Allow low value to be dragged individually.
  403. *
  404. * @type {boolean}
  405. * @default true
  406. * @requires modules/draggable-points
  407. * @apioption plotOptions.columnrange.dragDrop.draggableLow
  408. */
  409. low: {
  410. optionName: 'draggableLow',
  411. axis: 'y',
  412. move: true,
  413. resize: true,
  414. resizeSide: 'bottom',
  415. handlePositioner: function (point) {
  416. var bBox = point.shapeArgs || point.graphic.getBBox();
  417. return {
  418. x: bBox.x,
  419. y: bBox.y + bBox.height
  420. };
  421. },
  422. handleFormatter: columnDragDropProps.y.handleFormatter,
  423. propValidate: function (val, point) {
  424. return val <= point.high;
  425. }
  426. },
  427. /**
  428. * Allow high value to be dragged individually.
  429. *
  430. * @type {boolean}
  431. * @default true
  432. * @requires modules/draggable-points
  433. * @apioption plotOptions.columnrange.dragDrop.draggableHigh
  434. */
  435. high: {
  436. optionName: 'draggableHigh',
  437. axis: 'y',
  438. move: true,
  439. resize: true,
  440. resizeSide: 'top',
  441. handlePositioner: function (point) {
  442. var bBox = point.shapeArgs || point.graphic.getBBox();
  443. return {
  444. x: bBox.x,
  445. y: bBox.y
  446. };
  447. },
  448. handleFormatter: columnDragDropProps.y.handleFormatter,
  449. propValidate: function (val, point) {
  450. return val >= point.low;
  451. }
  452. }
  453. };
  454. }
  455. // Boxplot series - move x, resize or move low/q1/q3/high
  456. if (seriesTypes.boxplot) {
  457. seriesTypes.boxplot.prototype.dragDropProps = {
  458. x: columnDragDropProps.x,
  459. /**
  460. * Allow low value to be dragged individually.
  461. *
  462. * @type {boolean}
  463. * @default true
  464. * @requires modules/draggable-points
  465. * @apioption plotOptions.boxplot.dragDrop.draggableLow
  466. */
  467. low: {
  468. optionName: 'draggableLow',
  469. axis: 'y',
  470. move: true,
  471. resize: true,
  472. resizeSide: 'bottom',
  473. handlePositioner: function (point) {
  474. return {
  475. x: point.shapeArgs.x,
  476. y: point.lowPlot
  477. };
  478. },
  479. handleFormatter: columnDragDropProps.y.handleFormatter,
  480. propValidate: function (val, point) {
  481. return val <= point.q1;
  482. }
  483. },
  484. /**
  485. * Allow Q1 value to be dragged individually.
  486. *
  487. * @type {boolean}
  488. * @default true
  489. * @requires modules/draggable-points
  490. * @apioption plotOptions.boxplot.dragDrop.draggableQ1
  491. */
  492. q1: {
  493. optionName: 'draggableQ1',
  494. axis: 'y',
  495. move: true,
  496. resize: true,
  497. resizeSide: 'bottom',
  498. handlePositioner: function (point) {
  499. return {
  500. x: point.shapeArgs.x,
  501. y: point.q1Plot
  502. };
  503. },
  504. handleFormatter: columnDragDropProps.y.handleFormatter,
  505. propValidate: function (val, point) {
  506. return val <= point.median && val >= point.low;
  507. }
  508. },
  509. median: {
  510. // Median can not be dragged individually, just move the whole
  511. // point for this.
  512. axis: 'y',
  513. move: true
  514. },
  515. /**
  516. * Allow Q3 value to be dragged individually.
  517. *
  518. * @type {boolean}
  519. * @default true
  520. * @requires modules/draggable-points
  521. * @apioption plotOptions.boxplot.dragDrop.draggableQ3
  522. */
  523. q3: {
  524. optionName: 'draggableQ3',
  525. axis: 'y',
  526. move: true,
  527. resize: true,
  528. resizeSide: 'top',
  529. handlePositioner: function (point) {
  530. return {
  531. x: point.shapeArgs.x,
  532. y: point.q3Plot
  533. };
  534. },
  535. handleFormatter: columnDragDropProps.y.handleFormatter,
  536. propValidate: function (val, point) {
  537. return val <= point.high && val >= point.median;
  538. }
  539. },
  540. /**
  541. * Allow high value to be dragged individually.
  542. *
  543. * @type {boolean}
  544. * @default true
  545. * @requires modules/draggable-points
  546. * @apioption plotOptions.boxplot.dragDrop.draggableHigh
  547. */
  548. high: {
  549. optionName: 'draggableHigh',
  550. axis: 'y',
  551. move: true,
  552. resize: true,
  553. resizeSide: 'top',
  554. handlePositioner: function (point) {
  555. return {
  556. x: point.shapeArgs.x,
  557. y: point.highPlot
  558. };
  559. },
  560. handleFormatter: columnDragDropProps.y.handleFormatter,
  561. propValidate: function (val, point) {
  562. return val >= point.q3;
  563. }
  564. }
  565. };
  566. }
  567. // OHLC series - move x, resize or move open/high/low/close
  568. if (seriesTypes.ohlc) {
  569. seriesTypes.ohlc.prototype.dragDropProps = {
  570. x: columnDragDropProps.x,
  571. /**
  572. * Allow low value to be dragged individually.
  573. *
  574. * @type {boolean}
  575. * @default true
  576. * @requires modules/draggable-points
  577. * @apioption plotOptions.ohlc.dragDrop.draggableLow
  578. */
  579. low: {
  580. optionName: 'draggableLow',
  581. axis: 'y',
  582. move: true,
  583. resize: true,
  584. resizeSide: 'bottom',
  585. handlePositioner: function (point) {
  586. return {
  587. x: point.shapeArgs.x,
  588. y: point.plotLow
  589. };
  590. },
  591. handleFormatter: columnDragDropProps.y.handleFormatter,
  592. propValidate: function (val, point) {
  593. return val <= point.open && val <= point.close;
  594. }
  595. },
  596. /**
  597. * Allow high value to be dragged individually.
  598. *
  599. * @type {boolean}
  600. * @default true
  601. * @requires modules/draggable-points
  602. * @apioption plotOptions.ohlc.dragDrop.draggableHigh
  603. */
  604. high: {
  605. optionName: 'draggableHigh',
  606. axis: 'y',
  607. move: true,
  608. resize: true,
  609. resizeSide: 'top',
  610. handlePositioner: function (point) {
  611. return {
  612. x: point.shapeArgs.x,
  613. y: point.plotHigh
  614. };
  615. },
  616. handleFormatter: columnDragDropProps.y.handleFormatter,
  617. propValidate: function (val, point) {
  618. return val >= point.open && val >= point.close;
  619. }
  620. },
  621. /**
  622. * Allow open value to be dragged individually.
  623. *
  624. * @type {boolean}
  625. * @default true
  626. * @requires modules/draggable-points
  627. * @apioption plotOptions.ohlc.dragDrop.draggableOpen
  628. */
  629. open: {
  630. optionName: 'draggableOpen',
  631. axis: 'y',
  632. move: true,
  633. resize: true,
  634. resizeSide: function (point) {
  635. return point.open >= point.close ? 'top' : 'bottom';
  636. },
  637. handlePositioner: function (point) {
  638. return {
  639. x: point.shapeArgs.x,
  640. y: point.plotOpen
  641. };
  642. },
  643. handleFormatter: columnDragDropProps.y.handleFormatter,
  644. propValidate: function (val, point) {
  645. return val <= point.high && val >= point.low;
  646. }
  647. },
  648. /**
  649. * Allow close value to be dragged individually.
  650. *
  651. * @type {boolean}
  652. * @default true
  653. * @requires modules/draggable-points
  654. * @apioption plotOptions.ohlc.dragDrop.draggableClose
  655. */
  656. close: {
  657. optionName: 'draggableClose',
  658. axis: 'y',
  659. move: true,
  660. resize: true,
  661. resizeSide: function (point) {
  662. return point.open >= point.close ? 'bottom' : 'top';
  663. },
  664. handlePositioner: function (point) {
  665. return {
  666. x: point.shapeArgs.x,
  667. y: point.plotClose
  668. };
  669. },
  670. handleFormatter: columnDragDropProps.y.handleFormatter,
  671. propValidate: function (val, point) {
  672. return val <= point.high && val >= point.low;
  673. }
  674. }
  675. };
  676. }
  677. // Arearange series - move x, resize or move low/high
  678. if (seriesTypes.arearange) {
  679. var columnrangeDragDropProps = seriesTypes.columnrange.prototype.dragDropProps,
  680. // Use a circle covering the marker as drag handle
  681. arearangeHandleFormatter = function (point) {
  682. var radius = point.graphic ?
  683. point.graphic.getBBox().width / 2 + 1 :
  684. 4;
  685. return [
  686. 'M', 0 - radius, 0,
  687. 'a', radius, radius, 0, 1, 0, radius * 2, 0,
  688. 'a', radius, radius, 0, 1, 0, radius * -2, 0
  689. ];
  690. };
  691. seriesTypes.arearange.prototype.dragDropProps = {
  692. x: columnrangeDragDropProps.x,
  693. /**
  694. * Allow low value to be dragged individually.
  695. *
  696. * @type {boolean}
  697. * @default true
  698. * @requires modules/draggable-points
  699. * @apioption plotOptions.arearange.dragDrop.draggableLow
  700. */
  701. low: {
  702. optionName: 'draggableLow',
  703. axis: 'y',
  704. move: true,
  705. resize: true,
  706. resizeSide: 'bottom',
  707. handlePositioner: function (point) {
  708. var bBox = point.lowerGraphic && point.lowerGraphic.getBBox();
  709. return bBox ? {
  710. x: bBox.x + bBox.width / 2,
  711. y: bBox.y + bBox.height / 2
  712. } : { x: -999, y: -999 };
  713. },
  714. handleFormatter: arearangeHandleFormatter,
  715. propValidate: columnrangeDragDropProps.low.propValidate
  716. },
  717. /**
  718. * Allow high value to be dragged individually.
  719. *
  720. * @type {boolean}
  721. * @default true
  722. * @requires modules/draggable-points
  723. * @apioption plotOptions.arearange.dragDrop.draggableHigh
  724. */
  725. high: {
  726. optionName: 'draggableHigh',
  727. axis: 'y',
  728. move: true,
  729. resize: true,
  730. resizeSide: 'top',
  731. handlePositioner: function (point) {
  732. var bBox = point.upperGraphic && point.upperGraphic.getBBox();
  733. return bBox ? {
  734. x: bBox.x + bBox.width / 2,
  735. y: bBox.y + bBox.height / 2
  736. } : { x: -999, y: -999 };
  737. },
  738. handleFormatter: arearangeHandleFormatter,
  739. propValidate: columnrangeDragDropProps.high.propValidate
  740. }
  741. };
  742. }
  743. // Waterfall - mostly as column, but don't show drag handles for sum points
  744. if (seriesTypes.waterfall) {
  745. seriesTypes.waterfall.prototype.dragDropProps = {
  746. x: columnDragDropProps.x,
  747. y: merge(columnDragDropProps.y, {
  748. handleFormatter: function (point) {
  749. return point.isSum || point.isIntermediateSum ? null :
  750. columnDragDropProps.y.handleFormatter(point);
  751. }
  752. })
  753. };
  754. }
  755. // Xrange - resize/move x/x2, and move y
  756. if (seriesTypes.xrange) {
  757. // Handle positioner logic is the same for x and x2 apart from the
  758. // x value. shapeArgs does not take yAxis reversed etc into account, so we
  759. // use axis.toPixels to handle positioning.
  760. var xrangeHandlePositioner = function (point, xProp) {
  761. var series = point.series, xAxis = series.xAxis, yAxis = series.yAxis, inverted = series.chart.inverted,
  762. // Using toPixels handles axis.reversed, but doesn't take
  763. // chart.inverted into account.
  764. newX = xAxis.toPixels(point[xProp], true), newY = yAxis.toPixels(point.y, true);
  765. // Handle chart inverted
  766. if (inverted) {
  767. newX = xAxis.len - newX;
  768. newY = yAxis.len - newY - point.shapeArgs.height / 2;
  769. }
  770. else {
  771. newY -= point.shapeArgs.height / 2;
  772. }
  773. return {
  774. x: Math.round(newX),
  775. y: Math.round(newY)
  776. };
  777. }, xrangeDragDropProps = seriesTypes.xrange.prototype.dragDropProps = {
  778. y: {
  779. axis: 'y',
  780. move: true
  781. },
  782. /**
  783. * Allow x value to be dragged individually.
  784. *
  785. * @type {boolean}
  786. * @default true
  787. * @requires modules/draggable-points
  788. * @apioption plotOptions.xrange.dragDrop.draggableX1
  789. */
  790. x: {
  791. optionName: 'draggableX1',
  792. axis: 'x',
  793. move: true,
  794. resize: true,
  795. resizeSide: 'left',
  796. handlePositioner: function (point) {
  797. return xrangeHandlePositioner(point, 'x');
  798. },
  799. handleFormatter: horizHandleFormatter,
  800. propValidate: function (val, point) {
  801. return val <= point.x2;
  802. }
  803. },
  804. /**
  805. * Allow x2 value to be dragged individually.
  806. *
  807. * @type {boolean}
  808. * @default true
  809. * @requires modules/draggable-points
  810. * @apioption plotOptions.xrange.dragDrop.draggableX2
  811. */
  812. x2: {
  813. optionName: 'draggableX2',
  814. axis: 'x',
  815. move: true,
  816. resize: true,
  817. resizeSide: 'right',
  818. handlePositioner: function (point) {
  819. return xrangeHandlePositioner(point, 'x2');
  820. },
  821. handleFormatter: horizHandleFormatter,
  822. propValidate: function (val, point) {
  823. return val >= point.x;
  824. }
  825. }
  826. };
  827. // Gantt - same as xrange, but with aliases
  828. if (seriesTypes.gantt) {
  829. seriesTypes.gantt.prototype.dragDropProps = {
  830. y: xrangeDragDropProps.y,
  831. /**
  832. * Allow start value to be dragged individually.
  833. *
  834. * @type {boolean}
  835. * @default true
  836. * @requires modules/draggable-points
  837. * @apioption plotOptions.gantt.dragDrop.draggableStart
  838. */
  839. start: merge(xrangeDragDropProps.x, {
  840. optionName: 'draggableStart',
  841. // Do not allow individual drag handles for milestones
  842. validateIndividualDrag: function (point) {
  843. return !point.milestone;
  844. }
  845. }),
  846. /**
  847. * Allow end value to be dragged individually.
  848. *
  849. * @type {boolean}
  850. * @default true
  851. * @requires modules/draggable-points
  852. * @apioption plotOptions.gantt.dragDrop.draggableEnd
  853. */
  854. end: merge(xrangeDragDropProps.x2, {
  855. optionName: 'draggableEnd',
  856. // Do not allow individual drag handles for milestones
  857. validateIndividualDrag: function (point) {
  858. return !point.milestone;
  859. }
  860. })
  861. };
  862. }
  863. }
  864. // Don't support certain series types
  865. [
  866. 'gauge',
  867. 'pie',
  868. 'sunburst',
  869. 'wordcloud',
  870. 'sankey',
  871. 'histogram',
  872. 'pareto',
  873. 'vector',
  874. 'windbarb',
  875. 'treemap',
  876. 'bellcurve',
  877. 'sma',
  878. 'map',
  879. 'mapline'
  880. ].forEach(
  881. /**
  882. * @private
  883. * @param {string} type
  884. * Unsupported series type
  885. * @return {void}
  886. */
  887. function (type) {
  888. if (seriesTypes[type]) {
  889. seriesTypes[type].prototype.dragDropProps = null;
  890. }
  891. });
  892. /**
  893. * The draggable-points module allows points to be moved around or modified in
  894. * the chart. In addition to the options mentioned under the `dragDrop` API
  895. * structure, the module fires three events,
  896. * [point.dragStart](plotOptions.series.point.events.dragStart),
  897. * [point.drag](plotOptions.series.point.events.drag) and
  898. * [point.drop](plotOptions.series.point.events.drop).
  899. *
  900. * @sample highcharts/dragdrop/resize-column
  901. * Draggable column and line series
  902. * @sample highcharts/dragdrop/bar-series
  903. * Draggable bar
  904. * @sample highcharts/dragdrop/drag-bubble
  905. * Draggable bubbles
  906. * @sample highcharts/dragdrop/drag-xrange
  907. * Draggable X range series
  908. *
  909. * @declare Highcharts.SeriesDragDropOptionsObject
  910. * @since 6.2.0
  911. * @requires modules/draggable-points
  912. * @apioption plotOptions.series.dragDrop
  913. */
  914. /**
  915. * The amount of pixels to drag the pointer before it counts as a drag
  916. * operation. This prevents drag/drop to fire when just clicking or selecting
  917. * points.
  918. *
  919. * @type {number}
  920. * @default 2
  921. * @since 6.2.0
  922. * @apioption plotOptions.series.dragDrop.dragSensitivity
  923. *
  924. * @private
  925. */
  926. var defaultDragSensitivity = 2;
  927. /**
  928. * Style options for the guide box. The guide box has one state by default, the
  929. * `default` state.
  930. *
  931. * @type {Highcharts.Dictionary<Highcharts.DragDropGuideBoxOptionsObject>}
  932. * @since 6.2.0
  933. * @optionparent plotOptions.series.dragDrop.guideBox
  934. *
  935. * @private
  936. */
  937. var defaultGuideBoxOptions = {
  938. /**
  939. * Style options for the guide box default state.
  940. *
  941. * @declare Highcharts.DragDropGuideBoxOptionsObject
  942. * @since 6.2.0
  943. */
  944. 'default': {
  945. /**
  946. * CSS class name of the guide box in this state. Defaults to
  947. * `highcharts-drag-box-default`.
  948. *
  949. * @since 6.2.0
  950. */
  951. className: 'highcharts-drag-box-default',
  952. /**
  953. * Width of the line around the guide box.
  954. *
  955. * @since 6.2.0
  956. */
  957. lineWidth: 1,
  958. /**
  959. * Color of the border around the guide box.
  960. *
  961. * @type {Highcharts.ColorString}
  962. * @since 6.2.0
  963. */
  964. lineColor: '#888',
  965. /**
  966. * Guide box fill color.
  967. *
  968. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  969. * @since 6.2.0
  970. */
  971. color: 'rgba(0, 0, 0, 0.1)',
  972. /**
  973. * Guide box cursor.
  974. *
  975. * @since 6.2.0
  976. */
  977. cursor: 'move',
  978. /**
  979. * Guide box zIndex.
  980. *
  981. * @since 6.2.0
  982. */
  983. zIndex: 900
  984. }
  985. };
  986. /**
  987. * Options for the drag handles.
  988. *
  989. * @declare Highcharts.DragDropHandleOptionsObject
  990. * @since 6.2.0
  991. * @optionparent plotOptions.series.dragDrop.dragHandle
  992. *
  993. * @private
  994. */
  995. var defaultDragHandleOptions = {
  996. /**
  997. * Function to define the SVG path to use for the drag handles. Takes the
  998. * point as argument. Should return an SVG path in array format. The SVG
  999. * path is automatically positioned on the point.
  1000. *
  1001. * @type {Function}
  1002. * @since 6.2.0
  1003. * @apioption plotOptions.series.dragDrop.dragHandle.pathFormatter
  1004. */
  1005. // pathFormatter: null,
  1006. /**
  1007. * The mouse cursor to use for the drag handles. By default this is
  1008. * intelligently switching between `ew-resize` and `ns-resize` depending on
  1009. * the direction the point is being dragged.
  1010. *
  1011. * @type {string}
  1012. * @since 6.2.0
  1013. * @apioption plotOptions.series.dragDrop.dragHandle.cursor
  1014. */
  1015. // cursor: null,
  1016. /**
  1017. * The class name of the drag handles. Defaults to `highcharts-drag-handle`.
  1018. *
  1019. * @since 6.2.0
  1020. */
  1021. className: 'highcharts-drag-handle',
  1022. /**
  1023. * The fill color of the drag handles.
  1024. *
  1025. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  1026. * @since 6.2.0
  1027. */
  1028. color: '#fff',
  1029. /**
  1030. * The line color of the drag handles.
  1031. *
  1032. * @type {Highcharts.ColorString}
  1033. * @since 6.2.0
  1034. */
  1035. lineColor: 'rgba(0, 0, 0, 0.6)',
  1036. /**
  1037. * The line width for the drag handles.
  1038. *
  1039. * @since 6.2.0
  1040. */
  1041. lineWidth: 1,
  1042. /**
  1043. * The z index for the drag handles.
  1044. *
  1045. * @since 6.2.0
  1046. */
  1047. zIndex: 901
  1048. };
  1049. /**
  1050. * Set the minimum X value the points can be moved to.
  1051. *
  1052. * @sample {gantt} gantt/dragdrop/drag-gantt
  1053. * Limit dragging
  1054. * @sample {highcharts} highcharts/dragdrop/drag-xrange
  1055. * Limit dragging
  1056. *
  1057. * @type {number}
  1058. * @since 6.2.0
  1059. * @apioption plotOptions.series.dragDrop.dragMinX
  1060. */
  1061. /**
  1062. * Set the maximum X value the points can be moved to.
  1063. *
  1064. * @sample {gantt} gantt/dragdrop/drag-gantt
  1065. * Limit dragging
  1066. * @sample {highcharts} highcharts/dragdrop/drag-xrange
  1067. * Limit dragging
  1068. *
  1069. * @type {number}
  1070. * @since 6.2.0
  1071. * @apioption plotOptions.series.dragDrop.dragMaxX
  1072. */
  1073. /**
  1074. * Set the minimum Y value the points can be moved to.
  1075. *
  1076. * @sample {gantt} gantt/dragdrop/drag-gantt
  1077. * Limit dragging
  1078. * @sample {highcharts} highcharts/dragdrop/drag-xrange
  1079. * Limit dragging
  1080. *
  1081. * @type {number}
  1082. * @since 6.2.0
  1083. * @apioption plotOptions.series.dragDrop.dragMinY
  1084. */
  1085. /**
  1086. * Set the maximum Y value the points can be moved to.
  1087. *
  1088. * @sample {gantt} gantt/dragdrop/drag-gantt
  1089. * Limit dragging
  1090. * @sample {highcharts} highcharts/dragdrop/drag-xrange
  1091. * Limit dragging
  1092. *
  1093. * @type {number}
  1094. * @since 6.2.0
  1095. * @apioption plotOptions.series.dragDrop.dragMaxY
  1096. */
  1097. /**
  1098. * The X precision value to drag to for this series. Set to 0 to disable. By
  1099. * default this is disabled, except for category axes, where the default is 1.
  1100. *
  1101. * @type {number}
  1102. * @default 0
  1103. * @since 6.2.0
  1104. * @apioption plotOptions.series.dragDrop.dragPrecisionX
  1105. */
  1106. /**
  1107. * The Y precision value to drag to for this series. Set to 0 to disable. By
  1108. * default this is disabled, except for category axes, where the default is 1.
  1109. *
  1110. * @type {number}
  1111. * @default 0
  1112. * @since 6.2.0
  1113. * @apioption plotOptions.series.dragDrop.dragPrecisionY
  1114. */
  1115. /**
  1116. * Enable dragging in the X dimension.
  1117. *
  1118. * @type {boolean}
  1119. * @since 6.2.0
  1120. * @apioption plotOptions.series.dragDrop.draggableX
  1121. */
  1122. /**
  1123. * Enable dragging in the Y dimension. Note that this is not supported for
  1124. * TreeGrid axes (the default axis type in Gantt charts).
  1125. *
  1126. * @type {boolean}
  1127. * @since 6.2.0
  1128. * @apioption plotOptions.series.dragDrop.draggableY
  1129. */
  1130. /**
  1131. * Group the points by a property. Points with the same property value will be
  1132. * grouped together when moving.
  1133. *
  1134. * @sample {gantt} gantt/dragdrop/drag-gantt
  1135. * Drag grouped points
  1136. * @sample {highcharts} highcharts/dragdrop/drag-xrange
  1137. * Drag grouped points
  1138. *
  1139. * @type {string}
  1140. * @since 6.2.0
  1141. * @apioption plotOptions.series.dragDrop.groupBy
  1142. */
  1143. /**
  1144. * Update points as they are dragged. If false, a guide box is drawn to
  1145. * illustrate the new point size.
  1146. *
  1147. * @sample {gantt} gantt/dragdrop/drag-gantt
  1148. * liveRedraw disabled
  1149. * @sample {highcharts} highcharts/dragdrop/drag-xrange
  1150. * liveRedraw disabled
  1151. *
  1152. * @type {boolean}
  1153. * @default true
  1154. * @since 6.2.0
  1155. * @apioption plotOptions.series.dragDrop.liveRedraw
  1156. */
  1157. /**
  1158. * Set a key to hold when dragging to zoom the chart. This is useful to avoid
  1159. * zooming while moving points. Should be set different than
  1160. * [chart.panKey](#chart.panKey).
  1161. *
  1162. * @type {string}
  1163. * @since 6.2.0
  1164. * @validvalue ["alt", "ctrl", "meta", "shift"]
  1165. * @requires modules/draggable-points
  1166. * @apioption chart.zoomKey
  1167. */
  1168. /**
  1169. * Callback that fires when starting to drag a point. The mouse event object is
  1170. * passed in as an argument. If a drag handle is used, `e.updateProp` is set to
  1171. * the data property being dragged. The `this` context is the point. See
  1172. * [drag and drop options](plotOptions.series.dragDrop).
  1173. *
  1174. * @sample {highcharts} highcharts/dragdrop/drag-xrange
  1175. * Drag events
  1176. *
  1177. * @type {Highcharts.PointDragStartCallbackFunction}
  1178. * @since 6.2.0
  1179. * @requires modules/draggable-points
  1180. * @apioption plotOptions.series.point.events.dragStart
  1181. */
  1182. /**
  1183. * Callback that fires while dragging a point. The mouse event is passed in as
  1184. * parameter. The original data can be accessed from `e.origin`, and the new
  1185. * point values can be accessed from `e.newPoints`. If there is only a single
  1186. * point being updated, it can be accessed from `e.newPoint` for simplicity, and
  1187. * its ID can be accessed from `e.newPointId`. The `this` context is the point
  1188. * being dragged. To stop the default drag action, return false. See
  1189. * [drag and drop options](plotOptions.series.dragDrop).
  1190. *
  1191. * @sample {highcharts} highcharts/dragdrop/drag-xrange
  1192. * Drag events
  1193. *
  1194. * @type {Highcharts.PointDragCallbackFunction}
  1195. * @since 6.2.0
  1196. * @requires modules/draggable-points
  1197. * @apioption plotOptions.series.point.events.drag
  1198. */
  1199. /**
  1200. * Callback that fires when the point is dropped. The parameters passed are the
  1201. * same as for [drag](#plotOptions.series.point.events.drag). To stop the
  1202. * default drop action, return false. See
  1203. * [drag and drop options](plotOptions.series.dragDrop).
  1204. *
  1205. * @sample {highcharts} highcharts/dragdrop/drag-xrange
  1206. * Drag events
  1207. *
  1208. * @type {Highcharts.PointDropCallbackFunction}
  1209. * @since 6.2.0
  1210. * @requires modules/draggable-points
  1211. * @apioption plotOptions.series.point.events.drop
  1212. */
  1213. /**
  1214. * Point specific options for the draggable-points module. Overrides options on
  1215. * `series.dragDrop`.
  1216. *
  1217. * @declare Highcharts.SeriesLineDataDragDropOptions
  1218. * @extends plotOptions.series.dragDrop
  1219. * @since 6.2.0
  1220. * @requires modules/draggable-points
  1221. * @apioption series.line.data.dragDrop
  1222. */
  1223. /**
  1224. * Utility function to test if a series is using drag/drop, looking at its
  1225. * options.
  1226. *
  1227. * @private
  1228. * @function isSeriesDraggable
  1229. * @param {Highcharts.Series} series
  1230. * The series to test.
  1231. * @return {boolean}
  1232. * True if the series is using drag/drop.
  1233. */
  1234. function isSeriesDraggable(series) {
  1235. var props = ['draggableX', 'draggableY'], i;
  1236. // Add optionNames from dragDropProps to the array of props to check for
  1237. objectEach(series.dragDropProps, function (val) {
  1238. if (val.optionName) {
  1239. props.push(val.optionName);
  1240. }
  1241. });
  1242. // Loop over all options we have that could enable dragDrop for this
  1243. // series. If any of them are truthy, this series is draggable.
  1244. i = props.length;
  1245. while (i--) {
  1246. if (series.options.dragDrop[props[i]]) {
  1247. return true;
  1248. }
  1249. }
  1250. }
  1251. /**
  1252. * Utility function to test if a chart should have drag/drop enabled, looking at
  1253. * its options.
  1254. *
  1255. * @private
  1256. * @function isChartDraggable
  1257. * @param {Highcharts.Chart} chart
  1258. * The chart to test.
  1259. * @return {boolean}
  1260. * True if the chart is drag/droppable.
  1261. */
  1262. function isChartDraggable(chart) {
  1263. var i = chart.series ? chart.series.length : 0;
  1264. if (chart.hasCartesianSeries && !chart.polar) {
  1265. while (i--) {
  1266. if (chart.series[i].options.dragDrop &&
  1267. isSeriesDraggable(chart.series[i])) {
  1268. return true;
  1269. }
  1270. }
  1271. }
  1272. }
  1273. /**
  1274. * Utility function to test if a point is movable (any of its props can be
  1275. * dragged by a move, not just individually).
  1276. *
  1277. * @private
  1278. * @function isPointMovable
  1279. * @param {Highcharts.Point} point
  1280. * The point to test.
  1281. * @return {boolean}
  1282. * True if the point is movable.
  1283. */
  1284. function isPointMovable(point) {
  1285. var series = point.series, seriesDragDropOptions = series.options.dragDrop || {}, pointDragDropOptions = point.options && point.options.dragDrop, updateProps = series.dragDropProps, hasMovableX, hasMovableY;
  1286. objectEach(updateProps, function (p) {
  1287. if (p.axis === 'x' && p.move) {
  1288. hasMovableX = true;
  1289. }
  1290. else if (p.axis === 'y' && p.move) {
  1291. hasMovableY = true;
  1292. }
  1293. });
  1294. // We can only move the point if draggableX/Y is set, even if all the
  1295. // individual prop options are set.
  1296. return ((seriesDragDropOptions.draggableX && hasMovableX ||
  1297. seriesDragDropOptions.draggableY && hasMovableY) &&
  1298. !(pointDragDropOptions &&
  1299. pointDragDropOptions.draggableX === false &&
  1300. pointDragDropOptions.draggableY === false) &&
  1301. series.yAxis &&
  1302. series.xAxis);
  1303. }
  1304. /**
  1305. * Take a mouse/touch event and return the event object with chartX/chartY.
  1306. *
  1307. * @private
  1308. * @function getNormalizedEvent
  1309. * @param {global.PointerEvent} e
  1310. * The event to normalize.
  1311. * @param {Highcharts.Chart} chart
  1312. * The related chart.
  1313. * @return {Highcharts.PointerEventLObject}
  1314. * The normalized event.
  1315. */
  1316. function getNormalizedEvent(e, chart) {
  1317. return (typeof e.chartX === 'undefined' ||
  1318. typeof e.chartY === 'undefined' ?
  1319. chart.pointer.normalize(e) :
  1320. e);
  1321. }
  1322. /**
  1323. * Add multiple event listeners with the same handler to the same element.
  1324. *
  1325. * @private
  1326. * @function addEvents
  1327. * @param {T} el
  1328. * The element or object to add listeners to.
  1329. * @param {Array<string>} types
  1330. * Array with the event types this handler should apply to.
  1331. * @param {Function|Highcharts.EventCallbackFunction<T>} fn
  1332. * The function callback to execute when the events are fired.
  1333. * @param {Highcharts.EventOptionsObject} [options]
  1334. * Event options:
  1335. * - `order`: The order the event handler should be called. This opens
  1336. * for having one handler be called before another, independent of in
  1337. * which order they were added.
  1338. * @return {Function}
  1339. * A callback function to remove the added events.
  1340. * @template T
  1341. */
  1342. function addEvents(el, types, fn, options) {
  1343. var removeFuncs = types.map(function (type) {
  1344. return addEvent(el, type, fn, options);
  1345. });
  1346. return function () {
  1347. removeFuncs.forEach(function (fn) {
  1348. fn();
  1349. });
  1350. };
  1351. }
  1352. /**
  1353. * In mousemove events, check that we have dragged mouse further than the
  1354. * dragSensitivity before we call mouseMove handler.
  1355. *
  1356. * @private
  1357. * @function hasDraggedPastSensitivity
  1358. *
  1359. * @param {Highcharts.PointerEventObject} e
  1360. * Mouse move event to test.
  1361. *
  1362. * @param {Highcharts.Chart} chart
  1363. * Chart that has started dragging.
  1364. *
  1365. * @param {number} sensitivity
  1366. * Pixel sensitivity to test against.
  1367. *
  1368. * @return {boolean}
  1369. * True if the event is moved past sensitivity relative to the chart's
  1370. * drag origin.
  1371. */
  1372. function hasDraggedPastSensitivity(e, chart, sensitivity) {
  1373. var orig = chart.dragDropData.origin, oldX = orig.chartX, oldY = orig.chartY, newX = e.chartX, newY = e.chartY, distance = Math.sqrt((newX - oldX) * (newX - oldX) +
  1374. (newY - oldY) * (newY - oldY));
  1375. return distance > sensitivity;
  1376. }
  1377. /**
  1378. * Get a snapshot of points, mouse position, and guide box dimensions
  1379. *
  1380. * @private
  1381. * @function getPositionSnapshot
  1382. *
  1383. * @param {Highcharts.PointerEventObject} e
  1384. * Mouse event with mouse position to snapshot.
  1385. *
  1386. * @param {Array<Highcharts.Point>} points
  1387. * Points to take snapshot of. We store the value of the data properties
  1388. * defined in each series' dragDropProps.
  1389. *
  1390. * @param {Highcharts.SVGElement} [guideBox]
  1391. * The guide box to take snapshot of.
  1392. *
  1393. * @return {object}
  1394. * Snapshot object. Point properties are placed in a hashmap with IDs as
  1395. * keys.
  1396. */
  1397. function getPositionSnapshot(e, points, guideBox) {
  1398. var res = {
  1399. chartX: e.chartX,
  1400. chartY: e.chartY,
  1401. guideBox: guideBox && {
  1402. x: guideBox.attr('x'),
  1403. y: guideBox.attr('y'),
  1404. width: guideBox.attr('width'),
  1405. height: guideBox.attr('height')
  1406. },
  1407. points: {}
  1408. };
  1409. // Loop over the points and add their props
  1410. points.forEach(function (point) {
  1411. var pointProps = {};
  1412. // Add all of the props defined in the series' dragDropProps to the
  1413. // snapshot
  1414. objectEach(point.series.dragDropProps, function (val, key) {
  1415. var axis = point.series[val.axis + 'Axis'];
  1416. pointProps[key] = point[key];
  1417. // Record how far cursor was from the point when drag started.
  1418. // This later will be used to calculate new value according to the
  1419. // current position of the cursor.
  1420. // e.g. `high` value is translated to `highOffset`
  1421. pointProps[key + 'Offset'] =
  1422. // e.g. yAxis.toPixels(point.high), xAxis.toPixels(point.end)
  1423. axis.toPixels(point[key]) -
  1424. (axis.horiz ? e.chartX : e.chartY);
  1425. });
  1426. pointProps.point = point; // Store reference to point
  1427. res.points[point.id] = pointProps;
  1428. });
  1429. return res;
  1430. }
  1431. /**
  1432. * Get a list of points that are grouped with this point. If only one point is
  1433. * in the group, that point is returned by itself in an array.
  1434. *
  1435. * @private
  1436. * @function getGroupedPoints
  1437. * @param {Highcharts.Point} point
  1438. * Point to find group from.
  1439. * @return {Array<Highcharts.Point>}
  1440. * Array of points in this group.
  1441. */
  1442. function getGroupedPoints(point) {
  1443. var series = point.series, points = [], groupKey = series.options.dragDrop.groupBy;
  1444. if (series.isSeriesBoosting) { // #11156
  1445. series.options.data.forEach(function (pointOptions, i) {
  1446. points.push((new series.pointClass()).init(// eslint-disable-line new-cap
  1447. series, pointOptions));
  1448. points[points.length - 1].index = i;
  1449. });
  1450. }
  1451. else {
  1452. points = series.points;
  1453. }
  1454. return point.options[groupKey] ?
  1455. // If we have a grouping option, filter the points by that
  1456. points.filter(function (comparePoint) {
  1457. return comparePoint.options[groupKey] ===
  1458. point.options[groupKey];
  1459. }) :
  1460. // Otherwise return the point by itself only
  1461. [point];
  1462. }
  1463. /**
  1464. * Resize a rect element on one side. The element is modified.
  1465. *
  1466. * @private
  1467. * @function resizeRect
  1468. * @param {Highcharts.SVGElement} rect
  1469. * Rect element to resize.
  1470. * @param {string} updateSide
  1471. * Which side of the rect to update. Can be `left`, `right`, `top` or
  1472. * `bottom`.
  1473. * @param {Highcharts.PositionObject} update
  1474. * Object with x and y properties, detailing how much to resize each
  1475. * dimension.
  1476. * @return {void}
  1477. */
  1478. function resizeRect(rect, updateSide, update) {
  1479. var resizeAttrs;
  1480. switch (updateSide) {
  1481. case 'left':
  1482. resizeAttrs = {
  1483. x: rect.attr('x') + update.x,
  1484. width: Math.max(1, rect.attr('width') - update.x)
  1485. };
  1486. break;
  1487. case 'right':
  1488. resizeAttrs = {
  1489. width: Math.max(1, rect.attr('width') + update.x)
  1490. };
  1491. break;
  1492. case 'top':
  1493. resizeAttrs = {
  1494. y: rect.attr('y') + update.y,
  1495. height: Math.max(1, rect.attr('height') - update.y)
  1496. };
  1497. break;
  1498. case 'bottom':
  1499. resizeAttrs = {
  1500. height: Math.max(1, rect.attr('height') + update.y)
  1501. };
  1502. break;
  1503. default:
  1504. }
  1505. rect.attr(resizeAttrs);
  1506. }
  1507. /**
  1508. * Prepare chart.dragDropData with origin info, and show the guide box.
  1509. *
  1510. * @private
  1511. * @function initDragDrop
  1512. * @param {Highcharts.PointerEventObject} e
  1513. * Mouse event with original mouse position.
  1514. * @param {Highcharts.Point} point
  1515. * The point the dragging started on.
  1516. * @return {void}
  1517. */
  1518. function initDragDrop(e, point) {
  1519. var groupedPoints = getGroupedPoints(point), series = point.series, chart = series.chart, guideBox;
  1520. // If liveRedraw is disabled, show the guide box with the default state
  1521. if (!pick(series.options.dragDrop && series.options.dragDrop.liveRedraw, true)) {
  1522. chart.dragGuideBox = guideBox = series.getGuideBox(groupedPoints);
  1523. chart
  1524. .setGuideBoxState('default', series.options.dragDrop.guideBox)
  1525. .add(series.group);
  1526. }
  1527. // Store some data on the chart to pick up later
  1528. chart.dragDropData = {
  1529. origin: getPositionSnapshot(e, groupedPoints, guideBox),
  1530. point: point,
  1531. groupedPoints: groupedPoints,
  1532. isDragging: true
  1533. };
  1534. }
  1535. /**
  1536. * Calculate new point options from points being dragged.
  1537. *
  1538. * @private
  1539. * @function getNewPoints
  1540. *
  1541. * @param {object} dragDropData
  1542. * A chart's dragDropData with drag/drop origin information, and info on
  1543. * which points are being dragged.
  1544. *
  1545. * @param {Highcharts.PointerEventObject} newPos
  1546. * Event with the new position of the mouse (chartX/Y properties).
  1547. *
  1548. * @return {Highchats.Dictionary<object>}
  1549. * Hashmap with point.id mapped to an object with the original point
  1550. * reference, as well as the new data values.
  1551. */
  1552. function getNewPoints(dragDropData, newPos) {
  1553. var point = dragDropData.point, series = point.series, options = merge(series.options.dragDrop, point.options.dragDrop), updateProps = {}, resizeProp = dragDropData.updateProp, hashmap = {};
  1554. // Go through the data props that can be updated on this series and find out
  1555. // which ones we want to update.
  1556. objectEach(point.series.dragDropProps, function (val, key) {
  1557. // If we are resizing, skip if this key is not the correct one or it
  1558. // is not resizable.
  1559. if (resizeProp && (resizeProp !== key ||
  1560. !val.resize ||
  1561. val.optionName && options[val.optionName] === false)) {
  1562. return;
  1563. }
  1564. // If we are resizing, we now know it is good. If we are moving, check
  1565. // that moving along this axis is enabled, and the prop is movable.
  1566. // If this prop is enabled, add it to be updated.
  1567. if (resizeProp || (val.move &&
  1568. (val.axis === 'x' && options.draggableX ||
  1569. val.axis === 'y' && options.draggableY))) {
  1570. updateProps[key] = val;
  1571. }
  1572. });
  1573. // Go through the points to be updated and get new options for each of them
  1574. (
  1575. // If resizing).forEach(only update the point we are resizing
  1576. resizeProp ?
  1577. [point] :
  1578. dragDropData.groupedPoints).forEach(function (p) {
  1579. hashmap[p.id] = {
  1580. point: p,
  1581. newValues: p.getDropValues(dragDropData.origin, newPos, updateProps)
  1582. };
  1583. });
  1584. return hashmap;
  1585. }
  1586. /**
  1587. * Update the points in a chart from dragDropData.newPoints.
  1588. *
  1589. * @private
  1590. * @function updatePoints
  1591. * @param {Highcharts.Chart} chart
  1592. * A chart with dragDropData.newPoints.
  1593. * @param {boolean} [animate=true]
  1594. * Animate updating points?
  1595. * @return {void}
  1596. */
  1597. function updatePoints(chart, animate) {
  1598. var newPoints = chart.dragDropData.newPoints, animOptions = animate === false ? false : merge({
  1599. duration: 400 // 400 is the default in H.animate
  1600. }, chart.options.chart.animation);
  1601. chart.isDragDropAnimating = true;
  1602. // Update the points
  1603. objectEach(newPoints, function (newPoint) {
  1604. newPoint.point.update(newPoint.newValues, false);
  1605. });
  1606. chart.redraw(animOptions);
  1607. // Clear the isAnimating flag after animation duration is complete.
  1608. // The complete handler for animation seems to have bugs at this time, so
  1609. // we have to use a timeout instead.
  1610. setTimeout(function () {
  1611. delete chart.isDragDropAnimating;
  1612. if (chart.hoverPoint && !chart.dragHandles) {
  1613. chart.hoverPoint.showDragHandles();
  1614. }
  1615. }, animOptions.duration);
  1616. }
  1617. /**
  1618. * Resize the guide box according to point options and a difference in mouse
  1619. * positions. Handles reversed axes.
  1620. *
  1621. * @private
  1622. * @function resizeGuideBox
  1623. * @param {Highcharts.Point} point
  1624. * The point that is being resized.
  1625. * @param {number} dX
  1626. * Difference in X position.
  1627. * @param {number} dY
  1628. * Difference in Y position.
  1629. * @return {void}
  1630. */
  1631. function resizeGuideBox(point, dX, dY) {
  1632. var series = point.series, chart = series.chart, dragDropData = chart.dragDropData, resizeSide, newPoint, resizeProp = series.dragDropProps[dragDropData.updateProp];
  1633. // dragDropProp.resizeSide holds info on which side to resize.
  1634. newPoint = dragDropData.newPoints[point.id].newValues;
  1635. resizeSide = typeof resizeProp.resizeSide === 'function' ?
  1636. resizeProp.resizeSide(newPoint, point) : resizeProp.resizeSide;
  1637. // Call resize hook if it is defined
  1638. if (resizeProp.beforeResize) {
  1639. resizeProp.beforeResize(chart.dragGuideBox, newPoint, point);
  1640. }
  1641. // Do the resize
  1642. resizeRect(chart.dragGuideBox, resizeProp.axis === 'x' && series.xAxis.reversed ||
  1643. resizeProp.axis === 'y' && series.yAxis.reversed ?
  1644. flipResizeSide(resizeSide) : resizeSide, {
  1645. x: resizeProp.axis === 'x' ?
  1646. dX - (dragDropData.origin.prevdX || 0) : 0,
  1647. y: resizeProp.axis === 'y' ?
  1648. dY - (dragDropData.origin.prevdY || 0) : 0
  1649. });
  1650. }
  1651. /**
  1652. * Default mouse move handler while dragging. Handles updating points or guide
  1653. * box.
  1654. *
  1655. * @private
  1656. * @function dragMove
  1657. * @param {Highcharts.PointerEventObject} e
  1658. * The mouse move event.
  1659. * @param {Highcharts.Point} point
  1660. * The point that is dragged.
  1661. * @return {void}
  1662. */
  1663. function dragMove(e, point) {
  1664. var series = point.series, chart = series.chart, data = chart.dragDropData, options = merge(series.options.dragDrop, point.options.dragDrop), draggableX = options.draggableX, draggableY = options.draggableY, origin = data.origin, dX = e.chartX - origin.chartX, dY = e.chartY - origin.chartY, oldDx = dX, updateProp = data.updateProp;
  1665. // Handle inverted
  1666. if (chart.inverted) {
  1667. dX = -dY;
  1668. dY = -oldDx;
  1669. }
  1670. // If we have liveRedraw enabled, update the points immediately. Otherwise
  1671. // update the guideBox.
  1672. if (pick(options.liveRedraw, true)) {
  1673. updatePoints(chart, false);
  1674. // Update drag handles
  1675. point.showDragHandles();
  1676. }
  1677. else {
  1678. // No live redraw, update guide box
  1679. if (updateProp) {
  1680. // We are resizing, so resize the guide box
  1681. resizeGuideBox(point, dX, dY);
  1682. }
  1683. else {
  1684. // We are moving, so move the guide box
  1685. chart.dragGuideBox.translate(draggableX ? dX : 0, draggableY ? dY : 0);
  1686. }
  1687. }
  1688. // Update stored previous dX/Y
  1689. origin.prevdX = dX;
  1690. origin.prevdY = dY;
  1691. }
  1692. /**
  1693. * Set the state of the guide box.
  1694. *
  1695. * @private
  1696. * @function Highcharts.Chart#setGuideBoxState
  1697. * @param {string} state
  1698. * The state to set the guide box to.
  1699. * @param {Highcharts.Dictionary<Highcharts.DragDropGuideBoxOptionsObject>} [options]
  1700. * Additional overall guideBox options to consider.
  1701. * @return {Highcharts.SVGElement}
  1702. * The modified guide box.
  1703. */
  1704. H.Chart.prototype.setGuideBoxState = function (state, options) {
  1705. var guideBox = this.dragGuideBox, guideBoxOptions = merge(defaultGuideBoxOptions, options), stateOptions = merge(guideBoxOptions['default'], // eslint-disable-line dot-notation
  1706. guideBoxOptions[state]);
  1707. return guideBox
  1708. .attr({
  1709. className: stateOptions.className,
  1710. stroke: stateOptions.lineColor,
  1711. strokeWidth: stateOptions.lineWidth,
  1712. fill: stateOptions.color,
  1713. cursor: stateOptions.cursor,
  1714. zIndex: stateOptions.zIndex
  1715. })
  1716. // Use pointerEvents 'none' to avoid capturing the click event
  1717. .css({ pointerEvents: 'none' });
  1718. };
  1719. /**
  1720. * Get updated point values when dragging a point.
  1721. *
  1722. * @private
  1723. * @function Highcharts.Point#getDropValues
  1724. *
  1725. * @param {object} origin
  1726. * Mouse position (chartX/Y) and point props at current data values.
  1727. * Point props should be organized per point.id in a hashmap.
  1728. *
  1729. * @param {Highcharts.PointerEventObject} newPos
  1730. * New mouse position (chartX/Y).
  1731. *
  1732. * @param {Highcharts.Dictionary<Highcharts.Dictionary<Highcharts.Dictionary<string>>>} updateProps
  1733. * Point props to modify. Map of prop objects where each key refers to
  1734. * the prop, and the value is an object with an axis property. Example:
  1735. * {
  1736. * x: {
  1737. * axis: 'x'
  1738. * },
  1739. * x2: {
  1740. * axis: 'x'
  1741. * }
  1742. * }
  1743. *
  1744. * @return {Highcharts.Dictionary<number>}
  1745. * An object with updated data values.
  1746. */
  1747. H.Point.prototype.getDropValues = function (origin, newPos, updateProps) {
  1748. var point = this, series = point.series, options = merge(series.options.dragDrop, point.options.dragDrop), result = {}, updateSingleProp, pointOrigin = origin.points[point.id];
  1749. // Find out if we only have one prop to update
  1750. for (var key in updateProps) {
  1751. if (Object.hasOwnProperty.call(updateProps, key)) {
  1752. if (typeof updateSingleProp !== 'undefined') {
  1753. updateSingleProp = false;
  1754. break;
  1755. }
  1756. updateSingleProp = true;
  1757. }
  1758. }
  1759. /**
  1760. * Utility function to apply precision and limit a value within the
  1761. * draggable range.
  1762. * @private
  1763. * @param {number} val
  1764. * Value to limit
  1765. * @param {string} direction
  1766. * Axis direction
  1767. * @return {number}
  1768. * Limited value
  1769. */
  1770. var limitToRange = function (val, direction) {
  1771. var defaultPrecision = series[direction.toLowerCase() + 'Axis']
  1772. .categories ? 1 : 0, precision = pick(options['dragPrecision' + direction], defaultPrecision), min = pick(options['dragMin' + direction], -Infinity), max = pick(options['dragMax' + direction], Infinity), res = val;
  1773. if (precision) {
  1774. res = Math.round(res / precision) * precision;
  1775. }
  1776. return clamp(res, min, max);
  1777. };
  1778. // Assign new value to property. Adds dX/YValue to the old value, limiting
  1779. // it within min/max ranges.
  1780. objectEach(updateProps, function (val, key) {
  1781. var oldVal = pointOrigin[key], axis = series[val.axis + 'Axis'], newVal = limitToRange(axis.toValue((axis.horiz ? newPos.chartX : newPos.chartY) +
  1782. pointOrigin[key + 'Offset']), val.axis.toUpperCase());
  1783. // If we are updating a single prop, and it has a validation function
  1784. // for the prop, run it. If it fails, don't update the value.
  1785. if (!(updateSingleProp &&
  1786. val.propValidate &&
  1787. !val.propValidate(newVal, point)) &&
  1788. typeof oldVal !== 'undefined') {
  1789. result[key] = newVal;
  1790. }
  1791. });
  1792. return result;
  1793. };
  1794. /**
  1795. * Returns an SVGElement to use as the guide box for a set of points.
  1796. *
  1797. * @private
  1798. * @function Highcharts.Series#getGuideBox
  1799. *
  1800. * @param {Array<Highcharts.Point>} points
  1801. * The state to set the guide box to.
  1802. *
  1803. * @return {Highcharts.SVGElement}
  1804. * An SVG element for the guide box, not added to DOM.
  1805. */
  1806. H.Series.prototype.getGuideBox = function (points) {
  1807. var chart = this.chart, minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity, changed;
  1808. // Find bounding box of all points
  1809. points.forEach(function (point) {
  1810. var bBox = point.graphic && point.graphic.getBBox() || point.shapeArgs;
  1811. if (bBox && (bBox.width || bBox.height || bBox.x || bBox.y)) {
  1812. changed = true;
  1813. minX = Math.min(bBox.x, minX);
  1814. maxX = Math.max(bBox.x + bBox.width, maxX);
  1815. minY = Math.min(bBox.y, minY);
  1816. maxY = Math.max(bBox.y + bBox.height, maxY);
  1817. }
  1818. });
  1819. return changed ? chart.renderer.rect(minX, minY, maxX - minX, maxY - minY) : chart.renderer.g();
  1820. };
  1821. /**
  1822. * On point mouse out. Hide drag handles, depending on state.
  1823. *
  1824. * @private
  1825. * @function mouseOut
  1826. * @param {Highcharts.Point} point
  1827. * The point mousing out of.
  1828. * @return {void}
  1829. */
  1830. function mouseOut(point) {
  1831. var chart = point.series && point.series.chart, dragDropData = chart && chart.dragDropData;
  1832. if (chart &&
  1833. chart.dragHandles &&
  1834. !(dragDropData &&
  1835. (dragDropData.isDragging &&
  1836. dragDropData.draggedPastSensitivity ||
  1837. dragDropData.isHoveringHandle === point.id))) {
  1838. chart.hideDragHandles();
  1839. }
  1840. }
  1841. /**
  1842. * Mouseout on resize handle. Handle states, and possibly run mouseOut on point.
  1843. *
  1844. * @private
  1845. * @function onResizeHandleMouseOut
  1846. * @param {Highcharts.Point} point
  1847. * The point mousing out of.
  1848. * @return {void}
  1849. */
  1850. function onResizeHandleMouseOut(point) {
  1851. var chart = point.series.chart;
  1852. if (chart.dragDropData &&
  1853. point.id === chart.dragDropData.isHoveringHandle) {
  1854. delete chart.dragDropData.isHoveringHandle;
  1855. }
  1856. if (!chart.hoverPoint) {
  1857. mouseOut(point);
  1858. }
  1859. }
  1860. /**
  1861. * Mousedown on resize handle. Init a drag if the conditions are right.
  1862. *
  1863. * @private
  1864. * @function onResizeHandleMouseDown
  1865. * @param {Highcharts.PointerEventObject} e
  1866. * The mousedown event.
  1867. * @param {Highcharts.Point} point
  1868. * The point mousing down on.
  1869. * @param {string} updateProp
  1870. * The data property this resize handle is attached to for this point.
  1871. * @return {void}
  1872. */
  1873. function onResizeHandleMouseDown(e, point, updateProp) {
  1874. var chart = point.series.chart;
  1875. // Ignore if zoom/pan key is pressed
  1876. if (chart.zoomOrPanKeyPressed(e)) {
  1877. return;
  1878. }
  1879. // Prevent zooming
  1880. chart.mouseIsDown = false;
  1881. // We started a drag
  1882. initDragDrop(e, point);
  1883. chart.dragDropData.updateProp =
  1884. e.updateProp = updateProp;
  1885. point.firePointEvent('dragStart', e);
  1886. // Prevent default to avoid point click for dragging too
  1887. e.stopPropagation();
  1888. e.preventDefault();
  1889. }
  1890. /**
  1891. * Render drag handles on a point - depending on which handles are enabled - and
  1892. * attach events to them.
  1893. *
  1894. * @private
  1895. * @function Highcharts.Point#showDragHandles
  1896. * @return {void}
  1897. */
  1898. H.Point.prototype.showDragHandles = function () {
  1899. var point = this, series = point.series, chart = series.chart, renderer = chart.renderer, options = merge(series.options.dragDrop, point.options.dragDrop);
  1900. // Go through each updateProp and see if we are supposed to create a handle
  1901. // for it.
  1902. objectEach(series.dragDropProps, function (val, key) {
  1903. var handleOptions = merge(defaultDragHandleOptions, val.handleOptions, options.dragHandle), handleAttrs = {
  1904. className: handleOptions.className,
  1905. 'stroke-width': handleOptions.lineWidth,
  1906. fill: handleOptions.color,
  1907. stroke: handleOptions.lineColor
  1908. }, pathFormatter = handleOptions.pathFormatter || val.handleFormatter, positioner = val.handlePositioner, pos, handle, handleSide, path,
  1909. // Run validation function on whether or not we allow individual
  1910. // updating of this prop.
  1911. validate = val.validateIndividualDrag ?
  1912. val.validateIndividualDrag(point) : true;
  1913. if (val.resize &&
  1914. validate &&
  1915. val.resizeSide &&
  1916. pathFormatter &&
  1917. (options['draggable' + val.axis.toUpperCase()] ||
  1918. options[val.optionName]) &&
  1919. options[val.optionName] !== false) {
  1920. // Create group if it doesn't exist
  1921. if (!chart.dragHandles) {
  1922. chart.dragHandles = {
  1923. group: renderer
  1924. .g('drag-drop-handles')
  1925. .add(series.markerGroup || series.group)
  1926. };
  1927. }
  1928. // Store which point this is
  1929. chart.dragHandles.point = point.id;
  1930. // Find position and path of handle
  1931. pos = positioner(point);
  1932. handleAttrs.d = path = pathFormatter(point);
  1933. handleSide = typeof val.resizeSide === 'function' ?
  1934. val.resizeSide(point.options, point) : val.resizeSide;
  1935. if (!path || pos.x < 0 || pos.y < 0) {
  1936. return;
  1937. }
  1938. // If cursor is not set explicitly, use axis direction
  1939. handleAttrs.cursor = handleOptions.cursor ||
  1940. (val.axis === 'x') !== !!chart.inverted ?
  1941. 'ew-resize' : 'ns-resize';
  1942. // Create and add the handle element if it doesn't exist
  1943. handle = chart.dragHandles[handleSide];
  1944. if (!handle) {
  1945. handle = chart.dragHandles[handleSide] = renderer
  1946. .path()
  1947. .add(chart.dragHandles.group);
  1948. }
  1949. // Move and update handle
  1950. handle.translate(pos.x, pos.y).attr(handleAttrs);
  1951. // Add events
  1952. addEvents(handle.element, ['touchstart', 'mousedown'], function (e) {
  1953. onResizeHandleMouseDown(getNormalizedEvent(e, chart), point, key);
  1954. });
  1955. addEvent(chart.dragHandles.group.element, 'mouseover', function () {
  1956. chart.dragDropData = chart.dragDropData || {};
  1957. chart.dragDropData.isHoveringHandle = point.id;
  1958. });
  1959. addEvents(chart.dragHandles.group.element, ['touchend', 'mouseout'], function () {
  1960. onResizeHandleMouseOut(point);
  1961. });
  1962. }
  1963. });
  1964. };
  1965. /**
  1966. * Remove the chart's drag handles if they exist.
  1967. *
  1968. * @private
  1969. * @function Highcharts.Chart#hideDragHandles
  1970. * @return {void}
  1971. */
  1972. H.Chart.prototype.hideDragHandles = function () {
  1973. var chart = this;
  1974. if (chart.dragHandles) {
  1975. objectEach(chart.dragHandles, function (val, key) {
  1976. if (key !== 'group' && val.destroy) {
  1977. val.destroy();
  1978. }
  1979. });
  1980. if (chart.dragHandles.group && chart.dragHandles.group.destroy) {
  1981. chart.dragHandles.group.destroy();
  1982. }
  1983. delete chart.dragHandles;
  1984. }
  1985. };
  1986. /**
  1987. * Utility function to count the number of props in an object.
  1988. *
  1989. * @private
  1990. * @function countProps
  1991. *
  1992. * @param {object} obj
  1993. * The object to count.
  1994. *
  1995. * @return {number}
  1996. * Number of own properties on the object.
  1997. */
  1998. function countProps(obj) {
  1999. var count = 0;
  2000. for (var p in obj) {
  2001. if (Object.hasOwnProperty.call(obj, p)) {
  2002. count++;
  2003. }
  2004. }
  2005. return count;
  2006. }
  2007. /**
  2008. * Utility function to get the value of the first prop of an object. (Note that
  2009. * the order of keys in an object is usually not guaranteed.)
  2010. *
  2011. * @private
  2012. * @function getFirstProp
  2013. * @param {Highcharts.Dictionary<T>} obj
  2014. * The object to count.
  2015. * @return {T}
  2016. * Value of the first prop in the object.
  2017. * @template T
  2018. */
  2019. function getFirstProp(obj) {
  2020. for (var p in obj) {
  2021. if (Object.hasOwnProperty.call(obj, p)) {
  2022. return obj[p];
  2023. }
  2024. }
  2025. }
  2026. /**
  2027. * Mouseover on a point. Show drag handles if the conditions are right.
  2028. *
  2029. * @private
  2030. * @function mouseOver
  2031. * @param {Highcharts.Point} point
  2032. * The point mousing over.
  2033. * @return {void}
  2034. */
  2035. function mouseOver(point) {
  2036. var series = point.series, chart = series && series.chart, dragDropData = chart && chart.dragDropData;
  2037. if (chart &&
  2038. !(dragDropData &&
  2039. dragDropData.isDragging && // Ignore if dragging a point
  2040. dragDropData.draggedPastSensitivity) &&
  2041. !chart.isDragDropAnimating && // Ignore if animating
  2042. series.options.dragDrop && // No need to compute handles without this
  2043. !(chart.options &&
  2044. chart.options.chart &&
  2045. chart.options.chart.options3d // No 3D support
  2046. )) {
  2047. // Hide the handles if they exist on another point already
  2048. if (chart.dragHandles) {
  2049. chart.hideDragHandles();
  2050. }
  2051. point.showDragHandles();
  2052. }
  2053. }
  2054. /**
  2055. * On container mouse move. Handle drag sensitivity and fire drag event.
  2056. *
  2057. * @private
  2058. * @function mouseMove
  2059. * @param {Highcharts.PointerEventObject} e
  2060. * The mouse move event.
  2061. * @param {Highcharts.Chart} chart
  2062. * The chart we are moving across.
  2063. * @return {void}
  2064. */
  2065. function mouseMove(e, chart) {
  2066. // Ignore if zoom/pan key is pressed
  2067. if (chart.zoomOrPanKeyPressed(e)) {
  2068. return;
  2069. }
  2070. var dragDropData = chart.dragDropData, point, seriesDragDropOpts, newPoints, numNewPoints = 0, newPoint;
  2071. if (dragDropData && dragDropData.isDragging) {
  2072. point = dragDropData.point;
  2073. seriesDragDropOpts = point.series.options.dragDrop;
  2074. // No tooltip for dragging
  2075. e.preventDefault();
  2076. // Update sensitivity test if not passed yet
  2077. if (!dragDropData.draggedPastSensitivity) {
  2078. dragDropData.draggedPastSensitivity = hasDraggedPastSensitivity(e, chart, pick(point.options.dragDrop &&
  2079. point.options.dragDrop.dragSensitivity, seriesDragDropOpts &&
  2080. seriesDragDropOpts.dragSensitivity, defaultDragSensitivity));
  2081. }
  2082. // If we have dragged past dragSensitivity, run the mousemove handler
  2083. // for dragging
  2084. if (dragDropData.draggedPastSensitivity) {
  2085. // Find the new point values from the moving
  2086. dragDropData.newPoints = getNewPoints(dragDropData, e);
  2087. // If we are only dragging one point, add it to the event
  2088. newPoints = dragDropData.newPoints;
  2089. numNewPoints = countProps(newPoints);
  2090. newPoint = numNewPoints === 1 ?
  2091. getFirstProp(newPoints) :
  2092. null;
  2093. // Run the handler
  2094. point.firePointEvent('drag', {
  2095. origin: dragDropData.origin,
  2096. newPoints: dragDropData.newPoints,
  2097. newPoint: newPoint && newPoint.newValues,
  2098. newPointId: newPoint && newPoint.point.id,
  2099. numNewPoints: numNewPoints,
  2100. chartX: e.chartX,
  2101. chartY: e.chartY
  2102. }, function () {
  2103. dragMove(e, point);
  2104. });
  2105. }
  2106. }
  2107. }
  2108. /**
  2109. * On container mouse up. Fire drop event and reset state.
  2110. *
  2111. * @private
  2112. * @function mouseUp
  2113. * @param {Highcharts.PointerEventObject} e
  2114. * The mouse up event.
  2115. * @param {Highcharts.Chart} chart
  2116. * The chart we were dragging in.
  2117. * @return {void}
  2118. */
  2119. function mouseUp(e, chart) {
  2120. var dragDropData = chart.dragDropData;
  2121. if (dragDropData &&
  2122. dragDropData.isDragging &&
  2123. dragDropData.draggedPastSensitivity) {
  2124. var point = dragDropData.point, newPoints = dragDropData.newPoints, numNewPoints = countProps(newPoints), newPoint = numNewPoints === 1 ?
  2125. getFirstProp(newPoints) :
  2126. null;
  2127. // Hide the drag handles
  2128. if (chart.dragHandles) {
  2129. chart.hideDragHandles();
  2130. }
  2131. // Prevent default action
  2132. e.preventDefault();
  2133. chart.cancelClick = true;
  2134. // Fire the event, with a default handler that updates the points
  2135. point.firePointEvent('drop', {
  2136. origin: dragDropData.origin,
  2137. chartX: e.chartX,
  2138. chartY: e.chartY,
  2139. newPoints: newPoints,
  2140. numNewPoints: numNewPoints,
  2141. newPoint: newPoint && newPoint.newValues,
  2142. newPointId: newPoint && newPoint.point.id
  2143. }, function () {
  2144. updatePoints(chart);
  2145. });
  2146. }
  2147. // Reset
  2148. delete chart.dragDropData;
  2149. // Clean up the drag guide box if it exists. This is always added on
  2150. // drag start, even if user is overriding events.
  2151. if (chart.dragGuideBox) {
  2152. chart.dragGuideBox.destroy();
  2153. delete chart.dragGuideBox;
  2154. }
  2155. }
  2156. /**
  2157. * On container mouse down. Init dragdrop if conditions are right.
  2158. *
  2159. * @private
  2160. * @function mouseDown
  2161. * @param {Highcharts.PointerEventObject} e
  2162. * The mouse down event.
  2163. * @param {Highcharts.Chart} chart
  2164. * The chart we are clicking.
  2165. * @return {void}
  2166. */
  2167. function mouseDown(e, chart) {
  2168. var dragPoint = chart.hoverPoint, dragDropOptions = H.merge(dragPoint && dragPoint.series.options.dragDrop, dragPoint && dragPoint.options.dragDrop), draggableX = dragDropOptions.draggableX || false, draggableY = dragDropOptions.draggableY || false;
  2169. // Reset cancel click
  2170. chart.cancelClick = false;
  2171. // Ignore if:
  2172. if (
  2173. // Option is disabled for the point
  2174. !(draggableX || draggableY) ||
  2175. // Zoom/pan key is pressed
  2176. chart.zoomOrPanKeyPressed(e) ||
  2177. // Dragging an annotation
  2178. chart.hasDraggedAnnotation) {
  2179. return;
  2180. }
  2181. // If we somehow get a mousedown event while we are dragging, cancel
  2182. if (chart.dragDropData && chart.dragDropData.isDragging) {
  2183. mouseUp(e, chart);
  2184. return;
  2185. }
  2186. // If this point is movable, start dragging it
  2187. if (dragPoint && isPointMovable(dragPoint)) {
  2188. chart.mouseIsDown = false; // Prevent zooming
  2189. initDragDrop(e, dragPoint);
  2190. dragPoint.firePointEvent('dragStart', e);
  2191. }
  2192. }
  2193. /* eslint-disable no-invalid-this */
  2194. // Point hover event. We use a short timeout due to issues with coordinating
  2195. // point mouseover/out events on dragHandles and points. Particularly arearange
  2196. // series are finicky since the markers are not individual points. This logic
  2197. // should preferably be improved in the future. Notice that the mouseOut event
  2198. // below must have a shorter timeout to ensure event order.
  2199. addEvent(H.Point, 'mouseOver', function () {
  2200. var point = this;
  2201. setTimeout(function () {
  2202. mouseOver(point);
  2203. }, 12);
  2204. });
  2205. // Point mouseleave event. See above function for explanation of the timeout.
  2206. addEvent(H.Point, 'mouseOut', function () {
  2207. var point = this;
  2208. setTimeout(function () {
  2209. if (point.series) {
  2210. mouseOut(point);
  2211. }
  2212. }, 10);
  2213. });
  2214. // Hide drag handles on a point if it is removed
  2215. addEvent(H.Point, 'remove', function () {
  2216. var chart = this.series.chart, dragHandles = chart.dragHandles;
  2217. if (dragHandles && dragHandles.point === this.id) {
  2218. chart.hideDragHandles();
  2219. }
  2220. });
  2221. /**
  2222. * Check whether the zoomKey or panKey is pressed.
  2223. *
  2224. * @private
  2225. * @function Highcharts.Chart#zoomOrPanKeyPressed
  2226. * @param {global.Event} e
  2227. * A mouse event.
  2228. * @return {boolean}
  2229. * True if the zoom or pan keys are pressed. False otherwise.
  2230. */
  2231. H.Chart.prototype.zoomOrPanKeyPressed = function (e) {
  2232. // Check whether the panKey and zoomKey are set in chart.userOptions
  2233. var chartOptions = this.userOptions.chart || {}, panKey = chartOptions.panKey && chartOptions.panKey + 'Key', zoomKey = chartOptions.zoomKey && chartOptions.zoomKey + 'Key';
  2234. return (e[zoomKey] || e[panKey]);
  2235. };
  2236. /**
  2237. * Add events to document and chart if the chart is draggable.
  2238. *
  2239. * @private
  2240. * @function addDragDropEvents
  2241. * @param {Highcharts.Chart} chart
  2242. * The chart to add events to.
  2243. * @return {void}
  2244. */
  2245. function addDragDropEvents(chart) {
  2246. var container = chart.container, doc = H.doc;
  2247. // Only enable if we have a draggable chart
  2248. if (isChartDraggable(chart)) {
  2249. addEvents(container, ['mousedown', 'touchstart'], function (e) {
  2250. mouseDown(getNormalizedEvent(e, chart), chart);
  2251. });
  2252. addEvents(container, ['mousemove', 'touchmove'], function (e) {
  2253. mouseMove(getNormalizedEvent(e, chart), chart);
  2254. });
  2255. addEvent(container, 'mouseleave', function (e) {
  2256. mouseUp(getNormalizedEvent(e, chart), chart);
  2257. });
  2258. chart.unbindDragDropMouseUp = addEvents(doc, ['mouseup', 'touchend'], function (e) {
  2259. mouseUp(getNormalizedEvent(e, chart), chart);
  2260. });
  2261. // Add flag to avoid doing this again
  2262. chart.hasAddedDragDropEvents = true;
  2263. // Add cleanup to make sure we don't pollute document
  2264. addEvent(chart, 'destroy', function () {
  2265. if (chart.unbindDragDropMouseUp) {
  2266. chart.unbindDragDropMouseUp();
  2267. }
  2268. });
  2269. }
  2270. }
  2271. // Add event listener to Chart.render that checks whether or not we should add
  2272. // dragdrop.
  2273. addEvent(H.Chart, 'render', function () {
  2274. // If we don't have dragDrop events, see if we should add them
  2275. if (!this.hasAddedDragDropEvents) {
  2276. addDragDropEvents(this);
  2277. }
  2278. });
  2279. });
  2280. _registerModule(_modules, 'masters/modules/draggable-points.src.js', [], function () {
  2281. });
  2282. }));