Grid.fromJSON with custom hex is not working as expected

[yanislavgalyov]

Describe the bug I am encountering an issue when initializing a grid from JSON using the fromJSON method. The problem arises when I use a hexFactory to map custom properties to the hexes in the grid. This results in the hexes having unusual property values. I am working in JavaScript and have adapted your examples to this language.

To Reproduce

I have omitted honeycomb-grid imports for brevity.

map.json

{
  "hexSettings": {
    "dimensions": {
      "xRadius": 16,
      "yRadius": 18.475208614068027
    },
    "orientation": "FLAT",
    "origin": { "x": -16, "y": -16 },
    "offset": -1
  },
  "coordinates": [
    { "q": 0, "r": 0, "_key": "0_0" },
    { "q": 1, "r": 0, "_key": "0_0" },
    { "q": 2, "r": -1, "_key": "0_0" },
    { "q": 3, "r": -1, "_key": "0_0" },
    { "q": 4, "r": -2, "_key": "0_0" },
    { "q": 0, "r": 1, "_key": "0_0" },
    { "q": 1, "r": 1, "_key": "0_0" },
    { "q": 2, "r": 0, "_key": "0_0" },
    { "q": 3, "r": 0, "_key": "0_0" },
    { "q": 4, "r": -1, "_key": "0_0" },
    { "q": 0, "r": 2, "_key": "0_0" },
    { "q": 1, "r": 2, "_key": "0_0" },
    { "q": 2, "r": 1, "_key": "0_0" },
    { "q": 3, "r": 1, "_key": "0_0" },
    { "q": 4, "r": 0, "_key": "0_0" },
    { "q": 0, "r": 3, "_key": "0_0" },
    { "q": 1, "r": 3, "_key": "0_0" },
    { "q": 2, "r": 2, "_key": "0_0" },
    { "q": 3, "r": 2, "_key": "0_0" },
    { "q": 4, "r": 1, "_key": "0_0" },
    { "q": 0, "r": 4, "_key": "0_0" },
    { "q": 1, "r": 4, "_key": "0_0" },
    { "q": 2, "r": 3, "_key": "0_0" },
    { "q": 3, "r": 3, "_key": "0_0" },
    { "q": 4, "r": 2, "_key": "0_0" }
  ]
}

test.js

import * as map from './map.json';

class CustomHex extends defineHex() {
  static create(coordinates, _key) {
    const hex = new CustomHex(coordinates);
    hex._key = _key;
    return hex;
  }
}

const hexFactory = ({ q, r, _key }) => CustomHex.create([q, r], _key);

const grid = Grid.fromJSON(
  {
    hexSettings: map.hexSettings,
    coordinates: map.coordinates,
  },
  hexFactory
);

// const grid = Grid.fromJSON(map);

Additional context The data in map.json were obtained from the following code, with the _key property added subsequently.

original.js

const hexDefinition = defineHex({
  dimensions: { width: 32, height: 32 },
  orientation: Orientation.FLAT,
  origin: 'topLeft',
  offset: -1,
});

export const grid = new Grid(hexDefinition, rectangle({ width: 5, height: 5 }));

console.log(JSON.stringify(grid.toJSON()));

Environment (please complete the following information):

• Honeycomb@latest version [e.g. 4.1.2]
• vite@latest
• react project

Expected behavior vs Actual result Normally, when I do not attempt to customize the hex, everything functions correctly. However, when I try to customize it, many of the Hex property values become corrupted, leading to the grid not rendering properly.

[yanislavgalyov]

Ok, I fixed it by changing code in test.js from:

class CustomHex extends defineHex() {
  static create(coordinates, _key) {
    const hex = new CustomHex(coordinates);
    hex._key = _key;
    return hex;
  }
}

to

class CustomHex extends defineHex({
  dimensions: { width: 32, height: 32 },
  orientation: Orientation.FLAT,
  origin: 'topLeft',
  offset: -1,
}) {
  static create(coordinates, _key,) {
    const hex = new CustomHex(coordinates);
    hex._key = _key;
    return hex;
  }
}

But this seems counterintuitive for me as those settings must be set from the json.

[flauwekeul]

Thanks for opening an issue. I'll try to get back to you in a week.