rdkcentral · uguraslan · Jul 28, 2023 · May 15, 2023 · May 18, 2023 · May 23, 2023
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/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 <b.van.meurs@metrological.com>",
   "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.');
         }