Skip to content

[WEB-2803] fix: Timeline chart half block dragging #6135

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pushya22 merged 1 commit into from
Dec 2, 2024
Merged

[WEB-2803] fix: Timeline chart half block dragging #6135

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 23 additions & 13 deletions web/ce/store/timeline/base-timeline.store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,11 @@ export interface IBaseTimelineStore {
updateActiveBlockId: (blockId: string | null) => void;
updateRenderView: (data: any) => void;
updateAllBlocksOnChartChangeWhileDragging: (addedWidth: number) => void;
getUpdatedPositionAfterDrag: (id: string, ignoreDependencies?: boolean) => IBlockUpdateDependencyData[];
getUpdatedPositionAfterDrag: (
id: string,
shouldUpdateHalfBlock: boolean,
Copy link
Contributor

@SatishGandham SatishGandham Dec 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this flag?

Copy link
Contributor Author

@rahulramesha rahulramesha Dec 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, to make sure we only update the block's missing date, when the missing side is dragged. Either i pass down the side that is being dragged or the flag.

ignoreDependencies?: boolean
) => IBlockUpdateDependencyData[];
updateBlockPosition: (id: string, deltaLeft: number, deltaWidth: number, ignoreDependencies?: boolean) => void;
getNumberOfDaysFromPosition: (position: number | undefined) => number | undefined;
setIsDragging: (isDragging: boolean) => void;
Expand Down Expand Up @@ -271,24 +275,30 @@ export class BaseTimeLineStore implements IBaseTimelineStore {
/**
* returns updates dates of blocks post drag.
* @param id
* @param shouldUpdateHalfBlock if is a half block then update the incomplete block only if this is true
* @returns
*/
getUpdatedPositionAfterDrag = action((id: string) => {
getUpdatedPositionAfterDrag = action((id: string, shouldUpdateHalfBlock: boolean) => {
const currBlock = this.blocksMap[id];

if (!currBlock?.position || !this.currentViewData) return [];

return [
{
id,
start_date: renderFormattedPayloadDate(
getDateFromPositionOnGantt(currBlock.position.marginLeft, this.currentViewData)
),
target_date: renderFormattedPayloadDate(
getDateFromPositionOnGantt(currBlock.position.marginLeft + currBlock.position.width, this.currentViewData, -1)
),
},
] as IBlockUpdateDependencyData[];
const updatePayload: IBlockUpdateDependencyData = { id };

// If shouldUpdateHalfBlock or the start date is available then update start date
if (shouldUpdateHalfBlock || currBlock.start_date) {
updatePayload.start_date = renderFormattedPayloadDate(
getDateFromPositionOnGantt(currBlock.position.marginLeft, this.currentViewData)
);
}
// If shouldUpdateHalfBlock or the target date is available then update target date
if (shouldUpdateHalfBlock || currBlock.target_date) {
updatePayload.target_date = renderFormattedPayloadDate(
getDateFromPositionOnGantt(currBlock.position.marginLeft + currBlock.position.width, this.currentViewData, -1)
);
}

return [updatePayload];
});

/**
Expand Down
19 changes: 16 additions & 3 deletions web/core/components/gantt-chart/helpers/blockResizables/use-gantt-resizable.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { setToast } from "@plane/ui";
// hooks
import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
//
import { SIDEBAR_WIDTH } from "../../constants";
import { DEFAULT_BLOCK_WIDTH, SIDEBAR_WIDTH } from "../../constants";
import { IBlockUpdateDependencyData, IGanttBlock } from "../../types";

export const useGanttResizable = (
Expand Down Expand Up @@ -75,10 +75,19 @@ export const useGanttResizable = (
const prevWidth = parseFloat(resizableDiv.style.width.slice(0, -2));
// calculate new width
const marginDelta = prevMarginLeft - marginLeft;
width = prevWidth + marginDelta;
// If target date does not exist while dragging with left handle the revert to default width
width = block.target_date ? prevWidth + marginDelta : DEFAULT_BLOCK_WIDTH;
} else if (dragDirection === "right") {
// calculate new width and update the initialMarginLeft using +=
width = Math.round(mouseX / dayWidth) * dayWidth - marginLeft;

// If start date does not exist while dragging with right handle the revert to default width and adjust marginLeft accordingly
if (!block.start_date) {
// calculate new right and update the marginLeft to the newly calculated one
const marginRight = Math.round(mouseX / dayWidth) * dayWidth;
marginLeft = marginRight - DEFAULT_BLOCK_WIDTH;
width = DEFAULT_BLOCK_WIDTH;
}
} else if (dragDirection === "move") {
// calculate new marginLeft and update the initial marginLeft using -=
marginLeft = Math.round((mouseX - initialPositionRef.current.offsetX) / dayWidth) * dayWidth;
Expand All @@ -105,8 +114,12 @@ export const useGanttResizable = (
ganttContainerElement.removeEventListener("scroll", handleOnScroll);
document.removeEventListener("mouseup", handleMouseUp);

// update half blocks only when the missing side of the block is directly dragged
const shouldUpdateHalfBlock =
(dragDirection === "left" && !block.start_date) || (dragDirection === "right" && !block.target_date);

try {
const blockUpdates = getUpdatedPositionAfterDrag(block.id, dragDirection !== "move");
const blockUpdates = getUpdatedPositionAfterDrag(block.id, shouldUpdateHalfBlock, dragDirection !== "move");
updateBlockDates && updateBlockDates(blockUpdates);
} catch (e) {
setToast;
Expand Down
2 changes: 1 addition & 1 deletion web/core/components/gantt-chart/views/helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export const getItemPositionWidth = (chartData: ChartDataType, itemData: IGanttB
// get scroll position from the number of days and width of each day
scrollPosition = itemStartDate
? getPositionFromDate(chartData, itemStartDate, 0)
: getPositionFromDate(chartData, itemTargetDate!, -1 * DEFAULT_BLOCK_WIDTH);
: getPositionFromDate(chartData, itemTargetDate!, -1 * DEFAULT_BLOCK_WIDTH + chartData.data.dayWidth);

if (itemStartDate && itemTargetDate) {
// get width of block
Expand Down
Loading