VerticalLayout refresh and AssetLoader

chatmurai74

Hi !
In a Drawer subclass, I have a LayoutGroup like this:

	pullableEdge = TOP;
            ...
            override private function initialize():Void {
	super.initialize();
            var mainLaytoutGroup = new LayoutGroup();
        var mainVerticalLayout = new VerticalLayout();
	mainVerticalLayout.setPadding(spacing);
	mainVerticalLayout.gap = spacing;
	mainVerticalLayout.horizontalAlign = JUSTIFY;
	mainVerticalLayout.verticalAlign = TOP;
	mainLaytoutGroup.layout = mainVerticalLayout;
            ...
            var ppal:AssetLoader = new AssetLoader();
	mainLaytoutGroup.addChild(ppal);

The thing is I can't set the source of the AssetLoader yet because we are inside the initialize() function and I don't know the picture URL yet. It will be set later by a populateData() method.

The pictures loads well, but the rendering of the layout is wrong.
What I get:

What I get if URL I set the AssetLoader source (hardcoded) in the initialize() function:

I tried to add a Complete event listener on the AssetLoader and then use mainLaytoutGroup.readjustLayout, but it didn't work.

Thanks for your help !

joshtynjala

An AssetLoader should automatically resize after its content completes loading, unless its width and height properties have been explicitly set. Based on the limited code that you posted, the width of the AssetLoader will have been set because the VerticalLayout using is horizontalAlign = JUSTIFY. However, the height of the AssetLoader should still be free to automatically adjust itself after loading based on the dimensions of the loaded image.

If you add an Event.COMPLETE listener to the AssetLoader, I'm curious what the values of its width and height properties are (and explicitWidth and explicitHeight would be helpful too). You may need to call validateNow() on the AssetLoader first, just to be sure that it has settled to its final size.

I suspect that the height of the mainLayoutGroup may be constrained somehow, in some code that you omitted. However, it's difficult to suggest what to try without knowing more about the state of the display list.

Where is the mainLayoutGroup placed in the Drawer component? Is it the main content? Is it the drawer? Or is it a child of one of those? If it is a child, it may help to call readjustLayout() on its parent, if it's a container where that method is available. If it is used directly as the content or drawer, that may indicate a bug in the Drawer component, but I'd like to rule out other things first.

chatmurai74

Hi Josh, thanks for your answer.
I don't explicitly set the AssetLoader's width or height but yes I use horizontalAlign = JUSTIFY because I want the picture to fit the drawer's width (minus the padding) . If I trace the width and height values of the AssetLoader I get 480 for both, which is correct (the picture is 1:1 ratio).

The odd thing is that if I change pullableEdge = TOP by pullableEdge = LEFT which is the default I get this:

I start to wonder if the Drawer component is a good choice for what I want to achieve because I may use it in a strange way since I only implements the drawer property and not the content one. Basically I just want this view to sit outside of the app window and show up when an item of a ListView is clicked (I don't use the swipe gesture). Maybe a subclass of LayoutGroup would do the job, but I want to keep the slide transition.

Btw, I should have posted the whole code in the first place, here it is:

package view;

import feathers.controls.AssetLoader;
import feathers.controls.Button;
import feathers.controls.Drawer;
import feathers.controls.LayoutGroup;
import feathers.controls.TextInput;
import feathers.events.FeathersEvent;
import feathers.events.TriggerEvent;
import feathers.layout.VerticalLayout;
import feathers.skins.RectangleSkin;
import model.AppModelLocator;
import model.Constants;
import openfl.Assets;
import openfl.events.Event;
import openfl.text.TextFormat;
import t9.util.ColorTraces.*;
import vo.RiderVO;

class RiderCardDrawer extends Drawer {
	public static final CLOSE:String = "close";
	public static final OPEN:String = "open";

	private var model:AppModelLocator;
	private final spacing:Int = 10;

	// components
	private var ppal:AssetLoader;
	private var firstNameTextInput:TextInput;
	private var nameTextInput:TextInput;
	private var closeDrawerButton:Button;

	public function new() {
		super();
		addEventListener(FeathersEvent.CREATION_COMPLETE, onCreationComplete);
	}

	override private function initialize():Void {
		super.initialize();

		model = AppModelLocator.getInstance();

		overlaySkin = new RectangleSkin(SolidColor(Constants.INFO, 1));
		swipeCloseEnabled = false;
		swipeOpenEnabled = false;
		autoSizeMode = STAGE;
		pullableEdge = LEFT;
		clickOverlayToClose = false;

		// main Layout
		var mainLaytoutGroup = new LayoutGroup();
		var mainVerticalLayout = new VerticalLayout();
		mainVerticalLayout.setPadding(spacing);
		mainVerticalLayout.gap = spacing;
		mainVerticalLayout.horizontalAlign = LEFT;
		mainVerticalLayout.verticalAlign = TOP;
		mainLaytoutGroup.layout = mainVerticalLayout;

		// close button
		closeDrawerButton = new Button();
		closeDrawerButton.text = "Close Drawer";
		closeDrawerButton.addEventListener(TriggerEvent.TRIGGER, (e) -> {
			closeDrawer();
		});
		mainLaytoutGroup.addChild(closeDrawerButton);

		// profile picture
		ppal = new AssetLoader();
		ppal.addEventListener(Event.COMPLETE, onPPLoaded);
		mainLaytoutGroup.addChild(ppal);

		// ########################################################################## FIRSTNAME & NAME TEXT INPUTS
		// layout
		var lg1:LayoutGroup = new LayoutGroup();
		lg1.backgroundSkin = new RectangleSkin(SolidColor(Constants.MAIN_COLOR1, 0.1));
		var vl1:VerticalLayout = new VerticalLayout();
		vl1.setPadding(spacing);
		vl1.horizontalAlign = JUSTIFY;
		lg1.layout = vl1;
		mainLaytoutGroup.addChild(lg1);

		// first name textInput
		firstNameTextInput = new TextInput();
		firstNameTextInput.backgroundSkin = null;
		firstNameTextInput.embedFonts = true;
		firstNameTextInput.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_BOLD_700).fontName, Constants.FONT_SIZE_5, Constants.MAIN_COLOR1);
		lg1.addChild(firstNameTextInput);

		// name label
		nameTextInput = new TextInput();
		nameTextInput.backgroundSkin = null;
		nameTextInput.embedFonts = true;
		nameTextInput.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_4, Constants.MAIN_COLOR2);
		lg1.addChild(nameTextInput);

		drawer = mainLaytoutGroup;
	}

	private function onCreationComplete(e:FeathersEvent):Void {
		traceBlue(this + " --> onCreationComplete() - w: " + width + " h: " + height);
	}

	public function populateAndShow() {
		var rvo:RiderVO = model.selectedRider;
		
		// profile picture
		ppal.source = "https://lepetittrot.com/lptcm/assets/profile-pictures/pp512/pp_test_512.jpg";

		// first name text input
		firstNameTextInput.text = rvo.firstName;
		if (!firstNameTextInput.hasEventListener(Event.CHANGE)) {
			firstNameTextInput.addEventListener(Event.CHANGE, (e) -> {
				if (firstNameTextInput.text != model.selectedRider.firstName) {
					model.updateSelectedRiderProp(RiderVO.FIRST_NAME, firstNameTextInput.text);
				}
			});
		}

		// name text input
		nameTextInput.text = rvo.name;
		if (!nameTextInput.hasEventListener(Event.CHANGE)) {
			nameTextInput.addEventListener(Event.CHANGE, (e) -> {
				if (nameTextInput.text != model.selectedRider.name) {
					model.updateSelectedRiderProp(RiderVO.NAME, nameTextInput.text);
				}
			});
		}

		openDrawer();
	}

	private function onPPLoaded(e:Event):Void {
		var rvo:RiderVO = model.selectedRider;
		var al:AssetLoader = cast(e.currentTarget, AssetLoader);
		al.validateNow();
		traceGreen(al.width + " / " + al.height);
	}
}

