suoqiu-f2/lib/util/dom.js

Charts for mobile visualization.

"use strict";

exports.__esModule = true;
exports.addEventListener = addEventListener;
exports.convertPoints = convertPoints;
exports.createEvent = createEvent;
exports.getDomById = getDomById;
exports.getHeight = getHeight;
exports.getPixelRatio = getPixelRatio;
exports.getRelativePosition = getRelativePosition;
exports.getStyle = getStyle;
exports.getWidth = getWidth;
exports.isBrowser = void 0;
exports.isCanvasElement = isCanvasElement;
exports.isWx = exports.isNode = exports.isMy = void 0;
exports.measureText = measureText;
exports.removeEventListener = removeEventListener;
var _util = require("@antv/util");
/**
 * Detects support for options object argument in addEventListener.
 * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support
 * @private
 */
var supportsEventListenerOptions = function () {
  var supports = false;
  try {
    var options = Object.defineProperty({}, 'passive', {
      get: function get() {
        supports = true;
      }
    });
    window.addEventListener('e', null, options);
  } catch (e) {
    // continue regardless of error
  }
  return supports;
}();

// Default passive to true as expected by Chrome for 'touchstart' and 'touchend' events.
// https://github.com/chartjs/Chart.js/issues/4287
var eventListenerOptions = supportsEventListenerOptions ? {
  passive: true
} : false;

/* global wx, my */
// weixin miniprogram
var isWx = exports.isWx = typeof wx === 'object' && typeof wx.getSystemInfoSync === 'function';
// ant miniprogram
var isMy = exports.isMy = typeof my === 'object' && typeof my.getSystemInfoSync === 'function';
// in node
var isNode = exports.isNode = typeof global && !typeof window;
// in browser
var isBrowser = exports.isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.sessionStorage !== 'undefined';
function isCanvasElement(el) {
  if (!el || typeof el !== 'object') return false;
  if (el.nodeType === 1 && el.nodeName) {
    // HTMLCanvasElement
    return true;
  }
  // CanvasElement
  return !!el.isCanvasElement;
}
function getPixelRatio() {
  return window && window.devicePixelRatio || 1;
}
function getStyle(el, property) {
  return el.currentStyle ? el.currentStyle[property] : document.defaultView.getComputedStyle(el, null).getPropertyValue(property);
}
function getWidth(el) {
  var width = getStyle(el, 'width');
  if (width === 'auto') {
    width = el.offsetWidth;
  }
  return parseFloat(width);
}
function getHeight(el) {
  var height = getStyle(el, 'height');
  if (height === 'auto') {
    height = el.offsetHeight;
  }
  return parseFloat(height);
}
function getDomById(id) {
  if (!id) {
    return null;
  }
  return document.getElementById(id);
}
function getRelativePosition(point, canvas) {
  var canvasDom = canvas.get('el');
  if (!canvasDom) return point;
  var _canvasDom$getBoundin = canvasDom.getBoundingClientRect(),
    top = _canvasDom$getBoundin.top,
    left = _canvasDom$getBoundin.left;
  var paddingLeft = parseFloat(getStyle(canvasDom, 'padding-left'));
  var paddingTop = parseFloat(getStyle(canvasDom, 'padding-top'));
  var mouseX = point.x - left - paddingLeft;
  var mouseY = point.y - top - paddingTop;
  return {
    x: mouseX,
    y: mouseY
  };
}
function addEventListener(source, type, listener) {
  source.addEventListener(type, listener, eventListenerOptions);
}
function removeEventListener(source, type, listener) {
  source.removeEventListener(type, listener, eventListenerOptions);
}
function landscapePoint(point, canvas) {
  var landscape = canvas.get('landscape');
  if (!landscape) {
    return point;
  }
  if ((0, _util.isFunction)(landscape)) {
    return landscape(point, canvas);
  }
  // 默认顺时针旋转90度
  var height = canvas.get('height');
  var x = point.y;
  var y = height - point.x;
  return {
    x: x,
    y: y
  };
}
function convertPoints(ev, canvas) {
  var touches = ev.touches;
  // 认为是mouse事件
  if (!touches) {
    var point = getRelativePosition({
      x: ev.clientX,
      y: ev.clientY
    }, canvas);
    return [landscapePoint(point, canvas)];
  }
  // 单指 touchend 后，touchs 会变空，最后的触点要从changedTouches里拿
  if (!touches.length) {
    // 为了防止万一，加个空逻辑
    touches = ev.changedTouches || [];
  }
  var points = [];
  for (var i = 0, len = touches.length; i < len; i++) {
    var touch = touches[i];
    // x, y: 相对canvas原点的位置，clientX, clientY 相对于可视窗口的位置
    var x = touch.x,
      y = touch.y,
      clientX = touch.clientX,
      clientY = touch.clientY;
    var _point = void 0;
    // 小程序环境会有x,y
    if ((0, _util.isNumber)(x) || (0, _util.isNumber)(y)) {
      _point = {
        x: x,
        y: y
      };
    } else {
      // 浏览器环境再计算下canvas的相对位置
      _point = getRelativePosition({
        x: clientX,
        y: clientY
      }, canvas);
    }
    points.push(landscapePoint(_point, canvas));
  }
  return points;
}
function createEvent(event, chart) {
  var canvas = chart.get('canvas');
  var points = convertPoints(event, canvas);
  // touchend会没有points
  var point = points[0] || {};
  return {
    type: event.type,
    chart: chart,
    "native": event,
    x: point.x,
    y: point.y
  };
}
function measureText(text, font, ctx) {
  if (!ctx) {
    ctx = document.createElement('canvas').getContext('2d');
  }
  ctx.font = font || '12px sans-serif';
  return ctx.measureText(text);
}