Extending Canvas

📊 Univer Sheet

import { LocaleType, Univer, UniverInstanceType } from '@univerjs/core'
import { defaultTheme } from '@univerjs/design'
import { UniverDocsPlugin } from '@univerjs/docs'
import { UniverDocsUIPlugin } from '@univerjs/docs-ui'
import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'
import { UniverRenderEnginePlugin } from '@univerjs/engine-render'
import { FUniver } from '@univerjs/facade'
import { UniverSheetsPlugin } from '@univerjs/sheets'
import { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula'
import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt'
import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui'
import { UniverUIPlugin } from '@univerjs/ui'

import { enUS } from './locales'
import { RowHeaderCustomExtension } from './row-header-extension'
import { ColumnHeaderCustomExtension } from './column-header-extension'
import { MainCustomExtension } from './main-extension'

import './style.css'

const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: enUS,
  },
})

univer.registerPlugin(UniverDocsPlugin, {
  hasScroll: false,
})
univer.registerPlugin(UniverDocsUIPlugin)
univer.registerPlugin(UniverRenderEnginePlugin)
univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
  disableAutoFocus: true,
})
univer.registerPlugin(UniverSheetsPlugin)
univer.registerPlugin(UniverSheetsUIPlugin)

univer.registerPlugin(UniverSheetsNumfmtPlugin)
univer.registerPlugin(UniverFormulaEnginePlugin)
univer.registerPlugin(UniverSheetsFormulaPlugin)

const unitId = 'workbook'
univer.createUnit(UniverInstanceType.UNIVER_SHEET, { id: unitId })

const univerAPI = FUniver.newAPI(univer)

univerAPI.getHooks().onRendered(() => {
  univerAPI.registerSheetRowHeaderExtension(unitId, new RowHeaderCustomExtension())
  univerAPI.registerSheetColumnHeaderExtension(unitId, new ColumnHeaderCustomExtension())
  univerAPI.registerSheetMainExtension(unitId, new MainCustomExtension())
})

The rendering of some Univer elements, such as borders and backgrounds, is accomplished using an extension mechanism. Facade has built-in common extension registration API:

Middle content area: registerSheetMainExtension
Row header: registerSheetRowHeaderExtension
Column header: registerSheetColumnHeaderExtension

By inheriting SheetExtension and providing a unique key, zIndex, and drawing logic, a sheet rendering extension can be implemented as follows:

class RowHeaderCustomExtension extends SheetExtension {
  override uKey = 'RowHeaderCustomExtension'
 
  // Must be greater than 10
  override get zIndex() {
    return 11
  }
 
  override draw(ctx: UniverRenderingContext, parentScale: IScale, spreadsheetSkeleton: SpreadsheetSkeleton) {
    // ... primary rendering logic
  }
}
 
SheetRowHeaderExtensionRegistry.add(new RowHeaderCustomExtension())

ℹ️

The zIndex for row and column header extensions must be greater than 10, and for middle content area extensions, it must be greater than 50, otherwise, they will be overridden.

Then register to the specified unitId:

univerAPI.registerSheetRowHeaderExtension(unitId, new RowHeaderCustomExtension())

Note that UniverRenderingContext is essentially CanvasRenderingContext2D (opens in a new tab), and you can draw according to your needs (e.g., clear the original row and column headers).

Online example reference: Render Extension`;

Using in JavaScript Extending UI