node shape size depends on the content #105
Description
Hi,
I'm trying to make this graph with this package on vue 3
https://twitter.com/hturan/status/1641780868640374784?s=12&t=dOgaGILz9Qbms-_hYG20VA
I've made most of them, but the problem I couldn't solve is when we create a rectangle shape, we have to pass static size for width and height, but here I need to have a dynamic size by considering the text inside it.
is there any way to make it dynamic?
this is my rectangle shape code.
export default {
shapeSize: 120,
shapeBuilder: shapeBuilder,
};
function shapeBuilder(data, TemplateAPI) {
const { ShapeStyle, TextCollection, CollectionStyle,Shape,TextShape } = TemplateAPI;
const text = TextShape(data.payload?.title ?? "",[
ShapeStyle("font-size", "18px", true),
ShapeStyle("fill", "#000000", true),
]);
const shape = Shape.Rectangle(300, 250, 10);
shape.select("path").style("fill", data.payload?.color ?? "#22d3ee");
const titleShape = TextCollection(data.payload?.title ?? "", CollectionStyle(70, 100, 0, 0, 0, 10, 5), [
ShapeStyle("class", "gly_text.light"),
ShapeStyle("font-size", "1em"),
]);
shape.append(() => titleShape.node());
return shape;
}