Element Update Depend on Effect Attributes

[Aarebecca]

背景

当前 G6 的元素绘制大概可以总结为以下内容：

1. 元素视作与 G 图形等同，可以被当作普通 G 图形插入到任何节点中
2. 元素通常具有子图形，每个子图形都具有一个对应的 draw 方法
3. 元素存在一个 render 方法来执行各个子图形 draw 方法的绘制
4. 元素存在一个 update 方法用于更新绘制

type StyleProps = {
  x?: number;
  y?: number;
  size?: [number, number];
  fill?: string;
};

class Shape {
  private style: StyleProps = {};

  constructor(style: StyleProps) {
    this.style = style;
    this.draw(style);
  }

  draw(style: StyleProps) {
    this.drawSubShape(style);
  }

  drawSubShape(style: StyleProps) {}

  update(style: Partial<StyleProps>) {
    this.style = { ...this.style, ...style };
    this.draw(this.style);
  }
}

问题

在目前的元素设计中，没有考虑依赖更新的问题，即元素的任意一个属性发生变化，则这个元素的所有图形都会进行更新

这就导致 G6 Element Controller 中需要非常小心地处理元素更新问题，避免频繁的元素重复更新，因而导致了额外的更新逻辑。
例如 setElementsVisibility 和 setElementZIndex 两个方法，本意是因为只需要设置图形父容器上的属性，因此没有走元素更新(update)逻辑，而是直接设置(attr)元素属性。

解决方案

面对上述问题，更好的办法是在元素中处理更新问题。这里借鉴 React 依赖更新的思想，提出一种基于装饰器(Decorator)的方案，以最低的改造成本支持依赖属性更新能力。具体方案如下：

1. 定义一个装饰器：effect (实现见文末)，接收一个参数 deps: string[] 用于描述依赖的属性名

2. 对子图形绘制方法进行装饰

class Shape {
  // ...

  // 假定 subShape 仅依赖 Shape StyleProps 中的 `size` 和 `fill` 属性
  @effect(['size', 'fill'])
  drawSubShape(style: StyleProps) {}

  // ...
}

通过上述改造，就能实现元素的副作用属性更新能力，当且仅当 deps 中列出的属性值发生变更时，才会执行 drawSubShape 方法。

具体实施上，effect 装饰器是全局唯一的，各元素只需要通过该装饰器对元素内的子图形绘制方法进行装饰即可！

effect 大致实现如下：

function effect(deps: string[]) {
  return function (
    target: Shape,
    propertyKey: string,
    descriptor: PropertyDescriptor
  ) {
    const fn = descriptor.value;
    descriptor.value = function (this: IShape, style: StyleProps) {
      // 取出原始样式
      const original = pick(this.style, deps);
      // 取出变更样式
      const modified = pick(style, deps);
      // 比较变更
      if (isEqual(original, modified)) return null;  // 跳过执行
      return fn.call(this, style);
    };
    return descriptor;
  };
}