@antv/f2/lib/canvas/index.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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _eventEmitter = _interopRequireDefault(require("@antv/event-emitter"));
var _f2Graphic = require("@antv/f2-graphic");
var _util = require("@antv/util");
var _component = _interopRequireDefault(require("../base/component"));
var _diff = require("../base/diff");
var _equal = _interopRequireDefault(require("../base/equal"));
var _layout = _interopRequireDefault(require("../base/layout"));
var _updater = require("../base/updater");
var _theme = _interopRequireDefault(require("../theme"));
var _util2 = require("../util");
var _animation = _interopRequireDefault(require("./animation"));
function measureText(canvas, px2hd) {
  return function (text, font) {
    var _ref = font || {},
      fontSize = _ref.fontSize,
      fontFamily = _ref.fontFamily,
      fontStyle = _ref.fontStyle,
      fontWeight = _ref.fontWeight,
      fontVariant = _ref.fontVariant;
    var shape = canvas.addShape('text', {
      attrs: {
        x: 0,
        y: 0,
        fontSize: px2hd(fontSize),
        fontFamily: fontFamily,
        fontStyle: fontStyle,
        fontWeight: fontWeight,
        fontVariant: fontVariant,
        text: text
      }
    });
    var _shape$getBBox = shape.getBBox(),
      width = _shape$getBBox.width,
      height = _shape$getBBox.height;
    shape.remove(true);
    return {
      width: width,
      height: height
    };
  };
}
// 顶层Canvas标签
var Canvas = /*#__PURE__*/function (_Component) {
  (0, _inherits2.default)(Canvas, _Component);
  var _super = (0, _createSuper2.default)(Canvas);
  function Canvas(props) {
    var _this;
    (0, _classCallCheck2.default)(this, Canvas);
    _this = _super.call(this, props);
    var context = props.context,
      pixelRatio = props.pixelRatio,
      width = props.width,
      height = props.height,
      _props$animate = props.animate,
      animate = _props$animate === void 0 ? true : _props$animate,
      customPx2hd = props.px2hd,
      customTheme = props.theme,
      customStyle = props.style,
      createImage = props.createImage,
      landscape = props.landscape;
    var px2hd = (0, _util.isFunction)(customPx2hd) ? (0, _util2.batch2hd)(customPx2hd) : _util2.px2hd;
    var theme = px2hd((0, _util.deepMix)({}, _theme.default, customTheme));
    // 创建G的canvas
    var canvas = (0, _f2Graphic.createCanvas)({
      context: context,
      pixelRatio: pixelRatio,
      fontFamily: theme.fontFamily,
      width: width,
      height: height,
      createImage: createImage,
      landscape: landscape
    });
    // 组件更新器
    var updater = (0, _updater.createUpdater)((0, _assertThisInitialized2.default)(_this));
    // 供全局使用的一些变量
    var componentContext = {
      root: (0, _assertThisInitialized2.default)(_this),
      ctx: context,
      canvas: canvas,
      theme: theme,
      px2hd: px2hd,
      measureText: measureText(canvas, px2hd)
    };
    // 动画模块
    var animation = new _animation.default(canvas);
    canvas.on('afterdraw', function () {
      var onAfterDraw = _this.props.onAfterDraw;
      onAfterDraw && onAfterDraw();
    });
    _this.canvas = canvas;
    _this.container = canvas;
    _this.context = componentContext;
    _this.updater = updater;
    _this.animate = animate;
    _this.animation = animation;
    _this.theme = theme;
    _this._ee = new _eventEmitter.default();
    _this.updateLayout(props);
    return _this;
  }
  (0, _createClass2.default)(Canvas, [{
    key: "renderComponents",
    value: function renderComponents(components) {
      if (!components || !components.length) {
        return;
      }
      (0, _diff.renderComponent)(components);
      this.draw();
    }
  }, {
    key: "update",
    value: function update(nextProps) {
      var props = this.props;
      if ((0, _equal.default)(nextProps, props)) {
        return;
      }
      this.props = nextProps;
      this.render();
    }
  }, {
    key: "resize",
    value: function resize(width, height) {
      var _this$canvas$_attrs = this.canvas._attrs,
        canvasWidth = _this$canvas$_attrs.width,
        canvasHeight = _this$canvas$_attrs.height;
      this.canvas.changeSize(width || canvasWidth, height || canvasHeight);
      // this.canvas.clear();
      // this.children = null;
      this.updateLayout((0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.props), {}, {
        width: width,
        height: height
      }));
      this.render();
    }
  }, {
    key: "updateLayout",
    value: function updateLayout(props) {
      var _this$canvas$_attrs2 = this.canvas._attrs,
        canvasWidth = _this$canvas$_attrs2.width,
        canvasHeight = _this$canvas$_attrs2.height;
      var style = this.context.px2hd((0, _objectSpread2.default)({
        left: 0,
        top: 0,
        width: (props === null || props === void 0 ? void 0 : props.width) || canvasWidth,
        height: (props === null || props === void 0 ? void 0 : props.height) || canvasHeight,
        padding: this.theme.padding
      }, props.style));
      this.layout = _layout.default.fromStyle(style);
      this.context = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.context), {}, {
        left: this.layout.left,
        top: this.layout.top,
        width: this.layout.width,
        height: this.layout.height
      });
    }
  }, {
    key: "draw",
    value: function draw() {
      var canvas = this.canvas,
        animate = this.animate;
      if (animate === false) {
        canvas.draw();
        return;
      }
      this.play();
    }
  }, {
    key: "play",
    value: function play() {
      var _this2 = this;
      var canvas = this.canvas,
        animation = this.animation;
      // 执行动画
      animation.abort();
      animation.play(canvas, function () {
        _this2.emit('animationEnd');
      });
    }
  }, {
    key: "render",
    value: function render() {
      var lastChildren = this.children,
        props = this.props;
      var nextChildren = props.children;
      (0, _diff.renderChildren)(this, nextChildren, lastChildren);
      this.draw();
      return null;
    }
  }, {
    key: "destroy",
    value: function destroy() {
      var canvas = this.canvas,
        children = this.children;
      (0, _diff.destroyElement)(children);
      canvas.destroy();
    }
  }, {
    key: "on",
    value: function on(type, listener) {
      this._ee.on(type, listener);
    }
  }, {
    key: "emit",
    value: function emit(type, event) {
      this._ee.emit(type, event);
    }
  }, {
    key: "off",
    value: function off(type, listener) {
      this._ee.off(type, listener);
    }
  }]);
  return Canvas;
}(_component.default);
var _default = Canvas;
exports.default = _default;