5.x: Set node size based on label automatically

[curious-broccoli]

before 5.x I could use the solution posted in #2331 to have nodes fit around a label's size

now this doesn't work anymore and https://g6.antv.antgroup.com/en/manual/whats-new/upgrade#preparation-before-upgrade mentions graph.getCanvas().getContainer() but that only gives the html element and doesn't help.

how can I do it now?

[curious-broccoli]

this likely works, found in the FAQ of the documentation #6347 (comment)

[curious-broccoli]

actually, that snippet by itself doesn't work. after removing the typescript syntax and (temporarily) removing nonexistent functions like the memoize function, the problem is that the getCanvasContext (and isString) functions don't exist.

[curious-broccoli]

without memoization (not recommended), this is one way to do it

using node.style.labelText

const _canvas = document.createElement("canvas");
const measureTextWidth = (text, font = {}) => {
        const { fontSize, fontFamily = "sans-serif", fontWeight, fontStyle, fontVariant } = font;
        const ctx = _canvas.getContext("2d");
        ctx.font = [fontStyle, fontWeight, fontVariant, `${fontSize}px`, fontFamily].join(" ");
        return ctx.measureText(text).width;
};

const graph = new G6.Graph({
  node: {
    style: {
      size: (node) => [measureTextWidth(node.style.labelText, {}), 30],
    },
  },
});