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 -->
This commit is contained in:
congzhou09
2025-11-27 23:29:19 +08:00
committed by GitHub
parent 88a2e4aa4b
commit bcc892c8ec

View File

@@ -56,6 +56,9 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
// Caches total bounds, includes all blocks and elements.
private _cachedBounds: Bound | null = null;
private _hasRenderedSyncedView = false;
private _hasInitedFitEffect = false;
private readonly _initEdgelessFitEffect = () => {
const fitToContent = () => {
if (this.isPageMode) return;
@@ -558,8 +561,6 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
this._selectBlock();
}
});
this._initEdgelessFitEffect();
}
override renderBlock() {
@@ -587,12 +588,21 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
);
}
!this._hasRenderedSyncedView && (this._hasRenderedSyncedView = true);
return this._renderSyncedView();
}
override updated(changedProperties: PropertyValues) {
super.updated(changedProperties);
this.syncedDocCard?.requestUpdate();
if (!this._hasInitedFitEffect && this._hasRenderedSyncedView) {
/* Register the resizeObserver AFTER syncdView viewport's own resizeObserver
* so that viewport.onResize() use up-to-date boundingClientRect values */
this._hasInitedFitEffect = true;
this._initEdgelessFitEffect();
}
}
@state()