# クロスヘアハイライト

- Human documentation: [https://docs.univer.ai/ja-JP/guides/sheets/features/crosshair-highlighting](https://docs.univer.ai/ja-JP/guides/sheets/features/crosshair-highlighting)

- Agent Markdown: [https://docs.univer.ai/ja-JP/guides/sheets/features/crosshair-highlighting.md](https://docs.univer.ai/ja-JP/guides/sheets/features/crosshair-highlighting.md)

- Requested language: `ja-JP`

- Content language: `ja-JP`

- Documentation version: `1.1.0`

- Source: [sheets/features/crosshair-highlighting.ja-JP.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/sheets/features/crosshair-highlighting.ja-JP.mdx)

---

#### Package metadata

```json
{
  "mobile": true,
  "plugins": [
    {
      "client": "@univerjs/sheets-crosshair-highlight",
      "facade": "@univerjs/sheets-crosshair-highlight/facade",
      "locale": "@univerjs/sheets-crosshair-highlight/locale/ja-JP",
      "style": "@univerjs/sheets-crosshair-highlight/lib/index.css"
    }
  ],
  "server": false
}
```

クロスヘアハイライトは、現在選択されているセルの行と列を強調表示し、ユーザーがアクティブなセルを判別しやすくします。

> Interactive example: [Open the playground](/playground/sheets/crosshair-highlighting)

## プラグインモード

### インストール

#### npm

```bash
npm install @univerjs/sheets-crosshair-highlight
```

#### pnpm

```bash
pnpm add @univerjs/sheets-crosshair-highlight
```

#### yarn

```bash
yarn add @univerjs/sheets-crosshair-highlight
```

#### bun

```bash
bun add @univerjs/sheets-crosshair-highlight
```

### 使い方

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { UniverSheetsCrosshairHighlightPlugin } from '@univerjs/sheets-crosshair-highlight'
import SheetsCrosshairHighlightJaJP from '@univerjs/sheets-crosshair-highlight/locale/ja-JP'
import '@univerjs/sheets-crosshair-highlight/lib/index.css'
import '@univerjs/sheets-crosshair-highlight/facade'

const univer = new Univer({
  locale: LocaleType.JA_JP,
  locales: {
    [LocaleType.JA_JP]: mergeLocales(
      SheetsCrosshairHighlightJaJP, // [!code ++]
    ),
  },
})

univer.registerPlugin(UniverSheetsCrosshairHighlightPlugin) // [!code ++]
```

## モバイル対応

まず[モバイルエディター](https://docs.univer.ai/ja-JP/guides/sheets/getting-started/installation.md#mobile-support)を設定します。このページのプラグインモードの初期化コードで、以下のデスクトップ登録を同じパッケージのモバイル版に置き換え、**文書を開く前に**完了してください。モデル、スタイル、言語ファイル、Facade は維持し、両方を同時に登録しないでください。

| パッケージ                                  | デスクトップの登録                              | モバイルの登録                                        |
| -------------------------------------- | -------------------------------------- | ---------------------------------------------- |
| `@univerjs/sheets-crosshair-highlight` | `UniverSheetsCrosshairHighlightPlugin` | `UniverSheetsCrosshairHighlightMobileUIPlugin` |

## プリセットモード

クロスヘアハイライト機能はプリセットモードを提供していませんが、プラグインと組み合わせて使用できます。

#### npm

```bash
npm install @univerjs/sheets-crosshair-highlight
```

#### pnpm

```bash
pnpm add @univerjs/sheets-crosshair-highlight
```

#### yarn

```bash
yarn add @univerjs/sheets-crosshair-highlight
```

#### bun

```bash
bun add @univerjs/sheets-crosshair-highlight
```

### 使い方

```typescript
import UniverPresetSheetsCoreJaJP from '@univerjs/preset-sheets-core/locales/ja-JP'
import { UniverSheetsCrosshairHighlightPlugin } from '@univerjs/sheets-crosshair-highlight' // [!code ++]
import '@univerjs/sheets-crosshair-highlight/facade' // [!code ++]
import '@univerjs/sheets-crosshair-highlight/lib/index.css' // [!code ++]

const { univerAPI } = createUniver({
  locale: LocaleType.JA_JP,
  locales: {
    [LocaleType.JA_JP]: mergeLocales(
      UniverPresetSheetsCoreJaJP,
      SheetsCrosshairHighlightJaJP, // [!code ++]
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
  ],
  plugins: [
    UniverSheetsCrosshairHighlightPlugin, // [!code ++]
  ],
})
```

## Facade API

完全な Facade API の型定義は [FacadeAPI](https://docs.univer.ai/ja-JP/reference/facade.md) で確認できます。

### インポート

> [!INFO: プラグインモード注意]
> Facade パッケージの手動 import が必要なのはプラグインモードのみです。プリセットモードには対応する Facade パッケージが内蔵されているため、追加の import は不要です。

```typescript
import '@univerjs/sheets-crosshair-highlight/facade'
```

### クロスヘアハイライトの切り替え

```typescript
univerAPI.setCrosshairHighlightEnabled(true)

univerAPI.setCrosshairHighlightEnabled(false)
```

### クロスヘアハイライトの有効状態の取得

```typescript
univerAPI.getCrosshairHighlightEnabled()
```

### イベントリスナー

イベントの型定義は [Events](https://docs.univer.ai/ja-JP/reference/facade/events.md) を参照してください。

`CrosshairHighlightEnabledChanged` イベントは、クロスヘアハイライトの有効状態が変更されたときにトリガーします。

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.CrosshairHighlightEnabledChanged, (params) => {
  const { enabled, workbook, worksheet } = params
})

// イベントリスナーを削除するには `disposable.dispose()` を使用します
```

`CrosshairHighlightColorChanged` イベントは、クロスヘアハイライトの色が変更されたときにトリガーします。

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.CrosshairHighlightColorChanged, (params) => {
  const { color, workbook, worksheet } = params
})

// イベントリスナーを削除するには `disposable.dispose()` を使用します
```