Extending Canvas

How to Customize Rendering Extensions?

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

For reference, here is an online example of extending row and column headers: Render Extension