Image viewer (#9425)
This builds on #9353 by adding an image viewer to Zed. Closes #5251. Release Notes: - Added support for rendering image files ([#5251](https://github.com/zed-industries/zed/issues/5251)). <img width="1840" alt="image" src="https://github.com/zed-industries/zed/assets/836375/3bccfa8e-aa5c-421f-9dfa-671caa274c3c"> --------- Co-authored-by: Mikayla Maki <mikayla@zed.dev>
This commit is contained in:
Kyle Kelley
GitHub
parent
8d515a620f
commit
56bd96bc64
10 changed files with 422 additions and 45 deletions
22
crates/image_viewer/Cargo.toml
Normal file
22
crates/image_viewer/Cargo.toml
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
[package]
|
||||
name = "image_viewer"
|
||||
version = "0.1.0"
|
||||
edition = "2021"
|
||||
publish = false
|
||||
license = "GPL-3.0-or-later"
|
||||
|
||||
[lints]
|
||||
workspace = true
|
||||
|
||||
[lib]
|
||||
path = "src/image_viewer.rs"
|
||||
doctest = false
|
||||
|
||||
[dependencies]
|
||||
anyhow.workspace = true
|
||||
db.workspace = true
|
||||
gpui.workspace = true
|
||||
ui.workspace = true
|
||||
util.workspace = true
|
||||
workspace.workspace = true
|
||||
project.workspace = true
|
||||
291
crates/image_viewer/src/image_viewer.rs
Normal file
291
crates/image_viewer/src/image_viewer.rs
Normal file
|
|
@ -0,0 +1,291 @@
|
|||
use gpui::{
|
||||
canvas, div, fill, img, opaque_grey, point, size, AnyElement, AppContext, Bounds, Context,
|
||||
Element, EventEmitter, FocusHandle, FocusableView, InteractiveElement, IntoElement, Model,
|
||||
ParentElement, Render, Styled, Task, View, ViewContext, VisualContext, WeakView, WindowContext,
|
||||
};
|
||||
use persistence::IMAGE_VIEWER;
|
||||
use ui::{h_flex, prelude::*};
|
||||
|
||||
use project::{Project, ProjectEntryId, ProjectPath};
|
||||
use std::{ffi::OsStr, path::PathBuf};
|
||||
use util::ResultExt;
|
||||
use workspace::{
|
||||
item::{Item, ProjectItem},
|
||||
ItemId, Pane, Workspace, WorkspaceId,
|
||||
};
|
||||
|
||||
const IMAGE_VIEWER_KIND: &str = "ImageView";
|
||||
|
||||
pub struct ImageItem {
|
||||
path: PathBuf,
|
||||
project_path: ProjectPath,
|
||||
}
|
||||
|
||||
impl project::Item for ImageItem {
|
||||
fn try_open(
|
||||
project: &Model<Project>,
|
||||
path: &ProjectPath,
|
||||
cx: &mut AppContext,
|
||||
) -> Option<Task<gpui::Result<Model<Self>>>> {
|
||||
let path = path.clone();
|
||||
let project = project.clone();
|
||||
|
||||
let ext = path
|
||||
.path
|
||||
.extension()
|
||||
.and_then(OsStr::to_str)
|
||||
.unwrap_or_default();
|
||||
|
||||
let format = gpui::ImageFormat::from_extension(ext);
|
||||
if format.is_some() {
|
||||
Some(cx.spawn(|mut cx| async move {
|
||||
let abs_path = project
|
||||
.read_with(&cx, |project, cx| project.absolute_path(&path, cx))?
|
||||
.ok_or_else(|| anyhow::anyhow!("Failed to find the absolute path"))?;
|
||||
|
||||
cx.new_model(|_| ImageItem {
|
||||
path: abs_path,
|
||||
project_path: path,
|
||||
})
|
||||
}))
|
||||
} else {
|
||||
None
|
||||
}
|
||||
}
|
||||
|
||||
fn entry_id(&self, _: &AppContext) -> Option<ProjectEntryId> {
|
||||
None
|
||||
}
|
||||
|
||||
fn project_path(&self, _: &AppContext) -> Option<ProjectPath> {
|
||||
Some(self.project_path.clone())
|
||||
}
|
||||
}
|
||||
|
||||
pub struct ImageView {
|
||||
path: PathBuf,
|
||||
focus_handle: FocusHandle,
|
||||
}
|
||||
|
||||
impl Item for ImageView {
|
||||
type Event = ();
|
||||
|
||||
fn tab_content(
|
||||
&self,
|
||||
_detail: Option<usize>,
|
||||
_selected: bool,
|
||||
_cx: &WindowContext,
|
||||
) -> AnyElement {
|
||||
self.path
|
||||
.file_name()
|
||||
.unwrap_or_else(|| self.path.as_os_str())
|
||||
.to_string_lossy()
|
||||
.to_string()
|
||||
.into_any_element()
|
||||
}
|
||||
|
||||
fn added_to_workspace(&mut self, workspace: &mut Workspace, cx: &mut ViewContext<Self>) {
|
||||
let item_id = cx.entity_id().as_u64();
|
||||
let workspace_id = workspace.database_id();
|
||||
let image_path = self.path.clone();
|
||||
|
||||
cx.background_executor()
|
||||
.spawn({
|
||||
let image_path = image_path.clone();
|
||||
async move {
|
||||
IMAGE_VIEWER
|
||||
.save_image_path(item_id, workspace_id, image_path)
|
||||
.await
|
||||
.log_err();
|
||||
}
|
||||
})
|
||||
.detach();
|
||||
}
|
||||
|
||||
fn serialized_item_kind() -> Option<&'static str> {
|
||||
Some(IMAGE_VIEWER_KIND)
|
||||
}
|
||||
|
||||
fn deserialize(
|
||||
_project: Model<Project>,
|
||||
_workspace: WeakView<Workspace>,
|
||||
workspace_id: WorkspaceId,
|
||||
item_id: ItemId,
|
||||
cx: &mut ViewContext<Pane>,
|
||||
) -> Task<anyhow::Result<View<Self>>> {
|
||||
cx.spawn(|_pane, mut cx| async move {
|
||||
let image_path = IMAGE_VIEWER
|
||||
.get_image_path(item_id, workspace_id)?
|
||||
.ok_or_else(|| anyhow::anyhow!("No image path found"))?;
|
||||
|
||||
cx.new_view(|cx| ImageView {
|
||||
path: image_path,
|
||||
focus_handle: cx.focus_handle(),
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
fn clone_on_split(
|
||||
&self,
|
||||
_workspace_id: WorkspaceId,
|
||||
cx: &mut ViewContext<Self>,
|
||||
) -> Option<View<Self>>
|
||||
where
|
||||
Self: Sized,
|
||||
{
|
||||
Some(cx.new_view(|cx| Self {
|
||||
path: self.path.clone(),
|
||||
focus_handle: cx.focus_handle(),
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
impl EventEmitter<()> for ImageView {}
|
||||
impl FocusableView for ImageView {
|
||||
fn focus_handle(&self, _cx: &AppContext) -> FocusHandle {
|
||||
self.focus_handle.clone()
|
||||
}
|
||||
}
|
||||
|
||||
impl Render for ImageView {
|
||||
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
|
||||
let im = img(self.path.clone()).into_any();
|
||||
|
||||
div()
|
||||
.track_focus(&self.focus_handle)
|
||||
.size_full()
|
||||
.child(
|
||||
// Checkered background behind the image
|
||||
canvas(
|
||||
|_, _| (),
|
||||
|bounds, _, cx| {
|
||||
let square_size = 32.0;
|
||||
|
||||
let start_y = bounds.origin.y.0;
|
||||
let height = bounds.size.height.0;
|
||||
let start_x = bounds.origin.x.0;
|
||||
let width = bounds.size.width.0;
|
||||
|
||||
let mut y = start_y;
|
||||
let mut x = start_x;
|
||||
let mut color_swapper = true;
|
||||
// draw checkerboard pattern
|
||||
while y <= start_y + height {
|
||||
// Keeping track of the grid in order to be resilient to resizing
|
||||
let start_swap = color_swapper;
|
||||
while x <= start_x + width {
|
||||
let rect = Bounds::new(
|
||||
point(px(x), px(y)),
|
||||
size(px(square_size), px(square_size)),
|
||||
);
|
||||
|
||||
let color = if color_swapper {
|
||||
opaque_grey(0.6, 0.4)
|
||||
} else {
|
||||
opaque_grey(0.7, 0.4)
|
||||
};
|
||||
|
||||
cx.paint_quad(fill(rect, color));
|
||||
color_swapper = !color_swapper;
|
||||
x += square_size;
|
||||
}
|
||||
x = start_x;
|
||||
color_swapper = !start_swap;
|
||||
y += square_size;
|
||||
}
|
||||
},
|
||||
)
|
||||
.border_2()
|
||||
.border_color(cx.theme().styles.colors.border)
|
||||
.size_full()
|
||||
.absolute()
|
||||
.top_0()
|
||||
.left_0(),
|
||||
)
|
||||
.child(
|
||||
v_flex()
|
||||
.h_full()
|
||||
.justify_around()
|
||||
.child(h_flex().w_full().justify_around().child(im)),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
impl ProjectItem for ImageView {
|
||||
type Item = ImageItem;
|
||||
|
||||
fn for_project_item(
|
||||
_project: Model<Project>,
|
||||
item: Model<Self::Item>,
|
||||
cx: &mut ViewContext<Self>,
|
||||
) -> Self
|
||||
where
|
||||
Self: Sized,
|
||||
{
|
||||
Self {
|
||||
path: item.read(cx).path.clone(),
|
||||
focus_handle: cx.focus_handle(),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pub fn init(cx: &mut AppContext) {
|
||||
workspace::register_project_item::<ImageView>(cx);
|
||||
workspace::register_deserializable_item::<ImageView>(cx)
|
||||
}
|
||||
|
||||
mod persistence {
|
||||
use std::path::PathBuf;
|
||||
|
||||
use db::{define_connection, query, sqlez_macros::sql};
|
||||
use workspace::{ItemId, WorkspaceDb, WorkspaceId};
|
||||
|
||||
define_connection! {
|
||||
pub static ref IMAGE_VIEWER: ImageViewerDb<WorkspaceDb> =
|
||||
&[sql!(
|
||||
CREATE TABLE image_viewers (
|
||||
workspace_id INTEGER,
|
||||
item_id INTEGER UNIQUE,
|
||||
|
||||
image_path BLOB,
|
||||
|
||||
PRIMARY KEY(workspace_id, item_id),
|
||||
FOREIGN KEY(workspace_id) REFERENCES workspaces(workspace_id)
|
||||
ON DELETE CASCADE
|
||||
) STRICT;
|
||||
)];
|
||||
}
|
||||
|
||||
impl ImageViewerDb {
|
||||
query! {
|
||||
pub async fn update_workspace_id(
|
||||
new_id: WorkspaceId,
|
||||
old_id: WorkspaceId,
|
||||
item_id: ItemId
|
||||
) -> Result<()> {
|
||||
UPDATE image_viewers
|
||||
SET workspace_id = ?
|
||||
WHERE workspace_id = ? AND item_id = ?
|
||||
}
|
||||
}
|
||||
|
||||
query! {
|
||||
pub async fn save_image_path(
|
||||
item_id: ItemId,
|
||||
workspace_id: WorkspaceId,
|
||||
image_path: PathBuf
|
||||
) -> Result<()> {
|
||||
INSERT OR REPLACE INTO image_viewers(item_id, workspace_id, image_path)
|
||||
VALUES (?, ?, ?)
|
||||
}
|
||||
}
|
||||
|
||||
query! {
|
||||
pub fn get_image_path(item_id: ItemId, workspace_id: WorkspaceId) -> Result<Option<PathBuf>> {
|
||||
SELECT image_path
|
||||
FROM image_viewers
|
||||
WHERE item_id = ? AND workspace_id = ?
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue