graph.updateItem icon:image bug

[RackweLLizm]

We are doing Node customisation in the Project we use. So the user can change the photo of a node. When I make this customisation with the updateItem method in G6VP. it does not apply the changes until I execute the graph.render command. When I manually trigger the graph.render command, the photo data is visible, but this causes the appearance of fogs in some areas of the project.

Question:
When I update a node using graph.updateItem and give an image to its icon, it is not directly reflected on the g6vp canvas screen. If you can give information about which code block is the source of this problem, I would like to investigate and fix it.

[pomelo]

@RackweLLizm you can refer to this source code
https://github.com/antvis/Graphin/blob/master/packages/graphin/src/shape/graphin-circle.ts#L339

[RackweLLizm]

@pomelo-nwu
I have examined the part you mentioned, but it did not solve my problem. The part that I think will solve my main problem will be the place where the graph.updateItem(item,{}) method is triggered. Because G6VP loads nodes with photos at the time of initiliazed. But later when a photo is loaded with UpdateItem, G6VP does not render this photo on the node.

When I look at the MiniMap, I see the photo there. But I cannot see it on Node.
I think the problem is related to the UpdateItem method. I would be very grateful if you can point to the area where this part is triggered and the image operation is performed.

[RackweLLizm]

@pomelo-nwu

I solved the problem, although not with a satisfactory method.
The problem is related to the update method in the circle of the graph.

If I update a node's icon as a photo with the graph.updateItem method and add the following code, the problem is solved, g6vp can render the photo.

path: graphin-circle.js

    update: function update(cfg, item) {
      if (!cfg.style) return;

      try {
        // var style = deepMix({}, cfg._initialStyle, cfg.style); // getStyles(cfg._initialStyle, cfg.style) as NodeStyle;
        var style = merge({}, cfg._initialStyle, cfg.style); // getStyles(cfg._initialStyle, cfg.style) as NodeStyle;

        cfg._initialStyle = Object.assign({}, style);
        var badges = cfg.style.badges,
          keyshape = style.keyshape;
        var r = getRadiusBySize(keyshape.size);
        var group = item.getContainer();


        if (style.icon.type === "image") {
          //customize
          var imageAttrs = parseIcon(style);
          var imageShape = group.addShape('image', imageAttrs);
          var clip = style.icon.clip;

          if (clip) {
            var _r = clip.r,
              clipStyle = __rest(clip, ["r"]);

            imageShape.setClip({
              type: 'circle',
              attrs: Object.assign({
                x: 0,
                y: 0,
                r: _r
              }, clipStyle)
            });
          }
          //customize
        }



        var shapes = group.get('children');

        setStatusStyle(shapes, style, parseAttr);

        var copyShapes = _toConsumableArray(shapes);

        if (badges) {
          var index = 0;
          copyShapes.forEach(function (shape) {
            if (shape.cfg.name.startsWith('badges')) {
              shapes.splice(index, 1);
            } else {
              index = index + 1;
            }
          });
          badges.forEach(function (badge) {
            drawBadge(badge, group, r);
          });
        }
      } catch (error) {
        console.error('error');
      }
    } // eslint-disable-next-line @typescript-eslint/no-explicit-any

added code:

if (style.icon.type === "image") {
//customize
var imageAttrs = parseIcon(style);
var imageShape = group.addShape('image', imageAttrs);
var clip = style.icon.clip;

      if (clip) {
        var _r = clip.r,
          clipStyle = __rest(clip, ["r"]);

        imageShape.setClip({
          type: 'circle',
          attrs: Object.assign({
            x: 0,
            y: 0,
            r: _r
          }, clipStyle)
        });
      }
      //customize
    }

i also think there is a problem with badges remove here. sometimes i see that even if i set the badges array to empty value in Graphin, the badges are not removed. still there.

I made the following change in this. solved the problem;

var badges = style.badges

(changes) => var badges = cfg.style.badges,