Merge pull request #356 from rdkcentral/feature/mouse-cursor-prop

Added css cursor support.
rdkcentral · Dec 21, 2021 · f12d54f · f12d54f
2 parents 477060e + 555e0f3
commit f12d54f
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 0 deletions.
diff --git a/examples/mouse-pointer/cursor.html b/examples/mouse-pointer/cursor.html
@@ -0,0 +1,67 @@
+<!--
+ If not stated otherwise in this file or this component's LICENSE file the
+ following copyright and licenses apply:
+
+ Copyright 2020 Metrological
+
+ Licensed under the Apache License, Version 2.0 (the License);
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+
+<!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() {
+
+            const ENABLE_POINTER = true;
+
+            class Card extends lng.Component {
+                static _template() {
+                    return {
+                        w: 200,
+                        h: 200,
+                        rect: true,
+                        color: 0xffaa7777,
+                        collision: true,
+                        Text: {text: {text: this.bindProp('cursor')}, x: 25, y: 50}
+                    }
+                }
+
+            }
+            class BasicUsageExample extends lng.Application {
+                static _template() {
+                    return {
+                        Card1: {type: Card, x: 50, y: 50, cursor: 'alias'},
+                        Card2: {type: Card, x: 50 + 200 + 25, y: 50, cursor: 'cell'},
+                        Card3: {type: Card, x: 50 + 400 + 50, y: 50, cursor: 'grab'}
+                    }
+                }
+
+            }
+
+            const options = {stage: {w: 900, h: 900, clearColor: 0xFF000000, canvas2d: false, useImageWorker: false}, debug: true, enablePointer: ENABLE_POINTER}
+
+            const app = new BasicUsageExample(options);
+
+            document.body.appendChild(app.stage.getCanvas());
+        }
+    </script>
+</body>
+</html>
diff --git a/src/application/Application.mjs b/src/application/Application.mjs
@@ -67,6 +67,8 @@ export default class Application extends Component {
             this.stage.platform.registerScrollWheelHandler((e) => {
                 this._recieveScrollWheel(e);
             });
+
+            this.cursor = 'default';
         }
     }
 
@@ -522,6 +524,9 @@ export default class Application extends Component {
                     if (c["_handleUnhover"]) {
                         c._handleUnhover(elem);
                     }
+                    if (elem.parent && elem.parent.cursor) {
+                        this.stage.getCanvas().style.cursor = elem.parent.cursor;
+                    }
                 }
             }
 
@@ -535,6 +540,12 @@ export default class Application extends Component {
                 }
             }
 
+            // New element hover cursor
+            const lastElement = diffBranch[0];
+            if (lastElement && lastElement.cursor) {
+                this.stage.getCanvas().style.cursor = lastElement.cursor;
+            }
+
             // Rerun _handleHover for target element in case it's been hovered
             // back from its child
             if (diffBranch.length === 0 && target) {