useView

Controls grid visibility and snap-to-grid behavior in the editor.

Import

import { useView } from '@asset-studio/core'

Usage

function ViewControls() {
  const { showCells, setShowCells, snapToGrid, setSnapToGrid, gridSize, setGridSize } = useView()

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={showCells}
          onChange={e => setShowCells(e.target.checked)}
        />
        Show Grid
      </label>
      <label>
        <input
          type="checkbox"
          checked={snapToGrid}
          onChange={e => setSnapToGrid(e.target.checked)}
        />
        Snap to Grid
      </label>
      <input
        type="number"
        value={gridSize}
        onChange={e => setGridSize(Number(e.target.value))}
      />
    </div>
  )
}

Return Value

Property / Function	Type	Description
showCells	boolean	Whether the grid overlay is visible.
setShowCells	(value: boolean) => void	Toggle grid visibility.
snapToGrid	boolean	Whether snap-to-grid is active.
setSnapToGrid	(value: boolean) => void	Toggle snap-to-grid.
gridSize	number	Current grid cell size in pixels.
setGridSize	(value: number) => void	Set the grid cell size.