516f7b3642
@iamnbutler edit:
This pull request enhances the image element by introducing the ability
to display loading and fallback states.
Changes:
- Implemented the loading and fallback states for image elements using
`.with_loading` and `.with_fallback` respectively.
- Introduced the `StyledImage` trait and `ImageStyle` to enable a fluent
API for changing image styles across image types (`Img`,
`Stateful<Img>`, etc).
Example Usage:
```rust
fn loading_element() -> impl IntoElement {
div().size_full().flex_none().p_0p5().rounded_sm().child(
div().size_full().with_animation(
"loading-bg",
Animation::new(Duration::from_secs(3))
.repeat()
.with_easing(pulsating_between(0.04, 0.24)),
move |this, delta| this.bg(black().opacity(delta)),
),
)
}
fn fallback_element() -> impl IntoElement {
let fallback_color: Hsla = black().opacity(0.5);
div().size_full().flex_none().p_0p5().child(
div()
.size_full()
.flex()
.items_center()
.justify_center()
.rounded_sm()
.text_sm()
.text_color(fallback_color)
.border_1()
.border_color(fallback_color)
.child("?"),
)
}
impl Render for ImageLoadingExample {
fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
img("some/image/path")
.id("image-1")
.with_fallback(|| Self::fallback_element().into_any_element())
.with_loading(|| Self::loading_element().into_any_element())
}
}
```
Note:
An `Img` must have an `id` to be able to add a loading state.
Release Notes:
- N/A
---------
Co-authored-by: nate <nate@zed.dev>
Co-authored-by: michael <michael@zed.dev>
Co-authored-by: Nate Butler <iamnbutler@gmail.com>
Co-authored-by: Antonio Scandurra <me@as-cii.com>
71 lines
2.1 KiB
Rust
71 lines
2.1 KiB
Rust
use crate::{AssetSource, DevicePixels, IsZero, Result, SharedString, Size};
|
|
use anyhow::anyhow;
|
|
use resvg::tiny_skia::Pixmap;
|
|
use std::{hash::Hash, sync::Arc};
|
|
|
|
#[derive(Clone, PartialEq, Hash, Eq)]
|
|
pub(crate) struct RenderSvgParams {
|
|
pub(crate) path: SharedString,
|
|
pub(crate) size: Size<DevicePixels>,
|
|
}
|
|
|
|
#[derive(Clone)]
|
|
pub struct SvgRenderer {
|
|
asset_source: Arc<dyn AssetSource>,
|
|
}
|
|
|
|
pub enum SvgSize {
|
|
Size(Size<DevicePixels>),
|
|
ScaleFactor(f32),
|
|
}
|
|
|
|
impl SvgRenderer {
|
|
pub fn new(asset_source: Arc<dyn AssetSource>) -> Self {
|
|
Self { asset_source }
|
|
}
|
|
|
|
pub(crate) fn render(&self, params: &RenderSvgParams) -> Result<Option<Vec<u8>>> {
|
|
if params.size.is_zero() {
|
|
return Err(anyhow!("can't render at a zero size"));
|
|
}
|
|
|
|
// Load the tree.
|
|
let Some(bytes) = self.asset_source.load(¶ms.path)? else {
|
|
return Ok(None);
|
|
};
|
|
|
|
let pixmap = self.render_pixmap(&bytes, SvgSize::Size(params.size))?;
|
|
|
|
// Convert the pixmap's pixels into an alpha mask.
|
|
let alpha_mask = pixmap
|
|
.pixels()
|
|
.iter()
|
|
.map(|p| p.alpha())
|
|
.collect::<Vec<_>>();
|
|
Ok(Some(alpha_mask))
|
|
}
|
|
|
|
pub fn render_pixmap(&self, bytes: &[u8], size: SvgSize) -> Result<Pixmap, usvg::Error> {
|
|
let tree = usvg::Tree::from_data(bytes, &usvg::Options::default())?;
|
|
|
|
let size = match size {
|
|
SvgSize::Size(size) => size,
|
|
SvgSize::ScaleFactor(scale) => crate::size(
|
|
DevicePixels((tree.size().width() * scale) as i32),
|
|
DevicePixels((tree.size().height() * scale) as i32),
|
|
),
|
|
};
|
|
|
|
// Render the SVG to a pixmap with the specified width and height.
|
|
let mut pixmap = resvg::tiny_skia::Pixmap::new(size.width.into(), size.height.into())
|
|
.ok_or(usvg::Error::InvalidSize)?;
|
|
|
|
let scale = size.width.0 as f32 / tree.size().width();
|
|
let transform = resvg::tiny_skia::Transform::from_scale(scale, scale);
|
|
|
|
resvg::render(&tree, transform, &mut pixmap.as_mut());
|
|
|
|
Ok(pixmap)
|
|
}
|
|
}
|