BlockSuite

Appearance

BlockSuite API Documentation / @blocksuite/affine-gfx-note

@blocksuite/affine-gfx-note ​

Classes ​

Extension ​

NoteTool ​

Understanding Extensions ​

Extensions provide a way to extend the functionality of a system using dependency injection. They allow you to register services, implementations, and factories in the DI container, which can then be retrieved and used by different parts of the application.

Extensions are particularly useful for:

  • Registering different implementations for different types
  • Creating pluggable architecture where components can be added or removed
  • Managing dependencies between different parts of the application

Usage Example: Fruit Processing System ​

Let's consider a fruit processing system where different types of fruits need different processing methods. We'll show how to implement this using extensions.

Step 1: Define the interfaces ​

ts
interface FruitProcessor {
  process(fruit: Fruit): void;
}

interface Fruit {
  type: string;
  // other properties
}

Step 2: Create a service identifier ​

ts
import { createIdentifier } from '@blocksuite/global/di';

const FruitProcessorProvider = createIdentifier<FruitProcessor>('fruit-processor-provider');

Step 3: Create implementations ​

ts
class AppleProcessor implements FruitProcessor {
  process(fruit: Fruit): void {
    console.log('Slicing apple');
    // Apple-specific processing
  }
}

class BananaProcessor implements FruitProcessor {
  process(fruit: Fruit): void {
    console.log('Peeling banana');
    // Banana-specific processing
  }
}

Step 4: Create an extension factory ​

ts
const FruitProcessorExtension = (
  fruitType: string,
  implementation: new () => FruitProcessor
): ExtensionType => {
  return {
    setup: di => {
      di.addImpl(FruitProcessorProvider(fruitType), implementation);
    }
  };
};

Step 5: Create concrete extensions ​

ts
export const AppleProcessorExtension = FruitProcessorExtension('apple', AppleProcessor);
export const BananaProcessorExtension = FruitProcessorExtension('banana', BananaProcessor);

Step 6: Use the extensions ​

ts
import { Container } from '@blocksuite/global/di';

class FruitProcessingSystem {
  provider: ServiceProvider;

  constructor(extensions: ExtensionType[]) {
    const container = new Container();

    // Set up all extensions
    extensions.forEach(ext => ext.setup(container));

    // Create a provider from the container
    this.provider = container.provider();
  }

  processFruit(fruit: Fruit) {
    // Get the appropriate processor based on fruit type
    const processor = this.provider.get(FruitProcessorProvider(fruit.type));

    // Process the fruit
    processor.process(fruit);
  }
}

// Initialize the system with extensions
const system = new FruitProcessingSystem([
  AppleProcessorExtension,
  BananaProcessorExtension
]);

// Use the system
system.processFruit({ type: 'apple' });  // Output: Slicing apple
system.processFruit({ type: 'banana' }); // Output: Peeling banana

Note: We deliberately used a non-block specific example here. In BlockSuite, the extension pattern can be applied to any entity that can be configured by third parties, not just blocks. This includes different tools in the whiteboard, different column types in database blocks, and many other extensible components. The pattern remains the same regardless of what you're extending.

Extends ​
Constructors ​
Properties ​
toolName ​

static toolName: string = 'affine:note'

Overrides ​

BaseTool.toolName

Accessors ​
Methods ​
activate() ​

activate(): void

Called when the tool is activated.

Returns ​

void

Overrides ​

BaseTool.activate

click() ​

click(e): void

Parameters ​
e ​

PointerEventState

Returns ​

void

Overrides ​

BaseTool.click

deactivate() ​

deactivate(): void

Called when the tool is deactivated.

Returns ​

void

Overrides ​

BaseTool.deactivate

dragEnd() ​

dragEnd(): void

Returns ​

void

Overrides ​

BaseTool.dragEnd

dragMove() ​

dragMove(e): void

Parameters ​
e ​

PointerEventState

Returns ​

void

Overrides ​

