mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-04 00:28:33 +00:00

Files

doodlewind be28038e94 perf(editor): fallback to placeholder for canvas text (#12033 )

### TL;DR

For canvas elements, this PR adds placeholders during zooming operations to improve performance.

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/lEGcysB4lFTEbCwZ8jMv/8c8daea8-1eb4-419b-a4f4-2a8847f40b7b.png)

### What changed?

- Implemented placeholder rendering during zooming operations in the canvas renderer, but not only DOM.
- Added a `forceFullRender` property to the `GfxCompatibleInterface` to allow elements to opt out of placeholder rendering
- Set `forceFullRender = true` for connectors to ensure they always render properly, even during zooming
- Connected the turbo renderer to the viewport's zooming state to automatically switch between full and placeholder rendering

### Why make this change?

Rendering complex elements during zooming operations can cause performance issues and make the UI feel sluggish. Rendering connector label also leads to high cost DOM `set font` delays.

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/lEGcysB4lFTEbCwZ8jMv/961fb847-24b4-4a7f-b9dc-21b0a5edaaa1.png)

The turbo renderer improves performance by displaying simple placeholders for elements during zooming, while still rendering critical elements like connectors fully. This creates a smoother user experience while maintaining essential visual information.

## Summary by CodeRabbit

- **New Features**
- Introduced a feature-flag-controlled "turbo" rendering mode that displays placeholder graphics during zooming for improved performance.
- Added the ability to override placeholder rendering for specific elements, ensuring full rendering when required.

- **Bug Fixes**
- Enhanced rendering logic to ensure connectors always render fully, even during zoom operations.

- **Documentation**
- Updated API documentation to reflect new properties related to rendering behavior.

- **Tests**
- Improved tests to verify correct rendering behavior for connectors.

2025-04-29 03:05:17 +00:00

2.1 KiB

Raw Blame History

BlockSuite API Documentation

BlockSuite API Documentation / @blocksuite/std / gfx / GfxCompatibleInterface

Interface: GfxCompatibleInterface

All the model that can be rendered in graphics mode should implement this interface.

Extends

IBound.GfxElementGeometry

Extended by

GfxGroupCompatibleInterface

Properties

elementBound

readonly elementBound: Bound

The bound of the element without considering the response extension.

forceFullRender?

optional forceFullRender: boolean

Whether to disable fallback rendering for this element, e.g., during zooming. Defaults to false (fallback to placeholder rendering is enabled).

lockedBySelf?

optional lockedBySelf: boolean

Indicates whether the current block is explicitly locked by self. For checking the lock status of the element, use isLocked instead. For (un)locking the element, use (un)lock instead.

responseBound

readonly responseBound: Bound

The bound of the element considering the response extension.

responseExtension

responseExtension: [number, number]

Defines the extension of the response area beyond the element's bounding box. This tuple specifies the horizontal and vertical margins to be added to the element's bound.

The first value represents the horizontal extension (added to both left and right sides), and the second value represents the vertical extension (added to both top and bottom sides).

The response area is computed as: [x - horizontal, y - vertical, w + 2 * horizontal, h + 2 * vertical].

Example:

xywh: [0, 0, 100, 100], responseExtension: [10, 20] Resulting response area: [-10, -20, 120, 140].
responseExtension: [0, 0] keeps the response area equal to the bounding box.

Methods

isLocked()

isLocked(): boolean

Check if the element is locked. It will check the lock status of the element and its ancestors.

Returns

boolean

2.1 KiB Raw Blame History