Maintaining grid snapped node positions in a fixed position group

GoJS
1

I’m working with a diagram that utilizes grid snapping. It has square nodes sized according to the cell size, but they can also have extra height/width added to them through ports/headers. These nodes are all contained inside a group that wants to stay anchored to the top left of the viewport. Ideally, I would like all nodes to stay snapped within a grid cell as I move them around in the group. However, it becomes problematic when I move a node (with ports or header) towards the top or left edge, causing the group to resize. The group repositions itself and throws the nodes off the grid, presumably because the extra amount of space the nodes with ports/headers added. I’ve provided a JSFiddle that can replicate this problem. I’m wondering if there might be a way I can mitigate this issue such that all nodes stay snapped to a square at all times?

Edit fiddle - JSFiddle - React, Tailwind, and code Playground

Thanks

2

Thank you for the reproduction, we’re taking a look at this.

3

Is it just the one group? If so, you probably don’t need the layout on the diagram. You’ll just need to ensure every node has a “loc” defined.

I’d recommend setting a height on the Horizontal panel such that text measuring doesn’t impact any positioning.

const titleHeight = cellSize - 5;

...

new go.Panel('Horizontal', {
  defaultAlignment: go.Spot.Top,
  height: titleHeight,
})

Do you always want the group’s border aligned with the grid as well (particularly the top left), or just the nodes themselves?

4

Hi @jhardy, I appreciate you getting back to me!
I should mention that the complete implementation will multiple groups stacked vertically using a GridLayout, and each group would have their own layout as well. The groups don’t need to have their borders aligned with the grid, but I’m open to whatever might lead to a more simple solution.

5

Do you have any screenshots or sketches? You can send them via email if you don’t want to post publicly.

If we get a better idea of the end goal, we might be able to give better feedback on implementation.