feat: Move window with keyboard

README.md

@@ -1,4 +1,18 @@
 # PixelPerfect-Overlay
 
+Works on Windows & macOs
+
+### Done
+- [x] Browse directories
+- [x] Support "binary" img files (pnj jpeg...)
+- [x] Support unique file from clipboard
+- [x] Zoom feature
+
+### TODO
+- [ ] Support SVG files
+- [ ] Support drag n drop
+- [ ] Add keyboards events to move the window precisely
+- [ ] Custom value for zoom mode
 ## Preview
-![overlay](https://user-images.githubusercontent.com/3635730/197407133-9645e501-d078-4fc0-abd2-47d087fd81b8.gif)
+![overlay](https://user-images.githubusercontent.com/3635730/198086995-a70943f8-34ff-4ab9-9607-fd7212a64781.gif)
+

src-tauri/src/commands.rs

@@ -5,7 +5,7 @@ mod utils;
 #[tauri::command]
 pub async fn read_file(path: String) -> String {
     match std::fs::read(path) {
-        Ok(bytes) => utils::get_b64_from_uint8(bytes),
+        Ok(bytes) => utils::get_b64_from_vector(bytes),
         Err(e) => {
             println!("read_file failed {e}");
             panic!("read_file failed{}", e)

src-tauri/src/utils.rs

@@ -1,16 +1,41 @@
 use base64;
 use std::str;
-use tauri::{LogicalSize, Size};
-use tauri::Manager;
+use tauri::{Error, LogicalSize, Manager, PhysicalPosition, Position, Size, Window};
+
+pub enum MovingDirection {
+    Left,
+    Top,
+    Right,
+    Bottom,
+}
+
+#[derive(serde::Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct MoveWindowPayload {
+    evt_id: i32,
+}
+
+impl MovingDirection {
+    fn from_int(val: i32) -> MovingDirection {
+        match val {
+            0 => MovingDirection::Left,
+            1 => MovingDirection::Top,
+            2 => MovingDirection::Right,
+            3 => MovingDirection::Bottom,
+            _ => panic!("Wrong Direction when moving window: {}", val),
+        }
+    }
+}
 
 pub const OVERLAY_LABEL: &str = "overlay";
+pub const MOVING_STEP: i32 = 1;
 
-pub fn get_b64_from_uint8(buffer: Vec<u8>) -> String {
+pub fn get_b64_from_vector(buffer: Vec<u8>) -> String {
     return base64::encode(buffer);
 }
 
 pub fn create_window(handle: tauri::AppHandle) {
-    tauri::WindowBuilder::new(
+    let window = tauri::WindowBuilder::new(
         &handle,
         OVERLAY_LABEL,
         tauri::WindowUrl::App("overlay.html".into()),
@@ -24,6 +49,42 @@ pub fn create_window(handle: tauri::AppHandle) {
     .inner_size(10.0, 10.0)
     .build()
     .unwrap();
+    let window_copy = window.clone();
+
+    window.listen("MoveWindow", move |event| {
+        let move_window_payload: MoveWindowPayload =
+            serde_json::from_str(event.payload().unwrap()).unwrap();
+        move_window(
+            &window_copy,
+            MovingDirection::from_int(move_window_payload.evt_id),
+        )
+        .unwrap();
+    });
+}
+
+pub fn move_window(window: &Window, direction: MovingDirection) -> Result<(), Error> {
+    let current_position = window.inner_position().unwrap();
+
+    let physicalp = match direction {
+        MovingDirection::Left => PhysicalPosition {
+            x: current_position.x - MOVING_STEP,
+            y: current_position.y,
+        },
+        MovingDirection::Top => PhysicalPosition {
+            x: current_position.x,
+            y: current_position.y - MOVING_STEP,
+        },
+        MovingDirection::Right => PhysicalPosition {
+            x: current_position.x + MOVING_STEP,
+            y: current_position.y,
+        },
+        MovingDirection::Bottom => PhysicalPosition {
+            x: current_position.x,
+            y: current_position.y + MOVING_STEP,
+        },
+    };
+
+    window.set_position(Position::Physical(physicalp))
 }
 
 pub fn resize_window(handle: tauri::AppHandle, width: f64, height: f64) {

src/windows/overlay/overlay.js

@@ -3,6 +3,7 @@ import { appWindow } from "@tauri-apps/api/window";
 
 const PAGE_LOADED_EVENT = "PageLoaded";
 const RESIZE_WINDOW_EVENT = "ResizeWindow";
+const MOVE_WINDOW_EVENT = "MoveWindow";
 const DISPLAY_IMG_EVENT = "DisplayImg";
 
 const B64_IMAGE_FILE_TYPE = "B64";
@@ -15,6 +16,7 @@ const contentMainImgEl = document.querySelector("img#main-image");
 let originalWidth;
 let resizeRatio = 100;
 
+// DOM Events
 function addDomEvents() {
   document
     .querySelector("input#opacity-input")
@@ -23,6 +25,27 @@ function addDomEvents() {
   document
     .querySelector("#titlebar-close")
     .addEventListener("click", appWindow.close);
+
+    // TODO: Handle keydown from rust side would be great ...
+    document.addEventListener("keydown",handleArrowKeys)
+}
+
+function handleArrowKeys(e){
+    switch (e.keyCode) {
+       case 37:
+        emitMoveWindow(0);//left
+          break;
+       case 38:
+        emitMoveWindow(1);//up
+          break;
+       case 39:
+        emitMoveWindow(2);//right
+          break;
+       case 40:
+        emitMoveWindow(3);//down
+          break;
+    }
+
 }
 
 function updateRange(e) {
@@ -53,6 +76,8 @@ function onReceiveImage(receivedEvent) {
   originalWidth = payload.width;
 }
 
+
+// Backend Events
 async function emitPageLoaded() {
   await emit(PAGE_LOADED_EVENT, { isLoaded: true });
 }
@@ -61,6 +86,10 @@ async function emitResizeWindow(width, height) {
   await emit(RESIZE_WINDOW_EVENT, { width, height });
 }
 
+async function emitMoveWindow(evtId){
+  await emit(MOVE_WINDOW_EVENT, { evtId });
+}
+
 (async function init() {
   addDomEvents();
   await listen(DISPLAY_IMG_EVENT, onReceiveImage);