search

tauri-apps / tauri

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

[bug] Unable to reposition the window in Windows 11 when window decorations are set to false (Repositioning is affected, not RESIZING) #11345

Closed ninetynin closed 1 week ago

ninetynin commented 1 week ago

Describe the bug

I found issue1 issue2 but both are fixes for resizing the window when using custom titlebar by setting the decorations to false but I'm unable to move reposition the window to some other (x,y) position with same size in windows11

https://github.com/user-attachments/assets/1fbdb65f-c330-4a97-a472-5ccd7c10e201

As you can see in the video I'm not able to move the window to some other location

Reproduction

set "decorations": false in tauri.conf.json and select vanilla js while creating the app and these are frontend codes

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div data-tauri-drag-region class="titlebar" id="titlebar">
        <div>
            <div class="titlebar-button" id="titlebar-minimize">
                <img src="https://api.iconify.design/mdi:window-minimize.svg" alt="minimize" />
            </div>
            <div class="titlebar-button" id="titlebar-maximize">
                <img src="https://api.iconify.design/mdi:window-maximize.svg" alt="maximize" />
            </div>
            <div class="titlebar-button" id="titlebar-close">
                <img src="https://api.iconify.design/mdi:close.svg" alt="close" />
            </div>
        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

styles.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
  padding: 5px; 
}

.titlebar {
  height: 30px;
  background: #ffffff;
  user-select: none;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  transition: opacity 0.3s;
}

.titlebar-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.titlebar-button:hover {
  background: #c35b8f;
}

main.js

const { appWindow } = window.__TAURI__.window;
const { invoke } = window.__TAURI__;

document
    .getElementById('titlebar-minimize')
    .addEventListener('click', () => appWindow.minimize());
document
    .getElementById('titlebar-maximize')
    .addEventListener('click', () => appWindow.toggleMaximize());
document
    .getElementById('titlebar-close')
    .addEventListener('click', () => appWindow.close());

Expected behavior

No response

Full tauri info output

PS S:\testingprojects\rust\browesertestver6> npm run tauri info

> browesertestver6@0.1.0 tauri
> tauri info

[✔] Environment
    - OS: Windows 10.0.26100 x86_64 (X64)
    ✔ WebView2: 129.0.2792.89
    ✔ MSVC: Visual Studio Community 2022
    ✔ rustc: 1.83.0-nightly (6b9676b45 2024-10-12)
    ✔ cargo: 1.83.0-nightly (15fbd2f60 2024-10-08)
    ✔ rustup: 1.27.1 (54dd3d00f 2024-04-24)
    ✔ Rust toolchain: nightly-x86_64-pc-windows-msvc (default)
    - node: 20.16.0
    - npm: 10.8.3

[-] Packages
    - tauri 🦀: 2.0.3
    - tauri-build 🦀: 2.0.1
    - wry 🦀: 0.46.0
    - tao 🦀: 0.30.3
    - tauri-cli 🦀: 1.6.2
    - @tauri-apps/api : not installed!
    - @tauri-apps/cli : 2.0.3

[-] Plugins
    - tauri-plugin-shell 🦀: 2.0.1
    - @tauri-apps/plugin-shell : not installed!

[-] App
    - build-type: bundle
    - CSP: unset
    - frontendDist: ../src

Stack trace

No response

Additional context

No response

FabianLars commented 1 week ago

data-tauri-drag-region must be applied to the inner-most element, so in your case probably this

<body>
    <div class="titlebar" id="titlebar">
        <div data-tauri-drag-region>
            <div class="titlebar-button" id="titlebar-minimize">
                <img src="https://api.iconify.design/mdi:window-minimize.svg" alt="minimize" />
            </div>
            <div class="titlebar-button" id="titlebar-maximize">
                <img src="https://api.iconify.design/mdi:window-maximize.svg" alt="maximize" />
            </div>
            <div class="titlebar-button" id="titlebar-close">
                <img src="https://api.iconify.design/mdi:close.svg" alt="close" />
            </div>
        </div>
    </div>
    <script src="main.js"></script>
</body>

instead of

<body>
    <div data-tauri-drag-region class="titlebar" id="titlebar">
        <div>
            <div class="titlebar-button" id="titlebar-minimize">
                <img src="https://api.iconify.design/mdi:window-minimize.svg" alt="minimize" />
            </div>
            <div class="titlebar-button" id="titlebar-maximize">
                <img src="https://api.iconify.design/mdi:window-maximize.svg" alt="maximize" />
            </div>
            <div class="titlebar-button" id="titlebar-close">
                <img src="https://api.iconify.design/mdi:close.svg" alt="close" />
            </div>
        </div>
    </div>
    <script src="main.js"></script>
</body>

