feat/ draggable-region (#92)

* feat: add draggable-regions (gtk-rs) * fix: fix clippy_fmt_check ci * feat: add draggable-regions (winit) * chore: add change file * pull winit from github * Update draggable-regions.md
tauri-apps · Mar 25, 2021 · b2a0bfc · b2a0bfc
1 parent 6d31706
commit b2a0bfc
Show file tree

Hide file tree

Showing 7 changed files with 176 additions and 25 deletions.
diff --git a/.changes/draggable-regions.md b/.changes/draggable-regions.md
@@ -0,0 +1,5 @@
+---
+"wry": patch
+---
+
+Add draggable regions, just add `drag-region` class to the html element.
diff --git a/Cargo.toml b/Cargo.toml
@@ -46,11 +46,11 @@ gdk-pixbuf = "0.9"
 [target."cfg(target_os = \"windows\")".dependencies]
 webview2 = "0.1.0-beta.1"
 winapi = { version = "0.3", features = [ "libloaderapi", "oleidl" ] }
-winit = "0.24"
+winit = { git = "https:/github.com/rust-windowing/winit", rev = "98470393d11b3b670c1e122c26a15c563dcf68a4"}
 
 [target."cfg(target_os = \"macos\")".dependencies]
 cocoa = "0.24"
 core-graphics = "0.22"
 objc = "0.2"
 objc_id = "0.1"
-winit = "0.24"
+winit = { git = "https:/github.com/rust-windowing/winit", rev = "98470393d11b3b670c1e122c26a15c563dcf68a4"}
diff --git a/examples/customtitlebar.rs b/examples/customtitlebar.rs
@@ -0,0 +1,104 @@
+use wry::{Application, Attributes, Result, RpcRequest, WindowProxy, WindowRpcHandler};
+
+fn main() -> Result<()> {
+  let mut app = Application::new()?;
+
+  let attributes = Attributes {
+    url: Some(
+      r#"data:text/html,
+        <body>
+          <div class='drag-region titlebar'>
+            <div class="left">Awesome WRY Window</div>
+            <div class="right">
+              <div class="titlebar-button" id="minimize">
+                <img src="https://api.iconify.design/codicon:chrome-minimize.svg" />
+              </div>
+              <div class="titlebar-button" id="maximize">
+                <img src="https://api.iconify.design/codicon:chrome-maximize.svg" />
+              </div>
+              <div class="titlebar-button" id="close">
+                <img src="https://api.iconify.design/codicon:close.svg" />
+              </div>
+            </div>
+          </div>
+          <div>
+            WRYYYYYYYYYYYYYYYYYYYYYY!
+          </div>
+        </body>
+        <script>
+          let maximized = false;
+          document.getElementById('minimize').addEventListener('click', () => rpc.notify('minimize'));
+          document.getElementById('maximize').addEventListener('click', () => {
+            maximized = !maximized;
+            rpc.notify('maximize', maximized);
+          });
+          document.getElementById('close').addEventListener('click', () => rpc.notify('close'));
+        </script>
+      "#.into(),
+    ),
+    // inject the css after 500ms, otherwise it won't work as the `head` element isn't created yet.
+    initialization_scripts:vec![
+      r#"
+        setTimeout(() => {
+          const style = document.createElement('style');
+          style.textContent = `
+            * {
+              padding: 0;
+              margin: 0;
+              box-sizing: border-box;
+            }
+            .titlebar {
+              height: 30px;
+              background: #1F1F1F;
+              color: white;
+              user-select: none;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+            }
+            .titlebar-button {
+              display: inline-flex;
+              justify-content: center;
+              align-items: center;
+              width: 30px;
+              height: 30px;
+            }
+            .titlebar-button:hover {
+              background: #3b3b3b;
+            }
+            .titlebar-button:nth-child(3):hover {
+              background: #da3d3d;
+            }
+            .titlebar-button img {
+              filter: invert(100%);
+            }
+          `;
+          document.head.append(style);
+        }, 500);
+      "#.into()],
+    decorations: false,
+    ..Default::default()
+  };
+
+  let handler: WindowRpcHandler = Box::new(|proxy: WindowProxy, req: RpcRequest| {
+    if req.method == "minimize" {
+      proxy.minimize().unwrap();
+    }
+    if req.method == "maximize" {
+      if req.params.unwrap().as_array().unwrap()[0] == true {
+        proxy.maximize().unwrap();
+      } else {
+        proxy.unmaximize().unwrap();
+      }
+    }
+    if req.method == "close" {
+      proxy.close().unwrap();
+    }
+    None
+  });
+
+  let _window1 = app.add_window_with_configs(attributes, Some(handler), None, None)?;
+
+  app.run();
+  Ok(())
+}
diff --git a/src/application/general.rs b/src/application/general.rs
@@ -296,6 +296,9 @@ impl App for InnerApplication {
                 WindowMessage::EvaluationScript(script) => {
                   let _ = webview.dispatch_script(&script);
                 }
+                WindowMessage::BeginDrag { x: _, y: _ } => {
+                  window.drag_window().unwrap();
+                }
               }
             }
           }
