1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
import type { ElementWithBounds } from "./element-bounds";
import type { ElementRef } from "@/timeline/types";
function pointInRotatedRect({
px,
py,
cx,
cy,
width,
height,
rotation,
}: {
px: number;
py: number;
cx: number;
cy: number;
width: number;
height: number;
rotation: number;
}): boolean {
const angleRad = (rotation * Math.PI) / 180;
const cos = Math.cos(-angleRad);
const sin = Math.sin(-angleRad);
const dx = px - cx;
const dy = py - cy;
const localX = dx * cos - dy * sin;
const localY = dx * sin + dy * cos;
const halfW = Math.abs(width) / 2;
const halfH = Math.abs(height) / 2;
return (
localX >= -halfW && localX <= halfW && localY >= -halfH && localY <= halfH
);
}
export function getHitElements({
canvasX,
canvasY,
elementsWithBounds,
}: {
canvasX: number;
canvasY: number;
elementsWithBounds: ElementWithBounds[];
}): ElementWithBounds[] {
const hits: ElementWithBounds[] = [];
for (let i = elementsWithBounds.length - 1; i >= 0; i--) {
const { bounds } = elementsWithBounds[i];
if (
pointInRotatedRect({
px: canvasX,
py: canvasY,
cx: bounds.cx,
cy: bounds.cy,
width: bounds.width,
height: bounds.height,
rotation: bounds.rotation,
})
) {
hits.push(elementsWithBounds[i]);
}
}
return hits;
}
export function hitTest({
canvasX,
canvasY,
elementsWithBounds,
}: {
canvasX: number;
canvasY: number;
elementsWithBounds: ElementWithBounds[];
}): ElementWithBounds | null {
return (
getHitElements({
canvasX,
canvasY,
elementsWithBounds,
})[0] ?? null
);
}
export function resolvePreferredHit({
hits,
preferredElements,
}: {
hits: ElementWithBounds[];
preferredElements: ElementRef[];
}): ElementWithBounds | null {
if (preferredElements.length === 0) return null;
return (
hits.find((hit) =>
preferredElements.some(
(preferredElement) =>
preferredElement.trackId === hit.trackId &&
preferredElement.elementId === hit.elementId,
),
) ?? null
);
}
|