fix(edgeless): sort in layer manager init method (#5696)

packages/blocks/src/surface-block/managers/layer-manager.ts

@@ -114,9 +114,9 @@ export class LayerManager {
       }
     });
 
-    this.canvasElements.sort();
-    this.frames.sort();
-    this.blocks.sort();
+    this.canvasElements.sort(compare);
+    this.frames.sort(compare);
+    this.blocks.sort(compare);
 
     this._initLayers();
     this._buildCanvasLayers();

packages/presets/tests/edgeless/layer.spec.ts

@@ -1,9 +1,15 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import type { BlockElement } from '@blocksuite/lit';
 import { beforeEach, describe, expect, test } from 'vitest';
 
 import { wait } from '../utils/common.js';
-import { addElement, addNote, getSurface } from '../utils/edgeless.js';
+import {
+  addElement,
+  addNote,
+  getPageRootBlock,
+  getSurface,
+} from '../utils/edgeless.js';
 import { setupEditor } from '../utils/setup.js';
 
 beforeEach(async () => {
@@ -438,3 +444,58 @@ test('indexed canvas should be inserted into edgeless portal when switch to edge
   expect(indexedCanvas.width).not.toBe(0);
   expect(indexedCanvas.height).not.toBe(0);
 });
+
+test('the actual rendering order of blocks should satisfy the logic order of their indexes', async () => {
+  editor.mode = 'page';
+
+  await wait();
+
+  const indexes = [
+    'ao',
+    'b0D',
+    'ar',
+    'as',
+    'at',
+    'au',
+    'av',
+    'b0Y',
+    'b0V',
+    'b0H',
+    'b0M',
+    'b0T',
+    'b0f',
+    'b0fV',
+    'b0g',
+    'b0i',
+    'b0fl',
+  ];
+
+  indexes.forEach(index => {
+    addNote(page, {
+      index,
+    });
+  });
+
+  await wait();
+
+  editor.mode = 'edgeless';
+  await wait();
+
+  const surface = getSurface(page, editor);
+  const edgeless = getPageRootBlock(page, editor, 'edgeless');
+  const blocks = Array.from(
+    edgeless.pageBlockContainer.layer.querySelectorAll('[data-portal-block-id]')
+  ) as BlockElement[];
+
+  expect(blocks.length).toBe(indexes.length);
+  blocks.forEach((block, index) => {
+    if (index === blocks.length - 1) return;
+
+    const prevModel = block.model;
+    const model = blocks[index + 1].model;
+
+    expect(surface.compare(prevModel as any, model as any)).toBeLessThanOrEqual(
+      0
+    );
+  });
+});

packages/presets/tests/utils/edgeless.ts

@@ -1,5 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { SurfaceBlockComponent } from '@blocksuite/blocks';
+import type {
+  DocPageBlockComponent,
+  EdgelessPageBlockComponent,
+  SurfaceBlockComponent,
+} from '@blocksuite/blocks';
 import type { Page } from '@blocksuite/store';
 
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
@@ -14,6 +18,26 @@ export function getSurface(page: Page, editor: AffineEditorContainer) {
   ]) as SurfaceBlockComponent;
 }
 
+export function getPageRootBlock(
+  page: Page,
+  editor: AffineEditorContainer,
+  mode: 'page'
+): DocPageBlockComponent;
+export function getPageRootBlock(
+  page: Page,
+  editor: AffineEditorContainer,
+  mode: 'edgeless'
+): EdgelessPageBlockComponent;
+export function getPageRootBlock(
+  page: Page,
+  editor: AffineEditorContainer,
+  _?: 'edgeless' | 'page'
+) {
+  return editor.root!.view.viewFromPath('block', [page.root!.id]) as
+    | EdgelessPageBlockComponent
+    | DocPageBlockComponent;
+}
+
 const defaultProps = {
   shape: {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any