@@ -383,17 +386,28 @@ fn _create_webview(
     webview = webview.register_protocol(protocol.name, protocol.handler)
   }
 
-  if let Some(rpc_handler) = rpc_handler {
-    webview = webview.set_rpc_handler(Box::new(move |requests| {
-      let proxy = WindowProxy::new(
-        ApplicationProxy {
-          inner: proxy.clone(),
-        },
-        window_id,
-      );
-      rpc_handler(proxy, requests)
-    }));
-  }
+  webview = webview.set_rpc_handler(Box::new(move |mut request| {
+    let proxy = WindowProxy::new(
+      ApplicationProxy {
+        inner: proxy.clone(),
+      },
+      window_id,
+    );
+
+    if &request.method == "__WRY_BEGIN_WINDOW_DRAG__" {
+      if let Some(params) = request.params.take() {
+        let x = params[0].as_f64()?;
+        let y = params[1].as_f64()?;
+        proxy.begin_drag(x, y).unwrap();
+      }
+    }
+
+    if let Some(rpc_handler) = &rpc_handler {
+      rpc_handler(proxy, request)
+    } else {
+      None
+    }
+  }));
 
   webview = webview.set_file_drop_handler(file_drop_handler);
 

diff --git a/src/application/gtkrs.rs b/src/application/gtkrs.rs
@@ -307,6 +307,9 @@ impl App for InnerApplication {
                 WindowMessage::EvaluationScript(script) => {
                   let _ = webview.dispatch_script(&script);
                 }
+                WindowMessage::BeginDrag { x, y } => {
+                  window.begin_move_drag(1, x as i32, y as i32, 0);
+                }
               }
             }
           }
@@ -432,17 +435,28 @@ fn _create_webview(
     webview = webview.register_protocol(protocol.name, protocol.handler);
   }
 
-  if let Some(rpc_handler) = rpc_handler {
-    webview = webview.set_rpc_handler(Box::new(move |requests| {
-      let proxy = WindowProxy::new(
-        ApplicationProxy {
-          inner: proxy.clone(),
-        },
-        window_id,
-      );
-      rpc_handler(proxy, requests)
-    }));
-  }
+  webview = webview.set_rpc_handler(Box::new(move |mut request| {
+    let proxy = WindowProxy::new(
+      ApplicationProxy {
+        inner: proxy.clone(),
+      },
+      window_id,
+    );
+
+    if &request.method == "__WRY_BEGIN_WINDOW_DRAG__" {
+      if let Some(params) = request.params.take() {
+        let x = params[0].as_f64()?;
+        let y = params[1].as_f64()?;
+        proxy.begin_drag(x, y).unwrap();
+      }
+    }
+
+    if let Some(rpc_handler) = &rpc_handler {
+      rpc_handler(proxy, request)
+    } else {
+      None
+    }
+  }));
 
   webview = webview.set_file_drop_handler(file_drop_handler);
 

diff --git a/src/application/mod.rs b/src/application/mod.rs
@@ -44,6 +44,7 @@ pub enum WindowMessage {
   SetFullscreen(bool),
   SetIcon(Icon),
   EvaluationScript(String),
+  BeginDrag { x: f64, y: f64 },
 }
 
 /// Describes a general message.
@@ -276,6 +277,12 @@ impl WindowProxy {
       WindowMessage::EvaluationScript(script.into()),
     ))
   }
+
+  pub fn begin_drag(&self, x: f64, y: f64) -> Result<()> {
+    self
+      .proxy
+      .send_message(Message::Window(self.id, WindowMessage::BeginDrag { x, y }))
+  }
 }
 
 /// Provides a way to create and manage WebView windows.

diff --git a/src/webview/mod.rs b/src/webview/mod.rs
@@ -99,7 +99,14 @@ impl WebViewBuilder {
     Ok(Self {
       tx,
       rx,
-      initialization_scripts: vec![],
+      initialization_scripts: vec![r#"
+        document.addEventListener('mousedown', (e) => {
+          if (e.target.classList.contains('drag-region') && e.buttons === 1) {
+            window.rpc.notify('__WRY_BEGIN_WINDOW_DRAG__', e.screenX, e.screenY);
+          }
+        })
+      "#
+      .into()],
       window,
       url: None,
       transparent: false,