Customize Image

[eljeffeg]

Not sure how to do a couple things.. thought you might be able to clarify.

Trying put a border around the images. Something like this...
padding:1px;
border:1px solid #021a40;

Tried to place it in the ".node " class, no luck. Tried to set it in the ".attr('border', "1px solid #021a40")" of the "Viva.Graph.svg('image')", no luck. So not sure how to customize that...

Another thing.. I can easily specify the size of the image in the data as an attrib.
graph.addNode('anvaka', {url : 'https://secure.gravatar.com/avatar/91bad8ceeec43ae303790f8fe238164b', size: "24"});

Then I can specify this in the node, which allows me to specify some images larger than others.
.attr('width', node.data.size)

However, I can't center them the same way...
nodeUI.attr('x', pos.x - 12).attr('y', pos.y - 12);

Would be nice to be able to grab the size of the image and divide by 2 here.

[anvaka]

To put a border around image you should follow SVG rules. I'm not sure which way is the best one, but usually I go with a grouping element g and put elements inside the group to achieve required UI. E.g. for image with border I would create a rectangle and then put image above it:

graphics.node(function(node) {
  var ui = Viva.Graph.svg('g'),
      rect = Viva.Graph.svg('rect')
         .attr('stroke-width', 10)
         .attr('stroke', 'blue')
         .attr('width', node.data.size)
         .attr('height', node.data.size),
      img = Viva.Graph.svg('image')
         .attr('width', node.data.size)
         .attr('height', node.data.size)
         .link(node.data.url);

  ui.append(rect); 
  ui.append(img);
  ui.myCustomSize = node.data.size; // we'll talk about this later

  return ui;    
});

Moving groups around the screen is a bit harder than plain images though. Groups don't have 'x' and 'y' properties, but can be moved with svg:transform attribute:

graphics.placeNode(function(nodeUI, pos){
    var half = nodeUI.myCustomSize/2; // myCustomSize is here!
    nodeUI.attr('transform', 
                'translate(' + 
                      (pos.x - half) + ',' + 
                      (pos.y - half) + 
                ')'); // and not so elegant syntax for transforms
});

As for the size - you can pass arbitrary attribute to the object returned from 'node()' callback. Exactly the same object you'll get as nodeUI in the 'placeNode()' callback. I'm using this fact in the code above to specify custom attribute called 'myCustomSize'.

I also made this fiddle for you to show complete example.

Hope this helps :).

[eljeffeg]

Perfect!