change(player): add focus event to player

frontend/app/player/web/managers/DOM/DOMManager.ts

@@ -2,25 +2,24 @@ import logger from 'App/logger';
 
 import type Screen from '../../Screen/Screen';
 import type { Message, SetNodeScroll } from '../../messages';
-
 import { MType } from '../../messages';
 import ListWalker from '../../../common/ListWalker';
 import StylesManager, { rewriteNodeStyleSheet } from './StylesManager';
 import FocusManager from './FocusManager';
-import {
-  VElement,
-  VText,
-  VShadowRoot,
-  VDocument,
-  VNode,
-  VStyleElement,
-  PostponedStyleSheet,
-} from './VirtualDOM';
+import SelectionManager from './SelectionManager';
 import type { StyleElement } from './VirtualDOM';
-import { insertRule, deleteRule } from './safeCSSRules';
+import {
+  PostponedStyleSheet,
+  VDocument,
+  VElement,
+  VNode,
+  VShadowRoot,
+  VStyleElement,
+  VText,
+} from './VirtualDOM';
+import { deleteRule, insertRule } from './safeCSSRules';
 
-
-type HTMLElementWithValue = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+type HTMLElementWithValue = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
 
 const IGNORED_ATTRS = [ "autocomplete" ];
 const ATTR_NAME_REGEXP = /([^\t\n\f \/>"'=]+)/; // regexp costs ~
@@ -50,7 +49,7 @@ export default class DOMManager extends ListWalker<Message> {
   private nodeScrollManagers: Map<number, ListWalker<SetNodeScroll>> = new Map()
   private stylesManager: StylesManager
   private focusManager: FocusManager = new FocusManager(this.vElements)
-
+  private selectionManager: SelectionManager = new SelectionManager(this.vElements)
 
   constructor(
     private readonly screen: Screen,
@@ -76,6 +75,10 @@ export default class DOMManager extends ListWalker<Message> {
       this.focusManager.append(m)
       return
     }
+    if (m.tp === MType.SelectionChange) {
+      this.selectionManager.append(m)
+      return
+    }
     if (m.tp === MType.CreateElementNode) {
       if(m.tag === "BODY" && this.upperBodyId === -1) {
         this.upperBodyId = m.id
@@ -432,6 +435,7 @@ export default class DOMManager extends ListWalker<Message> {
     return this.stylesManager.moveReady(t).then(() => {
       // Apply focus
       this.focusManager.move(t)
+      this.selectionManager.move(t)
       // Apply all scrolls after the styles got applied
       this.nodeScrollManagers.forEach(manager => {
         const msg = manager.moveGetLast(t)

frontend/app/player/web/managers/DOM/SelectionManager.ts

@@ -0,0 +1,39 @@
+import type { SelectionChange } from '../../messages'
+import type { VElement} from "./VirtualDOM";
+import ListWalker from '../../../common/ListWalker';
+
+const SELECTION_CLASS = { start: "-openreplay-selection-start", end: "-openreplay-selection-end" }
+
+
+export default class SelectionManager extends ListWalker<SelectionChange> {
+  constructor(private readonly vElements: Map<number, VElement>) {
+    super();
+  }
+
+  private selected: [Element | null, Element | null] = [null, null]
+
+  move(t: number) {
+    const msg = this.moveGetLast(t)
+    if (!msg) { return }
+    console.log(msg)
+    if (msg.selectionStart <= 0) {
+      this.selected[0]?.classList.remove(SELECTION_CLASS.start)
+      this.selected[0].style.border = 'unset'
+      this.selected[1]?.classList.remove(SELECTION_CLASS.end)
+      this.selected = [null, null]
+      return;
+    }
+    const startVNode = this.vElements.get(msg.selectionStart -1)
+    const endVNode = this.vElements.get(msg.selectionEnd -1)
+
+    console.log(startVNode, endVNode, this.vElements)
+
+    if (startVNode && endVNode) {
+      this.selected = [startVNode.node, endVNode.node]
+
+      this.selected[0]?.classList.add(SELECTION_CLASS.start)
+      this.selected[0].style.border = '5px solid red'
+      this.selected[1]?.classList.add(SELECTION_CLASS.end)
+    }
+  }
+}

tracker/tracker/src/main/modules/selection.ts

@@ -12,7 +12,7 @@ function selection(app: App) {
         app.send(SelectionChange(selectionStart, selectionEnd, selectedText))
       }
     } else {
-      app.send(SelectionChange(0, 0, ''))
+      app.send(SelectionChange(-1, -1, ''))
     }
   })
 }