martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-15 21:19:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

reset canvas when scroll to end

Browse Source
This commit is contained in:
Roland Osborne 2022-04-20 15:13:27 -07:00
parent 1aec124e21
commit 5900d9f085
1 changed files with 26 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
net/web/src/User/Conversation/VirtualList/VirtualList.jsx
View File

@ -3,11 +3,15 @@ import { VirtualListWrapper, VirtualItem } from './VirtualList.styled';
import ReactResizeDetector from 'react-resize-detector'; import ReactResizeDetector from 'react-resize-detector';
import { TopicItem } from './TopicItem/TopicItem'; import { TopicItem } from './TopicItem/TopicItem';
// TODO: drop items past overscan
// TODO: sync topic updates
export function VirtualList({ topics }) { export function VirtualList({ topics }) {
const OVERSCAN = 300 const REDZONE = 256;
const OVERSCAN = 256;
const DEFAULT_ITEM_HEIGHT = 64; const DEFAULT_ITEM_HEIGHT = 64;
const DEFAULT_LIST_HEIGHT = 1024; const DEFAULT_LIST_HEIGHT = 4096;
const GUTTER = 8; const GUTTER = 8;
const [ viewHeight, setViewHeight ] = useState(DEFAULT_LIST_HEIGHT); const [ viewHeight, setViewHeight ] = useState(DEFAULT_LIST_HEIGHT);
@ -51,16 +55,14 @@ export function VirtualList({ topics }) {
const onScrollView = (e) => { const onScrollView = (e) => {
// add or remove from overscan
// clip to top or bottom
// set or clear latch
scrollTop.current = e.target.scrollTop; scrollTop.current = e.target.scrollTop;
if (!latch.current) { if (!latch.current) {
let view = getPlacement(); let view = getPlacement();
if (view?.overscan?.top <= 0) {
scrollTop.current = containers.current[0].top;
listRef.current.scrollTo({ top: scrollTop.current, left: 0 });
}
if (view?.overscan?.bottom <= 0) { if (view?.overscan?.bottom <= 0) {
setScroll('hidden'); setScroll('hidden');
latch.current = true; latch.current = true;
@ -119,9 +121,14 @@ export function VirtualList({ topics }) {
} }
} }
if (pos < 0) { if (pos < REDZONE) {
// TODO reset canvas let shift = canvasHeight / 2;
console.log("ALERT: reset convas"); for (let i = 0; i < containers.current.length; i++) {
containers.current[i].top += shift;
updateItem(containers.current[i].id, getItem(containers.current[i]));
}
scrollTop.current += shift;
listRef.current.scrollTo({ top: scrollTop.current, left: 0 });
} }
} }
else { else {
@ -134,9 +141,14 @@ export function VirtualList({ topics }) {
pos += containers.current[i].height + 2 * GUTTER; pos += containers.current[i].height + 2 * GUTTER;
} }
if (pos > canvasHeight) { if (pos + viewHeight + REDZONE > canvasHeight) {
// TODO reset canvas let shift = canvasHeight / 2;
console.log("ALERT: reset canvas"); for (let i = 0; i < containers.current.length; i++) {
containers.current[i].top -= shift;
updateItem(containers.current[i].id, getItem(containers.current[i]));
}
scrollTop.current -= shift;
listRef.current.scrollTo({ top: scrollTop.current, left: 0 });
} }
} }