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.
This PR implements a significant refactoring of the embed block services across multiple components (Figma, GitHub, Loom, and YouTube) in the BlockSuite codebase. Here are the key changes:
1. **Architecture Change**:
- Moves from a dynamic registration pattern to a more declarative configuration approach
- Replaces `EmbedOptionProvider.registerEmbedBlockOptions()` calls with a new `EmbedOptionConfig` factory function
2. **Service Refactoring**:
- For each embed block type (Figma, GitHub, Loom, YouTube):
- Separates configuration from service logic
- Creates new `EmbedBlockOptionConfig` constants using the new `EmbedOptionConfig` factory
- Removes the `mounted()` lifecycle hook from services where it was only used for registration
3. **Core Changes**:
- In `embed-option-service.ts`:
- Introduces new `EmbedOptionConfigIdentifier` for dependency injection
- Adds `EmbedOptionConfig` factory function for creating embed configurations
- Updates `EmbedOptionService` constructor to automatically register configurations
- Modifies DI setup to include `StdIdentifier` dependency
4. **Spec Updates**:
- Updates all block specs to include the new configuration objects
- Maintains existing functionality while using the new pattern
The main benefit of this refactoring is:
- More declarative configuration approach
- Better separation of concerns
- Reduced runtime registration code
- More predictable initialization of embed options
Let me analyze this diff and provide a clear description of the changes.
This PR introduces several significant changes focused on AI integration and code organization in the AFFiNE codebase:
1. **Enhanced SpecBuilder Functionality** (`blocksuite/affine/shared/src/utils/spec/spec-builder.ts`):
- Added method chaining by returning `this` from `extend`, `omit`, and `replace` methods
- Added new utility methods:
- `hasAll(target: ExtensionType[])`: Checks if all specified extensions exist
- `hasOneOf(target: ExtensionType[])`: Checks if at least one specified extension exists
2. **AI Extensions Modularization**:
- Split the large AI-related code into separate modular files under `packages/frontend/core/src/blocksuite/ai/extensions/`:
- `ai-code.ts`: Code block AI integration
- `ai-edgeless-root.ts`: Edgeless mode AI features
- `ai-image.ts`: Image block AI capabilities
- `ai-page-root.ts`: Page root AI integration
- `ai-paragraph.ts`: Paragraph block AI features
- `enable-ai.ts`: Central AI extension enablement logic
3. **Widget Improvements**:
- Enhanced `AffineAIPanelWidget` and `EdgelessCopilotWidget` with proper widget extensions
- Moved widget-specific extensions into their respective files
- Added proper type definitions and component registrations
4. **Code Organization**:
- Simplified exports in `index.ts`
- Better separation of concerns between different AI-related components
- More modular approach to AI feature integration
5. **AI Integration Architecture**:
- Introduced a new `enableAIExtension` function that handles:
- Replacing standard blocks with AI-enhanced versions
- Conditional enabling of AI features based on the current spec configuration
- Extension of AI chat capabilities
The changes primarily focus on improving code organization, maintainability, and the architecture of AI feature integration in the AFFiNE editor. The modularization will make it easier to maintain and extend AI capabilities across different block types and editor modes.
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