BaseTool.dragMove

dragStart() ​

dragStart(): void

Returns ​

void

Overrides ​

BaseTool.dragStart

mounted() ​

mounted(): void

Called when the tool is registered.

Returns ​

void

Overrides ​

BaseTool.mounted

pointerMove() ​

pointerMove(e): void

Parameters ​
e ​

PointerEventState

Returns ​

void

Overrides ​

BaseTool.pointerMove

pointerOut() ​

pointerOut(e): void

Parameters ​
e ​

PointerEventState

Returns ​

void

Overrides ​

BaseTool.pointerOut

Other ​

DraggingNoteOverlay ​

An overlay is a layer covered on top of elements, can be used for rendering non-CRDT state indicators.

Extends ​
Constructors ​
Constructor ​

new DraggingNoteOverlay(gfx, background): DraggingNoteOverlay

Parameters ​
gfx ​

GfxController

background ​

string | { normal: string; } | { dark: string; light: string; }

Returns ​

DraggingNoteOverlay

Overrides ​

NoteOverlay.constructor

Properties ​
height ​

height: number

slots ​

slots: object

draggingNoteUpdated ​

draggingNoteUpdated: Subject<{ xywh: XYWH; }>

width ​

width: number

Methods ​
render() ​

render(ctx): void

Parameters ​
ctx ​

CanvasRenderingContext2D

Returns ​

void

Overrides ​

NoteOverlay.render

NoteOverlay ​

An overlay is a layer covered on top of elements, can be used for rendering non-CRDT state indicators.

Extends ​
Extended by ​
Constructors ​
Constructor ​

new NoteOverlay(gfx, background): NoteOverlay

Parameters ​
gfx ​

GfxController

background ​

string | { normal: string; } | { dark: string; light: string; }

Returns ​

NoteOverlay

Overrides ​

ToolOverlay.constructor

Properties ​
backgroundColor ​

backgroundColor: string = 'transparent'

text ​

text: string = ''

Methods ​
render() ​

render(ctx): void

Parameters ​
ctx ​

CanvasRenderingContext2D

Returns ​

void

Overrides ​

ToolOverlay.render

Type Aliases ​

NoteToolOption ​

NoteToolOption = object

Properties ​

childFlavour ​

childFlavour: NoteChildrenFlavour

childType ​

childType: string | null

tip ​

tip: string

Variables ​

NOTE_OVERLAY_CORNER_RADIUS ​

const NOTE_OVERLAY_CORNER_RADIUS: 6 = 6

NOTE_OVERLAY_DARK_BACKGROUND_COLOR ​

const NOTE_OVERLAY_DARK_BACKGROUND_COLOR: "rgb(32, 32, 32)" = 'rgb(32, 32, 32)'

NOTE_OVERLAY_HEIGHT ​

const NOTE_OVERLAY_HEIGHT: 50 = 50

NOTE_OVERLAY_LIGHT_BACKGROUND_COLOR ​

const NOTE_OVERLAY_LIGHT_BACKGROUND_COLOR: "rgba(252, 252, 253, 1)" = 'rgba(252, 252, 253, 1)'

NOTE_OVERLAY_OFFSET_X ​

const NOTE_OVERLAY_OFFSET_X: 6 = 6

NOTE_OVERLAY_OFFSET_Y ​

const NOTE_OVERLAY_OFFSET_Y: 6 = 6

NOTE_OVERLAY_STOKE_COLOR ​

const NOTE_OVERLAY_STOKE_COLOR: "--affine-border-color" = '--affine-border-color'

NOTE_OVERLAY_TEXT_COLOR ​

const NOTE_OVERLAY_TEXT_COLOR: "--affine-icon-color" = '--affine-icon-color'

NOTE_OVERLAY_WIDTH ​

const NOTE_OVERLAY_WIDTH: 100 = 100

noteSeniorTool ​

const noteSeniorTool: ExtensionType

Copyright © 2022-present Toeverything