[positioner] handleIconState in JS (#1822)

* [positioner] handleIconState in JS

* update readme

* fix change file version

* fixes

---------

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

.changes/positioner-v2-handleIconState.md

@@ -0,0 +1,6 @@
+---
+"positioner": patch
+"positioner-js": patch
+---
+
+`handleIconState` function for use in JavaScript event handlers. This allows one to update the TrayIcon state through JavaScript and fully create and handle the TrayIcon without requiring Rust (and the side-effect of creating a TrayIcon).

plugins/barcode-scanner/api-iife.js

@@ -1 +1 @@
-if("__TAURI__"in window){var __TAURI_PLUGIN_BARCODE_SCANNER__=function(n){"use strict";async function e(n,e={},r){return window.__TAURI_INTERNALS__.invoke(n,e,r)}var r;return"function"==typeof SuppressedError&&SuppressedError,n.Format=void 0,(r=n.Format||(n.Format={})).QRCode="QR_CODE",r.UPC_A="UPC_A",r.UPC_E="UPC_E",r.EAN8="EAN_8",r.EAN13="EAN_13",r.Code39="CODE_39",r.Code93="CODE_93",r.Code128="CODE_128",r.Codabar="CODABAR",r.ITF="ITF",r.Aztec="AZTEC",r.DataMatrix="DATA_MATRIX",r.PDF417="PDF_417",n.cancel=async function(){await e("plugin:barcode-scanner|cancel")},n.checkPermissions=async function(){return await async function(n){return e(`plugin:${n}|request_permissions`)}("barcode-scanner").then((n=>n.camera))},n.openAppSettings=async function(){await e("plugin:barcode-scanner|open_app_settings")},n.requestPermissions=async function(){return await async function(n){return e(`plugin:${n}|check_permissions`)}("barcode-scanner").then((n=>n.camera))},n.scan=async function(n){return await e("plugin:barcode-scanner|scan",{...n})},n}({});Object.defineProperty(window.__TAURI__,"barcodeScanner",{value:__TAURI_PLUGIN_BARCODE_SCANNER__})}
+if("__TAURI__"in window){var __TAURI_PLUGIN_BARCODE_SCANNER__=function(n){"use strict";async function e(n,e={},r){return window.__TAURI_INTERNALS__.invoke(n,e,r)}var r;return"function"==typeof SuppressedError&&SuppressedError,n.Format=void 0,(r=n.Format||(n.Format={})).QRCode="QR_CODE",r.UPC_A="UPC_A",r.UPC_E="UPC_E",r.EAN8="EAN_8",r.EAN13="EAN_13",r.Code39="CODE_39",r.Code93="CODE_93",r.Code128="CODE_128",r.Codabar="CODABAR",r.ITF="ITF",r.Aztec="AZTEC",r.DataMatrix="DATA_MATRIX",r.PDF417="PDF_417",n.cancel=async function(){await e("plugin:barcode-scanner|cancel")},n.checkPermissions=async function(){return await async function(n){return e(`plugin:${n}|check_permissions`)}("barcode-scanner").then((n=>n.camera))},n.openAppSettings=async function(){await e("plugin:barcode-scanner|open_app_settings")},n.requestPermissions=async function(){return await async function(n){return e(`plugin:${n}|request_permissions`)}("barcode-scanner").then((n=>n.camera))},n.scan=async function(n){return await e("plugin:barcode-scanner|scan",{...n})},n}({});Object.defineProperty(window.__TAURI__,"barcodeScanner",{value:__TAURI_PLUGIN_BARCODE_SCANNER__})}

plugins/positioner/README.md

@@ -58,6 +58,7 @@ fn main() {
         .plugin(tauri_plugin_positioner::init())
         // This is required to get tray-relative positions to work
         .setup(|app| {
+            // note that this will create a new TrayIcon
             TrayIconBuilder::new()
                 .on_tray_icon_event(|app, event| {
                     tauri_plugin_positioner::on_tray_event(app.app_handle(), &event);
@@ -70,6 +71,40 @@ fn main() {
 }
 ```
 
+Alternatively, you may handle the tray events through JavaScript. Register the plugin as previously noted.
+
+```rust
+fn main() {
+    tauri::Builder::default()
+        .plugin(tauri_plugin_positioner::init())
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}
+```
+
+And in JavaScript, the `action` passed to the TrayIcon should include the handler.
+
+```javascript
+import {
+  moveWindow,
+  Position,
+  handleIconState,
+} from "@tauri-apps/plugin-positioner";
+
+const action = async (event: TrayIconEvent) => {
+  // add the handle in the action to update the state
+  await handleIconState(event);
+  if ("click" in event) {
+    const { click } = event;
+    // note this option requires enabling the `tray-icon`
+    //   feature in the Cargo.toml
+    await moveWindow(Position.TrayLeft);
+  }
+};
+
+const tray = await TrayIcon.new({ id: "main", action });
+```
+
 Afterwards all the plugin's APIs are available through the JavaScript guest bindings:
 
 ```javascript

plugins/positioner/api-iife.js

@@ -1 +1 @@
-if("__TAURI__"in window){var __TAURI_PLUGIN_POSITIONER__=function(t){"use strict";var o;return"function"==typeof SuppressedError&&SuppressedError,t.Position=void 0,(o=t.Position||(t.Position={}))[o.TopLeft=0]="TopLeft",o[o.TopRight=1]="TopRight",o[o.BottomLeft=2]="BottomLeft",o[o.BottomRight=3]="BottomRight",o[o.TopCenter=4]="TopCenter",o[o.BottomCenter=5]="BottomCenter",o[o.LeftCenter=6]="LeftCenter",o[o.RightCenter=7]="RightCenter",o[o.Center=8]="Center",o[o.TrayLeft=9]="TrayLeft",o[o.TrayBottomLeft=10]="TrayBottomLeft",o[o.TrayRight=11]="TrayRight",o[o.TrayBottomRight=12]="TrayBottomRight",o[o.TrayCenter=13]="TrayCenter",o[o.TrayBottomCenter=14]="TrayBottomCenter",t.moveWindow=async function(t){await async function(t,o={},e){return window.__TAURI_INTERNALS__.invoke(t,o,e)}("plugin:positioner|move_window",{position:t})},t}({});Object.defineProperty(window.__TAURI__,"positioner",{value:__TAURI_PLUGIN_POSITIONER__})}
+if("__TAURI__"in window){var __TAURI_PLUGIN_POSITIONER__=function(t){"use strict";async function o(t,o={},e){return window.__TAURI_INTERNALS__.invoke(t,o,e)}var e;return"function"==typeof SuppressedError&&SuppressedError,t.Position=void 0,(e=t.Position||(t.Position={}))[e.TopLeft=0]="TopLeft",e[e.TopRight=1]="TopRight",e[e.BottomLeft=2]="BottomLeft",e[e.BottomRight=3]="BottomRight",e[e.TopCenter=4]="TopCenter",e[e.BottomCenter=5]="BottomCenter",e[e.LeftCenter=6]="LeftCenter",e[e.RightCenter=7]="RightCenter",e[e.Center=8]="Center",e[e.TrayLeft=9]="TrayLeft",e[e.TrayBottomLeft=10]="TrayBottomLeft",e[e.TrayRight=11]="TrayRight",e[e.TrayBottomRight=12]="TrayBottomRight",e[e.TrayCenter=13]="TrayCenter",e[e.TrayBottomCenter=14]="TrayBottomCenter",t.handleIconState=async function(t){await async function(t){await o("plugin:positioner|set_tray_icon_state",{position:t.position,size:t.size})}(t.rect)},t.moveWindow=async function(t){await o("plugin:positioner|move_window",{position:t})},t}({});Object.defineProperty(window.__TAURI__,"positioner",{value:__TAURI_PLUGIN_POSITIONER__})}

plugins/positioner/guest-js/index.ts

@@ -4,6 +4,7 @@
 // SPDX-License-Identifier: MIT
 
 import { invoke } from '@tauri-apps/api/core'
+import type { TrayIconEvent } from '@tauri-apps/api/tray'
 
 /**
  * Well known window positions.
@@ -37,3 +38,14 @@ export async function moveWindow(to: Position): Promise<void> {
     position: to
   })
 }
+
+export async function handleIconState(event: TrayIconEvent): Promise<void> {
+  await invokeSetTrayIconState(event.rect)
+}
+
+async function invokeSetTrayIconState(rect: TrayIconEvent['rect']) {
+  await invoke('plugin:positioner|set_tray_icon_state', {
+    position: rect.position,
+    size: rect.size
+  })
+}

plugins/positioner/permissions/autogenerated/commands/set_tray_icon_state.toml

@@ -0,0 +1,8 @@
+# Automatically generated - DO NOT EDIT!
+
+"$schema" = "../../schemas/schema.json"
+
+[[permission]]
+identifier = "allow-set-tray-icon-state"
+description = "Enables the set_tray_icon_state to handle events and set the TrayIcon state."
+commands.allow = ["set_tray_icon_state"]

plugins/positioner/permissions/autogenerated/reference.md

@@ -3,6 +3,7 @@
 Allows the move_window command
 
 - `allow-move-window`
+- `set-tray-icon-state`
 
 ## Permission Table
 
@@ -36,6 +37,19 @@ Enables the move_window command without any pre-configured scope.
 
 Denies the move_window command without any pre-configured scope.
 
+</td>
+</tr>
+
+<tr>
+<td>
+
+`positioner:allow-set-tray-icon-state`
+
+</td>
+<td>
+
+Enables the set_tray_icon_state to handle events and set the TrayIcon state.
+
 </td>
 </tr>
 </table>

plugins/positioner/permissions/default.toml

@@ -1,4 +1,4 @@
 "$schema" = "schemas/schema.json"
 [default]
 description = "Allows the move_window command"
-permissions = ["allow-move-window"]
+permissions = ["allow-move-window", "set-tray-icon-state"]

plugins/positioner/permissions/schemas/schema.json

@@ -304,6 +304,11 @@
           "type": "string",
           "const": "deny-move-window"
         },
+        {
+          "description": "Enables the set_tray_icon_state to handle events and set the TrayIcon state.",
+          "type": "string",
+          "const": "allow-set-tray-icon-state"
+        },
         {
           "description": "Allows the move_window command",
           "type": "string",

plugins/positioner/src/lib.rs

@@ -63,10 +63,27 @@ async fn move_window<R: Runtime>(window: tauri::Window<R>, position: Position) -
     window.move_window(position)
 }
 
+#[cfg(feature = "tray-icon")]
+#[tauri::command]
+fn set_tray_icon_state<R: Runtime>(
+    app: AppHandle<R>,
+    position: PhysicalPosition<f64>,
+    size: PhysicalSize<f64>,
+) {
+    app.state::<Tray>()
+        .0
+        .lock()
+        .unwrap()
+        .replace((position, size));
+}
+
 /// The Tauri plugin that exposes [`WindowExt::move_window`] to the webview.
 pub fn init<R: Runtime>() -> TauriPlugin<R> {
-    let plugin =
+    let plugin = plugin::Builder::new("positioner").invoke_handler(tauri::generate_handler![
-        plugin::Builder::new("positioner").invoke_handler(tauri::generate_handler![move_window]);
+        move_window,
+        #[cfg(feature = "tray-icon")]
+        set_tray_icon_state
+    ]);
 
     #[cfg(feature = "tray-icon")]
     let plugin = plugin.setup(|app_handle, _api| {