dom.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. import { isFunction, isNumber } from '@antv/util';
  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() {
  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. /* global wx, my */
  25. // weixin miniprogram
  26. var isWx = typeof wx === 'object' && typeof wx.getSystemInfoSync === 'function'; // ant miniprogram
  27. var isMy = typeof my === 'object' && typeof my.getSystemInfoSync === 'function'; // in node
  28. var isNode = typeof global && !typeof window; // in browser
  29. var isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.sessionStorage !== 'undefined';
  30. function isCanvasElement(el) {
  31. if (!el || typeof el !== 'object') return false;
  32. if (el.nodeType === 1 && el.nodeName) {
  33. // HTMLCanvasElement
  34. return true;
  35. } // CanvasElement
  36. return !!el.isCanvasElement;
  37. }
  38. function getPixelRatio() {
  39. return window && window.devicePixelRatio || 1;
  40. }
  41. function getStyle(el, property) {
  42. return el.currentStyle ? el.currentStyle[property] : document.defaultView.getComputedStyle(el, null).getPropertyValue(property);
  43. }
  44. function getWidth(el) {
  45. var width = getStyle(el, 'width');
  46. if (width === 'auto') {
  47. width = el.offsetWidth;
  48. }
  49. return parseFloat(width);
  50. }
  51. function getHeight(el) {
  52. var height = getStyle(el, 'height');
  53. if (height === 'auto') {
  54. height = el.offsetHeight;
  55. }
  56. return parseFloat(height);
  57. }
  58. function getDomById(id) {
  59. if (!id) {
  60. return null;
  61. }
  62. return document.getElementById(id);
  63. }
  64. function getRelativePosition(point, canvas) {
  65. var canvasDom = canvas.get('el');
  66. if (!canvasDom) return point;
  67. var {
  68. top,
  69. left
  70. } = canvasDom.getBoundingClientRect();
  71. var paddingLeft = parseFloat(getStyle(canvasDom, 'padding-left'));
  72. var paddingTop = parseFloat(getStyle(canvasDom, 'padding-top'));
  73. var mouseX = point.x - left - paddingLeft;
  74. var mouseY = point.y - top - paddingTop;
  75. return {
  76. x: mouseX,
  77. y: mouseY
  78. };
  79. }
  80. function addEventListener(source, type, listener) {
  81. source.addEventListener(type, listener, eventListenerOptions);
  82. }
  83. function removeEventListener(source, type, listener) {
  84. source.removeEventListener(type, listener, eventListenerOptions);
  85. }
  86. function landscapePoint(point, canvas) {
  87. var landscape = canvas.get('landscape');
  88. if (!landscape) {
  89. return point;
  90. }
  91. if (isFunction(landscape)) {
  92. return landscape(point, canvas);
  93. } // 默认顺时针旋转90度
  94. var height = canvas.get('height');
  95. var x = point.y;
  96. var y = height - point.x;
  97. return {
  98. x,
  99. y
  100. };
  101. }
  102. function convertPoints(ev, canvas) {
  103. var touches = ev.touches; // 认为是mouse事件
  104. if (!touches) {
  105. var point = getRelativePosition({
  106. x: ev.clientX,
  107. y: ev.clientY
  108. }, canvas);
  109. return [landscapePoint(point, canvas)];
  110. } // 单指 touchend 后,touchs 会变空,最后的触点要从changedTouches里拿
  111. if (!touches.length) {
  112. // 为了防止万一,加个空逻辑
  113. touches = ev.changedTouches || [];
  114. }
  115. var points = [];
  116. for (var i = 0, len = touches.length; i < len; i++) {
  117. var touch = touches[i]; // x, y: 相对canvas原点的位置,clientX, clientY 相对于可视窗口的位置
  118. var {
  119. x,
  120. y,
  121. clientX,
  122. clientY
  123. } = touch;
  124. var _point = void 0; // 小程序环境会有x,y
  125. if (isNumber(x) || isNumber(y)) {
  126. _point = {
  127. x,
  128. y
  129. };
  130. } else {
  131. // 浏览器环境再计算下canvas的相对位置
  132. _point = getRelativePosition({
  133. x: clientX,
  134. y: clientY
  135. }, canvas);
  136. }
  137. points.push(landscapePoint(_point, canvas));
  138. }
  139. return points;
  140. }
  141. function createEvent(event, chart) {
  142. var canvas = chart.get('canvas');
  143. var points = convertPoints(event, canvas); // touchend会没有points
  144. var point = points[0] || {};
  145. return {
  146. type: event.type,
  147. chart,
  148. native: event,
  149. x: point.x,
  150. y: point.y
  151. };
  152. }
  153. function measureText(text, font, ctx) {
  154. if (!ctx) {
  155. ctx = document.createElement('canvas').getContext('2d');
  156. }
  157. ctx.font = font || '12px sans-serif';
  158. return ctx.measureText(text);
  159. }
  160. export { isWx, isMy, isNode, isBrowser, isCanvasElement, getPixelRatio, getStyle, getWidth, getHeight, getDomById, getRelativePosition, addEventListener, removeEventListener, createEvent, convertPoints, measureText };