fix(core): allow canceling data-tauri-drag-region maximization on macOS, closes #8306 (#8312)

* fix(core): allow canceling `data-tauri-drag-region` maximization on macOS, closes #8306

* Update .changes/tauri-data-drag-region-macos-maximize.md

* fix typo

* cancel if mouse moves

* Update tauri-data-drag-region-macos-maximize.md

[skip ci]

* Update core/tauri/scripts/core.js [skip ci]

---------

Co-authored-by: Lucas Fernandes Nogueira <lucas@tauri.app>

Author: amrbashir

.changes/tauri-data-drag-region-macos-maximize.md

@@ -0,0 +1,5 @@
+---
+'tauri': 'patch:bug'
+---
+
+On macOS, allow cancelling maximization when doubleclick happens on `data-tauri-drag-region` by simply keeping the left moust button pressed and then moving the mouse away of the starting position of the click, which is consistent with the native behavior of macOS. 

core/tauri/scripts/core.js

@@ -142,16 +142,40 @@
     )
   }
 
-  // drag region
+  //-----------------------//
+  // data-tauri-drag-region
+  //
+  // drag on mousedown and maximize on double click on Windows and Linux
+  // while macOS macos maximization should be on mouseup and if the mouse
+  // moves after the double click, it should be cancelled (see https://github.com/tauri-apps/tauri/issues/8306)
+  //-----------------------//
+  const TAURI_DRAG_REGION_ATTR = 'data-tauri-drag-region';
+  let x = 0, y = 0;
   document.addEventListener('mousedown', (e) => {
-    if (e.target.hasAttribute('data-tauri-drag-region') && e.button === 0) {
+    if (
+      // element has the magic data attribute
+      e.target.hasAttribute(TAURI_DRAG_REGION_ATTR) &&
+      // and was left mouse button
+      e.button === 0 &&
+      // and was normal click to drag or double click to maximize
+      (e.detail === 1 || e.detail === 2)
+      ) {
+
+      // macOS maximization happens on `mouseup`,
+      // so we save needed state and early return
+      if (osName === 'macos' && e.detail == 2) {
+        x = e.clientX
+        y = e.clientY
+        return
+      }
+
       // prevents text cursor
       e.preventDefault()
+
       // fix #2549: double click on drag region edge causes content to maximize without window sizing change
       // https://github.com/tauri-apps/tauri/issues/2549#issuecomment-1250036908
       e.stopImmediatePropagation()
 
-      // start dragging if the element has a `tauri-drag-region` data attribute and maximize on double-clicking it
       window.__TAURI_INVOKE__('tauri', {
         __tauriModule: 'Window',
         message: {
@@ -165,6 +189,34 @@
       })
     }
   })
+  // on macOS we maximze on mouseup instead, to match the system behavior where maximization can be canceled
+  // if the mouse moves outside the data-tauri-drag-region
+  if (osName === "macos") {
+    document.addEventListener('mouseup', (e) => {
+      if (
+        // element has the magic data attribute
+        e.target.hasAttribute(TAURI_DRAG_REGION_ATTR) &&
+        // and was left mouse button
+        e.button === 0 &&
+        // and was double click
+        e.detail === 2 &&
+        // and the cursor hasn't moved from initial mousedown
+        e.clientX === x && e.clientY === y
+      ) {
+        window.__TAURI_INVOKE__('tauri', {
+          __tauriModule: 'Window',
+          message: {
+            cmd: 'manage',
+            data: {
+              cmd: {
+                type: '__toggleMaximize'
+              }
+            }
+          }
+        })
+      }
+    })
+  }
 
   let permissionSettable = false
   let permissionValue = 'default'