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)

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')

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);
+});