Crosshair Highlighting

Plugins Info

Crosshair highlighting highlights the row and column of the currently selected cell, making it easier for users to identify the active cell.

Playground

Live preview

Preset Mode

The crosshair highlighting feature does not provide a preset mode but supports mixing with its plugin.

npm install @univerjs/sheets-crosshair-highlight

Usage

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

npm install @univerjs/sheets-crosshair-highlight

Usage

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()

Set Crosshair Highlight Color

univerAPI.setCrosshairHighlightColor('red')

Get Crosshair Highlight Color

univerAPI.getCrosshairHighlightColor()

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()`

Table of Contents