Crosshair Highlighting
Crosshair highlighting highlights the row and column of the currently selected cell, making it easier for users to identify the active cell.
Plugin Mode
Installation
pnpm add @univerjs/sheets-crosshair-highlightnpm install @univerjs/sheets-crosshair-highlightyarn add @univerjs/sheets-crosshair-highlightbun add @univerjs/sheets-crosshair-highlightUsage
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, ), },})univer.registerPlugin(UniverSheetsCrosshairHighlightPlugin)Mobile support
First configure the mobile editor. In this page’s plugin-mode setup, replace the desktop registrations below with their mobile exports from the same packages, before opening a document. Keep the model plugins, styles, locales and Facade imports; do not register both variants.
| Package | Desktop registration | Mobile registration |
|---|---|---|
@univerjs/sheets-crosshair-highlight | UniverSheetsCrosshairHighlightPlugin | UniverSheetsCrosshairHighlightMobileUIPlugin |
Preset Mode
The crosshair highlighting feature does not provide a preset mode but supports mixing with its plugin.
pnpm add @univerjs/sheets-crosshair-highlightnpm install @univerjs/sheets-crosshair-highlightyarn add @univerjs/sheets-crosshair-highlightbun add @univerjs/sheets-crosshair-highlightUsage
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'import { UniverSheetsCrosshairHighlightPlugin } from '@univerjs/sheets-crosshair-highlight'import '@univerjs/sheets-crosshair-highlight/facade'import '@univerjs/sheets-crosshair-highlight/lib/index.css'const { univerAPI } = createUniver({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( UniverPresetSheetsCoreEnUS, SheetsCrosshairHighlightEnUS, ), }, presets: [ UniverSheetsCorePreset(), ], plugins: [ UniverSheetsCrosshairHighlightPlugin, ],})Facade API
Complete Facade API type definitions can be found in the FacadeAPI.
Importing
Plugin mode note
Only plugin mode requires manually importing the Facade package. Preset mode already includes the corresponding Facade package, so no extra import is needed.
import '@univerjs/sheets-crosshair-highlight/facade'Toggle Crosshair Highlight
univerAPI.setCrosshairHighlightEnabled(true)univerAPI.setCrosshairHighlightEnabled(false)Get Crosshair Highlight Enabled Status
univerAPI.getCrosshairHighlightEnabled()Event Listeners
Complete event type definitions can be found in the Events.
CrosshairHighlightEnabledChanged event will be triggered when the crosshair highlight enabled status changes.
const disposable = univerAPI.addEvent(univerAPI.Event.CrosshairHighlightEnabledChanged, (params) => { const { enabled, workbook, worksheet } = params})// Remove the event listener using `disposable.dispose()`CrosshairHighlightColorChanged event will be triggered when the crosshair highlight color changes.
const disposable = univerAPI.addEvent(univerAPI.Event.CrosshairHighlightColorChanged, (params) => { const { color, workbook, worksheet } = params})// Remove the event listener using `disposable.dispose()`How is this guide?