Picture along the edge of a rounded rectangle


We have some rounded rectangle shapes that contain images. Although we set the alignment and alignmentFocus to go.Spot.BottomCenter, there is some space between the image and the bottom of the shape. I think GoJS considers the shape to be the rectangle without the rounded corners. Is there a way to get the image right to the edge? I have tried setting an offset in the alignment. This moves the image but the bottom of it is cut-off. I also tried giving the rectangle a negative margin, this caused the rounded rectangle to appear to have no rounded corners, since I guess they are hidden

Are you using an “Auto” Panel? If so, you need to set Shape.spot2:

Brilliant, it looks spot on now (excuse the pun). Thanks

Actually there is one minor annoyance. If I apply spot1 (TopLeft) and spot2 (BottomRight) to a Diamond, the image appears outside the shape, which is what I’d expect. But my ports are now also outside the shape, so links can end outside the shape. I understand why that’s happening but I’d like the image to appear outside with the ports still on the shape edge. Is that possible?

Maybe use nested Panels: a “Spot” Panel and an “Auto” Panel?

Thanks, that did it. Our web version now looks almost identical to the desktop version (using GoDiagram).


If you have any comments about the porting process, I bet there are (or will be) interested readers.

I’ll put down a few thoughts. I wasn’t the original developer of our desktop product so I’m not intimately familiar with GoDiagram but the API shares a lot of the same basic ideas as GoDiagram, but doesn’t match exactly (I wouldn’t expect it to really). From my understanding GoDiagram doesn’t have the same concept of templates that GoJS does. That obviously makes porting from the desktop a little more complex, in fact it’s mostly been a complete rewrite apart from converting some of our back-end logic from C# to TypeScript. But I certainly think templates are a really neat idea, for most applications they’ll make life a lot simpler. Our application is probably more complex than average since most aspects of the appearance of the diagram are driven by XML configuration files so we needed a lot of data binding. But we’ve not had any performance problems so far and except for a few wrinkles we’ve been able to get it working identically to the desktop version.