visjs / vis-network

:dizzy: Display dynamic, automatically organised, customizable network views.
https://visjs.github.io/vis-network/
Apache License 2.0
2.99k stars 365 forks source link

Please add an incoming parameter for custom shape node #2168

Open joylix opened 2 months ago

joylix commented 2 months ago

In custom shape node, in order to dynamically pass the color and border color of the node into ctxRenderer method, so that the display properties of the node can be dynamically changed, I did not find suitable input parameters and could only use a custom string segmentation method:

{ id: 3,
  label: "node3 | blue | yellow | caption",     
  shape: "custom",
  ctxRenderer: ({
    ctx, id,    x, y,   state: { selected, hover }, style, label,           
 }) => {                
    const drawNode = () => {
    ctx.beginPath();
    ...
    ctx.closePath();
    ctx.save();      
    ctx.fillStyle = label.split("|")[1];         //background:blue
    ctx.fill();
    ctx.strokeStyle =  label.split("|")[2];      //border:yellow
    ctx.fillText( label.split("|")[3], x,y);         //caption:caption
   }

I can't find any better way to achieve this .