Dynamic decoration that is based to data and doesn't affect node bounds

[nekitk]

I need to display a button near the node based on data property like this:

I used a regular panel with visibility binding, but I noticed that this panel affects AvoidsNodes routing as my node ports are inside node bounds in that case:

I tried to move this comment button to an adornment, but to do that I ended up creating an adornment inside an unused binding:

content.bind('hasComments', 'hasComments', (hasComments: boolean, obj: go.Panel) => {
    if (isNotNil(obj.part) && hasComments) {
        const adornment = $(
            go.Adornment,
            'Spot',
            $(go.Panel, 'Horizontal', $(go.Placeholder), getCommentCursorButton(params)),
        );

        adornment.adornedObject = obj.part;
        obj.part.addAdornment('COMMENT_BUTTON_ADORNMENT', adornment);
    }

    return hasComments;
});

It works but I wonder if there is a better way to achieve that. My main goal is to show this comment button without it affecting AvoidsNodes routing calculations.

[walter]

The Node.avoidableMargin property is used to compute the area occupied by a node that should be avoided. If that decoration/button has a fixed size, you could specify an appropriate negative value for Margin.right.

If the desired avoidable area can’t be computed given a simple Margin, you can override the Node.getAvoidableRect method. You’ll want to define a subclass of Node and use it in your template(s).

You might also want to set Part.layoutConditions on those node template(s) so that layouts are not invalidated just because the size of the node changed as that decoration or button is shown or hidden. Something like:

layoutConditions: go.LayoutConditions.Standard & ~go.LayoutConditions.NodeSized

[nekitk]

getAvoidableRect was what I was looking for, thanks!