# Перекрёстная подсветка

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

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

- Requested language: `ru-RU`

- Content language: `ru-RU`

- Documentation version: `1.2.0`

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

---

#### Package metadata

```json
{
  "mobile": true,
  "plugins": [
    {
      "client": "@univerjs/sheets-crosshair-highlight",
      "facade": "@univerjs/sheets-crosshair-highlight/facade",
      "locale": "@univerjs/sheets-crosshair-highlight/locale/en-US",
      "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 UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'
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.EN_US,
  locales: {
    [LocaleType.EN_US]: mergeLocales(
      UniverPresetSheetsCoreEnUS,
      SheetsCrosshairHighlightEnUS, // [!code ++]
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
  ],
  plugins: [
    UniverSheetsCrosshairHighlightPlugin, // [!code ++]
  ],
})
```

## Режим плагинов

### Установка

#### 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 SheetsCrosshairHighlightEnUS from '@univerjs/sheets-crosshair-highlight/locale/en-US'
import '@univerjs/sheets-crosshair-highlight/lib/index.css'
import '@univerjs/sheets-crosshair-highlight/facade'

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

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

## Поддержка мобильных устройств

Сначала настройте [мобильный редактор](https://docs.univer.ai/ru-RU/guides/sheets/getting-started/installation.md#mobile-support). В коде инициализации режима плагинов на этой странице замените указанные настольные регистрации мобильными экспортами тех же пакетов **до открытия документа**. Сохраните модели, стили, локализации и импорты Facade; не регистрируйте оба варианта.

| Пакет                                  | Настольная регистрация                 | Мобильная регистрация                          |
| -------------------------------------- | -------------------------------------- | ---------------------------------------------- |
| `@univerjs/sheets-crosshair-highlight` | `UniverSheetsCrosshairHighlightPlugin` | `UniverSheetsCrosshairHighlightMobileUIPlugin` |

## Facade API

Полные определения типов Facade API доступны в [справочнике FacadeAPI](https://docs.univer.ai/ru-RU/reference/facade.md).

### Импорт

> [!INFO: Примечание о режиме плагинов]
> Импортировать пакет Facade вручную требуется только в режиме плагинов. В режиме пресетов соответствующий пакет Facade уже подключён, поэтому дополнительный импорт не нужен.

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

### Включение и отключение перекрёстной подсветки

```typescript
univerAPI.setCrosshairHighlightEnabled(true)

univerAPI.setCrosshairHighlightEnabled(false)
```

### Проверка состояния перекрёстной подсветки

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

### Обработчики событий

Полные определения типов событий доступны в разделе [Events](https://docs.univer.ai/ru-RU/reference/facade/events.md).

Событие `CrosshairHighlightEnabledChanged` срабатывает при изменении состояния перекрёстной подсветки.

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

// Remove the event listener using `disposable.dispose()`
```

Событие `CrosshairHighlightColorChanged` срабатывает при изменении цвета перекрёстной подсветки.

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

// Remove the event listener using `disposable.dispose()`
```