[Bug]: antv g6 v5.0.50 在使用自定义组件时,内容为动态是例如 textarea 时,size该如何动态改变
- Dominant language
- TypeScript
- Stars
- 12.3k
- Forks
- 1.6k
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug / 问题描述
```vue
import { ExtensionCategory, register, Graph } from '@antv/g6';
import { VueNode } from 'g6-extension-vue';
import { defineComponent, h, ref } from 'vue';
export default {
name: 'G6DynamicVueNode',
mounted() {
// Register Vue Node Type
register(ExtensionCategory.NODE, 'vue-node', VueNode);
// Child Component
const ChildComponent = defineComponent({
props: ['message'],
setup(props) {
return () => h('div', {
style: {
padding: '8px',
backgroundColor: '#e6f7ff',
border: '1px solid #91d5ff',
borderRadius: '4px',
marginTop: '8px'
}
}, `子组件内容: ${props.message}`);
}
});
// Dynamic Vue Node Component
const DynamicVueNode = defineComponent({
props: ['data'],
setup(props) {
const isExpanded = ref(false);
const toggleExpand = () => {
isExpanded.value = !isExpanded.value;
};
return () => {
const width = isExpanded.value ? '280px' : '160px';
const height = isExpanded.value ? '180px' : '100px';
return h('div', {
style: {
width,
height,
padding: '12px',
border: '2px solid #1890FF',
borderRadius: '8px',
backgroundColor: '#FFFFFF',
display: 'flex',
flexDirection: 'column',
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
transition: 'all 0.3s ease'
}
}, [
h('div', {
style: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: '8px'
}
}, [
h('span', { style: { fontWeight: 'bold' } }, props.data.data?.label || '默认节点'),
h('button', {
onClick: toggleExpand,
style: {
padding: '4px 8px',
fontSize: '12px',
cursor: 'pointer'
}
}, isExpanded.value ? '收起' : '展开')
]),
h('div', {
style: {
flex: 1,
overflow: 'hidden'
}
}, [
isExpanded.value && h('div', [
h('p', { style: { margin: '8px 0', fontSize: '14px' } }, '这是动态内容区域'),
h(ChildComponent, { message: '来自子组件的消息' })
])
])
]);
};
}
});
// Create Graph
const graph = new Graph({
container: 'container',
width: 800,
height: 600,
autoFit: 'view',
data: {
nodes: [
{ id: 'node1', style: { x: 200, y: 150 }, data: { label: '动态节点1' } },
{ id: 'node2', style: { x: 400, y: 250 }, data: { label: '动态节点2' } },
{ id: 'node3', style: { x: 300, y: 400 }, data: { label: '动态节点3' } }
],
edges: [
{ source: 'node1', target: 'node2' },
{ source: 'node2', target: 'node3' }
]
},
node: {
type: 'vue-node',
style: {
component: (data) => h(DynamicVueNode, { data: Object.assign({}, data) })
}
},
edge: {
style: {
endArrow: true,
stroke: '#1890FF'
}
}
});
// Render the graph
graph.render();
}
};
#container {
width: 100%;
height: 100vh;
}
在定义组件中连线、桩位置都会异常
### Reproduction link / 复现链接
_No response_
### Steps to Reproduce the Bug or Issue / 重现步骤
_No response_
### Version / 版本
🆕 5.x
### OS / 操作系统
- [ ] macOS
- [ ] Windows
- [ ] Linux
- [ ] Others / 其他
### Browser / 浏览器
- [ ] Chrome
- [ ] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the VueNode registration and the Graph node configuration shown in the issue, focusing on how the dynamic Vue component changes its width and height after the expand action. Reproduce the example and inspect when node bounds, links, and anchor positions are updated. Done means expanded and collapsed nodes keep their connections and ports aligned with the rendered component.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100