joshtynjala

I've determined that there was a bug, where if the drawer resized after the open animation had started, it would still open to the old size of the drawer. Instead, it should have reset the animation so that it wouldn't go too far, or not far enough. In this case, it wasn't going far enough because the drawer initially measured itself based on the other content while the AssetLoader was still loading, and then the drawer was getting larger when the AssetLoader completed loading.

Here is the commit that fixes the issue:

https://github.com/feathersui/feathersui-openfl/commit/4fa5f87f6af2cfa786a714ec826443e611865e5a

Once you are using this commit, you are likely to see the animation "jump" a bit when the image completes loading and the AssetLoader resizes. This is expected. To avoid the jump, off the top of my head, I can think of a few interesting options to avoid resizing during the animation:

1) Ensure that the image has completed loading before you call openDrawer().

2) Set the height of the AssetLoader before loading the image, so that it will never resize. For instance, if you know that the image will always be square, you could listen for Event.RESIZE and do something like ppal.height = ppal.width to ensure that the height matches the width set by the justify alignment.

3) Display a preloaded placeholder image asset in the AssetLoader at first, wait for the drawer to open, and then load the real image.

4) Set the size of mainLayoutGroup to fill the entire stage size so that mainLayoutGroup can't resize (when AssetLoader resizes, that causes mainLayoutGroup to resize).

There might be other options too, but hopefully, that will give you some ideas to try.

chatmurai74

Thanks for your very detailed answer.
After altering EdgePuller.hx with your code, I chose the 4th solution: mainLayoutGroup.autoSizeMode = STAGE which is the easiest for me to implement and solves both problems: no more strange Drawer layout behavior and no image jump.