Fix mouse coordinates

Author: olivier-lando

CHANGELOG.md

@@ -1,6 +1,9 @@
 # Changelog
 All changes to this project will be documented in this file.
 
+## [0.1.1] - 2022-06-22
+- Fix mouse coordinates when canvas display dimensions is different from it's real dimnsions
+
 ## [0.1.0] - 2022-06-21
 - first beta release
 

dist/index.js

@@ -1,6 +1,6 @@
 {
   "name": "@api.video/media-stream-composer",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "api.video media stream composer",
   "repository": {
     "type": "git",

package-lock.json

@@ -119,6 +119,7 @@ export class MediaStreamComposer {
             displaySettings: this.buildStreamDisplaySettings(streamId, stream.stream, newOptions)
         };
 
+
         this.cleanIndexes();
     }
 
@@ -469,30 +470,31 @@ export class MediaStreamComposer {
                         height: e.dragStart.streamHeight! * change,
                         x: e.dragStart.x - e.dragStart.offsetX! + (e.dragStart.circleRadius! - newRadius),
                         y: e.dragStart.y - e.dragStart.offsetY! + (e.dragStart.circleRadius! - newRadius),
+                        position: "fixed" as StreamPosition,
                     };
                     this.updateStream(e.dragStart.stream.id, newDisplaySettings);
                 } else if (e.dragStart.locations?.indexOf("bottom") !== -1) {
                     const height = e.dragStart.streamHeight! + e.y - e.dragStart.y;
                     const width = e.dragStart.streamWidth! * height / e.dragStart.streamHeight!;
                     const x = e.dragStart.x - e.dragStart.offsetX! - (width - e.dragStart.streamWidth!) / 2;
-                    this.updateStream(e.dragStart.stream.id, { height, width, x });
+                    this.updateStream(e.dragStart.stream.id, { position: "fixed", height, width, x });
                 } else if (e.dragStart.locations?.indexOf("top") !== -1) {
                     const height = e.dragStart.streamHeight! - (e.y - e.dragStart.y);
                     const width = e.dragStart.streamWidth! * height / e.dragStart.streamHeight!;
                     const y = e.dragStart.y - e.dragStart.offsetY! + (e.y - e.dragStart.y);
                     const x = e.dragStart.x - e.dragStart.offsetX! - (width - e.dragStart.streamWidth!) / 2;
-                    this.updateStream(e.dragStart.stream.id, { height, y, x, width });
+                    this.updateStream(e.dragStart.stream.id, { position: "fixed", height, y, x, width });
                 } else if (e.dragStart.locations?.indexOf("left") !== -1) {
                     const width = e.dragStart.streamWidth! - (e.x - e.dragStart.x);
                     const height = e.dragStart.streamHeight! * width / e.dragStart.streamWidth!;
                     const x = e.dragStart.x - e.dragStart.offsetX! + (e.x - e.dragStart.x);
                     const y = e.dragStart.y - e.dragStart.offsetY! - (height - e.dragStart.streamHeight!) / 2;
-                    this.updateStream(e.dragStart.stream.id, { width, x, height, y });
+                    this.updateStream(e.dragStart.stream.id, { position: "fixed", width, x, height, y });
                 } else if (e.dragStart.locations?.indexOf("right") !== -1) {
                     const width = e.dragStart.streamWidth! + (e.x - e.dragStart.x)
                     const height = e.dragStart.streamHeight! * width / e.dragStart.streamWidth!;
                     const y = e.dragStart.y - e.dragStart.offsetY! - (height - e.dragStart.streamHeight!) / 2;
-                    this.updateStream(e.dragStart.stream.id, { width, height, y });
+                    this.updateStream(e.dragStart.stream.id, { position: "fixed", width, height, y });
                 }
             } else if (e.dragStart.stream.options.draggable && e.dragStart.locations?.indexOf("inside") !== -1) {
                 this.updateStream(e.dragStart.stream.id, {

package.json

@@ -55,15 +55,30 @@ export default class MouseEventListener {
     constructor(canvas: HTMLCanvasElement, streams: { [id: string]: StreamDetails }) {
         this.streams = streams;
 
-        const fromMouseEvent = (e: MouseEvent) => ({ x: e.offsetX, y: e.offsetY });
-        const fromTouchEvent = (e: TouchEvent, fct: ((e: { x: number, y: number }) => void)) => {
+        const getDimensionsRatio = () => {
+            return {
+                widthRatio: canvas.clientWidth / canvas.width,
+                heightRatio: canvas.clientHeight / canvas.height,
+            }
+        }
+
+        const fromMouseEvent = (e: MouseEvent) => {
+            const dimensionsRatio = getDimensionsRatio();
+            return {
+                x: e.offsetX / dimensionsRatio.widthRatio,
+                y: e.offsetY / dimensionsRatio.heightRatio,
+            };
+        };
+        const fromTouchEvent = (e: TouchEvent, fct: ((e: Coordinates) => void)) => {
             if (!e.targetTouches[0]) {
                 return;
             }
             const rect = (e.target as HTMLCanvasElement).getBoundingClientRect();
+            const dimensionsRatio = getDimensionsRatio();
+
             fct({
-                x: e.targetTouches[0].pageX - rect.left,
-                y: e.targetTouches[0].pageY - rect.top,
+                x: (e.targetTouches[0].pageX - rect.left) * dimensionsRatio.widthRatio,
+                y: (e.targetTouches[0].pageY - rect.top) * dimensionsRatio.heightRatio,
             });
         };
 
@@ -110,31 +125,31 @@ export default class MouseEventListener {
         }
         this.dragStart = undefined;
     }
-    private mouseDown(e: Coordinates) {
+    private mouseDown(mouseCoordinates: Coordinates) {
         if (this.overStream) {
             this.dragStart = {
                 ...this.overStream,
-                offsetX: e.x - this.overStream.stream.displaySettings.position.x,
-                offsetY: e.y - this.overStream.stream.displaySettings.position.y,
+                offsetX: mouseCoordinates.x - this.overStream.stream.displaySettings.position.x,
+                offsetY: mouseCoordinates.y - this.overStream.stream.displaySettings.position.y,
                 ...(this.overStream.stream.options.mask === "circle" ? { circleRadius: this.overStream.stream.displaySettings.radius } : {}),
                 streamWidth: this.overStream.stream.displaySettings.displayResolution.width,
                 streamHeight: this.overStream.stream.displaySettings.displayResolution.height,
-                x: e.x,
-                y: e.y,
+                x: mouseCoordinates.x,
+                y: mouseCoordinates.y,
                 hasMoved: false,
             };
         } else {
             this.dragStart = {
-                x: e.x,
-                y: e.y,
+                x: mouseCoordinates.x,
+                y: mouseCoordinates.y,
                 hasMoved: false,
             };
         }
     }
-    private mouseMove(e: Coordinates) {
+    private mouseMove(mouseCoordinates: Coordinates) {
         if (this.dragStart) {
             this.onDragListeners.forEach(l => l({
-                ...e,
+                ...mouseCoordinates,
                 dragStart: this.dragStart!,
             }));
             this.dragStart.hasMoved = true;
@@ -161,7 +176,7 @@ export default class MouseEventListener {
                 if (stream.options.mask === "circle") {
                     const centerX = x + stream.displaySettings.radius!;
                     const centerY = y + stream.displaySettings.radius!;
-                    const distance = Math.sqrt(Math.pow(centerX - e.x, 2) + Math.pow(centerY - e.y, 2));
+                    const distance = Math.sqrt(Math.pow(centerX - mouseCoordinates.x, 2) + Math.pow(centerY - mouseCoordinates.y, 2));
                     if (distance <= stream.displaySettings.radius!) {
                         locations.push("inside");
                     }
@@ -170,12 +185,12 @@ export default class MouseEventListener {
                     }
                 } else {
 
-                    if (e.x > x && e.x < x + width && e.y > y && e.y < y + height) locations.push("inside");
+                    if (mouseCoordinates.x > x && mouseCoordinates.x < x + width && mouseCoordinates.y > y && mouseCoordinates.y < y + height) locations.push("inside");
 
-                    if (e.x > x && e.x < x + width && e.y > y - 10 && e.y < y + 10) locations.push("top");
-                    if (e.x > x && e.x < x + width && e.y > y + height - 10 && e.y < y + height + 10) locations.push("bottom");
-                    if (e.y > y && e.y < y + height && e.x > x - 10 && e.x < x + 10) locations.push("left");
-                    if (e.y > y && e.y < y + height && e.x > x + width - 10 && e.x < x + width + 10) locations.push("right");
+                    if (mouseCoordinates.x > x && mouseCoordinates.x < x + width && mouseCoordinates.y > y - 10 && mouseCoordinates.y < y + 10) locations.push("top");
+                    if (mouseCoordinates.x > x && mouseCoordinates.x < x + width && mouseCoordinates.y > y + height - 10 && mouseCoordinates.y < y + height + 10) locations.push("bottom");
+                    if (mouseCoordinates.y > y && mouseCoordinates.y < y + height && mouseCoordinates.x > x - 10 && mouseCoordinates.x < x + 10) locations.push("left");
+                    if (mouseCoordinates.y > y && mouseCoordinates.y < y + height && mouseCoordinates.x > x + width - 10 && mouseCoordinates.x < x + width + 10) locations.push("right");
                 }
 
                 if (locations.length > 0 && stream.displaySettings.index! > index) {
@@ -190,7 +205,7 @@ export default class MouseEventListener {
 
             this.onMoveListeners.forEach(l => l({
                 ...(this.overStream ? this.overStream! : {}),
-                ...e
+                ...mouseCoordinates
             }));
         }
     }