【V5】 G6V5.x 版本里，state 更新后，自定义节点无法接收到回调，没有 demo 和说明。非常难实现预期效果。 about g6 HOT 7 CLOSED

// Your Custom Node
const MyNode = (props) => {
  const {
    graph,
    data: { id, states },
  } = props;

  return (
    <div
      onClick={() => {
        graph.setElementState(id, ['selected']);
      }}
      style={{
        width: 100,
        height: 100,
        border: states.includes('selected') ? '1px solid black' : 'none',
      }}
    >
      Node Content
    </div>
  );
};

// graph options
const graph = new Graph({
  // ...other options
  node: {
    type: Custom_NODE_KEY,
    // ...other options
    style: {
      // ...other options
      // Use function instead arrow function to get `this` context
      component: function (data) {
        return <MyNode data={data} graph={this} />;
      },
    },
  },
});

function CustomNode({ data, graph }) {
  const { name, style, id, states } = data;
  const [width, height] = [260, 60];

  const radius = 4;

  return (
    <Group>
      <Rect
        width={width}
        height={height}
        fill={states.includes("selected") ? "#f00" : style.fill}
        radius={[radius, radius, 0, 0]}
        onClick={(ev) => {
          console.log("🚀 ~ CustomNodeByHive ~ ev:", {
            ev,
            id,
            data,
            states,
            graph,
          });
          graph.setElementState(id, "selected");
          graph.setElementState(id, ["selected"]);
          graph.updateNodeData([
            { id, states: ["selected"], style: { fill: "#f00" } },
          ]);
        }}
      >
        <Text
          text={name}
          textBaseline="center"
          fill="#000"
          fontSize={14}
          dx={10}
          dy={height / 2 - 14}
        />
      </Rect>
    </Group>
  );
}


// NODE
function registerNodeEvents(graph, setCurrentNode) {
  graph.on(NodeEvent.CLICK, (event) => {
    const { id } = event.target;
    const data = graph.getNodeData(id);
    setCurrentNode((d) => ({
      ...d,
      id,
      data,
    }));

    graph.setElementState(id, "selected");
    graph.updateNodeData([
      { id, states: ["selected"], style: { fill: "#f00" } },
    ]);
    graph.draw();
  });
}

// COMBO
function registerComboEvents(graph, setCurrentNode) {
  graph.on(ComboEvent.CLICK, (event) => {
    const { id } = event.target;
    const data = graph.getComboData(id);
    return setCurrentNode((d) => ({
      ...d,
      id,
      data,
    }));
  });

  graph.on(ComboEvent.POINTER_ENTER, (event) => {
    const { target } = event;
    // graph.updateNodeData([
    //   {
    //     id: target.id,
    //   },
    // ]);
    // graph.draw();
  });

  graph.on(ComboEvent.POINTER_OUT, (event) => {
    const { target } = event;
    // graph.updateNodeData([
    //   {
    //     id: target.id,
    //     style: {
    //       lineWidth: 10,
    //     },
    //   },
    // ]);
    // graph.draw();
  });
}

export function registerEvents(serviceName, callback) {
  const _this = this;
  registerNodeEvents(_this, callback);
  registerComboEvents(_this, callback);
}