flexdesk 0.14.1 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flexdesk",
-    "version": "0.14.1",
+    "version": "0.15.0",
     "description": "A tiling window manager and widget set for desktop-class web applications. Zero runtime dependencies.",
     "license": "MIT",
     "repository": {

package/src/host/host.js

@@ -19,7 +19,8 @@ export const HOST_CONTRACT = Object.freeze({
     window: Object.freeze({
         required: Object.freeze(['chrome', 'minimize', 'close', 'isMaximized', 'setMaximized',
                                  'isFullscreen', 'toggleFullscreen', 'getBounds', 'setBounds']),
-        optional: Object.freeze(['startNativeDrag']),
+        // `chrome()` answers 'native' or 'custom', or a promise of one.
+        optional: Object.freeze(['startNativeDrag', 'startNativeResize']),
     }),
     dialogs: Object.freeze({ required: Object.freeze(['saveFile']), optional: Object.freeze([]) }),
     state:   Object.freeze({ required: Object.freeze(['read', 'write']), optional: Object.freeze([]) }),

package/src/host/photino_host.js

@@ -99,6 +99,10 @@ export function createPhotinoTransport({ external, timeoutMs = 10000, onEvent =
  * @param {number} [opts.timeoutMs=10000]
  * @param {(name: string, value: any) => void} [opts.onEvent]
  * @param {object} [opts.logger=console]
+ * @param {'auto'|'native'|'custom'} [opts.chrome='auto']  who draws the window's
+ *        title bar and borders. `auto` asks the native side once (`host.describe`,
+ *        its `frame` field), the first time somebody needs to know; `native`
+ *        or `custom` fixes the answer without asking. See photino_host.md.
  * @param {object|null} [opts.window]   replace the window capability, or `null` to leave it out
  * @param {object|null} [opts.dialogs]  replace the dialogs capability, or `null` to leave it out
  * @param {object|null} [opts.state]    replace the state capability, or `null` to leave it out
@@ -110,6 +114,7 @@ export function createPhotinoHost(opts = {}) {
         timeoutMs = 10000,
         onEvent = null,
         logger = console,
+        chrome = 'auto',
     } = opts;
     if (!isPhotinoWindow(external)) return NULL_HOST;
 
@@ -121,11 +126,32 @@ export function createPhotinoHost(opts = {}) {
     };
     const fire = (cap, op, ...args) => { void soft(null, cap, op, ...args); };
 
+    // Who draws the frame. Asked once and remembered: a string once known, the
+    // pending question before that. A native side that predates `frame`, or
+    // doesn't answer within 3 s, has native chrome.
+    let frame = chrome === 'custom' || chrome === 'native' ? chrome : null;
+    let asking = null;
+    const askFrame = () => {
+        if (frame) return frame;
+        asking ??= request('host', 'describe', [], { wait: 3000 })
+            .then((d) => (d && d.frame === 'custom' ? 'custom' : 'native'), () => 'native')
+            .then((f) => { frame = f; return f; });
+        return asking;
+    };
+    // A drag or resize handed to the OS: the reply comes when the mouse is
+    // released, however long that takes. Refused (a native side without the op,
+    // or a window with native chrome) means "not handled": the caller does it in JS.
+    const gesture = async (op, ...args) => {
+        try { await request('window', op, args, { wait: 0 }); return true; }
+        catch (e) { return false; }
+    };
+
     const defaults = {
         window: {
-            // Photino draws a decorated, native window on every OS: FlexDesk's
-            // own min/max/close buttons would be a second set.
-            chrome: () => 'native',
+            // 'native' (the OS draws the frame: FlexDesk's own buttons would be
+            // a second set) or 'custom' (the native side made the window
+            // frameless). A promise until the native side has said which.
+            chrome: () => askFrame(),
             minimize: () => { fire('window', 'minimize'); },
             close: () => { fire('window', 'close'); },
             isMaximized: async () => (await soft(false, 'window', 'isMaximized')) === true,
@@ -137,6 +163,8 @@ export function createPhotinoHost(opts = {}) {
                 if (!b || typeof b !== 'object') return null;
                 return { x: b.x, y: b.y, width: b.width, height: b.height };
             },
+            startNativeDrag: () => gesture('startDrag'),
+            startNativeResize: (edge) => gesture('startResize', String(edge || '')),
             // Not async, like pywebview's: a rAF hot path during a drag; nobody awaits.
             setBounds({ x = null, y = null, width = null, height = null } = {}) {
                 fire('window', 'setBounds', { x, y, width, height });

package/src/host/photino_host.md

@@ -28,6 +28,7 @@ host → page   {"event": "window.maximizedChanged", "value": true}
 
 | `cap.op` | `args` | reply `value` | Photino |
 |---|---|---|---|
+| `host.describe` | `[]` | `{frame: "native" \| "custom", …}` | asked once, for `chrome()` (see below) |
 | `window.minimize` | `[]` | anything | `Minimized = true` |
 | `window.close` | `[]` | anything | `Close()` |
 | `window.isMaximized` | `[]` | `bool` | `Maximized` |
@@ -36,13 +37,65 @@ host → page   {"event": "window.maximizedChanged", "value": true}
 | `window.toggleFullscreen` | `[]` | `bool`, the state now | `FullScreen = !FullScreen` |
 | `window.getBounds` | `[]` | `{x, y, width, height}` | `Location`, `Size` |
 | `window.setBounds` | `[{x, y, width, height}]`, any of them `null` = leave alone | anything | `Location`, `Size` |
+| `window.startDrag` | `[]` | anything, **after mouse-up** | custom chrome only: the OS move loop (below) |
+| `window.startResize` | `[edge]`: `n` `s` `e` `w` `ne` `nw` `se` `sw` | anything, **after mouse-up** | custom chrome only: the OS size loop (below) |
 | `dialogs.saveFile` | `[{data, filename, kind}]` | see below | `ShowSaveFile(...)` + write |
 | `state.read` | `[key]` | the stored value, or `null` | a file per key |
 | `state.write` | `[key, value]` | `true` | a file per key |
 
-`window.chrome()` is answered by the adapter itself (`'native'`): Photino draws a
-native title bar, so FlexDesk draws no buttons of its own. `startNativeDrag` is
-not offered.
+## Native or custom chrome
+
+A FlexDesk app runs in one of three ways, and the page needs no switch for it:
+
+| | title bar and borders | `chrome()` | FlexDesk draws |
+|---|---|---|---|
+| a browser tab | the browser's | (no Photino host) | nothing |
+| a Photino window, native frame | the OS's | `'native'` | nothing |
+| a Photino window, custom frame | none: the page's top bar | `'custom'` | buttons, resize handles, drag |
+
+`window.chrome()` asks the native side once, with `host.describe`, the first
+time it's called (that is `WindowChromeController.initialize()`). It resolves
+`'custom'` when the reply's `frame` is `"custom"`, and `'native'` for anything
+else: no `frame` field, an `ok: false`, no answer within 3 s. An app that knows
+already can say so: `createPhotinoHost({ chrome: 'custom' })` or `'native'`
+answers without asking.
+
+**What the native side does for a custom frame (Windows).** Don't use
+Photino's `SetChromeless(true)`: that makes a bare popup window, with no
+snapping, no Win+arrows, no shadow and square corners, and Photino then reports
+it as fullscreen. Keep the normal window and stop drawing its frame:
+
+1. After the window exists, add `WS_CAPTION | WS_THICKFRAME | WS_MINIMIZEBOX |
+   WS_MAXIMIZEBOX | WS_SYSMENU` to its style, and subclass it
+   (`SetWindowSubclass`). These styles are what make Windows treat it as a
+   normal window: Aero Snap, Win+arrows, the shadow, the rounded corners on
+   Windows 11.
+2. In the subclass, answer `WM_NCCALCSIZE` (with `wParam` true) with `0`, so
+   the whole window is client area and nothing of the frame is drawn. While
+   maximised (`IsZoomed`), set the proposed rect to the monitor's work area
+   first: a maximised window is larger than the monitor by the frame's
+   thickness, and the taskbar must stay visible.
+3. Answer `WM_NCACTIVATE` with `DefSubclassProc(h, msg, wParam, -1)`, so
+   Windows repaints no caption on activation.
+4. `DwmExtendFrameIntoClientArea` with a top margin of 1 keeps DWM drawing
+   the shadow. `DWMWA_WINDOW_CORNER_PREFERENCE = DWMWCP_ROUND` asks for the
+   rounded corners.
+5. Call `SetWindowPos(..., SWP_FRAMECHANGED | SWP_NOMOVE | SWP_NOSIZE |
+   SWP_NOZORDER)` to apply it.
+
+The WebView covers the whole window, so the window never sees the mouse. That
+is what `startDrag` and `startResize` are for. The page asks when the mouse
+goes down on its top bar or on a resize handle. On the window's thread, call
+`ReleaseCapture()`, then `SendMessage(hwnd, WM_NCLBUTTONDOWN, hit, cursor)`
+with `HTCAPTION` for a drag, or `HTTOP` / `HTBOTTOM` / `HTLEFT` / `HTRIGHT` /
+`HTTOPLEFT` / … for the edge. Windows then runs its own move or size loop,
+exactly as for a click on a real caption or border, and `SendMessage` returns
+when the mouse is released. Reply then. The page waits without a timeout, and a
+reply of `ok: false` makes it move or resize the window from JS instead.
+
+`describe`'s reply says `frame: "custom"` only when all of this was done. A
+Photino window on Linux or macOS keeps its native frame and says `"native"`, or
+leaves `frame` out.
 
 **`dialogs.saveFile`.** `kind` is the file type the caller is saving, `'csv'`
 or `'png'` today. `data` is the file's text for `csv` and the file's bytes,