Merge pull request #507 from rdkcentral/release/2.11.0

Release - v2.11.0
rdkcentral · Jul 28, 2023 · 4a3ecc1 · 4a3ecc1
2 parents 8378d0e + f3e791a
commit 4a3ecc1
Show file tree

Hide file tree

Showing 16 changed files with 595 additions and 168 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,18 @@
 # Changelog
 
+## v2.11.0
+*31 july 2023*
+
+- Updated typings of Element so `flexItem` can be `false` as referred to in the documentation.
+- Fixed an issue related to applying vertex-specific color to the hole punch fragment.
+- Fixed the regression related to TextTextureRenderer word wrapping. (#488)
+- An unnecessary conditional in the default shader code was removed.
+- Fixed alpha channel detection when using in-process image handling. (#493)
+- Fixed a typo referencing the `renderOffscreen` method of `Element`.
+- Added `webgl2` as the fallback context option if `webgl` or `experimental-webgl` is unavailable. (#496)
+- Added event bubbling support for pointer events. (#485)
+- Added support for getting local coordinates with pointer events (#484)
+
 ## v2.10.0
 *24 apr 2023*
 

diff --git a/docs/HandlingInput/Mouse.md b/docs/HandlingInput/Mouse.md
@@ -4,17 +4,38 @@ If you have a device that allows a Mouse or Pointer device, Lightning can listen
 
 To enable Mouse input, set `enablePointer: true` in your application options.
 
-In your component, you can add the following methods to handle Hover, UnHover, and click events.
+In your component, you can add the following methods to handle Hover, UnHover, and click events. All methods will have the target element available as the first parameter to the function. 
 
 ```
-_handleClick() {
+_handleClick(target, localCoords) {
 }
 
-_handleHover() {
+_handleHover(target) {
 }
 
-_handleUnhover() {
+_handleUnhover(target) {
 }
 ```
 
+## _handleClick(target, localCoordinates)
+
+The `_handleClick()` method is a handler function that can be used in your application to respond to user click events on a specific element (target). It plays a crucial role in capturing and processing user interactions efficiently.
+
+### Parameters 
+
+`target` (Lightning Component): This parameter represents the element on which the user has clicked. It is an instance of the HTMLElement class and provides access to various properties and methods related to the clicked element.
+
+`localCoordinates` (Object): This parameter is an object representing the local coordinates of the exact position where the user has clicked inside the target element. It provides essential information to understand the precise location of the click relative to the target element's coordinate system.
+
+The localCoordinates object typically has the following properties:
+
+`x` (number): The X-coordinate of the click position inside the target element.
+`y` (number): The Y-coordinate of the click position inside the target element.
+
+## Event bubbling
+
+Event bubbling is a crucial aspect of handling events in JavaScript. When an event is triggered on a specific element, it can also affect its parent elements in the WebGL Render Tree. By returning `false` explicitly from the event handler, you can control the event's propagation and enable a parent component to capture the event.
+
+In the context of the `_handleClick()` method, if you return false explicitly at the end of the function, the click event will bubble up to the parent components after executing the necessary logic inside the `_handleClick()` method. This allows parent components to be aware of the click event and perform additional actions based on it.
+
 For a full example - https://github.com/rdkcentral/Lightning/tree/master/examples/mouse-pointer
diff --git a/examples/mouse-pointer/basic-usage.html b/examples/mouse-pointer/basic-usage.html
@@ -19,16 +19,18 @@
 
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8" />
     <script src="../../devtools/lightning-inspect.js"></script>
 </head>
+
 <body style="margin: 0; padding: 0">
     <script type="module">
         import lng from '../../src/lightning.mjs';
         //attachInspector(lng)
 
-        window.onload = function() {
+        window.onload = function () {
 
             const ENABLE_POINTER = true;
 
@@ -40,15 +42,16 @@
                         rect: true,
                         color: 0xffaa7777,
                         collision: true,
-                        Text: {text: {text: 'Click me!'}, x: 25, y: 50, rotation: 0.5}
+                        Text: { text: { text: 'Click me!' }, x: 25, y: 50, rotation: 0.5 }
                     }
                 }
 
-                _handleClick() {
+                _handleClick(el, { x, y }) { 
+                    console.log(x, y)   
                     this.animation({
                         duration: 0.2,
                         actions: [
-                            {p: 'scale', v: {0: 1.0, 0.5: 1.1, 1: 1.0}}
+                            { p: 'scale', v: { 0: 1.0, 0.5: 1.1, 1: 1.0 } }
                         ]
                     }).start();
                 }
@@ -60,25 +63,31 @@
                 _handleUnhover() {
                     this.setSmooth('color', 0xffaa7777);
                 }
+            }
+
 
 
-            }
             class BasicUsageExample extends lng.Application {
                 static _template() {
                     return {
-                        Card1: {type: Card, x: 50, y: 50},
-                        Card2: {type: Card, x: 50 + 200 + 25, y: 50},
-                        Card3: {type: Card, x: 50 + 400 + 50, y: 50, collision: false, alpha: 0.5}
+                        Card1: { type: Card, x: 50, y: 50 },
+                        Card2: { type: Card, x: 50 + 200 + 25, y: 50 },
+                        Card3: { type: Card, x: 50 + 400 + 50, y: 50, collision: true, alpha: 0.5 }
                     }
                 }
 
+                _handleClick() {
+                    console.log('click on app')
+                }
+
             }
 
-            const options = {stage: {w: 1080, h: 720, clearColor: 0xFF000000, canvas2d: false, useImageWorker: false, devicePixelRatio: 2}, debug: true, enablePointer: ENABLE_POINTER}
+            const options = { stage: { w: 1080, h: 720, clearColor: 0xFF000000, canvas2d: false, useImageWorker: false, devicePixelRatio: 2 }, debug: true, enablePointer: ENABLE_POINTER }
             const app = new BasicUsageExample(options);
 
             document.body.appendChild(app.stage.getCanvas());
         }
     </script>
 </body>
-</html>
+
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "author": "Metrological, Bas van Meurs <[email protected]>",
   "name": "@lightningjs/core",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "license": "Apache-2.0",
   "type": "module",
   "types": "dist/index.d.ts",

diff --git a/src/application/Application.mjs b/src/application/Application.mjs
@@ -252,7 +252,7 @@ export default class Application extends Component {
             }
 
             current = nextFocus;
-        } while(true);
+        } while (true);
 
         return path;
     }
