generated from Klectr/KTemplate
feat(storage): remember where the user was last on the screen #7
@ -14,25 +14,32 @@ export default function InfiniteCanvas() {
|
|||||||
const isDarkTheme = useThemeDetector()
|
const isDarkTheme = useThemeDetector()
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
window.scrollTo({
|
const initPos = getInitialPosition(canvasDimentsion)
|
||||||
left: (canvasDimentsion.value.width / 2) - (window.innerWidth / 2),
|
window.scrollTo(initPos)
|
||||||
top: (canvasDimentsion.value.height / 2) - (window.innerHeight / 2)
|
|
||||||
})
|
|
||||||
|
|
||||||
const updateDimensions = () => {
|
const _updateDimensions = () => {
|
||||||
canvasDimentsion.value = {
|
canvasDimentsion.value = {
|
||||||
width: Math.max(canvasDimentsion.value.width, window.innerWidth),
|
width: Math.max(canvasDimentsion.value.width, window.innerWidth),
|
||||||
height: Math.max(canvasDimentsion.value.height, window.innerHeight),
|
height: Math.max(canvasDimentsion.value.height, window.innerHeight),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
updateDimensions()
|
function _updatePosition() {
|
||||||
window.addEventListener("resize", updateDimensions)
|
localStorage.setItem("pos", JSON.stringify({
|
||||||
|
left: window.scrollX,
|
||||||
|
top: window.scrollY
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
_updateDimensions()
|
||||||
|
window.addEventListener("resize", _updateDimensions)
|
||||||
|
window.addEventListener("scrollend", _updatePosition)
|
||||||
notes.loadLocalStorage()
|
notes.loadLocalStorage()
|
||||||
images.loadLocalStorage()
|
images.loadLocalStorage()
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
window.removeEventListener("resize", updateDimensions)
|
window.removeEventListener("resize", _updateDimensions)
|
||||||
|
window.removeEventListener("scrollend", _updatePosition)
|
||||||
}
|
}
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
@ -72,3 +79,32 @@ export default function InfiniteCanvas() {
|
|||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface ScrollToOptions extends ScrollOptions {
|
||||||
|
left?: number;
|
||||||
|
top?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getInitialPosition(canvasDimensions: typeof canvasDimentsion): ScrollToOptions {
|
||||||
|
const defaultScroll: ScrollToOptions = {
|
||||||
|
left: (canvasDimensions.value.width / 2) - (window.innerWidth / 2),
|
||||||
|
top: (canvasDimensions.value.height / 2) - (window.innerHeight / 2)
|
||||||
|
}
|
||||||
|
|
||||||
|
let initPosition;
|
||||||
|
try {
|
||||||
|
initPosition = JSON.parse(localStorage.getItem("pos") ?? "")
|
||||||
|
} catch (e) {
|
||||||
|
console.error("no local storage for pos")
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!initPosition) return defaultScroll
|
||||||
|
return initPosition
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user