beenull/WebChat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

perf: reset app position when window resize

Browse source
This commit is contained in:
molvqingtai 2024-10-27 10:16:00 +08:00
parent bef576a77b
commit eee1735654
2 changed files with 35 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/app/content/App.tsx
View file

@ -14,6 +14,7 @@ import { AnimatePresence, motion } from 'framer-motion'
import DanmakuContainer from './components/DanmakuContainer' import DanmakuContainer from './components/DanmakuContainer'
import DanmakuDomain from '@/domain/Danmaku' import DanmakuDomain from '@/domain/Danmaku'
import AppStatusDomain from '@/domain/AppStatus'
/** /**
* Fix requestAnimationFrame error in jest * Fix requestAnimationFrame error in jest
@ -34,6 +35,8 @@ export default function App() {
const userInfoSetFinished = useRemeshQuery(userInfoDomain.query.UserInfoSetIsFinishedQuery()) const userInfoSetFinished = useRemeshQuery(userInfoDomain.query.UserInfoSetIsFinishedQuery())
const messageListLoadFinished = useRemeshQuery(messageListDomain.query.LoadIsFinishedQuery()) const messageListLoadFinished = useRemeshQuery(messageListDomain.query.LoadIsFinishedQuery())
const userInfoLoadFinished = useRemeshQuery(userInfoDomain.query.UserInfoLoadIsFinishedQuery()) const userInfoLoadFinished = useRemeshQuery(userInfoDomain.query.UserInfoLoadIsFinishedQuery())
const appStatusDomain = useRemeshDomain(AppStatusDomain())
const appStatusLoadIsFinished = useRemeshQuery(appStatusDomain.query.StatusLoadIsFinishedQuery())
const notUserInfo = userInfoLoadFinished && !userInfoSetFinished const notUserInfo = userInfoLoadFinished && !userInfoSetFinished
@ -58,23 +61,25 @@ export default function App() {
}, [danmakuIsEnabled]) }, [danmakuIsEnabled])
return ( return (
<> appStatusLoadIsFinished && (
<AppMain> <>
<Header /> <AppMain>
<Main /> <Header />
<Footer /> <Main />
<AnimatePresence> <Footer />
{notUserInfo && ( <AnimatePresence>
<motion.div initial={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.3 }}> {notUserInfo && (
<Setup></Setup> <motion.div initial={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.3 }}>
</motion.div> <Setup></Setup>
)} </motion.div>
</AnimatePresence> )}
<Toaster richColors offset="70px" visibleToasts={1} position="top-center"></Toaster> </AnimatePresence>
</AppMain> <Toaster richColors offset="70px" visibleToasts={1} position="top-center"></Toaster>
<AppButton></AppButton> </AppMain>
<AppButton></AppButton>
<DanmakuContainer ref={danmakuContainerRef} /> <DanmakuContainer ref={danmakuContainerRef} />
</> </>
)
) )
} }

21
src/app/content/views/AppButton/index.tsx
View file

@ -1,4 +1,4 @@
import { type FC, useState, type MouseEvent, useLayoutEffect } from 'react' import { type FC, useState, type MouseEvent, useLayoutEffect, useEffect } from 'react'
import { SettingsIcon, MoonIcon, SunIcon, HandIcon } from 'lucide-react' import { SettingsIcon, MoonIcon, SunIcon, HandIcon } from 'lucide-react'
import { motion, AnimatePresence } from 'framer-motion' import { motion, AnimatePresence } from 'framer-motion'
@ -31,7 +31,6 @@ const AppButton: FC = () => {
const userInfo = useRemeshQuery(userInfoDomain.query.UserInfoQuery()) const userInfo = useRemeshQuery(userInfoDomain.query.UserInfoQuery())
const toastDomain = useRemeshDomain(ToastDomain()) const toastDomain = useRemeshDomain(ToastDomain())
const appPosition = useRemeshQuery(appStatusDomain.query.PositionQuery()) const appPosition = useRemeshQuery(appStatusDomain.query.PositionQuery())
const appStatusLoadIsFinished = useRemeshQuery(appStatusDomain.query.StatusLoadIsFinishedQuery())
const DayLogo = [LogoIcon0, LogoIcon1, LogoIcon2, LogoIcon3, LogoIcon4, LogoIcon5, LogoIcon6][getDay(Date())] const DayLogo = [LogoIcon0, LogoIcon1, LogoIcon2, LogoIcon3, LogoIcon4, LogoIcon5, LogoIcon6][getDay(Date())]
@ -40,8 +39,6 @@ const AppButton: FC = () => {
const [menuOpen, setMenuOpen] = useState(false) const [menuOpen, setMenuOpen] = useState(false)
const { width, height } = useWindowSize()
const { const {
x, x,
y, y,
@ -50,13 +47,21 @@ const AppButton: FC = () => {
initX: appPosition.x, initX: appPosition.x,
initY: appPosition.y, initY: appPosition.y,
minX: 44, minX: 44,
maxX: width - 44, maxX: window.innerWidth - 44,
maxY: height - 22, maxY: window.innerHeight - 22,
minY: height / 2 minY: window.innerHeight / 2
}) })
useEffect(() => {
const handler = () => {
send(appStatusDomain.command.UpdatePositionCommand({ x: window.innerWidth - 44, y: window.innerHeight - 22 }))
}
window.addEventListener('resize', handler)
return () => window.removeEventListener('resize', handler)
}, [])
useLayoutEffect(() => { useLayoutEffect(() => {
appStatusLoadIsFinished && send(appStatusDomain.command.UpdatePositionCommand({ x, y })) send(appStatusDomain.command.UpdatePositionCommand({ x, y }))
}, [x, y]) }, [x, y])
const { setRef: appMenuRef } = useTriggerAway(['click'], () => setMenuOpen(false)) const { setRef: appMenuRef } = useTriggerAway(['click'], () => setMenuOpen(false))