mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-25 10:22:55 +08:00
fix(editor): drag handle disappeard when hover on the extra area between note and its background (#12536)
Close [BS-3391](https://linear.app/affine-design/issue/BS-3391/无法从note中拖出embed-synced-doc到白板) ### Before can not hover on drag handle https://github.com/user-attachments/assets/5596538e-e922-4d7f-8188-b719b234f3ee ### After can hover on drag handle https://github.com/user-attachments/assets/855743ec-7601-48a8-8453-cd5aa395bd06 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Bug Fixes** - Improved detection of hovering over notes in edgeless mode, ensuring the drag handle appears correctly when hovering on the background of a selected note. - Enhanced background style updates for edgeless notes, providing more accurate visual feedback. - **Tests** - Added a test to verify that the drag handle is visible when hovering over the background of a selected edgeless note. - Updated undo/redo tests to improve accuracy of background color evaluation. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
@@ -216,3 +216,33 @@ test('should keep relative order of new note when a block is dragged from note t
|
||||
await waitNextFrame(page);
|
||||
await assertRichTexts(page, ['3', '5', '6', '7', '9']);
|
||||
});
|
||||
|
||||
test('drag handle should work when hover on the background of a selected edgeless note', async ({
|
||||
page,
|
||||
}) => {
|
||||
await enterPlaygroundRoom(page);
|
||||
await initEmptyEdgelessState(page);
|
||||
await focusRichText(page);
|
||||
await type(page, 'hello');
|
||||
await switchEditorMode(page);
|
||||
await page.mouse.dblclick(CENTER_X, CENTER_Y);
|
||||
// wait for the note animation
|
||||
await waitNextFrame(page, 400);
|
||||
|
||||
const noteRect = await page.locator('affine-edgeless-note').boundingBox();
|
||||
assertRectExist(noteRect);
|
||||
|
||||
const noteBackgroundRect = await page
|
||||
.locator('edgeless-note-background')
|
||||
.boundingBox();
|
||||
assertRectExist(noteBackgroundRect);
|
||||
|
||||
const paragraphRect = await page.locator('affine-paragraph').boundingBox();
|
||||
assertRectExist(paragraphRect);
|
||||
|
||||
// move to the area between note background and note block and before the paragraph
|
||||
const x = (noteRect.x + noteBackgroundRect.x) / 2;
|
||||
const y = paragraphRect.y + paragraphRect.height / 2;
|
||||
await page.mouse.move(x, y, { steps: 2 });
|
||||
await expect(page.locator('.affine-drag-handle-container')).toBeVisible();
|
||||
});
|
||||
|
||||
@@ -148,7 +148,7 @@ test('undo/redo should work when change note custom background', async ({
|
||||
await selectNoteInEdgeless(page, noteId);
|
||||
|
||||
const getNoteBackground = async () => {
|
||||
return page.locator('edgeless-note-background > div').evaluate(el => {
|
||||
return page.locator('edgeless-note-background').evaluate(el => {
|
||||
return getComputedStyle(el).backgroundColor;
|
||||
});
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user