draggable-points.src.js 80 KB

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