text: import F6 from '@antv/f6';
  import { wrapContext } from '../../../common/utils/context';
  import data from './data';
  
  /**
   * edge#lineGrowth
   */
  
  F6.registerEdge(
    'line-growth',
    {
      afterDraw(_, group) {
        const shape = group.get('children')[0];
        const length = shape.getTotalLength();
        console.log(_);
        shape.animate(
          (ratio) => {
            // the operations in each frame. Ratio ranges from 0 to 1 indicating the prograss of the animation. Returns the modified configurations
            const startLen = ratio * length;
            // Calculate the lineDash
            const cfg = {
              lineDash: [startLen, length - startLen],
            };
            return cfg;
          },
          {
            repeat: true, // Whether executes the animation repeatly
            duration: 2000, // the duration for executing once
          },
        );
      },
    },
    'cubic', // extend the built-in edge 'cubic'
  );
  
  Page({
    canvas: null,
    ctx: null,
    renderer: '', // mini、mini-native等，F6需要，标记环境
    isCanvasInit: false, // canvas是否准备好了
    graph: null,
  
    data: {
      width: 375,
      height: 600,
      pixelRatio: 2,
      forceMini: false,
    },
  
    onLoad() {
      // 同步获取window的宽高
      const { windowWidth, windowHeight, pixelRatio } = my.getSystemInfoSync();
  
      this.setData({
        width: windowWidth,
        height: windowHeight,
        pixelRatio,
      });
    },
  
    /**
     * 初始化cnavas回调，缓存获得的context
     * @param {*} ctx 绘图context
     * @param {*} rect 宽高信息
     * @param {*} canvas canvas对象，在render为mini时为null
     * @param {*} renderer 使用canvas 1.0还是canvas 2.0，mini | mini-native
     */
    handleInit(ctx, rect, canvas, renderer) {
      this.isCanvasInit = true;
      this.ctx = wrapContext(ctx);
      this.renderer = renderer;
      this.canvas = canvas;
      this.updateChart();
    },
  
    /**
     * canvas派发的事件，转派给graph实例
     */
    handleTouch(e) {
      this.graph && this.graph.emitEvent(e);
    },
  
    updateChart() {
      const { width, height, pixelRatio } = this.data;
  
      // 创建F6实例
      this.graph = new F6.Graph({
        context: this.ctx,
        renderer: this.renderer,
        width,
        height,
        pixelRatio,
        fitView: true,
        defaultEdge: {
          type: 'line-growth',
          style: {
            lineWidth: 2,
            stroke: '#bae7ff',
          },
        },
      });
  
      this.graph.data(data);
      this.graph.render();
      this.graph.fitView();
    },
  
    onUnload() {
      this.graph && this.graph.destroy();
    },
  });
  