fix(edgeless): new inner frame should be inside parent frame (#8985)

Close [BS-2108](https://linear.app/affine-design/issue/BS-2108/选中yuan素创建frame去掉最小尺寸限制，选中创建嵌套frame优化) This PR fixed the bound of new inner frame is not inside in parent frame. ### Before https://github.com/user-attachments/assets/ffaa5cbb-98b9-4d2c-bc7b-af5c0f2132aa ### After https://github.com/user-attachments/assets/470d8e3c-4e71-451c-8111-a2ea1b750ea9
toeverything · Dec 16, 2024 · c3d9c23 · c3d9c23
1 parent 861bc0e
commit c3d9c23
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 14 deletions.
diff --git a/packages/blocks/src/root-block/edgeless/frame-manager.ts b/packages/blocks/src/root-block/edgeless/frame-manager.ts
@@ -28,8 +28,6 @@ import { GfxBlockModel } from './block-model.js';
 import { areSetsEqual } from './utils/misc.js';
 import { isFrameBlock } from './utils/query.js';
 
-const MIN_FRAME_WIDTH = 800;
-const MIN_FRAME_HEIGHT = 640;
 const FRAME_PADDING = 40;
 
 export class FrameOverlay extends Overlay {
@@ -317,15 +315,28 @@ export class EdgelessFrameManager extends GfxExtension {
   }
 
   createFrameOnElements(elements: GfxModel[]) {
-    let bound = this.gfx.selection.selectedBound;
-    bound = bound.expand(FRAME_PADDING);
-    if (bound.w < MIN_FRAME_WIDTH) {
-      const offset = (MIN_FRAME_WIDTH - bound.w) / 2;
-      bound = bound.expand(offset, 0);
+    // make sure all elements are in the same level
+    for (const element of elements) {
+      if (element.group !== elements[0].group) return;
     }
-    if (bound.h < MIN_FRAME_HEIGHT) {
-      const offset = (MIN_FRAME_HEIGHT - bound.h) / 2;
-      bound = bound.expand(0, offset);
+
+    const parentFrameBound = this.getParentFrame(elements[0])?.elementBound;
+
+    let bound = this.gfx.selection.selectedBound;
+
+    if (parentFrameBound?.contains(bound)) {
+      bound.x -= Math.min(0.5 * (bound.x - parentFrameBound.x), FRAME_PADDING);
+      bound.y -= Math.min(0.5 * (bound.y - parentFrameBound.y), FRAME_PADDING);
+      bound.w += Math.min(
+        0.5 * (parentFrameBound.x + parentFrameBound.w - bound.x - bound.w),
+        FRAME_PADDING
+      );
+      bound.h += Math.min(
+        0.5 * (parentFrameBound.y + parentFrameBound.h - bound.y - bound.h),
+        FRAME_PADDING
+      );
+    } else {
+      bound = bound.expand(FRAME_PADDING);
     }
 
     const frameModel = this._addFrameBlock(bound);

diff --git a/tests/edgeless/frame/frame.spec.ts b/tests/edgeless/frame/frame.spec.ts
@@ -2,6 +2,7 @@ import {
   DEFAULT_NOTE_HEIGHT,
   DEFAULT_NOTE_WIDTH,
 } from '@blocksuite/affine-model';
+import { Bound } from '@blocksuite/global/utils';
 import { expect, type Page } from '@playwright/test';
 
 import { clickView } from '../../utils/actions/click.js';
@@ -14,6 +15,7 @@ import {
   edgelessCommonSetup,
   getFirstContainerId,
   getIds,
+  getSelectedBound,
   getSelectedIds,
   pickColorAtPoints,
   setEdgelessTool,
@@ -52,7 +54,7 @@ test.beforeEach(async ({ page }) => {
   await zoomResetByKeyboard(page);
 });
 
-test.describe('add a frame then drag to move', () => {
+test.describe('add a frame', () => {
   const createThreeShapesAndSelectTowShape = async (page: Page) => {
     await createShapeElement(page, [0, 0], [100, 100], Shape.Square);
     await createShapeElement(page, [100, 0], [200, 100], Shape.Square);
@@ -67,7 +69,7 @@ test.describe('add a frame then drag to move', () => {
     await page.keyboard.press('f');
 
     await expect(page.locator('affine-frame')).toHaveCount(1);
-    await assertSelectedBound(page, [-300, -270, 800, 640]);
+    await assertSelectedBound(page, [-40, -40, 280, 180]);
 
     const frameId = await getFirstContainerId(page);
     await assertContainerChildCount(page, frameId, 2);
@@ -78,7 +80,7 @@ test.describe('add a frame then drag to move', () => {
     await triggerComponentToolbarAction(page, 'addFrame');
 
     await expect(page.locator('affine-frame')).toHaveCount(1);
-    await assertSelectedBound(page, [-300, -270, 800, 640]);
+    await assertSelectedBound(page, [-40, -40, 280, 180]);
 
     const frameId = await getFirstContainerId(page);
     await assertContainerChildCount(page, frameId, 2);
@@ -91,7 +93,7 @@ test.describe('add a frame then drag to move', () => {
     await triggerComponentToolbarAction(page, 'createFrameOnMoreOption');
 
     await expect(page.locator('affine-frame')).toHaveCount(1);
-    await assertSelectedBound(page, [-300, -270, 800, 640]);
+    await assertSelectedBound(page, [-40, -40, 280, 180]);
 
     const frameId = await getFirstContainerId(page);
     await assertContainerChildCount(page, frameId, 2);
@@ -125,6 +127,19 @@ test.describe('add a frame then drag to move', () => {
     const frameId = await getFirstContainerId(page);
     await assertContainerChildCount(page, frameId, 2);
   });
+
+  test('add inner frame', async ({ page }) => {
+    await createFrame(page, [50, 50], [450, 450]);
+    await createShapeElement(page, [200, 200], [300, 300], Shape.Square);
+    await pressEscape(page);
+
+    await shiftClickView(page, [250, 250]);
+    await page.keyboard.press('f');
+    const innerFrameBound = await getSelectedBound(page);
+    expect(
+      new Bound(50, 50, 400, 400).contains(Bound.fromXYWH(innerFrameBound))
+    ).toBeTruthy();
+  });
 });
 
 test.describe('add element to frame and then move frame', () => {