mirror of
https://github.com/zed-industries/zed.git
synced 2025-01-11 05:00:16 +00:00
47aa761ca9
This PR adds support for full client side decorations on X11 and Wayland TODO: - [x] Adjust GPUI APIs to expose CSD related information - [x] Implement remaining CSD features (Resizing, window border, window shadow) - [x] Integrate with existing background appearance and window transparency - [x] Figure out how to check if the window is tiled on X11 - [x] Implement in Zed - [x] Repeatedly maximizing and unmaximizing can panic - [x] Resizing is strangely slow - [x] X11 resizing and movement doesn't work for this: https://discord.com/channels/869392257814519848/1204679850208657418/1256816908519604305 - [x] The top corner can clip with current styling - [x] Pressing titlebar buttons doesn't work - [x] Not showing maximize / unmaximize buttons - [x] Noisy transparency logs / surface transparency problem https://github.com/zed-industries/zed/pull/13611#issuecomment-2201685030 - [x] Strange offsets when dragging the project panel https://github.com/zed-industries/zed/pull/13611#pullrequestreview-2154606261 - [x] Shadow inset with `_GTK_FRAME_EXTENTS` doesn't respect tiling on X11 (observe by snapping an X11 window in any direction) Release Notes: - N/A --------- Co-authored-by: conrad <conrad@zed.dev> Co-authored-by: Owen Law <81528246+someone13574@users.noreply.github.com> Co-authored-by: apricotbucket28 <71973804+apricotbucket28@users.noreply.github.com> Co-authored-by: Conrad Irwin <conrad.irwin@gmail.com>
222 lines
10 KiB
Rust
222 lines
10 KiB
Rust
use gpui::*;
|
|
use prelude::FluentBuilder;
|
|
|
|
struct WindowShadow {}
|
|
|
|
/*
|
|
Things to do:
|
|
1. We need a way of calculating which edge or corner the mouse is on,
|
|
and then dispatch on that
|
|
2. We need to improve the shadow rendering significantly
|
|
3. We need to implement the techniques in here in Zed
|
|
*/
|
|
|
|
impl Render for WindowShadow {
|
|
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
|
|
let decorations = cx.window_decorations();
|
|
let rounding = px(10.0);
|
|
let shadow_size = px(10.0);
|
|
let border_size = px(1.0);
|
|
let grey = rgb(0x808080);
|
|
cx.set_client_inset(shadow_size);
|
|
|
|
div()
|
|
.id("window-backdrop")
|
|
.bg(transparent_black())
|
|
.map(|div| match decorations {
|
|
Decorations::Server => div,
|
|
Decorations::Client { tiling, .. } => div
|
|
.bg(gpui::transparent_black())
|
|
.child(
|
|
canvas(
|
|
|_bounds, cx| {
|
|
cx.insert_hitbox(
|
|
Bounds::new(
|
|
point(px(0.0), px(0.0)),
|
|
cx.window_bounds().get_bounds().size,
|
|
),
|
|
false,
|
|
)
|
|
},
|
|
move |_bounds, hitbox, cx| {
|
|
let mouse = cx.mouse_position();
|
|
let size = cx.window_bounds().get_bounds().size;
|
|
let Some(edge) = resize_edge(mouse, shadow_size, size) else {
|
|
return;
|
|
};
|
|
cx.set_cursor_style(
|
|
match edge {
|
|
ResizeEdge::Top | ResizeEdge::Bottom => {
|
|
CursorStyle::ResizeUpDown
|
|
}
|
|
ResizeEdge::Left | ResizeEdge::Right => {
|
|
CursorStyle::ResizeLeftRight
|
|
}
|
|
ResizeEdge::TopLeft | ResizeEdge::BottomRight => {
|
|
CursorStyle::ResizeUpLeftDownRight
|
|
}
|
|
ResizeEdge::TopRight | ResizeEdge::BottomLeft => {
|
|
CursorStyle::ResizeUpRightDownLeft
|
|
}
|
|
},
|
|
&hitbox,
|
|
);
|
|
},
|
|
)
|
|
.size_full()
|
|
.absolute(),
|
|
)
|
|
.when(!(tiling.top || tiling.right), |div| {
|
|
div.rounded_tr(rounding)
|
|
})
|
|
.when(!(tiling.top || tiling.left), |div| div.rounded_tl(rounding))
|
|
.when(!tiling.top, |div| div.pt(shadow_size))
|
|
.when(!tiling.bottom, |div| div.pb(shadow_size))
|
|
.when(!tiling.left, |div| div.pl(shadow_size))
|
|
.when(!tiling.right, |div| div.pr(shadow_size))
|
|
.on_mouse_move(|_e, cx| cx.refresh())
|
|
.on_mouse_down(MouseButton::Left, move |e, cx| {
|
|
let size = cx.window_bounds().get_bounds().size;
|
|
let pos = e.position;
|
|
|
|
match resize_edge(pos, shadow_size, size) {
|
|
Some(edge) => cx.start_window_resize(edge),
|
|
None => cx.start_window_move(),
|
|
};
|
|
}),
|
|
})
|
|
.size_full()
|
|
.child(
|
|
div()
|
|
.cursor(CursorStyle::Arrow)
|
|
.map(|div| match decorations {
|
|
Decorations::Server => div,
|
|
Decorations::Client { tiling } => div
|
|
.border_color(grey)
|
|
.when(!(tiling.top || tiling.right), |div| {
|
|
div.rounded_tr(rounding)
|
|
})
|
|
.when(!(tiling.top || tiling.left), |div| div.rounded_tl(rounding))
|
|
.when(!tiling.top, |div| div.border_t(border_size))
|
|
.when(!tiling.bottom, |div| div.border_b(border_size))
|
|
.when(!tiling.left, |div| div.border_l(border_size))
|
|
.when(!tiling.right, |div| div.border_r(border_size))
|
|
.when(!tiling.is_tiled(), |div| {
|
|
div.shadow(smallvec::smallvec![gpui::BoxShadow {
|
|
color: Hsla {
|
|
h: 0.,
|
|
s: 0.,
|
|
l: 0.,
|
|
a: 0.4,
|
|
},
|
|
blur_radius: shadow_size / 2.,
|
|
spread_radius: px(0.),
|
|
offset: point(px(0.0), px(0.0)),
|
|
}])
|
|
}),
|
|
})
|
|
.on_mouse_move(|_e, cx| {
|
|
cx.stop_propagation();
|
|
})
|
|
.bg(gpui::rgb(0xCCCCFF))
|
|
.size_full()
|
|
.flex()
|
|
.flex_col()
|
|
.justify_around()
|
|
.child(
|
|
div().w_full().flex().flex_row().justify_around().child(
|
|
div()
|
|
.flex()
|
|
.bg(white())
|
|
.size(Length::Definite(Pixels(300.0).into()))
|
|
.justify_center()
|
|
.items_center()
|
|
.shadow_lg()
|
|
.border_1()
|
|
.border_color(rgb(0x0000ff))
|
|
.text_xl()
|
|
.text_color(rgb(0xffffff))
|
|
.child(
|
|
div()
|
|
.id("hello")
|
|
.w(px(200.0))
|
|
.h(px(100.0))
|
|
.bg(green())
|
|
.shadow(smallvec::smallvec![gpui::BoxShadow {
|
|
color: Hsla {
|
|
h: 0.,
|
|
s: 0.,
|
|
l: 0.,
|
|
a: 1.0,
|
|
},
|
|
blur_radius: px(20.0),
|
|
spread_radius: px(0.0),
|
|
offset: point(px(0.0), px(0.0)),
|
|
}])
|
|
.map(|div| match decorations {
|
|
Decorations::Server => div,
|
|
Decorations::Client { .. } => div
|
|
.on_mouse_down(MouseButton::Left, |_e, cx| {
|
|
cx.start_window_move();
|
|
})
|
|
.on_click(|e, cx| {
|
|
if e.down.button == MouseButton::Right {
|
|
cx.show_window_menu(e.up.position);
|
|
}
|
|
})
|
|
.text_color(black())
|
|
.child("this is the custom titlebar"),
|
|
}),
|
|
),
|
|
),
|
|
),
|
|
)
|
|
}
|
|
}
|
|
|
|
fn resize_edge(pos: Point<Pixels>, shadow_size: Pixels, size: Size<Pixels>) -> Option<ResizeEdge> {
|
|
let edge = if pos.y < shadow_size && pos.x < shadow_size {
|
|
ResizeEdge::TopLeft
|
|
} else if pos.y < shadow_size && pos.x > size.width - shadow_size {
|
|
ResizeEdge::TopRight
|
|
} else if pos.y < shadow_size {
|
|
ResizeEdge::Top
|
|
} else if pos.y > size.height - shadow_size && pos.x < shadow_size {
|
|
ResizeEdge::BottomLeft
|
|
} else if pos.y > size.height - shadow_size && pos.x > size.width - shadow_size {
|
|
ResizeEdge::BottomRight
|
|
} else if pos.y > size.height - shadow_size {
|
|
ResizeEdge::Bottom
|
|
} else if pos.x < shadow_size {
|
|
ResizeEdge::Left
|
|
} else if pos.x > size.width - shadow_size {
|
|
ResizeEdge::Right
|
|
} else {
|
|
return None;
|
|
};
|
|
Some(edge)
|
|
}
|
|
|
|
fn main() {
|
|
App::new().run(|cx: &mut AppContext| {
|
|
let bounds = Bounds::centered(None, size(px(600.0), px(600.0)), cx);
|
|
cx.open_window(
|
|
WindowOptions {
|
|
window_bounds: Some(WindowBounds::Windowed(bounds)),
|
|
window_background: WindowBackgroundAppearance::Opaque,
|
|
window_decorations: Some(WindowDecorations::Client),
|
|
..Default::default()
|
|
},
|
|
|cx| {
|
|
cx.new_view(|cx| {
|
|
cx.observe_window_appearance(|_, cx| {
|
|
cx.refresh();
|
|
})
|
|
.detach();
|
|
WindowShadow {}
|
|
})
|
|
},
|
|
)
|
|
.unwrap();
|
|
});
|
|
}
|