How to use @antv/util - 10 common examples

if (isObject(val)) {
            model[cfg] = clone(val);
          } else {
            model[cfg] = defaultModel[cfg];
          }
        }
      });
    }

    graph.emit('beforeadditem', { type, model });

    if(type === EDGE) {
      let source: string | Item = (model as EdgeConfig).source
      let target: string | Item = (model as EdgeConfig).target

      if (source && isString(source)) {
        source = graph.findById(source);
      }
      if (target && isString(target)) {
        target = graph.findById(target);
      }

      if (!source || !target) {
        throw new Error('The source or target node of edge ' + model.id + ' does not exist!')
        // console.warn('The source or target node of edge ' + model.id + ' does not exist!');
        // return;
      }

      item = new Edge({
        model,
        source,
        target,

each(steps, (subSteps) => {
      each(subSteps, (step) => {
        if (isFunction(step.action)) {
          // 如果传入回调函数，则直接生成 CallbackAction
          step.actionObject = {
            action: createCallbackAction(step.action, context),
            methodName: 'execute',
          };
        } else if (isString(step.action)) {
          // 如果是字符串，则根据名称生成对应的 Action
          const arr = step.action.split(':');
          const actionName = arr[0];
          // 如果已经初始化过 action ，则直接引用之前的 action
          const action = context.getAction(actionName) || createAction(actionName, context);
          const methodName = arr[1];
          step.actionObject = {
            action,
            methodName,

private _init() {
    const props = this.plot.options;
    const defaultStyle = this._getDefaultStyle();
    const baseConfig = _.mix(defaultStyle, {
      ...this.cfg,
      type: 'line',
      top: true,
    }) as any;
    if (this.cfg.type) {
      const stateValue = this._getState(this.cfg.type);
      const minValue = this._getState('min');
      const maxValue = this._getState('max');
      const Scale = getScale('linear');
      // 重新组织scale并使用scale的min和max来计算guide point的百分比位置，以避免受nice的影响
      const scale = new Scale(
        _.mix(
          {},
          {
            min: minValue,
            max: maxValue,

private getLabelConfig(region, labelOptions, index) {
    let x = 0;
    let y = 0;
    let style: any = {};
    let text = labelOptions.text;
    if (isFunction(text)) {
      text = text(region);
    } else if (isArray(text)) {
      text = text[index];
    }
    const { position } = labelOptions;
    const pos = position.split('-');
    const dim = region.name.split('-');
    // x方向
    if (dim[1] === 'left') {
      if (pos[0] === 'inner') {
        x = region.bbox.maxX - labelOptions.offset;
        style.textAlign = 'right';
      }
      if (pos[0] === 'outter') {
        x = region.bbox.minX + labelOptions.offset;
        style.textAlign = 'left';

public render(): void {
    const self = this;
    const data: GraphData = this.get('data');

    if (!data) {
      throw new Error('data must be defined first');
    }

    this.clear();

    this.emit('beforerender');
    const autoPaint = this.get('autoPaint');
    this.setAutoPaint(false);

    each(data.nodes, (node: NodeConfig) => {
      self.add(ITEM_TYPE.NODE, node);
    });

    each(data.edges, (edge: EdgeConfig) => {
      self.add(ITEM_TYPE.EDGE, edge);
    });

    if (!this.get('groupByTypes')) {
      // 为提升性能，选择数量少的进行操作
      if (data.nodes.length < data.edges.length) {
        const nodes = this.getNodes();

        // 遍历节点实例，将所有节点提前。
        nodes.forEach(node => {
          node.toFront();
        });

if (!data) {
      throw new Error('data must be defined first');
    }

    this.clear();

    this.emit('beforerender');
    const autoPaint = this.get('autoPaint');
    this.setAutoPaint(false);

    each(data.nodes, (node: NodeConfig) => {
      self.add(ITEM_TYPE.NODE, node);
    });

    each(data.edges, (edge: EdgeConfig) => {
      self.add(ITEM_TYPE.EDGE, edge);
    });

    if (!this.get('groupByTypes')) {
      // 为提升性能，选择数量少的进行操作
      if (data.nodes.length < data.edges.length) {
        const nodes = this.getNodes();

        // 遍历节点实例，将所有节点提前。
        nodes.forEach(node => {
          node.toFront();
        });
      } else {
        const edges = this.getEdges();

        // 遍历节点实例，将所有节点提前。

const axisShapes: Shape[] = getShapes(backgroundGroup, viewId);
  const cacheShapes = shapes.concat(axisShapes);
  canvas.setSilent(`${viewId}caches`, cache(cacheShapes));
  let drawn;

  if (newIsUpdate) {
    // 执行更新动画
    drawn = addAnimate(caches, cacheShapes, canvas);
  } else {
    // 初入场动画
    // drawn = addAnimate(caches, shapes, canvas, newIsUpdate);
    let animateCfg;
    let animate;
    const elements = view.get('elements');
    const coord = view.get('coord');
    _.each(elements, (element: Element) => {
      const type = element.get('type');
      const elementAnimateOption = element.get('animateOptions');
      if (elementAnimateOption !== false) {
        // 用户为关闭动画
        animateCfg = getAnimateCfg(type, 'appear', elementAnimateOption);
        if (!animateCfg) {
          return true;
        } // 用户关闭了初始动画

        animate = getAnimate(type, coord, 'appear', animateCfg.animation);
        if (_.isFunction(animate)) {
          if (animate.animationName.indexOf('group') === 0) {
            // 执行全局动画
            const yScale = element.getYScale();
            const zeroY = coord.convertPoint({
              x: 0,

function getInterpolateShapeAttrs(cfg: ShapeInfo, shapeType: string) {
  const points = getPathPoints(cfg.points, cfg.connectNulls); // 根据 connectNulls 值处理 points
  let path = [];
  each(points, (eachLinePoints) => {
    const interpolatePoints = getInterpolatePoints(eachLinePoints, shapeType);
    path = path.concat(getInterpolatePath(interpolatePoints));
  });

  return {
    ...getStyle(cfg, true, false, 'lineWidth'),
    path,
  };
}

public destroy() {
    this.view = null;
    this.event = null;
    // 先销毁 action 再清空，一边遍历，一边删除，所以数组需要更新引用
    each(this.actions.slice(), (action) => {
      action.destroy();
    });
    this.actions = null;
    this.cacheMap = null;
  }
}

cfg.style = {};
    }
    // const oriShapeAttrs = shape.attr();
    // cfg.style.radius = cfg.style.radius || oriShapeAttrs.radius;
    // cfg.style.offset = cfg.style.offset || oriShapeAttrs.offset;

    cfg = this.getPathPoints(cfg);
    const points = this.getControlPoints(cfg);
    
    const path = this.getPath(points, this.routeCfg);
     // 下面这些属性需要覆盖默认样式与目前样式，但若在 cfg 中有指定则应该被 cfg 的相应配置覆盖。
     const strokeStyle = {
      stroke: cfg.color,
      path
    };
    const shapeStyle = deepMix({}, shape.attr(), strokeStyle, cfg.style);

    shape.attr(shapeStyle);
    this.updateLabel(cfg, item);
  }
}, 'single-line');