focueItem 不生效 #5038

问题描述

import G6 from '@antv/g6';

/**

• The demo shows customing a combo type by extending the built-in circle combo
• by Shiwu
• /

// The symbols for the marker inside the combo const collapseIcon = (x, y, r) => { return [ ['M', x - r, y], ['a', r, r, 0, 1, 0, r * 2, 0], ['a', r, r, 0, 1, 0, -r * 2, 0], ['M', x - r + 4, y], ['L', x - r + 2 * r - 4, y], ]; }; const expandIcon = (x, y, r) => { return [ ['M', x - r, y], ['a', r, r, 0, 1, 0, r * 2, 0], ['a', r, r, 0, 1, 0, -r * 2, 0], ['M', x - r + 4, y], ['L', x - r + 2 * r - 4, y], ['M', x - r + r, y - r + 4], ['L', x, y + r - 4], ]; };

G6.registerCombo( 'cCircle', { drawShape: function draw(cfg, group) { const self = this; // Get the shape style, where the style.r corresponds to the R in the Illustration of Built-in Rect Combo const style = self.getShapeStyle(cfg); // Add a circle shape as keyShape which is the same as the extended 'circle' type Combo const circle = group.addShape('circle', { attrs: { ...style, x: 0, y: 0, r: style.r, }, draggable: true, // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'combo-keyShape', }); // Add the marker on the bottom const marker = group.addShape('marker', { attrs: { ...style, fill: '#fff', opacity: 1, x: 0, y: style.r, r: 10, symbol: collapseIcon, }, draggable: true, // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type name: 'combo-marker-shape', });

  return circle;
},
// Define the updating logic for the marker
afterUpdate: function afterUpdate(cfg, combo) {
  const self = this;
  // Get the shape style, where the style.r corresponds to the R in the Illustration of Built-in Rect Combo
  const style = self.getShapeStyle(cfg);
  const group = combo.get('group');
  // Find the marker shape in the graphics group of the Combo
  const marker = group.find((ele) => ele.get('name') === 'combo-marker-shape');
  // Update the marker shape
  marker.attr({
    x: 0,
    y: style.r,
    // The property 'collapsed' in the combo data represents the collapsing state of the Combo
    // Update the symbol according to 'collapsed'
    symbol: cfg.collapsed ? expandIcon : collapseIcon,
  });
},

}, 'circle', );

const data = { nodes: [ { id: 'node1', x: 250, y: 200, comboId: 'combo1', type: 'firstNodeInRing' }, { id: 'node2', x: 300, y: 200, comboId: 'combo1', type: 'firstNodeInRing' }, { id: 'node3', x: 100, y: 200, comboId: 'combo3' }, ], combos: [ { id: 'combo1', label: 'Combo 1', parentId: 'combo2' }, { id: 'combo2', label: 'Combo 2' }, { id: 'combo3', label: 'Combo 3', collapsed: true }, ], };

G6.registerNode('firstNodeInRing', { draw(cfg, group) { const {x, y} = cfg; console.log(x, y) group.addShape('rect', { attrs: { // 打开注释失效 // x, // y, width: 30, height: 30, radius: 8, lineWidth: 1, cursor: 'pointer', stroke: 'red' }, draggable: true, }); return group; } });

const descriptionDiv = document.createElement('div'); descriptionDiv.innerHTML = 'Click the bottom marker to collapse/expand the combo.'; const container = document.getElementById('container'); container.appendChild(descriptionDiv);

container.addEventListener('click', (e) => { graph.focusItem('node2'); });

const width = container.scrollWidth; const height = (container.scrollHeight || 500) - 20; const graph = new G6.Graph({ container: 'container', width, height, // Set groupByTypes to false to get rendering result with reasonable visual zIndex for combos groupByTypes: false, // Configure the combos globally defaultCombo: { // The type of the combos. You can also assign type in the data of combos type: 'cCircle', labelCfg: { refY: 2, }, // ... Other global configurations for combos }, modes: { default: ['drag-combo', 'drag-node', 'drag-canvas'], }, }); graph.data(data); graph.render();

// collapse/expand when click the marker graph.on('combo:click', (e) => { if (e.target.get('name') === 'combo-marker-shape') { // graph.collapseExpandCombo(e.item.getModel().id); graph.collapseExpandCombo(e.item); if (graph.get('layout')) graph.layout(); else graph.refreshPositions(); } });

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 - 20); };

重现链接

https://g6.antv.antgroup.com/examples/item/customCombo/#cCircle

重现步骤

1.取消firstNodeInRing中attrs中x、y的注释 2.点击Click the bottom marker to collapse/expand the combo. 文字

预期行为

正常显示

平台

chrome 117.0.5938.132

屏幕截图或视频（可选）

No response

补充说明（可选）

No response