Fix(api): Window size and position returning wrong class (fix: #2599) (#2621)

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

Author: sirgallifrey

.changes/api-window-type-for-size-and-position.md

@@ -0,0 +1,6 @@
+---
+"api": patch
+---
+
+`WindowManager` methods `innerPosition` `outerPosition` now correctly return instance of `PhysicalPosition`.
+`WindowManager` methods `innerSize` `outerSize` now correctly return instance of `PhysicalSize`.

core/tauri/scripts/bundle.js

@@ -1,5 +1,5 @@
 <script>
-  import { appWindow, WebviewWindow, LogicalSize, LogicalPosition, UserAttentionType, getCurrent } from "@tauri-apps/api/window";
+  import { appWindow, WebviewWindow, LogicalSize, LogicalPosition, UserAttentionType, getCurrent, PhysicalSize, PhysicalPosition } from "@tauri-apps/api/window";
   import { open as openDialog } from "@tauri-apps/api/dialog";
   import { open } from "@tauri-apps/api/shell";
 
@@ -26,6 +26,13 @@
   let maxHeight = null;
   let x = 100;
   let y = 100;
+  let scaleFactor = 1;
+  let innerPosition = new PhysicalPosition(x, y);
+  let outerPosition = new PhysicalPosition(x, y);
+  let innerSize = new PhysicalSize(width, height);
+  let outerSize = new PhysicalSize(width, height);
+  let resizeEventUnlisten;
+  let moveEventUnlisten;
 
   let windowTitle = "Awesome Tauri Example!";
 
@@ -62,6 +69,39 @@
     })
   }
 
