From 15e2bf3304b8467cb85e6d1e288ba14d60e35ed9 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Wed, 9 Oct 2024 17:33:27 +0800
Subject: [PATCH] BottomSheet: improve hero animation

---
 src/material/BottomSheet.tsx   | 8 ++++++--
 src/material/Img.tsx           | 2 +-
 src/platform/anim.ts           | 6 +++---
 src/timelines/Home.tsx         | 3 +--
 src/timelines/TootComposer.tsx | 1 -
 5 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/material/BottomSheet.tsx b/src/material/BottomSheet.tsx
index 89440e2..92eabc9 100644
--- a/src/material/BottomSheet.tsx
+++ b/src/material/BottomSheet.tsx
@@ -62,12 +62,14 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   });
 
   const onClose = () => {
+    hero()!.style.visibility = 'unset'
     element.close();
     setHero();
   };
 
   const animatedClose = () => {
-    const endRect = hero();
+    const srcElement = hero()
+    const endRect = srcElement?.getBoundingClientRect();
     if (endRect) {
       const startRect = element.getBoundingClientRect();
       const animation = animateHero(startRect, endRect, element, true);
@@ -81,8 +83,10 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
 
   const animatedOpen = () => {
     element.showModal();
-    const startRect = hero();
+    const srcElement = hero()
+    const startRect = srcElement?.getBoundingClientRect();
     if (!startRect) return;
+    srcElement!.style.visibility = 'hidden'
     const endRect = element.getBoundingClientRect();
     animateHero(startRect, endRect, element);
   };
diff --git a/src/material/Img.tsx b/src/material/Img.tsx
index f85b6d3..774460c 100644
--- a/src/material/Img.tsx
+++ b/src/material/Img.tsx
@@ -44,7 +44,7 @@ const Img: Component<ImgProps> = (props) => {
         object-position: center;
         width: 100%;
         height: 100%;
-        visibility: ${isBlurEnabled() ? "hidden" : "visible"};
+        visibility: ${isBlurEnabled() ? "hidden" : "initial"};
       }
     }
 
diff --git a/src/platform/anim.ts b/src/platform/anim.ts
index 7b87333..3108448 100644
--- a/src/platform/anim.ts
+++ b/src/platform/anim.ts
@@ -9,7 +9,7 @@ import {
 } from "solid-js";
 
 export type HeroSource = {
-  [key: string | symbol | number]: DOMRect | undefined;
+  [key: string | symbol | number]: HTMLElement | undefined;
 };
 
 const HeroSourceContext = createContext<Signal<HeroSource>>(
@@ -27,10 +27,10 @@ function useHeroSource() {
  */
 export function useHeroSignal(
   key: string | symbol | number,
-): Signal<DOMRect | undefined> {
+): Signal<HTMLElement | undefined> {
   const source = useHeroSource();
   if (source) {
-    const [get, set] = createSignal<DOMRect>();
+    const [get, set] = createSignal<HTMLElement>();
 
     createRenderEffect(() => {
       const value = source[0]();
diff --git a/src/timelines/Home.tsx b/src/timelines/Home.tsx
index 5c74795..8321872 100644
--- a/src/timelines/Home.tsx
+++ b/src/timelines/Home.tsx
@@ -340,8 +340,7 @@ const Home: ParentComponent = (props) => {
       console.warn("no account info?");
       return;
     }
-    const rect = srcElement?.getBoundingClientRect();
-    setHeroSrc((x) => Object.assign({}, x, { [BOTTOM_SHEET_HERO]: rect }));
+    setHeroSrc((x) => Object.assign({}, x, { [BOTTOM_SHEET_HERO]: srcElement }));
     const acct = `${inf.username}@${p.account.site}`;
     setTootBottomSheetCache(acct, toot);
     navigate(`/${encodeURIComponent(acct)}/${toot.id}`, {
diff --git a/src/timelines/TootComposer.tsx b/src/timelines/TootComposer.tsx
index 9087d8f..bf9e1c3 100644
--- a/src/timelines/TootComposer.tsx
+++ b/src/timelines/TootComposer.tsx
@@ -185,7 +185,6 @@ function randomChoose<T extends any[]>(
   K: T,
 ): T extends Array<infer E> ? E : never {
   const idx = Math.floor(rn * K.length);
-  console.log(idx, K.length);
   return K[idx];
 }