antvis / antvis/X6

使用layout布局后,不会触发 added 事件

Open
#4,113 3 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
6.7k
Forks
1.9k
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug

使用 `GridLayout` 或 `CircularLayout` 或其他布局 进行布局后,没有触发 `graph.on('node:added')` 事件
```
import { Graph, Model } from '@antv/x6'
import { GridLayout } from '@antv/layout'

const data: Model.FromJSONData = {
nodes: [],
}

for (let i = 1; i <= 16; i++) {
data.nodes!.push({
id: `${i}`,
shape: 'rect',
width: 20,
height: 20,
label: `${i}`,
attrs: {
body: {
stroke: 'transparent',
fill: '#5F95FF',
},
label: {
fill: '#fff',
},
},
})
}

const graph = new Graph({
container: document.getElementById('container')!,
})

graph.on('node:added', (arg) => {
console.log('node:added', arg)
})

// 使用 graph.addNode 会触发 node:added
// data.nodes.forEach(n => {
// graph.addNode(n)
// })

// 使用 GridLayout 或 CircularLayout 等布局不会触发 node:added 事件
const circularLayout = new GridLayout({
type: 'circular',
center: [500, 500],
})
const model = circularLayout.layout(data)
graph.fromJSON(model, { silent: false })

```

根据文档查阅到 [fromJSON](https://x6.antv.antgroup.com/api/mvc/model#fromjson),将 `options.silent` 设置为 `false` 也没有触发 `added`

### Your Example Website or App

### Steps to Reproduce the Bug or Issue

详情见描述

### Expected behavior

不管通过哪种方式添加到 `graph` 上,都应该触发 `added` 事件吧

### Screenshots or Videos

_No response_

### Platform

- OS: [ Windows,]
- Browser: [Chrome]
- Version: ["@antv/x6": "^2.16.1", "@antv/layout": "0.3.25 ]

### Additional context

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the GridLayout/CircularLayout result passed to graph.fromJSON(model, { silent: false }) and compare it with direct graph.addNode calls. Trace how fromJSON handles node insertion and the node:added event, then verify that both paths produce the expected event for the reproduction using @antv/x6 and @antv/layout.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.