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

[linwaiwai]

🏷 Version

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

Sheet Type

• PivotSheet

🖋 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

[github-actions]

你好 @linwaiwai，请编辑你的 issue 标题, 一个言简意赅的 issue 标题可以节省大家的时间, 请不要将标题当做正文, 或者为空。

Hello, @linwaiwai, please edit your issue title. a concise issue title will save everyone time. please do not leave the title as the body or empty.

[linwaiwai]

https://github.com/linwaiwai/S2/tree/feature/event-extension

[lijinke666]

linwaiwai/S2@feature/event-extension

看起来你已经修复了, 就是把 bindEvents 延后? 直接提交 PR 吧, 加一个单测覆盖, 参考

S2/packages/s2-core/__tests__/unit/interaction/root-spec.ts

Lines 566 to 591 in c8ebc98

	test('should register custom interaction', () => {
	class MyInteraction extends BaseEvent {
	bindEvents() {}
	}
	const customInteraction = {
	key: 'customInteraction',
	interaction: MyInteraction,
	};
	mockSpreadSheetInstance.options.interaction.customInteractions = [
	customInteraction,
	];
	rootInteraction = new RootInteraction(mockSpreadSheetInstance);
	expect(rootInteraction.interactions.size).toEqual(
	defaultInteractionSize + 1,
	);
	expect(
	rootInteraction.interactions.has(customInteraction.key),
	).toBeTruthy();
	expect(
	rootInteraction.interactions.get(customInteraction.key),
	).toBeInstanceOf(MyInteraction);
	});