Update the mouse io to give scratch coordinates and client coordinates

Fixes GUI #642 https://github.com/LLK/scratch-gui/issues/642

Fixes GUI #179 https://github.com/LLK/scratch-gui/issues/179

src/blocks/scratch3_motion.js

@@ -64,8 +64,8 @@ class Scratch3MotionBlocks {
         let targetX = 0;
         let targetY = 0;
         if (targetName === '_mouse_') {
-            targetX = util.ioQuery('mouse', 'getClampedX');
+            targetX = util.ioQuery('mouse', 'getScratchX');
-            targetY = util.ioQuery('mouse', 'getClampedY');
+            targetY = util.ioQuery('mouse', 'getScratchY');
         } else if (targetName === '_random_') {
             const stageWidth = this.runtime.constructor.STAGE_WIDTH;
             const stageHeight = this.runtime.constructor.STAGE_HEIGHT;
@@ -106,8 +106,8 @@ class Scratch3MotionBlocks {
         let targetX = 0;
         let targetY = 0;
         if (args.TOWARDS === '_mouse_') {
-            targetX = util.ioQuery('mouse', 'getClampedX');
+            targetX = util.ioQuery('mouse', 'getScratchX');
-            targetY = util.ioQuery('mouse', 'getClampedY');
+            targetY = util.ioQuery('mouse', 'getScratchY');
         } else {
             const pointTarget = this.runtime.getSpriteTargetByName(args.TOWARDS);
             if (!pointTarget) return;

src/blocks/scratch3_sensing.js

@@ -120,8 +120,8 @@ class Scratch3SensingBlocks {
     touchingObject (args, util) {
         const requestedObject = args.TOUCHINGOBJECTMENU;
         if (requestedObject === '_mouse_') {
-            const mouseX = util.ioQuery('mouse', 'getX');
+            const mouseX = util.ioQuery('mouse', 'getClientX');
-            const mouseY = util.ioQuery('mouse', 'getY');
+            const mouseY = util.ioQuery('mouse', 'getClientY');
             return util.target.isTouchingPoint(mouseX, mouseY);
         } else if (requestedObject === '_edge_') {
             return util.target.isTouchingEdge();
@@ -147,8 +147,8 @@ class Scratch3SensingBlocks {
         let targetX = 0;
         let targetY = 0;
         if (args.DISTANCETOMENU === '_mouse_') {
-            targetX = util.ioQuery('mouse', 'getClampedX');
+            targetX = util.ioQuery('mouse', 'getScratchX');
-            targetY = util.ioQuery('mouse', 'getClampedY');
+            targetY = util.ioQuery('mouse', 'getScratchY');
         } else {
             const distTarget = this.runtime.getSpriteTargetByName(
                 args.DISTANCETOMENU
@@ -176,11 +176,11 @@ class Scratch3SensingBlocks {
     }
 
     getMouseX (args, util) {
-        return util.ioQuery('mouse', 'getClampedX');
+        return util.ioQuery('mouse', 'getScratchX');
     }
 
     getMouseY (args, util) {
-        return util.ioQuery('mouse', 'getClampedY');
+        return util.ioQuery('mouse', 'getScratchY');
     }
 
     getMouseDown (args, util) {

src/io/mouse.js

@@ -40,10 +40,20 @@ class Mouse {
      */
     postData (data) {
         if (data.x) {
-            this._x = data.x - (data.canvasWidth / 2);
+            this._clientX = data.x;
+            this._scratchX = MathUtil.clamp(
+                480 * ((data.x / data.canvasWidth) - 0.5),
+                -240,
+                240
+            );
         }
         if (data.y) {
-            this._y = data.y - (data.canvasHeight / 2);
+            this._clientY = data.y;
+            this._scratchY = MathUtil.clamp(
+                -360 * ((data.y / data.canvasHeight) - 0.5),
+                -180,
+                180
+            );
         }
         if (typeof data.isDown !== 'undefined') {
             this._isDown = data.isDown;
@@ -54,35 +64,35 @@ class Mouse {
     }
 
     /**
-     * Get the X position of the mouse.
+     * Get the X position of the mouse in client coordinates.
      * @return {number} Non-clamped X position of the mouse cursor.
      */
-    getX () {
+    getClientX () {
-        return this._x;
+        return this._clientX;
     }
 
     /**
-     * Get the Y position of the mouse.
+     * Get the Y position of the mouse in client coordinates.
      * @return {number} Non-clamped Y position of the mouse cursor.
      */
-    getY () {
+    getClientY () {
-        return -this._y;
+        return this._clientY;
     }
 
     /**
-     * Get the stage-clamped X position of the mouse.
+     * Get the X position of the mouse in scratch coordinates.
      * @return {number} Clamped X position of the mouse cursor.
      */
-    getClampedX () {
+    getScratchX () {
-        return MathUtil.clamp(this._x, -240, 240);
+        return this._scratchX;
     }
 
     /**
-     * Get the stage-clamped Y position of the mouse.
+     * Get the Y position of the mouse in scratch coordinates.
      * @return {number} Clamped Y position of the mouse cursor.
      */
-    getClampedY () {
+    getScratchY () {
-        return MathUtil.clamp(-this._y, -180, 180);
+        return this._scratchY;
     }
 
     /**

src/sprites/rendered-target.js

@@ -616,8 +616,7 @@ class RenderedTarget extends Target {
             // Limits test to this Drawable, so this will return true
             // even if the clone is obscured by another Drawable.
             const pickResult = this.runtime.renderer.pick(
-                x + (this.runtime.constructor.STAGE_WIDTH / 2),
+                x, y,
-                -y + (this.runtime.constructor.STAGE_HEIGHT / 2),
                 null, null,
                 [this.drawableID]
             );

test/unit/io_mouse.js

@@ -8,10 +8,10 @@ test('spec', t => {
 
     t.type(m, 'object');
     t.type(m.postData, 'function');
-    t.type(m.getX, 'function');
+    t.type(m.getClientX, 'function');
-    t.type(m.getY, 'function');
+    t.type(m.getClientY, 'function');
-    t.type(m.getClampedX, 'function');
+    t.type(m.getScratchX, 'function');
-    t.type(m.getClampedY, 'function');
+    t.type(m.getScratchY, 'function');
     t.type(m.getIsDown, 'function');
     t.end();
 });
@@ -27,10 +27,10 @@ test('mouseUp', t => {
         canvasWidth: 480,
         canvasHeight: 360
     });
-    t.strictEquals(m.getX(), -260);
+    t.strictEquals(m.getClientX(), -20);
-    t.strictEquals(m.getY(), 170);
+    t.strictEquals(m.getClientY(), 10);
-    t.strictEquals(m.getClampedX(), -240);
+    t.strictEquals(m.getScratchX(), -240);
-    t.strictEquals(m.getClampedY(), 170);
+    t.strictEquals(m.getScratchY(), 170);
     t.strictEquals(m.getIsDown(), false);
     t.end();
 });
@@ -46,10 +46,27 @@ test('mouseDown', t => {
         canvasWidth: 480,
         canvasHeight: 360
     });
-    t.strictEquals(m.getX(), -230);
+    t.strictEquals(m.getClientX(), 10);
-    t.strictEquals(m.getY(), -220);
+    t.strictEquals(m.getClientY(), 400);
-    t.strictEquals(m.getClampedX(), -230);
+    t.strictEquals(m.getScratchX(), -230);
-    t.strictEquals(m.getClampedY(), -180);
+    t.strictEquals(m.getScratchY(), -180);
     t.strictEquals(m.getIsDown(), true);
     t.end();
 });
+
+test('at zoomed scale', t => {
+    const rt = new Runtime();
+    const m = new Mouse(rt);
+
+    m.postData({
+        x: 240,
+        y: 540,
+        canvasWidth: 960,
+        canvasHeight: 720
+    });
+    t.strictEquals(m.getClientX(), 240);
+    t.strictEquals(m.getClientY(), 540);
+    t.strictEquals(m.getScratchX(), -120);
+    t.strictEquals(m.getScratchY(), -90);
+    t.end();
+});