feat(input): add location of mouse clicks

tomaisthorpe · Aug 22, 2023 · 7efb324 · 7efb324
1 parent da2f643
commit 7efb324
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 6 deletions.
diff --git a/.changeset/early-mugs-decide.md b/.changeset/early-mugs-decide.md
@@ -0,0 +1,5 @@
+---
+'@tedengine/ted': minor
+---
+
+Add location of mouse clicks
diff --git a/apps/docs/src/input/mouse.ts b/apps/docs/src/input/mouse.ts
@@ -28,7 +28,7 @@ class Cube extends TPawn implements TActorWithOnUpdate {
     engine.events.addListener<TMouseUpEvent>(
       TEventTypesInput.MouseUp,
       (e: TMouseUpEvent) => {
-        console.log('You clicked on the game!');
+        console.log(`You clicked on the game at (${e.x},${e.y})!`);
       }
     );
   }

diff --git a/packages/ted/src/input/events.ts b/packages/ted/src/input/events.ts
@@ -21,11 +21,19 @@ export interface TKeyDownEvent {
 export interface TMouseUpEvent {
   type: TEventTypesInput.MouseUp;
   subType: string; // Button released
+  clientX: number;
+  clientY: number;
+  x: number;
+  y: number;
 }
 
 export interface TMouseDownEvent {
   type: TEventTypesInput.MouseDown;
   subType: string; // Button pressed
+  clientX: number;
+  clientY: number;
+  x: number;
+  y: number;
 }
 
 export interface TMouseMoveEvent {

diff --git a/packages/ted/src/input/mouse.ts b/packages/ted/src/input/mouse.ts
@@ -10,13 +10,9 @@ export default class TMouse {
 
   private addListeners(eventQueue: TEventQueue) {
     window.addEventListener('mousemove', (e) => {
-      const offset = this.canvas.getBoundingClientRect();
       const event: TMouseMoveEvent = {
         type: TEventTypesInput.MouseMove,
-        clientX: e.clientX,
-        clientY: e.clientY,
-        x: e.clientX - offset.left,
-        y: e.clientY - offset.top,
+        ...this.getMouseLocation(e),
       };
 
       eventQueue.broadcast(event);
@@ -26,6 +22,7 @@ export default class TMouse {
       const event: TMouseUpEvent = {
         type: TEventTypesInput.MouseUp,
         subType: e.button.toString(),
+        ...this.getMouseLocation(e),
       };
 
       eventQueue.broadcast(event);
@@ -35,9 +32,20 @@ export default class TMouse {
       const event: TMouseDownEvent = {
         type: TEventTypesInput.MouseDown,
         subType: e.button.toString(),
+        ...this.getMouseLocation(e),
       };
 
       eventQueue.broadcast(event);
     });
   }
+
+  private getMouseLocation(e: MouseEvent) {
+    const offset = this.canvas.getBoundingClientRect();
+    return {
+      clientX: e.clientX,
+      clientY: e.clientY,
+      x: e.clientX - offset.left,
+      y: e.clientY - offset.top,
+    };
+  }
 }