haxeui / haxeui-openfl

The OpenFL backend of the HaxeUI framework -
http://haxeui.org
MIT License
42 stars 14 forks source link

Label doesn't immediately update #48

Open intoxopox opened 4 years ago

intoxopox commented 4 years ago

After a font-size change, Label component doesn't immediately update. Instead it seems to require at least an extra frame.

Example code:

<vbox style="padding: 5px;">
    <button id="myBtn" text="Click Me!" style="font-size: 24px;" />
    <label id="myLabel" text="Testing" style="background-color: #ff0000;" />
</vbox>
package ;

import haxe.Timer;
import haxe.ui.HaxeUIApp;
import haxe.ui.Toolkit;
import haxe.ui.components.Button;
import haxe.ui.components.Label;
import haxe.ui.core.Component;
import haxe.ui.events.MouseEvent;
import haxe.ui.macros.ComponentMacros;
import openfl.display.Bitmap;
import openfl.display.BitmapData;

class Main {
    private static var mainComp:Component;
    private static var bmpData:BitmapData;
    private static var bmp1:Bitmap = new Bitmap();
    private static var bmp2:Bitmap = new Bitmap();

    public static function main() {

        var app = new HaxeUIApp();
        app.ready(function() {
            mainComp = ComponentMacros.buildComponent("assets/main.xml");
            app.addComponent(mainComp);

            app.start();

            var btn:Button = mainComp.findComponent("myBtn");
            btn.onClick = doClick;
        });

    }

    private static function doClick(e:MouseEvent) {
        var fontSize = Std.random(28) + 10;
        Toolkit.styleSheet.parse('.label, label-label {font-size: ${fontSize}px;}', "user", true);
        var label:Label = cast mainComp.findComponent("myLabel");
        label.text = "Size: " + fontSize;
        label.validateComponent();
        label.validateNow();
        bmpData = new BitmapData(150, 150, false);
        bmpData.draw(label);
        bmp1.bitmapData = bmpData;
        bmp1.x = 200;
        // This bitmap isn't updated yet
        mainComp.addChild(bmp1);

        Timer.delay(()-> {
            bmpData = new BitmapData(150, 150, false);
            bmpData.draw(label);
            bmp2.bitmapData = bmpData;
            bmp2.x = 400;
            // This bitmap is what it should look like
            mainComp.addChild(bmp2);
        }, 100);
    }
}
intoxopox commented 4 years ago

So, really, this applies to any component and its styles. For example, changing component's backgroundColor style requires at least a frame, despite validateComponent and validateNow.