diff --git a/packages/frontend/core/src/modules/peek-view/entities/peek-view.ts b/packages/frontend/core/src/modules/peek-view/entities/peek-view.ts index bc2537b95e348..763041e4860c1 100644 --- a/packages/frontend/core/src/modules/peek-view/entities/peek-view.ts +++ b/packages/frontend/core/src/modules/peek-view/entities/peek-view.ts @@ -220,10 +220,10 @@ export type PeekViewMode = 'full' | 'fit' | 'max'; export class PeekViewEntity extends Entity { private readonly _active$ = new LiveData(null); private readonly _show$ = new LiveData<{ - animation: PeekViewAnimation; + animation: boolean; value: boolean; }>({ - animation: 'zoom', + animation: true, value: false, }); @@ -258,7 +258,7 @@ export class PeekViewEntity extends Entity { this._active$.next({ target, info: resolvedInfo }); this._show$.next({ value: true, - animation: target.element ? 'zoom' : 'fade', + animation: true, }); if (abortSignal) { @@ -281,10 +281,10 @@ export class PeekViewEntity extends Entity { return firstValueFrom(race(this._active$, this.show$).pipe(map(() => {}))); }; - close = (animation?: PeekViewAnimation) => { + close = (animation = true) => { this._show$.next({ value: false, - animation: animation ?? this._show$.value.animation, + animation, }); }; } diff --git a/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx b/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx index 00cd7db8df611..22e6d7a1bf126 100644 --- a/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx +++ b/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx @@ -117,6 +117,24 @@ export const PeekViewModalContainer = forwardRef< contentWrapper?: AnimeParams; } ) => { + // if target has no bounding client rect, + // find its parent that has bounding client rect + let iteration = 0; + while ( + target && + !target.getBoundingClientRect().width && + iteration < 10 + ) { + // eslint-disable-next-line react-hooks/exhaustive-deps + target = target.parentElement || undefined; + iteration++; + } + + if (!target) { + // fallback to fade animation + return animateFade(!!zoomIn); + } + return new Promise(resolve => { const contentClip = contentClipRef.current; const content = contentRef.current; @@ -130,23 +148,6 @@ export const PeekViewModalContainer = forwardRef< const targets = contentClip; const lockSizeEl = content; - // if target has no bounding client rect, find its parent that has bounding client rect - let iteration = 0; - while ( - target && - !target.getBoundingClientRect().width && - iteration < 10 - ) { - // eslint-disable-next-line react-hooks/exhaustive-deps - target = target.parentElement || undefined; - iteration++; - } - - if (!target) { - resolve(); - return; - } - const from = zoomIn ? target : contentClip; const to = zoomIn ? contentClip : target; diff --git a/packages/frontend/core/src/modules/peek-view/view/peek-view-controls.tsx b/packages/frontend/core/src/modules/peek-view/view/peek-view-controls.tsx index 5bf02a34d4e5a..9e1c7025ca6da 100644 --- a/packages/frontend/core/src/modules/peek-view/view/peek-view-controls.tsx +++ b/packages/frontend/core/src/modules/peek-view/view/peek-view-controls.tsx @@ -113,7 +113,7 @@ export const DocPeekViewControls = ({ nameKey: 'open', onClick: () => { workbench.openDoc(docRef); - peekView.close('none'); + peekView.close(false); }, }, { @@ -122,7 +122,7 @@ export const DocPeekViewControls = ({ name: t['com.affine.peek-view-controls.open-doc-in-new-tab'](), onClick: () => { workbench.openDoc(docRef, { at: 'new-tab' }); - peekView.close('none'); + peekView.close(false); }, }, BUILD_CONFIG.isElectron && { @@ -131,7 +131,7 @@ export const DocPeekViewControls = ({ name: t['com.affine.peek-view-controls.open-doc-in-split-view'](), onClick: () => { workbench.openDoc(docRef, { at: 'beside' }); - peekView.close('none'); + peekView.close(false); }, }, { @@ -178,7 +178,7 @@ export const AttachmentPeekViewControls = ({ if (docId && blockId) { workbench.openAttachment(docId, blockId); } - peekView.close('none'); + peekView.close(false); }, }, { @@ -190,7 +190,7 @@ export const AttachmentPeekViewControls = ({ if (docId && blockId) { workbench.openAttachment(docId, blockId, { at: 'new-tab' }); } - peekView.close('none'); + peekView.close(false); }, }, BUILD_CONFIG.isElectron && { @@ -204,7 +204,7 @@ export const AttachmentPeekViewControls = ({ if (docId && blockId) { workbench.openAttachment(docId, blockId, { at: 'beside' }); } - peekView.close('none'); + peekView.close(false); }, }, ].filter((opt): opt is ControlButtonProps => Boolean(opt)); diff --git a/packages/frontend/core/src/modules/peek-view/view/peek-view-manager.tsx b/packages/frontend/core/src/modules/peek-view/view/peek-view-manager.tsx index ea039b04fabc5..ff59943c95f0e 100644 --- a/packages/frontend/core/src/modules/peek-view/view/peek-view-manager.tsx +++ b/packages/frontend/core/src/modules/peek-view/view/peek-view-manager.tsx @@ -93,6 +93,10 @@ const getRendererProps = ( ? activePeekView.target.element : undefined, mode: getMode(activePeekView.info), + animation: + activePeekView.target.element && getMode(activePeekView.info) !== 'full' + ? 'zoom' + : 'fade', dialogFrame: activePeekView.info.type !== 'image', }; }; @@ -124,8 +128,8 @@ export const PeekViewManagerModal = () => { return ( { if (!open) { peekViewEntity.close();