Commit Graph

78 Commits

Author SHA1 Message Date
Saul-Mirone
30a2e5b4fb refactor(editor): remove gfx tool global type (#12116)
Closes: BS-2650
2025-05-04 13:53:26 +00:00
L-Sun
315ea00390 feat(editor): header of edgeless embed doc (#12029)
Close [BS-3268](https://linear.app/affine-design/issue/BS-3268/edgeless-下,-dark-mode-embed的配色应该更加清晰)
Close [BS-3067](https://linear.app/affine-design/issue/BS-3067/在embed上,添加split-view等相关的操作入口,基本接近page-block(见设计稿))

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced an interactive header for embedded synced documents with fold/unfold toggle, document opening, and multiple view options.
  - Added info and copy link buttons for embedded synced documents and notes to improve document management and sharing.
- **Enhancements**
  - Updated styles for embedded synced document blocks and headers for better visual consistency.
  - Added new localization entries for header actions: "Fold", "Unfold", and "Open".
  - Disabled redundant open document actions in toolbars, centralizing controls in the header.
- **Refactor**
  - Unified header button components for notes and embedded synced documents into reusable components.
  - Simplified header components by delegating button behaviors to shared components.
- **Bug Fixes**
  - Fixed conditional rendering of editor content in embedded synced documents when folded.
- **Chores**
  - Upgraded theme dependency version from "^1.1.12" to "^1.1.14" across multiple packages.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-04-30 03:11:38 +00:00
doodlewind
34039bc7d8 refactor(editor): use default fallback placeholder for turbo renderer (#12059)
Based on this PR, all block types support zooming placeholder now.

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/lEGcysB4lFTEbCwZ8jMv/33a32735-d31e-4055-9dbf-faaed444a6d2.png)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **Improvements**
  - Enhanced layout rendering accuracy for non-root nodes, leading to more precise placement and sizing.
  - Simplified placeholder painting logic for improved consistency, with all nodes now displayed using a color based on their depth.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-04-29 08:18:57 +00:00
Saul-Mirone
4c84e6bac7 feat(editor): gfx link extension (#12046)
Closes: BS-3368

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - Introduced a new link tool extension, enabling enhanced link-related functionality within the edgeless workspace.
  - Added a new view extension for link tools, improving integration and usability in edgeless mode.

- **Chores**
  - Added a new package for link tool functionality with appropriate dependencies and exports.
  - Registered new custom elements for edgeless toolbars and link tools to support modular UI components.
  - Updated project configurations and workspace dependencies to include the new link tool module.

- **Refactor**
  - Removed unused quick tool exports and toolbar component registrations to streamline the edgeless extension codebase.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-04-29 03:19:37 +00:00
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.

<!-- 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 -->
2025-04-29 03:05:17 +00:00
fundon
85e40e4026 refactor(editor): simplify attachment and image upload handling (#11987)
Closes: [BS-3303](https://linear.app/affine-design/issue/BS-3303/改進-pack-attachment-props-流程)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Enhanced attachment and image uploads with improved file size validation and clearer notifications.
  - Upload telemetry tracking added for attachments to monitor upload success or failure.

- **Refactor**
  - Streamlined and unified the process of adding attachments and images, making uploads more reliable and efficient.
  - Parameter names updated for clarity across attachment and image insertion features.

- **Documentation**
  - Updated API documentation to reflect parameter name changes for consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-04-28 07:03:30 +00:00
Saul-Mirone
81b439c4e1 feat(editor): add gfx pointer extension (#12006)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a new pointer graphics module with tools and quick tool integration for edgeless surfaces.
  - Added a quick tool button for pointer interactions in edgeless mode.
  - Exposed new extension points for pointer graphics and effects.

- **Improvements**
  - Integrated pointer graphics as a dependency into related packages.
  - Enhanced toolbar context to support additional surface alignment modes.
  - Added conditional clipboard configuration registrations for edgeless contexts across multiple block types.

- **Removals**
  - Removed legacy tool and effect definitions and related quick tool exports from edgeless components.
  - Streamlined extension arrays and removed unused exports for a cleaner codebase.
  - Deleted obsolete utility functions and component registrations.

- **Chores**
  - Updated workspace and TypeScript project references to include the new pointer graphics module.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-04-27 04:46:44 +00:00
Saul-Mirone
d6e7039b7b refactor(editor): remove unused block dependencies (#11959)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **Chores**
  - Updated package dependencies to reduce the number of direct dependencies for improved maintainability. No changes to user-facing features or functionality.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-04-24 09:47:35 +00:00
Saul-Mirone
2200bd7b70 feat(editor): text gfx extension (#11951)
Closes: BS-3213
2025-04-24 03:21:54 +00:00
Saul-Mirone
9d90899344 feat(editor): group gfx extension (#11950)
Closes: BS-3208

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - Introduced a new group view extension, enhancing how group elements are handled and displayed.
  - Added new store and view modules for group-related features, improving modularity and integration.

- **Refactor**
  - Updated the group element architecture to use extension-based registration for views, toolbars, and effects.
  - Simplified and reorganized exports for group and text modules.

- **Chores**
  - Updated dependencies and project references to improve build consistency and compatibility.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-04-24 03:21:54 +00:00
doodlewind
2d3130eac9 fix(editor): turbo renderer placeholder for built in template (#11793)
Fixed compat error for new built-in template with test updated.

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/lEGcysB4lFTEbCwZ8jMv/f8c69d3f-9602-4509-994b-7243b26b4656.png)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - Added an option to enable or disable bitmap rendering in the renderer settings.
  - Introduced a cooldown period after zooming before block optimization resumes, improving rendering performance and stability.

- **Bug Fixes**
  - Improved handling of cases where block components may be missing, preventing potential runtime errors.

- **Tests**
  - Expanded and refined tests to verify zooming behavior, bitmap caching, and internal state transitions for enhanced reliability.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-04-24 02:40:04 +00:00
Saul-Mirone
20d4911641 refactor(editor): move connector overlay to connector package (#11944) 2025-04-24 01:27:28 +00:00
Saul-Mirone
0cd7111f20 feat(editor): connector gfx extension (#11940)
Closes: BS-3207
2025-04-24 01:27:28 +00:00
Saul-Mirone
9c0633b75c feat(editor): template gfx extension (#11939)
Closes: BS-3212
2025-04-24 00:49:39 +00:00
Saul-Mirone
f0a233368d feat(editor): mindmap gfx extension (#11936)
Closes: BS-3209

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - Introduced mind map view and store extensions, enhancing mind map integration and conversion to plain text and markdown formats.
  - Added priority property to quick tools, allowing for custom ordering in the toolbar.
- **Improvements**
  - Toolbar quick tools are now sorted by priority for a more intuitive user experience.
  - Updated toolbar and extension configurations to streamline available tools and extensions.
- **Bug Fixes**
  - Conditional registration of certain components ensures correct behavior in edgeless mode.
- **Chores**
  - Updated dependencies and project references to improve module integration and maintainability.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-04-24 00:49:38 +00:00
Saul-Mirone
bc0530a708 feat(editor) shape gfx extension (#11928)
Closes: BS-3211
2025-04-23 15:46:23 +00:00
Saul-Mirone
61121ab727 feat(editor): brush and note gfx extension (#11927)
Closes: BS-3206
Closes: BS-3210

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced new brush and note view extensions, enhancing integration and extensibility for brush and note tools.
  - Added store extension for brush tools, allowing for improved adapter integration.

- **Improvements**
  - Expanded module exports for brush and note graphics, making store and view functionalities more accessible.
  - Added new dependencies to support extension loading and improved project structure.

- **Refactor**
  - Updated extension arrays and toolbars to use the new view and store extensions for brush and note tools.
  - Removed legacy brush and note tools, effects, and toolbar extensions in favor of the new extension-based approach.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-04-23 15:46:22 +00:00
L-Sun
9dbdd4b7ba refactor(editor): add helper function for undo notification (#11903)
### What Changes
- Refactors the `notify` function call with undo button. It is called `notifyWithUndo`, which can  associate the visibility of the `NotificationCard` with the top undo item in history stack, such as undo by shortcut `Cmd+Z`.
- change icon of the "Insert into page" button. Close [BS-3267](https://linear.app/affine-design/issue/BS-3267/frame和group的insert-into-page图标也更换一下)
2025-04-23 05:56:23 +00:00
doouding
b59f6ebde0 refactor: default-tool box selection (#11800)
### Changed
- Rewrite box selection in `default-tool`, the view can decide whether to be selected in box selection by return a boolean value in `onBoxSelected` method
- Cleanup unnecessary states in `default-tool` and some naming problem
2025-04-22 08:18:26 +00:00
doouding
e0e84d302d refactor: moving connector label to connector view (#11738)
### Changed
Moved connector label moving logic from `default-tool` to connector view.

#### Other infrastructure changes:​​
- Gfx element view now can handles drag events
- Added `context.preventDefault()` support to bypass built-in interactions in extension
- Handle the pointer events in element view will bypass the built-in interactions automatically

> The built-in interactions include element dragging, click selection, drag-to-scale operations, etc.
2025-04-22 08:18:24 +00:00
doouding
52953ce8e3 refactor: redesign element transform manager interface (#11679)
### Change
- Rename `ElementTransformManager` -> `InteractivityManager`
- Now you can `event.on` and `action.onXXX` method to extend interactivity behaviour. The old approach of overriding methods directly is deprecated.
2025-04-22 08:18:23 +00:00
doodlewind
1146f4d5a9 fix(editor): prototype polluting in gfx util (#11831)
This fixes the security edge case where the font key happens to be `__proto__` or `constructor`
2025-04-21 04:00:59 +00:00
fundon
67832aab09 chore(editor): update file icons (#11826) 2025-04-21 09:18:29 +08:00
Yifeng Wang
760a689c07 Merge branch 'canary' into 0414/vtr_test_layout 2025-04-15 09:20:25 +08:00
doodlewind
b8967a8a7b test(editor): add tests for turbo renderer state machine (#11659) 2025-04-14 15:54:02 +00:00
Yifeng Wang
e9d04de399 test(editor): add tests for turbo renderer layout cache 2025-04-14 17:06:13 +08:00
doodlewind
6457c979f5 test(editor): add tests for turbo renderer state machine (#11659) 2025-04-14 17:01:27 +08:00
fundon
afdc40b510 feat(editor): add shortcut to highlighter tool (#11604)
Closes: [BS-3092](https://linear.app/affine-design/issue/BS-3092/highlighter-快捷键)

### What's Changed!

* Added shortcut `⇧ P` to highlighter tool

[Screen Recording 2025-04-10 at 16.33.30.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/8ypiIKZXudF5a0tIgIzf/38aadc08-ed18-4b48-9d91-b4876d14a2d3.mov" />](https://app.graphite.dev/media/video/8ypiIKZXudF5a0tIgIzf/38aadc08-ed18-4b48-9d91-b4876d14a2d3.mov)
2025-04-11 13:08:59 +00:00
L-Sun
823bf40a57 fix(editor): fix overlay of tool is not shown or repeated when switching tool (#11575)
Close [BS-3029](https://linear.app/affine-design/issue/BS-3029/frame-里面的-shape-没办法进入文本编辑模式)
Close [BS-3082](https://linear.app/affine-design/issue/BS-3082/按s切换至shape工具,在白板上点击会创建两个shape)
Close [BS-3091](https://linear.app/affine-design/issue/BS-3082/按s切换至shape工具,在白板上点击会创建两个shape)

## Fix Shape Tool Issues

This PR addresses several issues with the shape and mindmap tools functionality in the editor:

1. **Fix text editing after mode switching**: Resolves an issue where users couldn't edit text in shapes after switching editor modes. The fix ensures the edgeless block is properly retrieved when double-clicking on a shape.

2. **Improve tool switching behavior**: Fixes issues with tool overlays not showing or being repeated when switching between tools. This includes:
   - Properly handling tool overlay visibility
   - Ensuring only one tool is active at a time when using keyboard shortcuts
   - Adding proper cleanup when switching tools

3. **Add comprehensive tests**: Adds new test cases to verify:
   - Shape creation with keyboard shortcuts
   - Shape text editing after mode switching
   - Tool switching behavior with keyboard shortcuts
2025-04-10 13:39:22 +00:00
doodlewind
dba8e00fb6 feat(editor): add basic note support in turbo renderer (#11607)
After landing layout tree refactoring, this PR adds basic note support in turbo renderer.

In this demo recording, the code and image block needs to be further supported.

[Screen Recording 2025-04-10 at 5.16.15 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/2e416b41-5609-4e52-a90f-5b7bb77db682.mov" />](https://app.graphite.dev/media/video/lEGcysB4lFTEbCwZ8jMv/2e416b41-5609-4e52-a90f-5b7bb77db682.mov)
2025-04-10 09:52:33 +00:00
doodlewind
69d4620753 refactor(editor): cleanup turbo renderer entry config with doc guide (#11605) 2025-04-10 09:52:32 +00:00
doodlewind
f85b35227b feat(editor): replace flat layout cache with tree in turbo renderer (#11319)
### TL;DR

Refactored the BlockSuite turbo renderer to use a hierarchical tree structure for layouts instead of a flat list, improving rendering accuracy and performance.

### What changed?

- Redesigned the layout system to use a tree structure (`ViewportLayoutTree`) that better represents the document hierarchy
- Added `blockId` to all layout objects for better tracking and debugging
- Updated the layout query mechanism to work with models directly instead of components
- Enhanced error handling with more descriptive warnings and error messages
- Improved the painting process to traverse the layout tree recursively
- Fixed viewport coordinate calculations for more accurate rendering
- Updated the worker communication to support the new tree-based layout structure

### Why make this change?

The previous flat layout structure didn't properly represent the hierarchical nature of documents, leading to rendering issues with nested blocks. This tree-based approach:

1. Better represents the actual document structure
2. Improves rendering accuracy for nested elements
3. Makes debugging easier with more consistent block identification
4. Provides a more robust foundation for future rendering optimizations
5. Reduces the likelihood of rendering artifacts when scrolling or zooming
2025-04-10 08:49:23 +00:00
Saul-Mirone
238ec59dd2 fix(editor): image icon color (#11536)
Closes: BS-2166
2025-04-08 09:18:26 +00:00
Saul-Mirone
1f45cc5dec refactor(editor): unify directories naming (#11516)
**Directory Structure Changes**

- Renamed multiple block-related directories by removing the "block-" prefix:
  - `block-attachment` → `attachment`
  - `block-bookmark` → `bookmark`
  - `block-callout` → `callout`
  - `block-code` → `code`
  - `block-data-view` → `data-view`
  - `block-database` → `database`
  - `block-divider` → `divider`
  - `block-edgeless-text` → `edgeless-text`
  - `block-embed` → `embed`
2025-04-07 12:34:40 +00:00
forehalo
40f218c898 chore: set base version to 0.21 2025-04-07 16:10:32 +08:00
Saul-Mirone
bb1270061a feat(editor): gfx template package (#11480) 2025-04-06 12:24:13 +00:00
Saul-Mirone
aed7f40568 refactor(editor): improve element adapters (#11473) 2025-04-05 09:40:13 +00:00
Saul-Mirone
2a1306c58c refactor(editor): separate the element renders (#11461) 2025-04-04 13:09:46 +00:00
Saul-Mirone
5a1106fb88 refactor(editor): extract brush element renderer (#11460) 2025-04-04 13:09:45 +00:00
CatsJuice
46d8d30e62 feat(editor): disable clickToDrag for edgeless toolbar shape and mindmap (#11310) 2025-04-04 05:10:05 +00:00
JimmFly
7a1d5ab252 feat(core): upgrade icons package (#11435) 2025-04-04 04:52:49 +00:00
doouding
ef76c83184 fix: connector should remain the same when its target or source switch to other
shape type (#11369)

Fixes [BS-1431](https://linear.app/affine-design/issue/BS-1431/改变-shape-形状后,connector-丢失)
2025-04-02 05:10:30 +00:00
fundon
f1882061a2 fix(editor): should exit drawing tools menu when Escape is pressed (#11306)
Closes: [BS-2978](https://linear.app/affine-design/issue/BS-2978/二级菜单的激活状态错误) [BS-2977](https://linear.app/affine-design/issue/BS-2977/pen和highlighter没做esc)
2025-03-31 11:05:01 +00:00
fundon
6a66bf53a8 fix(editor): adjust highlighter color (#11300)
Closes: [BS-2980](https://linear.app/affine-design/issue/BS-2980/highlighter透明度改为30percent) [BS-2979](https://linear.app/affine-design/issue/BS-2979/highlighter默认选择颜色为蓝色)
2025-03-31 09:11:26 +00:00
doodlewind
dffb89c388 feat(editor): add list block turbo renderer scaffold (#11266)
This PR allows placeholder in turbo renderer to cover list block as a basic scaffold.

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/lEGcysB4lFTEbCwZ8jMv/eda28656-e56e-4845-9fe6-885e70841697.png)
2025-03-29 04:49:25 +00:00
Saul-Mirone
205cd7a86d refactor(editor): rename block-std to std (#11250)
Closes: BS-2946
2025-03-28 07:20:34 +00:00
fundon
c0c0e5ea8f chore(editor): add event tracking to highlighter tool (#11232)
Closes: [BS-2947](https://linear.app/affine-design/issue/BS-2947/埋点相关)
2025-03-28 01:34:44 +00:00
CatsJuice
e855197acf feat(editor): responsive edgeless toolbar pen menu (#11150)
close BS-2855
2025-03-27 08:53:27 +00:00
fundon
2c4278058b feat(editor): add highlighter (#10573)
Closes: [BS-2909](https://linear.app/affine-design/issue/BS-2909/新增highlighter)

### What's Changed!

Currently the highlighter tool is very similar to brush, but for the future, it's a standalone module.

* Added `Highlighter` element model
* Added `Highlighter` tool
* Added `Highlighter` entry to the global toolbar
2025-03-27 08:53:26 +00:00
fundon
6ade2b7084 chore(editor): add event tracking to drawing tool (#11230)
Closes: [BS-2833](https://linear.app/affine-design/issue/BS-2833/考虑屏蔽或者降低brush-行为的采集密度)
2025-03-27 08:17:44 +00:00