Alignment of nodes in Palette

GoJS
#1

palette.jpg171×501 32.8 KB

The image above shows an implementation of GoJS and the various nodes that are available in the palette, As you can see, all of the nodes are center-justified, except for the first node (labeled as “Disease”), which is a node that utilizes the go.Group class. This node seems to be right-justified (or it has something else going on that makes it LOOK that way). Ideally, we’d like all the nodes to be center-justified. By my estimation, the Group node simply behaves differently, and that likely causes it to be misaligned.

I’ve looked at the “myDiagram” and “myPalette” declarations/definitions, but don’t see anything that attributes to this alignment issue. I’m hoping that is such a simple problem, that someone can point out where the alignment issue occurs without seeing the actual code. But if code is need, I can post it at a later time.

Thanks so much!

#2

You’ve probably set Node.locationSpot to go.Spot.Center on your Node template(s). You should do the same in your Group template.

#3

Thanks, I think we’re headed in the right direction. Looking at the templates, the regular node template and the Group template both had “locationSpot: go.Spot.Center”. Playing around with that, I experimented with changing it to “Left” and “Right”.

As you can see in the screenshots below, an interesting thing happens when you set it to “Right”. It further illustrates that there’s something causing things to get misaligned.

palette2.jpg515×501 132 KB

Personally, “Left” looks good enough since they’re at least all aligned the same way. But truthfully, I’d still like to learn how to get them center-justified. Any ideas?

#4

Ah, that’s interesting.

The GridLayout that is the Palette.layout, if GridLayout.alignment is Location (not Position), will line up the points of each part that is at the Part.locationSpot of the Part.locationObject.

The Part.locationObject of a Group is always the Group.placeholder, if there is a Placeholder in the Group.

In the case of your Group, I’m guessing that:

  • it does have a Placeholder,
  • it is at the left side inside the yellow-bordered area, below the header that includes the Button and the TextBlock,
  • and that there are no member nodes within the group.

Because the group has no members, the Placeholder will be tiny – either zero sized or only big enough to hold the Placeholder.padding. That means the locationSpot being at the center of the placeholder locates it very near the left side of the whole group. And that is indeed aligned vertically along with the regular nodes.

So I think you need to align the Placeholder within the Group. If you are using { locationSpot: go.Spot.Center }, you also need to align the Placeholder at the center of the Group. I don’t know your template, but it might be sufficient to do:

    $(go.Placeholder, { alignment: go.Spot.Center })

It really depends on how you use the Placeholder within the Group’s Panels.

#5

You nailed it right on the head! It was the Placeholder. Its alignment was set to go.Spot.TopLeft. I don’t think I would have thought to try that, but your explanation made complete sense. Thank you so much! Excellent work!!