Commit Graph

35 Commits

Author SHA1 Message Date
L-Sun
7223d35c89 fix(editor): shape tool should be the last used shape (#12425)
Close [BS-3305](https://linear.app/affine-design/issue/BS-3305/白板按s应该使用上次的shape形状)

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

- **New Features**
  - Added a method to cycle through shape types when using the shape tool.

- **Bug Fixes**
  - Improved shape tool behavior to ensure the selected shape type does not change unexpectedly after adding a new shape.

- **Tests**
  - Added an end-to-end test to verify that the shape tool retains the selected shape type after adding a new shape.
  - Enhanced shortcut tests to verify cycling shapes forward and backward using 's' and 'Shift+s' keys.

- **Refactor**
  - Streamlined the logic for cycling through shape types and connector modes for improved maintainability.
  - Removed external utility for cycling shapes, integrating the functionality directly into the shape tool.
  - Updated keyboard shortcut handling to use the new cycling method within the shape tool.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-05-23 16:31:02 +00:00
L-Sun
573c2faf76 fix(editor): can not undo and redo of color of edgeless blocks (#12414)
Close [BS-3507](https://linear.app/affine-design/issue/BS-3507/edgeless-text-颜色无法-undoredo)
Close [BS-3426](https://linear.app/affine-design/issue/BS-3426/frame-修改背景色后不能撤销)

This PR fixes the issue where the color change of edgeless blocks could not be undone/redone, including notes, edgeless-text, and frames. It also addresses the problem of a tiny shape being unexpectedly retained on the canvas. The key changes are:
- Removal of `transact` from the `pop` method of edgeless elements.
- Refactoring of `onPickColor` for all edgeless elements and blocks to better control the lifecycle of custom color property changes.
- Addition of the missing custom background color feature for notes.
- Addition of undo/redo color tests for notes, frames, and edgeless-text.

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

- **New Features**
  - Added undo and redo support for color changes in frames, notes, and text blocks, allowing users to revert or reapply background and text color modifications.

- **Bug Fixes**
  - Improved reliability of color picker interactions, ensuring consistent state management and transactional updates during color changes.

- **Tests**
  - Introduced new end-to-end tests to verify undo/redo functionality for color changes in frames, notes, and text blocks.

- **Refactor**
  - Streamlined color picker event handling for better maintainability and consistency across toolbars and style panels.
  - Updated style panel structure and event handling for improved interaction and state management.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-05-22 04:10:16 +00:00
doouding
eb185255a3 fix: selection rect should reflect viewport change (#12355)
Fixes [BS-3349](https://linear.app/affine-design/issue/BS-3349/)

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

- **New Features**
  - Improved edge scrolling during selection dragging for smoother and more responsive viewport navigation.
  - Dragging area and mouse position tracking now update reactively with viewport changes, ensuring more accurate selection and movement.

- **Refactor**
  - Unified and clarified coordinate handling for dragging and mouse position, with clearer naming and separation between model and browser coordinates.
  - Simplified selection logic and removed unnecessary accumulated state for cleaner and more maintainable behavior.
  - Enhanced flexibility in coordinate conversion by allowing viewport transformations relative to arbitrary zoom and center.
  - Streamlined clipboard paste handling by simplifying mouse position extraction and adjusting attachment options.

- **Bug Fixes**
  - Enhanced overlay and dragging area accuracy by updating position calculations and coordinate transformations.
  - Fixed paste operations to correctly handle mouse position without unnecessary coordinate conversions.
  - Corrected drag initiation positions in toolbar and shape dragging to align with viewport-relative coordinates.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-05-19 16:05:33 +00:00
Saul-Mirone
820c3fda63 refactor(editor): cleanup effects export (#12312)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **Chores**
  - Removed multiple internal export entries related to effects modules across various packages.
  - Updated dependencies and configuration references to improve internal consistency. No visible changes for end-users.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-05-18 04:17:08 +00:00
doodlewind
8ed4f14380 feat(editor): support border radius for shape dom renderer (#12326)
Comparison:

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/lEGcysB4lFTEbCwZ8jMv/f2a266ba-c3d5-46ea-9aa5-38e5d0de6d5a.png)

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

## Summary by CodeRabbit

- **New Features**
	- Border radius and border thickness of shapes now scale dynamically with zoom level for improved visual consistency.

- **Tests**
	- Added a test to ensure percentage-based border radius values are correctly rendered in the DOM.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-05-16 09:02:45 +00:00
Saul-Mirone
f2164e4d70 fix(editor): suface component can be null (#12270)
Closes: BS-3149

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

## Summary by CodeRabbit

- **Refactor**
  - Improved internal handling of surface components across various tools, resulting in safer and more consistent access patterns.
  - Enhanced code maintainability and reliability without altering any visible features or user workflows.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-05-14 08:37:11 +00:00
Yifeng Wang
9cabe03386 refactor(editor): add dom renderer entry for canvas element (#12149) 2025-05-14 16:22:16 +08:00
doouding
08d6c5a97c refactor(editor): rewrite resize and rotate (#12054)
### Changed

This pr split the old `edgeless-selected-rect` into four focused modules:

- `edgeless-selected-rect`: Provide an entry point for user operation on view layer only, no further logic here.

- `GfxViewInteractionExtension`: Allow you to plug in custom resize/rotate behaviors for block or canvas element. If you don’t register an extension, it falls back to the default behaviours.

- `InteractivityManager`: Provide the API that accepts resize/rotate requests, invokes any custom behaviors you’ve registered, tracks the lifecycle and intermediate state, then hands off to the math engine.

- `ResizeController`: A pure math engine that listens for pointer moves and pointer ups and calculates new sizes, positions, and angles. It doesn’t call any business APIs.

### Customizing an element’s resize/rotate behavior
Call `GfxViewInteractionExtension` with the element’s flavour or type plus a config object. In the config you can define:

- `resizeConstraint` (min/max width & height, lock ratio)
- `handleResize(context)` method that returns an object containing `beforeResize`、`onResizeStart`、`onResizeMove`、`onResizeEnd`
- `handleRotate(context)` method that returns an object containing `beforeRotate`、`onRotateStart`、`onRotateMove`、`onRotateEnd`

```typescript
import { GfxViewInteractionExtension } from '@blocksuite/std/gfx';

GfxViewInteractionExtension(
  flavourOrElementType,
  {
    resizeConstraint: {
      minWidth,
      maxWidth,
      lockRatio,
      minHeight,
      maxHeight
    },
    handleResize(context) {
      return {
        beforeResize(context) {},
        onResizeStart(context) {},
        onResizeMove(context) {},
        onResizeEnd(context) {}
      };
    },
    handleRotate(context) {
      return {
        beforeRotate(context) {},
        onRotateStart(context) {},
        onRotateMove(context) {},
        onRotateEnd(context) {}
      };
    }
  }
);
```

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

- **New Features**
  - Added interaction extensions for edgeless variants of attachment, bookmark, edgeless text, embedded docs, images, notes, frames, AI chat blocks, and various embed blocks (Figma, GitHub, HTML, iframe, Loom, YouTube).
  - Introduced interaction extensions for graphical elements including connectors, groups, mind maps, shapes, and text, supporting constrained resizing and rotation disabling where applicable.
  - Implemented a unified interaction extension framework enabling configurable resize and rotate lifecycle handlers.
  - Enhanced autocomplete overlay behavior based on selection context.

- **Refactor**
  - Removed legacy resize manager and element-specific resize/rotate logic, replacing with a centralized, extensible interaction system.
  - Simplified resize handle rendering to a data-driven approach with improved cursor management.
  - Replaced complex cursor rotation calculations with fixed-angle mappings for resize handles.
  - Streamlined selection rectangle component to use interactivity services for resize and rotate handling.

- **Bug Fixes**
  - Fixed connector update triggers to reduce unnecessary updates.
  - Improved resize constraints enforcement and interaction state tracking.

- **Tests**
  - Refined end-to-end tests to use higher-level resize utilities and added finer-grained assertions on element dimensions.
  - Enhanced mouse movement granularity in drag tests for better simulation fidelity.

- **Chores**
  - Added new workspace dependencies and project references for the interaction framework modules.
  - Extended public API exports to include new interaction types and extensions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-05-13 11:29:59 +00:00
Saul-Mirone
388641bc89 refactor(editor): rename doc to store on block components (#12173)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **Refactor**
  - Unified internal data access by replacing all references from `doc` to `store` across all components, blocks, widgets, and utilities. This affects how readonly state, block operations, and service retrieval are handled throughout the application.
- **Tests**
  - Updated all test utilities and test cases to use `store` instead of `doc` for document-related operations.
- **Chores**
  - Updated context providers and property names to reflect the change from `doc` to `store` for improved consistency and maintainability.

No user-facing features or behaviors have changed.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-05-08 01:01:05 +00:00
Saul-Mirone
95b9e4b3d0 refactor(editor): rename model.doc to store (#12172) 2025-05-07 09:17:01 +00:00
Saul-Mirone
676c5d8de6 refactor(editor): remove global gfx tool types (#12119) 2025-05-04 13:53:27 +00:00
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
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
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
fundon
67832aab09 chore(editor): update file icons (#11826) 2025-04-21 09:18:29 +08: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
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
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
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
Saul-Mirone
205cd7a86d refactor(editor): rename block-std to std (#11250)
Closes: BS-2946
2025-03-28 07:20:34 +00:00
doouding
ace5d44a61 refactor: rewrite dblclick and selection logic of default-tool (#11036)
continue #10824

### Changed
- Moved double-click-to-edit behavior from the default tool to individual model views
- Introduced `onSelected` callback interface in gfx view components to allows developers to override default selection logic
2025-03-26 07:32:43 +00:00
fundon
d7eccd10ee chore(editor): add edgeless scribbled style feature flag (#11127)
Closes: [BS-2805](https://linear.app/affine-design/issue/BS-2805/下掉线条样式切换功能,需添加-feature-flag)
2025-03-24 12:55:00 +00:00
Flrande
4bacfbd640 feat(editor): support member node (#11075)
Close [BS-2793](https://linear.app/affine-design/issue/BS-2793/inline-member)
2025-03-24 05:57:03 +00:00
Saul-Mirone
8e08b9000d feat(editor): create gfx mindmap package (#11100) 2025-03-24 03:14:22 +00:00
Saul-Mirone
1f0fc9d47a feat(editor): gfx connector package (#11091) 2025-03-22 14:39:05 +00:00
Saul-Mirone
c1d426d8e9 refactor(editor): move frame toolbar config and components to its package (#11084) 2025-03-21 16:47:40 +00:00
Saul-Mirone
f5fb5c848e refactor(editor): move text toolbar config and components to its package (#11083) 2025-03-21 16:47:40 +00:00
Saul-Mirone
f762797772 refactor(editor): move shape toolbar config and components to its package (#11082) 2025-03-21 16:47:39 +00:00
Saul-Mirone
8109c718c7 feat(editor): gfx shape package (#11060) 2025-03-21 06:13:11 +00:00