From 37fbfbcf3e6a2fda43cd7084e99129a86f0886fd Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Mon, 3 Mar 2025 10:51:27 +0000
Subject: [PATCH] fix(editor): zindex of frame child not updated (#10580)

Close [BS-2689](https://linear.app/affine-design/issue/BS-2689/[bug]-%E5%BD%93%E5%B1%82%E7%BA%A7%E4%BD%8E%E4%BA%8E-frame-%E7%9A%84yuan%E7%B4%A0%E8%A2%AB%E6%8B%96%E5%85%A5-frame-%E6%97%B6%E5%B1%82%E7%BA%A7%E5%BA%94%E8%AF%A5%E8%A2%AB%E8%87%AA%E5%8A%A8%E6%8B%89%E9%AB%98%E5%B5%8C%E5%85%A5-frame)
---
 .../framework/block-std/src/gfx/layer.ts      |  5 +-
 .../e2e/blocksuite/edgeless/frame.spec.ts     | 64 +++++++++++++++++++
 2 files changed, 67 insertions(+), 2 deletions(-)
 create mode 100644 tests/affine-local/e2e/blocksuite/edgeless/frame.spec.ts

diff --git a/blocksuite/framework/block-std/src/gfx/layer.ts b/blocksuite/framework/block-std/src/gfx/layer.ts
index f280476c5c..85f1fb4073 100644
--- a/blocksuite/framework/block-std/src/gfx/layer.ts
+++ b/blocksuite/framework/block-std/src/gfx/layer.ts
@@ -514,7 +514,8 @@ export class LayerManager {
     const isLocalElem = element instanceof GfxLocalElementModel;
 
     const indexChanged = !props || 'index' in props;
-    const childIdsChanged = props && 'childIds' in props;
+    const childIdsChanged =
+      props && ('childIds' in props || 'childElementIds' in props);
     const shouldUpdateGroupChildren =
       isGfxGroupCompatibleModel(element) && (indexChanged || childIdsChanged);
     const updateArray = (array: GfxModel[], element: GfxModel) => {
@@ -798,7 +799,7 @@ export class LayerManager {
 
             if (
               (payload.props.key === 'index' ||
-                payload.props.key === 'childIds') &&
+                payload.props.key === 'childElementIds') &&
               block instanceof GfxBlockElementModel &&
               (block.parent instanceof SurfaceBlockModel ||
                 block.parent?.role === 'root')
diff --git a/tests/affine-local/e2e/blocksuite/edgeless/frame.spec.ts b/tests/affine-local/e2e/blocksuite/edgeless/frame.spec.ts
new file mode 100644
index 0000000000..93189c53f4
--- /dev/null
+++ b/tests/affine-local/e2e/blocksuite/edgeless/frame.spec.ts
@@ -0,0 +1,64 @@
+import { test } from '@affine-test/kit/playwright';
+import {
+  clickEdgelessModeButton,
+  clickView,
+  createEdgelessNoteBlock,
+  dragView,
+  locateEditorContainer,
+  locateElementToolbar,
+  toViewCoord,
+} from '@affine-test/kit/utils/editor';
+import {
+  pressBackspace,
+  pressEscape,
+  selectAllByKeyboard,
+} from '@affine-test/kit/utils/keyboard';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import {
+  clickNewPageButton,
+  waitForEditorLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await openHomePage(page);
+  await waitForEditorLoad(page);
+  await clickNewPageButton(page);
+  await clickEdgelessModeButton(page);
+  const container = locateEditorContainer(page);
+  await container.click();
+  await selectAllByKeyboard(page);
+  await pressBackspace(page);
+});
+
+test('should update zindex of element when moving it into frame', async ({
+  page,
+}) => {
+  const toolbar = locateElementToolbar(page);
+
+  // create a top frame
+  await page.keyboard.press('f');
+  await dragView(page, [0, 0], [300, 300]);
+  await toolbar.getByLabel('Background').click();
+  await toolbar.getByLabel('LightRed').click();
+  await pressEscape(page);
+
+  // create a note
+  await createEdgelessNoteBlock(page, [400, 400]);
+  await clickView(page, [0, 0]);
+  await clickView(page, [400, 400]);
+  await toolbar.getByLabel('More').click();
+  await toolbar.getByLabel('Send to Back').click();
+  await pressEscape(page);
+
+  await dragView(page, [400, 400], [100, 100]);
+
+  const point = await toViewCoord(page, [100, 100]);
+
+  const isNoteAboveFrame = await page.evaluate(point => {
+    return !!document
+      .elementFromPoint(point[0], point[1])
+      ?.closest('affine-edgeless-note');
+  }, point);
+  expect(isNoteAboveFrame).toBe(true);
+});