<Each> places first item on top

Bug Reports
1
Test Setup and Task Description

I’m using Fuse 0.33.0 on OS X 10.11.6. And the described behaviour also appears with Fuse 0.32.0. I have not used versions of Fuse older than 0.32.0.

I need to lay out a dynamic list of items on the screen, in the style of a table view or a list view. Each item contains a background and some content. Items’ backgrounds are not rectangular and I need them to overlap if I am to achieve the interface appearance I’m tasked with achieving. The overlapping part I tried to achieve by placing the background of the item in the Background layer of the containing element. I’ve put together a simplified test scenario which you can see in the code snippet below. You can generate a new project with fuse create app NewTestProject and then replace the contents of MainView.ux with the contents of the code snippet below. Items’ backgrounds are rectangular in the example below, for simplicity. For best results preview with the Fuse Preview app, using “iPhone 6” device profile.

<App>
	<JavaScript>
		function Item(text, color)
		{
			this.text = text;
			this.color = color;
		}
	
		var theItems = [
			new Item("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", [0.9, 0.3, 0.3, 1.0]),
			new Item("Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", [0.3, 0.9, 0.3, 1.0]),
		];
		
		module.exports = 
		{
			items: theItems,
		};
	</JavaScript>
	
	<ScrollView>
		<StackPanel>
			<Each Items={items}>
				<Panel Margin="30, 80, 30, 30">
					<Rectangle Y="-30" Width="120%" Height="270" Color={color} Layer="Background"/>
					<Text Value={text} TextWrapping="Wrap"/>
				</Panel>
			</Each>
		</StackPanel>
	</ScrollView>
</App>
Observed Behaviour

The first item’s background overlaps the second item, as it appears that <Each> has drawn the second item in the list behind the first one.

Expected Behaviour

The second item to appear drawn in front of the first one.

2

Hi!

Just offsetting with Y="-30" won’t work that applies equally to all elements

You can experiment with negative margins: Margin="0,-30,0,0" for example

3

Hey, Anders,

The margin and offset here are not part of the problem. I’ve only put them in the example for a more pleasant appearance of the interface of this example. In fact you can remove them altogether and still observe the same issue.

The problem is that I expect the element which gets added last to the screen to be drawn last as well (assuming no ZOffset and friends are being changed) and this seems to not be happening, because Item1 is obviously being drawn after Item2, although Item1 is added before Item2.

I’m not sure if this is how <Each> is supposed to work, but I have not seen such behaviour in any SDK I have used before, so I naturally assumed it is not intended to work this way here as well.

Edit: Now that I’ve read the thread title again, it may be a bit undescriptive. What I meant was that <Each> draws the first item in the list in front of the other items and I expect it to be behind them.

4

Hi Vladimir,

Fuse has the default Z-order defined so that topmost in the file = topmost on the screen.

When the Each inserts item, the same rule still holds. If you want the most recently added item to be on top, you can try:

 <AddingAnimation>
       <BringToFront />
 </AddingAnimation>

Otherwise, you’ll have to databind the ZOrder property based on an index.

5

Hey, Anders,

Each of the items does contain the index where it’s supposed to be at, so I bound each screen item’s ZOffset to this index and they are now ordered as I expect them to be.

Thank you.