antvis / S2

⚡️ A practical visualization library for tabular analysis.
https://s2.antv.antgroup.com
MIT License
1.46k stars 194 forks source link

🐛重写表格事件遇到扩展问题 #2791

Open linwaiwai opened 2 months ago

linwaiwai commented 2 months ago

🏷 Version

Package Version
@antv/s2
@antv/s2-react
@antv/s2-vue

Sheet Type

🖋 Description

重写表格事件遇到扩展问题。

const s2Options = {
  interaction: {
    customInteractions: [
      {
        // 重写多选
        key: InteractionName.DATA_CELL_MULTI_SELECTION,
        interaction: CustomDataCellMulitSelection,
      },
      {
        key: InteractionName.DATA_CELL_BRUSH_SELECTION,
        interaction: CustomDataCellBrushSelection,
      },
    ],
 }
}

重写的CustomDataCellMulitSelection需要禁用系统内置的DataCellClick,如果不改写S2代码,则需要禁用代码:

interaction.addIntercepts([InterceptType.CLICK]);

但是S2在点击画布会调用resetState将intercepts重置,禁用的位置仅有bindEvents位置可以调用。系统DataCellClick在初始化的时候即会调用bindEvents,使用on函数进行监听的。所以在S2在root.ts中即使将其replace了但是改函数依然是生效的。

 const defaultInteractions = this.getDefaultInteractions();

    defaultInteractions.forEach(({ key, interaction: Interaction, enable }) => {
      if (enable !== false) {
        this.interactions.set(key, new Interaction(this.spreadsheet)); // 该Interaction实际已经生效了。并没有被后续CustomInteractionClass替换。
      }
    });

    if (!isEmpty(customInteractions)) {
      forEach(customInteractions, (customInteraction: CustomInteraction) => {
        const CustomInteractionClass = customInteraction.interaction;

        this.interactions.set(
          customInteraction.key,
          new CustomInteractionClass(this.spreadsheet),
        );
      });
    }

⌨️ Code Snapshots

🔗 Reproduce Link

🤔 Steps to Reproduce

😊 Expected Behavior

需要将调用bindEvents的时机调后,仅仅调用已经生效被复写的interactions即可。

// root.ts

  const defaultInteractions = this.getDefaultInteractions();

    defaultInteractions.forEach(({ key, interaction: Interaction, enable }) => {
      if (enable !== false) {
        this.interactions.set(key, new Interaction(this.spreadsheet));
      }
    });

    if (!isEmpty(customInteractions)) {
      forEach(customInteractions, (customInteraction: CustomInteraction) => {
        const CustomInteractionClass = customInteraction.interaction;

        this.interactions.set(
          customInteraction.key,
          new CustomInteractionClass(this.spreadsheet),
        );
      });
    }
    this.interactions.forEach((interaction:BaseEvent)=>{
      interaction.bindEvents();
    })
   ... 
// base-event.ts
export abstract class BaseEvent {
  public spreadsheet: SpreadSheet;

  constructor(spreadsheet: SpreadSheet) {
    this.spreadsheet = spreadsheet;
    \\ this.bindEvents();
  }
   ...
}

😅 Current Behavior

所以该代码时间无法进行内置的Click的重写。

💻 System information