fix(edgeless): frame overlay is not updated during dragging a new fra…

…me (#8771)
toeverything · Nov 20, 2024 · fa4ca11 · fa4ca11
1 parent 3114283
commit fa4ca11
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/packages/blocks/src/root-block/edgeless/frame-manager.ts b/packages/blocks/src/root-block/edgeless/frame-manager.ts
@@ -17,6 +17,7 @@ import {
   deserializeXYWH,
   DisposableGroup,
   type IVec,
+  type SerializedXYWH,
 } from '@blocksuite/global/utils';
 import { DocCollection, Text } from '@blocksuite/store';
 
@@ -39,6 +40,8 @@ export class FrameOverlay extends Overlay {
 
   private _innerElements = new Set<GfxModel>();
 
+  private _prevXYWH: SerializedXYWH | null = null;
+
   private get _frameManager() {
     return this.gfx.std.get(
       GfxExtensionIdentifier('frame-manager')
@@ -72,7 +75,7 @@ export class FrameOverlay extends Overlay {
 
     let needRefresh = false;
 
-    if (highlightOutline && this._frame !== frame) {
+    if (highlightOutline && this._prevXYWH !== frame.xywh) {
       needRefresh = true;
     }
 

diff --git a/tests/edgeless/frame/frame.spec.ts b/tests/edgeless/frame/frame.spec.ts
@@ -14,6 +14,7 @@ import {
   edgelessCommonSetup,
   getFirstContainerId,
   getSelectedIds,
+  pickColorAtPoints,
   setEdgelessTool,
   Shape,
   shiftClickView,
@@ -362,3 +363,20 @@ test('delete frame', async ({ page }) => {
 
   await assertCanvasElementsCount(page, 0);
 });
+
+test('outline should keep updated during a new frame created by frame-tool dragging', async ({
+  page,
+}) => {
+  await page.keyboard.press('f');
+
+  const start = await toViewCoord(page, [0, 0]);
+  const end = await toViewCoord(page, [100, 100]);
+  await page.mouse.move(start[0], start[1]);
+  await page.mouse.down();
+  await page.mouse.move(end[0], end[1], { steps: 10 });
+  await page.waitForTimeout(50);
+
+  expect(
+    await pickColorAtPoints(page, [start, [end[0] - 1, end[1] - 1]])
+  ).toEqual(['#1e96eb', '#1e96eb']);
+});