1use futures::FutureExt;
2use gpui::{
3 App, AppContext, Application, Asset as _, AssetLogger, Bounds, ClickEvent, Context, ElementId,
4 Entity, ImageAssetLoader, ImageCache, ImageCacheProvider, KeyBinding, Menu, MenuItem,
5 RetainAllImageCache, SharedString, TitlebarOptions, Window, WindowBounds, WindowOptions,
6 actions, div, hash, image_cache, img, prelude::*, px, rgb, size,
7};
8use reqwest_client::ReqwestClient;
9use std::{collections::HashMap, sync::Arc};
10
11const IMAGES_IN_GALLERY: usize = 30;
12
13struct ImageGallery {
14 image_key: String,
15 items_count: usize,
16 total_count: usize,
17 image_cache: Entity<RetainAllImageCache>,
18}
19
20impl ImageGallery {
21 fn on_next_image(&mut self, _: &ClickEvent, window: &mut Window, cx: &mut Context<Self>) {
22 self.image_cache
23 .update(cx, |image_cache, cx| image_cache.clear(window, cx));
24
25 let t = std::time::SystemTime::now()
26 .duration_since(std::time::UNIX_EPOCH)
27 .unwrap()
28 .as_millis();
29
30 self.image_key = format!("{}", t);
31 self.total_count += self.items_count;
32 cx.notify();
33 }
34}
35
36impl Render for ImageGallery {
37 fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
38 let image_url: SharedString =
39 format!("https://picsum.photos/400/200?t={}", self.image_key).into();
40
41 div()
42 .flex()
43 .flex_col()
44 .text_color(gpui::white())
45 .child("Manually managed image cache:")
46 .child(
47 div()
48 .image_cache(self.image_cache.clone())
49 .id("main")
50 .font_family(".SystemUIFont")
51 .text_color(gpui::black())
52 .bg(rgb(0xE9E9E9))
53 .overflow_y_scroll()
54 .p_4()
55 .size_full()
56 .flex()
57 .flex_col()
58 .items_center()
59 .gap_2()
60 .child(
61 div()
62 .w_full()
63 .flex()
64 .flex_row()
65 .justify_between()
66 .child(format!(
67 "Example to show images and test memory usage (Rendered: {} images).",
68 self.total_count
69 ))
70 .child(
71 div()
72 .id("btn")
73 .py_1()
74 .px_4()
75 .bg(gpui::black())
76 .hover(|this| this.opacity(0.8))
77 .text_color(gpui::white())
78 .text_center()
79 .w_40()
80 .child("Next Photos")
81 .on_click(cx.listener(Self::on_next_image)),
82 ),
83 )
84 .child(
85 div()
86 .id("image-gallery")
87 .flex()
88 .flex_row()
89 .flex_wrap()
90 .gap_x_4()
91 .gap_y_2()
92 .justify_around()
93 .children(
94 (0..self.items_count)
95 .map(|ix| img(format!("{}-{}", image_url, ix)).size_20()),
96 ),
97 ),
98 )
99 .child(
100 "Automatically managed image cache:"
101 )
102 .child(image_cache(simple_lru_cache("lru-cache", IMAGES_IN_GALLERY)).child(
103 div()
104 .id("main")
105 .font_family(".SystemUIFont")
106 .bg(rgb(0xE9E9E9))
107 .text_color(gpui::black())
108 .overflow_y_scroll()
109 .p_4()
110 .size_full()
111 .flex()
112 .flex_col()
113 .items_center()
114 .gap_2()
115 .child(
116 div()
117 .id("image-gallery")
118 .flex()
119 .flex_row()
120 .flex_wrap()
121 .gap_x_4()
122 .gap_y_2()
123 .justify_around()
124 .children(
125 (0..self.items_count)
126 .map(|ix| img(format!("{}-{}", image_url, ix)).size_20()),
127 ),
128 )
129 ))
130 }
131}
132
133fn simple_lru_cache(id: impl Into<ElementId>, max_items: usize) -> SimpleLruCacheProvider {
134 SimpleLruCacheProvider {
135 id: id.into(),
136 max_items,
137 }
138}
139
140struct SimpleLruCacheProvider {
141 id: ElementId,
142 max_items: usize,
143}
144
145impl ImageCacheProvider for SimpleLruCacheProvider {
146 fn provide(&mut self, window: &mut Window, cx: &mut App) -> gpui::AnyImageCache {
147 window
148 .with_global_id(self.id.clone(), |global_id, window| {
149 window.with_element_state::<Entity<SimpleLruCache>, _>(
150 global_id,
151 |lru_cache, _window| {
152 let mut lru_cache = lru_cache.unwrap_or_else(|| {
153 cx.new(|cx| SimpleLruCache::new(self.max_items, cx))
154 });
155 if lru_cache.read(cx).max_items != self.max_items {
156 lru_cache = cx.new(|cx| SimpleLruCache::new(self.max_items, cx));
157 }
158 (lru_cache.clone(), lru_cache)
159 },
160 )
161 })
162 .into()
163 }
164}
165
166struct SimpleLruCache {
167 max_items: usize,
168 usages: Vec<u64>,
169 cache: HashMap<u64, gpui::ImageCacheItem>,
170}
171
172impl SimpleLruCache {
173 fn new(max_items: usize, cx: &mut Context<Self>) -> Self {
174 cx.on_release(|simple_cache, cx| {
175 for (_, mut item) in std::mem::take(&mut simple_cache.cache) {
176 if let Some(Ok(image)) = item.get() {
177 cx.drop_image(image, None);
178 }
179 }
180 })
181 .detach();
182
183 Self {
184 max_items,
185 usages: Vec::with_capacity(max_items),
186 cache: HashMap::with_capacity(max_items),
187 }
188 }
189}
190
191impl ImageCache for SimpleLruCache {
192 fn load(
193 &mut self,
194 resource: &gpui::Resource,
195 window: &mut Window,
196 cx: &mut App,
197 ) -> Option<Result<Arc<gpui::RenderImage>, gpui::ImageCacheError>> {
198 assert_eq!(self.usages.len(), self.cache.len());
199 assert!(self.cache.len() <= self.max_items);
200
201 let hash = hash(resource);
202
203 if let Some(item) = self.cache.get_mut(&hash) {
204 let current_ix = self
205 .usages
206 .iter()
207 .position(|item| *item == hash)
208 .expect("cache and usages must stay in sync");
209 self.usages.remove(current_ix);
210 self.usages.insert(0, hash);
211
212 return item.get();
213 }
214
215 let fut = AssetLogger::<ImageAssetLoader>::load(resource.clone(), cx);
216 let task = cx.background_executor().spawn(fut).shared();
217 if self.usages.len() == self.max_items {
218 let oldest = self.usages.pop().unwrap();
219 let mut image = self
220 .cache
221 .remove(&oldest)
222 .expect("cache and usages must be in sync");
223 if let Some(Ok(image)) = image.get() {
224 cx.drop_image(image, Some(window));
225 }
226 }
227 self.cache
228 .insert(hash, gpui::ImageCacheItem::Loading(task.clone()));
229 self.usages.insert(0, hash);
230
231 let entity = window.current_view();
232 window
233 .spawn(cx, {
234 async move |cx| {
235 _ = task.await;
236 cx.on_next_frame(move |_, cx| {
237 cx.notify(entity);
238 });
239 }
240 })
241 .detach();
242
243 None
244 }
245}
246
247actions!(image, [Quit]);
248
249fn main() {
250 env_logger::init();
251
252 Application::new().run(move |cx: &mut App| {
253 let http_client = ReqwestClient::user_agent("gpui example").unwrap();
254 cx.set_http_client(Arc::new(http_client));
255
256 cx.activate(true);
257 cx.on_action(|_: &Quit, cx| cx.quit());
258 cx.bind_keys([KeyBinding::new("cmd-q", Quit, None)]);
259 cx.set_menus(vec![Menu {
260 name: "Image Gallery".into(),
261 items: vec![MenuItem::action("Quit", Quit)],
262 }]);
263
264 let window_options = WindowOptions {
265 titlebar: Some(TitlebarOptions {
266 title: Some(SharedString::from("Image Gallery")),
267 appears_transparent: false,
268 ..Default::default()
269 }),
270
271 window_bounds: Some(WindowBounds::Windowed(Bounds::centered(
272 None,
273 size(px(1100.), px(860.)),
274 cx,
275 ))),
276
277 ..Default::default()
278 };
279
280 cx.open_window(window_options, |_, cx| {
281 cx.new(|ctx| ImageGallery {
282 image_key: "".into(),
283 items_count: IMAGES_IN_GALLERY,
284 total_count: 0,
285 image_cache: RetainAllImageCache::new(ctx),
286 })
287 })
288 .unwrap();
289 });
290}