mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-04 00:28:33 +00:00
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:
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user