Add png image loading to gpui

add zed logo into welcome experience

Co-authored-by: Nathan <nathan@zed.dev>

crates/collab_ui/src/collab_titlebar_item.rs

@@ -823,7 +823,7 @@ impl CollabTitlebarItem {
         avatar_style: AvatarStyle,
         background_color: Color,
     ) -> ElementBox {
-        Image::new(avatar)
+        Image::from_data(avatar)
             .with_style(avatar_style.image)
             .aligned()
             .contained()

crates/collab_ui/src/contact_finder.rs

@@ -128,7 +128,7 @@ impl PickerDelegate for ContactFinder {
             .style_for(mouse_state, selected);
         Flex::row()
             .with_children(user.avatar.clone().map(|avatar| {
-                Image::new(avatar)
+                Image::from_data(avatar)
                     .with_style(theme.contact_finder.contact_avatar)
                     .aligned()
                     .left()

crates/collab_ui/src/contact_list.rs

@@ -726,7 +726,7 @@ impl ContactList {
     ) -> ElementBox {
         Flex::row()
             .with_children(user.avatar.clone().map(|avatar| {
-                Image::new(avatar)
+                Image::from_data(avatar)
                     .with_style(theme.contact_avatar)
                     .aligned()
                     .left()
@@ -1080,7 +1080,7 @@ impl ContactList {
                         };
                         Stack::new()
                             .with_child(
-                                Image::new(avatar)
+                                Image::from_data(avatar)
                                     .with_style(theme.contact_avatar)
                                     .aligned()
                                     .left()
@@ -1173,7 +1173,7 @@ impl ContactList {
 
         let mut row = Flex::row()
             .with_children(user.avatar.clone().map(|avatar| {
-                Image::new(avatar)
+                Image::from_data(avatar)
                     .with_style(theme.contact_avatar)
                     .aligned()
                     .left()

crates/collab_ui/src/incoming_call_notification.rs

@@ -108,7 +108,7 @@ impl IncomingCallNotification {
             .unwrap_or(&default_project);
         Flex::row()
             .with_children(self.call.calling_user.avatar.clone().map(|avatar| {
-                Image::new(avatar)
+                Image::from_data(avatar)
                     .with_style(theme.caller_avatar)
                     .aligned()
                     .boxed()

crates/collab_ui/src/notifications.rs

@@ -24,7 +24,7 @@ pub fn render_user_notification<V: View, A: Action + Clone>(
         .with_child(
             Flex::row()
                 .with_children(user.avatar.clone().map(|avatar| {
-                    Image::new(avatar)
+                    Image::from_data(avatar)
                         .with_style(theme.header_avatar)
                         .aligned()
                         .constrained()

crates/collab_ui/src/project_shared_notification.rs

@@ -108,7 +108,7 @@ impl ProjectSharedNotification {
         let theme = &cx.global::<Settings>().theme.project_shared_notification;
         Flex::row()
             .with_children(self.owner.avatar.clone().map(|avatar| {
-                Image::new(avatar)
+                Image::from_data(avatar)
                     .with_style(theme.owner_avatar)
                     .aligned()
                     .boxed()

crates/gpui/src/assets.rs

@@ -1,5 +1,8 @@
 use anyhow::{anyhow, Result};
-use std::{borrow::Cow, cell::RefCell, collections::HashMap};
+use image::ImageFormat;
+use std::{borrow::Cow, cell::RefCell, collections::HashMap, sync::Arc};
+
+use crate::ImageData;
 
 pub trait AssetSource: 'static + Send + Sync {
     fn load(&self, path: &str) -> Result<Cow<[u8]>>;
@@ -22,6 +25,7 @@ impl AssetSource for () {
 pub struct AssetCache {
     source: Box<dyn AssetSource>,
     svgs: RefCell<HashMap<String, usvg::Tree>>,
+    pngs: RefCell<HashMap<String, Arc<ImageData>>>,
 }
 
 impl AssetCache {
@@ -29,6 +33,7 @@ impl AssetCache {
         Self {
             source: Box::new(source),
             svgs: RefCell::new(HashMap::new()),
+            pngs: RefCell::new(HashMap::new()),
         }
     }
 
@@ -43,4 +48,18 @@ impl AssetCache {
             Ok(svg)
         }
     }
+
+    pub fn png(&self, path: &str) -> Result<Arc<ImageData>> {
+        let mut pngs = self.pngs.borrow_mut();
+        if let Some(png) = pngs.get(path) {
+            Ok(png.clone())
+        } else {
+            let bytes = self.source.load(path)?;
+            let image = ImageData::new(
+                image::load_from_memory_with_format(&bytes, ImageFormat::Png)?.into_bgra8(),
+            );
+            pngs.insert(path.to_string(), image.clone());
+            Ok(image)
+        }
+    }
 }

crates/gpui/src/elements/image.rs

@@ -11,8 +11,13 @@ use crate::{
 use serde::Deserialize;
 use std::{ops::Range, sync::Arc};
 
+enum ImageSource {
+    Path(&'static str),
+    Data(Arc<ImageData>),
+}
+
 pub struct Image {
-    data: Arc<ImageData>,
+    source: ImageSource,
     style: ImageStyle,
 }
 
@@ -31,9 +36,16 @@ pub struct ImageStyle {
 }
 
 impl Image {
-    pub fn new(data: Arc<ImageData>) -> Self {
+    pub fn new(asset_path: &'static str) -> Self {
         Self {
-            data,
+            source: ImageSource::Path(asset_path),
+            style: Default::default(),
+        }
+    }
+
+    pub fn from_data(data: Arc<ImageData>) -> Self {
+        Self {
+            source: ImageSource::Data(data),
             style: Default::default(),
         }
     }
@@ -45,39 +57,53 @@ impl Image {
 }
 
 impl Element for Image {
-    type LayoutState = ();
+    type LayoutState = Option<Arc<ImageData>>;
     type PaintState = ();
 
     fn layout(
         &mut self,
         constraint: SizeConstraint,
-        _: &mut LayoutContext,
+        cx: &mut LayoutContext,
     ) -> (Vector2F, Self::LayoutState) {
+        let data = match &self.source {
+            ImageSource::Path(path) => match cx.asset_cache.png(path) {
+                Ok(data) => data,
+                Err(error) => {
+                    log::error!("could not load image: {}", error);
+                    return (Vector2F::zero(), None);
+                }
+            },
+            ImageSource::Data(data) => data.clone(),
+        };
+
         let desired_size = vec2f(
             self.style.width.unwrap_or_else(|| constraint.max.x()),
             self.style.height.unwrap_or_else(|| constraint.max.y()),
         );
         let size = constrain_size_preserving_aspect_ratio(
             constraint.constrain(desired_size),
-            self.data.size().to_f32(),
+            data.size().to_f32(),
         );
-        (size, ())
+
+        (size, Some(data))
     }
 
     fn paint(
         &mut self,
         bounds: RectF,
         _: RectF,
-        _: &mut Self::LayoutState,
+        layout: &mut Self::LayoutState,
         cx: &mut PaintContext,
     ) -> Self::PaintState {
-        cx.scene.push_image(scene::Image {
+        if let Some(data) = layout {
-            bounds,
+            cx.scene.push_image(scene::Image {
-            border: self.style.border,
+                bounds,
-            corner_radius: self.style.corner_radius,
+                border: self.style.border,
-            grayscale: self.style.grayscale,
+                corner_radius: self.style.corner_radius,
-            data: self.data.clone(),
+                grayscale: self.style.grayscale,
-        });
+                data: data.clone(),
+            });
+        }
     }
 
     fn rect_for_text_range(

crates/project_panel/src/project_panel.rs

@@ -1325,7 +1325,7 @@ impl View for ProjectPanel {
                                 Canvas::new(|bounds, _visible_bounds, cx| {
                                     cx.scene.push_quad(gpui::Quad {
                                         bounds,
-                                        background: Some(Color::red()),
+                                        background: Some(Color::transparent_black()),
                                         ..Default::default()
                                     })
                                 })

crates/welcome/src/welcome.rs

@@ -1,14 +1,13 @@
 use std::borrow::Cow;
 
 use gpui::{
-    color::Color,
+    elements::{Canvas, Empty, Flex, Image, Label, MouseEventHandler, ParentElement, Stack},
-    elements::{Canvas, Empty, Flex, Label, MouseEventHandler, ParentElement, Stack, Svg},
     geometry::rect::RectF,
     Action, Element, ElementBox, Entity, MouseButton, MouseRegion, MutableAppContext,
     RenderContext, Subscription, View, ViewContext,
 };
 use settings::{settings_file::SettingsFile, Settings, SettingsFileContent};
-use theme::{CheckboxStyle, ContainedText, Interactive};
+use theme::CheckboxStyle;
 use workspace::{item::Item, Welcome, Workspace};
 
 pub fn init(cx: &mut MutableAppContext) {
@@ -72,15 +71,14 @@ impl View for WelcomePage {
                     .with_children([
                         Flex::row()
                             .with_children([
-                                Svg::new("icons/terminal_16.svg")
+                                Image::new("images/zed-logo-90x90.png")
-                                    .with_color(Color::red())
                                     .constrained()
-                                    .with_width(100.)
+                                    .with_width(90.)
-                                    .with_height(100.)
+                                    .with_height(90.)
                                     .aligned()
                                     .contained()
                                     .boxed(),
-                                Label::new("Zed", theme.editor.hover_popover.prose.clone()).boxed(),
+                                // Label::new("Zed", theme.editor.hover_popover.prose.clone()).boxed(),
                             ])
                             .boxed(),
                         Label::new(