Add `zstack` view to compose views on top of each other #737

viktorstrate · 2024-11-10T16:27:44Z

Adds a new zstack Xilem view (along with an accompanied Masonry widget).
The view is inspired by the ZStack view in SwiftUI, which composes the child view on top of each other.

This pull-request is still work-in-progress.

It doesn't allow for changing the layout when BoxConstraints of the children are different.
(top-left, top-right, bottom-left, bottom-right, center).
I want to update http_cat to put copyright on top of image like seen below.

Philipp-M · 2024-11-10T17:08:31Z

See also #591, which goes a similar direction.

I think to make a zstack really useful we would need transforms (kurbo::Affine) on widgets in general and relevant logic for pointer events etc. See also here. I'm thinking about getting to that topic soon, as I think this is the main blocker for allowing fancy interactive vector graphics with vello and xilem.

I like the general direction, i.e. unifying a potential xilem_svg API using a zstack (instead of separate context such as in the web).

DJMcNab · 2024-11-11T09:34:18Z

I don't think that arbitrary transforms should block this landing, though. I don't really have the bandwidth to look at this too closely at the moment, unfortunately.

Philipp-M · 2024-11-11T13:28:36Z

To clarify, I didn't mean this to be a requirement, it's orthogonal to this change (and a lot more work...). I'll take a look at the PR when it's out of draft. On a skim it seems reasonable so far.

viktorstrate · 2024-11-16T21:58:33Z

The PR is now ready for review!

I still need to add comments to document the new stuff.

I have added the copyright on top of the image in the http_cats example. I'm concerned about the visibility on light images. Is there a way to add a border to the text? I would like to get suggestions on what to do in this case?

DJMcNab · 2024-11-18T08:33:22Z

Maybe adding a sized_box with a semi-transparent black background?

DJMcNab

This looks like a good foundation, and it should be a useful view. Some review thoughts from a first pass.

One thing which does concern me is event handling; I suspect that the behaviour will be hard to reason about. Ideally, we'd warn if more than one layer is interactive, but we don't currently have a mechanism to do that.

xilem/examples/http_cats.rs

xilem/src/view/zstack.rs

DJMcNab · 2024-11-18T08:37:21Z

masonry/src/widget/zstack.rs

