Examples piu and balls - drawing order help

[tribalmatt]

Hi again,

After digging into the source and docs as I played around with the balls example I could not figure out how to change the drawing order.

I was trying to change the drawing order of the balls each time they collided with the screen edge. My plan was to just reorder the array/collection/linked list. But after quite a bit of digging in xsBug and through the source code I am not sure how to get "contents" from the "container".

I tried this when onTimeChanged() was called. And I get null's back.

		let aContents = application.containers;
		let aContent = application.contentAt(ball.index);

Also I feel I am missing how xsBug shows a variable or parameters object type. When I look at "ball" in xsBug on a break. I don't see it's object type or other primitive type easily.

Any pointers would be appreciated. I feel I am missing something very easy. Or another example that I can reference.

Thx,
Matt

[lprader]

I was trying to change the drawing order of the balls each time they collided with the screen edge. My plan was to just reorder the array/collection/linked list.

I can see how you got that idea because you pass in an array of content objects when you create a container. But you can't just change the order of the contents in a container using standard JavaScript array methods. Piu containers have their own methods to let you add/rearrange contents.

• The add function adds a content object to a container
• The insert function inserts a content object before another object in a container
• The swap function swaps two content objects in the same container
• The replace function replaces a content object in a container with another content object

The Piu documentation has more information about each of those methods, and I'm happy to answer questions about them!

But after quite a bit of digging in xsBug and through the source code I am not sure how to get "contents" from the "container".

I recommend--and yes, this is a shameless plug--the Piu chapter of the book @phoddie and I wrote. It has a 6 page long section called "Accessing Content Objects in a Container" :)

To summarize:

• You can use the first and last properties of a container to get the first/last items in its contents
• You can use the next and previous properties of a content object to get the next/previous items in the same container as the content
• You can use the content method of a container to access its contents by name or index
• You can give content objects anchors and access them using their anchors

Again, the Piu documentation is a good place to get more information about each of those, or I can help if you have more questions about them.

One more thing: I'm curious where you got the idea to try this code:

let aContents = application.containers;
let aContent = application.contentAt(ball.index);

That is, where did you get the idea that the application has a containers property or a contentAt method?

[tribalmatt]

Thanks for the note back. I do have the book...I probably should open it up. I will give that a look. Thx. Just by answering this email, I found my mistake. I did see the accessors and the linked list/tree properties. I was working from this. /* add(content) @ "PiuContainer_add", content(at) @ "PiuContainer_content", empty(start, stop) @ "PiuContainer_empty", firstThat(id) @ "PiuContainer_firstThat", insert(content, before) @ "PiuContainer_insert", lastThat(id) @ "PiuContainer_lastThat", remove(content) @ "PiuContainer_remove", replace(content, by) @ "PiuContainer_replace", run(transition) @ "PiuContainer_run", swap(content0, content1) @ "PiuContainer_swap", */ I saw content(at)...and based on a lot of history and slight dyslexia I wrote contentAt(index). When I read your comment and pasted the above, I saw my mistake. content(at) quickly gave me the object I was expecting and then I was able to make my code work. application.container; was a property I saw in xsBug, and pui.md mentions contents in a container so I tried that. Thanks again, Matt

…

On Thu, Oct 7, 2021 at 1:43 PM Lizzie Prader ***@***.***> wrote: I was trying to change the drawing order of the balls each time they collided with the screen edge. My plan was to just reorder the array/collection/linked list. I can see how you got that idea because you pass in an array of content objects when you create a container. But you can't just change the order of the contents in a container using standard JavaScript array methods. Piu containers have their own methods to let you add/rearrange contents. - The add function adds a content object to a container - The insert function inserts a content object before another object in a container - The swap function swaps two content objects in the same container - The replace function replaces a content object in a container with another content object The Piu documentation <https://github.com/Moddable-OpenSource/moddable/blob/public/documentation/piu/piu.md> has more information about each of those methods, and I'm happy to answer questions about them! But after quite a bit of digging in xsBug and through the source code I am not sure how to get "contents" from the "container". I recommend--and yes, this is a shameless plug--the Piu chapter of the book <https://www.moddable.com/book> @phoddie <https://github.com/phoddie> and I wrote. It has a 6 page long section called "Accessing Content Objects in a Container" :) To summarize: - You can use the first and last properties of a container to get the first/last items in its contents - You can use the next and previous properties of a content object to get the next/previous items in the same container as the content - You can use the content method of a container to access its contents by name or index - You can give content objects *anchors* and access them using their anchors Again, the Piu documentation is a good place to get more information about each of those, or I can help if you have more questions about them. One more thing: I'm curious where you got the idea to try this code: let aContents = application.containers; let aContent = application.contentAt(ball.index); That is, where did you get the idea that the application has a containers property or a contentAt method? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#721 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AISN6KS5LY7YATR25NFGFRLUFYA65ANCNFSM5FR5HBVQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[lprader]

Ah-ha, that all makes sense. Glad you got your code working!