Is there a way to use states and styles with the custom draw function of the node?

[VladislavMaksimov]

I registered a custom node and wrote a custom draw function for it because the node differs from the default graphin-circle. Now I want to highlight this type of node when I click on them like the default graphin-circle nodes are highlighted. However, stateStyles doesn't apply to my custom nodes. Can I make it work somehow or should I write all the logic myself and make the nodes array changing after clicking?

• "@antv/g6": "^4.8.19"
• "@antv/graphin": "^2.7.21"

[VladislavMaksimov]

I tried to make it via the setState method in registerNode. Added shadow on "active" state and made it undefined on "inactive". There are two problems:

1. The shadow doesn't disappear when the user clicks on the canvas. It disappears only if the user clicks on another node. Making all nodes inactive on "canvas:click" doesn't help: it works only if the user clicks on canvas twice. It seems like the state of the node immediately changes to "active" after it has been changed to "inactive". Like the canvas rerenders with the previous state.

2. When I resize canvas and move nodes with shadows, I have visual bugs:

[VladislavMaksimov]

Solved the second problem. First I added shadowBlur in setState but now I moved it to the draw function and don't have this bug.

export const setState = (name: string, _: any, item: any) => {
  const group = item.getContainer();
  const container = group.get("children")[0];
  switch (name) {
    case "active":
      container.attr("shadowColor", "#474747");
      container.attr("shadowBlur", "10"); // INCORRECT
      break;
    case "inactive":
      container.attr("shadowColor", undefined);
      break;
    default:
      container.attr("shadowColor", undefined);
  }
};

However, the first problem remains.

[VladislavMaksimov]

Ok, I found the solution. I need to change nodes' states by myself and to disable default ActivateRelations behavior, because there is a conflict between ActivateRelations and manual state changing.