Commit Graph

20 Commits

Author SHA1 Message Date
DarkSky 11db127772 chore: bump deps (#15151) 2026-06-24 23:55:19 +08:00
Adarsh Singh 7046ad7bf4 fix(editor): align selection/handle/remote/text overlays with blocks (#14862)
# Closes #14855.

## The bug

When an `affine:embed-synced-doc` is placed on an edgeless canvas and
resized which sets `model.props.scale` to a value ≠ 1 - the
block-selection frame rendered **inside** that embedded editor is drawn
offset from the actual block boundary. The reporter hit this in Safari,
but the root cause is platform-independent.

![reported
screenshot](https://github.com/user-attachments/assets/ce415528-1d01-4bfe-9d63-1e2884ca2f70)

## Root cause

`affine-embed-edgeless-synced-doc-block` applies `transform:
scale(modelScale)` to its `.affine-embed-synced-doc-container` so the
embedded editor visually fits inside its edgeless xywh
([embed-edgeless-synced-doc-block.ts#L48-L58](https://github.com/toeverything/AFFiNE/blob/canary/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/embed-edgeless-synced-doc-block.ts#L48-L58)).
The inner `Viewport` exposes that outer scale as `viewScale =
boundingClientRect.width / offsetWidth`.

PR #14015 and PR #14074 already taught the surface canvas and
`GfxBlockComponent.getCSSTransform` to compensate by dividing by
`viewScale`. But several selection-related overlays that render inside
the same scaled container were **not** updated in those PRs. They
either:

- read `viewport.toViewCoord(x, y)` - which returns `(x - viewportX) *
zoom * viewScale` and drop the result into CSS `left` / `top` inside the
scaled container, or
- hand-build a `translate(translateX, translateY) scale(zoom)` transform
without `viewScale` compensation.

The outer CSS `scale(viewScale)` then re-applies the scale, leaving the
overlays one factor of `viewScale` away from their blocks. That's
exactly the misalignment in the screenshot - the rect's size looks right
but its position is offset.

## The fix

Mirror the pattern shipped in #14074 everywhere the inner overlays are
placed:

- position: `(model - viewportX) * zoom / viewScale`
- transform scale: `zoom / viewScale`
- translate: `translateX / viewScale, translateY / viewScale`

This keeps the overlays in the same reference frame as
`GfxBlockComponent.getCSSTransform` so they line up with the block
they're framing. When `viewScale === 1` (normal edgeless canvas, outside
any embed) every `/ viewScale` is a no-op and behaviour is unchanged.

## Why this is safe

- When `viewScale === 1` - every existing caller outside
`embed-edgeless-synced-doc` - the math reduces to the original
expression byte-for-byte.
- The fix strictly mirrors the invariant already adopted by
`GfxBlockComponent.getCSSTransform` in #14074. It's the same division by
`viewScale` applied in the same place.
- No public API, type, or DOM structure changed.

## Scope / known limitations

- The `Viewport._cachedBoundingClientRect` cache is only invalidated by
its own `ResizeObserver`
([viewport.ts#L500-L505](https://github.com/toeverything/AFFiNE/blob/canary/blocksuite/framework/std/src/gfx/viewport.ts#L500-L505)).
A CSS-transform change on an ancestor (e.g. the user panning/zooming the
outer edgeless canvas) does not fire it, so in theory `viewScale` can go
stale between outer-viewport updates. In practice this hasn't come up in
repro - the inner viewport's shell is observed and fires whenever layout
shifts. If it turns out to matter I'm happy to add a
`viewport.onResize()` refresh hook off the existing
`GfxViewportInitializer` in a follow-up.
- No integration test added - the existing
`blocksuite/integration-test/edgeless/` suite has no `embed-synced-doc`
harness. Adding one is a larger scope; can follow up if requested.

## Test plan

- [x] `yarn typecheck` - passes
- [x] `yarn lint:ox` - `0 warnings, 0 errors`
- [x] `yarn prettier --write` on the 5 touched files - no changes
- [ ] Manual: on canary, create an edgeless canvas, drop an
embed-synced-doc, resize with `Shift` held so `model.props.scale` ≠ 1,
select any block inside, and verify the blue selection frame sits flush
with the block's boundary (confirm on Safari, Chrome, Firefox).
- [ ] Regression check: on a normal edgeless canvas (no embed), verify
element selection, drag handle, and text/shape inline editors still
render correctly (these code paths hit `viewScale === 1` and should be
unchanged).

## Related PRs

- #14015 - fixed surface canvas at non-1 `viewScale`.
- #14074 - fixed `GfxBlockComponent.getCSSTransform` at non-1
`viewScale`. This PR completes that series by covering the selection
overlays.

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

* **Bug Fixes**
* Fixed positioning and scaling of inline text editors, selection
rectangles, drag handles, and remote cursors so overlays and editors
remain correctly aligned and sized when the viewport uses an additional
outer scale/transform during zooming and panning.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-04 01:38:39 +08:00
DarkSky 233004f867 chore: bump oxlint & enable more supported rules (#14769) 2026-04-03 03:36:52 +08:00
DarkSky c2c7dde06c chore: bump deps (#14506)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Chores**
  * Version bumped to 0.26.3 across the project and Helm charts.
  * Removed an unused dependency (minimatch) from multiple packages.
* Updated build/tooling and packaging metadata, including packaging
maker replacement.
  * Adjusted app release metadata and platform packaging config.

* **Tests**
* Updated test snapshots to reflect minor presentational styling
adjustments.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-02-24 09:11:41 +08:00
DarkSky 8ce620e2e6 chore: bump deps 2026-02-07 17:26:44 +08:00
DarkSky 27a58e764c chore: bump version & deps 2026-01-15 00:33:51 +08:00
Cats Juice cf98afb32e chore: bump theme@1.1.23 (#14222)
close #13952

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

* **Chores**
* Upgraded the shared theme library from v1.1.16 to v1.1.23 across the
project (core components, UI widgets, content blocks, and frontend
apps), delivering the latest styling and design refinements
platform-wide.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: L-Sun <zover.v@gmail.com>
2026-01-06 20:48:44 +08:00
DarkSky cb0ff04efa feat: bump more deps (#14079) 2025-12-10 16:02:28 +08:00
DarkSky 776ca2c702 chore: bump version 2025-12-08 10:47:37 +08:00
DarkSky 4e082e4170 chore: bump version 2025-11-15 17:29:54 +08:00
DarkSky e4b5b24fdd chore: bump package version 2025-10-29 21:14:34 +08:00
Cats Juice ca9811792d feat(component): emoji and icon picker (#13638)
![CleanShot 2025-09-23 at 17 11
13](https://github.com/user-attachments/assets/0a4a9d09-1149-4042-bc73-e068a428f335)


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

- **New Features**
- Icon Picker added with Emoji and Icon panels, search/filtering, recent
selections, color selection, skin tone options, and smooth group
navigation.

- **Documentation**
  - Storybook example added to preview and test the Icon Picker.

- **Chores**
  - Bumped icon library dependency to a newer minor version.
  - Added emoji data dependency to support the Emoji Picker.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-09-24 07:14:54 +00:00
德布劳外 · 贾贵 6fd9524521 feat: ai apply ui (#12962)
## New Features
* **Block Meta Markdown Adapter**:Inject the Block's metadata into
Markdown.
* **UI**:Apply interaction
   * **Widget**
* Block-Level Widget: Displays the diffs of individual blocks within the
main content and supports accepting/rejecting individual diffs.
* Page-Level Widget: Displays global options (Accept all/Reject all).
   * **Block Diff Service**:Bridge widget and diff data
* Widget subscribes to DiffMap(RenderDiff) data, refreshing the view
when the data changes.
* Widget performs operations such as Accept/Reject via methods provided
by Service.
   * **Doc Edit Tool Card**:
     * Display apply preview of semantic doc edit
     * Support apply & accept/reject to the main content
* **Apply Playground**:A devtool for testing apply new content to
current

> CLOSE AI-274 AI-275 AI-276  AI-278 

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

* **New Features**
* Introduced block-level markdown diffing with accept/reject controls
for insertions, deletions, and updates.
* Added block diff widgets for individual blocks and pages, featuring
navigation and bulk accept/reject actions.
* Provided a block diff playground for testing and previewing markdown
changes (development mode only).
* Added a new document editing AI tool component with interactive diff
viewing and change application.
* Supported rendering of the document editing tool within AI chat
content streams.

* **Improvements**
* Enhanced widget rendering in list, paragraph, data view, and database
blocks for improved extensibility.
* Improved widget flavour matching with hierarchical wildcard support
for more flexible UI integration.

* **Chores**
* Updated the "@toeverything/theme" dependency to version ^1.1.16 across
multiple packages.
* Added new workspace dependencies for core frontend packages to improve
module linkage.
* Extended global styles with visual highlights for deleted blocks in AI
block diff feature.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-07-08 03:44:44 +00:00
liuyi 9e1fa23c5e chore: bump base version 2025-06-24 14:43:39 +08:00
doouding 00ff373c01 fix: tuning drag and resize snapping (#12657)
### Changed
- Better snapping when resize elements

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

- **New Features**
  - Improved resizing behavior with enhanced alignment and snapping during element resizing, supporting rotation and multiple element selection.
  - Alignment lines now display more accurately when resizing elements.

- **Refactor**
  - Resizing logic updated to use scale factors instead of position deltas, enabling smoother and more precise resize operations.
  - Resize event data now includes richer details about handle positions, scaling, and original bounds.
  - Coordinate transformations and scaling now account for rotation and aspect ratio locking more robustly.
  - Cursor updates are disabled during active resize or rotate interactions for a smoother user experience.

- **Tests**
  - Updated resizing tests to use square shapes, ensuring consistent verification of aspect ratio maintenance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-06-03 04:12:57 +00:00
fundon de00040389 chore(editor): update loading css vars (#12557)
Related to: [BS-3559](https://linear.app/affine-design/issue/BS-3559/ui-%E5%9B%BE%E7%89%87-loading-%E5%8F%98%E9%87%8F%E6%9B%B4%E6%96%B0)

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

- **Style**
  - Improved the appearance of image loading indicators by updating background and ring colors for a more consistent visual experience.

- **New Features**
  - Added customization options for the loading icon's ring color.

- **Chores**
  - Updated the "@toeverything/theme" dependency to version ^1.1.15 across multiple packages for improved consistency and compatibility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-05-29 02:01:06 +00:00
doouding d49ecfbecc fix: avoid unnecessary rerendering of selected-rect (#12583)
### Changed

- Note scale issue
- Overlay should call refresh when `clear` is called
- Optimize edgeless-selected-rect to avoid unecessary rerendering

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

- **New Features**
  - Edgeless note blocks now respect both minimum and maximum size limits when resizing.

- **Improvements**
  - Enhanced performance and responsiveness of resize and rotate handles in selection overlays by caching allowed handles and optimizing cursor management.
  - Cursor styles for resize and rotate handles are now set more reliably and efficiently through declarative styling.

- **Bug Fixes**
  - Ensured overlay clearing now properly refreshes the renderer for more consistent visual updates.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-05-28 03:53:51 +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
doouding 5eca722edf fix: connector issues (#12308)
Fixes [BS-3161](https://linear.app/affine-design/issue/BS-3161/发现已连接的connector会响应对齐线)
Fixes [BS-3337](https://linear.app/affine-design/issue/BS-3337/connector你肿么了)
Fixes [BS-3334](https://linear.app/affine-design/issue/BS-3334/connector-不应该能够被拖拽)

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

## Summary by CodeRabbit

- **Bug Fixes**
	- Corrected typos related to label editing state, ensuring more reliable label editing and display for connectors.
	- Fixed logic in the auto-complete overlay, improving when overlays appear during hover actions.

- **New Features**
	- Improved connector label handling by ensuring label state is preserved and restored during editing.
	- Enhanced connector movement behavior, allowing connectors to be moved only when appropriate elements are selected.

- **Tests**
	- Added end-to-end tests to verify connector movement and selection behaviors for improved reliability.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-05-16 09:49:22 +00:00
Saul-Mirone 6052743671 refactor(editor): extract selected rect widget (#12290)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - Introduced the Edgeless Selected Rectangle widget, providing enhanced selection and interaction capabilities in edgeless mode.
  - Added rotation-aware resize cursors for improved usability when resizing selections.
  - Integrated new autocomplete panels and selection components for a smoother user experience.

- **Refactor**
  - Modularized the Edgeless Selected Rectangle widget as a standalone package for better maintainability and integration.
  - Updated internal references and imports to utilize the new widget package.

- **Chores**
  - Updated project and package configurations to include the new widget and ensure proper build and type-checking across the workspace.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-05-15 04:25:07 +00:00