1use gpui::{
2 canvas, div, fill, img, opaque_grey, point, size, AnyElement, AppContext, Bounds, Context,
3 EventEmitter, FocusHandle, FocusableView, Img, InteractiveElement, IntoElement, Model,
4 ObjectFit, ParentElement, Render, Styled, Task, View, ViewContext, VisualContext, WeakView,
5 WindowContext,
6};
7use persistence::IMAGE_VIEWER;
8use ui::prelude::*;
9
10use project::{Project, ProjectEntryId, ProjectPath};
11use std::{ffi::OsStr, path::PathBuf};
12use workspace::{
13 item::{Item, ProjectItem, SerializableItem, TabContentParams},
14 ItemId, Pane, Workspace, WorkspaceId,
15};
16
17const IMAGE_VIEWER_KIND: &str = "ImageView";
18
19pub struct ImageItem {
20 path: PathBuf,
21 project_path: ProjectPath,
22}
23
24impl project::Item for ImageItem {
25 fn try_open(
26 project: &Model<Project>,
27 path: &ProjectPath,
28 cx: &mut AppContext,
29 ) -> Option<Task<gpui::Result<Model<Self>>>> {
30 let path = path.clone();
31 let project = project.clone();
32
33 let ext = path
34 .path
35 .extension()
36 .and_then(OsStr::to_str)
37 .unwrap_or_default();
38
39 // Only open the item if it's a binary image (no SVGs, etc.)
40 // Since we do not have a way to toggle to an editor
41 if Img::extensions().contains(&ext) && !ext.contains("svg") {
42 Some(cx.spawn(|mut cx| async move {
43 let abs_path = project
44 .read_with(&cx, |project, cx| project.absolute_path(&path, cx))?
45 .ok_or_else(|| anyhow::anyhow!("Failed to find the absolute path"))?;
46
47 cx.new_model(|_| ImageItem {
48 path: abs_path,
49 project_path: path,
50 })
51 }))
52 } else {
53 None
54 }
55 }
56
57 fn entry_id(&self, _: &AppContext) -> Option<ProjectEntryId> {
58 None
59 }
60
61 fn project_path(&self, _: &AppContext) -> Option<ProjectPath> {
62 Some(self.project_path.clone())
63 }
64}
65
66pub struct ImageView {
67 path: PathBuf,
68 focus_handle: FocusHandle,
69}
70
71impl Item for ImageView {
72 type Event = ();
73
74 fn tab_content(&self, params: TabContentParams, _cx: &WindowContext) -> AnyElement {
75 let title = self
76 .path
77 .file_name()
78 .unwrap_or_else(|| self.path.as_os_str())
79 .to_string_lossy()
80 .to_string();
81 Label::new(title)
82 .single_line()
83 .color(if params.selected {
84 Color::Default
85 } else {
86 Color::Muted
87 })
88 .italic(params.preview)
89 .into_any_element()
90 }
91
92 fn clone_on_split(
93 &self,
94 _workspace_id: Option<WorkspaceId>,
95 cx: &mut ViewContext<Self>,
96 ) -> Option<View<Self>>
97 where
98 Self: Sized,
99 {
100 Some(cx.new_view(|cx| Self {
101 path: self.path.clone(),
102 focus_handle: cx.focus_handle(),
103 }))
104 }
105}
106
107impl SerializableItem for ImageView {
108 fn serialized_item_kind() -> &'static str {
109 IMAGE_VIEWER_KIND
110 }
111
112 fn deserialize(
113 _project: Model<Project>,
114 _workspace: WeakView<Workspace>,
115 workspace_id: WorkspaceId,
116 item_id: ItemId,
117 cx: &mut ViewContext<Pane>,
118 ) -> Task<gpui::Result<View<Self>>> {
119 cx.spawn(|_pane, mut cx| async move {
120 let image_path = IMAGE_VIEWER
121 .get_image_path(item_id, workspace_id)?
122 .ok_or_else(|| anyhow::anyhow!("No image path found"))?;
123
124 cx.new_view(|cx| ImageView {
125 path: image_path,
126 focus_handle: cx.focus_handle(),
127 })
128 })
129 }
130
131 fn cleanup(
132 workspace_id: WorkspaceId,
133 alive_items: Vec<ItemId>,
134 cx: &mut WindowContext,
135 ) -> Task<gpui::Result<()>> {
136 cx.spawn(|_| IMAGE_VIEWER.delete_unloaded_items(workspace_id, alive_items))
137 }
138
139 fn serialize(
140 &mut self,
141 workspace: &mut Workspace,
142 item_id: ItemId,
143 _closing: bool,
144 cx: &mut ViewContext<Self>,
145 ) -> Option<Task<gpui::Result<()>>> {
146 let workspace_id = workspace.database_id()?;
147
148 Some(cx.background_executor().spawn({
149 let image_path = self.path.clone();
150 async move {
151 IMAGE_VIEWER
152 .save_image_path(item_id, workspace_id, image_path)
153 .await
154 }
155 }))
156 }
157
158 fn should_serialize(&self, _event: &Self::Event) -> bool {
159 false
160 }
161}
162
163impl EventEmitter<()> for ImageView {}
164impl FocusableView for ImageView {
165 fn focus_handle(&self, _cx: &AppContext) -> FocusHandle {
166 self.focus_handle.clone()
167 }
168}
169
170impl Render for ImageView {
171 fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
172 let checkered_background = |bounds: Bounds<Pixels>, _, cx: &mut WindowContext| {
173 let square_size = 32.0;
174
175 let start_y = bounds.origin.y.0;
176 let height = bounds.size.height.0;
177 let start_x = bounds.origin.x.0;
178 let width = bounds.size.width.0;
179
180 let mut y = start_y;
181 let mut x = start_x;
182 let mut color_swapper = true;
183 // draw checkerboard pattern
184 while y <= start_y + height {
185 // Keeping track of the grid in order to be resilient to resizing
186 let start_swap = color_swapper;
187 while x <= start_x + width {
188 let rect =
189 Bounds::new(point(px(x), px(y)), size(px(square_size), px(square_size)));
190
191 let color = if color_swapper {
192 opaque_grey(0.6, 0.4)
193 } else {
194 opaque_grey(0.7, 0.4)
195 };
196
197 cx.paint_quad(fill(rect, color));
198 color_swapper = !color_swapper;
199 x += square_size;
200 }
201 x = start_x;
202 color_swapper = !start_swap;
203 y += square_size;
204 }
205 };
206
207 let checkered_background = canvas(|_, _| (), checkered_background)
208 .border_2()
209 .border_color(cx.theme().styles.colors.border)
210 .size_full()
211 .absolute()
212 .top_0()
213 .left_0();
214
215 div()
216 .track_focus(&self.focus_handle)
217 .size_full()
218 .child(checkered_background)
219 .child(
220 div()
221 .flex()
222 .justify_center()
223 .items_center()
224 .w_full()
225 // TODO: In browser based Tailwind & Flex this would be h-screen and we'd use w-full
226 .h_full()
227 .child(
228 img(self.path.clone())
229 .object_fit(ObjectFit::ScaleDown)
230 .max_w_full()
231 .max_h_full(),
232 ),
233 )
234 }
235}
236
237impl ProjectItem for ImageView {
238 type Item = ImageItem;
239
240 fn for_project_item(
241 _project: Model<Project>,
242 item: Model<Self::Item>,
243 cx: &mut ViewContext<Self>,
244 ) -> Self
245 where
246 Self: Sized,
247 {
248 Self {
249 path: item.read(cx).path.clone(),
250 focus_handle: cx.focus_handle(),
251 }
252 }
253}
254
255pub fn init(cx: &mut AppContext) {
256 workspace::register_project_item::<ImageView>(cx);
257 workspace::register_serializable_item::<ImageView>(cx)
258}
259
260mod persistence {
261 use anyhow::Result;
262 use std::path::PathBuf;
263
264 use db::{define_connection, query, sqlez::statement::Statement, sqlez_macros::sql};
265 use workspace::{ItemId, WorkspaceDb, WorkspaceId};
266
267 define_connection! {
268 pub static ref IMAGE_VIEWER: ImageViewerDb<WorkspaceDb> =
269 &[sql!(
270 CREATE TABLE image_viewers (
271 workspace_id INTEGER,
272 item_id INTEGER UNIQUE,
273
274 image_path BLOB,
275
276 PRIMARY KEY(workspace_id, item_id),
277 FOREIGN KEY(workspace_id) REFERENCES workspaces(workspace_id)
278 ON DELETE CASCADE
279 ) STRICT;
280 )];
281 }
282
283 impl ImageViewerDb {
284 query! {
285 pub async fn update_workspace_id(
286 new_id: WorkspaceId,
287 old_id: WorkspaceId,
288 item_id: ItemId
289 ) -> Result<()> {
290 UPDATE image_viewers
291 SET workspace_id = ?
292 WHERE workspace_id = ? AND item_id = ?
293 }
294 }
295
296 query! {
297 pub async fn save_image_path(
298 item_id: ItemId,
299 workspace_id: WorkspaceId,
300 image_path: PathBuf
301 ) -> Result<()> {
302 INSERT OR REPLACE INTO image_viewers(item_id, workspace_id, image_path)
303 VALUES (?, ?, ?)
304 }
305 }
306
307 query! {
308 pub fn get_image_path(item_id: ItemId, workspace_id: WorkspaceId) -> Result<Option<PathBuf>> {
309 SELECT image_path
310 FROM image_viewers
311 WHERE item_id = ? AND workspace_id = ?
312 }
313 }
314
315 pub async fn delete_unloaded_items(
316 &self,
317 workspace: WorkspaceId,
318 alive_items: Vec<ItemId>,
319 ) -> Result<()> {
320 let placeholders = alive_items
321 .iter()
322 .map(|_| "?")
323 .collect::<Vec<&str>>()
324 .join(", ");
325
326 let query = format!("DELETE FROM image_viewers WHERE workspace_id = ? AND item_id NOT IN ({placeholders})");
327
328 self.write(move |conn| {
329 let mut statement = Statement::prepare(conn, query)?;
330 let mut next_index = statement.bind(&workspace, 1)?;
331 for id in alive_items {
332 next_index = statement.bind(&id, next_index)?;
333 }
334 statement.exec()
335 })
336 .await
337 }
338 }
339}