[runtime] Improve —wails-draggable by starting a drag immediately but only for the first click in a series (#2302)

This removes the sometime lagging experience when
starting to drag on Windows. But it's still possible to use
double-click events for adding e.g. a WindowToggleMaximise.

v2/internal/frontend/desktop/linux/frontend.go

@@ -404,7 +404,9 @@ func (f *Frontend) processMessage(message string) {
 	}
 
 	if message == "runtime:ready" {
-		cmd := fmt.Sprintf("window.wails.setCSSDragProperties('%s', '%s');", f.frontendOptions.CSSDragProperty, f.frontendOptions.CSSDragValue)
+		cmd := fmt.Sprintf(
+			"window.wails.setCSSDragProperties('%s', '%s');\n"+
+				"window.wails.flags.deferDragToMouseMove = true;", f.frontendOptions.CSSDragProperty, f.frontendOptions.CSSDragValue)
 		f.ExecJS(cmd)
 
 		if f.frontendOptions.Frameless && f.frontendOptions.DisableResize == false {

v2/internal/frontend/desktop/windows/frontend.go

@@ -645,7 +645,6 @@ func (f *Frontend) Callback(message string) {
 }
 
 func (f *Frontend) startDrag() error {
-	f.mainWindow.dragging = true
 	if !w32.ReleaseCapture() {
 		return fmt.Errorf("unable to release mouse capture")
 	}

v2/internal/frontend/desktop/windows/window.go

@@ -35,7 +35,6 @@ type Window struct {
 
 	OnSuspend func()
 	OnResume  func()
-	dragging  bool
 
 	chromium *edge.Chromium
 }
@@ -187,13 +186,6 @@ func (w *Window) IsVisible() bool {
 func (w *Window) WndProc(msg uint32, wparam, lparam uintptr) uintptr {
 
 	switch msg {
-	case w32.WM_EXITSIZEMOVE:
-		if w.dragging {
-			w.dragging = false
-			w.Invoke(func() {
-				w.chromium.Eval("wails.flags.shouldDrag = false;")
-			})
-		}
 	case win32.WM_POWERBROADCAST:
 		switch wparam {
 		case win32.PBT_APMSUSPEND:

v2/internal/frontend/runtime/desktop/main.js

@@ -66,6 +66,7 @@ window.wails = {
         defaultCursor: null,
         borderThickness: 6,
         shouldDrag: false,
+        deferDragToMouseMove: false,
         cssDragProperty: "--wails-draggable",
         cssDragValue: "drag",
     }
@@ -84,16 +85,27 @@ if (ENV === 1) {
     delete window.wailsbindings;
 }
 
-window.addEventListener('mouseup', () => {
-    window.wails.flags.shouldDrag = false;
-});
-
 let dragTest = function (e) {
     var val = window.getComputedStyle(e.target).getPropertyValue(window.wails.flags.cssDragProperty);
     if (val) {
       val = val.trim();
     }
-    return val === window.wails.flags.cssDragValue;
+    
+    if (val !== window.wails.flags.cssDragValue) {
+        return false;
+    }
+
+    if (e.buttons !== 1) {
+        // Do not start dragging if not the primary button has been clicked.
+        return false;
+    }
+
+    if (e.detail !== 1) {
+        // Do not start dragging if more than once has been clicked, e.g. when double clicking
+        return false;
+    }
+
+    return true;
 };
 
 window.wails.setCSSDragProperties = function (property, value) {
@@ -117,9 +129,20 @@ window.addEventListener('mousedown', (e) => {
                 return;
             }
         }
-        window.wails.flags.shouldDrag = true;
+        if (window.wails.flags.deferDragToMouseMove) {
+           window.wails.flags.shouldDrag = true;
+        } else {
+            e.preventDefault()
+            window.WailsInvoke("drag");
+        }
+        return;
+    } else {
+        window.wails.flags.shouldDrag = false;
     }
+});
 
+window.addEventListener('mouseup', () => {
+    window.wails.flags.shouldDrag = false;
 });
 
 function setResize(cursor) {
@@ -128,14 +151,14 @@ function setResize(cursor) {
 }
 
 window.addEventListener('mousemove', function (e) {
-    let mousePressed = e.buttons !== undefined ? e.buttons : e.which;
-    if(window.wails.flags.shouldDrag && mousePressed <= 0) {
-        window.wails.flags.shouldDrag = false;
-    }
-    
     if (window.wails.flags.shouldDrag) {
-        window.WailsInvoke("drag");
-        return;
+        let mousePressed = e.buttons !== undefined ? e.buttons : e.which;
+        if(mousePressed <= 0) {
+            window.wails.flags.shouldDrag = false;
+        } else {
+            window.WailsInvoke("drag");
+            return;
+        }
     }
     if (!window.wails.flags.enableResize) {
         return;

website/src/pages/changelog.mdx

@@ -22,12 +22,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improved fullscreen mode for frameless window on Windows. Changed by @stffabi in [PR](https://github.com/wailsapp/wails/pull/2279), [PR](https://github.com/wailsapp/wails/pull/2288) and [PR](https://github.com/wailsapp/wails/pull/2299)
 - On Windows unmaximising a window has no effect anymore when the window is in fullscreen mode, this makes it consistent with e.g. macOS. Changed by @stffabi in [PR](https://github.com/wailsapp/wails/pull/2279)
 - Frameless resize now sets the cursor on documentElement, otherwise resizing cursor won't be shown outside of the body rectangle. Changed by @stffabi in [PR](https://github.com/wailsapp/wails/pull/2289)
+- Improved the `--wails-draggable` experience to be more reactive. Changed by @stffabi in [PR](https://github.com/wailsapp/wails/pull/2302)
 
 ### Fixed
 - Fixed failing build hooks when `build/bin` was missing. Fixed by @Lyimmi in [PR](https://github.com/wailsapp/wails/pull/2273) 
 - Fixed fullscreen mode for frameless window on Windows to fully cover the taskbar when changing into fullscreen from maximised state. Fixed by @stffabi in [PR](https://github.com/wailsapp/wails/pull/2279)
 - Fixed set window background colour on Windows when setting the colour via runtime. Fixed by @stffabi in [PR](https://github.com/wailsapp/wails/pull/2279)
 - Fixed the showing of a white border around a fullscreen window when `DisableWindowIcon` is active on Windows. Fixed by @stffabi in [PR](https://github.com/wailsapp/wails/pull/2299)
+- Fixed the sometimes lagging drag experience with `--wails-draggable` on Windows.  Fixed by @stffabi in [PR](https://github.com/wailsapp/wails/pull/2302)
 
 ## v2.3.0 - 2022-12-29