@@ -430,7 +430,7 @@ export default class Application extends Component {
 
     _recieveScrollWheel(e) {
         const obj = e;
-        const {clientX, clientY} = obj;
+        const { clientX, clientY } = obj;
 
         if (clientX <= this.stage.w && clientY <= this.stage.h) {
             if (!this.fireTopDownScrollWheelHandler("_captureScroll", obj)) {
@@ -444,18 +444,18 @@ export default class Application extends Component {
         let affected = this._findChildren([], children).reverse();
         let n = affected.length;
 
-        while(n--) {
+        while (n--) {
             const child = affected[n];
             if (child && child[event]) {
                 child._captureScroll(obj);
-                return true; 
+                return true;
             }
         }
         return false;
     }
 
     fireBottomUpScrollWheelHandler(event, obj) {
-        const {clientX, clientY} = obj;
+        const { clientX, clientY } = obj;
         const target = this._getTargetChild(clientX, clientY);
         let child = target;
 
@@ -472,39 +472,51 @@ export default class Application extends Component {
 
     _receiveClick(e) {
         const obj = e;
-        const {clientX, clientY} = obj;
+        const { clientX, clientY } = obj;
 
         if (clientX <= this.stage.w && clientY <= this.stage.h) {
             this.stage.application.fireBottomUpClickHandler(obj);
         }
     }
 
     fireBottomUpClickHandler(obj) {
-        const {clientX, clientY} = obj;
+        const { clientX, clientY } = obj;
         const target = this._getTargetChild(clientX, clientY);
+        const precision = this.stage.getRenderPrecision() / this.stage.getOption('devicePixelRatio');
         let child = target;
 
         // Search tree bottom up for a handler
         while (child !== null) {
             if (child && child["_handleClick"]) {
-                child._handleClick(target);
-                break;
+                const { px, py } = child.core._worldContext;
+                const cx = px * precision;
+                const cy = py * precision;
+
+                const localCoords = {
+                    x: clientX - cx,
+                    y: clientY - cy
+                }
+
+                const returnValue = child._handleClick(target, localCoords);
+                if (returnValue !== false) {
+                    break;
+                }
             }
             child = child.parent;
         }
     }
 
     _receiveHover(e) {
         const obj = e;
-        const {clientX, clientY} = obj;
+        const { clientX, clientY } = obj;
 
         if (clientX <= this.stage.w && clientY <= this.stage.h) {
             this.stage.application.fireBottomUpHoverHandler(obj);
         }
     }
 
     fireBottomUpHoverHandler(obj) {
-        const {clientX, clientY} = obj;
+        const { clientX, clientY } = obj;
         const target = this._getTargetChild(clientX, clientY);
 
         // Only fire handlers when pointer target changes
@@ -562,14 +574,14 @@ export default class Application extends Component {
         let affected = this._findChildren([], children);
         let hoverableChildren = this._withinClickableRange(affected, clientX, clientY);
 
-        hoverableChildren.sort((a,b) => {
+        hoverableChildren.sort((a, b) => {
             // Sort by zIndex and then id
             if (a.zIndex > b.zIndex) {
                 return 1;
             } else if (a.zIndex < b.zIndex) {
                 return -1;
             } else {
-                return a.id > b.id ? 1: -1;
+                return a.id > b.id ? 1 : -1;
             }
         });
 

diff --git a/src/platforms/browser/WebPlatform.mjs b/src/platforms/browser/WebPlatform.mjs
@@ -267,7 +267,7 @@ export default class WebPlatform {
 
     loadSrcTexture({ src, hasAlpha }, cb) {
         let cancelCb = undefined;
-        let isPng = (src.indexOf(".png") >= 0) || src.substr(0, 21) == 'data:image/png;base64';
+        let isPng = (src.toLowerCase().indexOf(".png") >= 0) || src.substr(0, 21) == 'data:image/png;base64';
         let isKtx = src.indexOf('.ktx') >= 0;
         let isPvr = src.indexOf('.pvr') >= 0;
         if (isKtx || isPvr) {
@@ -348,7 +348,8 @@ export default class WebPlatform {
             preserveDrawingBuffer: false
         };
 
-        let gl = canvas.getContext('webgl', opts) || canvas.getContext('experimental-webgl', opts);
+        let gl = canvas.getContext('webgl', opts) || canvas.getContext('experimental-webgl', opts) || canvas.getContext('webgl2', opts);
+
         if (!gl) {
             throw new Error('This browser does not support webGL.');
         }