forked from TypeCellOS/BlockNote
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdebug.ts
More file actions
84 lines (78 loc) · 1.85 KB
/
debug.ts
File metadata and controls
84 lines (78 loc) · 1.85 KB
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
import { Page } from "@playwright/test";
export async function showMouseCursor(page: Page) {
await page.evaluate(() => {
if (window !== window.parent) {
return;
}
const cursorStyle = {
position: "absolute",
left: "0",
top: "0",
width: "14px",
height: "14px",
"z-index": "1000",
background: "rgba(0, 0, 0, 0.39)",
border: "2px solid #fbfbfb9e",
"border-radius": "14px",
margin: "-8px 0 0 -8px",
padding: "0",
"pointer-events": "none",
};
let cssString = "";
for (const [key, value] of Object.entries(cursorStyle)) {
cssString += key + ":" + value + ";";
}
const cursor = document.createElement("div");
cursor.setAttribute("style", cssString);
document.body.appendChild(cursor);
const updatePosition = (x: number, y: number) => {
cursor.style.left = x + "px";
cursor.style.top = y + "px";
};
const updateColor = (color: string) => {
cursor.style.backgroundColor = color;
};
document.addEventListener(
"mousemove",
(event) => {
updatePosition(event.pageX, event.pageY);
},
true,
);
document.addEventListener(
"mousedown",
() => {
updateColor("rgba(243, 169, 4, 0.87)");
},
true,
);
document.addEventListener(
"mouseup",
() => {
updateColor("rgba(0, 0, 0, 0.39)");
},
true,
);
document.addEventListener(
"drag",
(event) => {
updatePosition(event.pageX, event.pageY);
},
true,
);
document.addEventListener(
"dragstart",
() => {
updateColor("rgba(243, 169, 4, 0.87)");
},
true,
);
document.addEventListener(
"dragend",
() => {
updateColor("rgba(0, 0, 0, 0.39)");
},
true,
);
}, false);
}