1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
//! Example demonstrating nested transforms - how parent and child transforms combine.
//!
//! This shows that shape transforms work correctly when containers are nested.
//! Note: Text inside transformed containers is not currently transformed.
use guido::prelude::*;
fn main() {
App::new().run(|app| {
app.add_surface(
SurfaceConfig::new()
.height(200)
.anchor(Anchor::TOP | Anchor::LEFT | Anchor::RIGHT)
.background_color(Color::rgb(0.1, 0.1, 0.15)),
|| {
container()
.layout(Flex::row().spacing(40.0).center())
.padding(20.0)
.children([
// Case 0: Parent, child
// Expected: Inner box centered
container()
.width(100.0)
.height(100.0)
.background(Color::rgba(0.8, 0.3, 0.3, 0.5))
.corners(8.0)
.child(
container()
.width(60.0)
.height(60.0)
.background(Color::rgb(0.3, 0.8, 0.3))
.corners(4.0),
),
// Case 1: Parent rotated 30, child scaled 0.7
// Expected: Inner box rotated 30deg AND smaller
container()
.width(100.0)
.height(100.0)
.background(Color::rgba(0.8, 0.3, 0.3, 0.5))
.corners(8.0)
.rotate(30.0)
.child(
container()
.width(60.0)
.height(60.0)
.background(Color::rgb(0.3, 0.8, 0.3))
.corners(4.0)
.scale(0.7),
),
// Case 2: Both parent and child rotated 20deg each
// Expected: Inner box rotated 40deg total
container()
.width(100.0)
.height(100.0)
.background(Color::rgba(0.3, 0.3, 0.8, 0.5))
.corners(8.0)
.rotate(20.0)
.child(
container()
.width(60.0)
.height(60.0)
.background(Color::rgb(0.8, 0.8, 0.3))
.corners(4.0)
.rotate(20.0),
),
// Case 3: Parent scaled 1.3, child rotated 45deg
// Expected: Inner box rotated AND the whole group larger
container()
.width(100.0)
.height(100.0)
.background(Color::rgba(0.8, 0.5, 0.2, 0.5))
.corners(8.0)
.scale(1.3)
.child(
container()
.width(60.0)
.height(60.0)
.background(Color::rgb(0.5, 0.2, 0.8))
.corners(4.0)
.rotate(45.0),
),
// Case 4: Child with NO transform (inherits parent's rotation)
// Expected: Inner box rotated same as parent (30deg)
container()
.width(100.0)
.height(100.0)
.background(Color::rgba(0.2, 0.7, 0.7, 0.5))
.corners(8.0)
.rotate(30.0)
.child(
container()
.width(60.0)
.height(60.0)
.background(Color::rgb(0.7, 0.2, 0.7))
.corners(4.0),
),
])
},
);
});
}