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

Charts for mobile visualization.

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _get from "@babel/runtime/helpers/esm/get";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import { jsx } from '../../jsx';
import Component from '../../base/component';
import { isString, isNil, isFunction } from '@antv/util';
import { renderShape } from '../../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;
}
export default (function (View) {
  return /*#__PURE__*/function (_Component) {
    _inherits(Guide, _Component);
    var _super = _createSuper(Guide);
    function Guide(props) {
      var _this;
      _classCallCheck(this, Guide);
      _this = _super.call(this, props);
      // 创建ref
      _this.triggerRef = {};
      _this.state = {};
      return _this;
    }
    _createClass(Guide, [{
      key: "willMount",
      value: function willMount() {
        _get(_getPrototypeOf(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() {
        _get(_getPrototypeOf(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 = 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 (!isNil(replaceMap[value])) {
          return replaceMap[value];
        }
        // 传入的是 xx%
        if (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 (isFunction(animation)) {
          // 透传绘制关键点和chart实例
          animationCfg = animation(points, chart);
        }
        return jsx(View, _objectSpread(_objectSpread({
          triggerRef: this.triggerRef,
          points: points,
          theme: theme,
          coord: coord
        }, props), {}, {
          canvasWidth: width,
          canvasHeight: height,
          guideBBox: guideBBox,
          animation: animationCfg
        }));
      }
    }]);
    return Guide;
  }(Component);
});