search

aaronzshey / react-hexgrid

Build interactive hexagon grids with React
https://main--66a5393443e58f4dc4f0ca6b.chromatic.com/
MIT License
1 stars 0 forks source link

Hexagon requires layout #36

Closed aaronzshey closed 1 month ago

aaronzshey commented 3 months ago

For an unknown reason, the Hexagon component gets its points from a "LayoutContext". Thus, a Hexagon requires a Layout tag to appear. Really strange will resolve asap.

aaronzshey commented 3 months ago

ref: https://github.com/aaronzshey/react-hexgrid/blob/405978ca9848dc99c5445a7e3b83c9bb2dd4d0ea/src/Layout.tsx#L114

calculateCoordinates should be used directly in the Hexagon tag. The Layout tag should only be used for grouping - it should be turned into a simple tag.

aaronzshey commented 2 months ago

Finally figured out why we need Layout for a Hexagon. It looks more and more like the original author just copied code from https://www.redblobgames.com/grids/hexagons/

Layout.tsx creates LAYOUT_FLAT: https://github.com/aaronzshey/react-hexgrid/blob/405978ca9848dc99c5445a7e3b83c9bb2dd4d0ea/src/Layout.tsx#L18

and LAYOUT_POINTY https://github.com/aaronzshey/react-hexgrid/blob/405978ca9848dc99c5445a7e3b83c9bb2dd4d0ea/src/Layout.tsx#L29

However, LAYOUT_FLAT is hardcoded in and is the only layout ever used: https://github.com/aaronzshey/react-hexgrid/blob/405978ca9848dc99c5445a7e3b83c9bb2dd4d0ea/src/Layout.tsx#L47

Adding a flat or pointy option is low priority. For now, I will hardcode all the values and put them straight into the Hexagon component.

aaronzshey commented 2 months ago

see branch no-layout: 73b8798dcfb5c4419c312f6a9ee8f57ac8263f9e

While it works, as it turns out Layout exposes a prop to switch from flat to pointy. I will add this to the Hex tag

aaronzshey commented 1 month ago

41