Hartmut/CapaKraken
1
0
Fork 0
Code Issues 10 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor(web): split touch canvas adapters

Browse Source
This commit is contained in:
Hartmut Nörenberg
2026-04-01 11:09:26 +02:00
parent a4789d718b
commit 922394c56a
7 changed files with 114 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/hooks/timelineTouch.test.ts
+1 -21
View File
@@ -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();
});
});
apps/web/src/hooks/timelineTouch.ts
-23
View File
@@ -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,
apps/web/src/hooks/timelineTouchAdapters.test.ts
+32
View File
@@ -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,
});
});
});
apps/web/src/hooks/timelineTouchAdapters.ts
+36
View File
@@ -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,
};
}
apps/web/src/hooks/useTimelineDrag.ts
+14 -6
View File
@@ -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],
);
scripts/check-architecture-guardrails.mjs
+21 -6
View File
@@ -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/,
scripts/check-architecture-guardrails.test.mjs
+10 -2
View File
@@ -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",
],
);
});