Crosshair Highlighting
Crosshair highlighting highlights the row and column of the currently selected cell, making it easier for users to identify the active cell.
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, ],})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)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?