diff --git a/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/configs/edgeless-interaction.ts b/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/configs/edgeless-interaction.ts index a4ed7a7649..01d48ef8cf 100644 --- a/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/configs/edgeless-interaction.ts +++ b/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/configs/edgeless-interaction.ts @@ -52,23 +52,25 @@ export const EmbedSyncedDocInteraction = scale = newBound.w / realWidth; } - const newWidth = newBound.w / scale; - newBound.w = - clamp(newWidth, constraint.minWidth, constraint.maxWidth) * scale; + clamp( + newBound.w / scale, + constraint.minWidth, + constraint.maxWidth + ) * scale; newBound.h = - clamp(newBound.h, constraint.minHeight, constraint.maxHeight) * - scale; + clamp( + newBound.h / scale, + constraint.minHeight, + constraint.maxHeight + ) * scale; const newHeight = newBound.h / scale; - // only adjust height check the fold state - if (originalBound.w === newBound.w) { - let preFoldHeight = 0; - if (newHeight === constraint.minHeight) { - preFoldHeight = initHeight; - } - model.props.preFoldHeight = preFoldHeight; + if (model.isFolded && newHeight > constraint.minHeight) { + model.props.preFoldHeight = 0; + } else if (!model.isFolded && newHeight <= constraint.minHeight) { + model.props.preFoldHeight = initHeight; } model.props.scale = scale; diff --git a/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/utils.ts b/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/utils.ts index 2e032decaa..8d3651c5f5 100644 --- a/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/utils.ts +++ b/blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/utils.ts @@ -76,6 +76,8 @@ export function calcSyncedDocFullHeight(block: BlockComponent) { const bottomPadding = 8; return ( - (headerHeight + contentHeight + bottomPadding) / block.gfx.viewport.zoom + (headerHeight + contentHeight + bottomPadding) / + block.gfx.viewport.zoom / + (block.model.props.scale ?? 1) ); } diff --git a/blocksuite/affine/model/src/blocks/embed/synced-doc/synced-doc-model.ts b/blocksuite/affine/model/src/blocks/embed/synced-doc/synced-doc-model.ts index afff4505ce..0f248bbf55 100644 --- a/blocksuite/affine/model/src/blocks/embed/synced-doc/synced-doc-model.ts +++ b/blocksuite/affine/model/src/blocks/embed/synced-doc/synced-doc-model.ts @@ -11,6 +11,10 @@ export type EmbedSyncedDocBlockProps = { style: EmbedCardStyle; caption?: string | null; scale?: number; + /** + * Record the scaled height of the synced doc block when it is folded, + * a.k.a the fourth number of the `xywh` + */ preFoldHeight?: number; } & ReferenceInfo & GfxCompatibleProps; diff --git a/packages/frontend/core/src/blocksuite/view-extensions/edgeless-block-header/edgeless-embed-synced-doc-header.tsx b/packages/frontend/core/src/blocksuite/view-extensions/edgeless-block-header/edgeless-embed-synced-doc-header.tsx index cdb9e7fe3c..2176b2b433 100644 --- a/packages/frontend/core/src/blocksuite/view-extensions/edgeless-block-header/edgeless-embed-synced-doc-header.tsx +++ b/packages/frontend/core/src/blocksuite/view-extensions/edgeless-block-header/edgeless-embed-synced-doc-header.tsx @@ -43,7 +43,7 @@ const ToggleButton = ({ model }: { model: EmbedSyncedDocModel }) => { model.props.preFoldHeight$.value = 0; } else { model.props.preFoldHeight$.value = h; - model.props.xywh$.value = `[${x},${y},${w},${styles.headerHeight}]`; + model.props.xywh$.value = `[${x},${y},${w},${styles.headerHeight * (model.props.scale ?? 1)}]`; } }); }, [model]); diff --git a/tests/affine-local/e2e/blocksuite/embed/synced.spec.ts b/tests/affine-local/e2e/blocksuite/embed/synced.spec.ts index 2efa297271..77a682d368 100644 --- a/tests/affine-local/e2e/blocksuite/embed/synced.spec.ts +++ b/tests/affine-local/e2e/blocksuite/embed/synced.spec.ts @@ -7,6 +7,7 @@ import { getSelectedXYWH, locateEditorContainer, resizeElementByHandle, + scaleElementByHandle, } from '@affine-test/kit/utils/editor'; import { pressEnter } from '@affine-test/kit/utils/keyboard'; import { openHomePage } from '@affine-test/kit/utils/load-page'; @@ -105,6 +106,10 @@ test.describe('edgeless', () => { }); test.describe('size adjustment of embed synced doc', () => { + test.beforeEach(async ({ page }) => { + await scaleElementByHandle(page, [10, 10], 'bottom-right'); + }); + test('should fold embed synced doc when adjust height to smallest', async ({ page, }) => { diff --git a/tests/kit/src/utils/editor.ts b/tests/kit/src/utils/editor.ts index 78296855a0..dcabf2b4f4 100644 --- a/tests/kit/src/utils/editor.ts +++ b/tests/kit/src/utils/editor.ts @@ -476,6 +476,25 @@ export async function resizeElementByHandle( await dragView(page, from, to, editorIndex); } +export async function scaleElementByHandle( + page: Page, + delta: IVec, + corner: + | 'right' + | 'left' + | 'top' + | 'bottom' + | 'top-left' + | 'top-right' + | 'bottom-right' + | 'bottom-left' = 'top-left', + editorIndex = 0 +) { + await page.keyboard.down('Shift'); + await resizeElementByHandle(page, delta, corner, editorIndex); + await page.keyboard.up('Shift'); +} + /** * Create a not block in canvas * @param position the position or xwyh of the note block in canvas