# Refactor Turbo Renderer State Management to Use RxJS
### TL;DR
Refactored the TurboRenderer state management to use RxJS observables instead of direct state mutations, improving state transitions and reactivity.
### What changed?
- Replaced the public `state` property with a private `state$` BehaviorSubject in `ViewportTurboRendererExtension`
- Added proper state transition logging using RxJS operators
- Combined multiple event subscriptions using `merge` operator for better organization
- Improved state transition logic in the `refresh()` method
- Updated the `zooming$` and `panning$` signals in the Viewport
### Why make this change?
This refactoring improves the codebase by:
1. Using a more consistent reactive programming model with RxJS
2. Making state transitions more explicit and traceable
3. Reducing potential bugs from manual state management
4. Improving code organization by combining related event streams
5. Ensuring proper cleanup of resources when components are disposed
The change maintains the same functionality while making the code more maintainable and the state management more robust.
### TL;DR
Created dedicated worker entry points to avoid dynamic imports.
### What changed?
- Painters are provided during worker initialization
- Removed `ParagraphPaintConfigExtension` and the associated configuration system
- Created dedicated worker entry points in both the integration test and frontend packages
- Modified `ViewportLayoutPainter` to accept painters in its constructor
- Updated the `TurboRendererConfig` interface to require a `painterWorkerEntry` function
### Why make this change?
Webpack support. Extension objects in main thread are not available to be passed into workers. Dynamic painter path import is hard to support in webpack environment. With the [webpack-ignore](https://webpack.js.org/api/module-methods/#webpackignore) rule, there are still build errors in webpack.
This PR refactored the turbo renderer architecture to support multiple block layout types.
- New base class `BlockLayoutPainter` and `BlockLayoutProvider` are introduced for writing extendable per-block layout querying and painting logic.
- Paragraph-specific lines are all moved into dedicated classes (`ParagraphLayoutProvider` and `ParagraphLayoutPainter`) under the `/variants/paragraph` dir.
- The `renderer-utils.ts` doesn't contain paragraph-specific logic now.
- The `text-utils.ts` is also now scoped for paragraph only.
- Worker messages are now strongly typed.
Upcoming PR should further implement the block registration system using extension API. The `variants` dir could still exist, since there will be similar rendering logic that can be reused among block types (i.e., between paragraph block and list block).
The `ViewportTurboRendererExtension` is now extracted from `@blocksuite/affine-shared` to `@blocksuite/affine-gfx-turbo-renderer` with minimal dependencies, mirroring the gfx text package in #10378.
Currently, `GfxViewportElement` hides DOM blocks outside the viewport using `display: none` to optimize performance. However, this approach presents two issues:
1. Even when hidden, all top-level blocks still undergo frequent CSS transform updates during viewport panning and zooming.
2. Hidden blocks cannot access DOM layout information, preventing `TurboRenderer` from updating the complete canvas bitmap.
To address this, this PR introduces a refactoring that divides all top-level edgeless blocks into two states: `idle` and `active`. The improvements are as follows:
1. Blocks outside the viewport are set to the `idle` state, meaning they no longer update their DOM during viewport panning or zooming. Only `active` blocks within the viewport are updated frame by frame.
2. For `idle` blocks, the hiding method switches from `display: none` to `visibility: hidden`, ensuring their layout information remains accessible to `TurboRenderer`.
[Screen Recording 2025-03-07 at 3.23.56 PM.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/lEGcysB4lFTEbCwZ8jMv/4bac640b-f5b6-4b0b-904d-5899f96cf375.mov" />](https://app.graphite.dev/media/video/lEGcysB4lFTEbCwZ8jMv/4bac640b-f5b6-4b0b-904d-5899f96cf375.mov)
While this minimizes DOM updates, it introduces a trade-off: `idle` blocks retain an outdated layout state. Since their positions are updated using a lazy update strategy, their layout state remains frozen at the moment they were last moved out of the viewport:
To resolve this, the PR serializes and stores the viewport field of the block at that moment on the `idle` block itself. This allows the correct layout, positioned in the model coordinate system, to be restored from the stored data.
refactor(editor): invalidate support in turbo renderer
- Added `invalidate()` method to clear cache and canvas
- Simplified debug pane controls to single invalidate button
- Replaced layout update with refresh debounce on block updates
- Improved cache handling and bitmap drawing flow
refactor: refresh after invalidate
This would allow for easier integration with current test runner, since the two column layout is removed.
The `ViewportTurboRender` canvas and its debug UI are only enabled if the extension is added, which won't affect the AFFiNE entry.
<img width="945" alt="image" src="https://github.com/user-attachments/assets/dc82daa4-cbed-4eb9-9660-28c3f7d35722" />
Currently, directly running `yarn dev` in `packages/backend/server` (following `developing-server.md`) instead of `yarn affine server dev` would raise following error:
``` sh
server git:(canary) ✗ yarn dev
[nodemon] 3.1.9
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: ts,json
[nodemon] starting `node ./src/index.ts`
node:internal/modules/esm/get_format:160
throw new ERR_UNKNOWN_FILE_EXTENSION(ext, filepath);
^
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /Users/ewind/code/AFFiNE/packages/backend/server/src/index.ts
at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:160:9)
at defaultGetFormat (node:internal/modules/esm/get_format:203:36)
at defaultLoad (node:internal/modules/esm/load:141:22)
at async ModuleLoader.load (node:internal/modules/esm/loader:409:7)
at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:291:45)
at async link (node:internal/modules/esm/module_job:76:21) {
code: 'ERR_UNKNOWN_FILE_EXTENSION'
}
Node.js v20.10.0
[nodemon] app crashed - waiting for file changes before starting...
```
doodlewind
