From d8ec5c575269351e0f03fc5512486880a454f983 Mon Sep 17 00:00:00 2001 From: jrmoulton Date: Thu, 24 Oct 2024 12:16:38 -0600 Subject: [PATCH] fixup examples --- examples/animations/Cargo.toml | 8 -- examples/animations/README.md | 31 ------- examples/animations/src/main.rs | 73 --------------- examples/draggable/Cargo.toml | 8 -- examples/draggable/src/main.rs | 109 ----------------------- examples/dropped_file/Cargo.toml | 7 -- examples/dropped_file/src/main.rs | 33 ------- examples/widget-gallery/src/draggable.rs | 23 ++--- 8 files changed, 9 insertions(+), 283 deletions(-) delete mode 100644 examples/animations/Cargo.toml delete mode 100644 examples/animations/README.md delete mode 100644 examples/animations/src/main.rs delete mode 100644 examples/draggable/Cargo.toml delete mode 100644 examples/draggable/src/main.rs delete mode 100644 examples/dropped_file/Cargo.toml delete mode 100644 examples/dropped_file/src/main.rs diff --git a/examples/animations/Cargo.toml b/examples/animations/Cargo.toml deleted file mode 100644 index 9992c3ad..00000000 --- a/examples/animations/Cargo.toml +++ /dev/null @@ -1,8 +0,0 @@ -[package] -name = "animations" -version = "0.1.0" -edition = "2021" - -[dependencies] -im.workspace = true -floem = { path = "../.." } diff --git a/examples/animations/README.md b/examples/animations/README.md deleted file mode 100644 index 59ef5ad6..00000000 --- a/examples/animations/README.md +++ /dev/null @@ -1,31 +0,0 @@ -> [!WARNING] -> **Work in progress, which is subject to frequent change.** - If you plan to add changes, please make sure you reach out in our discord first. - - The end-goal is to support reactive animations, similar to Swift UI(including spring animations). - The API we are currently aiming for looks something like this: - ```rust - let (is_hovered, set_is_hovered) = create_signal(false); - let (scroll_offset_pct, set_scroll_offset_pct) = create_signal(0.); - - scroll({ - button() - .style(|s| { - s.width(move || {50.0}) - }) - .animation(|s| { - s.width(300) - // we get animation on scroll "for free", since everything is integrated with the reactive system - .opacity(move || scroll_offset_pct) - .scale(move || is_hovered.get() {1.2} else {1.0} ) - .easing_fn(EasingFn::Cubic) - .ease_in_out() - .duration(Duration::from_secs(1)) - }) - }.on_scroll(move |scroll| { - let offset_pct = ......snip........ - set_scroll_offset_pct.update(|value| *value = offset_pct); - true - }) - ) - ``` diff --git a/examples/animations/src/main.rs b/examples/animations/src/main.rs deleted file mode 100644 index a0ac5f28..00000000 --- a/examples/animations/src/main.rs +++ /dev/null @@ -1,73 +0,0 @@ -use floem::{ - animate::Animation, - event::EventListener as EL, - peniko::Color, - reactive::{RwSignal, SignalGet, Trigger}, - unit::DurationUnitExt, - views::{empty, h_stack, Decorators}, - IntoView, -}; - -fn app_view() -> impl IntoView { - let animation = RwSignal::new( - Animation::new() - .duration(5.seconds()) - .keyframe(0, |f| f.computed_style()) - .keyframe(50, |f| { - f.style(|s| s.background(Color::BLACK).size(30, 30)) - .ease_in() - }) - .keyframe(100, |f| { - f.style(|s| s.background(Color::AQUAMARINE).size(10, 300)) - .ease_out() - }) - .repeat(true) - .auto_reverse(true), - ); - - let pause = Trigger::new(); - let resume = Trigger::new(); - - h_stack(( - empty() - .style(|s| s.background(Color::RED).size(500, 100)) - .animation(move |_| animation.get().duration(10.seconds())), - empty() - .style(|s| { - s.background(Color::BLUE) - .size(50, 100) - .border(5.) - .border_color(Color::GREEN) - }) - .animation(move |_| animation.get()) - .animation(move |a| { - a.keyframe(0, |f| f.computed_style()) - .keyframe(100, |f| { - f.style(|s| s.border(5.).border_color(Color::PURPLE)) - }) - .duration(5.seconds()) - .repeat(true) - .auto_reverse(true) - }), - empty() - .style(|s| s.background(Color::GREEN).size(100, 300)) - .animation(move |_| { - animation - .get() - .pause(move || pause.track()) - .resume(move || resume.track()) - .delay(3.seconds()) - }) - .on_event_stop(EL::PointerEnter, move |_| { - pause.notify(); - }) - .on_event_stop(EL::PointerLeave, move |_| { - resume.notify(); - }), - )) - .style(|s| s.size_full().gap(10).items_center().justify_center()) -} - -fn main() { - floem::launch(app_view); -} diff --git a/examples/draggable/Cargo.toml b/examples/draggable/Cargo.toml deleted file mode 100644 index 4cd7ca18..00000000 --- a/examples/draggable/Cargo.toml +++ /dev/null @@ -1,8 +0,0 @@ -[package] -name = "draggable" -version = "0.1.0" -edition = "2021" - -[dependencies] -im.workspace = true -floem = { path = "../.." } diff --git a/examples/draggable/src/main.rs b/examples/draggable/src/main.rs deleted file mode 100644 index 9dfb168c..00000000 --- a/examples/draggable/src/main.rs +++ /dev/null @@ -1,109 +0,0 @@ -use floem::{ - keyboard::{Key, NamedKey}, - peniko::Color, - reactive::{create_rw_signal, RwSignal, SignalGet, SignalUpdate}, - style::CursorStyle, - views::{dyn_stack, label, Decorators}, - IntoView, View, -}; - -fn sortable_item( - name: &str, - sortable_items: RwSignal>, - dragger_id: RwSignal, - item_id: usize, -) -> impl IntoView { - let name = String::from(name); - let colors = [ - Color::WHITE, - Color::BEIGE, - Color::REBECCA_PURPLE, - Color::TEAL, - Color::PALE_GREEN, - Color::YELLOW, - Color::DODGER_BLUE, - Color::KHAKI, - Color::WHEAT, - Color::DARK_SALMON, - Color::HOT_PINK, - ]; - - ( - label(move || format!("Selectable item {name}")) - .style(|s| s.padding(5).width_full()) - .on_event_stop( - floem::event::EventListener::PointerDown, - |_| { /* Disable dragging for this view */ }, - ), - label(|| "drag me").style(|s| { - s.selectable(false) - .padding(2) - .cursor(CursorStyle::RowResize) - }), - ) - .draggable() - .on_event(floem::event::EventListener::DragStart, move |_| { - dragger_id.set(item_id); - floem::event::EventPropagation::Continue - }) - .on_event(floem::event::EventListener::DragOver, move |_| { - if dragger_id.get_untracked() != item_id { - let dragger_pos = sortable_items - .get() - .iter() - .position(|id| *id == dragger_id.get_untracked()) - .unwrap(); - let hover_pos = sortable_items - .get() - .iter() - .position(|id| *id == item_id) - .unwrap(); - - sortable_items.update(|items| { - items.remove(dragger_pos); - items.insert(hover_pos, dragger_id.get_untracked()); - }); - } - floem::event::EventPropagation::Continue - }) - .dragging_style(|s| { - s.box_shadow_blur(3) - .box_shadow_color(Color::rgb8(100, 100, 100)) - .box_shadow_spread(2) - }) - .style(move |s| { - s.background(colors[item_id]) - .selectable(false) - .row_gap(5) - .items_center() - .border(2) - .border_color(Color::RED) - }) -} - -fn app_view() -> impl IntoView { - let items = [ - "zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", - ]; - let sortable_items = create_rw_signal((0..items.len()).collect::>()); - let dragger_id = create_rw_signal(0); - - let view = dyn_stack( - move || sortable_items.get(), - move |item_id| *item_id, - move |item_id| sortable_item(items[item_id], sortable_items, dragger_id, item_id), - ) - .style(|s| s.flex_col().column_gap(5).padding(10)) - .into_view(); - - let id = view.id(); - view.on_key_up( - Key::Named(NamedKey::F11), - |m| m.is_empty(), - move |_| id.inspect(), - ) -} - -fn main() { - floem::launch(app_view); -} diff --git a/examples/dropped_file/Cargo.toml b/examples/dropped_file/Cargo.toml deleted file mode 100644 index 3f6c500b..00000000 --- a/examples/dropped_file/Cargo.toml +++ /dev/null @@ -1,7 +0,0 @@ -[package] -name = "dropped_file" -version = "0.1.0" -edition = "2021" - -[dependencies] -floem = { path = "../.." } diff --git a/examples/dropped_file/src/main.rs b/examples/dropped_file/src/main.rs deleted file mode 100644 index 3fa35669..00000000 --- a/examples/dropped_file/src/main.rs +++ /dev/null @@ -1,33 +0,0 @@ -use floem::{ - event::EventListener, - keyboard::{Key, NamedKey}, - unit::UnitExt, - views::{dyn_view, Decorators}, - IntoView, View, -}; - -fn app_view() -> impl IntoView { - let view = dyn_view(move || "dropped file".to_string()).style(|s| { - s.size(100.pct(), 100.pct()) - .flex_col() - .items_center() - .justify_center() - }); - - let id = view.id(); - view.on_key_up( - Key::Named(NamedKey::F11), - |m| m.is_empty(), - move |_| id.inspect(), - ) - .on_event_stop(EventListener::PointerMove, |x| { - //println!("PointerMove {:?}", x.point()); - }) - .on_event_stop(EventListener::DroppedFile, |x| { - println!("DroppedFile {:?}", x); - }) -} - -fn main() { - floem::launch(app_view); -} diff --git a/examples/widget-gallery/src/draggable.rs b/examples/widget-gallery/src/draggable.rs index c2737c99..6ec67084 100644 --- a/examples/widget-gallery/src/draggable.rs +++ b/examples/widget-gallery/src/draggable.rs @@ -1,10 +1,7 @@ use floem::{ keyboard::{Key, NamedKey}, - peniko::Color, - reactive::{create_rw_signal, RwSignal, SignalGet, SignalUpdate}, + prelude::*, style::CursorStyle, - views::{dyn_stack, label, Decorators}, - IntoView, View, }; fn sortable_item( @@ -35,7 +32,7 @@ fn sortable_item( floem::event::EventListener::PointerDown, |_| { /* Disable dragging for this view */ }, ), - label(|| "drag me").style(|s| { + text("drag me").style(|s| { s.selectable(false) .padding(2) .cursor(CursorStyle::RowResize) @@ -48,16 +45,14 @@ fn sortable_item( }) .on_event(floem::event::EventListener::DragOver, move |_| { if dragger_id.get_untracked() != item_id { - let dragger_pos = sortable_items - .get() - .iter() - .position(|id| *id == dragger_id.get_untracked()) - .unwrap(); + let dragger_pos = sortable_items.with(|items| { + items + .iter() + .position(|id| *id == dragger_id.get_untracked()) + .unwrap() + }); let hover_pos = sortable_items - .get() - .iter() - .position(|id| *id == item_id) - .unwrap(); + .with(|items| items.iter().position(|id| *id == item_id).unwrap()); sortable_items.update(|items| { items.remove(dragger_pos);