Experimental support for CSS Drag detection (#1750)

* Support CSS Drag

* Support CSS Drag as experimental option

v2/internal/frontend/desktop/darwin/frontend.go

@@ -273,6 +273,15 @@ func (f *Frontend) processMessage(message string) {
 		return
 	}
 
+	if message == "runtime:ready" {
+		if f.frontendOptions.Experimental != nil {
+			if f.frontendOptions.Experimental.UseCSSDrag {
+				f.ExecJS(`window.wails.useCSSDrag();`)
+			}
+		}
+		return
+	}
+
 	//if strings.HasPrefix(message, "systemevent:") {
 	//	f.processSystemEvent(message)
 	//	return

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

@@ -273,6 +273,15 @@ func (f *Frontend) processMessage(message string) {
 		return
 	}
 
+	if message == "runtime:ready" {
+		if f.frontendOptions.Experimental != nil {
+			if f.frontendOptions.Experimental.UseCSSDrag {
+				f.ExecJS(`window.wails.useCSSDrag();`)
+			}
+		}
+		return
+	}
+
 	go func() {
 		result, err := f.dispatcher.ProcessMessage(message, f)
 		if err != nil {

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

@@ -529,6 +529,16 @@ func (f *Frontend) processMessage(message string) {
 		}
 		return
 	}
+
+	if message == "runtime:ready" {
+		if f.frontendOptions.Experimental != nil {
+			if f.frontendOptions.Experimental.UseCSSDrag {
+				f.ExecJS(`window.wails.useCSSDrag();`)
+			}
+		}
+		return
+	}
+
 	if strings.HasPrefix(message, "resize:") {
 		if !f.mainWindow.IsFullScreen() {
 			sl := strings.Split(message, ":")

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

@@ -82,8 +82,39 @@ window.addEventListener('mouseup', () => {
     window.wails.flags.shouldDrag = false;
 });
 
-// Setup drag handler
+let cssDragTest = function (e) {
+    return window.getComputedStyle(e.target).getPropertyValue('--wails-draggable') === "drag";
+};
+
+// Element drag handler
 // Based on code from: https://github.com/patr0nus/DeskGap
+let elementDragTest = function (e) {
+    // Check for dragging
+    let currentElement = e.target;
+    while (currentElement != null) {
+        if (currentElement.hasAttribute('data-wails-no-drag')) {
+            break;
+        } else if (currentElement.hasAttribute('data-wails-drag')) {
+            return true;
+        }
+        currentElement = currentElement.parentElement;
+    }
+    return false;
+};
+
+let dragTest = elementDragTest;
+
+window.wails.useCSSDrag = function (t) {
+    if (t === false) {
+        console.log("Using original drag detection");
+        dragTest = elementDragTest;
+    } else {
+        console.log("Using CSS drag detection");
+        dragTest = cssDragTest;
+    }
+};
+
+
 window.addEventListener('mousedown', (e) => {
 
     // Check for resizing
@@ -93,24 +124,16 @@ window.addEventListener('mousedown', (e) => {
         return;
     }
 
-    // Check for dragging
-    let currentElement = e.target;
-    while (currentElement != null) {
-        if (currentElement.hasAttribute('data-wails-no-drag')) {
-            break;
-        } else if (currentElement.hasAttribute('data-wails-drag')) {
-            if (window.wails.flags.disableScrollbarDrag) {
-                // This checks for clicks on the scroll bar
-                if (e.offsetX > e.target.clientWidth || e.offsetY > e.target.clientHeight) {
-                    break;
-                }
+    if (dragTest(e)) {
+        if (window.wails.flags.disableScrollbarDrag) {
+            // This checks for clicks on the scroll bar
+            if (e.offsetX > e.target.clientWidth || e.offsetY > e.target.clientHeight) {
+                return;
             }
-
-            window.wails.flags.shouldDrag = true;
-            break;
         }
-        currentElement = currentElement.parentElement;
+        window.wails.flags.shouldDrag = true;
     }
+
 });
 
 function setResize(cursor) {
@@ -156,4 +179,6 @@ window.addEventListener('contextmenu', function (e) {
     if (window.wails.flags.disableWailsDefaultContextMenu) {
         e.preventDefault();
     }
-});
+});
+
+window.WailsInvoke("runtime:ready");

v2/internal/frontend/runtime/package.json

@@ -14,8 +14,8 @@
   "author": "Lea Anthony <lea.anthony@gmail.com>",
   "license": "ISC",
   "devDependencies": {
-    "esbuild": "^0.12.17",
+    "esbuild": "^0.15.3",
     "npm-run-all": "^4.1.5",
     "svelte": "^3.49.0"
   }
-}
+}

v2/pkg/options/options.go

@@ -26,6 +26,13 @@ const (
 	Fullscreen WindowStartState = 3
 )
 
+type Experimental struct {
+	// UseCSSDrag uses the `--wails-draggable` CSS variable to indicate drag regions
+	// Add `style="--wails-draggable:drag"` to your draggable elements
+	// `style="--wails-draggable:no-drag"` will disable dragging for that element + children
+	UseCSSDrag bool
+}
+
 // App contains options for creating the App
 type App struct {
 	Title             string
@@ -64,6 +71,9 @@ type App struct {
 	Windows *windows.Options
 	Mac     *mac.Options
 	Linux   *linux.Options
+
+	// Experimental options
+	Experimental *Experimental
 }
 
 type RGBA struct {