feat: sync the current translate and scale in the presence mouses

jest.setup.js

@@ -1,4 +1,5 @@
 const fs = require('fs');
+require('jest-canvas-mock');
 
 const { MOCK_CONFIG } = require('./__mocks__/config.mock');
 const config = require('./src/services/config');

package.json

@@ -68,6 +68,7 @@
     "husky": "^8.0.3",
     "jest": "^29.7.0",
     "jest-browser-globals": "^25.1.0-beta",
+    "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "rimraf": "^5.0.5",

src/components/presence-mouse/canvas/index.test.ts

@@ -21,6 +21,15 @@ const MOCK_MOUSE: ParticipantMouse = {
     timestamp: 1710448079918,
   },
   visible: true,
+  camera: {
+    x: 0,
+    y: 0,
+    screen: {
+      width: 1920,
+      height: 1080,
+    },
+    scale: 1,
+  },
 };
 
 const participant1 = { ...MOCK_MOUSE };
@@ -90,6 +99,15 @@ describe('MousePointers on Canvas', () => {
   describe('onMyParticipantMouseMove', () => {
     test('should update my participant mouse position', () => {
       const spy = jest.spyOn(presenceMouseComponent['room']['presence'], 'update');
+      presenceMouseComponent['camera'] = {
+        x: 0,
+        y: 0,
+        scale: 1,
+        screen: {
+          width: 1920,
+          height: 1080,
+        },
+      };
 
       const presenceContainerId = document.createElement('div');
       presenceMouseComponent['containerId'] = 'container';
@@ -100,6 +118,15 @@ describe('MousePointers on Canvas', () => {
 
       expect(spy).toHaveBeenCalledWith({
         ...MOCK_LOCAL_PARTICIPANT,
+        camera: {
+          x: 0,
+          y: 0,
+          scale: 1,
+          screen: {
+            width: 1920,
+            height: 1080,
+          },
+        },
         x: event.x,
         y: event.y,
         visible: true,
@@ -206,6 +233,15 @@ describe('MousePointers on Canvas', () => {
           timestamp: 1710448079918,
         },
         visible: true,
+        camera: {
+          x: 0,
+          y: 0,
+          scale: 1,
+          screen: {
+            width: 1920,
+            height: 1080,
+          },
+        },
       };
 
       presenceMouseComponent['onPresenceLeftRoom']({
@@ -234,6 +270,15 @@ describe('MousePointers on Canvas', () => {
           timestamp: 1710448079918,
         },
         visible: true,
+        camera: {
+          x: 0,
+          y: 0,
+          scale: 1,
+          screen: {
+            width: 1920,
+            height: 1080,
+          },
+        },
       };
 
       const participant2 = MOCK_MOUSE;
@@ -267,8 +312,10 @@ describe('MousePointers on Canvas', () => {
 
       expect(presenceMouseComponent['goToMouseCallback']).toHaveBeenCalledTimes(1);
       expect(presenceMouseComponent['goToMouseCallback']).toHaveBeenCalledWith({
-        x: 20,
-        y: 20,
+        x: participant2.camera.x,
+        y: participant2.camera.y,
+        scaleX: 0,
+        scaleY: 0,
       });
     });
   });

src/components/presence-mouse/canvas/index.ts

@@ -7,7 +7,7 @@ import { StoreType } from '../../../common/types/stores.types';
 import { Logger } from '../../../common/utils';
 import { BaseComponent } from '../../base';
 import { ComponentNames } from '../../types';
-import { ParticipantMouse, PresenceMouseProps, Transform } from '../types';
+import { Camera, ParticipantMouse, PresenceMouseProps, Transform } from '../types';
 
 export class PointersCanvas extends BaseComponent {
   public name: ComponentNames;
@@ -20,7 +20,15 @@ export class PointersCanvas extends BaseComponent {
   private following: string;
   private isPrivate: boolean;
   private localParticipant: Participant;
-  private transformation: Transform = { translate: { x: 0, y: 0 }, scale: 1 };
+  private camera: Camera = {
+    x: 0,
+    y: 0,
+    screen: {
+      width: 0,
+      height: 0,
+    },
+    scale: 1,
+  };
 
   constructor(canvasId: string, options?: PresenceMouseProps) {
     super();
@@ -42,6 +50,7 @@ export class PointersCanvas extends BaseComponent {
 
     const { localParticipant } = this.useStore(StoreType.GLOBAL);
     localParticipant.subscribe();
+    this.getCamera();
   }
 
   /**
@@ -165,6 +174,7 @@ export class PointersCanvas extends BaseComponent {
    * @returns {void}
    */
   private animate = (): void => {
+    this.getCamera();
     this.renderDivWrapper();
     this.updateParticipantsMouses();
 
@@ -181,18 +191,20 @@ export class PointersCanvas extends BaseComponent {
 
     if (!mouse) return;
 
-    const rect = this.canvas.getBoundingClientRect();
-    const { width, height } = rect;
-
-    const { x, y } = mouse;
-
-    const widthHalf = width / 2;
-    const heightHalf = height / 2;
-
-    const translateX = widthHalf - x;
-    const translateY = heightHalf - y;
-
-    if (this.goToMouseCallback) this.goToMouseCallback({ x: translateX, y: translateY });
+    const translatedX = mouse.camera.x;
+    const translatedY = mouse.camera.y;
+    const screenScaleX = this.divWrapper.clientHeight / mouse.camera.screen.height;
+    const scaleToAllowVisibilityX = Math.min(screenScaleX, 1);
+    const screenScaleY = this.divWrapper.clientWidth / mouse.camera.screen.width;
+    const scaleToAllowVisibilityY = Math.min(screenScaleY, 1);
+
+    if (this.goToMouseCallback)
+      this.goToMouseCallback({
+        x: translatedX,
+        y: translatedY,
+        scaleX: scaleToAllowVisibilityX,
+        scaleY: scaleToAllowVisibilityY,
+      });
   };
 
   /** Presence Mouse Events */
@@ -213,14 +225,15 @@ export class PointersCanvas extends BaseComponent {
     const transformedPoint = new DOMPoint(x, y).matrixTransform(invertedMatrix);
 
     const coordinates = {
-      x: (transformedPoint.x - this.transformation.translate.x) / this.transformation.scale,
-      y: (transformedPoint.y - this.transformation.translate.y) / this.transformation.scale,
+      x: transformedPoint.x,
+      y: transformedPoint.y,
     };
 
     this.room.presence.update({
       ...this.localParticipant,
       ...coordinates,
       visible: !this.isPrivate,
+      camera: this.camera,
     });
   }, 30);
 
@@ -271,6 +284,30 @@ export class PointersCanvas extends BaseComponent {
     });
   };
 
+  /**
+   * @function getCamera
+   * @description - retrieves the camera information from the canvas context's transform.
+   * The camera information includes the current translation (x, y) and scale.
+   */
+  private getCamera = () => {
+    const context = this.canvas?.getContext('2d');
+    const transform = context?.getTransform();
+
+    const currentTranslateX = transform?.e;
+    const currentTranslateY = transform?.f;
+    const currentScale = transform?.a;
+
+    this.camera = {
+      screen: {
+        width: this.divWrapper.clientHeight,
+        height: this.divWrapper.clientWidth,
+      },
+      x: currentTranslateX,
+      y: currentTranslateY,
+      scale: currentScale,
+    };
+  };
+
   /**
    * @function renderPresenceMouses
    * @description add presence mouses to screen
@@ -308,11 +345,11 @@ export class PointersCanvas extends BaseComponent {
 
     const currentTranslateX = transform?.e;
     const currentTranslateY = transform?.f;
+    const currentScaleWidth = transform.a;
+    const currentScaleHeight = transform.d;
 
-    const x =
-      this.transformation.translate.x + (savedX + currentTranslateX) * this.transformation.scale;
-    const y =
-      this.transformation.translate.y + (savedY + currentTranslateY) * this.transformation.scale;
+    const x = savedX * currentScaleWidth + currentTranslateX;
+    const y = savedY * currentScaleHeight + currentTranslateY;
 
     const isVisible =
       this.divWrapper.clientWidth > x && this.divWrapper.clientHeight > y && mouse.visible;
@@ -376,6 +413,6 @@ export class PointersCanvas extends BaseComponent {
    * @param {Transform} transformation Which transformations to apply
    */
   public transform(transformation: Transform) {
-    this.transformation = transformation;
+    console.warn('[SuperViz] - transform method not available when container is a canvas element.');
   }
 }

src/components/presence-mouse/html/index.test.ts

@@ -43,6 +43,15 @@ describe('MousePointers on HTML', () => {
         timestamp: 1710448079918,
       },
       visible: true,
+      camera: {
+        x: 0,
+        y: 0,
+        scale: 1,
+        screen: {
+          width: 1920,
+          height: 1080,
+        },
+      },
     };
 
     const participant1 = { ...MOCK_MOUSE };
@@ -421,7 +430,16 @@ describe('MousePointers on HTML', () => {
         x: 30,
         y: 30,
         visible: true,
-      });
+        camera: {
+          scale: 1,
+          x: 10,
+          y: 10,
+          screen: {
+            height: 0,
+            width: 0,
+          },
+        },
+      } as ParticipantMouse);
     });
 
     test('should not call room.presence.update if isPrivate', () => {
@@ -461,7 +479,7 @@ describe('MousePointers on HTML', () => {
             left: 10,
             right: 100,
             top: 20,
-            bottom: 90
+            bottom: 90,
           } as any),
       );
 
@@ -639,7 +657,7 @@ describe('MousePointers on HTML', () => {
       presenceMouseComponent['goToPresenceCallback'] = callback;
       presenceMouseComponent['goToMouse']('unit-test-participant2-id');
 
-      expect(callback).toHaveBeenCalledWith({ x, y });
+      expect(callback).toHaveBeenCalledWith({ x, y, scaleX: 0, scaleY: 0 });
     });
   });