tauri-plugin-polygon 0.1.2

A plugin for [tauri@v2](https://tauri.app/) to achieve click-through of the tauri main window by allowing developers to define polygons, thus customizing the mouse response area.
Documentation

Tauri Plugin polygon

License crates.io

A plugin for tauri@v2 to achieve click-through of the tauri main window by allowing developers to define polygons, thus customizing the mouse response area.

Note that this plugin is only available for full-screen (normally transparent background) applications.

Platform Supported

Platform Supported
Windows ✅
Linux ✅
macOS ✅
Android ❌
iOS ❌

Install

Before using the library, you may need to learn more information about tauri.

# You need to create a tauri project first

# and then

npm install tauri-plugin-polygon-api


# You may need to `cd src-tauri` first

cargo add tauri-plugin-polygon

Usage

Go with examples.

Configuration

Before using this plugin, we need to make some changes to tauri.conf.json, html and src-tauri\capabilities\default.json, so that we can build a full-screen and transparent background application, and invoke commands from the JS context.

// tauri.conf.json
"app": {
    "windows": [
      {
        // ...
        "alwaysOnTop": true,
        "transparent": true,
        "fullscreen": true
        // ...
      }
    ]
  },

<!-- index.html -->
<!DOCTYPE html>
<html>
  <body style="background: transparent; width: 100vw; height: 100vh; overflow: hidden;">
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

// src-tauri\capabilities\default.json
{
    // ...
    "windows": ["main"],
    "permissions": [
        // ...
        // Depends on your needs
        "polygon:allow-register",
        "polygon:allow-register-all",
        "polygon:allow-show",
        "polygon:allow-hide",
        "polygon:allow-remove",
        "polygon:allow-update",
        "polygon:allow-clear"
    ]
    // ...
}

Initialization

use tauri::AppHandle;

fn main() {
    let app = tauri::Builder::default()
        .plugin(tauri_plugin_polygon::init(|_app, _event| {}))
        .invoke_handler(tauri::generate_handler![])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

Call from Rust

Learn more api about tauri-plugin-polygon.

Example

use tauri::AppHandle;
use tauri_plugin_polygon::PolygonExt;

fn main() {
    let app = tauri::Builder::default()
        .plugin(tauri_plugin_polygon::init(|app, event| {
            // Do nothing beyond match block, otherwise, thread stack overflow would occur.
            // Some Event will be passed here.
            match event {
                tauri_plugin_polygon::Event::LeftClick {x, y} => {
                    println!("Left button clicked at ({x}, {y})");
                    // Update polygon's points
                    app.polygon().update("my-polygon",
                        vec![(0.0, 0.0), (0.1, 0.0), (0.1, 0.1), (0.1, 0.0)]
                    );
                    // Enable the polygon
                    app.polygon().show("my-polygon");
                }
                // Some other events
                _ => {}
            }
        }))
        .setup(|app| {
            // Register a polygon when application setup
            app.polygon().register("my-polygon").unwrap();

            // You may need to open devtools for debugging
            #[cfg(debug_assertions)]
            {
                let win = app.get_webview_window("main").unwrap();
                win.open_devtools();
            }
        }
        .invoke_handler(tauri::generate_handler![])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

Call from Javascript

Example

import { polygon } from 'tauri-plugin-polygon-api';

const SOME_ID = "my-polygon";

polygon.register(SOME_ID);

polygon.on("LeftClick", async payload => {
    await polygon.show(SOME_ID);
    // Update polygon's points
    // Note:
    // 1. Percentage is used here.
    // 2. At least 3 points needed.
    // 3. Order of points matters.
    await polygon.update(SOME_ID, [
        [0, 0],[0.1, 0],[0.1, 0.1],[0.1, 0]
    ]);
    // Make the polygon 'visible' (We do not really see the polygon).
    await polygon.show(SOME_ID);
})

Notice:

  1. Events would be emmitd to webview and the closure(provided in init function)mouse event triggered in unregistered areas. As for registered areas, handle it by frendend itself.
  2. Position from 0 to 1, 0.1 means 10% of the screen (which is fullscreen as we set before) width.
  3. Order of points matters.
  4. We can get the actual(logical) position by window.screen.width * position.x and window.screen.width * position.y.