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

Describe the bug

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

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

https://github.com/antvis/G6/assets/123483999/04388231-cdbd-4e82-8755-81caf670900d

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:

https://github.com/antvis/G6/assets/123483999/7473ddce-5c31-42b2-b93b-0832cb53a18c

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 circle 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.

https://github.com/antvis/G6/assets/123483999/5b63d48c-83c1-4b81-8d5d-1f0d03f7da66

Is it possible to somehow solve this problem or minimize it? I tried to update the node partially, by changing only the style -> node.update({style: {fill: ()}}). But still, the node seems to be completely redrawn and flickering.

Thanks for any help!

Your Example Website or App

https://stackblitz.com/edit/vitejs-vite-63rzkx?file=src%2FgraphCode.tsx&terminal=dev

Steps to Reproduce the Bug or Issue

For 1 problem:

1) create an image node in the code without clipCfg and add a style - “select”. 2) go to the graph, create a node on the graph and select it. 3) Move the node to any other point in the graph. 4) After it there should be a trace - the color that is defined in select (nodeStateStyles: {selected: {}})

For problem 2:

1) create an image node with clipCfg in the code and add a style - “select”. 2) go to the graph, create a node on the graph. 3) dynamically change the size of the node and try to change clipCfg according to the size of the node. 4) see that the image size has changed, but clipCfg remains the same.

For problem 3:

1) create an image node in the code and add a style - “select”; 2) go to the graph, create a node on the graph. 3) select it and remove the selection effect. 4) do this many times, the node will periodically flicker.

Expected behavior

As a user, I hope that when creating a node and when transporting it, I will not continue to monitor the graph. And when using clipCfg it will also change its size - when I explicitly specified this. When the picture flickers, I would like to avoid this effect, for example, by using some kind of caching.

Screenshots or Videos

No response

Platform

• OS: macOS, Windows, Linux
• Browser: Chrome, Firefox
• Version: latest browser versions
• library: 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

Additional context

No response