Crosshair Highlighting

Preset ModePlugin Mode

Plugins Info

@univerjs/sheets-crosshair-highlight

Server Required

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.

npm install @univerjs/watermark

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]: merge(
      {},
      UniverPresetSheetsCoreEnUS,
      SheetsCrosshairHighlightEnUS, 
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
  ],
  plugins: [
    UniverSheetsCrosshairHighlightPlugin, 
  ],
})

Plugin Mode

Installation

npm install @univerjs/sheets-crosshair-highlight

Usage

import { LocaleType, merge, 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]: merge(
      {},
      SheetsCrosshairHighlightEnUS, 
    ),
  },
})

univer.registerPlugin(UniverSheetsCrosshairHighlightPlugin)

Facade API

Complete Facade API type definitions can be found in the FacadeAPI.

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

On this page