G6 icon indicating copy to clipboard operation
G6 copied to clipboard

[V5]minimap和combo一起使用的时候报异常

Open hanfengcan opened this issue 1 year ago • 0 comments

问题描述

以下代码基于官网示例修改,在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]

屏幕截图或视频(可选)

image

补充说明(可选)

No response

hanfengcan avatar Feb 21 '24 08:02 hanfengcan