feat: Enhance BrowserWindow functionality and add new APIs

- Updated `index.js` in the hello-world example to include new window options such as position, visibility, and bounds manipulation.
- Added context menu support with a custom HTML/CSS menu in the webview.
- Implemented screenshot functionality that captures the window and saves it as a base64 PNG.
- Introduced new window operations in `nanoframe-core` for setting bounds, getting bounds, and managing window states (maximize, unmaximize, restore).
- Added support for minimum and maximum window sizes.
- Enhanced IPC communication to handle webview messages and context menu events.
- Updated TypeScript definitions in `nanoframe` to reflect new window options and methods.

Author: builtbyjonas

Cargo.lock

@@ -1,26 +1,77 @@
 import { app, BrowserWindow } from 'nanoframe';
-import { fileURLToPath } from "node:url";
-import { dirname } from "node:path";
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+import { writeFile } from 'node:fs/promises';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
 async function main() {
+  // Create hidden then show after we tweak bounds and sizes
   const win = await BrowserWindow.create({
     title: 'Nanoframe Hello',
-    width: 800,
-    height: 600,
-    url: "https://example.com",
+    width: 1000,
+    height: 700,
+    x: 150,
+    y: 100,
+    show: false,
+    minWidth: 800,
+    minHeight: 500,
+    url: 'https://example.com',
   });
 
   await app.whenReady;
 
   await win.setIcon(`${__dirname}/assets/logo.png`);
   await win.eval('console.log("Hello from nanoframe")');
-  await win.openDevTools();
-  await win.center();
   await win.setAlwaysOnTop(false);
+
+  // Demonstrate bounds API
+  await win.setBounds({ width: 1024, height: 640 });
+  const bounds = await win.getBounds();
+  console.log('Bounds after resize:', bounds);
+
+  // Show it now
   await win.show();
+
+  // Enable a basic custom context menu hook
+  await win.enableContextMenu();
+  app.on('webviewIpc', async ({ windowId, payload }) => {
+    if (windowId !== win.id) return;
+    if (payload?.type === 'context-menu') {
+      const { x, y } = payload.detail || {};
+      // Inject a minimal in-page menu (pure HTML/CSS for demo). Click outside to dismiss.
+      await win.eval(`(function(){
+        const id='__nf_demo_menu';
+        const old=document.getElementById(id); if (old) old.remove();
+        const m=document.createElement('div');
+        m.id=id; m.style.cssText='position:fixed; z-index:99999; background:#222; color:#eee; box-shadow:0 6px 24px rgba(0,0,0,.3); border:1px solid #444; font:14px system-ui;';
+        m.style.left='${x}px'; m.style.top='${y}px';
+        const item=(txt,cb)=>{ const it=document.createElement('div'); it.textContent=txt; it.style.cssText='padding:8px 14px; cursor:pointer; white-space:nowrap;'; it.onmouseenter=()=>it.style.background='#333'; it.onmouseleave=()=>it.style.background='transparent'; it.onclick=()=>{ cb(); cleanup(); }; return it; };
+        const cleanup=()=>{ m.remove(); document.removeEventListener('click', cleanup, true); };
+        m.appendChild(item('Say Hi', ()=>alert('Hello!')));
+        m.appendChild(item('Open DevTools', ()=>window.open('about:blank')));
+        document.body.appendChild(m);
+        setTimeout(()=>document.addEventListener('click', cleanup, true), 0);
+      })();`);
+    }
+  });
+
+  // Showcase maximize/unmaximize + restore
+  await win.maximize();
+  console.log('isMaximized:', await win.isMaximized());
+  await win.unmaximize();
+  await win.restore();
+
+  // Request user attention (Windows taskbar flash)
+  await win.requestUserAttention(false);
+
+  // Take a screenshot (base64 PNG) and save to temp folder
+  const { base64Png } = await win.screenshot();
+  const { path: tempDir } = await app.getPath('temp');
+  const out = join(tempDir, 'nanoframe-screenshot.png');
+  await writeFile(out, Buffer.from(base64Png, 'base64'));
+  console.log('Saved screenshot to', out);
 }
 
 main().catch(err => {

examples/hello-world/src/index.js

@@ -20,6 +20,8 @@ directories = "6"
 image = { version = "0.25", default-features = false, features = ["png", "ico"] }
 open = "5"
 arboard = "3"
+base64 = "0.22"
+screenshots = "0.8"
 
 [features]
 default = []

packages/nanoframe-core/Cargo.toml

@@ -49,14 +49,22 @@ fn main() {
                 "window.maximize" => window_ops::op_maximize(&mut app, req.params, id),
                 "window.minimize" => window_ops::op_minimize(&mut app, req.params, id),
                 "window.unminimize" => window_ops::op_unminimize(&mut app, req.params, id),
+                "window.unmaximize" => window_ops::op_unmaximize(&mut app, req.params, id),
+                "window.isMaximized" => window_ops::op_is_maximized(&mut app, req.params, id),
+                "window.restore" => window_ops::op_restore(&mut app, req.params, id),
                 "window.focus" => window_ops::op_focus(&mut app, req.params, id),
                 "window.setTitle" => window_ops::op_set_title(&mut app, req.params, id),
                 "window.setSize" => window_ops::op_set_size(&mut app, req.params, id),
                 "window.getSize" => window_ops::op_get_size(&mut app, req.params, id),
+                "window.setMinSize" => window_ops::op_set_min_size(&mut app, req.params, id),
+                "window.setMaxSize" => window_ops::op_set_max_size(&mut app, req.params, id),
+                "window.setBounds" => window_ops::op_set_bounds(&mut app, req.params, id),
+                "window.getBounds" => window_ops::op_get_bounds(&mut app, req.params, id),
                 "window.center" => window_ops::op_center(&mut app, req.params, id),
                 "window.setAlwaysOnTop" => window_ops::op_set_always_on_top(&mut app, req.params, id),
                 "window.setResizable" => window_ops::op_set_resizable(&mut app, req.params, id),
                 "window.isVisible" => window_ops::op_is_visible(&mut app, req.params, id),
+                "window.requestUserAttention" => window_ops::op_request_user_attention(&mut app, req.params, id),
                 "window.setFullscreen" => window_ops::op_set_fullscreen(&mut app, req.params, id),
                 "window.isFullscreen" => window_ops::op_is_fullscreen(&mut app, req.params, id),
                 "window.setDecorations" => window_ops::op_set_decorations(&mut app, req.params, id),
@@ -65,6 +73,7 @@ fn main() {
                 // Webview extras
                 "webview.openDevtools" => window_ops::op_open_devtools(&mut app, req.params, id),
                 "webview.postMessage" => window_ops::op_post_message(&mut app, req.params, id),
+                "webview.screenshot" => window_ops::op_screenshot(&mut app, req.params, id),
                 // Dialogs + app paths
                 "dialog.open" => dialogs::op_open_dialog(&mut app, req.params, id),
                 "dialog.save" => dialogs::op_save_dialog(&mut app, req.params, id),

packages/nanoframe-core/src/main.rs

@@ -18,13 +18,21 @@ struct CreateWindowParams {
     html: Option<String>,
     width: Option<u32>,
     height: Option<u32>,
+    x: Option<i32>,
+    y: Option<i32>,
+    show: Option<bool>,
+    min_width: Option<u32>,
+    min_height: Option<u32>,
+    max_width: Option<u32>,
+    max_height: Option<u32>,
     icon_path: Option<String>,
     resizable: Option<bool>,
     always_on_top: Option<bool>,
     fullscreen: Option<bool>,
     decorations: Option<bool>,
     center: Option<bool>,
     preload: Option<String>,
+    content_size: Option<bool>,
 }
 
 pub fn create_window_with_target(
@@ -34,26 +42,54 @@ pub fn create_window_with_target(
 ) -> Result<Value> {
     let p: CreateWindowParams = serde_json::from_value(params)?;
 
+    // Pre-generate window id so we can capture it in callbacks
+    let id = Uuid::new_v4().to_string();
+
     // Build tao window
     let mut wb = WindowBuilder::new();
     if let Some(title) = p.title { wb = wb.with_title(title); }
     if let (Some(w), Some(h)) = (p.width, p.height) { wb = wb.with_inner_size(tao::dpi::LogicalSize::new(w as f64, h as f64)); }
+    if let (Some(x), Some(y)) = (p.x, p.y) { wb = wb.with_position(tao::dpi::LogicalPosition::new(x as f64, y as f64)); }
+    // Combine min/max sizes if provided
+    if p.min_width.is_some() || p.min_height.is_some() {
+        let mw = p.min_width.unwrap_or(0) as f64;
+        let mh = p.min_height.unwrap_or(0) as f64;
+        wb = wb.with_min_inner_size(tao::dpi::LogicalSize::new(mw, mh));
+    }
+    if p.max_width.is_some() || p.max_height.is_some() {
+        let mw = p.max_width.unwrap_or(u32::MAX) as f64;
+        let mh = p.max_height.unwrap_or(u32::MAX) as f64;
+        wb = wb.with_max_inner_size(tao::dpi::LogicalSize::new(mw, mh));
+    }
     if let Some(icon_path) = p.icon_path.as_deref() { if let Ok(icon) = load_icon(icon_path) { wb = wb.with_window_icon(Some(icon)); } }
     if let Some(v) = p.resizable { wb = wb.with_resizable(v); }
     if let Some(v) = p.always_on_top { wb = wb.with_always_on_top(v); }
     if let Some(v) = p.fullscreen { if v { wb = wb.with_fullscreen(Some(tao::window::Fullscreen::Borderless(None))); } }
     if let Some(v) = p.decorations { wb = wb.with_decorations(v); }
 
     let window = wb.build(target)?;
+    if p.content_size.unwrap_or(false) {
+        // noop placeholder: tao/wry works with inner size already
+    }
 
     // Build webview
     let mut wvb = WebViewBuilder::new();
     if let Some(script) = p.preload.as_deref() { wvb = wvb.with_initialization_script(script); }
     if let Some(url) = p.url { wvb = wvb.with_url(&url); }
     if let Some(html) = p.html { wvb = wvb.with_html(&html); }
-    let webview = wvb.build(&window)?;
+    let win_id_for_ipc = id.clone();
+    let webview = wvb.with_ipc_handler({
+        let tx = app.tx_out.clone();
+        move |request: wry::http::Request<String>| {
+            let body = request.body();
+            let payload = serde_json::from_str::<serde_json::Value>(body).unwrap_or(json!({ "raw": body }));
+            let _ = tx.send(RpcResponse::notify("webview.ipc", json!({ "windowId": win_id_for_ipc, "payload": payload })));
+        }
+    }).build(&window)?;
+
+    // Show window depending on flag (default true) BEFORE moving window
+    if p.show.unwrap_or(true) { window.set_visible(true); } else { window.set_visible(false); }
 
-    let id = Uuid::new_v4().to_string();
     app.windows.insert(id.clone(), window);
     app.webviews.insert(id.clone(), webview);
 
@@ -62,6 +98,8 @@ pub fn create_window_with_target(
         let _ = op_center(app, json!({"windowId": id.clone()}), RpcId::Null);
     }
 
+    // Visibility already set above
+
     Ok(json!({ "windowId": id }))
 }
 
@@ -232,6 +270,43 @@ pub fn op_get_position(app: &mut App, params: Value, id: RpcId) {
     }
 }
 
+#[derive(Debug, Deserialize)]
+#[serde(rename_all = "camelCase")]
+struct BoundsParams { window_id: String, x: Option<i32>, y: Option<i32>, width: Option<u32>, height: Option<u32> }
+
+pub fn op_set_bounds(app: &mut App, params: Value, id: RpcId) {
+    match serde_json::from_value::<BoundsParams>(params) {
+        Ok(p) => {
+            if let Some(win) = app.windows.get(&p.window_id) {
+                use tao::dpi::{PhysicalPosition, PhysicalSize};
+                if let (Some(x), Some(y)) = (p.x, p.y) { win.set_outer_position(PhysicalPosition::new(x, y)); }
+                if let (Some(w), Some(h)) = (p.width, p.height) { win.set_inner_size(PhysicalSize::new(w, h)); }
+                let _ = app.tx_out.send(RpcResponse::result(id, json!(true)));
+            } else { let _ = app.tx_out.send(RpcResponse::error(id, -32001, "Window not found".into())); }
+        }
+        Err(e) => { let _ = app.tx_out.send(RpcResponse::error(id, -32602, e.to_string())); }
+    }
+}
+
+pub fn op_get_bounds(app: &mut App, params: Value, id: RpcId) {
+    match serde_json::from_value::<WithWindowIdOnly>(params) {
+        Ok(p) => {
+            if let Some(win) = app.windows.get(&p.window_id) {
+                let pos = win.outer_position().ok();
+                let size = win.inner_size();
+                let res = json!({
+                    "x": pos.as_ref().map(|p| p.x),
+                    "y": pos.as_ref().map(|p| p.y),
+                    "width": size.width,
+                    "height": size.height,
+                });
+                let _ = app.tx_out.send(RpcResponse::result(id, res));
+            } else { let _ = app.tx_out.send(RpcResponse::error(id, -32001, "Window not found".into())); }
+        }
+        Err(e) => { let _ = app.tx_out.send(RpcResponse::error(id, -32602, e.to_string())); }
+    }
+}
+
 #[derive(Debug, Deserialize)]
 #[serde(rename_all = "camelCase")]
 struct PostMessageParams { window_id: String, payload: serde_json::Value }
@@ -311,6 +386,9 @@ pub fn op_get_size(app: &mut App, params: Value, id: RpcId) {
 pub fn op_maximize(app: &mut App, params: Value, id: RpcId) { with_window(app, params, id, |w| { w.set_maximized(true); Ok(json!(true)) }); }
 pub fn op_minimize(app: &mut App, params: Value, id: RpcId) { with_window(app, params, id, |w| { w.set_minimized(true); Ok(json!(true)) }); }
 pub fn op_unminimize(app: &mut App, params: Value, id: RpcId) { with_window(app, params, id, |w| { w.set_minimized(false); Ok(json!(true)) }); }
+pub fn op_unmaximize(app: &mut App, params: Value, id: RpcId) { with_window(app, params, id, |w| { w.set_maximized(false); Ok(json!(true)) }); }
+pub fn op_is_maximized(app: &mut App, params: Value, id: RpcId) { with_window(app, params, id, |w| { Ok(json!(w.is_maximized())) }); }
+pub fn op_restore(app: &mut App, params: Value, id: RpcId) { with_window(app, params, id, |w| { w.set_minimized(false); w.set_maximized(false); Ok(json!(true)) }); }
 pub fn op_focus(app: &mut App, params: Value, id: RpcId) { with_window(app, params, id, |w| { w.set_focus(); Ok(json!(true)) }); }
 pub fn op_center(app: &mut App, params: Value, id: RpcId) { with_window(app, params, id, |w| {
     use tao::dpi::{PhysicalPosition};
@@ -328,6 +406,87 @@ pub fn op_set_always_on_top(app: &mut App, params: Value, id: RpcId) { with_wind
 pub fn op_set_resizable(app: &mut App, params: Value, id: RpcId) { with_window_bool(app, params, id, |w, v| { w.set_resizable(v); Ok(json!(true)) }); }
 pub fn op_is_visible(app: &mut App, params: Value, id: RpcId) { with_window(app, params, id, |w| { Ok(json!(w.is_visible())) }); }
 
+#[derive(Debug, Deserialize)]
+#[serde(rename_all = "camelCase")]
+struct SizeOnlyParams { window_id: String, width: u32, height: u32 }
+
+pub fn op_set_min_size(app: &mut App, params: Value, id: RpcId) {
+    match serde_json::from_value::<SizeOnlyParams>(params) {
+        Ok(p) => {
+            if let Some(win) = app.windows.get(&p.window_id) {
+                use tao::dpi::PhysicalSize;
+                win.set_min_inner_size(Some(PhysicalSize::new(p.width, p.height)));
+                let _ = app.tx_out.send(RpcResponse::result(id, json!(true)));
+            } else { let _ = app.tx_out.send(RpcResponse::error(id, -32001, "Window not found".into())); }
+        }
+        Err(e) => { let _ = app.tx_out.send(RpcResponse::error(id, -32602, e.to_string())); }
+    }
+}
+
+pub fn op_set_max_size(app: &mut App, params: Value, id: RpcId) {
+    match serde_json::from_value::<SizeOnlyParams>(params) {
+        Ok(p) => {
+            if let Some(win) = app.windows.get(&p.window_id) {
+                use tao::dpi::PhysicalSize;
+                win.set_max_inner_size(Some(PhysicalSize::new(p.width, p.height)));
+                let _ = app.tx_out.send(RpcResponse::result(id, json!(true)));
+            } else { let _ = app.tx_out.send(RpcResponse::error(id, -32001, "Window not found".into())); }
+        }
+        Err(e) => { let _ = app.tx_out.send(RpcResponse::error(id, -32602, e.to_string())); }
+    }
+}
+
+#[derive(Debug, Deserialize)]
+#[serde(rename_all = "camelCase")]
+struct AttentionParams { window_id: String, critical: Option<bool> }
+
+pub fn op_request_user_attention(app: &mut App, params: Value, id: RpcId) {
+    match serde_json::from_value::<AttentionParams>(params) {
+        Ok(p) => {
+            if let Some(win) = app.windows.get(&p.window_id) {
+                let demand = if p.critical.unwrap_or(false) { tao::window::UserAttentionType::Critical } else { tao::window::UserAttentionType::Informational };
+                win.request_user_attention(Some(demand));
+                let _ = app.tx_out.send(RpcResponse::result(id, json!(true)));
+            } else { let _ = app.tx_out.send(RpcResponse::error(id, -32001, "Window not found".into())); }
+        }
+        Err(e) => { let _ = app.tx_out.send(RpcResponse::error(id, -32602, e.to_string())); }
+    }
+}
+
+#[derive(Debug, Deserialize)]
+#[serde(rename_all = "camelCase")]
+struct ScreenshotParams { window_id: String }
+
+pub fn op_screenshot(app: &mut App, params: Value, id: RpcId) {
+    match serde_json::from_value::<ScreenshotParams>(params) {
+        Ok(p) => {
+            let r = (|| -> anyhow::Result<String> {
+                // Best-effort: capture primary screen for now
+                let screens: Vec<screenshots::Screen> = screenshots::Screen::all()?;
+                let mut iter = screens.into_iter();
+                let screen: screenshots::Screen = iter.next().ok_or(anyhow!("No screen"))?;
+                let img = screen.capture()?; // ImageBuffer RGBA
+                let (w, h) = (img.width(), img.height());
+                let mut buf = Vec::new();
+                {
+                    use image::codecs::png::PngEncoder;
+                    use image::ExtendedColorType;
+                    use image::ImageEncoder;
+                    let enc = PngEncoder::new(&mut buf);
+                    enc.write_image(img.as_raw(), w, h, ExtendedColorType::Rgba8)?;
+                }
+                use base64::Engine as _;
+                Ok(base64::engine::general_purpose::STANDARD.encode(&buf))
+            })();
+            match r {
+                Ok(b64) => { let _ = app.tx_out.send(RpcResponse::result(id, json!({"base64Png": b64}))); }
+                Err(e) => { let _ = app.tx_out.send(RpcResponse::error(id, -33010, e.to_string())); }
+            }
+        }
+        Err(e) => { let _ = app.tx_out.send(RpcResponse::error(id, -32602, e.to_string())); }
+    }
+}
+
 #[derive(Debug, Deserialize)]
 #[serde(rename_all = "camelCase")]
 struct WithWindowIdBool { window_id: String, value: bool }

packages/nanoframe-core/src/window_ops.rs

@@ -1,2 +1,3 @@
-export { app, AppImpl as App } from './main/app'
-export { BrowserWindow } from './main/window'
+export { app, AppImpl as App } from './main/app.js'
+export { BrowserWindow } from './main/window.js'
+export type { BrowserWindowOptions } from './main/window.js'

packages/nanoframe/src/index.ts

@@ -1,9 +1,9 @@
 import { createNanoEvents } from 'nanoevents'
-import { RpcClient, withTimeout } from './core'
+import { RpcClient, withTimeout } from './core.js'
 
 export class AppImpl {
   #rpc!: RpcClient
-  #emitter = createNanoEvents<{ ready: () => void, windowAllClosed: () => void }>()
+  #emitter = createNanoEvents<{ ready: () => void, windowAllClosed: () => void, webviewIpc: (e: { windowId?: string, payload: any }) => void }>()
   whenReady: Promise<void>
   #stopKeepAlive?: () => void
 
@@ -16,13 +16,17 @@ export class AppImpl {
     this.#rpc.onNotify((method, params) => {
       if (method === 'window.closed') {
         this.#emitter.emit('windowAllClosed')
+      } else if (method === 'webview.ipc') {
+        this.#emitter.emit('webviewIpc', params)
       }
     })
     await withTimeout(this.#rpc.call('ping', {}), 10_000, new Error('nanoframe-core ping timeout'))
     this.#emitter.emit('ready')
   }
 
-  on(event: 'ready' | 'windowAllClosed', cb: () => void) { this.#emitter.on(event as any, cb as any) }
+  on(event: 'ready' | 'windowAllClosed', cb: () => void): void
+  on(event: 'webviewIpc', cb: (e: { windowId?: string, payload: any }) => void): void
+  on(event: any, cb: any) { this.#emitter.on(event, cb) }
 
   get rpc() { return this.#rpc }