45 lines
1.6 kB
1
const CursorTracker = {
2
mounted() {
3
this.handleMouseMove = (e) => {
4
// Get the mouse position relative to the viewport
5
const x = e.clientX;
6
const y = e.clientY;
7
8
// Get the visualization container
9
const visualizationContainer = this.el.querySelector('.relative.h-64.border');
10
11
if (visualizationContainer) {
12
// Get the bounding rectangle of the visualization container
13
const rect = visualizationContainer.getBoundingClientRect();
14
15
// Calculate the position relative to the visualization container
16
const relativeX = x - rect.left;
17
const relativeY = y - rect.top;
18
19
// Only send the event if the cursor is within the visualization area
20
// or send viewport coordinates for the main display and relative coordinates for visualization
21
this.pushEvent("mousemove", {
22
x: x,
23
y: y,
24
relativeX: relativeX,
25
relativeY: relativeY,
26
inVisualization: relativeX >= 0 && relativeX <= rect.width &&
27
relativeY >= 0 && relativeY <= rect.height
28
});
29
} else {
30
// Fallback if visualization container is not found
31
this.pushEvent("mousemove", { x: x, y: y });
32
}
33
};
34
console.log("Mounted and have position")
35
// Add the event listener to the document
36
document.addEventListener("mousemove", this.handleMouseMove);
37
},
38
39
destroyed() {
40
// Remove the event listener when the element is removed
41
document.removeEventListener("mousemove", this.handleMouseMove);
42
}
43
};
44
45
export default CursorTracker;