dom.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. var DomUtil;
  2. /**
  3. * Detects support for options object argument in addEventListener.
  4. * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support
  5. * @private
  6. */
  7. var supportsEventListenerOptions = function () {
  8. var supports = false;
  9. try {
  10. var options = Object.defineProperty({}, 'passive', {
  11. get: function get() {
  12. supports = true;
  13. }
  14. });
  15. window.addEventListener('e', null, options);
  16. } catch (e) {// continue regardless of error
  17. }
  18. return supports;
  19. }(); // Default passive to true as expected by Chrome for 'touchstart' and 'touchend' events.
  20. // https://github.com/chartjs/Chart.js/issues/4287
  21. var eventListenerOptions = supportsEventListenerOptions ? {
  22. passive: true
  23. } : false;
  24. function createEvent(type, chart, x, y, nativeEvent) {
  25. return {
  26. type: type,
  27. chart: chart,
  28. native: nativeEvent || null,
  29. x: x !== undefined ? x : null,
  30. y: y !== undefined ? y : null
  31. };
  32. }
  33. function fromNativeEvent(event, chart) {
  34. var type = event.type;
  35. var point = {};
  36. var touches = event.targetTouches;
  37. if (touches && touches.length > 0) {
  38. point.x = touches[0].clientX;
  39. point.y = touches[0].clientY;
  40. } else {
  41. point.x = event.clientX;
  42. point.y = event.clientY;
  43. }
  44. var canvas = chart.get('canvas');
  45. var pos = DomUtil.getRelativePosition(point, canvas);
  46. return createEvent(type, chart, pos.x, pos.y, event);
  47. }
  48. DomUtil = {
  49. /* global wx, my, module */
  50. isWx: typeof wx === 'object' && typeof wx.getSystemInfoSync === 'function',
  51. // weixin miniprogram
  52. isMy: typeof my === 'object' && typeof my.getSystemInfoSync === 'function',
  53. // ant miniprogram
  54. isNode: typeof module !== 'undefined' && typeof module.exports !== 'undefined',
  55. // in node
  56. isBrowser: typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.sessionStorage !== 'undefined',
  57. // in browser
  58. getPixelRatio: function getPixelRatio() {
  59. return window && window.devicePixelRatio || 1;
  60. },
  61. getStyle: function getStyle(el, property) {
  62. return el.currentStyle ? el.currentStyle[property] : document.defaultView.getComputedStyle(el, null).getPropertyValue(property);
  63. },
  64. getWidth: function getWidth(el) {
  65. var width = this.getStyle(el, 'width');
  66. if (width === 'auto') {
  67. width = el.offsetWidth;
  68. }
  69. return parseFloat(width);
  70. },
  71. getHeight: function getHeight(el) {
  72. var height = this.getStyle(el, 'height');
  73. if (height === 'auto') {
  74. height = el.offsetHeight;
  75. }
  76. return parseFloat(height);
  77. },
  78. getDomById: function getDomById(id) {
  79. if (!id) {
  80. return null;
  81. }
  82. return document.getElementById(id);
  83. },
  84. getRelativePosition: function getRelativePosition(point, canvas) {
  85. var canvasDom = canvas.get('el');
  86. var _canvasDom$getBoundin = canvasDom.getBoundingClientRect(),
  87. top = _canvasDom$getBoundin.top,
  88. right = _canvasDom$getBoundin.right,
  89. bottom = _canvasDom$getBoundin.bottom,
  90. left = _canvasDom$getBoundin.left;
  91. var paddingLeft = parseFloat(this.getStyle(canvasDom, 'padding-left'));
  92. var paddingTop = parseFloat(this.getStyle(canvasDom, 'padding-top'));
  93. var paddingRight = parseFloat(this.getStyle(canvasDom, 'padding-right'));
  94. var paddingBottom = parseFloat(this.getStyle(canvasDom, 'padding-bottom'));
  95. var width = right - left - paddingLeft - paddingRight;
  96. var height = bottom - top - paddingTop - paddingBottom;
  97. var pixelRatio = canvas.get('pixelRatio');
  98. var mouseX = (point.x - left - paddingLeft) / width * canvasDom.width / pixelRatio;
  99. var mouseY = (point.y - top - paddingTop) / height * canvasDom.height / pixelRatio;
  100. return {
  101. x: mouseX,
  102. y: mouseY
  103. };
  104. },
  105. addEventListener: function addEventListener(source, type, listener) {
  106. DomUtil.isBrowser && source.addEventListener(type, listener, eventListenerOptions);
  107. },
  108. removeEventListener: function removeEventListener(source, type, listener) {
  109. DomUtil.isBrowser && source.removeEventListener(type, listener, eventListenerOptions);
  110. },
  111. createEvent: function createEvent(event, chart) {
  112. return fromNativeEvent(event, chart);
  113. },
  114. measureText: function measureText(text, font, ctx) {
  115. if (!ctx) {
  116. ctx = document.createElement('canvas').getContext('2d');
  117. }
  118. ctx.font = font || '12px sans-serif';
  119. return ctx.measureText(text);
  120. }
  121. };
  122. module.exports = DomUtil;