Styling Options for Canvas Nodes and Labels

[gossi]

Some options I wish to see on Nodes:

• border (width and color)
• padding
• new Shape: Rectangle with rounded corners (or Rectangle) with border-radius option

Labels:

• An option to let the text stay within the width of the node. FillText already offers this option as last parameter. Width would be = nodeWidth - border-width - padding (autoWidth can't be active for this option)

[gossi]

Well for the labels, an option "fitInNode" would be cool, that is actually taking care of everything. If autoWidth and autoHeight are set: nothing to do here. If autoWidth: nothing to do here If autoHeight: provide maxWidth param If no auto: probably cut text and add "..." (three dots) at the end

[philogb]

Hi,

Thanks for your input.

About the node options. The philosophy of the toolkit is that you provide new NodeTypes and EdgeTypes. As you can imagine this list can become very large, and so it's up to the person writing custom code in the toolkit to add these type of nodes. You can see an example of a custom node with borders here : http://thejit.org/static/v20/Jit/Examples/Spacetree/example5.html . Here's the code for it: http://thejit.org/static/v20/Jit/Examples/Spacetree/example5.code.html .

About the labels: maxWidth is kind of problematic. I'm not sure if you've seen how this behaves in different browsers, but this is not implemented in all browsers the same way, and for the browsers that do something about it, since the text isn't split into multiple lines the result is kind of weird. autoWidth works pretty fine for DOM-based labels.

[gossi]

Aaah, for the Nodes, that makes Sense, I will look through it :)

For the labels: No I haven't worked with canvas yet, unfortunately. Just looked in the specs and your code parallely. Is there a same implementation for Labels as it exists for nodes and edges? I could think of the same scenario, where e.g. one may add shadow to it's own text.

[philogb]

You can override the "renderLabel" method for Native labels for example. Take a look at this section of the code: http://github.com/philogb/jit/blob/master/Source/Visualizations/Spacetree.js#L1231 . One would go like this to override the method:

 $jit.ST.Label.Native.implement({
   'renderLabel': function(canvas, node) {
     //...some custom code here...
   }
 });

I hope this helps,

[gossi]

Yes, I had some fun playing around with it and with canvas. So I got something up running, it's not perfect and I'm not deep enough in your code to think about all the constraints, but it's a start. See here: https://gist.github.com/728625

[dotdreaming]

I have created a new NodeType which has canvasStyles applyed to it. But is there a way to change the store and fill colour if it is selected?