Univer Sheet
Advanced Usage
Extending Canvas

Extending Canvas

📊 Univer Sheet

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`;

Copyright © 2021-2024 DreamNum Co,Ltd. All Rights Reserved.