From dd94c94269f83f4376c8af850dfcb467be860724 Mon Sep 17 00:00:00 2001 From: rahulramesha Date: Tue, 29 Oct 2024 01:22:32 +0530 Subject: [PATCH 1/5] improve auto scroller logic --- web/core/hooks/use-auto-scroller.tsx | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/web/core/hooks/use-auto-scroller.tsx b/web/core/hooks/use-auto-scroller.tsx index 3c0d51316d3..52afa534aa2 100644 --- a/web/core/hooks/use-auto-scroller.tsx +++ b/web/core/hooks/use-auto-scroller.tsx @@ -1,6 +1,6 @@ import { RefObject, useEffect, useRef } from "react"; -const SCROLL_BY = 1; +const SCROLL_BY = 3; const AUTO_SCROLL_THRESHOLD = 15; const MAX_SPEED_THRESHOLD = 5; @@ -13,6 +13,7 @@ export const useAutoScroller = ( ) => { const containerDimensions = useRef(); const intervalId = useRef | undefined>(undefined); + const mousePosition = useRef<{ clientX: number; clientY: number } | undefined>(undefined); const clearRegisteredTimeout = () => { clearInterval(intervalId.current); @@ -26,6 +27,15 @@ export const useAutoScroller = ( if (!rect || !shouldScroll || (e.clientX === 0 && e.clientY === 0)) return; + let diffX = 0, + diffY = 0; + + if (mousePosition.current) { + diffX = e.clientX - mousePosition.current.clientX; + diffY = e.clientY - mousePosition.current.clientY; + } + + mousePosition.current = { clientX: e.clientX, clientY: e.clientY }; const { left, top, width, height } = rect; const mouseX = e.clientX - left - leftOffset; @@ -44,28 +54,28 @@ export const useAutoScroller = ( scrollByY = 0; // Check mouse positions against thresholds - if (mouseX < thresholdX) { + if (mouseX < thresholdX && diffX <= 0) { scrollByX = -1 * SCROLL_BY; if (mouseX < maxSpeedX) { scrollByX *= 2; } } - if (mouseX > currWidth - thresholdX) { + if (mouseX > currWidth - thresholdX && diffX >= 0) { scrollByX = SCROLL_BY; if (mouseX > currWidth - maxSpeedX) { scrollByX *= 2; } } - if (mouseY < thresholdY) { + if (mouseY < thresholdY && diffY <= 0) { scrollByY = -1 * SCROLL_BY; if (mouseX < maxSpeedY) { scrollByY *= 2; } } - if (mouseY > currHeight - thresholdY) { + if (mouseY > currHeight - thresholdY && diffY >= 0) { scrollByY = SCROLL_BY; if (mouseY > currHeight - maxSpeedY) { scrollByY *= 2; From ac2723e637971f691e3559e5e8efa01e27e8ba46 Mon Sep 17 00:00:00 2001 From: rahulramesha Date: Tue, 29 Oct 2024 01:23:31 +0530 Subject: [PATCH 2/5] fix drag indicator visibility on for blocks --- .../gantt-chart/helpers/blockResizables/left-resizable.tsx | 4 ++-- .../gantt-chart/helpers/blockResizables/right-resizable.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx b/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx index 280c609e15b..b5f0de5c157 100644 --- a/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx +++ b/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx @@ -50,9 +50,9 @@ export const LeftResizable = observer((props: LeftResizableProps) => { />
diff --git a/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx b/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx index 2047a90b639..bb262875b59 100644 --- a/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx +++ b/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx @@ -48,9 +48,9 @@ export const RightResizable = observer((props: RightResizableProps) => { />
From 779e98d43ab980e33ad46a87307485ad8ccdfea0 Mon Sep 17 00:00:00 2001 From: rahulramesha Date: Tue, 29 Oct 2024 01:24:44 +0530 Subject: [PATCH 3/5] modify timeline store logic and improve timeline scrolling logic --- web/ce/store/timeline/base-timeline.store.ts | 25 ++++++++++++++-- .../gantt-chart/chart/main-content.tsx | 6 ++-- .../components/gantt-chart/chart/root.tsx | 28 +++++++++++++++-- web/core/components/gantt-chart/data/index.ts | 2 +- .../components/gantt-chart/views/helpers.ts | 6 ---- .../gantt-chart/views/month-view.ts | 20 +++++++++---- .../gantt-chart/views/quarter-view.ts | 30 +++++++++++-------- .../components/gantt-chart/views/week-view.ts | 25 ++++++++++------ .../store/timeline/issues-timeline.store.ts | 5 ++-- .../store/timeline/modules-timeline.store.ts | 4 +-- 10 files changed, 103 insertions(+), 48 deletions(-) diff --git a/web/ce/store/timeline/base-timeline.store.ts b/web/ce/store/timeline/base-timeline.store.ts index 944a500a842..f0325592317 100644 --- a/web/ce/store/timeline/base-timeline.store.ts +++ b/web/ce/store/timeline/base-timeline.store.ts @@ -9,7 +9,7 @@ import { getDateFromPositionOnGantt, getItemPositionWidth } from "@/components/g // helpers import { renderFormattedPayloadDate } from "@/helpers/date-time.helper"; // store -import { CoreRootStore } from "@/store/root.store"; +import { RootStore } from "@/plane-web/store/root.store"; // types type BlockData = { @@ -38,6 +38,7 @@ export interface IBaseTimelineStore { updateCurrentViewData: (data: ChartDataType | undefined) => void; updateActiveBlockId: (blockId: string | null) => void; updateRenderView: (data: any) => void; + updateAllBlocksOnChartChangeWhileDragging: (addedWidth: number) => void; getUpdatedPositionAfterDrag: (id: string, ignoreDependencies?: boolean) => IBlockUpdateDependencyData[]; updateBlockPosition: (id: string, deltaLeft: number, deltaWidth: number, ignoreDependencies?: boolean) => void; getNumberOfDaysFromPosition: (position: number | undefined) => number | undefined; @@ -57,9 +58,9 @@ export class BaseTimeLineStore implements IBaseTimelineStore { activeBlockId: string | null = null; renderView: any = []; - rootStore: CoreRootStore; + rootStore: RootStore; - constructor(_rootStore: CoreRootStore) { + constructor(_rootStore: RootStore) { makeObservable(this, { // observables blocksMap: observable, @@ -232,6 +233,24 @@ export class BaseTimeLineStore implements IBaseTimelineStore { return getDateFromPositionOnGantt(position, this.currentViewData, offsetDays); }); + /** + * Adds width on Chart position change while the blocks are being dragged + * @param addedWidth + */ + updateAllBlocksOnChartChangeWhileDragging = action((addedWidth: number) => { + if (!this.blockIds || !this.isDragging) return; + + runInAction(() => { + this.blockIds?.forEach((blockId) => { + const currBlock = this.blocksMap[blockId]; + + if (!currBlock || !currBlock.position) return; + + currBlock.position.marginLeft += addedWidth; + }); + }); + }); + /** * returns updates dates of blocks post drag. * @param id diff --git a/web/core/components/gantt-chart/chart/main-content.tsx b/web/core/components/gantt-chart/chart/main-content.tsx index 16d0c69d918..892c3fd21c8 100644 --- a/web/core/components/gantt-chart/chart/main-content.tsx +++ b/web/core/components/gantt-chart/chart/main-content.tsx @@ -98,11 +98,11 @@ export const GanttChartMainContent: React.FC = observer((props) => { const onScroll = (e: React.UIEvent) => { const { clientWidth, scrollLeft, scrollWidth } = e.currentTarget; - const approxRangeLeft = scrollLeft >= clientWidth + 1000 ? 1000 : scrollLeft - clientWidth; + const approxRangeLeft = scrollLeft; const approxRangeRight = scrollWidth - (scrollLeft + clientWidth); - if (approxRangeRight < 1000) updateCurrentViewRenderPayload("right", currentView); - if (approxRangeLeft < 1000) updateCurrentViewRenderPayload("left", currentView); + if (approxRangeRight < clientWidth) updateCurrentViewRenderPayload("right", currentView); + if (approxRangeLeft < clientWidth) updateCurrentViewRenderPayload("left", currentView); }; const CHART_VIEW_COMPONENTS: { diff --git a/web/core/components/gantt-chart/chart/root.tsx b/web/core/components/gantt-chart/chart/root.tsx index 45a2bfaec75..148e15b3147 100644 --- a/web/core/components/gantt-chart/chart/root.tsx +++ b/web/core/components/gantt-chart/chart/root.tsx @@ -10,7 +10,15 @@ import { useTimeLineChartStore } from "@/hooks/use-timeline-chart"; import { SIDEBAR_WIDTH } from "../constants"; import { currentViewDataWithView } from "../data"; import { ChartDataType, IBlockUpdateData, IBlockUpdateDependencyData, TGanttViews } from "../types"; -import { getNumberOfDaysBetweenTwoDates, IMonthBlock, IMonthView, IWeekBlock, timelineViewHelpers } from "../views"; +import { + getNumberOfDaysBetweenTwoDates, + IMonthBlock, + IMonthView, + IWeekBlock, + monthView, + quarterView, + weekView, +} from "../views"; type ChartViewRootProps = { border: boolean; @@ -35,6 +43,12 @@ type ChartViewRootProps = { showToday: boolean; }; +const timelineViewHelpers = { + week: weekView, + month: monthView, + quarter: quarterView, +}; + export const ChartViewRoot: FC = observer((props) => { const { border, @@ -62,8 +76,15 @@ export const ChartViewRoot: FC = observer((props) => { const [itemsContainerWidth, setItemsContainerWidth] = useState(0); const [fullScreenMode, setFullScreenMode] = useState(false); // hooks - const { currentView, currentViewData, renderView, updateCurrentView, updateCurrentViewData, updateRenderView } = - useTimeLineChartStore(); + const { + currentView, + currentViewData, + renderView, + updateCurrentView, + updateCurrentViewData, + updateRenderView, + updateAllBlocksOnChartChangeWhileDragging, + } = useTimeLineChartStore(); const updateCurrentViewRenderPayload = (side: null | "left" | "right", view: TGanttViews) => { const selectedCurrentView: TGanttViews = view; @@ -89,6 +110,7 @@ export const ChartViewRoot: FC = observer((props) => { updateCurrentView(selectedCurrentView); updateRenderView(mergeRenderPayloads(currentRender.payload, renderView)); updatingCurrentLeftScrollPosition(currentRender.scrollWidth); + updateAllBlocksOnChartChangeWhileDragging(currentRender.scrollWidth); setItemsContainerWidth(itemsContainerWidth + currentRender.scrollWidth); } else if (side === "right") { updateCurrentView(view); diff --git a/web/core/components/gantt-chart/data/index.ts b/web/core/components/gantt-chart/data/index.ts index b980a0ec3ee..dc884033038 100644 --- a/web/core/components/gantt-chart/data/index.ts +++ b/web/core/components/gantt-chart/data/index.ts @@ -90,7 +90,7 @@ export const VIEWS_LIST: ChartDataType[] = [ startDate: new Date(), currentDate: new Date(), endDate: new Date(), - approxFilterRange: 18, // it will preview week starting dates all months data and there is 3 months limitation for preview ex: title (2, 9, 16, 23, 30) + approxFilterRange: 24, // it will preview week starting dates all months data and there is 3 months limitation for preview ex: title (2, 9, 16, 23, 30) dayWidth: 5, }, }, diff --git a/web/core/components/gantt-chart/views/helpers.ts b/web/core/components/gantt-chart/views/helpers.ts index a0976c23079..02a897d8392 100644 --- a/web/core/components/gantt-chart/views/helpers.ts +++ b/web/core/components/gantt-chart/views/helpers.ts @@ -113,9 +113,3 @@ export const getItemPositionWidth = (chartData: ChartDataType, itemData: IGanttB return { marginLeft: scrollPosition, width: scrollWidth }; }; - -export const timelineViewHelpers = { - week: weekView, - month: monthView, - quarter: quarterView, -}; diff --git a/web/core/components/gantt-chart/views/month-view.ts b/web/core/components/gantt-chart/views/month-view.ts index 1bbd6c28858..2e66729778f 100644 --- a/web/core/components/gantt-chart/views/month-view.ts +++ b/web/core/components/gantt-chart/views/month-view.ts @@ -3,7 +3,7 @@ import uniqBy from "lodash/uniqBy"; // import { months } from "../data"; import { ChartDataType } from "../types"; -import { getNumberOfDaysInMonth } from "./helpers"; +import { getNumberOfDaysBetweenTwoDates, getNumberOfDaysInMonth } from "./helpers"; import { getWeeksBetweenTwoDates, IWeekBlock } from "./week-view"; export interface IMonthBlock { @@ -38,6 +38,9 @@ const generateMonthChart = (monthPayload: ChartDataType, side: null | "left" | " let minusDate: Date = new Date(); let plusDate: Date = new Date(); + let startDate = new Date(); + let endDate = new Date(); + // if side is null generate months on both side of current date if (side === null) { const currentDate = renderState.data.currentDate; @@ -47,12 +50,14 @@ const generateMonthChart = (monthPayload: ChartDataType, side: null | "left" | " if (minusDate && plusDate) filteredDates = getMonthsViewBetweenTwoDates(minusDate, plusDate); + startDate = filteredDates.weeks[0]?.startDate; + endDate = filteredDates.weeks[filteredDates.weeks.length - 1]?.endDate; renderState = { ...renderState, data: { ...renderState.data, - startDate: filteredDates.weeks[0]?.startDate, - endDate: filteredDates.weeks[filteredDates.weeks.length - 1]?.endDate, + startDate, + endDate, }, }; } @@ -65,9 +70,11 @@ const generateMonthChart = (monthPayload: ChartDataType, side: null | "left" | " if (minusDate && plusDate) filteredDates = getMonthsViewBetweenTwoDates(minusDate, plusDate); + startDate = filteredDates.weeks[0]?.startDate; + endDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() - 1); renderState = { ...renderState, - data: { ...renderState.data, startDate: filteredDates.weeks[0].startDate }, + data: { ...renderState.data, startDate }, }; } // When side is right, generate more months on the right side of the end date @@ -79,13 +86,16 @@ const generateMonthChart = (monthPayload: ChartDataType, side: null | "left" | " if (minusDate && plusDate) filteredDates = getMonthsViewBetweenTwoDates(minusDate, plusDate); + startDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + 1); + endDate = filteredDates.weeks[filteredDates.weeks.length - 1]?.endDate; renderState = { ...renderState, data: { ...renderState.data, endDate: filteredDates.weeks[filteredDates.weeks.length - 1]?.endDate }, }; } - const scrollWidth = filteredDates.weeks.length * monthPayload.data.dayWidth * 7; + const days = Math.abs(getNumberOfDaysBetweenTwoDates(startDate, endDate)) + 1; + const scrollWidth = days * monthPayload.data.dayWidth; return { state: renderState, payload: filteredDates, scrollWidth: scrollWidth }; }; diff --git a/web/core/components/gantt-chart/views/quarter-view.ts b/web/core/components/gantt-chart/views/quarter-view.ts index 8a1e812a858..4f7ac3446b9 100644 --- a/web/core/components/gantt-chart/views/quarter-view.ts +++ b/web/core/components/gantt-chart/views/quarter-view.ts @@ -27,6 +27,9 @@ const generateQuarterChart = (quarterPayload: ChartDataType, side: null | "left" let minusDate: Date = new Date(); let plusDate: Date = new Date(); + let startDate = new Date(); + let endDate = new Date(); + // if side is null generate months on both side of current date if (side === null) { const currentDate = renderState.data.currentDate; @@ -38,12 +41,15 @@ const generateQuarterChart = (quarterPayload: ChartDataType, side: null | "left" const startMonthBlock = filteredDates[0]; const endMonthBlock = filteredDates[filteredDates.length - 1]; + startDate = new Date(startMonthBlock.year, startMonthBlock.month, 1); + endDate = new Date(endMonthBlock.year, endMonthBlock.month + 1, 0); + renderState = { ...renderState, data: { ...renderState.data, - startDate: new Date(startMonthBlock.year, startMonthBlock.month, 1), - endDate: new Date(endMonthBlock.year, endMonthBlock.month + 1, 0), + startDate, + endDate, }, }; } @@ -51,15 +57,17 @@ const generateQuarterChart = (quarterPayload: ChartDataType, side: null | "left" else if (side === "left") { const currentDate = renderState.data.startDate; - minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, 1); + minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range / 2, 1); plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1); if (minusDate && plusDate) filteredDates = getMonthsBetweenTwoDates(minusDate, plusDate); const startMonthBlock = filteredDates[0]; + startDate = new Date(startMonthBlock.year, startMonthBlock.month, 1); + endDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() - 1); renderState = { ...renderState, - data: { ...renderState.data, startDate: new Date(startMonthBlock.year, startMonthBlock.month, 1) }, + data: { ...renderState.data, startDate }, }; } // When side is right, generate more months on the right side of the end date @@ -67,24 +75,20 @@ const generateQuarterChart = (quarterPayload: ChartDataType, side: null | "left" const currentDate = renderState.data.endDate; minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1); - plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, 1); + plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range / 2, 1); if (minusDate && plusDate) filteredDates = getMonthsBetweenTwoDates(minusDate, plusDate); const endMonthBlock = filteredDates[filteredDates.length - 1]; - + startDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + 1); + endDate = new Date(endMonthBlock.year, endMonthBlock.month + 1, 0); renderState = { ...renderState, - data: { ...renderState.data, endDate: new Date(endMonthBlock.year, endMonthBlock.month + 1, 0) }, + data: { ...renderState.data, endDate }, }; } - const startMonthBlock = filteredDates[0]; - const endMonthBlock = filteredDates[filteredDates.length - 1]; - const startDate = new Date(startMonthBlock.year, startMonthBlock.month, 1); - const endDate = new Date(endMonthBlock.year, endMonthBlock.month + 1, 0); - - const days = Math.abs(getNumberOfDaysBetweenTwoDates(startDate, endDate)); + const days = Math.abs(getNumberOfDaysBetweenTwoDates(startDate, endDate)) + 1; const scrollWidth = days * quarterPayload.data.dayWidth; return { state: renderState, payload: filteredDates, scrollWidth: scrollWidth }; diff --git a/web/core/components/gantt-chart/views/week-view.ts b/web/core/components/gantt-chart/views/week-view.ts index d47d79d7e12..03a0da1b3c7 100644 --- a/web/core/components/gantt-chart/views/week-view.ts +++ b/web/core/components/gantt-chart/views/week-view.ts @@ -1,7 +1,7 @@ // import { weeks, months } from "../data"; import { ChartDataType } from "../types"; -import { getWeekNumberByDate } from "./helpers"; +import { getNumberOfDaysBetweenTwoDates, getWeekNumberByDate } from "./helpers"; export interface IDayBlock { date: Date; day: number; @@ -46,6 +46,9 @@ const generateWeekChart = (weekPayload: ChartDataType, side: null | "left" | "ri let minusDate: Date = new Date(); let plusDate: Date = new Date(); + let startDate = new Date(); + let endDate = new Date(); + // if side is null generate weeks on both side of current date if (side === null) { const currentDate = renderState.data.currentDate; @@ -55,12 +58,14 @@ const generateWeekChart = (weekPayload: ChartDataType, side: null | "left" | "ri if (minusDate && plusDate) filteredDates = getWeeksBetweenTwoDates(minusDate, plusDate); + startDate = filteredDates[0].startDate; + endDate = filteredDates[filteredDates.length - 1].endDate; renderState = { ...renderState, data: { ...renderState.data, - startDate: filteredDates[0].startDate, - endDate: filteredDates[filteredDates.length - 1].endDate, + startDate, + endDate, }, }; } @@ -73,9 +78,11 @@ const generateWeekChart = (weekPayload: ChartDataType, side: null | "left" | "ri if (minusDate && plusDate) filteredDates = getWeeksBetweenTwoDates(minusDate, plusDate); + startDate = filteredDates[0].startDate; + endDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() - 1); renderState = { ...renderState, - data: { ...renderState.data, startDate: filteredDates[0].startDate }, + data: { ...renderState.data, startDate }, }; } // When side is right, generate more weeks on the right side of the end date @@ -87,16 +94,16 @@ const generateWeekChart = (weekPayload: ChartDataType, side: null | "left" | "ri if (minusDate && plusDate) filteredDates = getWeeksBetweenTwoDates(minusDate, plusDate); + startDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + 1); + endDate = filteredDates[filteredDates.length - 1].endDate; renderState = { ...renderState, - data: { ...renderState.data, endDate: filteredDates[filteredDates.length - 1].endDate }, + data: { ...renderState.data, endDate }, }; } - const scrollWidth = - filteredDates - .map((monthData: any) => monthData.children.length) - .reduce((partialSum: number, a: number) => partialSum + a, 0) * weekPayload.data.dayWidth; + const days = Math.abs(getNumberOfDaysBetweenTwoDates(startDate, endDate)) + 1; + const scrollWidth = days * weekPayload.data.dayWidth; return { state: renderState, payload: filteredDates, scrollWidth: scrollWidth }; }; diff --git a/web/core/store/timeline/issues-timeline.store.ts b/web/core/store/timeline/issues-timeline.store.ts index 9e24eec0fb0..c1bb22128f5 100644 --- a/web/core/store/timeline/issues-timeline.store.ts +++ b/web/core/store/timeline/issues-timeline.store.ts @@ -1,8 +1,7 @@ import { autorun } from "mobx"; // Plane-web +import { RootStore } from "@/plane-web/store/root.store"; import { BaseTimeLineStore, IBaseTimelineStore } from "@/plane-web/store/timeline/base-timeline.store"; -// Store -import { CoreRootStore } from "@/store/root.store"; export interface IIssuesTimeLineStore extends IBaseTimelineStore { isDependencyEnabled: boolean; @@ -11,7 +10,7 @@ export interface IIssuesTimeLineStore extends IBaseTimelineStore { export class IssuesTimeLineStore extends BaseTimeLineStore implements IIssuesTimeLineStore { isDependencyEnabled = true; - constructor(_rootStore: CoreRootStore) { + constructor(_rootStore: RootStore) { super(_rootStore); autorun((reaction) => { diff --git a/web/core/store/timeline/modules-timeline.store.ts b/web/core/store/timeline/modules-timeline.store.ts index e81167e77b9..2181b4e0c71 100644 --- a/web/core/store/timeline/modules-timeline.store.ts +++ b/web/core/store/timeline/modules-timeline.store.ts @@ -1,6 +1,6 @@ import { autorun } from "mobx"; // Store -import { CoreRootStore } from "@/store/root.store"; +import { RootStore } from "@/plane-web/store/root.store"; import { BaseTimeLineStore, IBaseTimelineStore } from "ce/store/timeline/base-timeline.store"; export interface IModulesTimeLineStore extends IBaseTimelineStore { @@ -10,7 +10,7 @@ export interface IModulesTimeLineStore extends IBaseTimelineStore { export class ModulesTimeLineStore extends BaseTimeLineStore implements IModulesTimeLineStore { isDependencyEnabled = false; - constructor(_rootStore: CoreRootStore) { + constructor(_rootStore: RootStore) { super(_rootStore); autorun((reaction) => { From d094c19672d41b5940e7086eab0da35754391bc0 Mon Sep 17 00:00:00 2001 From: rahulramesha Date: Tue, 29 Oct 2024 13:00:45 +0530 Subject: [PATCH 4/5] fix width of block while dragging with left handle --- .../helpers/blockResizables/use-gantt-resizable.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/web/core/components/gantt-chart/helpers/blockResizables/use-gantt-resizable.ts b/web/core/components/gantt-chart/helpers/blockResizables/use-gantt-resizable.ts index 06cef69a46f..ecf054862f4 100644 --- a/web/core/components/gantt-chart/helpers/blockResizables/use-gantt-resizable.ts +++ b/web/core/components/gantt-chart/helpers/blockResizables/use-gantt-resizable.ts @@ -66,13 +66,16 @@ export const useGanttResizable = ( let width = initialPositionRef.current.width; let marginLeft = initialPositionRef.current.marginLeft; - const blockRight = initialPositionRef.current.width + initialPositionRef.current.marginLeft; if (dragDirection === "left") { // calculate new marginLeft and update the initial marginLeft to the newly calculated one marginLeft = Math.round(mouseX / dayWidth) * dayWidth; + // get Dimensions from dom's style + const prevMarginLeft = parseFloat(resizableDiv.style.transform.slice(11, -3)); + const prevWidth = parseFloat(resizableDiv.style.width.slice(0, -2)); // calculate new width - width = blockRight - marginLeft; + const marginDelta = prevMarginLeft - marginLeft; + width = prevWidth + marginDelta; } else if (dragDirection === "right") { // calculate new width and update the initialMarginLeft using += width = Math.round(mouseX / dayWidth) * dayWidth - marginLeft; From 4e7db2f1fbe3f81cde62c19d6f3293f12c88fb41 Mon Sep 17 00:00:00 2001 From: rahulramesha Date: Tue, 29 Oct 2024 13:03:36 +0530 Subject: [PATCH 5/5] fix block arrow direction while block is out of viewport --- web/core/components/gantt-chart/blocks/block-row.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/core/components/gantt-chart/blocks/block-row.tsx b/web/core/components/gantt-chart/blocks/block-row.tsx index cc5672c8451..004ca3012d4 100644 --- a/web/core/components/gantt-chart/blocks/block-row.tsx +++ b/web/core/components/gantt-chart/blocks/block-row.tsx @@ -48,7 +48,7 @@ export const BlockRow: React.FC = observer((props) => { (entries) => { entries.forEach((entry) => { setIsHidden(!entry.isIntersecting); - setIsBlockHiddenOnLeft(entry.boundingClientRect.left < 0); + setIsBlockHiddenOnLeft(entry.boundingClientRect.right < (entry.rootBounds?.left ?? 0)); }); }, {