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 DanmakuDomain from '@/domain/Danmaku'
import AppStatusDomain from '@/domain/AppStatus'
/**
* Fix requestAnimationFrame error in jest
@ -34,6 +35,8 @@ export default function App() {
const userInfoSetFinished = useRemeshQuery(userInfoDomain.query.UserInfoSetIsFinishedQuery())
const messageListLoadFinished = useRemeshQuery(messageListDomain.query.LoadIsFinishedQuery())
const userInfoLoadFinished = useRemeshQuery(userInfoDomain.query.UserInfoLoadIsFinishedQuery())
const appStatusDomain = useRemeshDomain(AppStatusDomain())
const appStatusLoadIsFinished = useRemeshQuery(appStatusDomain.query.StatusLoadIsFinishedQuery())
const notUserInfo = userInfoLoadFinished && !userInfoSetFinished
@ -58,23 +61,25 @@ export default function App() {
}, [danmakuIsEnabled])
return (
<>
<AppMain>
<Header />
<Main />
<Footer />
<AnimatePresence>
{notUserInfo && (
<motion.div initial={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.3 }}>
<Setup></Setup>
</motion.div>
)}
</AnimatePresence>
<Toaster richColors offset="70px" visibleToasts={1} position="top-center"></Toaster>
</AppMain>
<AppButton></AppButton>
appStatusLoadIsFinished && (
<>
<AppMain>
<Header />
<Main />
<Footer />
<AnimatePresence>
{notUserInfo && (
<motion.div initial={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.3 }}>
<Setup></Setup>
</motion.div>
)}
</AnimatePresence>
<Toaster richColors offset="70px" visibleToasts={1} position="top-center"></Toaster>
</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 { motion, AnimatePresence } from 'framer-motion'
@ -31,7 +31,6 @@ const AppButton: FC = () => {
const userInfo = useRemeshQuery(userInfoDomain.query.UserInfoQuery())
const toastDomain = useRemeshDomain(ToastDomain())
const appPosition = useRemeshQuery(appStatusDomain.query.PositionQuery())
const appStatusLoadIsFinished = useRemeshQuery(appStatusDomain.query.StatusLoadIsFinishedQuery())
const DayLogo = [LogoIcon0, LogoIcon1, LogoIcon2, LogoIcon3, LogoIcon4, LogoIcon5, LogoIcon6][getDay(Date())]
@ -40,8 +39,6 @@ const AppButton: FC = () => {
const [menuOpen, setMenuOpen] = useState(false)
const { width, height } = useWindowSize()
const {
x,
y,
@ -50,13 +47,21 @@ const AppButton: FC = () => {
initX: appPosition.x,
initY: appPosition.y,
minX: 44,
maxX: width - 44,
maxY: height - 22,
minY: height / 2
maxX: window.innerWidth - 44,
maxY: window.innerHeight - 22,
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(() => {
appStatusLoadIsFinished && send(appStatusDomain.command.UpdatePositionCommand({ x, y }))
send(appStatusDomain.command.UpdatePositionCommand({ x, y }))
}, [x, y])
const { setRef: appMenuRef } = useTriggerAway(['click'], () => setMenuOpen(false))