Merge pull request #39 from sarmadka/main

Touch event enhancements and mouse event bug fix.

Doc/styling.ar.md

@@ -493,17 +493,17 @@ class Animation {
 
 ```
 صنف أبـعاد {
-    عرف عرض: صـحيح = 0؛
-    عرف طول: صـحيح = 0؛
+    عرف عرض: صـحيح؛
+    عرف طول: صـحيح؛
 }
 ```
 
 </div>
 
 ```
 class Dimensions {
-    def width: Int = 0;
-    def height: Int = 0;
+    def width: Int;
+    def height: Int;
 }
 ```
 صنف يحمل معلومات الأبعاد.
@@ -513,6 +513,32 @@ class Dimensions {
 `طول` (`height`) الطول.
 
 
+### مـستطيل (Rectangle)
+
+<div dir=rtl>
+
+```
+صنف مـستطيل {
+    عرف س: صـحيح؛
+    عرف ص: صـحيح؛
+    عرف عرض: صـحيح؛
+    عرف طول: صـحيح؛
+}
+```
+
+</div>
+
+```
+class Rectangle {
+    def x: Int;
+    def y: Int;
+    def width: Int;
+    def height: Int;
+}
+```
+صنف يحمل معلومات مستطيل.
+
+
 ### لـون (Color)
 
 <div dir=rtl>

Doc/styling.en.md

@@ -318,8 +318,8 @@ where keys represent the time and the value being the style corresponding to tha
 
 ```
 class Dimensions {
-    def width: Int = 0;
-    def height: Int = 0;
+    def width: Int;
+    def height: Int;
 }
 ```
 
@@ -329,14 +329,29 @@ A class that holds dimensions information.
 
 `height` the height.
 
+
+### Rectangle
+
+```
+class Rectnagle {
+    def x: Int;
+    def y: Int;
+    def width: Int;
+    def height: Int;
+}
+```
+
+A class that holds a rectangle information.
+
+
 ### Color
 
 ```
 class Color {
-    def red: Int = 0;
-    def green: Int = 0;
-    def blue: Int = 0;
-    def alpha: Int = 0;
+    def red: Int;
+    def green: Int;
+    def blue: Int;
+    def alpha: Int;
 }
 ```
 

Doc/widgets.ar.md

@@ -150,10 +150,10 @@ def onTouchEnd: DomEventSignal[Widget, Array[TouchPayload]];
 
 إشارة بأن اللمس انتهى في الأجهزة ذات شاشات اللمس.
 
-##### عند_تحرك_اللمس (onTouchMove)
+##### عند_تحريك_اللمس (onTouchMove)
 
 ```
-عرف عند_تحرك_اللمس: إشـارة_حدث_دوم[ودجـة، مـصفوفة[حـمولة_لمس]]؛
+عرف عند_تحريك_اللمس: إشـارة_حدث_دوم[ودجـة، مـصفوفة[حـمولة_لمس]]؛
 ```
 
 <div dir=ltr>
@@ -219,6 +219,22 @@ handler this.getDimensions(): Dimensions;
 
 دالة لجلب الأبعاد الحالية للودجة.
 
+##### هات_المستطيل_المحيط (getBoundingRect)
+
+```
+دالة هذا.هات_المستطيل_المحيط(): مـستطيل؛
+```
+
+<div dir=ltr>
+
+```
+handler this.getBoundingRect(): Rectangle;
+```
+
+</div>
+
+دالة لجلب الموقع والأبعاد الحالية للودجة نسبة إلى المشهد، أي الزاوية العليا اليسرى من نافذة المتصفح.
+
 ##### التمس_احتكار_المؤشر (requestPointerLock)
 
 ```
@@ -747,6 +763,7 @@ class MouseButtonPayload {
         عرف نق_ص: عـائم؛
         عرف الزاوية: عـائم؛
         عرف القوة: عـائم؛
+        عرف مغيرة: ثـنائي؛
 }
 ```
 
@@ -765,6 +782,7 @@ class TouchPayload {
     def radiusY: Float;
     def rotationAngle: Float;
     def force: Float;
+    def changed: Bool;
 }
 ```
 
@@ -802,5 +820,8 @@ class TouchPayload {
 `القوة` (`force`) قوة الضغط على الشاشة لهذه اللمسة. تتراوح ما بين 0.0 تمثل لمسا دون أي ضغط و 1.0
 تمثل أقصى قوة ضغط يمكن تحسسها.
 
+`مغيرة` (`changed`) يحدد ما إن كانت هذه اللمسة مغيرة أو جديدة في هذا الحدث. تستخدم هذه القيمة
+لمعرفة اللمسات التي تغيرت منذ الحدث السابق.
+
 </div>
 

Doc/widgets.en.md

@@ -123,6 +123,15 @@ handler this.getDimensions(): Dimensions;
 
 A method to get the widget's dimensions.
 
+##### getBoundingRect
+
+```
+handler this.getBoundingRect(): Rectangle;
+```
+
+A method to get the widget's position and dimensions relative to the upper left corner of the
+viewport.
+
 ##### requestPointerLock
 
 ```
@@ -473,6 +482,7 @@ class TouchPayload {
     def radiusY: Float;
     def rotationAngle: Float;
     def force: Float;
+    def changed: Bool;
 }
 ```
 
@@ -510,3 +520,5 @@ rotated, clockwise, to most accurately cover the area of contact between the use
 `force` The amount of pressure being applied to the surface by the user, as a float between 0.0
 (no pressure) and 1.0 (maximum pressure).
 
+`changed` Specifies whether this touch has been changed or added in the current event.
+

WebPlatform.alusus

@@ -24,6 +24,7 @@ import "WebPlatform/Styling/Length4";
 import "WebPlatform/Styling/Transition";
 import "WebPlatform/Styling/Transform";
 import "WebPlatform/Styling/Dimensions";
+import "WebPlatform/Styling/Rectangle";
 import "WebPlatform/Styling/Background";
 import "WebPlatform/Styling/Flex";
 import "WebPlatform/Styling/Shadow";

WebPlatform/Styling/Rectangle.alusus

@@ -0,0 +1,26 @@
+@merge module WebPlatform {
+    class Rectangle {
+        def x: Int = 0;
+        def y: Int = 0;
+        def width: Int = 0;
+        def height: Int = 0;
+
+        handler this~init() {}
+        handler this~init(x: Int, y: Int, w: Int, h: Int) {
+            this.x = x;
+            this.y = y;
+            this.width = w;
+            this.height = h;
+        }
+        handler this~init(temp_ref[Rectangle]) {
+            this = value;
+        }
+        handler this = temp_ref[Rectangle] {
+            this.x = value.x;
+            this.y = value.y;
+            this.width = value.width;
+            this.height = value.height;
+        }
+    }
+}
+

WebPlatform/Widgets/Widget.alusus

@@ -178,8 +178,8 @@
                 handleSignalConnectionChanged[this.id, onMouseDown, "mousedown", {
                     this.onMouseDown.emit(MouseButtonPayload().{
                         button = data.getInt("button");
-                        posX = data.getInt("offsetX");
-                        posY = data.getInt("offsetY");
+                        posX = data.getFloat("offsetX");
+                        posY = data.getFloat("offsetY");
                     });
                 }];
             }
@@ -188,8 +188,8 @@
                 handleSignalConnectionChanged[this.id, onMouseUp, "mouseup", {
                     this.onMouseUp.emit(MouseButtonPayload().{
                         button = data.getInt("button");
-                        posX = data.getInt("offsetX");
-                        posY = data.getInt("offsetY");
+                        posX = data.getFloat("offsetX");
+                        posY = data.getFloat("offsetY");
                     });
                 }];
             }
@@ -214,6 +214,7 @@
                         radiusY = item.getFloat("radiusY");
                         rotationAngle = item.getFloat("rotationAngle");
                         force = item.getFloat("force");
+                        changed = item.getBool("changed");
                     });
                     ++i;
                 }
@@ -251,6 +252,13 @@
             return d;
         }
 
+        handler this.getBoundingRect(): Rectangle {
+            if this.id == "" return Rectangle(0, 0, 0, 0);
+            def r: Rectangle;
+            getElementBoundingRect(this.id, r);
+            return r;
+        }
+
         handler this.requestPointerLock() {
             if this.id == "" return;
             WebPlatform.requestPointerLock(this.id);

WebPlatform/browser_api.alusus

@@ -7,6 +7,7 @@
     @expname[setElementAttribute] function setElementAttribute (name: ptr[Char], prop: ptr[Char], value: ptr[Char]);
     @expname[getElementAttribute] function getElementAttribute (name: ptr[Char], prop: ptr[Char]): ptr[array[Char]];
     @expname[getElementDimensions] function getElementDimensions (name: ptr[Char], result: ref[Dimensions]);
+    @expname[getElementBoundingRect] function getElementBoundingRect (name: ptr[Char], result: ref[Rectangle]);
     // Element Interaction
     @expname[selectItem] function selectItem (selectId: ptr[Char], selectedValue: ptr[Char]);
     @expname[getSelectedItemValue] function getSelectedItemValue (selectId: ptr[Char]): ptr[array[Char]];

WebPlatform/frontend_helpers.alusus

@@ -92,6 +92,7 @@
         def radiusY: Float;
         def rotationAngle: Float;
         def force: Float;
+        def changed: Bool;
 
         handler this~init() {}
         handler this~init(temp_ref[TouchPayload]) {
@@ -109,6 +110,7 @@
             this.radiusY = value.radiusY;
             this.rotationAngle = value.rotationAngle;
             this.force = value.force;
+            this.changed = value.changed;
         }
     }
 }

api.js

@@ -89,6 +89,16 @@ wasmApi.getElementDimensions = (elementName, pResult) => {
     resultArray[1] = element.clientHeight;
 }
 
+wasmApi.getElementBoundingRect = (elementName, pResult) => {
+    const element = document.getElementById(toJsString(elementName));
+    const resultArray = new Int32Array(wasmMemory.buffer, pResult, 4);
+    const rect = element.getBoundingClientRect();
+    resultArray[0] = rect.x;
+    resultArray[1] = rect.y;
+    resultArray[2] = rect.width;
+    resultArray[3] = rect.height;
+}
+
 // Element Interaction
 
 wasmApi.selectItem = (elementName, value) => {
@@ -110,9 +120,9 @@ wasmApi.scrollElementIntoView = (elementName) => {
 
 wasmApi.fetchNextEvent = () => {
     if (eventsQueue.length === 0) return 0;
-    const result = stringifyEvent(eventsQueue[0]);
+    const result = eventsQueue[0];
     eventsQueue.splice(0, 1);
-    return toWasmString(result);
+    return toWasmString(JSON.stringify(result));
 }
 
 wasmApi.registerElementEventHandler = (elementName, eventName, preventDefault, cbId) => {
@@ -835,10 +845,10 @@ const eventPropMap = {
     loadJsScript: ['success'],
     sendRequest: ['status', 'headers', 'body'],
     timer: [],
-    touchstart: (e) => stringifyTouchEventData(e),
-    touchend: (e) => stringifyTouchEventData(e),
-    touchmove: (e) => stringifyTouchEventData(e),
-    touchcancel: (e) => stringifyTouchEventData(e),
+    touchstart: pickNeededTouchEventData,
+    touchend: pickNeededTouchEventData,
+    touchmove: pickNeededTouchEventData,
+    touchcancel: pickNeededTouchEventData,
     resizeObserver: [],
     pointerlockchange: ['enabled'],
     fullscreenchange: ['enabled'],
@@ -851,22 +861,29 @@ const eventPropMap = {
     exitWakeLock: ['result'],
 };
 
-function stringifyEvent(event) {
-    const obj = { cbId: event.cbId, recurring: event.recurring, eventName: event.eventName, eventData: {} };
-    if (typeof eventPropMap[event.eventName] === 'function') {
-        obj.eventData = eventPropMap[event.eventName](event);
+function pickNeededEventData(eventName, event) {
+    if (typeof eventPropMap[eventName] === 'function') {
+        return eventPropMap[eventName](event);
     } else {
-        for (let k of eventPropMap[event.eventName]) {
-            obj.eventData[k] = event.eventData[k];
+        const eventData = {};
+        for (let k of eventPropMap[eventName]) {
+            eventData[k] = event[k];
         }
+        return eventData;
     }
-    return JSON.stringify(obj);
 }
 
-function stringifyTouchEventData(event) {
+function pickNeededTouchEventData(event) {
     const touches = [];
-    for (let i = 0; i < event.eventData.touches.length; ++i) {
-        const touch = event.eventData.touches.item(i);
+    for (let i = 0; i < event.touches.length; ++i) {
+        const touch = event.touches.item(i);
+        let changed = false;
+        for (let j = 0; j < event.changedTouches.length; ++j) {
+            if (event.changedTouches.item(j).identifier === touch.identifier) {
+                changed = true;
+                break;
+            }
+        }
         touches.push({
             identifier: touch.identifier,
             screenX: touch.screenX,
@@ -879,13 +896,14 @@ function stringifyTouchEventData(event) {
             radiusY: touch.radiusY,
             rotationAngle: touch.rotationAngle,
             force: touch.force,
+            changed: Boolean(changed),
         });
     }
     return touches;
 }
 
 function onEvent (cbId, recurring, eventName, event) {
-    eventsQueue.push({ cbId, recurring, eventName, eventData: event });
+    eventsQueue.push({ cbId, recurring, eventName, eventData: pickNeededEventData(eventName, event) });
 
     // Unblock wasm if it's waiting for events.
     if (eventWaiting) {