Add GPUI example

Cargo.toml

@@ -116,6 +116,7 @@ winit = "0.29"
 getrandom = "0.2"
 http-range = "0.1"
 percent-encoding = "2.3"
+gpui = { git = "https://github.com/huacnlee/zed.git", branch = "export-platform-window" }
 
 [lints.rust.unexpected_cfgs]
 level = "warn"

examples/gpui.rs

@@ -0,0 +1,221 @@
+use std::rc::Rc;
+
+use gpui::*;
+use wry::{
+  dpi::{self, LogicalSize},
+  Rect,
+};
+
+struct WebViewContainer {
+  focus_handle: FocusHandle,
+  webview: View<WebView>,
+  pressed_keys: Vec<String>,
+}
+
+impl WebViewContainer {
+  fn new(cx: &mut WindowContext) -> Self {
+    let focus_handle = cx.focus_handle();
+    focus_handle.focus(cx);
+
+    Self {
+      focus_handle,
+      webview: cx.new_view(|cx| WebView::new(cx)),
+      pressed_keys: vec![],
+    }
+  }
+}
+
+impl Render for WebViewContainer {
+  fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+    div().flex().bg(rgb(0xF0F0F0)).size_full().p_10().child(
+      div()
+        .id("webview-container")
+        .track_focus(&self.focus_handle)
+        .on_key_down(cx.listener(|view, e: &KeyDownEvent, cx| {
+          if view.pressed_keys.len() >= 10 {
+            view.pressed_keys.remove(0);
+          }
+
+          view.pressed_keys.push(format!("{}", e.keystroke));
+          cx.notify();
+        }))
+        .flex()
+        .flex_col()
+        .size_full()
+        .justify_center()
+        .items_center()
+        .gap_4()
+        .child("Wry WebView Demo")
+        .child(self.pressed_keys.join(", "))
+        .child(self.webview.clone()),
+    )
+  }
+}
+
+fn main() {
+  App::new().run(|cx: &mut AppContext| {
+    let bounds = Bounds::centered(None, size(px(1200.0), px(800.0)), cx);
+    let window = cx
+      .open_window(
+        WindowOptions {
+          window_bounds: Some(WindowBounds::Windowed(bounds)),
+          kind: WindowKind::Normal,
+          ..Default::default()
+        },
+        |cx| cx.new_view(|cx| WebViewContainer::new(cx)),
+      )
+      .unwrap();
+
+    cx.spawn(|mut cx| async move {
+      window
+        .update(&mut cx, |_, cx| {
+          cx.activate_window();
+          cx.set_window_title("WebView Example");
+          cx.on_release(|_, _, _cx| {
+            // exit app
+            std::process::exit(0);
+          })
+          .detach();
+        })
+        .unwrap();
+    })
+    .detach();
+  });
+}
+
+/// A webview element that can display a URL or HTML content.
+pub struct WebView {
+  focus_handle: FocusHandle,
+  view: Rc<wry::WebView>,
+}
+
+impl WebView {
+  /// Create a new webview element.
+  pub fn new(cx: &mut WindowContext) -> Self {
+    let view = Rc::new(
+      wry::WebViewBuilder::new_as_child(&cx.raw_window_handle())
+        .with_url("https://www.google.com")
+        .build()
+        .expect("Failed to create webview."),
+    );
+
+    Self {
+      focus_handle: cx.focus_handle(),
+      view,
+    }
+  }
+}
+
+impl Render for WebView {
+  fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
+    div()
+      .id("WebView")
+      .track_focus(&self.focus_handle)
+      .block()
+      .overflow_y_scroll()
+      .size_full()
+      .justify_center()
+      .items_center()
+      .border_1()
+      .rounded_md()
+      .bg(gpui::white())
+      .border_color(rgb(0xD0D0D0))
+      .child(WebViewElement {
+        view: self.view.clone(),
+      })
+  }
+}
+
+struct WebViewElement {
+  view: Rc<wry::WebView>,
+}
+impl IntoElement for WebViewElement {
+  type Element = WebViewElement;
+
+  fn into_element(self) -> Self::Element {
+    self
+  }
+}
+
+impl Element for WebViewElement {
+  type RequestLayoutState = ();
+  type PrepaintState = Option<Hitbox>;
+
+  fn id(&self) -> Option<ElementId> {
+    None
+  }
+
+  #[allow(clippy::field_reassign_with_default)]
+  fn request_layout(
+    &mut self,
+    _: Option<&GlobalElementId>,
+    cx: &mut WindowContext,
+  ) -> (LayoutId, Self::RequestLayoutState) {
+    let mut style = Style::default();
+    style.flex_grow = 1.0;
+    style.size = Size::full();
+    let id = cx.request_layout(style, []);
+    (id, ())
+  }
+
+  fn prepaint(
+    &mut self,
+    _: Option<&GlobalElementId>,
+    bounds: Bounds<Pixels>,
+    _: &mut Self::RequestLayoutState,
+    cx: &mut WindowContext,
+  ) -> Self::PrepaintState {
+    if bounds.top() > cx.viewport_size().height || bounds.bottom() < Pixels::ZERO {
+      self.view.set_visible(false).unwrap();
+
+      None
+    } else {
+      self.view.set_visible(true).unwrap();
+
+      self
+        .view
+        .set_bounds(Rect {
+          size: dpi::Size::Logical(LogicalSize {
+            width: (bounds.size.width.0).into(),
+            height: (bounds.size.height.0).into(),
+          }),
+          position: dpi::Position::Logical(dpi::LogicalPosition::new(
+            bounds.origin.x.into(),
+            bounds.origin.y.into(),
+          )),
+        })
+        .unwrap();
+
+      // Create a hitbox to handle mouse event
+      Some(cx.insert_hitbox(bounds, false))
+    }
+  }
+
+  fn paint(
+    &mut self,
+    _: Option<&GlobalElementId>,
+    bounds: Bounds<Pixels>,
+    _: &mut Self::RequestLayoutState,
+    hitbox: &mut Self::PrepaintState,
+    cx: &mut WindowContext,
+  ) {
+    let bounds = hitbox.clone().map(|h| h.bounds).unwrap_or(bounds);
+    cx.with_content_mask(Some(ContentMask { bounds }), |cx| {
+      let webview = self.view.clone();
+      cx.on_mouse_event(move |event: &MouseDownEvent, _, cx| {
+        if !bounds.contains(&event.position) {
+          // Click white space to blur the input focus
+          webview
+            .evaluate_script(
+              r#"
+              document.querySelectorAll("input,textarea").forEach(input => input.blur());
+              "#,
+            )
+            .expect("failed to evaluate_script to blur input");
+        } else {
+          cx.blur();
+        }
+      });
+    });
+  }
+}