antvis/G6

使用registerNode自定义然后添加shape,创建了两个及两个以上的shape,当鼠标移出节点的时候第一个shape会自动消失 #4936

hx8321 posted onGitHub

Describe the bug

使用registerNode自定义然后添加shape,创建了两个及两个以上的shape,当鼠标移出节点的时候第一个shape会自动消失,但是创建一个shape就没有问题

Your Example Website or App

https://stackblitz.com/edit/react-jmsqkt?file=index.js

Steps to Reproduce the Bug or Issue

import G6 from '@antv/g6';

const GRAPH_CONTAINER = 'container';

G6.registerNode( 'storage-node', { afterDraw(cfg, group) { let svgUrl = 2; const radius = 14; // 小节点环绕半径 for (let i = 0; i < svgUrl; i++) { const angle = ((Math.PI * 2) / svgUrl) * i; const x = radius * Math.cos(angle); const y = radius * Math.sin(angle); const smallNode = group.addShape('circle', { attrs: { x, y, r: 10, fill: 'blue', }, name: 'image-attr', }); } }, // update: undefined }, 'circle' );

const data = { nodes: [ { id: 'node1', x: 100, y: 150, size: 100, type: 'storage-node', }, ], };

const container = document.getElementById('container'); const width = container.scrollWidth; const height = container.scrollHeight || 500; const graph = new G6.Graph({ container: GRAPH_CONTAINER, width, height, modes: { default: [ { type: 'drag-node', delegate: false, }, ], }, defaultNode: { style: { fill: '#DEE9FF', stroke: '#5B8FF9', }, labelCfg: { style: { fontSize: 12, }, }, }, defaultEdge: { style: { stroke: '#e2e2e2', }, }, nodeStateStyles: { selected: { stroke: 'red', }, }, });

graph.data(data); graph.render();

graph.on('circle-shape:click', (evt) => { const { item } = evt; graph.updateItem(item, { type: 'storage-node' }); });

graph.on('node:mouseenter', (e) => { graph.setItemState(e.item, 'active', true); }); graph.on('node:mouseleave', (e) => { graph.setItemState(e.item, 'active', false); });

if (typeof window !== 'undefined') window.onresize = () => { if (!graph || graph.get('destroyed')) return; if (!container || !container.scrollWidth || !container.scrollHeight) return; graph.changeSize(container.scrollWidth, container.scrollHeight); };

[](url)

Expected behavior

image

Screenshots or Videos

No response

Platform

  • OS: [e.g. macOS, Windows, Linux]
  • Browser: [e.g. Chrome, Safari, Firefox]
  • Version: [e.g. 91.1]

Additional context

No response


name 给个当前节点中唯一的字符串 image

posted by Yanyan-Wang over 1 year ago

好的,谢谢

posted by hx8321 over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests