jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(player): move contextmenu listener initiation to the corresponding context(InspectorController)

Browse source
This commit is contained in:
Alex Kaminskii 2023-02-14 17:53:12 +01:00
parent 82b684470e
commit d6cac3bfda
2 changed files with 17 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
frontend/app/player/web/Screen/Screen.ts
View file

@ -91,20 +91,6 @@ export default class Screen {
parentElement.appendChild(this.screen);
this.parentElement = parentElement;
/* == For the Inspecting Document content == */
this.overlay.addEventListener('contextmenu', () => {
this.overlay.style.display = 'none'
const doc = this.document
if (!doc) { return }
const returnOverlay = () => {
this.overlay.style.display = 'block'
doc.removeEventListener('mousemove', returnOverlay)
doc.removeEventListener('mouseclick', returnOverlay) // TODO: prevent default in case of input selection
}
doc.addEventListener('mousemove', returnOverlay)
doc.addEventListener('mouseclick', returnOverlay)
})
}
getParentElement(): HTMLElement | null {
@ -131,7 +117,7 @@ export default class Screen {
private getBoundingClientRect(): DOMRect {
if (this.boundingRect === null) {
// TODO: use this.screen instead in order to separate overlay functionality
return this.boundingRect = this.overlay.getBoundingClientRect() // expensive operation?
return this.boundingRect = this.screen.getBoundingClientRect() // expensive operation?
}
return this.boundingRect
}
@ -139,7 +125,7 @@ export default class Screen {
getInternalViewportCoordinates({ x, y }: Point): Point {
const { x: overlayX, y: overlayY, width } = this.getBoundingClientRect();
const screenWidth = this.overlay.offsetWidth;
const screenWidth = this.screen.offsetWidth;
const scale = screenWidth / width;
const screenX = (x - overlayX) * scale;
@ -241,7 +227,7 @@ export default class Screen {
height: height + 'px',
})
this.boundingRect = this.overlay.getBoundingClientRect();
this.boundingRect = this.screen.getBoundingClientRect();
}
}

15
frontend/app/player/web/addons/InspectorController.ts
View file

@ -8,7 +8,20 @@ export default class InspectorController {
private substitutor: Screen | null = null
private inspector: Inspector | null = null
marker: Marker | null = null
constructor(private screen: Screen) {}
constructor(private screen: Screen) {
screen.overlay.addEventListener('contextmenu', () => {
screen.overlay.style.display = 'none'
const doc = screen.document
if (!doc) { return }
const returnOverlay = () => {
screen.overlay.style.display = 'block'
doc.removeEventListener('mousemove', returnOverlay)
doc.removeEventListener('mouseclick', returnOverlay) // TODO: prevent default in case of input selection
}
doc.addEventListener('mousemove', returnOverlay)
doc.addEventListener('mouseclick', returnOverlay)
})
}
scale(dims: Dimensions) {
if (this.substitutor) {