graph.updateItem icon:image bug about g6vp

[pomelo-nwu]

@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,