github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: scroll position update logic

Browse Source
This commit is contained in:
Aaryan Khandelwal 2024-02-01 14:27:10 +05:30
parent b45ed5c34c
commit 829cce78a1
2 changed files with 10 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/components/gantt-chart/chart/index.tsx
View File

@ -72,7 +72,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = (props) => {
// refs // refs
const sidebarRef = useRef<HTMLDivElement>(null); const sidebarRef = useRef<HTMLDivElement>(null);
// hooks // hooks
const { currentView, currentViewData, renderView, dispatch, allViews, updateScrollLeft, scrollTop, updateScrollTop } = const { currentView, currentViewData, renderView, dispatch, allViews, updateScrollLeft, updateScrollTop } =
useChart(); useChart();
const renderBlockStructure = (view: any, blocks: IGanttBlock[] | null) => const renderBlockStructure = (view: any, blocks: IGanttBlock[] | null) =>
@ -159,9 +159,9 @@ export const ChartViewRoot: FC<ChartViewRootProps> = (props) => {
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
const updatingCurrentLeftScrollPosition = (width: number) => { const scrollContainer = document.getElementById("scroll-container") as HTMLDivElement;
const scrollContainer = document.getElementById("scroll-container") as HTMLElement;
const updatingCurrentLeftScrollPosition = (width: number) => {
if (!scrollContainer) return; if (!scrollContainer) return;
scrollContainer.scrollLeft = width + scrollContainer?.scrollLeft; scrollContainer.scrollLeft = width + scrollContainer?.scrollLeft;
@ -169,8 +169,6 @@ export const ChartViewRoot: FC<ChartViewRootProps> = (props) => {
}; };
const handleScrollToCurrentSelectedDate = (currentState: ChartDataType, date: Date) => { const handleScrollToCurrentSelectedDate = (currentState: ChartDataType, date: Date) => {
const scrollContainer = document.getElementById("scroll-container") as HTMLElement;
if (!scrollContainer) return; if (!scrollContainer) return;
const clientVisibleWidth: number = scrollContainer?.clientWidth; const clientVisibleWidth: number = scrollContainer?.clientWidth;
@ -198,19 +196,13 @@ export const ChartViewRoot: FC<ChartViewRootProps> = (props) => {
}; };
// handling scroll functionality // handling scroll functionality
const onScroll = () => { const onScroll = (e: React.UIEvent<HTMLDivElement, UIEvent>) => {
const scrollContainer = document.getElementById("scroll-container") as HTMLElement; const { clientWidth: clientVisibleWidth, scrollLeft: currentLeftScrollPosition, scrollWidth } = e.currentTarget;
if (!scrollContainer) return;
const scrollWidth: number = scrollContainer?.scrollWidth;
const clientVisibleWidth: number = scrollContainer?.clientWidth;
const currentLeftScrollPosition: number = scrollContainer?.scrollLeft;
updateScrollLeft(currentLeftScrollPosition); updateScrollLeft(currentLeftScrollPosition);
const approxRangeLeft: number = scrollWidth >= clientVisibleWidth + 1000 ? 1000 : scrollWidth - clientVisibleWidth; const approxRangeLeft = scrollWidth >= clientVisibleWidth + 1000 ? 1000 : scrollWidth - clientVisibleWidth;
const approxRangeRight: number = scrollWidth - (approxRangeLeft + clientVisibleWidth); const approxRangeRight = scrollWidth - (approxRangeLeft + clientVisibleWidth);
if (currentLeftScrollPosition >= approxRangeRight) updateCurrentViewRenderPayload("right", currentView); if (currentLeftScrollPosition >= approxRangeRight) updateCurrentViewRenderPayload("right", currentView);
if (currentLeftScrollPosition <= approxRangeLeft) updateCurrentViewRenderPayload("left", currentView); if (currentLeftScrollPosition <= approxRangeLeft) updateCurrentViewRenderPayload("left", currentView);

8
web/components/gantt-chart/helpers/draggable.tsx
View File

@ -31,10 +31,10 @@ export const ChartDraggable: React.FC<Props> = (props) => {
let delWidth = 0; let delWidth = 0;
const ganttContainer = document.querySelector("#gantt-container") as HTMLElement; const ganttContainer = document.querySelector("#gantt-container") as HTMLDivElement;
const ganttSidebar = document.querySelector("#gantt-sidebar") as HTMLElement; const ganttSidebar = document.querySelector("#gantt-sidebar") as HTMLDivElement;
const scrollContainer = document.querySelector("#scroll-container") as HTMLElement; const scrollContainer = document.querySelector("#scroll-container") as HTMLDivElement;
if (!ganttContainer || !ganttSidebar || !scrollContainer) return 0; if (!ganttContainer || !ganttSidebar || !scrollContainer) return 0;
@ -223,8 +223,6 @@ export const ChartDraggable: React.FC<Props> = (props) => {
const textDisplacement = scrollLeft - (block.position?.marginLeft ?? 0); const textDisplacement = scrollLeft - (block.position?.marginLeft ?? 0);
console.log("scrollLeft", scrollLeft);
return ( return (
<> <>
{/* move to left side hidden block button */} {/* move to left side hidden block button */}