mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-19 07:17:00 +08:00
feat(editor): improve visibility of hidden content of edgeless note (#12068)
Close [BS-3066](https://linear.app/affine-design/issue/BS-3066/优化长note的展示和折叠) - Enhanced the visibility behavior of hidden content in edgeless notes by: - Showing hidden content when a note is being edited, even when it's outside the viewport - Improving hover behavior with a delay when leaving from the bottom of the note - Adding proper cleanup of hover timeouts when the component is disconnected - Optimizing the viewport element to keep editing blocks or elements visible ## Testing - Added new E2E test cases covering: - Hover behavior on selected notes - Content visibility during editing - Viewport scrolling behavior - Edge cases for content visibility ## Impact This change improves the user experience when working with collapsed notes in edgeless mode by making the content more accessible and preventing accidental content hiding during editing. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Bug Fixes** - Improved visibility of hidden content in edgeless notes when hovering near the bottom edge or editing the note, especially after resizing or clipping. - **New Features** - Enhanced hover behavior with delayed clearing based on mouse position to improve user experience. - **Tests** - Added new tests verifying hidden content visibility in edgeless notes during hover and editing, simulating diverse user interactions. - **Chores** - Added utilities to get and set viewport center for improved test control. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
@@ -970,6 +970,25 @@ export async function getZoomLevel(page: Page) {
|
||||
return Number(text.replace('%', ''));
|
||||
}
|
||||
|
||||
export async function getViewportCenter(page: Page): Promise<[number, number]> {
|
||||
return page.evaluate(() => {
|
||||
const target = document.querySelector('affine-edgeless-root');
|
||||
if (!target) {
|
||||
throw new Error('Missing edgeless page');
|
||||
}
|
||||
return [target.gfx.viewport.centerX, target.gfx.viewport.centerY];
|
||||
});
|
||||
}
|
||||
export async function setViewportCenter(page: Page, center: [number, number]) {
|
||||
await page.evaluate(center => {
|
||||
const target = document.querySelector('affine-edgeless-root');
|
||||
if (!target) {
|
||||
throw new Error('Missing edgeless page');
|
||||
}
|
||||
target.gfx.viewport.setCenter(center[0], center[1]);
|
||||
}, center);
|
||||
}
|
||||
|
||||
export async function optionMouseDrag(
|
||||
page: Page,
|
||||
start: number[],
|
||||
|
||||
Reference in New Issue
Block a user