Help with rendering guide

[mzagrabe]

Hello,

I'm working through the guides. Thanks for Honeycomb!

I'm getting an error on compiling the rendering guide:

$ npx tsc
index.ts:13:25 - error TS2749: 'Hex' refers to a value, but is being used as a type here. Did you mean 'typeof Hex'?

13 function renderSVG(hex: Hex) {
                           ~~~

index.ts:16:33 - error TS7031: Binding element 'x' implicitly has an 'any' type.

16     .polygon(hex.corners.map(({ x, y }) => `${x},${y}`))
                                   ~

index.ts:16:36 - error TS7031: Binding element 'y' implicitly has an 'any' type.

16     .polygon(hex.corners.map(({ x, y }) => `${x},${y}`))
                                      ~


Found 3 errors in the same file, starting at: index.ts:13

My code looks exactly like the guide:

$ cat index.ts
import { SVG } from '@svgdotjs/svg.js'
import { defineHex, Grid, rectangle } from 'honeycomb-grid'

// you may want the origin to be the top left corner of a hex's bounding box
// instead of its center (which is the default)
const Hex = defineHex({ dimensions: 30, origin: 'topLeft' })
const grid = new Grid(Hex, rectangle({ width: 10, height: 10 }))

const draw = SVG().addTo('body').size('100%', '100%')

grid.forEach(renderSVG)

function renderSVG(hex: Hex) {
  const polygon = draw
    // create a polygon from a hex's corner points
    .polygon(hex.corners.map(({ x, y }) => `${x},${y}`))
    .fill('none')
    .stroke({ width: 1, color: '#999' })

  return draw.group().add(polygon)
}

Here is my npm module list

$ npm ls
bgio-tutorial@1.0.0 /home/z/git/internal/zoo-gnu
├── @svgdotjs/svg.js@3.2.4
├── boardgame.io@0.50.2
├── honeycomb-grid@4.1.5
├── parcel-bundler@1.12.5
└── typescript@5.7.3

Thanks for any pointers on what I'm doing wrong.

Cheers!

-m

[flauwekeul]

Hi. Could you try it with an older TypeScript version? Maybe the version in the package.json of honeycomb itself. I can have a look tomorrow.

[flauwekeul]

5.1.6 is the version that Honeycomb uses. Should work with that version.

[mzagrabe]

Thanks for the reply.

I get the same errors as before:

$ npx tsc
index.ts:13:25 - error TS2749: 'Hex' refers to a value, but is being used as a type here. Did you mean 'typeof Hex'?

13 function renderSVG(hex: Hex) {
                           ~~~

index.ts:16:33 - error TS7031: Binding element 'x' implicitly has an 'any' type.

16     .polygon(hex.corners.map(({ x, y }) => `${x},${y}`))
                                   ~

index.ts:16:36 - error TS7031: Binding element 'y' implicitly has an 'any' type.

16     .polygon(hex.corners.map(({ x, y }) => `${x},${y}`))
                                      ~


Found 3 errors in the same file, starting at: index.ts:13

Here's my npm ls:

$ npm ls
bgio-tutorial@1.0.0 /home/z/git/internal/zoo-gnu
├── @svgdotjs/svg.js@3.2.4
├── boardgame.io@0.50.2
├── honeycomb-grid@4.1.5
├── parcel-bundler@1.12.5
└── typescript@5.1.6

[flauwekeul]

I'm able to reproduce the issue, but can't find a solution. At some time, this error didn't show...

You could try this:

class Hex extends defineHex({ dimensions: 30, origin: 'topLeft' }) {}

As a way to define Hex, for me the error disappears then.

I'm not maintaining this lib anymore. Maybe I release a new version in the future, but for now, my priorities lie elsewhere.

[mzagrabe]

Ah. Thanks for the reply, @flauwekeul .

One (last? more?) question if you have time...

I replaced the Hex line in the guide with your suggestion:

import { SVG } from '@svgdotjs/svg.js'
import { defineHex, Grid, rectangle } from 'honeycomb-grid'

// you may want the origin to be the top left corner of a hex's bounding box
// instead of its center (which is the default)
//const Hex = defineHex({ dimensions: 30, origin: 'topLeft' })
class Hex extends defineHex({ dimensions: 30, origin: 'topLeft' }) {}

const grid = new Grid(Hex, rectangle({ width: 10, height: 10 })) 

const draw = SVG().addTo('body').size('100%', '100%')

grid.forEach(renderSVG)

function renderSVG(hex: Hex) {
  const polygon = draw
    // create a polygon from a hex's corner points
    .polygon(hex.corners.map(({ x, y }) => `${x},${y}`))
    .fill('none')
    .stroke({ width: 1, color: '#999' })

  return draw.group().add(polygon)
}

and I'm getting the following error:

$ npx tsc
index.ts:18:14 - error TS2345: Argument of type 'string[]' is not assignable to parameter of type 'PointArrayAlias | undefined'.
  Type 'string[]' is not assignable to type 'number[]'.
    Type 'string' is not assignable to type 'number'.

18     .polygon(hex.corners.map(({ x, y }) => `${x},${y}`))
                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 1 error in index.ts:18

Any thoughts?

Thanks!

-m

[flauwekeul]

Looks like the polygon method doesn't accept string[] that's returned by hex.corners.map(({ x, y }) => `${x},${y}`). The PointArrayAlias type of SVG.js is a union that includes ArrayXY[] which is an alias for [number, number]. So this should work: .polygon(hex.corners.map(({ x, y }) => [x, y]))