如何在cell内自定义多个按钮，并添加点击事件

[Carnia]

类似于DOM table组件的功能：
cell内有多个按钮，分别绑定了不同的事件。

 ===============
|buttonA buttonB|
 ===============

比如在上述cell内，渲染两个自定义的button，有各自的点击事件，点击后有可能是触发编辑弹窗，或者删除提示

[lijinke666]

S2 目前主要定位是看数, 对于传统 DOM table 最后一列放置编辑按钮 这种场景不是很适合, 推荐你用 antd

如果用 S2 实现类似的效果, 由于本身基于 Canvas, 只能基于坐标计算, 会比较麻烦, 以在 DataCell 中添加文字为例, 提供一种方案:

1. 将文字改成居左或居中 (默认是居右)

  theme: {
    dataCell: {
      text: {
        textAlign: 'center',
      },
    },
  }

2. 自定义你想添加文字对应的单元格, 比如数值, 列头等
3. 重写 drawTextShape, 分别绘制文字, 计算坐标, 绑定事件
4. 如果你想绘制 [按钮], 而不是 [文字], 那么只能绘制一个图片

class TestDataCell extends DataCell {
  drawTextShape() {
    const textStyle = this.getTextStyle();
    const position = this.getTextPosition();
    const textA = 'A';
    const textB = 'B';

    const margin = 5;

    const textAWidth = measureTextWidth(textA, textStyle);
    const textBWidth = measureTextWidth(textB, textStyle);

    this.actualTextWidth = textAWidth + textBWidth + margin;

    const textAShape = renderText(
      this,
      [this.textShape],
      position.x,
      position.y,
      textA,
      textStyle,
    );

    const textBShape = renderText(
      this,
      [this.textShape],
      position.x + textAWidth + margin,
      position.y,
      textB,
      textStyle,
    );

    textAShape.on('click', () => {
      console.log('textA clicked');
    });

    textBShape.on('click', () => {
      console.log('textA clicked');
    });
  }
}

const s2Options: S2Options = {
  dataCell: (viewMeta) => new TestDataCell(viewMeta, viewMeta.spreadsheet),
};