update more examples

This commit is contained in:
Evan Almloff committed 2022-12-05 14:20:45 -06:00
1 parent 094012b07d
commit e6a11f50dd
4 files changed
+22 -23

No files matched your search

+1 -2
View File
@@ -167,7 +167,6 @@ impl<'b> VirtualDom {
) { ) {
// Replace components that have different render fns // Replace components that have different render fns
if left.render_fn != right.render_fn { if left.render_fn != right.render_fn {
dbg!(&left, &right);
let created = self.create_component_node(right_template, right, idx); let created = self.create_component_node(right_template, right, idx);
let head = unsafe { let head = unsafe {
self.scopes[left.scope.get().unwrap().0] self.scopes[left.scope.get().unwrap().0]
@@ -407,7 +406,7 @@ impl<'b> VirtualDom {
debug_assert!(!new.is_empty()); debug_assert!(!new.is_empty());
debug_assert!(!old.is_empty()); debug_assert!(!old.is_empty());
match dbg!(old.len().cmp(&new.len())) { match old.len().cmp(&new.len()) {
Ordering::Greater => self.remove_nodes(&old[new.len()..]), Ordering::Greater => self.remove_nodes(&old[new.len()..]),
Ordering::Less => self.create_and_insert_after(&new[old.len()..], old.last().unwrap()), Ordering::Less => self.create_and_insert_after(&new[old.len()..], old.last().unwrap()),
Ordering::Equal => {} Ordering::Equal => {}
+11 -11
View File
@@ -23,12 +23,12 @@ fn Button(cx: Scope<ButtonProps>) -> Element {
cx.render(rsx! { cx.render(rsx! {
div{ div{
width: "100%", width: "20px",
height: "100%", height: "5px",
background_color: "{color}", background_color: "{color}",
tabindex: "{cx.props.layer}", tabindex: "{cx.props.layer}",
onkeydown: |e| { onkeydown: |e| {
if let Code::Space = e.data.code() { if let Code::Space = e.inner().code() {
toggle.modify(|f| !f); toggle.modify(|f| !f);
} }
}, },
@@ -60,7 +60,7 @@ fn app(cx: Scope) -> Element {
height: "100%", height: "100%",
(1..8).map(|y| (1..8).map(|y|
cx.render(rsx!{ rsx!{
div{ div{
display: "flex", display: "flex",
flex_direction: "row", flex_direction: "row",
@@ -68,26 +68,26 @@ fn app(cx: Scope) -> Element {
height: "100%", height: "100%",
(1..8).map(|x|{ (1..8).map(|x|{
if (x + y) % 2 == 0{ if (x + y) % 2 == 0{
cx.render(rsx!{ rsx!{
div{ div{
width: "100%", width: "20px",
height: "100%", height: "5px",
background_color: "rgb(100, 100, 100)", background_color: "rgb(100, 100, 100)",
} }
}) }
} }
else{ else{
let layer = (x + y) % 3; let layer = (x + y) % 3;
cx.render(rsx!{ rsx!{
Button{ Button{
color_offset: x * y, color_offset: x * y,
layer: layer as u16, layer: layer as u16,
} }
}) }
} }
}) })
} }
}) }
) )
} }
}) })
+4 -4
View File
@@ -17,7 +17,7 @@ fn app(cx: Scope) -> Element {
(0..=steps).map(|x| (0..=steps).map(|x|
{ {
let hue = x as f32*360.0/steps as f32; let hue = x as f32*360.0/steps as f32;
cx.render(rsx! { rsx! {
div{ div{
width: "100%", width: "100%",
height: "100%", height: "100%",
@@ -25,7 +25,7 @@ fn app(cx: Scope) -> Element {
(0..=steps).map(|y| (0..=steps).map(|y|
{ {
let alpha = y as f32*100.0/steps as f32; let alpha = y as f32*100.0/steps as f32;
cx.render(rsx! { rsx! {
div { div {
left: "{x}px", left: "{x}px",
top: "{y}px", top: "{y}px",
@@ -33,11 +33,11 @@ fn app(cx: Scope) -> Element {
height: "100%", height: "100%",
background_color: "hsl({hue}, 100%, 50%, {alpha}%)", background_color: "hsl({hue}, 100%, 50%, {alpha}%)",
} }
}) }
} }
) )
} }
}) }
} }
) )
} }
+6 -6
View File
@@ -11,13 +11,13 @@ fn app(cx: Scope) -> Element {
height: "100%", height: "100%",
flex_direction: "column", flex_direction: "column",
background_color: "black", background_color: "black",
// margin_right: "10px", margin_right: "10px",
div { div {
width: "70%", width: "70%",
height: "70%", height: "70%",
background_color: "green", background_color: "green",
// margin_left: "4px", margin_left: "4px",
div { div {
width: "100%", width: "100%",
@@ -34,10 +34,10 @@ fn app(cx: Scope) -> Element {
align_items: "center", align_items: "center",
flex_direction: "column", flex_direction: "column",
// padding_top: "2px", padding_top: "2px",
// padding_bottom: "2px", padding_bottom: "2px",
// padding_left: "4px", padding_left: "4px",
// padding_right: "4px", padding_right: "4px",
"[A]" "[A]"
"[A]" "[A]"