選択とイベント

セル選択の操作とイベント購読の方法を説明します。

選択範囲の操作

const ws = grid.worksheet

// 選択範囲を設定
ws.setSelectionRange(0, 0, 4, 3) // topRow, leftColumn, bottomRow, rightColumn

// 現在の選択範囲を取得
const sel = ws.selection
console.log(sel.topRow, sel.leftColumn, sel.bottomRow, sel.rightColumn)

// アクティブセルの確認
const isActive = ws.isActiveCell(0, 0)

イベント購読

すべてのイベントメソッドは、購読解除関数を返します。

選択変更

const unsub = ws.onSelectionChange((cell) => {
  if (cell) {
    const col = String.fromCharCode(65 + cell.column)
    console.log(`Selected: ${col}${cell.row + 1}`)
  }
})

// 購読解除
unsub()

セル値変更

ws.onCellValueChange(({ row, column }) => {
  console.log(`Cell changed: row=${row}, col=${column}`)
  const value = ws.getCellInput(row, column)
  console.log('New value:', value)
})

コンテキストメニュー

ws.onContextMenu((event) => {
  // event.area: 'cells' | 'row-header' | 'column-header'
  // event.row, event.column: クリック位置
  // event.originalEvent: ブラウザの MouseEvent
  console.log('Context menu:', event.area, event.row, event.column)
})

ビューポートサイズ変更

ws.onViewportSizeChange(({ width, height }) => {
  console.log(`Viewport resized: ${width} x ${height}`)
})

スクロール変更

ws.onScrollChange(({ x, y }) => {
  console.log(`Scroll position: x=${x}, y=${y}`)
})

構造変更（行・列の挿入/削除）

ws.onStructureChange(() => {
  console.log('Grid structure changed')
})

画像変更

ws.onImagesChange((images) => {
  console.log('Images updated:', images.length)
})

保護セルの編集試行

ws.onProtectedCellEdit(({ row, column }) => {
  alert(`セル (${row}, ${column}) は保護されています`)
})

スクロール操作

// スクロール位置の取得
const offset = ws.getScrollOffset()
console.log(offset.x, offset.y)

// スクロール位置の設定
ws.setScrollOffset(100, 200)

// スクロールコンテンツのサイズ
const size = ws.getScrollContentSize()
console.log(size.width, size.height)

// ビューポートサイズ
const bodyWidth = ws.getBodyViewportWidth()
const bodyHeight = ws.getBodyViewportHeight()

ヒットテスト

画面座標からセル位置を特定できます。

// 簡易ヒットテスト
const cell = ws.getCellFromPoint(x, y)
if (cell) {
  console.log(`Row: ${cell.row}, Column: ${cell.column}`)
}

// 詳細ヒットテスト
const result = ws.hitTest(x, y)

セル矩形の取得

// セルの画面上の矩形
const rect = ws.getCellRect(0, 0)
// { x, y, width, height }

// 範囲の画面上の矩形
const rangeRect = ws.getRangeRect(0, 0, 4, 3)

使用例：ツールバー連携

import { useState, useEffect } from 'react'

function Toolbar({ worksheet }) {
  const [cellRef, setCellRef] = useState('A1')
  const [cellValue, setCellValue] = useState('')

  useEffect(() => {
    if (!worksheet) return

    return worksheet.onSelectionChange((cell) => {
      if (cell) {
        const col = String.fromCharCode(65 + cell.column)
        setCellRef(`${col}${cell.row + 1}`)
        setCellValue(worksheet.getCellInput(cell.row, cell.column) || '')
      }
    })
  }, [worksheet])

  return (
    <div>
      <span>{cellRef}</span>
      <input
        value={cellValue}
        onChange={(e) => {
          setCellValue(e.target.value)
        }}
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            const sel = worksheet.selection
            worksheet.setCellInput(sel.topRow, sel.leftColumn, cellValue)
          }
        }}
      />
    </div>
  )
}