antvis/G6



The issue has been closed
[V5]minimap和combo一起使用的时候报异常 #5455
hanfengcan posted onGitHub
问题描述
以下代码基于官网示例修改,在minimap的样例里面加入combo之后,异常了。
import { Graph as BaseGraph, Extensions, Util, extend } from '@antv/g6';
const Graph = extend(BaseGraph, {
plugins: {
minimap: Extensions.Minimap,
},
});
import insertCss from 'insert-css';
const container = document.getElementById('container') as HTMLElement;
const width = container.scrollWidth;
const height = (container.scrollHeight || 500) - 110;
const data = Util.mock(20).random();
/** minimap with string config */
const minimap1 = 'minimap';
/** minimap with object onfig and delegate type */
const minimap2 = {
key: 'minimap2',
type: 'minimap',
size: [300, 200],
mode: 'delegate',
delegateStyle: {
fill: 'red',
},
className: 'g6-minimap-2',
viewportClassName: 'g6-minimap-viewport-2',
};
/** minimap with object onfig and keyShape type */
const minimap3 = {
key: 'minimap3',
type: 'minimap',
mode: 'keyShape',
size: [300, 200],
className: 'g6-minimap-3',
viewportClassName: 'g6-minimap-viewport-3',
};
new Graph({
container,
width,
height,
data: {
nodes: [
{ id: 'node1', data: { x: 250, y: 150, parentId: 'combo1' } },
{ id: 'node2', data: { x: 350, y: 150, parentId: 'combo1' } },
{ id: 'node3', data: { x: 250, y: 300, parentId: 'combo2' } },
],
combos: [
{ id: 'combo1', data: { parentId: 'combo2' } },
{ id: 'combo2', data: {} },
],
},
layout: {
type: 'force',
},
node: {
labelShape: {
text: {
fields: ['id'],
formatter: (model) => {
return model.id;
},
},
},
},
modes: {
default: ['brush-select', 'zoom-canvas', 'activate-relations', 'drag-canvas', 'drag-node'],
},
plugins: [minimap1, minimap2, minimap3],
});
/** set the style of minimap */
insertCss(`
.g6-minimap-2 {
position:absolute;
bottom:40px;
right:40px;
box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}
.g6-minimap-viewport-2 {
border: 2px solid rgb(25, 128, 255);
}
.g6-minimap-3 {
position:absolute;
bottom:40px;
left:40px;
box-shadow:0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}
.g6-minimap-viewport-3 {
border: 2px solid rgb(25, 128, 255);
}
`);
重现链接
上述代码
重现步骤
将上述代码复制到官网的样例
预期行为
无异常
平台
- 操作系统: [Windows]
- 网页浏览器: [edge]
- G6 版本: [5.0.0-beta.28]
屏幕截图或视频(可选)
补充说明(可选)
No response