node label about ngraph.pixi

[anvaka]

You can try using pixi's PIXI.Text for that. For each node add it to the stage of ngraph.pixi, then updated label's position inside renderNode() callback

[gg4u]

Hi @anvaka ,

I am looking at your comment above - I did not understand if label or image properties of PIXI.graphics object pertain to the UI or rendering of node.

Could you please help in suggesting how to modify the renderer callback to customise UI for each node, as example with images or labels ? An example would be really helpful!

I so far tried this : I began with a simple test, and modified defaultNodeRenderer to render nodes' images :

function defaultNodeRenderer(node) {
    ..

    var bunny = PIXI.Sprite.fromImage('https://unsplash.it/200');
    bunny.anchor.set(0.5);
    bunny.pivot.set(NODE_WIDTH/2, NODE_WIDTH/2);
    bunny.position.set(x, y);
    bunny.scale.set(0.1, 0.1);
    graphics.addChild(bunny);
    setTimeout(function(){ graphics.removeChild(bunny); }, 1); 

Here, a new image is added and removed for each frame, otherwise the image persists in the next frame. How are images treated respect to native shapes?
As example, drawing a rectangle appears only once, and do not persist on the stage like instead images do.

So, where should I tell PIXI to add a child image to graphics only once , and then render it?
I thought that I may first augment the ui object with the image url, and then update the image rendering.
As example, would you suggest to add a child sprite to the graphics in createNodeUI or initNode ?
But how does PIXI render the position of images (e.g. graphics.addChild(bunny) ) VS native webgl (graphics.drawRect(x, y, NODE_WIDTH, NODE_WIDTH); ) - here I see the rectangle does not persist on the stage, while the image does.

Could you please provide an example of a custom node rendering, by showing where to add a node's image and/or node's label property, and how to deal with rendering of custom UI?

It would be really helpful a mock-up, thank you.

[gg4u]

I tried the following: modify initNode, and then defaultNodeRender.

This time images and labels persists on the stage frame by frame, and the trick of adding and removing images and labels to graphics (graphics.addChild and then removeChild) does not work anymore.

Also, rendering texts like this appears to render very slow.

Better solutions ?

  function initNode(node) {
    var ui = nodeUIBuilder(node);
    // augment it with position data:
    ui.pos = layout.getNodePosition(node.id);

    // augment with decorator
    ui.decorator = 'https://unsplash.it/200';
    ui.label = 'This is a PixiJS text';

    // and store for subsequent use:
    nodeUI[node.id] = ui;
  }

  function defaultNodeRenderer(node) {



    

    var x = node.pos.x - NODE_WIDTH/2,
        y = node.pos.y - NODE_WIDTH/2;

    graphics.beginFill(0xFF3300);
    graphics.drawRect(x, y, NODE_WIDTH, NODE_WIDTH);

    var bunny = PIXI.Sprite.fromImage( node.decorator );
    bunny.anchor.set(0.5);
    bunny.pivot.set(NODE_WIDTH/2, NODE_WIDTH/2);
    bunny.position.set(x, y);
    bunny.scale.set(0.1, 0.1);

    graphics.addChild(bunny);
   
    // text
    var label = new PIXI.Text( node.label , { fontFamily: "Arial", fontSize: "20px" ,  fill: 0xffffff} );

    // PIXI.TextStyle gives me error, don't know why, not important now
    // label.style = new PIXI.TextStyle({
    //     fontFamily: 'Arial',
    //     fontSize: 36,
    //     fontStyle: 'italic',
    //     fontWeight: 'bold',
    //     fill: ['#ffffff', '#00ff99'], // gradient
    //     stroke: '#4a1850',
    //     strokeThickness: 5,
    //     dropShadow: true,
    //     dropShadowColor: '#000000',
    //     dropShadowBlur: 4,
    //     dropShadowAngle: Math.PI / 6,
    //     dropShadowDistance: 6,
    //     wordWrap: true,
    //     wordWrapWidth: 440
    // });

    
    label.x = x;
    label.y = y + NODE_WIDTH/2;

    graphics.addChild(label);

   // remove sprites
    setTimeout(function(){ 
      graphics.removeChild(bunny, label);
      // graphics.removeChild(label); 
    }, 1);
  }

[gg4u]

OK! Getting better :)

I understood that I must add the sprites to graphics, while I am creating the node, and then I can move sprites' position when rendering.

So I augment the UI object created in initNode with properties pointing to the sprites, and then manipulate sprites' position when rendering.

  function initNode(node) {

 ... 

var bunny = PIXI.Sprite.fromImage('2.png');
    bunny.anchor.set(0.5);
    bunny.pivot.set(NODE_WIDTH/2, NODE_WIDTH/2);
    bunny.scale.set(0.1, 0.1);

    graphics.addChild(bunny);

    ui.thumbnail = bunny;
...
}

function defaultNodeRenderer(node) {

....

var thumbnail = node.thumbnail;
   thumbnail.position.set(x, y);

}

@anvaka I was able to solve it myself, however comments or suggestions of yours to improve the logic I used are very welcome!
I will post for other tips in other questions, thank you so much!