From fbe053a54e6e355c13ffdec3665788059bb8599e Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Mon, 19 May 2025 15:50:58 +0000
Subject: [PATCH] fix(editor): edgeless selected rect should be below the
 edgeless toolbar (#12370)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Close [BS-3512](https://linear.app/affine-design/issue/BS-3512/bug-note-选中状态会穿透-toolbar)

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

## Summary by CodeRabbit

- **Tests**
  - Added a new end-to-end test to verify that selection handles are visually and interactively layered beneath the edgeless element toolbar in the editor.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 blocksuite/affine/all/src/extensions/view.ts  |  3 +-
 .../e2e/edgeless/selection/selection.spec.ts  | 53 +++++++++++++++++++
 2 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/blocksuite/affine/all/src/extensions/view.ts b/blocksuite/affine/all/src/extensions/view.ts
index fad7b0e4e3..e20814f00a 100644
--- a/blocksuite/affine/all/src/extensions/view.ts
+++ b/blocksuite/affine/all/src/extensions/view.ts
@@ -102,9 +102,9 @@ export function getInternalViewExtensions() {
     InlinePresetViewExtension,
 
     // Widget
+    // order will affect the z-index of the widget
     DragHandleViewExtension,
     EdgelessAutoConnectViewExtension,
-    EdgelessToolbarViewExtension,
     FrameTitleViewExtension,
     KeyboardToolbarViewExtension,
     LinkedDocViewExtension,
@@ -118,6 +118,7 @@ export function getInternalViewExtensions() {
     EdgelessSelectedRectViewExtension,
     EdgelessDraggingAreaViewExtension,
     NoteSlicerViewExtension,
+    EdgelessToolbarViewExtension,
 
     // Fragment
     DocTitleViewExtension,
diff --git a/tests/blocksuite/e2e/edgeless/selection/selection.spec.ts b/tests/blocksuite/e2e/edgeless/selection/selection.spec.ts
index 220988c4e2..0ab289f2af 100644
--- a/tests/blocksuite/e2e/edgeless/selection/selection.spec.ts
+++ b/tests/blocksuite/e2e/edgeless/selection/selection.spec.ts
@@ -17,6 +17,7 @@ import {
   initEmptyEdgelessState,
   initThreeParagraphs,
   pressEnter,
+  pressEscape,
   waitNextFrame,
 } from '../../utils/actions/index.js';
 import {
@@ -25,6 +26,7 @@ import {
   assertEdgelessRemoteSelectedRect,
   assertEdgelessSelectedModelRect,
   assertEdgelessSelectedRect,
+  assertRectExist,
   assertSelectionInNote,
 } from '../../utils/asserts.js';
 import { test } from '../../utils/playwright.js';
@@ -464,3 +466,54 @@ test('should select shapes while moving selection', async ({ page }) => {
 
   await assertEdgelessSelectedRect(page, [100, 98, 212, 204]);
 });
+
+test('should the selected rect be below the edgeless element toolbar', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await switchEditorMode(page);
+
+  const toolbar = page.locator('.edgeless-toolbar-container');
+  const toolbarRect = await toolbar.boundingBox();
+  assertRectExist(toolbarRect);
+
+  await actions.addNote(page, 'hello', toolbarRect.x, toolbarRect.y - 20);
+  await pressEscape(page, 3);
+
+  await page.mouse.click(toolbarRect.x, toolbarRect.y - 20);
+
+  const selectedRect = page.locator('.affine-edgeless-selected-rect');
+  await expect(selectedRect).toBeVisible();
+
+  const brHandle = selectedRect.getByLabel('bottom-right');
+  const brHandleRect = await brHandle.boundingBox();
+  assertRectExist(brHandleRect);
+
+  // make sure the position of br handle is inside the toolbar
+  expect(
+    brHandleRect.x > toolbarRect.x &&
+      brHandleRect.x < toolbarRect.x + toolbarRect.width &&
+      brHandleRect.y > toolbarRect.y &&
+      brHandleRect.y < toolbarRect.y + toolbarRect.height
+  ).toBe(true);
+
+  const brHandleCenter = [
+    brHandleRect.x + brHandleRect.width / 2,
+    brHandleRect.y + brHandleRect.height / 2,
+  ];
+
+  // get element from the center of br handle
+  const topElement = await page.evaluate(brHandleCenter => {
+    const element = document.elementFromPoint(
+      brHandleCenter[0],
+      brHandleCenter[1]
+    );
+    if (!element) {
+      throw new Error('element not found');
+    }
+    return element.tagName;
+  }, brHandleCenter);
+
+  expect(topElement).toBe('EDGELESS-TOOLBAR-WIDGET');
+});