Adornments Questions

Hi All,

I have some questions related to Adornments, if anyone can help me.

  • Can a node have multiple adornments?
  • Can a group or link have adornments?
  • Can an adornment on a node be bound to the data on the node? Or a sub property object on the node perhaps?
  • Adornments are created as part of the node/group/link template correct?
  • Can Adornments visibility be toggled when the item is selected or not? So we can make them visible all the time even when the node is not selected? Or we could hide them if we need to?


Yes, a Node can have multiple Adornments. This happens for example when selecting a resizable and rotatable Node: there are three Adornments: one for selection, one for resizing, and one for rotating.

Yes, any Part can have Adornments, other than Adornments themselves.

Yes, an Adornment is a Part, so you can use data-binding within the Adornment. Each Adornment is data-bound to the same data that its Adornment.adornedPart is bound to. This demonstrates all of the above points: Selection and Adornments.

I’m not sure what you mean by “sub property object on the node”. I suspect the answer is no.

Adornments are not part of the visual tree of a Part – Adornments are separate Parts. However you can define Adornments within the template, by setting properties such as Part.selectionAdornmentTemplate or GraphObject.toolTip. But some of the samples define Adornments in separate assignment statements, so that there isn’t too much code/complexity within the template.

Yes, you can create an Adornment for a Part even when the Part is not selected. ToolTips and ContextMenus are the obvious examples of that. However there’s no point in unconditionally creating an Adornment for every Node – it would be better to just create a more complex node and toggle the GraphObject.visible property (perhaps via data binding) of the Panels that you want to show and hide. But if some nodes need an adornment sometimes, then that would make sense.

Hi Walter,

Thanks for the quick response! This has answered all my questions for now. I’m not sure if I will use adornments or a more complex template, because the adornments (or at least the template idea of the adornments) will have to be shared between nodes with different categories.

These adornments would be used to indicate errors, warnings, risks and triggers which are all pretty generic amongst my node types.

What I meant by “sub property object on the node” was if the object was bound to a different data source for the adornment data, but since the adorned part will use the same data source as the part it is bound to, this is better.



I don’t know what would be best, but I suspect I would just use more complex node templates.

You can share the implementation of parts of templates by defining the “shared” part, and then using copies of them in the actual templates. By that I mean something like:

var warningsPanel = $(go.Panel, … );

myDiagram.nodeTemplateMap.add(“template1”, $(go.Node, …, warningsPanel.copy(), …));
myDiagram.nodeTemplateMap.add(“template2”, $(go.Node, …, warningsPanel.copy(), …));

Just to be clear, no GraphObject can belong to more than one Panel at any moment. That is why the templates above have to explicitly GraphObject.copy() the “shared” panel of warning indicators, because it cannot actually be shared. Still, this should avoid the duplication of template-like code.

I hope this all works as you would expect.

Oops – I spoke too soon. Although I believe what I said about copying for different templates works some of the time, it does not work if there are Bindings involved. I do not know of a good work-around for that scenario.