Extending Canvas

Univer provides an extension mechanism that allows you to customize the rendering of content in a spreadsheet. This mechanism can be used to implement custom row headers, column headers, and middle content area rendering.

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

Then register to the specified unitId:

univerAPI.registerSheetRowHeaderExtension(unitId, new RowHeaderCustomExtension())

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