clean up

crates/elements/src/attributes/image_attributes.rs

@@ -29,5 +29,27 @@ def_attribute!(
     /// ```
     aspect_ratio,
 
+    /// `cache_key` lets you specify an unique identifier for the given image.
+    /// This will help Freya cache the image decoding, if the cache_key changes the old
+    /// cache will be pruned and the image (changed or not) will be decoded again.
+    /// `cache_key` is optinal but its recommended to be used, specialy for high quality images.
+    /// You can pass any value that can be transformed into a string. Like a URL.
+    ///
+    /// ```rust, no_run
+    /// # use freya::prelude::*;
+    /// static RUST_LOGO: &[u8] = include_bytes!("../_docs/rust_logo.png");
+    ///
+    /// fn app() -> Element {
+    ///     let image_data = static_bytes(RUST_LOGO);
+    ///     rsx!(
+    ///         image {
+    ///             image_data,
+    ///             width: "100%",
+    ///             height: "100%",
+    ///             cache_key: "rust-logo"
+    ///         }
+    ///     )
+    /// }
+    /// ```
     cache_key,
 );

examples/image.rs

@@ -2,23 +2,39 @@
     all(not(debug_assertions), target_os = "windows"),
     windows_subsystem = "windows"
 )]
-
 use freya::prelude::*;
-
 fn main() {
     launch(app);
 }
 
-static COVER: &[u8] = include_bytes!("./cover.png");
+static RUST_LOGO: &[u8] = include_bytes!("./rust_logo.png");
 
 fn app() -> Element {
-    let image_data = static_bytes(COVER);
+    let image_data = static_bytes(RUST_LOGO);
+    let mut size = use_signal(|| 250);
+
+    let onwheel = move |e: WheelEvent| {
+        let y = e.get_delta_y() as i32;
+        let res = *size.read() + y;
+        if res >= 600 || res <= 20 {
+            return;
+        }
+        size.set(res);
+    };
 
-    rsx!(image {
-        image_data,
-        width: "fill",
-        height: "fill",
-        aspect_ratio: "max",
-        cache_key: ":)"
-    })
+    rsx!(
+        rect {
+            width: "100%",
+            height: "100%",
+            padding: "50",
+            main_align: "center",
+            cross_align: "center",
+            onwheel: onwheel,
+            image {
+                image_data: image_data,
+                width: "{size}",
+                height: "{size}",
+            }
+        }
+    )
 }

examples/image_cache_key.rs

@@ -0,0 +1,40 @@
+#![cfg_attr(
+    all(not(debug_assertions), target_os = "windows"),
+    windows_subsystem = "windows"
+)]
+
+use freya::prelude::*;
+
+fn main() {
+    launch(app);
+}
+
+static RUST_LOGO: &[u8] = include_bytes!("./RUST_LOGO.png");
+
+fn app() -> Element {
+    rsx!(
+        ScrollView {
+            image {
+                image_data: static_bytes(RUST_LOGO),
+                width: "fill",
+                height: "500",
+                aspect_ratio: "max",
+                cache_key: "rust-logo",
+            }
+            image {
+                image_data: static_bytes(RUST_LOGO),
+                width: "fill",
+                height: "500",
+                aspect_ratio: "max",
+                cache_key: "rust-logo"
+            }
+            image {
+                image_data: static_bytes(RUST_LOGO),
+                width: "fill",
+                height: "500",
+                aspect_ratio: "max",
+                cache_key: "rust-logo"
+            }
+        }
+    )
+}