Skip to content

Commit bcc892c

Browse files
authored
fix(editor): one-time size mismatch during surface-block resize after zoom change in edgeless mode (#14019)
### Problem There's a one-time content-size mismatch during surface-block resize after a zoom change in edgeless mode, as shown in the image and video below. <img width="885" height="359" alt="图片" src="https://github.com/user-attachments/assets/97a85924-1ca1-4b48-b334-6f19c7c41f49" /> https://github.com/user-attachments/assets/1c0e854c-b12e-4edc-9266-6358e0cf9d5a ### Reason and resolve `Viewport` maintains a `_cachedBoundingClientRect` that stores the synced-doc-block’s bounding box size. This cache is cleared by a ResizeObserver on resizing. In `EmbedSyncedDocBlockComponent`, `fitToContent()` depends on this cache, and is triggered by another ResizeObserver registered in `_initEdgelessFitEffect()`. Since `_initEdgelessFitEffect()` is invoked before the `Viewport`’s ResizeObserver is registered — dut to `_renderSyncedView()` not being called for the first-time in `renderBlock()` — `fitToContent()` reads a stale cached value at the beginning of the resize, resulting in the one-time content-size mismatch. This PR ensures that `_initEdgelessFitEffect()` is called after the registration of the ResizeObserver in `Viewport`. ### After https://github.com/user-attachments/assets/e95815e2-0575-4108-a366-ea5c00efe482 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved initialization sequence for embedded synced documents to ensure proper rendering and resize handling, preventing potential issues with stale data during component setup. <sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
1 parent 88a2e4a commit bcc892c

File tree

1 file changed

+12
-2
lines changed

1 file changed

+12
-2
lines changed

blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/embed-synced-doc-block.ts

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,9 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
5656
// Caches total bounds, includes all blocks and elements.
5757
private _cachedBounds: Bound | null = null;
5858

59+
private _hasRenderedSyncedView = false;
60+
private _hasInitedFitEffect = false;
61+
5962
private readonly _initEdgelessFitEffect = () => {
6063
const fitToContent = () => {
6164
if (this.isPageMode) return;
@@ -558,8 +561,6 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
558561
this._selectBlock();
559562
}
560563
});
561-
562-
this._initEdgelessFitEffect();
563564
}
564565

565566
override renderBlock() {
@@ -587,12 +588,21 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
587588
);
588589
}
589590

591+
!this._hasRenderedSyncedView && (this._hasRenderedSyncedView = true);
592+
590593
return this._renderSyncedView();
591594
}
592595

593596
override updated(changedProperties: PropertyValues) {
594597
super.updated(changedProperties);
595598
this.syncedDocCard?.requestUpdate();
599+
600+
if (!this._hasInitedFitEffect && this._hasRenderedSyncedView) {
601+
/* Register the resizeObserver AFTER syncdView viewport's own resizeObserver
602+
* so that viewport.onResize() use up-to-date boundingClientRect values */
603+
this._hasInitedFitEffect = true;
604+
this._initEdgelessFitEffect();
605+
}
596606
}
597607

598608
@state()

0 commit comments

Comments
 (0)