[v3 mac] Fix window drag example

2026-08-05 13:53:43 -07:00 · 2023-06-18 12:12:01 +10:00
parent 86f2ac0e96
commit 9b48cc1799
10 changed files with 32 additions and 18 deletions
@@ -187,7 +187,6 @@ An 'X' indicates that the option is not supported by the platform.
 | CSS                             | Y       |       |     |                                            |
 | X                               | Y       |       |     |                                            |
 | Y                               | Y       |       |     |                                            |
-| HideOnClose                     | Y       |       |     |                                            |
 | FullscreenButtonEnabled         | Y       |       |     |                                            |
 | Hidden                          | Y       |       |     |                                            |
 | EnableFraudulentWebsiteWarnings |         |       |     |                                            |
@@ -233,4 +233,23 @@ func(hwnd uintptr, msg uint32, wParam, lParam uintptr) (returnValue uintptr, sho

 The `shouldReturn` value should be set to `true` if the returnValue should be returned by the main wndProc method. 
 If it is set to `false`, the return value will be ignored and the message will continue to be processed by the main 
-wndProc method.
+wndProc method.
+
+## Hide Window on Close + OnBeforeClose
+
+In v2, there was the `HideWindowOnClose` flag to hide the window when it closed. There was a logical overlap between
+this flag and the `OnBeforeClose` callback. In v3, the `HideWindowOnClose` flag has been removed and the `OnBeforeClose`
+callback has been renamed to `ShouldClose`. The `ShouldClose` callback is called when the user attempts to close a
+window. If the callback returns `true`, the window will close. If it returns `false`, the window will not close.
+This can be used to hide the window instead of closing it.
+
+## Window Drag
+
+In v2, the `--wails-drag` attribute was used to indicate that an element could be used to drag the window. 
+In v3, this has been replaced with `--webkit-app-region` to be more in line with the way other frameworks
+handle this. The `--webkit-app-region` attribute can be set to any of the following values:
+- `drag` - The element can be used to drag the window
+- `no-drag` - The element cannot be used to drag the window
+
+We would have ideally liked to use `app-region`, however this is not supported by the `getComputedStyle` call on 
+webkit on macOS. 
@@ -23,10 +23,10 @@
 </head>
 <body>
 <div class="container">
-    <div class="quarter" style="background-color: lightblue; app-region: drag">Draggable</div>
+    <div class="quarter" style="background-color: lightblue; --webkit-app-region: drag">Draggable</div>
    <div class="quarter" style="background-color: lightgreen;">Not Draggable</div>
    <div class="quarter" style="background-color: lightpink;">Not Draggable</div>
-    <div class="quarter" style="background-color: lightyellow; app-region: drag">Draggable</div>
+    <div class="quarter" style="background-color: lightyellow; --webkit-app-region: drag">Draggable</div>
 </div>
 </body>
 </html>
@@ -16,11 +16,7 @@ import {GetFlag} from "./flags";
 let shouldDrag = false;

 export function dragTest(e) {
-    // if (window.wails.Capabilities['HasNativeDrag'] === true) {
-    //     return false;
-    // }
-
-    let val = window.getComputedStyle(e.target).getPropertyValue("app-region");
+    let val = window.getComputedStyle(e.target).getPropertyValue("--webkit-app-region");
    if (val) {
        val = val.trim();
    }