[windows] Add Frameless resize

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

@@ -168,11 +168,17 @@ func (f *Frontend) WindowFullscreen() {
 	runtime.LockOSThread()
 	f.mainWindow.SetMaxSize(0, 0)
 	f.mainWindow.SetMinSize(0, 0)
+	if f.frontendOptions.Frameless && f.frontendOptions.DisableResize == false {
+		f.ExecJS("window.wails.flags.enableResize = false;")
+	}
 	f.mainWindow.Fullscreen()
 }
 
 func (f *Frontend) WindowUnFullscreen() {
 	runtime.LockOSThread()
+	if f.frontendOptions.Frameless && f.frontendOptions.DisableResize == false {
+		f.ExecJS("window.wails.flags.enableResize = true;")
+	}
 	f.mainWindow.UnFullscreen()
 	f.mainWindow.SetMaxSize(f.maxWidth, f.maxHeight)
 	f.mainWindow.SetMinSize(f.minWidth, f.minHeight)
@@ -354,6 +360,17 @@ func (f *Frontend) processRequest(req *edge.ICoreWebView2WebResourceRequest, arg
 	return
 }
 
+var edgeMap = map[string]uintptr{
+	"n-resize":  w32.HTTOP,
+	"ne-resize": w32.HTTOPRIGHT,
+	"e-resize":  w32.HTRIGHT,
+	"se-resize": w32.HTBOTTOMRIGHT,
+	"s-resize":  w32.HTBOTTOM,
+	"sw-resize": w32.HTBOTTOMLEFT,
+	"w-resize":  w32.HTLEFT,
+	"nw-resize": w32.HTTOPLEFT,
+}
+
 func (f *Frontend) processMessage(message string) {
 	if message == "drag" {
 		if !f.mainWindow.IsFullScreen() {
@@ -364,6 +381,21 @@ func (f *Frontend) processMessage(message string) {
 		}
 		return
 	}
+	if strings.HasPrefix(message, "resize:") {
+		if !f.mainWindow.IsFullScreen() {
+			sl := strings.Split(message, ":")
+			if len(sl) != 2 {
+				f.logger.Info("Unknown message returned from dispatcher: %+v", message)
+				return
+			}
+			edge := edgeMap[sl[1]]
+			err := f.startResize(edge)
+			if err != nil {
+				f.logger.Error(err.Error())
+			}
+		}
+		return
+	}
 	result, err := f.dispatcher.ProcessMessage(message, f)
 	if err != nil {
 		f.logger.Error(err.Error())
@@ -397,6 +429,14 @@ func (f *Frontend) startDrag() error {
 	return nil
 }
 
+func (f *Frontend) startResize(border uintptr) error {
+	if !w32.ReleaseCapture() {
+		return fmt.Errorf("unable to release mouse capture")
+	}
+	w32.SendMessage(f.mainWindow.Handle(), w32.WM_NCLBUTTONDOWN, border, 0)
+	return nil
+}
+
 func (f *Frontend) ExecJS(js string) {
 	f.mainWindow.Dispatch(func() {
 		f.chromium.Eval(js)
@@ -408,6 +448,10 @@ func (f *Frontend) navigationCompleted(sender *edge.ICoreWebView2, args *edge.IC
 		go f.frontendOptions.OnDomReady(f.ctx)
 	}
 
+	if f.frontendOptions.Frameless && f.frontendOptions.DisableResize == false {
+		f.ExecJS("window.wails.flags.enableResize = true;")
+	}
+
 	// Hack to make it visible: https://github.com/MicrosoftEdge/WebView2Feedback/issues/1077#issuecomment-825375026
 	err := f.chromium.Hide()
 	if err != nil {

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

@@ -43,6 +43,8 @@ window.wails = {
     flags: {
         disableScrollbarDrag: false,
         disableWailsDefaultContextMenu: false,
+        enableResize: false,
+        defaultCursor: null
     }
 };
 
@@ -60,6 +62,15 @@ if (ENV === 0) {
 // Setup drag handler
 // Based on code from: https://github.com/patr0nus/DeskGap
 window.addEventListener('mousedown', (e) => {
+
+    // Check for resizing
+    if (window.wails.flags.resizeEdge) {
+        window.WailsInvoke("resize:" + window.wails.flags.resizeEdge);
+        e.preventDefault();
+        return;
+    }
+
+    // Check for dragging
     let currentElement = e.target;
     while (currentElement != null) {
         if (currentElement.hasAttribute('data-wails-no-drag')) {
@@ -79,6 +90,40 @@ window.addEventListener('mousedown', (e) => {
     }
 });
 
+function setResize(cursor) {
+    document.body.style.cursor = cursor || window.wails.flags.defaultCursor;
+    window.wails.flags.resizeEdge = cursor;
+}
+
+window.addEventListener('mousemove', function (e) {
+    if (!window.wails.flags.enableResize) {
+        return;
+    }
+    if (window.wails.flags.defaultCursor == null) {
+        window.wails.flags.defaultCursor = document.body.style.cursor;
+    }
+    if (window.outerWidth - e.clientX < 16 && window.outerHeight - e.clientY < 16) {
+        document.body.style.cursor = "se-resize";
+    }
+    let rightBorder = window.outerWidth - e.clientX < 16;
+    let leftBorder = e.clientX < 16;
+    let topBorder = e.clientY < 16;
+    let bottomBorder = window.outerHeight - e.clientY < 16;
+
+    // If we aren't on an edge, but were, reset the cursor to default
+    if (!leftBorder && !rightBorder && !topBorder && !bottomBorder && window.wails.flags.resizeEdge !== undefined) {
+        setResize();
+    } else if (rightBorder && bottomBorder) setResize("se-resize");
+    else if (leftBorder && bottomBorder) setResize("sw-resize");
+    else if (leftBorder && topBorder) setResize("nw-resize");
+    else if (topBorder && rightBorder) setResize("ne-resize");
+    else if (leftBorder) setResize("w-resize");
+    else if (topBorder) setResize("n-resize");
+    else if (bottomBorder) setResize("s-resize");
+    else if (rightBorder) setResize("e-resize");
+
+});
+
 // Setup context menu hook
 window.addEventListener('contextmenu', function (e) {
     if (window.wails.flags.disableWailsDefaultContextMenu) {