shutter_zoom.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. /**
  2. * DevExtreme (viz/chart_components/shutter_zoom.js)
  3. * Version: 19.1.16
  4. * Build date: Tue Oct 18 2022
  5. *
  6. * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
  7. * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
  8. */
  9. "use strict";
  10. var dragEvents = require("../../events/drag");
  11. var SHUTTER_EVENTS_NS = ".shutter-zoom";
  12. var DRAG_START_EVENT_NAME = dragEvents.start + SHUTTER_EVENTS_NS;
  13. var DRAG_UPDATE_EVENT_NAME = dragEvents.move + SHUTTER_EVENTS_NS;
  14. var DRAG_END_EVENT_NAME = dragEvents.end + SHUTTER_EVENTS_NS;
  15. function getPointerCoord(rootOffset, canvas, rotated, e) {
  16. var coord = Math.floor(rotated ? e.pageY - rootOffset.top : e.pageX - rootOffset.left);
  17. var min = rotated ? canvas.y1 : canvas.x1;
  18. var max = rotated ? canvas.y2 : canvas.x2;
  19. if (coord < min) {
  20. coord = min
  21. } else {
  22. if (coord > max) {
  23. coord = max
  24. }
  25. }
  26. return coord
  27. }
  28. function checkCoords(rootOffset, canvas, e) {
  29. var x = e.pageX - rootOffset.left;
  30. var y = e.pageY - rootOffset.top;
  31. return x >= canvas.x1 && x <= canvas.x2 && y >= canvas.y1 && y <= canvas.y2
  32. }
  33. function dragStartHandler(ctx) {
  34. return function(e) {
  35. var offset = ctx.getRootOffset();
  36. var canvas = ctx.getCanvas();
  37. if (!checkCoords(offset, canvas, e)) {
  38. e.cancel = true;
  39. return
  40. }
  41. ctx.rootOffset = offset;
  42. ctx.canvas = canvas;
  43. ctx.startCoord = getPointerCoord(offset, canvas, ctx.rotated, e);
  44. ctx.triggerStart();
  45. ctx.rect.attr({
  46. x: canvas.x1,
  47. y: canvas.y1,
  48. width: canvas.width,
  49. height: canvas.height
  50. }).append(ctx.root)
  51. }
  52. }
  53. function dragHandler(ctx) {
  54. return function(e) {
  55. var curCoord = getPointerCoord(ctx.rootOffset, ctx.canvas, ctx.rotated, e);
  56. var attr = {};
  57. ctx.curCoord = curCoord;
  58. attr[ctx.rotated ? "y" : "x"] = Math.min(ctx.startCoord, curCoord);
  59. attr[ctx.rotated ? "height" : "width"] = Math.abs(ctx.startCoord - curCoord);
  60. ctx.rect.attr(attr)
  61. }
  62. }
  63. function dragEndHandler(ctx) {
  64. return function(e) {
  65. ctx.triggerEnd();
  66. ctx.rect.remove()
  67. }
  68. }
  69. function shutterZoom(options) {
  70. var chart = options.chart;
  71. var renderer = options.renderer;
  72. var rotated = options.rotated;
  73. var rect = renderer.rect(0, 0, 0, 0).attr(options.shutterOptions);
  74. var shutter = {
  75. rect: rect,
  76. root: renderer.root,
  77. rotated: rotated,
  78. triggerStart: function() {
  79. chart._eventTrigger("zoomStart")
  80. },
  81. triggerEnd: function() {
  82. var tr = chart._argumentAxes[0].getTranslator();
  83. var rangeStart = Math.min(this.startCoord, this.curCoord);
  84. var rangeEnd = Math.max(this.startCoord, this.curCoord);
  85. chart._eventTrigger("zoomEnd", {
  86. rangeStart: tr.from(rangeStart),
  87. rangeEnd: tr.from(rangeEnd)
  88. })
  89. },
  90. dispose: function() {
  91. renderer.root.off(SHUTTER_EVENTS_NS);
  92. rect.dispose()
  93. },
  94. getRootOffset: function() {
  95. return renderer.getRootOffset()
  96. },
  97. getCanvas: function() {
  98. var canvas = chart._canvas;
  99. var panes = chart.panes;
  100. var firstPane = panes[0].canvas;
  101. var lastPane = panes[panes.length - 1].canvas;
  102. return {
  103. x1: firstPane.left,
  104. y1: firstPane.top,
  105. x2: canvas.width - lastPane.right,
  106. y2: canvas.height - lastPane.bottom,
  107. width: canvas.width - firstPane.left - lastPane.right,
  108. height: canvas.height - firstPane.top - lastPane.bottom
  109. }
  110. }
  111. };
  112. renderer.root.off(SHUTTER_EVENTS_NS).on(DRAG_START_EVENT_NAME, {
  113. direction: rotated ? "vertical" : "horizontal",
  114. immediate: true
  115. }, dragStartHandler(shutter)).on(DRAG_UPDATE_EVENT_NAME, dragHandler(shutter)).on(DRAG_END_EVENT_NAME, dragEndHandler(shutter));
  116. return shutter
  117. }
  118. module.exports = {
  119. name: "shutter_zoom",
  120. init: function() {
  121. var options = this.option("shutterZoom") || {};
  122. if (!options.enabled) {
  123. return
  124. }
  125. this._shutterZoom = shutterZoom({
  126. chart: this,
  127. renderer: this._renderer,
  128. rotated: this.option("rotated"),
  129. shutterOptions: options
  130. })
  131. },
  132. dispose: function() {
  133. this._shutterZoom && this._shutterZoom.dispose()
  134. }
  135. };