fix(edgeless): redo for reordering (toeverything#6315)

donteatfriedrice · Feb 28, 2024 · 1ad903f · 1ad903f
1 parent 8ebbb44
commit 1ad903f
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 7 deletions.
diff --git a/packages/blocks/src/root-block/edgeless/controllers/tools/shape-tool.ts b/packages/blocks/src/root-block/edgeless/controllers/tools/shape-tool.ts
@@ -131,9 +131,7 @@ export class ShapeToolController extends EdgelessToolController<ShapeTool> {
     if (this._draggingElement) {
       const draggingElement = this._draggingElement;
 
-      this._doc.transact(() => {
-        draggingElement.pop('xywh');
-      });
+      draggingElement.pop('xywh');
     }
 
     const id = this._draggingElementId;

diff --git a/packages/blocks/src/root-block/edgeless/edgeless-root-service.ts b/packages/blocks/src/root-block/edgeless/edgeless-root-service.ts
@@ -33,10 +33,10 @@ import {
 } from './services/template-middlewares.js';
 import type { EdgelessToolConstructor } from './services/tools-manager.js';
 import { EdgelessToolsManager } from './services/tools-manager.js';
-import type {
+import {
   EdgelessBlockModel,
-  EdgelessModel,
-  HitTestOptions,
+  type EdgelessModel,
+  type HitTestOptions,
 } from './type.js';
 import { FIT_TO_SCREEN_PADDING } from './utils/consts.js';
 import { getCursorMode } from './utils/query.js';
@@ -422,7 +422,14 @@ export class EdgelessRootService extends RootService {
   reorderElement(element: EdgelessModel, direction: ReorderingDirection) {
     const index = this._layer.getReorderedIndex(element, direction);
 
-    element.index = index;
+    // block should be updated in transaction
+    if (element instanceof EdgelessBlockModel) {
+      this.doc.transact(() => {
+        element.index = index;
+      });
+    } else {
+      element.index = index;
+    }
   }
 
   createGroup(elements: EdgelessModel[] | string[]) {

diff --git a/tests/edgeless/reordering.spec.ts b/tests/edgeless/reordering.spec.ts
@@ -15,9 +15,12 @@ import {
   zoomResetByKeyboard,
 } from '../utils/actions/edgeless.js';
 import {
+  captureHistory,
   clickView,
   enterPlaygroundRoom,
   initEmptyEdgelessState,
+  redoByKeyboard,
+  undoByKeyboard,
   waitNextFrame,
 } from '../utils/actions/index.js';
 import {
@@ -185,6 +188,44 @@ test.describe('reordering', () => {
       await page.mouse.click(180, 180);
       await assertEdgelessSelectedRect(page, [100, 100, 100, 100]);
     });
+
+    test('undo and redo', async ({ page }) => {
+      await init(page);
+
+      // should be rect2
+      await page.mouse.click(180, 180);
+      await assertEdgelessSelectedRect(page, [160, 160, 100, 100]);
+
+      // send rect2 to back
+      await triggerComponentToolbarAction(page, 'sendToBack');
+
+      // click outside to clear selection
+      await page.mouse.click(50, 50);
+
+      // should be rect1
+      await page.mouse.click(180, 180);
+      await assertEdgelessSelectedRect(page, [130, 130, 100, 100]);
+
+      // undo
+      await undoByKeyboard(page);
+
+      // clear selection
+      await page.mouse.click(50, 50);
+
+      // should be rect2
+      await page.mouse.click(180, 180);
+      await assertEdgelessSelectedRect(page, [160, 160, 100, 100]);
+
+      // redo
+      await redoByKeyboard(page);
+
+      // clear selection
+      await page.mouse.click(50, 50);
+
+      // should be rect2
+      await page.mouse.click(180, 180);
+      await assertEdgelessSelectedRect(page, [130, 130, 100, 100]);
+    });
   });
 
   test.describe('reordering notes', () => {
@@ -300,5 +341,44 @@ test.describe('reordering', () => {
       await page.mouse.click(180, 140);
       await assertEdgelessSelectedRect(page, [100, 100, 448, 91]);
     });
+
+    test('undo and redo', async ({ page }) => {
+      await init(page);
+
+      // click outside to clear selection
+      await page.mouse.click(50, 50);
+
+      // should be note2
+      await page.mouse.click(180, 140);
+      await assertEdgelessSelectedRect(page, [160, 100, 448, 91]);
+
+      await captureHistory(page);
+
+      // bring note2 to back
+      await triggerComponentToolbarAction(page, 'sendToBack');
+
+      // click outside to clear selection
+      await page.mouse.click(50, 50);
+
+      // should be note1
+      await page.mouse.click(180, 140);
+      await assertEdgelessSelectedRect(page, [130, 100, 448, 91]);
+
+      // undo
+      await undoByKeyboard(page);
+      // clear selection
+      await page.mouse.click(50, 50);
+      // should be note2
+      await page.mouse.click(180, 140);
+      await assertEdgelessSelectedRect(page, [160, 100, 448, 91]);
+
+      // redo
+      await redoByKeyboard(page);
+      // clear selection
+      await page.mouse.click(50, 50);
+      // should be note1
+      await page.mouse.click(180, 140);
+      await assertEdgelessSelectedRect(page, [130, 100, 448, 91]);
+    });
   });
 });