tauri-plugin-polygon-api
v0.1.2
Published
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.
Downloads
227
Maintainers
houycthReadme
Tauri Plugin polygon
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(normallytransparent 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-polygonUsage
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:
- Events would be emmitd to
webviewand theclosure(provided in init function)mouse eventtriggered in unregistered areas. As for registered areas, handle it by frendend itself.- Position from 0 to 1, 0.1 means 10% of the
screen(which is fullscreen as we set before)width.- Order of points matters.
- We can get the actual(logical) position by
window.screen.width * position.xandwindow.screen.width * position.y.