refactor(web): extract allocation drag bootstrap

This commit is contained in:
2026-04-01 10:10:06 +02:00
parent 892a9c5ccf
commit 203bb8751d
5 changed files with 162 additions and 13 deletions
@@ -0,0 +1,67 @@
import { describe, expect, it } from "vitest";
import { createAllocationDragState, type AllocationDragStateLike } from "./timelineAllocationDragState.js";
describe("timelineAllocationDragState", () => {
it("defaults scope and mutation ids for whole-allocation drags", () => {
expect(
createAllocationDragState<AllocationDragStateLike<"move", "allocation" | "segment">, "move", "allocation" | "segment">({
mode: "move",
allocationId: "alloc-1",
projectId: "project-1",
projectName: "Alpha",
resourceId: null,
startDate: new Date("2025-01-01T00:00:00.000Z"),
endDate: new Date("2025-01-05T00:00:00.000Z"),
startMouseX: 320,
}),
).toEqual({
isActive: true,
mode: "move",
scope: "allocation",
allocationId: "alloc-1",
mutationAllocationId: "alloc-1",
projectId: "project-1",
projectName: "Alpha",
resourceId: null,
allocationStartDate: new Date("2025-01-01T00:00:00.000Z"),
allocationEndDate: new Date("2025-01-05T00:00:00.000Z"),
originalStartDate: new Date("2025-01-01T00:00:00.000Z"),
originalEndDate: new Date("2025-01-05T00:00:00.000Z"),
currentStartDate: new Date("2025-01-01T00:00:00.000Z"),
currentEndDate: new Date("2025-01-05T00:00:00.000Z"),
startMouseX: 320,
pointerDeltaX: 0,
daysDelta: 0,
});
});
it("preserves explicit mutation ids and segment boundaries for fragment drags", () => {
expect(
createAllocationDragState<
AllocationDragStateLike<"resize-end", "allocation" | "segment">,
"resize-end",
"allocation" | "segment"
>({
mode: "resize-end",
scope: "segment",
allocationId: "alloc-1",
mutationAllocationId: "alloc-fragment-2",
projectId: "project-1",
projectName: "Alpha",
resourceId: "resource-4",
startDate: new Date("2025-01-03T00:00:00.000Z"),
endDate: new Date("2025-01-04T00:00:00.000Z"),
allocationStartDate: new Date("2025-01-01T00:00:00.000Z"),
allocationEndDate: new Date("2025-01-07T00:00:00.000Z"),
startMouseX: 144,
}),
).toMatchObject({
mode: "resize-end",
scope: "segment",
mutationAllocationId: "alloc-fragment-2",
resourceId: "resource-4",
allocationStartDate: new Date("2025-01-01T00:00:00.000Z"),
allocationEndDate: new Date("2025-01-07T00:00:00.000Z"),
});
});
});
@@ -0,0 +1,60 @@
export type AllocationDragStateLike<TMode extends string = string, TScope extends string = string> = {
isActive: boolean;
mode: TMode;
scope: TScope;
allocationId: string | null;
mutationAllocationId: string | null;
projectId: string | null;
projectName: string | null;
resourceId: string | null;
allocationStartDate: Date | null;
allocationEndDate: Date | null;
originalStartDate: Date | null;
originalEndDate: Date | null;
currentStartDate: Date | null;
currentEndDate: Date | null;
startMouseX: number;
pointerDeltaX: number;
daysDelta: number;
};
type CreateAllocationDragStateInput<TMode extends string, TScope extends string> = {
mode: TMode;
scope?: TScope | undefined;
allocationId: string;
mutationAllocationId?: string | undefined;
projectId: string;
projectName: string;
resourceId: string | null;
startDate: Date;
endDate: Date;
allocationStartDate?: Date | undefined;
allocationEndDate?: Date | undefined;
startMouseX: number;
};
export function createAllocationDragState<
TState extends AllocationDragStateLike<TMode, TScope>,
TMode extends string,
TScope extends string,
>(input: CreateAllocationDragStateInput<TMode, TScope>): TState {
return {
isActive: true,
mode: input.mode,
scope: input.scope ?? ("allocation" as TScope),
allocationId: input.allocationId,
mutationAllocationId: input.mutationAllocationId ?? input.allocationId,
projectId: input.projectId,
projectName: input.projectName,
resourceId: input.resourceId,
allocationStartDate: input.allocationStartDate ?? input.startDate,
allocationEndDate: input.allocationEndDate ?? input.endDate,
originalStartDate: input.startDate,
originalEndDate: input.endDate,
currentStartDate: input.startDate,
currentEndDate: input.endDate,
startMouseX: input.startMouseX,
pointerDeltaX: 0,
daysDelta: 0,
} as TState;
}
+9 -13
View File
@@ -23,6 +23,7 @@ import {
startAllocationMultiDrag,
updateAllocationMultiDrag,
} from "./timelineAllocationMultiDrag.js";
import { createAllocationDragState } from "./timelineAllocationDragState.js";
import { buildProjectShiftMutationInput, createProjectDragState } from "./timelineProjectDrag.js";
import {
createMultiSelectState,
@@ -682,25 +683,20 @@ export function useTimelineDrag({
// ── Single allocation drag ────────────────────────────────────────────
const initial: AllocDragState = {
isActive: true,
const initial = createAllocationDragState<AllocDragState, AllocDragMode, AllocDragScope>({
mode: opts.mode,
scope: opts.scope ?? "allocation",
scope: opts.scope,
allocationId: opts.allocationId,
mutationAllocationId: opts.mutationAllocationId ?? opts.allocationId,
mutationAllocationId: opts.mutationAllocationId,
projectId: opts.projectId,
projectName: opts.projectName,
resourceId: opts.resourceId,
allocationStartDate: opts.allocationStartDate ?? opts.startDate,
allocationEndDate: opts.allocationEndDate ?? opts.endDate,
originalStartDate: opts.startDate,
originalEndDate: opts.endDate,
currentStartDate: opts.startDate,
currentEndDate: opts.endDate,
allocationStartDate: opts.allocationStartDate,
allocationEndDate: opts.allocationEndDate,
startDate: opts.startDate,
endDate: opts.endDate,
startMouseX: e.clientX,
pointerDeltaX: 0,
daysDelta: 0,
};
});
allocDragRef.current = initial;
setAllocDragState(initial);
setAllocationPreviewTarget(e.currentTarget, opts.mode);