dial example: rotate dial only if initial touch is within its bounds (#…

…7142)

Add a boundary check to ensure that rotation only occurs when the
first pointer contact is inside the circular dial area.
If the initial touch is outside, the dial remains stationary.

Mouse cursor is set properly to show current status.

examples/dial/dial.slint

@@ -76,26 +76,30 @@ export component AppWindow inherits Window {
                     property <length> relativeX;
                     property <length> relativeY;
                     property <angle> newAngle;
+                    property <bool> hovering: Math.pow((ta.mouse-x - centerX) / 1px, 2) + Math.pow((ta.mouse-y - centerY) / 1px, 2) < metalKnob.width / 2px * metalKnob.height / 2px;
+                    property <bool> touching: false;
                     property <angle> deltaDegrees;
-                    property <bool> firstTouch: false;
                     width: parent.width;
                     height: parent.height;
+                    mouse-cursor: touching ? move : hovering ? grab : default;
 
-                    clicked => {
-                        firstTouch = false;
-                    }
-
-                    moved => {
+                    pointer-event(event) => {
                         relativeX = ta.mouse-x - centerX;
                         relativeY = ta.mouse-y - centerY;
                         newAngle = AppState.normalizeAngle(atan2(relativeY / 1px, relativeX / 1px));
-                        // on first touch work out what angle the dial is at. Then use this to create a delta
-                        // So further movement will be relative to this angle.
-                        if !firstTouch {
-                            firstTouch = true;
-                            deltaDegrees = AppState.normalizeAngle(AppState.angle - newAngle);
-                        } else {
-                            AppState.angle = AppState.normalizeAngle(deltaDegrees + newAngle);
+                        if event.kind == PointerEventKind.down {
+                            if hovering {
+                                touching = true;
+                                // on first touch work out what angle the dial is at. Then use this to create a delta
+                                // So further movement will be relative to this angle.
+                                deltaDegrees = AppState.normalizeAngle(AppState.angle - newAngle);
+                            }
+                        } else if event.kind == PointerEventKind.up {
+                            touching = false;
+                        } else if event.kind == PointerEventKind.move {
+                            if touching {
+                                AppState.angle = AppState.normalizeAngle(deltaDegrees + newAngle);
+                            }
                         }
                     }
                 }