draggable-points.src.js 96 KB

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