(assuming the double div wasn't an accident and actually used for something)

If you have similar issues in the future / other apps, you can get the actual click target via document.addEventListener("click", console.log);

ninetynin commented 1 week ago

data-tauri-drag-region must be applied to the inner-most element, so in your case probably this

<body>
    <div class="titlebar" id="titlebar">
        <div data-tauri-drag-region>
            <div class="titlebar-button" id="titlebar-minimize">
                <img src="https://api.iconify.design/mdi:window-minimize.svg" alt="minimize" />
            </div>
            <div class="titlebar-button" id="titlebar-maximize">
                <img src="https://api.iconify.design/mdi:window-maximize.svg" alt="maximize" />
            </div>
            <div class="titlebar-button" id="titlebar-close">
                <img src="https://api.iconify.design/mdi:close.svg" alt="close" />
            </div>
        </div>
    </div>
    <script src="main.js"></script>
</body>

instead of

<body>
    <div data-tauri-drag-region class="titlebar" id="titlebar">
        <div>
            <div class="titlebar-button" id="titlebar-minimize">
                <img src="https://api.iconify.design/mdi:window-minimize.svg" alt="minimize" />
            </div>
            <div class="titlebar-button" id="titlebar-maximize">
                <img src="https://api.iconify.design/mdi:window-maximize.svg" alt="maximize" />
            </div>
            <div class="titlebar-button" id="titlebar-close">
                <img src="https://api.iconify.design/mdi:close.svg" alt="close" />
            </div>
        </div>
    </div>
    <script src="main.js"></script>
</body>

(assuming the double div wasn't an accident and actually used for something)

If you have similar issues in the future / other apps, you can get the actual click target via document.addEventListener("click", console.log);

@FabianLars I tried removing the double div and tested it but nope still cant reposition and If you have similar issues in the future / other apps, you can get the actual click target via document.addEventListener("click", console.log); and i didnt understand about this part like is this related to repositining somehow

Can you please tell why would you close the issue as not planned tho I'm sure this issue isnt gonna be just to myself as a lot of apps in windows eg. opera gx, vscode, spotify and a lot of other ones so if they are migrating from other framewroks to tauri they definitely need that and not being able to reposition it is a major issue as i dont think everyone is gonna use their window set to fullscreen all the time thanks

FabianLars commented 1 week ago

I tried removing the double div and tested it but nope still cant reposition and If you have similar issues in the future / other apps, you can get the actual click target via document.addEventListener("click", console.log); and i didnt understand about this part like is this related to repositining somehow

You can use this to figure out which element you need to add the attribute to. If you paste that code into the devtools console and then click on your titlebar element it will print the actually clicked element which is useful if you have many nested elements for example.

Can you please tell why would you close the issue as not planned tho I'm sure this issue isnt gonna be just to myself as a lot of apps in windows eg. opera gx, vscode, spotify and a lot of other ones so if they are migrating from other framewroks to tauri they definitely need that and not being able to reposition it is a major issue as i dont think everyone is gonna use their window set to fullscreen all the time thanks

It was closed as not planned because there's no general bug. This is 99% a config/usage error in your app and i'd rather have to re-open the issue later if it proves that there's actually a bug than forgetting to close the issue later (for example if you hadn't reacted anymore i would not get a new notification for this issue and therefore would not remember to close it). I know this comes of as a bit hostile but with the amount of open issues this is currently required to stay on top of things (we're a very small team).

yancy-hong commented 3 days ago

@FabianLars I've encountered a similar issue. Here is part of the App.vue code :

<script setup lang="ts">
document.addEventListener("click", console.log)
</script>

<!--This code has been greatly simplified and is only an example.-->
<template>
  <div>
    <div class="title-bar">
      <div class="inner" data-tauri-drag-region style="width: 100%;height: 100%;background-color: aqua">
      </div>
    </div>
  </div>
</template>

The div that is printed by document.addEventListener("click", console.log) is the one currently possessing the data-tauri-drag-region attribute. When attempting to drag the window, an error occurs as shown in the following image:

image

So I tried to add permissions in the file src-tauri/capabilities/default.json,like this :

{
  "$schema": "../gen/schemas/desktop-schema.json",
  "identifier": "default",
  "description": "Capability for the main window",
  "windows": ["main"],
  "permissions": [
    "core:default",
    "window:default",
    "core:window:allow-start-dragging",
    "window:allow-start-dragging",
    "shell:allow-open"
  ],
  "capabilities": [

  ]
}

src-tauri/tauri.conf.json :

{
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "test-client",
  "version": "0.1.0",
  "identifier": "com.test",
  "build": {
    "beforeDevCommand": "npm run dev",
    "devUrl": "http://localhost:1420",
    "beforeBuildCommand": "npm run build",
    "frontendDist": "../dist"
  },
  "app": {
    "windows": [
      {
        "label": "main",
        "width": 250,
        "maxWidth": 250,
        "height": 300,
        "maxHeight": 300,
        "resizable": false,
        "maximizable": false,
        "maximized": false,
        "center": true,
        "focus": true,
        "alwaysOnTop": true,
        "decorations": false,
        "dragDropEnabled": true
      }
    ],
    "security": {
      "csp": null
    }
  },
  "bundle": {
    "active": true,
    "targets": "all",
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
}

But it still reports an error : 

Uncaught (in promise) window.start_dragging not allowed. 
Permissions associated with this command: window:allow-start-dragging.

npm run tauri info :


> test-client@0.1.0 tauri
> tauri info

[✔] Environment
    - OS: Windows 10.0.22631 x86_64 (X64)
    ✔ WebView2: 129.0.2792.89
    ✔ MSVC: Visual Studio Community 2022
    ✔ rustc: 1.82.0 (f6e511eec 2024-10-15)
    ✔ cargo: 1.82.0 (8f40fc59f 2024-08-21)
    ✔ rustup: 1.27.1 (54dd3d00f 2024-04-24)
    ✔ Rust toolchain: stable-x86_64-pc-windows-msvc (default)
    - node: 20.18.0
    - npm: 10.8.2

[-] Packages
    - tauri 🦀: 2.0.4
    - tauri-build 🦀: 2.0.1
    - wry 🦀: 0.46.2
    - tao 🦀: 0.30.3
    - tauri-cli 🦀: 2.0.3
    - @tauri-apps/api : 2.0.2
    - @tauri-apps/cli : 2.0.3

[-] Plugins
    - tauri-plugin-shell 🦀: 2.0.1
    - @tauri-apps/plugin-shell : 2.0.0

[-] App
    - build-type: bundle
    - CSP: unset
    - frontendDist: ../dist
    - devUrl: http://localhost:1420/
    - framework: Vue.js
    - bundler: Vite