+use tracing::trace_span;
+
+struct Child {
+    widget: WidgetPod<Box<dyn Widget>>,


Is there a reason the children don't have an individual alignment?

In Xilem, I guess it could be done by making a generic extension for all Views that allows for specifying the alignment on each child individually, similar to how flex does it, but I'm concerned that it would add unnecessary complexity.

The same effect could be achieved by using nested ZStacks or maybe using flex with spacing.

I would like to hear what you think about this?

Yeah, this would be the right way to expose that at the Xilem level.

Should we implement this or keep it simple like it is now?

I think we can implement it, I don't think it will be much more complex? It's a little bit more code, but it would be consistent to the other container views, and may be more straight-forward on the user-facing-side.
I think it's a little bit awkward to compose 2 zstack to achieve similar behavior.
(And the wrapper types (Child, ZStackElement) would actually make sense).

masonry/src/widget/zstack.rs

DJMcNab · 2024-11-18T08:41:37Z

masonry/src/widget/zstack.rs

All of these types should have documentation. I recognise that this isn't the prevailing code style, but that doesn't mean we should continue that.

I've written a fair bit of documentation in 42473c8, is there anything obvious that I missed?

DJMcNab · 2024-11-18T08:46:50Z

masonry/src/widget/zstack.rs

+// --- MARK: IMPL WIDGET---
+impl Widget for ZStack {
+    fn layout(&mut self, ctx: &mut LayoutCtx, bc: &BoxConstraints) -> Size {
+        let total_size = bc.max();


This is suspect for a few reasons:

An infinite bound makes this fundamentally broken.

Even if all the children are small, this view takes up all available space.

I think the correct approach here might be a 2-pass solution, first to get the "overall" size, then to align widgets within that size. Allowing that is the reason that run_layout and place_child are different methods.

I added this in 78a901e, can you please take a look at it. I'm unsure if I did it right?

xilem/src/view/zstack.rs

Philipp-M · 2024-11-18T14:55:12Z

masonry/src/widget/zstack.rs

+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum HorizontalAlignment {


We may want to check whether we can merge or reuse a few of these enums for different container widgets. (no action required here though, I think that should be done in follow-up PRs)

masonry/src/widget/zstack.rs

Philipp-M · 2024-11-18T14:56:36Z

One thing which does concern me is event handling;

Can you expand on that a little bit?

DJMcNab · 2024-11-18T16:46:47Z

Can you expand on that a little bit?

Sure. If you have a child widget of the zstack which accepts events in only a small region, and wants to pass through the rest (for example, a circular button), I don't think that will work because of how Masonry works, that events can only bubble. I haven't thought too deeply about it, and it doesn't need to be addressed in this PR.

viktorstrate · 2024-11-18T21:02:28Z

One thing which does concern me is event handling; I suspect that the behaviour will be hard to reason about.

Would it somehow be possible to pass the event to the front most child of which the cursor is within the bounding box?

Philipp-M · 2024-11-18T23:03:40Z

Hmm, I think we need a more significant rework of the pointer-intersection logic in masonry anyways, i.e. allow the widgets to customize the pointer intersection behavior (as right now only the bounds are checked). Possibly with a cheaper hierarchical bounds check (BVH) before.

I have similar issues in #753.

I'm thinking about tackling this, as this is relevant for kurbo shapes with pointer event listeners as well.

Anyway, I think this PR (and the linked) just shows issues with the mentioned pointer/widget-intersection logic, which I think is orthogonal and should probably be handled in another PR....

to make it more readable and to demonstrate more use cases of sized_box.

viktorstrate · 2024-11-22T20:07:46Z

I fixed a lot of the comments you all made.

After rebasing the PR the copyright symbol in the http_cats example does not render anymore, I tried running the example on the main branch as well and it's the same.

I made a black semi-transparent background for the copyright text, to make it easier to read.
Thanks to @DJMcNab for the suggestion.

There are still some open comments that are unresolved and that I'd like your input on to continue.

Philipp-M · 2024-11-23T13:39:40Z

Sure. If you have a child widget of the zstack which accepts events in only a small region, and wants to pass through the rest (for example, a circular button), I don't think that will work because of how Masonry works, that events can only bubble. I haven't thought too deeply about it, and it doesn't need to be addressed in this PR.

FWIW I think this should be fixed with #753, as well as supporting custom pointer intersection shapes (like the circular button), when I understand you correctly.

Still needs documentation

DJMcNab

Handful of small things, but otherwise this looks good.

DJMcNab · 2024-11-26T14:49:04Z

masonry/src/widget/zstack.rs

@@ -0,0 +1,416 @@
+// Copyright 2024 the Xilem Authors
+// SPDX-License-Identifier: Apache-2.0
+


Can we have an #![warn(missing_docs)] here

DJMcNab · 2024-11-26T14:54:39Z

masonry/src/widget/zstack.rs

+        // Second pass: place the children given the calculated max_size bounds.
+        let child_bc = BoxConstraints::new(Size::ZERO, max_size);
+        for child in &mut self.children {
+            let child_size = ctx.run_layout(&mut child.widget, &child_bc);


Suggested change

let child_size = ctx.run_layout(&mut child.widget, &child_bc);

let child_size = ctx.child_size(&child.widget);

Running layout twice for all the children is not the right thing to do; it can very easily introduce pathological behaviour.

DJMcNab · 2024-11-26T15:01:29Z

xilem/src/view/zstack.rs

+// --- MARK: ZStackExt ---
+
+pub trait ZStackExt<State, Action>: WidgetView<State, Action> {
+    fn alignment(self, alignment: impl Into<ChildAlignment>) -> ZStackItem<Self, State, Action>


This should have some documentation. In particular, it should specify that this alignment can only be used for a direct child of a zstack.

DJMcNab · 2024-11-26T15:02:54Z

xilem/examples/http_cats.rs

+                    .rounded(4.)
+                    .background(Color::BLACK.multiply_alpha(0.5)),
+                )
+                // HACK: Trailing padding workaround scrollbar covering content


I'm not sure this hack comment is entirely correct anymore.

viktorstrate marked this pull request as draft November 10, 2024 16:28

viktorstrate force-pushed the zstack branch from e6f2910 to f9cab15 Compare November 10, 2024 16:58

viktorstrate changed the title ~~WIP: Add zstack view to compose views on top of each other~~ Add zstack view to compose views on top of each other Nov 10, 2024

viktorstrate force-pushed the zstack branch 2 times, most recently from 0730a16 to 7c21129 Compare November 16, 2024 21:53

viktorstrate marked this pull request as ready for review November 16, 2024 21:56

DJMcNab reviewed Nov 18, 2024

View reviewed changes

Philipp-M reviewed Nov 18, 2024

View reviewed changes

viktorstrate added 11 commits November 22, 2024 18:40

Add ZStack widget and view

2bca696

Fix clippy issues

0e6665e

Add alignment for zstack widget

0cf6405

Add alignment for zstack view

82f780b

Update http_cats example to use zstack

e19accb

Remove old test screenshot

707ea2d

Fix clippy issues

a8f3fc6

Add copyright headers

3bb0bbb

Calculate zstack layout in two passes

bd4770c

Write documentation for zstack

2306b98

Fix doctest for zstack

724d168

viktorstrate force-pushed the zstack branch from 42473c8 to 724d168 Compare November 22, 2024 17:59

Fix spelling

6b75fb0

Add background to copyright text in http_cats

bac2180

to make it more readable and to demonstrate more use cases of sized_box.

ZStack children can now individually be aligned

ed23eee

Still needs documentation

DJMcNab reviewed Nov 26, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `zstack` view to compose views on top of each other #737

Add `zstack` view to compose views on top of each other #737

viktorstrate commented Nov 10, 2024 •

edited

Loading

Philipp-M commented Nov 10, 2024

DJMcNab commented Nov 11, 2024

Philipp-M commented Nov 11, 2024

viktorstrate commented Nov 16, 2024 •

edited

Loading

DJMcNab commented Nov 18, 2024

DJMcNab left a comment

DJMcNab Nov 18, 2024

viktorstrate Nov 18, 2024

DJMcNab Nov 19, 2024

viktorstrate Nov 22, 2024

Philipp-M Nov 23, 2024

DJMcNab Nov 18, 2024

viktorstrate Nov 22, 2024

DJMcNab Nov 18, 2024

viktorstrate Nov 22, 2024 •

edited

Loading

Philipp-M Nov 18, 2024

Philipp-M commented Nov 18, 2024

DJMcNab commented Nov 18, 2024

viktorstrate commented Nov 18, 2024

Philipp-M commented Nov 18, 2024

viktorstrate commented Nov 22, 2024

Philipp-M commented Nov 23, 2024

DJMcNab left a comment

DJMcNab Nov 26, 2024

DJMcNab Nov 26, 2024

DJMcNab Nov 26, 2024

DJMcNab Nov 26, 2024

		@@ -0,0 +1,416 @@
		// Copyright 2024 the Xilem Authors
		// SPDX-License-Identifier: Apache-2.0

	let child_size = ctx.run_layout(&mut child.widget, &child_bc);
	let child_size = ctx.child_size(&child.widget);

Add zstack view to compose views on top of each other #737

Are you sure you want to change the base?

Add zstack view to compose views on top of each other #737

Conversation

viktorstrate commented Nov 10, 2024 • edited Loading

Philipp-M commented Nov 10, 2024

DJMcNab commented Nov 11, 2024

Philipp-M commented Nov 11, 2024

viktorstrate commented Nov 16, 2024 • edited Loading

DJMcNab commented Nov 18, 2024

DJMcNab left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

viktorstrate Nov 22, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Philipp-M commented Nov 18, 2024

DJMcNab commented Nov 18, 2024

viktorstrate commented Nov 18, 2024

Philipp-M commented Nov 18, 2024

viktorstrate commented Nov 22, 2024

Philipp-M commented Nov 23, 2024

DJMcNab left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Add `zstack` view to compose views on top of each other #737

Add `zstack` view to compose views on top of each other #737

viktorstrate commented Nov 10, 2024 •

edited

Loading

viktorstrate commented Nov 16, 2024 •

edited

Loading

viktorstrate Nov 22, 2024 •

edited

Loading