refactor(web): centralize touch mouse adapters

This commit is contained in:
2026-04-01 10:43:38 +02:00
parent eda8722d83
commit 0ab1374853
5 changed files with 82 additions and 30 deletions
+22 -1
View File
@@ -1,5 +1,5 @@
import { describe, expect, it } from "vitest";
import { getTouchPoint, resolveTouchDragDecision } from "./timelineTouch.js";
import { createTouchMouseDownEvent, getTouchPoint, resolveTouchDragDecision } from "./timelineTouch.js";
describe("timelineTouch", () => {
it("falls back from active touches to changedTouches and then zeroes", () => {
@@ -72,4 +72,25 @@ describe("timelineTouch", () => {
shouldHandleDrag: true,
});
});
it("creates a primary-button mouse-down adapter for touch handlers", () => {
const currentTarget = new EventTarget();
expect(createTouchMouseDownEvent({ clientX: 42, clientY: 17 }, currentTarget)).toMatchObject({
button: 0,
clientX: 42,
currentTarget,
shiftKey: false,
});
});
it("allows missing targets when creating a touch mouse-down adapter", () => {
const event = createTouchMouseDownEvent({ clientX: 7, clientY: 9 });
expect(event.currentTarget).toBeNull();
expect(() => {
event.preventDefault();
event.stopPropagation();
}).not.toThrow();
});
});
+23
View File
@@ -9,6 +9,15 @@ export type TouchDecisionState = {
decided: boolean;
};
export type TouchMouseDownEvent = {
button: number;
clientX: number;
currentTarget?: EventTarget | null;
shiftKey: boolean;
preventDefault: () => void;
stopPropagation: () => void;
};
type TouchLike = {
clientX: number;
clientY: number;
@@ -27,6 +36,20 @@ export function getTouchPoint(event: TouchEventLike): TouchPoint {
};
}
export function createTouchMouseDownEvent(
point: TouchPoint,
currentTarget?: EventTarget | null,
): TouchMouseDownEvent {
return {
button: 0,
clientX: point.clientX,
currentTarget: currentTarget ?? null,
shiftKey: false,
preventDefault: () => {},
stopPropagation: () => {},
};
}
export function resolveTouchDragDecision(
state: TouchDecisionState,
point: TouchPoint,
+8 -29
View File
@@ -33,7 +33,7 @@ import {
} from "./timelineMultiSelect.js";
import { reconcileOptimisticEntries } from "./timelineOptimisticAllocations.js";
import { createRangeSelectionState, finalizeRangeSelection, updateRangeSelectionDraft } from "./timelineRangeSelection.js";
import { getTouchPoint, resolveTouchDragDecision } from "./timelineTouch.js";
import { createTouchMouseDownEvent, getTouchPoint, resolveTouchDragDecision, type TouchMouseDownEvent } from "./timelineTouch.js";
const DRAG_CLICK_THRESHOLD_PX = 5;
@@ -525,7 +525,7 @@ export function useTimelineDrag({
const onProjectBarMouseDown = useCallback(
(
e: React.MouseEvent,
e: TouchMouseDownEvent,
opts: {
projectId: string;
projectName: string;
@@ -568,7 +568,7 @@ export function useTimelineDrag({
// Legacy — kept for backward compat (triggers project shift from allocation block)
const onBlockMouseDown = useCallback(
(
e: React.MouseEvent,
e: TouchMouseDownEvent,
opts: {
projectId: string;
projectName: string;
@@ -606,7 +606,7 @@ export function useTimelineDrag({
const onAllocMouseDown = useCallback(
(
e: React.MouseEvent,
e: TouchMouseDownEvent,
opts: {
mode: AllocDragMode;
allocationId: string;
@@ -802,7 +802,7 @@ export function useTimelineDrag({
const onRowMouseDown = useCallback(
(
e: React.MouseEvent,
e: TouchMouseDownEvent,
opts: {
resourceId: string;
startDate: Date;
@@ -952,14 +952,7 @@ export function useTimelineDrag({
e.preventDefault();
const point = getTouchPoint(e);
touchStartRef.current = { x: point.clientX, y: point.clientY, decided: true };
onProjectBarMouseDown(
{
clientX: point.clientX,
preventDefault: () => {},
stopPropagation: () => {},
} as unknown as React.MouseEvent,
opts,
);
onProjectBarMouseDown(createTouchMouseDownEvent(point, e.currentTarget), opts);
},
[onProjectBarMouseDown],
);
@@ -984,14 +977,7 @@ export function useTimelineDrag({
e.preventDefault();
const point = getTouchPoint(e);
touchStartRef.current = { x: point.clientX, y: point.clientY, decided: true };
onAllocMouseDown(
{
clientX: point.clientX,
preventDefault: () => {},
stopPropagation: () => {},
} as unknown as React.MouseEvent,
opts,
);
onAllocMouseDown(createTouchMouseDownEvent(point, e.currentTarget), opts);
},
[onAllocMouseDown],
);
@@ -1008,14 +994,7 @@ export function useTimelineDrag({
e.preventDefault();
const point = getTouchPoint(e);
touchStartRef.current = { x: point.clientX, y: point.clientY, decided: false };
onRowMouseDown(
{
clientX: point.clientX,
preventDefault: () => {},
stopPropagation: () => {},
} as unknown as React.MouseEvent,
opts,
);
onRowMouseDown(createTouchMouseDownEvent(point, e.currentTarget), opts);
},
[onRowMouseDown],
);