antvis / antvis/S2

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

Open
#2,791 3 comments 0 reactions 1 assignee Claimed by @lijinke666 View on GitHub
💤 inactive
Dominant language
TypeScript
Stars
1.7k
Forks
220
PR merge metrics
No merged PRs in 30d

Description

### 🏷 Version

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

### Sheet Type

- [ ] PivotSheet

### 🖋 Description

重写表格事件遇到扩展问题。
```javascript
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了但是改函数依然是生效的。
```javascript
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即可。

```javascript
// 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();
})
...

```

```javascript
// base-event.ts
export abstract class BaseEvent {
public spreadsheet: SpreadSheet;

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

```

### 😅 Current Behavior

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

### 💻 System information

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.