Extending Canvas

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

Online example reference: Render Extension`;