【v5】自定义jsx节点+dagre布局，边不显示

[tomorrowcheng]

Describe the bug / 问题描述

使用g6-extension-react自定义节点后，在dagre布局下，edge不显示了，代码如下

import { ExtensionCategory, register } from "@antv/g6";
import { GNode, Rect, Text } from "@antv/g6-extension-react";
import React from "react";
register(ExtensionCategory.NODE, "g", GNode);


const EasyNode = ({ data, size }) => {
  const { label } = data.data;
  const [width, height] = size;

  return (
    <Rect width={width} height={20}>
      <Text
        text={label}
        textBaseline="top"
        fill="#f00"
        fontSize={14}
        dx={20}
        dy={2}
      />
    </Rect>
  );
};

const graph = new Graph({
  zoom: 0.8,
  data: {
    nodes: [
      { id: 'kspacey', data: { label: 'Kevin Spacey', width: 144, height: 100 } },
      { id: 'swilliams', data: { label: 'Saul Williams', width: 160, height: 100 } },
      { id: 'bpitt', data: { label: 'Brad Pitt', width: 108, height: 100 } },
      { id: 'hford', data: { label: 'Harrison Ford', width: 168, height: 100 } },
      { id: 'lwilson', data: { label: 'Luke Wilson', width: 144, height: 100 } },
      { id: 'kbacon', data: { label: 'Kevin Bacon', width: 121, height: 100 } },
    ],
    edges: [
      { id: 'kspacey->swilliams', source: 'kspacey', target: 'swilliams' },
      { id: 'swilliams->kbacon', source: 'swilliams', target: 'kbacon' },
      { id: 'bpitt->kbacon', source: 'bpitt', target: 'kbacon' },
      { id: 'hford->lwilson', source: 'hford', target: 'lwilson' },
      { id: 'lwilson->kbacon', source: 'lwilson', target: 'kbacon' },
    ],
  },
  node: {
    type: 'g',
    style: {
      radius: 10,
      iconText: (d) => d.data.label,
      size: (d) => [d.data.width, d.data.height],
      ports: [{ placement: 'top' }, { placement: 'bottom' }],
      component: (data) => <EasyNode data={data} size={[[data.data.width, data.data.height]]} />
    },
    palette: {
      type: 'group',
      field: 'label',
    },
  },
  edge: {
    type: 'polyline',
      style: {
        endArrow: true,
      },
  },
  layout: {
    type: 'dagre',
  },
  behaviors: ['drag-element'],
});

graph.render();

Reproduction link / 重现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

G6 Version / G6 版本

🆕 5.x

Operating System / 操作系统

macOS

Browser / 浏览器

Chrome

Additional context / 补充说明

No response

[tomorrowcheng]

是不是因为自定义的节点没有设置anchorPoints？但这种写法不知道怎么设置anchorPoints……

[kqswzhyb]

我是使用g6-extension-react的ReactNode自定义节点+compact-box布局后，边不显示，感觉和这个issue是一个问题吧，希望官方能解决下

[kuangdongksk]

目前只可以在node的配置中自定义节点吗，这样只能用一个自定义节点，可不可以在node数据中的style配置自定义节点

[yvonneyx]

问题解决了嘛？可以贴一个复现链接

Describe the bug / 问题描述

使用g6-extension-react自定义节点后，在dagre布局下，edge不显示了，代码如下

import { ExtensionCategory, register } from "@antv/g6";
import { GNode, Rect, Text } from "@antv/g6-extension-react";
import React from "react";
register(ExtensionCategory.NODE, "g", GNode);


const EasyNode = ({ data, size }) => {
  const { label } = data.data;
  const [width, height] = size;

  return (
    <Rect width={width} height={20}>
      <Text
        text={label}
        textBaseline="top"
        fill="#f00"
        fontSize={14}
        dx={20}
        dy={2}
      />
    </Rect>
  );
};

const graph = new Graph({
  zoom: 0.8,
  data: {
    nodes: [
      { id: 'kspacey', data: { label: 'Kevin Spacey', width: 144, height: 100 } },
      { id: 'swilliams', data: { label: 'Saul Williams', width: 160, height: 100 } },
      { id: 'bpitt', data: { label: 'Brad Pitt', width: 108, height: 100 } },
      { id: 'hford', data: { label: 'Harrison Ford', width: 168, height: 100 } },
      { id: 'lwilson', data: { label: 'Luke Wilson', width: 144, height: 100 } },
      { id: 'kbacon', data: { label: 'Kevin Bacon', width: 121, height: 100 } },
    ],
    edges: [
      { id: 'kspacey->swilliams', source: 'kspacey', target: 'swilliams' },
      { id: 'swilliams->kbacon', source: 'swilliams', target: 'kbacon' },
      { id: 'bpitt->kbacon', source: 'bpitt', target: 'kbacon' },
      { id: 'hford->lwilson', source: 'hford', target: 'lwilson' },
      { id: 'lwilson->kbacon', source: 'lwilson', target: 'kbacon' },
    ],
  },
  node: {
    type: 'g',
    style: {
      radius: 10,
      iconText: (d) => d.data.label,
      size: (d) => [d.data.width, d.data.height],
      ports: [{ placement: 'top' }, { placement: 'bottom' }],
      component: (data) => <EasyNode data={data} size={[[data.data.width, data.data.height]]} />
    },
    palette: {
      type: 'group',
      field: 'label',
    },
  },
  edge: {
    type: 'polyline',
      style: {
        endArrow: true,
      },
  },
  layout: {
    type: 'dagre',
  },
  behaviors: ['drag-element'],
});

graph.render();

### Reproduction link / 重现链接 _No response_

Steps to Reproduce the Bug or Issue / 重现步骤

No response

G6 Version / G6 版本

🆕 5.x

Operating System / 操作系统

macOS

Browser / 浏览器

Chrome

Additional context / 补充说明

No response

代码写错了，size 双层嵌套了

component: (data) => <EasyNode data={data} size={[[data.data.width, data.data.height]]} /> ❌
component: (data) => <EasyNode data={data} size={[data.data.width, data.data.height]} /> ✅