Focus; fix default focus model event propagation #52

fix #52
fix #49
fix #37
related #44

Author: ruby0x1

mint/Control.hx

@@ -338,8 +338,7 @@ class Control {
 
         for(_child in children) {
 
-                //:todo: this filters by mouse but is a general function
-            if(_child.contains(_x, _y) && _child.mouse_input && _child.visible) {
+            if(_child.visible && _child.contains(_x, _y)) {
 
                 if(_child.depth >= highest_depth) {
                     highest_child = _child;
@@ -788,7 +787,7 @@ class Control {
         if(canvas == this) return;
 
         var _pre = canvas.captured == this;
-        
+
         canvas.captured = this;
 
         if(!_pre) oncaptured.emit(true);

mint/focus/Focus.hx

@@ -8,7 +8,7 @@ class Focus {
     public var canvas: mint.Canvas;
 
     public function new(_canvas:mint.Canvas) {
-        
+
         canvas = _canvas;
 
         canvas.onmousemove.listen(mousemove);
@@ -56,7 +56,7 @@ class Focus {
     function mousedown(e:MouseEvent, target:mint.Control) {
         if(canvas.focused != null && canvas.focused.mouse_input) {
             canvas.focused.mousedown(e);
-        } 
+        }
 
         if(marked_mouse()) canvas.marked.mousedown(e);
 
@@ -65,7 +65,7 @@ class Focus {
     function mouseup(e:MouseEvent, target:mint.Control) {
         if(canvas.focused != null && canvas.focused.mouse_input) {
             canvas.focused.mouseup(e);
-        } 
+        }
 
         if(marked_mouse()) canvas.marked.mouseup(e);
 
@@ -74,7 +74,7 @@ class Focus {
     function mousewheel(e:MouseEvent, target:mint.Control) {
         if(canvas.focused != null && canvas.focused.mouse_input) {
             canvas.focused.mousewheel(e);
-        } 
+        }
 
         if(marked_mouse()) canvas.marked.mousewheel(e);
 
@@ -84,59 +84,77 @@ class Focus {
         return canvas.marked != canvas.focused && canvas.marked != null && canvas.marked.mouse_input;
     }
 
-    function mousemove(e:MouseEvent, target:mint.Control) {
+    function get_markable(_target:mint.Control, _x:Float, _y:Float) {
+        
+        var _highest = _target.topmost_child_at_point(_x, _y);
+            
+        if(_highest == null && _highest == _target) {
+            return null;
+        }
 
-        if(canvas.ishovered) {
+        // now if we have the highest possible control, 
+        // we have to walk backward up the tree, 
+        // looking for the highest one with mouse input
 
-                //first we check if the mouse is still inside the focused element
-            var _marked = canvas.marked;
-            if(_marked != null) {
+        var _current = _highest;
+        var _canvas = _target.canvas;
 
-                if(_marked.contains(e.x, e.y)) {
+        while(true) {
 
-                    var _target = _marked.parent;
-                    if(_target == null) _target = canvas;
+            if(_current == null || _current == _canvas) {
+                return _current;
+            }
 
-                    var _hovered = _target.topmost_child_at_point(e.x, e.y);
-                    if(_hovered != null && _hovered != _marked && _hovered != canvas) {
+            if(_current.mouse_input) {
+                return _current;
+            }
 
-                            //reset the previous
-                        unmark_control(_marked, e);
-                            //set the newly hovered one
-                        mark_control(_hovered, e);
-                            //change the focused item
-                        canvas.marked = _hovered;
+            _current = _current.parent;
 
-                    } //_hovered != null
+        } //while
 
-                } else { //_marked.contains
+            //unreachable?
+        return null;
 
-                        //unfocus the existing one
-                    unmark_control(_marked, e);
+    } //get_markable
 
-                        //find a new one, if any
-                    find_marked(e);
+    function mousemove(e:MouseEvent, _) {
 
-                } //_marked inside
+        var _mark_target = canvas;
+        var _captured = canvas.captured;
 
-            } else { //_marked != null
+        if(_captured != null && _captured.mouse_input) {
 
-                    //nothing focused at the moment, check that the mouse is inside our canvas first
-                if( canvas.ishovered ) {
-                    find_marked(e);
-                } else {
-                    reset_marked(e);
-                }
+            var _markable = get_markable(_captured, e.x, e.y);
+            
+            if(_markable != null) {
+                mark_control(_markable, e);
+            }
 
-            } //no currently marked
+            if(marked_mouse()) canvas.marked.mousemove(e);
 
-        } //canvas.ishovered
+        } else if(canvas.ishovered) {
 
-        if(canvas.focused != null && canvas.focused.mouse_input) {
-            canvas.focused.mousemove(e);
-        } 
+                //if the mouse has left the current marked control, unmark
+            if(canvas.marked != null && !canvas.marked.contains(e.x, e.y)) {
+                unmark_control(canvas.marked, e);
+            }
+
+                // the focused control always gets the events
+            if(canvas.focused != null && canvas.focused.mouse_input) {
+                canvas.focused.mousemove(e);
+            }
+
+                //get the marked control from the canvas
+            var _markable = get_markable(canvas, e.x, e.y);
+            
+            if(_markable != null) {
+                mark_control(_markable, e);
+            }
 
-        if(marked_mouse()) canvas.marked.mousemove(e);
+            if(marked_mouse()) canvas.marked.mousemove(e);
+
+        } //canvas is hovered
 
     } //mousemove
 
@@ -146,7 +164,7 @@ class Focus {
             unmark_control(_control, e);
         }
 
-    } //reset_focus
+    } //reset_marked
 
     function get_focusable( _x:Float, _y:Float ) {
 
@@ -172,7 +190,7 @@ class Focus {
 
     function unmark_control(_control:Control, e:MouseEvent) {
 
-        if(_control != null) {
+        if(_control != null && _control.ismarked) {
 
             _control.unmark();
 
@@ -184,14 +202,16 @@ class Focus {
 
     function mark_control(_control:Control, e:MouseEvent) {
 
-        if(_control != null) {
+        if(_control != null && !_control.ismarked) {
+
+            reset_marked(canvas.marked);
 
             _control.mark();
 
             if(_control.mouse_input) _control.mouseenter(e);
 
         }
 
-    } //set_focused
+    } //mark_control
 
 }

tests/test_luxe/src/Main.hx

@@ -87,6 +87,7 @@ class Main extends luxe.Game {
         state.add( new tests.KitchenSink({ name:'state0' }) );
         state.add( new tests.Scrolling({ name:'state1' }) );
         state.add( new tests.Depth({ name:'state2' }) );
+        state.add( new tests.Focus({ name:'state3' }) );
 
         count = Lambda.count( state._states );
 

tests/test_luxe/src/tests/Focus.hx

@@ -0,0 +1,51 @@
+package tests;
+
+import luxe.Color;
+import luxe.Vector;
+import luxe.Input;
+import luxe.Text;
+import luxe.States;
+
+import mint.Control;
+import mint.types.Types;
+import mint.render.luxe.LuxeMintRender;
+import mint.render.luxe.Convert;
+import mint.render.luxe.Label;
+
+import mint.layout.margins.Margins;
+
+class Focus extends State {
+
+    var scroll: mint.Scroll;
+    var scroll2: mint.Scroll;
+
+    override function onenter<T>(_:T) {
+
+        Main.disp.text = 'Test: Focus';
+
+        var _r0 = new mint.Scroll({
+            parent: Main.canvas, name:'r0',
+            x:20, y:20, w:256, h: 256,
+            options: { color:new Color().rgb(0x000000) }
+        });
+
+        var _l0 = new mint.Label({
+            parent: _r0, name:'l0',
+            x:0, y:0, w:256, h:264,
+            options: {},
+            mouse_input: true,
+            text: 'HOVERS'
+        });
+
+        _l0.onmouseenter.listen(function(_,_) { trace('enter ' + Luxe.time); });
+        _l0.onmouseleave.listen(function(_,_) { trace('leave ' + Luxe.time); });
+
+
+    } //onenter
+
+    override function onleave<T>(_:T) {
+
+    } //onleave
+
+
+} //Focus

tests/test_luxe/src/tests/KitchenSink.hx

@@ -11,6 +11,7 @@ import mint.types.Types;
 import mint.render.luxe.Convert;
 import mint.render.luxe.Label;
 import mint.layout.margins.Margins;
+import luxe.utils.Maths;
 
 class KitchenSink extends State {
 
@@ -257,12 +258,19 @@ class KitchenSink extends State {
 
     function create_basics() {
 
-        new mint.Label({
+        var _panel = new mint.Panel({
             parent: canvas,
+            name: 'label_panel',
+            x:5, y:5, w:100, h:42,
+            mouse_input: false, //this is to test that mouse events land in the children when the parent has no mouse input
+        });
+
+        new mint.Label({
+            parent: _panel,
             name: 'labelmain',
-            x:10, y:10, w:100, h:32,
-            text: 'hello mint',
-            align:left,
+            x:0, y:0, w:100, h:42,
+            text: 'mint label',
+            align: center,
             text_size: 14,
             onclick: function(e,c) {trace('hello mint! ${Luxe.time}' );}
         });
@@ -308,17 +316,17 @@ class KitchenSink extends State {
                 name : _s.name+'.label', text: '${_s.value}'
             });
 
-            _s.onchange.listen(function(_val,_) { _l.text = '$_val'; });
+            _s.onchange.listen(function(_val,_) { _l.text = '${Maths.fixed(_val,3)}'; });
 
         } //make_slider
 
         make_slider('slider1', 10, 330, 128, 24, 0x9dca63, -100, 100, 0, 10, false);
         make_slider('slider2', 10, 357, 128, 24, 0x9dca63, 0, 100, 50, 1, false);
         make_slider('slider3', 10, 385, 128, 24, 0xf6007b, null, null, null, null, false);
 
-        make_slider('slider4', 14, 424, 32, 128, 0x9dca63, 0, 100, 20, 10, true);
-        make_slider('slider5', 56, 424, 32, 128, 0x9dca63, 0, 100, 0.3, 1, true);
-        make_slider('slider6', 98, 424, 32, 128, 0xf6007b, null, null, null, null, true);
+        make_slider('slider4', 12, 424, 36, 128, 0x9dca63, 0, 100, 20, 10, true);
+        make_slider('slider5', 56, 424, 36, 128, 0x9dca63, 0, 100, 0.3, 1, true);
+        make_slider('slider6', 101, 424, 36, 128, 0xf6007b, null, null, null, null, true);
 
         new mint.Button({
             parent: canvas,