Hex Grid

Vanduo Hex Grid is a standalone, canvas-rendered axial hex grid, installed separately from the framework. Pan, zoom, select hexes, and attach terrain or custom data. It reads Vanduo theme tokens, ships a pure @vanduo-oss/vd3-cbun/hex-grid/hex-math subexport, and an optional Vue 3 binding (@vanduo-oss/vd3-cbun/hex-grid) used here.

100%

Grid Controls

30px
15
10
0°
Terrain & pathfinding
API Reference

Install

pnpm add @vanduo-oss/vd3-cbun

Usage

<script setup lang="ts">
import { ref } from 'vue';
import { VdHexGrid } from '@vanduo-oss/vd3-cbun/hex-grid';
import { TerrainType } from '@vanduo-oss/vd3-cbun/hex-grid/hex-math';

const size = ref(30);
const width = ref(15);
const height = ref(10);
const rotationDeg = ref(0);
let grid = null;

const onReady = (instance) => { grid = instance; };
const onSelect = (hex) => console.log('Selected', hex.q, hex.r);
</script>

<template>
  <div style="height: 420px;">
    <VdHexGrid
      :size="size"
      :width="width"
      :height="height"
      :rotation="rotationDeg * Math.PI / 180"
      @ready="onReady"
      @select="onSelect"
      @zoom="({ scale }) => console.log('Zoom', scale)"
    />
  </div>
</template>

Component API

Prop / eventDescription
:sizeHexagon size in px (default 30).
:width / :heightGrid columns / rows in hexes (default 10).
:rotationGrid rotation in radians (default 0).
@select / @zoom / @panForwarded interaction events.
@readyEmitted once with the underlying VdHexGrid instance.
getInstance()Template ref expose — call imperative API methods.

Events

EventDescription
selectA hex was clicked; payload is the hex (with q, r).
zoomZoom changed; payload { scale }.
panPan reset; payload { x, y } (emitted on resetView).

Pure math (/hex-math)

Axial coordinate math and terrain tables, importable without a canvas or the DOM — handy for game logic, tests, or Node. 

// Pure axial math — no canvas, no DOM, no Vue.
import { hexDistance, getAdjacentHexes, TerrainType } from '@vanduo-oss/vd3-cbun/hex-grid/hex-math';

hexDistance(0, 0, 2, -1); // → 2
getAdjacentHexes(0, 0);   // → 6 neighbors