fix: update to latest @antv/g

[xiaoiver]

• Update to latest @antv/component@2.x which supports string marker in Category items.
• anchor attribute is removed. But we can modify path in symbols instead, an offset of half width is applied.

/**
 * ▷
 */
export const triangle: SymbolFactor = (width: number, height: number) => {
// before
  return [['M', 0, 0], ['L', width, -height / 2], ['L', width, height / 2], ['Z']];
// after
  return [['M', -width / 2, 0], ['L', width / 2, -height / 2], ['L', width / 2, height / 2], ['Z']];
};

• Since x/y/z are removed from Group CustomElement and Mesh, we should use transform: 'translate3d()' instead. For example, after calculating layout for each nodes:

// before
dataToUpdate.nodes.push({ id: id as ID, style: { x, y, z } });
// after
dataToUpdate.nodes.push({ id: id as ID, style: { transform: `translate3d(${x}, ${y}, ${z})` } });

Another example in base combo:

protected getComboStyle(attributes: Required<S>) {
// before
    return { x, y, zIndex };
// after
    return { transform: `translate(${x}, ${y})`, zIndex };
}

And there are also no more redundant and non-standard attributes like x/y for <g> in the generated SVGs.

// before
<g id="label" fill="none" transform="matrix(1,0,0,1,254,31.25)" x="254" y="31.25"></g>
// after
<g id="label" fill="none" transform="matrix(1,0,0,1,254,31.25)"></g>

Checklist:

• element nodes
• element edges
• element port
• layout
• behavior
• animation
• plugin

[xiaoiver]

layoutDendrogramTb 例子文本朝向有问题，应该是把 rotate transform 覆盖了：

[Aarebecca]

layoutDendrogramTb 例子文本朝向有问题，应该是把 rotate transform 覆盖了：

这种可能需要合并 transform 属性（而不是替换），会有潜在问题吗

[xiaoiver]

这种可能需要合并 transform 属性（而不是替换），会有潜在问题吗

SVG 的 <g> 其实只有 transform 属性可用，所以如果我们允许用户直接传 transform 到一个 Group 或者 CustomElement 上，那肯定会覆盖的。上面那个问题我修复的方式是，把 x/y 体现在 transform 的 translate 部分，如果用户传的 transform 不包含 translate，那就没问题，比如上面例子中的 rotate。

但我觉得更好的做法是把 x/y 当作 CustomElement 的自定义属性，由它的各个子元素消费（例如子元素 把它赋值给自身的 cx/cy 属性，子元素 赋给自身的 x/y 属性这样），这样就可以和父元素的 transform 分离开，自然就不存在覆盖问题了。

我现在也在尝试往这个方向改，会修改到 getGraphicStyle 这个方法，放开 x/y/z 这些原本被过滤掉的属性，继续往子元素下传递。以 Circle 类型的 node 为例：

protected getKeyStyle(attributes: Required<CircleStyleProps>): GCircleStyleProps {
  const keyStyle = super.getKeyStyle(attributes);
  const { x = 0, y = 0, z = 0 } = keyStyle;
  return { ...keyStyle, r: Math.min(...this.getSize(attributes)) / 2, cx: x, cy: y, cz: z };
}

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g

[xiaoiver]

目前只剩下 animation 这部分例子截图待生成。

[xiaoiver]

2000 circle nodes(icon + text)
render + layout 耗时 710 -> 640ms

数据流这部分应该还有一些优化空间：