draggable-points.src.js 96 KB

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