Image node leaves traces when dragged. And if I use clipCfg to solve this problem, it cannot be updated using the built-in methods.

[l0tka-py]

Hello, thanks for the g6 library.
I have several questions related to the fact that either I am doing something wrong, or there are bugs that I would like to understand how to solve.

npm list @antv/g6
-- @antv/g6@4.8.24 -- @antv/g6-pc@0.8.24
+-- @antv/g6-element@0.8.24
| -- @antv/g6@4.8.24 deduped -- @antv/g6-plugin@0.8.24
`-- @antv/g6@4.8.24 deduped

npm -v
10.5.0

node -v
v20.11.1

1. The first problem I have is that when creating an image node, and select this node or hover, when dragging it leaves traces on the graph (the selection functions for a node are very important for my solution. But other than using nodeStateStyles: {}, I didn’t find how to make the selection normal for an image node).
   Video and code below -

new G6.Graph(
  {
      height: window.innerHeight,
      width: window.innerWidth,
      // @ts-ignore
      container: ReactDOM.findDOMNode(graphRef.current),
      modes: {
          default: [
              'drag-canvas',
              {
                  type: 'zoom-canvas',
                  maxZoom: 2,
                  minZoom: 0.1
              },
              'drag-node',
              'click-select',
              'brush-select'
          ],
      },
      defaultNode: {
          style: {
              cursor: 'grab'
          },
      },
      nodeStateStyles: {
          selected: {
              fill: 'lightsteelblue', // Change fill color when selected
              stroke: 'blue', // Change stroke color when selected
              fillOpacity: 0.4, // Set fill opacity when selected
              strokeOpacity: 1, // Set stroke opacity when selected
              lineWidth: 3, // Set line width when selected
              shadowColor: 'rgba(0, 0, 0, 0.3)', // Add shadow when selected
              shadowBlur: 5, // Set shadow blur when selected
              cursor: 'pointer',
          },
          hover: {
              fill: 'lightsteelblue', // Change fill color when hovered
              stroke: 'blue',
              fillOpacity: 0.3, // Set fill opacity to make it transparent
              strokeOpacity: 0.5, // Change stroke color when hovered
              lineWidth: 2,
          },
      },
      plugins: [
          contextMenu,
          tooltip
      ],
  }
)
function nodeCreateFunction(position, has_icon, node_name) {
  const [x, y] = position || [0, 0];
  const img = has_icon ? `/static/img/` + node_meta_data?.type + '.png' : '';
  const node_size = [100, 100];
  graph?.addItem('node', {
      id: node_name,
      type: 'image',
      shape: 'image',
      x, y,
      img: img,
      label: node_name,
      size: node_size,
  });
}

IMG_2726.MP4

This problem can be solved by using clipCfg. But if I use clipCfg I have another problem.
2) At some points, I need to change the size of the nodes and the size of the node changes successfully by graph.update(node, {size: }), but if I pass the changes to clipCfg (where I pass the new radius), nothing changes and clipCfg is like as if it remains the same. Sample code and video of the problem below:

IMG_2728.MP4

In this case, the graph code does not change, only the image node creation code changes (I changed it, just because of the previous problem, to solve the problem of "drawing the residual trace"):

function nodeCreateFunction(position, has_icon, node_name) {
  const [x, y] = position || [0, 0];
  const img = has_icon ? `/static/img/` + node_meta_data?.type + '.png' : '';
  const node_size = [100, 100];
  graph?.addItem('node', {
      id: node_name,
      type: 'image',
      x, y,
      img: img,
      label: 'soceity',
      size: node_size,
      clipCfg: {
          show: true,
          type: 'circle',
          r: node_size[0] / 2,
          labelCfg: {position: 'bottom'},
      },
  });
}

and the resize function looks like this:

changeNodeSize(props: { node_name: string; size: number }): void {
      console.log("size:", props.size)
      const item = graph?.findById(props.node_name);
      item?.update(
     {
        size: [props.size, props.size], 
        clipCfg: {
            show: true,
            type: 'circle',
            r: props.size / 2,
            labelCfg: {position: 'bottom'},
        },
     })
   item?.refresh()
   console.log("item:", item?.getModel());
}

I tried different methods, including graph.update, graph.updateItem, item.update, tried to hide the node - using hide and after use show, tried to do item.update({}) and then called item.refresh. For some reason nothing helped me.

At the same time, based on the console, it is as if the node’s data itself is being updated. (There are no other functions that change the state of nodes and their display.)

In principle, I would like to find a solution to the first or second problem, it is not necessary to solve both, if it is possible to solve the first problem without clipCfg, then this will suit me (and if for the first problem, it would be possible to make not a square selection, but a round one, as with clipCfg that would be great), unfortunately I can’t refuse to increase the size of the node, an important part of the project :(.

3. The most harmless problem is related to the flickering of the node when applying or removing the select and hover effects. Is there any solution for this. An example of flickering in the video below.

IMG_2727.MP4

Is there any way to avoid flickering of the picture?
Thanks to everyone who responds.