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

@blocksuite/affine-gfx-brush

Classes

Extension

BrushTool

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

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

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

Step 2: Create a service identifier

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

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

Step 3: Create implementations

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

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

Step 5: Create concrete extensions

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

Step 6: Use the extensions

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

• BaseTool

Constructors

Properties

_draggingPathPoints

protected _draggingPathPoints: number[][] | null = null

_draggingPathPressures

protected _draggingPathPressures: number[] | null = null

BRUSH_POP_GAP

static BRUSH_POP_GAP: number = 20

toolName

static toolName: string = 'brush'

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

dragEnd()

dragEnd(): void

Returns

void

Overrides

BaseTool.dragEnd

dragMove()

dragMove(e): void

Parameters

e

PointerEventState

Returns

void

Overrides

BaseTool.dragMove

dragStart()

dragStart(e): void

Parameters

e

PointerEventState

Returns

void

Overrides

BaseTool.dragStart

---

EraserTool

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

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

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

Step 2: Create a service identifier

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

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

Step 3: Create implementations

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

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

Step 5: Create concrete extensions

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

Step 6: Use the extensions

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

• BaseTool

Constructors

Properties

toolName

static toolName: string = 'eraser'

Overrides

BaseTool.toolName

Accessors

Methods

activate()

activate(): void

Called when the tool is activated.

Returns

void

Overrides

BaseTool.activate

dragEnd()

dragEnd(_): void

Parameters

_

PointerEventState

Returns

void

Overrides

BaseTool.dragEnd

dragMove()

dragMove(e): void

Parameters

e

PointerEventState

Returns

void

Overrides

BaseTool.dragMove

dragStart()

dragStart(e): void

Parameters

e

PointerEventState

Returns

void

Overrides

BaseTool.dragStart

---

HighlighterTool

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

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

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

Step 2: Create a service identifier

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

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

Step 3: Create implementations

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

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

Step 5: Create concrete extensions

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

Step 6: Use the extensions

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

• BaseTool

Constructors

Properties

_draggingPathPoints

protected _draggingPathPoints: number[][] | null = null

_draggingPathPressures

protected _draggingPathPressures: number[] | null = null

HIGHLIGHTER_POP_GAP

static HIGHLIGHTER_POP_GAP: number = 20

toolName

static toolName: string = 'highlighter'

Overrides

BaseTool.toolName

Accessors

Methods

activate()

activate(): void

Called when the tool is activated.

Returns

void

Overrides

BaseTool.activate

dragEnd()

dragEnd(): void

Returns

void

Overrides

BaseTool.dragEnd

dragMove()

dragMove(e): void

Parameters

e

PointerEventState

Returns

void

Overrides

BaseTool.dragMove

dragStart()

dragStart(e): void

Parameters

e

PointerEventState

Returns

void

Overrides

BaseTool.dragStart

Variables

BrushDomRendererExtension

const BrushDomRendererExtension: ExtensionType

---

BrushElementRendererExtension

const BrushElementRendererExtension: ExtensionType & object

Type Declaration

identifier

identifier: ServiceIdentifier<ElementRenderer<BrushElementModel>>

---

brushToMarkdownAdapterMatcher

const brushToMarkdownAdapterMatcher: ExtensionType & object

Type Declaration

identifier

identifier: ServiceIdentifier<ElementToMarkdownAdapterMatcher>

---

brushToolbarConfig

const brushToolbarConfig: object

Type Declaration

actions

readonly actions: [{ id: "a.line-width"; content: TemplateResult<1> | null; }, { id: "b.color-picker"; content: TemplateResult<1> | null; }]

when()

readonly when: (ctx) => boolean

Parameters

ctx

ToolbarContext

Returns

boolean

---

brushToolbarExtension

const brushToolbarExtension: ExtensionType

---

brushToPlainTextAdapterMatcher

const brushToPlainTextAdapterMatcher: ExtensionType & object

Type Declaration

identifier

identifier: ServiceIdentifier<ElementToPlainTextAdapterMatcher>

---

HighlighterDomRendererExtension

const HighlighterDomRendererExtension: ExtensionType

---

HighlighterElementRendererExtension

const HighlighterElementRendererExtension: ExtensionType & object

Type Declaration

identifier

identifier: ServiceIdentifier<ElementRenderer<HighlighterElementModel>>

---

highlighterToolbarConfig

const highlighterToolbarConfig: object

Type Declaration

actions

readonly actions: [{ id: "a.line-width"; content: TemplateResult<1> | null; }, { id: "b.color-picker"; content: TemplateResult<1> | null; }]

when()

readonly when: (ctx) => boolean

Parameters

ctx

ToolbarContext

Returns

boolean

---

highlighterToolbarExtension

const highlighterToolbarExtension: ExtensionType

---

penSeniorTool

const penSeniorTool: ExtensionType