Reputation: 71
I want to pass color to the ctxRenderer function so that I can change it dynamically later, but it seems unsuccessful. please have a look at the code below:
{
id: 3,
label: "Node3",
shape: "custom",
style: {
color:{background:'yellow', border:'red'},
},
ctxRenderer: ({
ctx,
id,
x,
y,
state: { selected, hover },
style,
label,
}) => {
const r = style.size;
const sideLength = r * Math.sin(Math.PI / 5);
const drawNode = () => {
ctx.beginPath();
const vertices = 5;
const a = (Math.PI * 2) / vertices;
const startAngle = (3 * Math.PI) / 10;
ctx.moveTo(x + r * Math.cos(startAngle), y + r * Math.sin(startAngle));
for (let i = 1; i <= vertices; i++) {
ctx.lineTo(
x + r * Math.cos(startAngle + a * i),
y + r * Math.sin(startAngle + a * i)
);
}
ctx.closePath();
ctx.save();
ctx.fillStyle = style.color.background;
ctx.fill();
ctx.strokeStyle = style.color.border;
ctx.stroke();
ctx.restore();
ctx.font = "normal 12px Arial";
ctx.fillStyle = "black";
ctx.fillText(label, x - sideLength + 10, y - sideLength / 2 + 35);
};
return {
drawNode,
nodeDimensions: { width: 2 * r, height: 2 * r },
};
},
}
ctx.fillStyle = style.color.background;
In this statement, style.color is #97c2fc, so style.color.background is "undefined", How can I pass the color definition value of a node from outside to ctxRenderer ?
Upvotes: 0
Views: 33