Focus Mode: Fullscreen

[minthemiddle]

Switch to fullscreen when in focus mode.

[minthemiddle]

From the docs:

setFullscreen()

setFullscreen(fullscreen): Promise<void>

Sets the window fullscreen state.
Parameters
Parameter	Type	Description
fullscreen	boolean	Whether the window should go to fullscreen or not.
Returns

Promise<void>

A promise indicating the success or failure of the operation.
Example

import { getCurrentWindow } from '@tauri-apps/api/window';
await getCurrentWindow().setFullscreen(true);

Source: https://github.com/tauri-apps/tauri/blob/dev/packages/api/src/window.ts#L1380

[isFullscreen()](https://tauri.app/reference/javascript/api/namespacewindow/#isfullscreen)

isFullscreen(): Promise<boolean>

Gets the window’s current fullscreen state.
[Returns](https://tauri.app/reference/javascript/api/namespacewindow/#returns-17)

[Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)<boolean>

Whether the window is in fullscreen mode or not.
[Example](https://tauri.app/reference/javascript/api/namespacewindow/#example-14)

import { getCurrentWindow } from '@tauri-apps/api/window';
const fullscreen = await getCurrentWindow().isFullscreen();

Source: https://github.com/tauri-apps/tauri/blob/dev/packages/api/src/window.ts#L604

[minthemiddle]

How to implement fullscreen in Tauri v2 (not documented nicely in Tauri's docs):

Key Components and How They Work Together:

1. src/main.js (JavaScript/Frontend):

   • toggleFocusMode() Function: This function is the core of the fullscreen implementation.
     • It toggles a focusModeEnabled boolean variable.
     • It uses window.__TAURI__.window.getCurrentWindow() to get a reference to the current Tauri window.
     • It calls window.setFullscreen(focusModeEnabled) to switch the window to fullscreen (if focusModeEnabled is true) or back to windowed mode (if focusModeEnabled is false).
     • It updates the UI status to reflect the focus mode state.
   • handleFocusModeShortcut(event) Function: This function listens for the cmd+f (Mac) or ctrl+f (Windows) keyboard shortcut. When detected, it calls toggleFocusMode() to toggle the fullscreen state.
   • Event Listeners: The thoughtInputEl (the main text area) has event listeners for keydown to capture the focus mode shortcut and mousedown to prevent selection when in focus mode.
   • Focus Mode Restrictions: When focus mode is enabled, the code prevents editing, deletion, selection, and cut/copy/paste actions in the text area.

2. src-tauri/tauri.conf.json (Tauri Configuration):

   • app.security.capabilities: This section is crucial. It defines the permissions that the application has.
     • The main-capability is defined, and it includes the permission "core:window:allow-set-fullscreen". This permission is required for the setFullscreen function to work.

3. src-tauri/capabilities/main.json (Capability Definition):

   • This file defines the main-capability in more detail, specifying that it applies to the "main" window and includes the core:window:allow-set-fullscreen permission.

Implementation Steps:

1. Configure Tauri:

   • Ensure your src-tauri/tauri.conf.json file has the main-capability defined in the app.security.capabilities array, and that this capability includes the core:window:allow-set-fullscreen permission.
   • Make sure the src-tauri/capabilities/main.json file exists and correctly defines the main-capability with the core:window:allow-set-fullscreen permission.

2. Implement the Toggle Logic:

   • In your frontend JavaScript (like src/main.js), use window.__TAURI__.window.getCurrentWindow() to get the current window object.
   • Create a function (like toggleFocusMode()) that:
     • Toggles a boolean variable to track the fullscreen state.
     • Calls window.setFullscreen(true) to enter fullscreen or window.setFullscreen(false) to exit fullscreen, based on the boolean variable.
   • Add an event listener for a keyboard shortcut (like cmd+f or ctrl+f) to trigger the toggle function.

3. Handle Focus Mode Restrictions (Optional):

   • If you want to prevent editing while in fullscreen, add event listeners to the input element to prevent keyboard input, mouse selection, and cut/copy/paste actions.

In Summary:

The key to implementing fullscreen in Tauri v2 is:

• Permission: You must include the core:window:allow-set-fullscreen permission in your Tauri configuration.
• API: Use window.setFullscreen(true) and window.setFullscreen(false) from the @tauri-apps/api/window to control the fullscreen state.
• Window Object: Get the current window object using window.__TAURI__.window.getCurrentWindow().