+  function handleWindowResize() {
+    windowMap[selectedWindow].innerSize().then(response => {
+      innerSize = response
+      width = innerSize.width
+      height = innerSize.height
+    });
+    windowMap[selectedWindow].outerSize().then(response => {
+      outerSize = response
+    });
+  }
+
+  function handleWindowMove() {
+    windowMap[selectedWindow].innerPosition().then(response => {
+      innerPosition = response
+    });
+    windowMap[selectedWindow].outerPosition().then(response => {
+      outerPosition = response
+      x = outerPosition.x
+      y = outerPosition.y
+    });
+  }
+
+  function addWindowEventListeners(window) {
+    if (resizeEventUnlisten) {
+      resizeEventUnlisten();
+    }
+    if(moveEventUnlisten) {
+      moveEventUnlisten();
+    }
+    moveEventUnlisten = window.listen('tauri://move', handleWindowMove);
+    resizeEventUnlisten = window.listen('tauri://resize', handleWindowResize);
+  }
+
   async function requestUserAttention_() {
     await windowMap[selectedWindow].minimize();
     await windowMap[selectedWindow].requestUserAttention(UserAttentionType.Critical);
@@ -79,6 +119,8 @@
   $: minWidth && minHeight ? windowMap[selectedWindow].setMinSize(new LogicalSize(minWidth, minHeight)) : windowMap[selectedWindow].setMinSize(null);
   $: maxWidth && maxHeight ? windowMap[selectedWindow].setMaxSize(new LogicalSize(maxWidth, maxHeight)) : windowMap[selectedWindow].setMaxSize(null);
   $: windowMap[selectedWindow].setPosition(new LogicalPosition(x, y));
+  $: windowMap[selectedWindow].scaleFactor().then(factor => scaleFactor = factor);
+  $: addWindowEventListeners(windowMap[selectedWindow]);
 </script>
 
 <div class="flex col">
@@ -171,6 +213,56 @@
     </div>
   </div>
 </div>
+<div>
+  <div class="flex">
+    <div class="grow window-property">
+      <div>Inner Size</div>
+      <span>Width: {innerSize.width}</span>
+      <span>Height: {innerSize.height}</span>
+    </div>
+    <div class="grow window-property">
+      <div>Outer Size</div>
+      <span>Width: {outerSize.width}</span>
+      <span>Height: {outerSize.height}</span>
+    </div>
+  </div>
+  <div class="flex">
+    <div class="grow window-property">
+      <div>Inner Logical Size</div>
+      <span>Width: {innerSize.toLogical(scaleFactor).width}</span>
+      <span>Height: {innerSize.toLogical(scaleFactor).height}</span>
+    </div>
+    <div class="grow window-property">
+      <div>Outer Logical Size</div>
+      <span>Width: {outerSize.toLogical(scaleFactor).width}</span>
+      <span>Height: {outerSize.toLogical(scaleFactor).height}</span>
+    </div>
+  </div>
+  <div class="flex">
+    <div class="grow window-property">
+      <div>Inner Position</div>
+      <span>x: {innerPosition.x}</span>
+      <span>y: {innerPosition.y}</span>
+    </div>
+    <div class="grow window-property">
+      <div>Outer Position</div>
+      <span>x: {outerPosition.x}</span>
+      <span>y: {outerPosition.y}</span>
+    </div>
+  </div>
+  <div class="flex">
+    <div class="grow window-property">
+      <div>Inner Logical Position</div>
+      <span>x: {innerPosition.toLogical(scaleFactor).x}</span>
+      <span>y: {innerPosition.toLogical(scaleFactor).y}</span>
+    </div>
+    <div class="grow window-property">
+      <div>Outer Logical Position</div>
+      <span>x: {outerPosition.toLogical(scaleFactor).x}</span>
+      <span>y: {outerPosition.toLogical(scaleFactor).y}</span>
+    </div>
+  </div>
+</div>
 <form style="margin-top: 24px" on:submit|preventDefault={setTitle_}>
   <input id="title" bind:value={windowTitle} />
   <button class="button" type="submit">Set title</button>
@@ -194,4 +286,11 @@
   .window-controls input {
     width: 50px;
   }
+
+  .window-property {
+    margin-top: 12px;
+  }
+  .window-property span {
+    font-size: 0.8rem;
+  }
 </style>

examples/api/public/build/bundle.js

@@ -330,7 +330,7 @@ class WindowManager extends WebviewWindowHandle {
 
   /** The position of the top-left hand corner of the window's client area relative to the top-left hand corner of the desktop. */
   async innerPosition(): Promise<PhysicalPosition> {
-    return invokeTauriCommand({
+    return invokeTauriCommand<{ x: number; y: number }>({
       __tauriModule: 'Window',
       message: {
         cmd: 'manage',
@@ -341,12 +341,12 @@ class WindowManager extends WebviewWindowHandle {
           }
         }
       }
-    })
+    }).then(({ x, y }) => new PhysicalPosition(x, y))
   }
 
   /** The position of the top-left hand corner of the window relative to the top-left hand corner of the desktop. */
   async outerPosition(): Promise<PhysicalPosition> {
-    return invokeTauriCommand({
+    return invokeTauriCommand<{ x: number; y: number }>({
       __tauriModule: 'Window',
       message: {
         cmd: 'manage',
@@ -357,15 +357,15 @@ class WindowManager extends WebviewWindowHandle {
           }
         }
       }
-    })
+    }).then(({ x, y }) => new PhysicalPosition(x, y))
   }
 
   /**
    * The physical size of the window's client area.
    * The client area is the content of the window, excluding the title bar and borders.
    */
   async innerSize(): Promise<PhysicalSize> {
-    return invokeTauriCommand({
+    return invokeTauriCommand<{ width: number; height: number }>({
       __tauriModule: 'Window',
       message: {
         cmd: 'manage',
@@ -376,15 +376,15 @@ class WindowManager extends WebviewWindowHandle {
           }
         }
       }
-    })
+    }).then(({ width, height }) => new PhysicalSize(width, height))
   }
 
   /**
    * The physical size of the entire window.
    * These dimensions include the title bar and borders. If you don't want that (and you usually don't), use inner_size instead.
    */
   async outerSize(): Promise<PhysicalSize> {
-    return invokeTauriCommand({
+    return invokeTauriCommand<{ width: number; height: number }>({
       __tauriModule: 'Window',
       message: {
         cmd: 'manage',
@@ -395,7 +395,7 @@ class WindowManager extends WebviewWindowHandle {
           }
         }
       }
-    })
+    }).then(({ width, height }) => new PhysicalSize(width, height))
   }
 
   /** Gets the window's current fullscreen state. */