diff --git a/tracker/tracker-assist/package.json b/tracker/tracker-assist/package.json index ad080d92f..ac575c4c1 100644 --- a/tracker/tracker-assist/package.json +++ b/tracker/tracker-assist/package.json @@ -1,7 +1,7 @@ { "name": "@openreplay/tracker-assist", "description": "Tracker plugin for screen assistance through the WebRTC", - "version": "3.5.10", + "version": "3.5.11", "keywords": [ "WebRTC", "assistance", diff --git a/tracker/tracker-assist/src/Assist.ts b/tracker/tracker-assist/src/Assist.ts index c5bd43ea8..90548de43 100644 --- a/tracker/tracker-assist/src/Assist.ts +++ b/tracker/tracker-assist/src/Assist.ts @@ -173,6 +173,12 @@ export default class Assist { socket.on("scroll", remoteControl.scroll) socket.on("click", remoteControl.click) socket.on("move", remoteControl.move) + socket.on("focus", (clientID, nodeID) => { + const el = app.nodes.getNode(nodeID) + if (el instanceof HTMLElement) { + remoteControl.focus(clientID, el) + } + }) socket.on("input", remoteControl.input) let annot: AnnotationCanvas | null = null diff --git a/tracker/tracker-assist/src/Mouse.ts b/tracker/tracker-assist/src/Mouse.ts index 911c29236..d8809e028 100644 --- a/tracker/tracker-assist/src/Mouse.ts +++ b/tracker/tracker-assist/src/Mouse.ts @@ -65,6 +65,7 @@ export default class Mouse { const [dX, dY] = delta let el = this.lastScrEl + // Scroll the same one if (el instanceof Element) { el.scrollLeft += dX @@ -81,17 +82,28 @@ export default class Mouse { mouseY-this.pScrEl.scrollTop, ) while (el) { - //if(el.scrollWidth > el.clientWidth) // - This check doesn't work in common case - const esl = el.scrollLeft - el.scrollLeft += dX - const est = el.scrollTop - el.scrollTop += dY - if (esl !== el.scrollLeft || est !== el.scrollTop) { - this.lastScrEl = el - return - } else { - el = el.parentElement - } + // const esl = el.scrollLeft + // el.scrollLeft += dX + // const est = el.scrollTop + // el.scrollTop += dY + // if (esl !== el.scrollLeft || est !== el.scrollTop) { // doesn't work if the scroll-behavior is "smooth" + // this.lastScrEl = el + // return + // } else { + // el = el.parentElement + // } + + // el.scrollTopMax > 0 // available in firefox + if (el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth) { + const styles = getComputedStyle(el) + if (styles.overflow.indexOf("scroll") >= 0 || styles.overflow.indexOf("auto") >= 0) { + el.scrollLeft += dX + el.scrollTop += dY + this.lastScrEl = el + return + } + } + el = el.parentElement } // If not scrolled diff --git a/tracker/tracker-assist/src/RemoteControl.ts b/tracker/tracker-assist/src/RemoteControl.ts index d2903f9c4..50cb717c8 100644 --- a/tracker/tracker-assist/src/RemoteControl.ts +++ b/tracker/tracker-assist/src/RemoteControl.ts @@ -9,6 +9,14 @@ enum RCStatus { Enabled, } + +let setInputValue = function(this: HTMLInputElement | HTMLTextAreaElement, value: string) { this.value = value } +const nativeInputValueDescriptor = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value") +if (nativeInputValueDescriptor && nativeInputValueDescriptor.set) { + setInputValue = nativeInputValueDescriptor.set +} + + export default class RemoteControl { private mouse: Mouse | null private status: RCStatus = RCStatus.Disabled @@ -77,11 +85,16 @@ export default class RemoteControl { if (id !== this.agentID || !this.mouse) { return } this.focused = this.mouse.click(xy) } - input = (id, value) => { + focus = (id, el: HTMLElement) => { + this.focused = el + } + input = (id, value: string) => { if (id !== this.agentID || !this.mouse || !this.focused) { return } if (this.focused instanceof HTMLTextAreaElement || this.focused instanceof HTMLInputElement) { - this.focused.value = value + setInputValue.call(this.focused, value) + const ev = new Event('input', { bubbles: true}) + this.focused.dispatchEvent(ev) } else if (this.focused.isContentEditable) { this.focused.innerText = value }