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
|
export interface PreviewViewportGeometry {
canvasHeight: number;
canvasWidth: number;
centerX: number;
centerY: number;
scale: number;
viewportHeight: number;
viewportWidth: number;
}
function getCanvasOrigin({
geometry,
}: {
geometry: PreviewViewportGeometry;
}): { x: number; y: number } {
return {
x: geometry.viewportWidth / 2 - geometry.centerX * geometry.scale,
y: geometry.viewportHeight / 2 - geometry.centerY * geometry.scale,
};
}
export function screenToCanvas({
clientX,
clientY,
geometry,
viewportRect,
}: {
clientX: number;
clientY: number;
geometry: PreviewViewportGeometry;
viewportRect: DOMRect;
}): { x: number; y: number } {
const overlayX = clientX - viewportRect.left;
const overlayY = clientY - viewportRect.top;
return {
x:
geometry.centerX +
(overlayX - geometry.viewportWidth / 2) / geometry.scale,
y:
geometry.centerY +
(overlayY - geometry.viewportHeight / 2) / geometry.scale,
};
}
export function canvasToOverlay({
canvasX,
canvasY,
geometry,
}: {
canvasX: number;
canvasY: number;
geometry: PreviewViewportGeometry;
}): { x: number; y: number } {
const canvasOrigin = getCanvasOrigin({ geometry });
return {
x: canvasOrigin.x + canvasX * geometry.scale,
y: canvasOrigin.y + canvasY * geometry.scale,
};
}
export function positionToOverlay({
positionX,
positionY,
geometry,
}: {
positionX: number;
positionY: number;
geometry: PreviewViewportGeometry;
}): { x: number; y: number } {
return canvasToOverlay({
canvasX: geometry.canvasWidth / 2 + positionX,
canvasY: geometry.canvasHeight / 2 + positionY,
geometry,
});
}
export function getDisplayScale({
geometry,
}: {
geometry: PreviewViewportGeometry;
}): { x: number; y: number } {
return {
x: geometry.scale,
y: geometry.scale,
};
}
export function screenPixelsToLogicalThreshold({
geometry,
screenPixels,
}: {
geometry: PreviewViewportGeometry;
screenPixels: number;
}): { x: number; y: number } {
return {
x: screenPixels / geometry.scale,
y: screenPixels / geometry.scale,
};
}
|
