mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-12 20:38:52 +00:00
perf(editor): fallback to placeholder for canvas text (#12033)
### TL;DR For canvas elements, this PR adds placeholders during zooming operations to improve performance.  ### 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.  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. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## 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. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
@@ -26,6 +26,15 @@ 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`
|
||||
|
||||
@@ -45,6 +45,19 @@ 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).
|
||||
|
||||
#### Inherited from
|
||||
|
||||
[`GfxCompatibleInterface`](GfxCompatibleInterface.md).[`forceFullRender`](GfxCompatibleInterface.md#forcefullrender)
|
||||
|
||||
***
|
||||
|
||||
### lockedBySelf?
|
||||
|
||||
> `optional` **lockedBySelf**: `boolean`
|
||||
|
||||
Reference in New Issue
Block a user