lix joy
lix joy

Reputation: 71

How to pass the color parameter to the ctxRenderer function of the custom type node of the vis-network?

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

Answers (0)

Related Questions