fix(core): peek view animation (#8858)

toeverything · Nov 18, 2024 · e200e0a · e200e0a
1 parent 56a3f05
commit e200e0a
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 29 deletions.
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
@@ -220,10 +220,10 @@ export type PeekViewMode = 'full' | 'fit' | 'max';
 export class PeekViewEntity extends Entity {
   private readonly _active$ = new LiveData<ActivePeekView | null>(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
@@ -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<void>(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
@@ -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
@@ -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 (
     <PeekViewModalContainer
       {...renderProps}
+      animation={show?.animation ? renderProps?.animation : 'none'}
       open={!!show?.value && !!renderProps}
-      animation={show?.animation || 'none'}
       onOpenChange={open => {
         if (!open) {
           peekViewEntity.close();