understanding the run and hexes methods

Hello @flauwekeul,

First, thank you for working on a new version of your library, it actually gave me the motivation to retake an old project. I know the v4 is still in early stage but you provided some examples and the traversers are very promising.

So, I have a grid manager where I instanciate a grid using this.grid = new Grid(...).each(hex => render(hex)).run(), no big deal it works perfectly. Then, I want to access some of the hexes to change some custom properties defined during render, so I use a traverser (I’ve made a circular traverser where you define a range from a center hex), then I do const hexes = this.grid.traverser(...).hexes(), the hexes are here but the first each method is called again, rendering my hexes a second time. const hexes = []; this.grid.traverser(...).each(hex => hexes.push(hex)).run() produces the same result.

I understand the idea of stateful grid and I feel like I should use a stateless grid for some operations, but then this.grid.getHex(coordinates) wont be available so I still need a stateful one, right?

Anyway, I have a lot of fun experimenting with it. Here are some fix/features that could really help me out:

• hexagon grid shape (using a circular traverser by default?)
• traversing out of store hexes should not mess with the path
• A* algorithm with the ability to filter out the non traversable hexes

I know some of them are already in the backlog but you also asked for priorities so these are mine. I know you’re taking a new job so if I can contribute in a way, let me know!

[flauwekeul]

I just released alpha.4. It contains a ring() and spiral() traverser and I’ve tried to fix the duplicate hexes that chaining traversers caused. I’m looking forward to your opinion.

[mattsrinc]

A* algorithm can be perfectly used from here:

https://github.com/bgrins/javascript-astar

with slight modification e.g.

Graph.prototype.neighbors = function(node) {
  var ret = [];
  var x = node.x;
  var y = node.y;
  var grid = this.grid;

  // West
  if (grid[x - 1] && grid[x - 1][y]) {
    ret.push(grid[x - 1][y]);
  }

  // East
  if (grid[x + 1] && grid[x + 1][y]) {
    ret.push(grid[x + 1][y]);
  }

  // South
  if (grid[x] && grid[x][y - 1]) {
    ret.push(grid[x][y - 1]);
  }

  // North
  if (grid[x] && grid[x][y + 1]) {
    ret.push(grid[x][y + 1]);
  }

// two cases added below
  // SouthEast
  if (grid[x+1] && grid[x+1][y - 1]) {
    ret.push(grid[x+1][y - 1]);
  }

  // NorthWest
  if (grid[x-1] && grid[x-1][y + 1]) {
    ret.push(grid[x-1][y + 1]);
  }

  if (this.diagonal) {

that you can manage quickly to use (diagonal movement checks below those displayed in the code above are non-relevant for a hex grid). And with the help of svg.js you can create pages like this (cannot share code, it was paid for):

We really should be grateful for the great library that cannot have all what we need - but it’s getting close!