openreplay/frontend/app/player/web/managers/MouseMoveManager.ts
2023-04-26 12:52:01 +02:00

60 lines
1.8 KiB
TypeScript

import type Screen from '../Screen/Screen'
import type { MouseMove } from "../messages";
import { HOVER_CLASSNAME } from '../messages/rewriter/constants'
import ListWalker from '../../common/ListWalker'
import MouseTrail from '../addons/MouseTrail'
import styles from './trail.module.css'
export default class MouseMoveManager extends ListWalker<MouseMove> {
private hoverElements: Array<Element> = []
private mouseTrail: MouseTrail
constructor(private screen: Screen) {
super()
const canvas = document.createElement('canvas')
canvas.id = 'openreplay-mouse-trail'
canvas.className = styles.canvas
this.mouseTrail = new MouseTrail(canvas)
this.screen.overlay.appendChild(canvas)
this.mouseTrail.createContext()
const updateSize = (w: number, h: number) => {
return this.mouseTrail.resizeCanvas(w, h)
}
this.screen.setOnUpdate(updateSize)
}
private getCursorTargets() {
return this.screen.getElementsFromInternalPoint(this.current!)
}
private updateHover(): void {
const curHoverElements = this.getCursorTargets()
const diffAdd = curHoverElements.filter(elem => !this.hoverElements.includes(elem))
const diffRemove = this.hoverElements.filter(elem => !curHoverElements.includes(elem))
this.hoverElements = curHoverElements
diffAdd.forEach(elem => {
elem.classList.add(HOVER_CLASSNAME)
})
diffRemove.forEach(elem => {
elem.classList.remove(HOVER_CLASSNAME)
})
}
reset(): void {
this.hoverElements.length = 0
}
move(t: number) {
const lastMouseMove = this.moveGetLast(t)
if (!!lastMouseMove) {
this.screen.cursor.move(lastMouseMove)
//window.getComputedStyle(this.screen.getCursorTarget()).cursor === 'pointer' // might influence performance though
this.updateHover()
this.mouseTrail.leaveTrail(lastMouseMove.x, lastMouseMove.y)
}
}
}