antvis / antvis/G6

[Bug]: antv g6 v5.0.50 在使用自定义组件时,内容为动态是例如 textarea 时,size该如何动态改变

Open
#7,548 1 comment 0 reactions 0 assignees View on GitHub
bug 🐛 question 💬
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.