@lupinum/vue-board/minimap

Minimap composable and component for board navigation.

Install

pnpm add @lupinum/vue-board @lupinum/board-core

useBoardMinimap

A composable that computes minimap projections from the engine state. Returns reactive bounds, viewport rectangle, projected nodes, and a pan function.

function useBoardMinimap(
  engine: BoardEngine,
  options?: MinimapOptions,
): {
  bounds: ComputedRef<Bounds>
  viewportRect: ComputedRef<{
    x: number
    y: number
    width: number
    height: number
  }>
  minimapNodes: ComputedRef<
    Array<{
      node: BoardNode
      x: number
      y: number
      width: number
      height: number
    }>
  >
  panToMinimapPoint: (point: Point) => Promise<void>
}

Options

Name	Type	Default	Description
`width`	`MaybeRefOrGetter<number>`	`200`	Minimap width in pixels.
`height`	`MaybeRefOrGetter<number>`	`140`	Minimap height in pixels.
`padding`	`MaybeRefOrGetter<number>`	`24`	Padding around the world-space content.

Return type

Property	Type	Description
`bounds`	`ComputedRef<Bounds>`	World-space bounds of all nodes (with padding).
`viewportRect`	`ComputedRef<{x, y, width, height}>`	Viewport rectangle projected onto the minimap.
`minimapNodes`	`ComputedRef<Array<...>>`	All nodes projected onto minimap coordinates.
`panToMinimapPoint`	`(point: Point) => Promise<void>`	Pans the main camera so the clicked minimap point is centered.

import { useBoardMinimap } from '@lupinum/vue-board/minimap'

const minimap = useBoardMinimap(engine, { width: 200, height: 120 })

// Access minimap data
const nodes = minimap.minimapNodes.value
const viewport = minimap.viewportRect.value

// Navigate by clicking on the minimap
await minimap.panToMinimapPoint({ x: 100, y: 60 })

Pass refs or getters when dimensions come from reactive state. BoardMinimap does this internally for its width and height props. Keep the engine instance stable for the lifetime of the component or composable.

BoardMinimap

A ready-to-use Vue component that renders a minimap.

The minimap is focusable. Arrow keys pan by 24 screen pixels; hold Shift to pan by 100 pixels.

Props

Name	Type	Default	Description
`engine`	`BoardEngine \| null`	`null`	Engine instance. Falls back to `useBoardEngine()` context if omitted.
`width`	`number`	`200`	Minimap width in pixels.
`height`	`number`	`140`	Minimap height in pixels.

Slots

default

Custom minimap rendering. If not provided, renders rectangles for nodes and a viewport indicator.

Prop	Type	Description
`nodes`	`Array<{ node, x, y, width, height }>`	Projected node positions.
`viewport`	`{ x, y, width, height }`	Viewport rectangle on the minimap.

Usage

Place the minimap component in the default slot of BoardRoot (not inside the viewport, since it should stay in screen-space):

vue

<BoardRoot :engine="engine">
  <template #default>
    <div class="minimap-container">
      <BoardMinimap :width="208" :height="148" />
    </div>
  </template>
</BoardRoot>

css

.minimap-container {
  position: absolute;
  bottom: 16px;
  right: 16px;
}

Types

MinimapOptions

interface MinimapOptions {
  width?: number // default: 200
  height?: number // default: 140
  padding?: number // default: 24
}