draggable-points.src.js 97 KB

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