refactor(web): centralize touch mouse adapters
This commit is contained in:
@@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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],
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user