@antv/f6-plugin/lib/time-bar/utils/path.js

F6 plugin

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getLinePath = getLinePath;
exports.getSmoothLinePath = getSmoothLinePath;
exports.dataToPath = dataToPath;
exports.dataToRectPath = dataToRectPath;
exports.getAreaLineY = getAreaLineY;
exports.linePathToAreaPath = linePathToAreaPath;
exports.getRectPoints = getRectPoints;
exports.getRectPath = getRectPath;

var _tslib = require("tslib");

var pathUtil = _interopRequireWildcard(require("@antv/path-util"));

var _scale = require("@antv/scale");

var _util = require("@antv/util");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

/**
 * 点数组转 path
 * @param points
 */
function pointsToPath(points) {
  return (0, _util.map)(points, function (p, idx) {
    var command = idx === 0 ? 'M' : 'L';
    var x = p[0],
        y = p[1];
    return [command, x, y];
  });
}
/**
 * 将点连接成路径 path
 * @param points
 */


function getLinePath(points) {
  return pointsToPath(points);
}
/**
 * 将点连成平滑的曲线
 * @param points
 */


function getSmoothLinePath(points) {
  if (points.length <= 2) {
    // 两点以内直接绘制成路径
    return getLinePath(points);
  }

  var data = [];
  (0, _util.each)(points, function (p) {
    // 当前点和上一个点一样的时候，忽略掉
    if (!(0, _util.isEqual)(p, data.slice(data.length - 2))) {
      data.push(p[0], p[1]);
    }
  });
  var path = pathUtil.catmullRom2Bezier(data, false);

  var _a = (0, _util.head)(points),
      x = _a[0],
      y = _a[1];

  path.unshift(['M', x, y]);
  return path;
}
/**
 * 将数据转成 path，利用 scale 的归一化能力
 * @param data
 * @param width
 * @param height
 * @param smooth
 */


function dataToPath(data, width, height, smooth) {
  if (smooth === void 0) {
    smooth = true;
  } // 利用 scale 来获取 y 上的映射


  var y = new _scale.Linear({
    values: data
  });
  var x = new _scale.Category({
    values: (0, _util.map)(data, function (v, idx) {
      return idx;
    })
  });
  var points = (0, _util.map)(data, function (v, idx) {
    return [x.scale(idx) * width, height - y.scale(v) * height];
  });
  return smooth ? getSmoothLinePath(points) : getLinePath(points);
}

function dataToRectPath(data, width, height, barWidth) {
  if (barWidth === void 0) {
    barWidth = 5;
  } // 利用 scale 来获取 y 上的映射


  var y = new _scale.Linear({
    values: data
  });
  var x = new _scale.Category({
    values: (0, _util.map)(data, function (v, idx) {
      return idx;
    })
  });
  var points = (0, _util.map)(data, function (v, idx) {
    return [x.scale(idx) * width, height - y.scale(v) * height];
  });
  var rectPoints = [];

  for (var i = 0; i < points.length; i++) {
    var point = points[i];
    var param = {
      x: point[0],
      y: point[1],
      y0: height,
      size: barWidth
    };
    var rectPoint = getRectPoints(param);
    rectPoints.push.apply(rectPoints, rectPoint);
  }

  return getRectPath(rectPoints);
}
/**
 * 获得 area 面积的横向连接线的 px 位置
 * @param data
 * @param width
 * @param height
 */


function getAreaLineY(data, height) {
  var y = new _scale.Linear({
    values: data
  });
  var lineY = Math.max(0, y.min);
  return height - y.scale(lineY) * height;
}
/**
 * 线 path 转 area path
 * @param path
 * @param width
 * @param height
 */


function linePathToAreaPath(path, width, height, data) {
  var areaPath = (0, _tslib.__spreadArray)([], path);
  var lineYPx = getAreaLineY(data, height);
  areaPath.push(['L', width, lineYPx]);
  areaPath.push(['L', 0, lineYPx]);
  areaPath.push(['Z']);
  return areaPath;
}
/**
 * @ignore
 * 根据数据点生成矩形的四个关键点
 * @param pointInfo 数据点信息
 * @returns rect points 返回矩形四个顶点信息
 */


function getRectPoints(pointInfo) {
  var x = pointInfo.x,
      y = pointInfo.y,
      y0 = pointInfo.y0,
      size = pointInfo.size; // 有 4 种情况，
  // 1. x, y 都不是数组
  // 2. y是数组，x不是
  // 3. x是数组，y不是
  // 4. x, y 都是数组

  var yMin;
  var yMax;

  if ((0, _util.isArray)(y)) {
    yMin = y[0], yMax = y[1];
  } else {
    yMin = y0;
    yMax = y;
  }

  var xMin;
  var xMax;

  if ((0, _util.isArray)(x)) {
    xMin = x[0], xMax = x[1];
  } else {
    xMin = x - size / 2;
    xMax = x + size / 2;
  }

  var points = [{
    x: xMin,
    y: yMin
  }, {
    x: xMin,
    y: yMax
  }]; // 矩形的四个关键点，结构如下（左下角顺时针连接）
  // 1 ---- 2
  // |      |
  // 0 ---- 3

  points.push({
    x: xMax,
    y: yMax
  }, {
    x: xMax,
    y: yMin
  });
  return points;
}
/**
 * @ignore
 * 根据矩形关键点绘制 path
 * @param points 关键点数组
 * @param isClosed path 是否需要闭合
 * @returns 返回矩形的 path
 */


function getRectPath(points, isClosed) {
  if (isClosed === void 0) {
    isClosed = true;
  }

  var path = [];
  var firstPoint = points[0];
  path.push(['M', firstPoint.x, firstPoint.y]);

  for (var i = 1, len = points.length; i < len; i++) {
    path.push(['L', points[i].x, points[i].y]);
  } // 对于 shape="line" path 不应该闭合，否则会造成 lineCap 绘图属性失效


  if (isClosed) {
    path.push(['L', firstPoint.x, firstPoint.y]); // 需要闭合

    path.push(['z']);
  }

  return path;
}