Custom Adornment size

GoJS
1

hi,

not sure what I’m doing wrong here… but I’m trying to show a rectangle around steps… by doing this:

const $GO = go.GraphObject.make;
const adorn = <go.Adornment>$GO(go.Adornment, 'Spot',
    $GO(go.Panel, 'Auto'
        , $GO(go.Placeholder,{ padding: 5 })
        , $GO(go.Shape, { fill: null, stroke: '#E77A00', strokeWidth: 2, strokeDashArray: [3, 2] }))
    );
adorn.adornedObject = node;
node.addAdornment('bm', adorn);

where node is an go.Node…

but… the adornments come up like this:

image.png890×580 19.4 KB

and are not “encapsulating” the node as I would expect them to.

if I use the same adornment code as a selection template for the node it works perfectly…

any ideas how to fix them?

2

An “Auto” Panel is how you have the main element (by default the first child object) act as a border around the other element(s).

But in your case it doesn’t make sense to try to fit the Placeholder around the Shape. The Placeholder’s size and position are determined by the Adornment.adornedObject. The Shape’s size defaults to 100x100.

So, exchange the order of those two elements in the panel.

3

also seems the inner panel is not really needed… this works:

const adorn = <go.Adornment>$GO(go.Adornment, 'Auto'
    , $GO(go.Shape, { fill: null, stroke: '#E77A00', strokeWidth: 2, strokeDashArray: [3, 2] })
    , $GO(go.Placeholder,{ padding: 5 })
);

not touching goJS for a few months makes one forget everything about it :)

thanks!