search

haxeui / haxeui-flixel

The Flixel backend of the HaxeUI framework
MIT License
48 stars 15 forks source link

Slider selection cursor in wrong position when .pos is set via code #26

Open Bloodninj opened 2 years ago

Bloodninj commented 2 years ago

Expected Behavior

When the pos property of a <slider> within a <sidebar> is set via code, both the background blue graphic and the selection cursor on the slider should move (or expand/shrink in the background's case) to match the new value.

Current Behavior

The background of the slider changes to show the new value, but the selection cursor on the slider resets position to 0.

Steps to Reproduce (for bugs)

  1. Create a <slider> within a <sidebar> and add it to the state
  2. Set the onChange function of the slider to update a variable containing, for example, volume for music
  3. Set the pos property of the slider once the sidebar has been shown via .show()

Media

https://user-images.githubusercontent.com/79861976/154064869-0f9a628c-bd59-4ec5-bd03-48e303ecf5c1.mp4

Test app / minimal test case

PlayState.hx:

package;

import flixel.FlxG;
import flixel.FlxState;
import haxe.ui.Toolkit;
import haxe.ui.containers.SideBar;

class PlayState extends FlxState
{
    var gameVolume = 0.5;
    var mainView:MainView;

    override public function create()
    {
        super.create();
        Toolkit.init();
        Toolkit.autoScale = false;
        mainView = new MainView();
        mainView.setPosition(0, 0);
        add(mainView);

        mainView.mySlider.onChange = (_) ->
        {
            gameVolume = mainView.mySlider.value / 100;
        }
    }

    override public function update(elapsed:Float)
    {
        super.update(elapsed);
        if (FlxG.keys.anyJustPressed([SPACE]))
        {
            if (mainView.hidden)
            {
                mainView.show();
                mainView.mySlider.pos = gameVolume * 100;
            }
            else
                mainView.hide();
        }
    }
}

@:build(haxe.ui.macros.ComponentMacros.build("assets/ui/sliderTest.xml"))
class MainView extends SideBar
{
    override public function new()
    {
        super();
        // mySlider.pos = 30;
    }
}

sliderTest.xml:

<?xml version="1.0" encoding="UTF-8"?>
<sidebar width="200px" height="100%">

    <vbox width="100%" height="100%">
        <slider id="mySlider" width="100px" step="10" majorTicks="20" minorTicks="10" />
    </vbox>

</sidebar>

Context

Trying to keep my game's music volume in a variable and set the slider to the right position when the sidebar menu is hidden and shown.

Your Environment