add onDrag as option

tracker/tracker-assist/src/Assist.ts

@@ -37,6 +37,7 @@ export interface Options {
   onCallDeny?: () => any;
   onRemoteControlDeny?: (agentInfo: Record<string, any>) => any;
   onRecordingDeny?: (agentInfo: Record<string, any>) => any;
+  onDragCamera?: (dx: number, dy: number) => void;
   session_calling_peer_key: string;
   session_control_peer_key: string;
   callConfirm: ConfirmOptions;
@@ -106,6 +107,7 @@ export default class Assist {
         onCallStart: () => {},
         onAgentConnect: () => {},
         onRemoteControlStart: () => {},
+        onDragCamera: () => {},
         callConfirm: {},
         controlConfirm: {}, // TODO: clear options passing/merging/overwriting
         recordingConfirm: {},

tracker/tracker-assist/src/Mouse.ts

@@ -1,3 +1,5 @@
+import { hasOpenreplayAttribute } from "./utils.js"
+
 type XY = [number, number]
 type XYDXDY = [number, number, number, number]
 
@@ -7,7 +9,7 @@ export default class Mouse {
   private position: [number,number] = [0,0,]
   private isDragging = false
 
-  constructor(private readonly agentName?: string) {
+  constructor(private readonly agentName?: string, private onDragCamera?: (dx: number, dy: number) => void) {
     this.mouse = document.createElement('div')
     const agentBubble = document.createElement('div')
     const svg ='<svg version="1.1" width="20" height="20" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="" viewBox="8.2 4.9 11.6 18.2"><polygon fill="#FFFFFF" points="8.2,20.9 8.2,4.9 19.8,16.5 13,16.5 12.6,16.6 "></polygon><polygon fill="#FFFFFF" points="17.3,21.6 13.7,23.1 9,12 12.7,10.5 "></polygon><rect x="12.5" y="13.6" transform="matrix(0.9221 -0.3871 0.3871 0.9221 -5.7605 6.5909)" width="2" height="8"></rect><polygon points="9.2,7.3 9.2,18.5 12.2,15.6 12.6,15.5 17.4,15.5 "></polygon></svg>'
@@ -26,6 +28,8 @@ export default class Mouse {
       whiteSpace: 'nowrap',
     })
 
+    this.onDragCamera = onDragCamera
+
     const agentNameStr = this.agentName ? this.agentName.length > 10 ? this.agentName.slice(0, 9) + '...' : this.agentName : 'Agent'
     agentBubble.innerHTML = `<span>${agentNameStr}</span>`
 
@@ -119,9 +123,9 @@ export default class Mouse {
         buttons: 1,
       });
       el.dispatchEvent(moveEvt);
-    }
+      if (hasOpenreplayAttribute(el, 'draggable') && this.onDragCamera) {
-    if ((window as any).__REMOTE__) {
+        this.onDragCamera(dx, dy);
-      (window as any).__REMOTE__.dragCamera(dx, dy);
+      }
     }
   }
 

tracker/tracker-assist/src/RemoteControl.ts

@@ -94,7 +94,7 @@ export default class RemoteControl {
     if (this.mouse) {
       this.resetMouse()
     }
-    this.mouse = new Mouse(agentName)
+    this.mouse = new Mouse(agentName, this.options.onDragCamera)
     this.mouse.mount()
     document.addEventListener('visibilitychange', () => {
       if (document.hidden) this.releaseControl(false, true)

tracker/tracker-assist/src/utils.ts

@@ -0,0 +1,33 @@
+export const DOCS_HOST = 'https://docs.openreplay.com'
+
+const warnedFeatures: { [key: string]: boolean } = {}
+
+export function deprecationWarn(nameOfFeature: string, useInstead: string, docsPath = '/'): void {
+    if (warnedFeatures[nameOfFeature]) {
+      return
+    }
+    console.warn(
+      `OpenReplay: ${nameOfFeature} is deprecated. ${
+        useInstead ? `Please, use ${useInstead} instead.` : ''
+      } Visit ${DOCS_HOST}${docsPath} for more information.`,
+    )
+    warnedFeatures[nameOfFeature] = true
+  }
+
+export function hasOpenreplayAttribute(e: Element, attr: string): boolean {
+    const newName = `data-openreplay-${attr}`
+    if (e.hasAttribute(newName)) {
+      // @ts-ignore
+      if (DEPRECATED_ATTRS[attr]) {
+        deprecationWarn(
+          `"${newName}" attribute`,
+          // @ts-ignore
+          `"${DEPRECATED_ATTRS[attr] as string}" attribute`,
+          '/en/sdk/sanitize-data',
+        )
+      }
+      return true
+    }
+  
+    return false
+  }