tauri-apps / tauri

Build smaller, faster, and more secure desktop and mobile applications with a web frontend.
https://tauri.app
Apache License 2.0
84.1k stars 2.53k forks source link

Add data-tauri-drag-resize-region to resize current window #7900

Open kurdin opened 1 year ago

kurdin commented 1 year ago

Is your feature request related to a problem? Please describe. When creating a frameless window, it's challenging to find a spot in the window corners to resize it, especially on higher DPI displays. A potential solution would be to add support for custom resize elements inside a webview that can handle window resizing.

Describe the solution you'd like Similar to the data-tauri-drag-region, we could introduce a custom DOM attribute that can be added to webview elements, allowing them to respond to window drag (move) events. This would be the data-tauri-drag-resize-region attribute, which we could use to drag and resize a window, sending resize events/commands to Rust.

Would you want to assign yourself to implement this feature?

amrbashir commented 1 year ago

Are you using WRY directly or tauri? What OS are you on?

kurdin commented 1 year ago

@amrbashir, Thank you for your reply!

I am using Tauri, and the problem I see on the Windows 10/11. I saw another issue, saying the same thing, that is still hard to resize frameless window.

I create a window in rust using this code

    let mut window_builder = tauri::WindowBuilder::new(
        app,
        "main",
        tauri::WindowUrl::App("index.html".into()),
      )
      .min_inner_size(600.0, 500.0)
      .disable_file_drop_handler()
      .visible(false);

      #[cfg(target_os = "macos")]
      {
        window_builder = window_builder
          .title_bar_style(tauri::TitleBarStyle::Overlay)
          .hidden_title(true);
      }

      #[cfg(target_os = "windows")]
      {
        window_builder = window_builder.decorations(false).transparent(true);
      }

      let window = window_builder.build()?;

https://github.com/tauri-apps/wry/assets/6027060/d2b23193-e90f-4777-be52-e0bab942b690

It seems to be hard to find correct region to resize a frameless window, so my idea is to add this functionality inside a webview to make it easy to resize a window by adding 4 invisible absolute positioned div blocks in each corner of the webview with data-tauri-drag-resize-region attribute

kurdin commented 8 months ago

@amrbashir is there a way to track this issue / feature request ?

amrbashir commented 8 months ago

There isn't any work being done on this atm and there is a good chance it might not be added in tauri's core because the needed APIs doesn't exist on macOS AFAIK.

However you can still do this in your own code, you can listen to mousedown on said elements and start resize drag as you see fit using this API https://docs.rs/tauri/2.0.0-beta.4/tauri/window/struct.Window.html#method.start_resize_dragging or the JS equivalent (available in v2 only)

kurdin commented 8 months ago

There isn't any work being done on this atm and there is a good chance it might not be added in tauri's core because the needed APIs doesn't exist on macOS AFAIK.

However you can still do this in your own code, you can listen to mousedown on said elements and start resize drag as you see fit using this API https://docs.rs/tauri/2.0.0-beta.4/tauri/window/struct.Window.html#method.start_resize_dragging or the JS equivalent (available in v2 only)

Thanks for your quick reply, I don't use v2 yet, since I don't need mobile and its not ready/stable, seems like start_resize_dragging not available in v1. Is it correct? Do you have any plans to support v1 with new/core features from v2? Feels like you abandon v1 and adding only new features to v2 (beta) ?

amrbashir commented 8 months ago

Feels like you abandon v1 and adding only new features to v2 (beta) ?

it may seem that way but v1 is still supported, however new features usually requires a new version of tao and wry which we can't update for v1, as it contains several breaking change and a different MSRV. We can do some backporting but with how small the team is, we focus on backporting fixes instead.

kurdin commented 8 months ago

Yeah, I understand it, thank you for all your work! I am enjoy to creating my app with Tauri. Rust is hard to swallow for js/web developer but I getting to like it more and more.

chipnertkj commented 4 days ago

Disabling window decorations with tao::window::Window::set_decorations seems to cause this issue. I presume based on tao::window::WindowBuilder::with_decorations's description ("Sets whether the window should have a border, a title bar, etc. (...)") that disabling the window border causes issues with drag-resizing, at least on Windows. Curiously this doesn't appear to be a problem when using "decorations": false in tauri.conf.json - the window can be resized as expected. What is the reason for this discrepancy? This issue also appears when disabling decorations in dioxus-desktop, which makes sense as it directly exposes tao as part of its API.

First step to seeing how this should be addressed is analyzing the current implementation for removing the decorations and seeing if perhaps some changes are in order. Win32 docs recommend using SetWindowLongPtrA for adjusting window behavior. Window styles differentiate between toggling the border (WS_BORDER) and title bar (WS_CAPTION).

~~It's important to address this issue as it prevents any app that directly uses tao on Windows from building apps that implement custom title bars, at least without having to enable the border back manually using Win32. Since this is a tao-specific problem, I'll open an issue regarding this in the appropriate repository.~~

Somehow, I mistakenly arrived at the conclusion that this is an ongoing problem and opened https://github.com/tauri-apps/tao/issues/994, where the misunderstanding was cleared up and I was provided with useful context. This issue should be closed now since tauri@v2 already implements a different solution to this problem.