@antv/f2/lib/components/guide/withGuide.js

Charts for mobile visualization.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _jsx = require("../../jsx");
var _component = _interopRequireDefault(require("../../base/component"));
var _util = require("@antv/util");
var _diff = require("../../base/diff");
function isInBBox(bbox, point) {
  var minX = bbox.minX,
    maxX = bbox.maxX,
    minY = bbox.minY,
    maxY = bbox.maxY;
  var x = point.x,
    y = point.y;
  return minX <= x && maxX >= x && minY <= y && maxY >= y;
}
var _default = function _default(View) {
  return /*#__PURE__*/function (_Component) {
    (0, _inherits2.default)(Guide, _Component);
    var _super = (0, _createSuper2.default)(Guide);
    function Guide(props) {
      var _this;
      (0, _classCallCheck2.default)(this, Guide);
      _this = _super.call(this, props);
      // 创建ref
      _this.triggerRef = {};
      _this.state = {};
      return _this;
    }
    (0, _createClass2.default)(Guide, [{
      key: "willMount",
      value: function willMount() {
        (0, _get2.default)((0, _getPrototypeOf2.default)(Guide.prototype), "willMount", this).call(this);
        this.getGuideBBox();
      }
    }, {
      key: "didMount",
      value: function didMount() {
        var _this2 = this;
        var context = this.context,
          props = this.props;
        var canvas = context.canvas;
        var onClick = props.onClick;
        canvas.on('click', function (ev) {
          var points = ev.points;
          var shape = _this2.triggerRef.current;
          if (!shape || shape.isDestroyed()) return;
          var bbox = shape.getBBox();
          if (isInBBox(bbox, points[0])) {
            ev.shape = shape;
            onClick && onClick(ev);
          }
        });
      }
    }, {
      key: "didUpdate",
      value: function didUpdate() {
        (0, _get2.default)((0, _getPrototypeOf2.default)(Guide.prototype), "didUpdate", this).call(this);
        var shape = this.triggerRef.current;
        if (!shape || shape.isDestroyed()) return;
        var _shape$get = shape.get('attrs'),
          x = _shape$get.x,
          y = _shape$get.y,
          width = _shape$get.width,
          height = _shape$get.height;
        var bbox = {
          minX: x,
          minY: y,
          maxX: x + width,
          maxY: y + height,
          width: width,
          height: height
        };
        this.setState({
          guideBBox: bbox
        });
      }
    }, {
      key: "getGuideBBox",
      value: function getGuideBBox() {
        var shape = (0, _diff.renderShape)(this, this.render(), false);
        var _shape$get2 = shape.get('attrs'),
          x = _shape$get2.x,
          y = _shape$get2.y,
          width = _shape$get2.width,
          height = _shape$get2.height;
        // getBBox 没有包含 padding 所以这里手动计算 bbox
        var bbox = {
          minX: x,
          minY: y,
          maxX: x + width,
          maxY: y + height,
          width: width,
          height: height
        };
        this.setState({
          guideBBox: bbox
        });
        shape.destroy();
      }
      // 解析record里的模板字符串，如min、max、50%...
    }, {
      key: "parseReplaceStr",
      value: function parseReplaceStr(value, scale) {
        var replaceMap = {
          min: 0,
          max: 1,
          median: 0.5
        };
        // 传入的是 min、max、median 的
        if (!(0, _util.isNil)(replaceMap[value])) {
          return replaceMap[value];
        }
        // 传入的是 xx%
        if ((0, _util.isString)(value) && value.indexOf('%') != -1 && !isNaN(Number(value.slice(0, -1)))) {
          var rateValue = Number(value.slice(0, -1));
          var percent = rateValue / 100;
          return percent;
        }
        return scale.scale(value);
      }
    }, {
      key: "parsePoint",
      value: function parsePoint(record) {
        var props = this.props;
        var chart = props.chart,
          coord = props.coord;
        var xScale = chart.getXScales()[0];
        // 只取第一个yScale
        var yScale = chart.getYScales()[0];
        // 解析 record 为归一化后的坐标
        var x = this.parseReplaceStr(record[xScale.field], xScale);
        var y = this.parseReplaceStr(record[yScale.field], yScale);
        return coord.convertPoint({
          x: x,
          y: y
        });
      }
    }, {
      key: "convertPoints",
      value: function convertPoints(records) {
        var _this3 = this;
        return records.map(function (record) {
          return _this3.parsePoint(record);
        });
      }
    }, {
      key: "getGuideTheme",
      value: function getGuideTheme() {
        var context = this.context;
        var theme = context.theme;
        return theme.guide;
      }
    }, {
      key: "render",
      value: function render() {
        var props = this.props,
          context = this.context;
        var coord = props.coord,
          _props$records = props.records,
          records = _props$records === void 0 ? [] : _props$records,
          animation = props.animation,
          chart = props.chart;
        var width = context.width,
          height = context.height;
        var points = this.convertPoints(records);
        var theme = this.getGuideTheme();
        var guideBBox = this.state.guideBBox;
        var animationCfg = animation;
        if ((0, _util.isFunction)(animation)) {
          // 透传绘制关键点和chart实例
          animationCfg = animation(points, chart);
        }
        return (0, _jsx.jsx)(View, (0, _objectSpread2.default)((0, _objectSpread2.default)({
          triggerRef: this.triggerRef,
          points: points,
          theme: theme,
          coord: coord
        }, props), {}, {
          canvasWidth: width,
          canvasHeight: height,
          guideBBox: guideBBox,
          animation: animationCfg
        }));
      }
    }]);
    return Guide;
  }(_component.default);
};
exports.default = _default;