DraggableNodes.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. /* *
  2. *
  3. * Networkgraph series
  4. *
  5. * (c) 2010-2021 Paweł Fus
  6. *
  7. * License: www.highcharts.com/license
  8. *
  9. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  10. *
  11. * */
  12. 'use strict';
  13. import Chart from '../../Core/Chart/Chart.js';
  14. import H from '../../Core/Globals.js';
  15. import U from '../../Core/Utilities.js';
  16. var addEvent = U.addEvent;
  17. /* eslint-disable no-invalid-this, valid-jsdoc */
  18. H.dragNodesMixin = {
  19. /**
  20. * Mouse down action, initializing drag&drop mode.
  21. *
  22. * @private
  23. * @param {Highcharts.Point} point The point that event occured.
  24. * @param {Highcharts.PointerEventObject} event Browser event, before normalization.
  25. * @return {void}
  26. */
  27. onMouseDown: function (point, event) {
  28. var normalizedEvent = this.chart.pointer.normalize(event);
  29. point.fixedPosition = {
  30. chartX: normalizedEvent.chartX,
  31. chartY: normalizedEvent.chartY,
  32. plotX: point.plotX,
  33. plotY: point.plotY
  34. };
  35. point.inDragMode = true;
  36. },
  37. /**
  38. * Mouse move action during drag&drop.
  39. *
  40. * @private
  41. *
  42. * @param {global.Event} event Browser event, before normalization.
  43. * @param {Highcharts.Point} point The point that event occured.
  44. *
  45. * @return {void}
  46. */
  47. onMouseMove: function (point, event) {
  48. if (point.fixedPosition && point.inDragMode) {
  49. var series = this, chart = series.chart, normalizedEvent = chart.pointer.normalize(event), diffX = point.fixedPosition.chartX - normalizedEvent.chartX, diffY = point.fixedPosition.chartY - normalizedEvent.chartY, newPlotX, newPlotY, graphLayoutsLookup = chart.graphLayoutsLookup;
  50. // At least 5px to apply change (avoids simple click):
  51. if (Math.abs(diffX) > 5 || Math.abs(diffY) > 5) {
  52. newPlotX = point.fixedPosition.plotX - diffX;
  53. newPlotY = point.fixedPosition.plotY - diffY;
  54. if (chart.isInsidePlot(newPlotX, newPlotY)) {
  55. point.plotX = newPlotX;
  56. point.plotY = newPlotY;
  57. point.hasDragged = true;
  58. this.redrawHalo(point);
  59. graphLayoutsLookup.forEach(function (layout) {
  60. layout.restartSimulation();
  61. });
  62. }
  63. }
  64. }
  65. },
  66. /**
  67. * Mouse up action, finalizing drag&drop.
  68. *
  69. * @private
  70. * @param {Highcharts.Point} point The point that event occured.
  71. * @return {void}
  72. */
  73. onMouseUp: function (point, event) {
  74. if (point.fixedPosition) {
  75. if (point.hasDragged) {
  76. if (this.layout.enableSimulation) {
  77. this.layout.start();
  78. }
  79. else {
  80. this.chart.redraw();
  81. }
  82. }
  83. point.inDragMode = point.hasDragged = false;
  84. if (!this.options.fixedDraggable) {
  85. delete point.fixedPosition;
  86. }
  87. }
  88. },
  89. // Draggable mode:
  90. /**
  91. * Redraw halo on mousemove during the drag&drop action.
  92. *
  93. * @private
  94. * @param {Highcharts.Point} point The point that should show halo.
  95. * @return {void}
  96. */
  97. redrawHalo: function (point) {
  98. if (point && this.halo) {
  99. this.halo.attr({
  100. d: point.haloPath(this.options.states.hover.halo.size)
  101. });
  102. }
  103. }
  104. };
  105. /*
  106. * Draggable mode:
  107. */
  108. addEvent(Chart, 'load', function () {
  109. var chart = this, mousedownUnbinder, mousemoveUnbinder, mouseupUnbinder;
  110. if (chart.container) {
  111. mousedownUnbinder = addEvent(chart.container, 'mousedown', function (event) {
  112. var point = chart.hoverPoint;
  113. if (point &&
  114. point.series &&
  115. point.series.hasDraggableNodes &&
  116. point.series.options.draggable) {
  117. point.series.onMouseDown(point, event);
  118. mousemoveUnbinder = addEvent(chart.container, 'mousemove', function (e) {
  119. return point &&
  120. point.series &&
  121. point.series.onMouseMove(point, e);
  122. });
  123. mouseupUnbinder = addEvent(chart.container.ownerDocument, 'mouseup', function (e) {
  124. mousemoveUnbinder();
  125. mouseupUnbinder();
  126. return point &&
  127. point.series &&
  128. point.series.onMouseUp(point, e);
  129. });
  130. }
  131. });
  132. }
  133. addEvent(chart, 'destroy', function () {
  134. mousedownUnbinder();
  135. });
  136. });