get grid overall size

[alexus85]

Is there any easy way to get the overall size of a grid? Or do I have to calculate it my self?

I'm drawing a (rectangular) grid (using SVG.js) inside absolute positioned container which has a relative positioned parent. So in order to get the scrolls working properly, I need to define the width and height sizes of the absolute positioned container.

So far I couldn't find anything in the docs. Or have I missed anything?

[flauwekeul]

EDIT : what I suggest below doesn't work of course :unamused: I'll try to come with a solution today.

Hex has a width() and height() method that you can use. Like so:

Grid.rectangle({
  width: 3,
  height: 4,
})
const hex = Grid.Hex()
const gridWidth = 3 * hex.width()
const gridHeight = 4 * hex.height()

I understand it's not very intuitive to have to make an instance of a hex to get its width and height.

[flauwekeul]

Actually, my previous answer isn't far off I think. If I look at redblobgames.com, this should do the trick:

Grid.rectangle({
  width: 3,
  height: 4,
})
const hex = Grid.Hex()
const hexWidth = hex.width()
const hexHeight = hex.height()

// for pointy hexes:
const gridWidth = 3 * hexWidth + (0.5 * hexWidth)
const gridHeight = 4 * hexHeight - (0.25 * hexHeight)

// for flat hexes:
const gridWidth = 3 * hexWidth + (0.5 * hexWidth)
const gridHeight = 4 * hexHeight

Just to be sure: in the above example 3 is the width (in hexes) of the grid and 4 is the height (in hexes) of the grid.

I should add width() and height() methods to Grid...

[alexus85]

Yeah that would be really helpful. Thanks Abbe!

On Tue, 23 Apr 2019 at 22:14, Abbe Keultjes notifications@github.com wrote:

Actually, my previous answer isn't far off I think. If I look at redblobgames.com https://www.redblobgames.com/grids/hexagons/#size-and-spacing, this should do the trick:

Grid.rectangle({ width: 3, height: 4, })const hex = Grid.Hex()const hexWidth = hex.width()const hexHeight = hex.height() // for pointy hexes:const gridWidth = 3 hexWidth + (0.5 hexWidth)const gridHeight = 4 hexHeight - (0.25 hexHeight) // for flat hexes:const gridWidth = 3 hexWidth + (0.5 hexWidth)const gridHeight = 4 * hexHeight

Just to be sure: in the above example 3 is the width (in hexes) of the grid and 4 is the height (in hexes) of the grid.

I should add width() and height() methods to Grid...

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/flauwekeul/honeycomb/issues/32#issuecomment-485957170, or mute the thread https://github.com/notifications/unsubscribe-auth/ACPTWV2EASA6GMQ22EBJHXLPR5U3VANCNFSM4HHSCG7A .

[flauwekeul]

I've looked into adding something to grid instances that return the width and height (in hexes or in "pixels"). But for now I'm not going to add it, because I doubt it has enough value. If more people want this feature, I'll definitively re-evaluate my decision.

[flauwekeul]

I need this feature myself 😅, so I'm reopening this. Also, my calculation above is incorrect 😒