antvis / antvis/S2

🤔使用interactjs绑定自定义绘制的rect事件无法触发

Open
#2,907 0 comments 0 reactions 0 assignees View on GitHub
❔question 💤 inactive next
Dominant language
TypeScript
Stars
1.7k
Forks
220
PR merge metrics
No merged PRs in 30d

Description

### 🏷 Version

| Package | Version |
| -------------- | ------- |
| @antv/s2 | 2.0.0-next.26 |
| @antv/s2-react | |
| @antv/s2-vue | |

### Sheet Type

- [1] PivotSheet
- [1] TableSheet
- [ ] GridAnalysisSheet
- [ ] StrategySheet
- [ ] EditableSheet

### 🖋 Description

### 🔗 Reproduce Link
基于官网[在单元格内绘制自定义图形demo](https://s2.antv.antgroup.com/zh/examples/custom/custom-shape-and-chart/#custom-g-shape) ,想使用interactjs将
蓝色圆形绑定draggable以移动图形的位置,代码如下

```
const rect = new Rect({
style: {
x: 300,
y: 200,
width: 100,
height: 100,
fill: '#1890FF',
fillOpacity: 0.8,
stroke: '#F04864',
strokeOpacity: 0.8,
lineWidth: 4,
radius: 100,
zIndex: 999,
},
}),
const canvas = s2.getCanvas()
canvas.appendChild(rect)
interact(rect, {
context: canvas.document as any
}).draggable({
startAxis: 'xy',
lockAxis: 'start',
listeners: {
start(event) {
console.log('start')
},
move(event) {
console.log('event')
}
}
})
```

### 😊 Expected Behavior
触发start和move事件

### 😅 Current Behavior
没有触发任何事件

Contributor guide

Open the contributing guide

Research direction

Start with the official custom-shape-and-chart demo linked in the issue and reproduce the interaction using the shown Rect, canvas.appendChild, and interactjs setup. Trace why the draggable start and move listeners do not fire in the custom canvas context; done means both callbacks trigger when the blue shape is dragged.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.