diff --git a/apps/web/src/hooks/timelineTouch.test.ts b/apps/web/src/hooks/timelineTouch.test.ts index 8229aff..893896c 100644 --- a/apps/web/src/hooks/timelineTouch.test.ts +++ b/apps/web/src/hooks/timelineTouch.test.ts @@ -1,5 +1,5 @@ import { describe, expect, it } from "vitest"; -import { createTouchMouseDownEvent, getTouchPoint, resolveTouchDragDecision } from "./timelineTouch.js"; +import { getTouchPoint, resolveTouchDragDecision } from "./timelineTouch.js"; describe("timelineTouch", () => { it("falls back from active touches to changedTouches and then zeroes", () => { @@ -73,24 +73,4 @@ describe("timelineTouch", () => { }); }); - 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(); - }); }); diff --git a/apps/web/src/hooks/timelineTouch.ts b/apps/web/src/hooks/timelineTouch.ts index 398656b..48beee5 100644 --- a/apps/web/src/hooks/timelineTouch.ts +++ b/apps/web/src/hooks/timelineTouch.ts @@ -9,15 +9,6 @@ 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; @@ -36,20 +27,6 @@ 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, diff --git a/apps/web/src/hooks/timelineTouchAdapters.test.ts b/apps/web/src/hooks/timelineTouchAdapters.test.ts new file mode 100644 index 0000000..9e74b62 --- /dev/null +++ b/apps/web/src/hooks/timelineTouchAdapters.test.ts @@ -0,0 +1,32 @@ +import { describe, expect, it } from "vitest"; +import { createTouchCanvasPointerEvent, createTouchMouseDownEvent } from "./timelineTouchAdapters.js"; + +describe("timelineTouchAdapters", () => { + 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(); + }); + + it("creates a canvas pointer event with both coordinates preserved", () => { + expect(createTouchCanvasPointerEvent({ clientX: 21, clientY: 34 })).toEqual({ + clientX: 21, + clientY: 34, + }); + }); +}); diff --git a/apps/web/src/hooks/timelineTouchAdapters.ts b/apps/web/src/hooks/timelineTouchAdapters.ts new file mode 100644 index 0000000..ca4b0b1 --- /dev/null +++ b/apps/web/src/hooks/timelineTouchAdapters.ts @@ -0,0 +1,36 @@ +import type { TouchPoint } from "./timelineTouch.js"; + +export type TouchMouseDownEvent = { + button: number; + clientX: number; + currentTarget?: EventTarget | null; + shiftKey: boolean; + preventDefault: () => void; + stopPropagation: () => void; +}; + +export type TouchCanvasPointerEvent = { + clientX: number; + clientY: number; +}; + +export function createTouchMouseDownEvent( + point: TouchPoint, + currentTarget?: EventTarget | null, +): TouchMouseDownEvent { + return { + button: 0, + clientX: point.clientX, + currentTarget: currentTarget ?? null, + shiftKey: false, + preventDefault: () => {}, + stopPropagation: () => {}, + }; +} + +export function createTouchCanvasPointerEvent(point: TouchPoint): TouchCanvasPointerEvent { + return { + clientX: point.clientX, + clientY: point.clientY, + }; +} diff --git a/apps/web/src/hooks/useTimelineDrag.ts b/apps/web/src/hooks/useTimelineDrag.ts index 9d48641..fee84bd 100644 --- a/apps/web/src/hooks/useTimelineDrag.ts +++ b/apps/web/src/hooks/useTimelineDrag.ts @@ -29,7 +29,16 @@ import { } from "./timelineMultiSelect.js"; import { reconcileOptimisticEntries } from "./timelineOptimisticAllocations.js"; import { createRangeSelectionState, finalizeRangeSelection, updateRangeSelectionDraft } from "./timelineRangeSelection.js"; -import { createTouchMouseDownEvent, getTouchPoint, resolveTouchDragDecision, type TouchMouseDownEvent } from "./timelineTouch.js"; +import { + createTouchCanvasPointerEvent, + createTouchMouseDownEvent, + type TouchCanvasPointerEvent, + type TouchMouseDownEvent, +} from "./timelineTouchAdapters.js"; +import { + getTouchPoint, + resolveTouchDragDecision, +} from "./timelineTouch.js"; const DRAG_CLICK_THRESHOLD_PX = 5; @@ -811,7 +820,7 @@ export function useTimelineDrag({ // ── Canvas-level handlers (project shift + range select only) ────────────── const onCanvasMouseMove = useCallback( - (e: React.MouseEvent) => { + (e: TouchCanvasPointerEvent) => { if (updateProjectDragPosition(e.clientX)) { return; } @@ -828,7 +837,7 @@ export function useTimelineDrag({ ); const onCanvasMouseUp = useCallback( - async (e: React.MouseEvent) => { + async (e: TouchCanvasPointerEvent) => { // Project shift const drag = dragStateRef.current; if (drag.isDragging) { @@ -982,15 +991,14 @@ export function useTimelineDrag({ return; } - onCanvasMouseMove({ clientX: point.clientX } as React.MouseEvent); + onCanvasMouseMove(createTouchCanvasPointerEvent(point)); }, [onCanvasMouseMove], ); const onCanvasTouchEnd = useCallback( async (e: React.TouchEvent) => { - const { clientX, clientY } = getTouchPoint(e); - await onCanvasMouseUp({ clientX, clientY } as React.MouseEvent); + await onCanvasMouseUp(createTouchCanvasPointerEvent(getTouchPoint(e))); }, [onCanvasMouseUp], ); diff --git a/scripts/check-architecture-guardrails.mjs b/scripts/check-architecture-guardrails.mjs index 032432b..9b27470 100644 --- a/scripts/check-architecture-guardrails.mjs +++ b/scripts/check-architecture-guardrails.mjs @@ -127,10 +127,6 @@ export const rules = [ pattern: /\bexport function getTouchPoint\b/, message: "timeline touch helpers must keep touch coordinate fallback centralized", }, - { - pattern: /\bexport function createTouchMouseDownEvent\b/, - message: "timeline touch helpers must keep touch-to-mouse adapter wiring centralized", - }, { pattern: /\bexport function resolveTouchDragDecision\b/, message: "timeline touch helpers must keep scroll-vs-drag disambiguation centralized", @@ -138,6 +134,21 @@ export const rules = [ ], forbidden: [], }, + { + file: "apps/web/src/hooks/timelineTouchAdapters.ts", + maxLines: 60, + required: [ + { + pattern: /\bexport function createTouchMouseDownEvent\b/, + message: "timeline touch adapter helpers must keep touch-to-mouse adapter wiring centralized", + }, + { + pattern: /\bexport function createTouchCanvasPointerEvent\b/, + message: "timeline touch adapter helpers must keep canvas pointer adapter wiring centralized", + }, + ], + forbidden: [], + }, { file: "apps/web/src/hooks/timelineMultiSelect.ts", maxLines: 90, @@ -307,6 +318,10 @@ export const rules = [ pattern: /from "\.\/timelineTouch\.js"/, message: "timeline drag must keep touch fallback and drag disambiguation delegated to the extracted helper module", }, + { + pattern: /from "\.\/timelineTouchAdapters\.js"/, + message: "timeline drag must keep touch pointer adapter wiring delegated to the extracted helper module", + }, { pattern: /from "\.\/timelineMultiSelect\.js"/, message: "timeline drag must keep multi-select rectangle lifecycle delegated to the extracted helper module", @@ -354,8 +369,8 @@ export const rules = [ message: "timeline drag must not re-inline touch coordinate fallback helpers", }, { - pattern: /as unknown as React\.MouseEvent/, - message: "timeline drag must not re-inline synthetic touch mouse-down adapters", + pattern: /as (?:unknown as )?React\.MouseEvent/, + message: "timeline drag must not re-inline synthetic touch pointer adapters", }, { pattern: /\bfunction (?:hasAllocationDateChange|shouldTreatAllocationDragAsClick|requiresAllocationFragmentExtraction|buildAllocationMovedSnapshot|reconcileOptimisticEntries)\b/, diff --git a/scripts/check-architecture-guardrails.test.mjs b/scripts/check-architecture-guardrails.test.mjs index 282ce07..3fc74d1 100644 --- a/scripts/check-architecture-guardrails.test.mjs +++ b/scripts/check-architecture-guardrails.test.mjs @@ -72,6 +72,7 @@ describe("architecture guardrails", () => { const dragRule = rules.find((rule) => rule.file === "apps/web/src/hooks/useTimelineDrag.ts"); const livePreviewRule = rules.find((rule) => rule.file === "apps/web/src/hooks/timelineLivePreview.ts"); const touchRule = rules.find((rule) => rule.file === "apps/web/src/hooks/timelineTouch.ts"); + const touchAdaptersRule = rules.find((rule) => rule.file === "apps/web/src/hooks/timelineTouchAdapters.ts"); const multiSelectRule = rules.find((rule) => rule.file === "apps/web/src/hooks/timelineMultiSelect.ts"); const rangeRule = rules.find((rule) => rule.file === "apps/web/src/hooks/timelineRangeSelection.ts"); const optimisticRule = rules.find((rule) => rule.file === "apps/web/src/hooks/timelineOptimisticAllocations.ts"); @@ -86,6 +87,7 @@ describe("architecture guardrails", () => { assert.ok(dragRule); assert.ok(livePreviewRule); assert.ok(touchRule); + assert.ok(touchAdaptersRule); assert.ok(multiSelectRule); assert.ok(rangeRule); assert.ok(optimisticRule); @@ -100,6 +102,7 @@ describe("architecture guardrails", () => { assert.deepEqual(evaluateRule(dragRule, "function clearLivePreview() {}\n"), [ "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep live preview behavior delegated to the extracted helper module", "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep touch fallback and drag disambiguation delegated to the extracted helper module", + "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep touch pointer adapter wiring delegated to the extracted helper module", "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep multi-select rectangle lifecycle delegated to the extracted helper module", "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep range preview and finalization delegated to the extracted helper module", "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep optimistic allocation reconciliation delegated to the extracted helper module", @@ -118,10 +121,14 @@ describe("architecture guardrails", () => { ]); assert.deepEqual(evaluateRule(touchRule, "export function getTouchPoint() {}\n"), [ - "apps/web/src/hooks/timelineTouch.ts: missing guardrail anchor: timeline touch helpers must keep touch-to-mouse adapter wiring centralized", "apps/web/src/hooks/timelineTouch.ts: missing guardrail anchor: timeline touch helpers must keep scroll-vs-drag disambiguation centralized", ]); + assert.deepEqual(evaluateRule(touchAdaptersRule, ""), [ + "apps/web/src/hooks/timelineTouchAdapters.ts: missing guardrail anchor: timeline touch adapter helpers must keep touch-to-mouse adapter wiring centralized", + "apps/web/src/hooks/timelineTouchAdapters.ts: missing guardrail anchor: timeline touch adapter helpers must keep canvas pointer adapter wiring centralized", + ]); + assert.deepEqual(evaluateRule(multiSelectRule, "export function createMultiSelectState() {}\n"), [ "apps/web/src/hooks/timelineMultiSelect.ts: missing guardrail anchor: timeline multi-select helpers must keep minimal-drag reset logic centralized", "apps/web/src/hooks/timelineMultiSelect.ts: missing guardrail anchor: timeline multi-select helpers must keep right-click release completion centralized", @@ -175,6 +182,7 @@ describe("architecture guardrails", () => { ), [ "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep live preview behavior delegated to the extracted helper module", + "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep touch pointer adapter wiring delegated to the extracted helper module", "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep multi-select rectangle lifecycle delegated to the extracted helper module", "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep range preview and finalization delegated to the extracted helper module", "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep optimistic allocation reconciliation delegated to the extracted helper module", @@ -184,7 +192,7 @@ describe("architecture guardrails", () => { "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep allocation multi-drag rules delegated to the extracted helper module", "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep allocation drag bootstrap delegated to the extracted helper module", "apps/web/src/hooks/useTimelineDrag.ts: missing guardrail anchor: timeline drag must keep project drag bootstrap and mutation gating delegated to the extracted helper module", - "apps/web/src/hooks/useTimelineDrag.ts: forbidden pattern matched: timeline drag must not re-inline synthetic touch mouse-down adapters", + "apps/web/src/hooks/useTimelineDrag.ts: forbidden pattern matched: timeline drag must not re-inline synthetic touch pointer adapters", ], ); });