@antv/f-my/es/web.js

FEngine for alipay mini-program

import { Canvas } from '@antv/f-engine';
import { createCanvasAdapter } from './adapter';
function convertTouches(touches) {
  if (!touches) return touches;
  touches.forEach(function (touch) {
    touch.clientX = touch.x;
    touch.clientY = touch.y;
  });
  return touches;
}
function dispatchEvent(el, event, type) {
  if (!el || !event) return;
  if (!event.preventDefault) {
    event.preventDefault = function () {};
  }
  event.type = type;
  event.target = el;
  var touches = event.touches,
    changedTouches = event.changedTouches,
    detail = event.detail;
  event.touches = convertTouches(touches);
  event.changedTouches = convertTouches(changedTouches);
  if (detail) {
    event.clientX = detail.x;
    event.clientY = detail.y;
  }
  el.dispatchEvent(event);
}
Component({
  data: {
    width: null,
    height: null,
    rpx2px: 0.5,
    pixelRatio: 2,
    renderContent: null
  },
  didMount: function didMount() {
    var onHandleRef = this.props.onHandleRef;
    onHandleRef && this.props.onHandleRef({
      setRenderContent: this.setRenderConetent.bind(this),
      updateChart: this.updateChart.bind(this),
      clear: this.clear.bind(this)
    });
    this.createChart();
  },
  didUpdate: function didUpdate() {
    var _this = this;
    var skipUpdate = this.props.skipUpdate;
    // 组件更新不更新图表
    if (skipUpdate) return;
    var _a = this,
      canvas = _a.canvas,
      props = _a.props;
    if (!canvas) return;
    var theme = props.theme,
      px2hd = props.px2hd;
    var children = props.onRender(props);
    var updateProps = {
      theme: theme,
      px2hd: px2hd,
      children: children
    };
    canvas.update(updateProps).catch(function (error) {
      _this.catchError(error);
    });
  },
  didUnmount: function didUnmount() {
    this.clear();
  },
  methods: {
    createChart: function createChart() {
      var _this = this;
      var _a = this.props,
        width = _a.width,
        height = _a.height,
        onCanvasReady = _a.onCanvasReady;
      onCanvasReady && onCanvasReady();
      var id = "f-web-canvas-".concat(this.$id);
      var _b = my === null || my === void 0 ? void 0 : my.getSystemInfoSync(),
        _c = _b.pixelRatio,
        drp = _c === void 0 ? 2 : _c,
        _d = _b.windowWidth,
        windowWidth = _d === void 0 ? 375 : _d;
      var pixelRatio = Math.ceil(drp);
      var rpx2px = windowWidth / 750;
      this.setData({
        width: width * rpx2px * pixelRatio,
        height: height * rpx2px * pixelRatio
      });
      var _e = createCanvasAdapter(my.createCanvasContext(id)),
        canvas = _e.element,
        context = _e.context;
      var fCanvas = this.createCanvas({
        width: width * rpx2px,
        height: height * rpx2px,
        pixelRatio: pixelRatio,
        context: context,
        createImage: canvas.createImage.bind(canvas),
        requestAnimationFrame: canvas.requestAnimationFrame.bind(canvas),
        cancelAnimationFrame: canvas.cancelAnimationFrame.bind(canvas)
      });
      fCanvas.render().catch(function (error) {
        _this.catchError(error);
      });
    },
    clear: function clear() {
      var canvas = this.canvas;
      if (!canvas) return;
      try {
        canvas.destroy();
        this.canvas = null;
      } catch (error) {
        this.catchError(error);
      }
    },
    updateChart: function updateChart() {
      this.clear();
      this.createChart();
    },
    setRenderConetent: function setRenderConetent(renderContent) {
      this.renderContent = renderContent;
    },
    catchError: function catchError(error) {
      console.error('图表渲染失败: ', error);
      var onError = this.props.onError;
      if (typeof onError === 'function') {
        onError(error);
      }
      throw error;
    },
    createCanvas: function createCanvas(_a) {
      var _this = this;
      var _b, _c;
      var width = _a.width,
        height = _a.height,
        pixelRatio = _a.pixelRatio,
        context = _a.context,
        createImage = _a.createImage,
        requestAnimationFrame = _a.requestAnimationFrame,
        cancelAnimationFrame = _a.cancelAnimationFrame;
      if (!width || !height) {
        return;
      }
      var _d = this.props,
        theme = _d.theme,
        onPx2hd = _d.onPx2hd,
        onCanvasRender = _d.onCanvasRender,
        onRender = _d.onRender;
      var children = onRender ? onRender(this.props) : this.renderContent;
      var canvas = new Canvas({
        pixelRatio: pixelRatio,
        width: width,
        height: height,
        theme: theme,
        px2hd: onPx2hd,
        context: context,
        children: children,
        createImage: createImage,
        requestAnimationFrame: requestAnimationFrame,
        cancelAnimationFrame: cancelAnimationFrame,
        onRender: function onRender() {
          var query = my.createSelectorQuery();
          query.select("f-web-canvas-".concat(_this.$id))
          //@ts-ignore
          .node().exec(function () {
            // api 执行结束后的下一个通信才会上屏
            onCanvasRender && onCanvasRender();
          });
        },
        // @ts-ignore
        offscreenCanvas: my.createOffscreenCanvas ? my.createOffscreenCanvas() : null,
        // useNativeClickEvent: false,
        isTouchEvent: function isTouchEvent(e) {
          return e.type.startsWith('touch');
        },
        isMouseEvent: function isMouseEvent(e) {
          return e.type.startsWith('mouse');
        }
      });
      this.canvas = canvas;
      // @ts-ignore
      if ((_c = (_b = canvas.canvas) === null || _b === void 0 ? void 0 : _b.context) === null || _c === void 0 ? void 0 : _c.config) {
        // @ts-ignore g里面caf透传不了，暂时解决
        canvas.canvas.context.config.cancelAnimationFrame = cancelAnimationFrame;
      }
      this.canvasEl = canvas.getCanvasEl();
      return canvas;
    },
    click: function click(e) {
      dispatchEvent(this.canvasEl, e, 'click');
    },
    touchStart: function touchStart(e) {
      dispatchEvent(this.canvasEl, e, 'touchstart');
    },
    touchMove: function touchMove(e) {
      dispatchEvent(this.canvasEl, e, 'touchmove');
    },
    touchEnd: function touchEnd(e) {
      dispatchEvent(this.canvasEl, e, 'touchend');
    }
  }
});