Skip to content

7. Window Management

Jump to bottom
FerrisMind edited this page Sep 10, 2025 · 1 revision

Window Management

Table of Contents

  1. Introduction
  2. Window Configuration
  3. Draggable Header Implementation
  4. Window Control Buttons
  5. Styling Options
  6. Drag Regions
  7. Customization Guide

Introduction

This document provides comprehensive documentation for the window management features in the Oxide-Lab application. It covers the implementation of draggable headers, window control buttons, styling options, and drag regions. The application uses Tauri for desktop window management, enabling custom window controls and drag functionality through configuration and permissions.

Window Configuration

The window management system is configured through Tauri's configuration files, which define window properties, permissions, and capabilities. The main window is configured with specific dimensions and custom decorations.

``mermaid graph TD A[Tauri Configuration] --> B[Window Settings] A --> C[Capabilities] B --> D[Title: Oxide Lab] B --> E[Decorations: false] B --> F[Size: 1280x720] B --> G[Minimum Size: 640x360] C --> H[Window Permissions] H --> I[Allow Close] H --> J[Allow Minimize] H --> K[Allow Maximize] H --> L[Allow Start Dragging]


**Diagram sources**
- [tauri.conf.json](file://src-tauri/tauri.conf.json)
- [default.json](file://src-tauri/capabilities/default.json)

**Section sources**
- [tauri.conf.json](file://src-tauri/tauri.conf.json#L1-L52)
- [default.json](file://src-tauri/capabilities/default.json#L1-L15)

## Draggable Header Implementation
The draggable header functionality is enabled through Tauri's window management system. When window decorations are disabled, the application can implement custom drag regions that allow users to move the window by clicking and dragging specific areas.

The draggable functionality is controlled by the `core:window:allow-start-dragging` permission in the capabilities configuration. This permission enables the window to respond to drag events from designated regions in the UI.

``mermaid
sequenceDiagram
participant User
participant UI as UI Component
participant Tauri as Tauri Core
participant Window as OS Window
User->>UI : Click and hold on header area
UI->>Tauri : Request drag operation
Tauri->>Window : Initiate window drag
Window->>User : Move window with cursor
User->>Window : Release mouse button
Window->>Tauri : Complete drag operation

Diagram sources

  • default.json
  • tauri.conf.json

Section sources

  • default.json

Window Control Buttons

Window control buttons (close, minimize, maximize) are managed through Tauri's permission system. The application has explicit permissions for window control operations, which are defined in the capabilities configuration.

The following permissions are available for window control:

  • core:window:allow-close: Enables closing the window
  • core:window:allow-minimize: Enables minimizing the window
  • core:window:allow-maximize: Enables maximizing the window
  • core:window:allow-unmaximize: Enables restoring the window from maximized state

These permissions work in conjunction with the custom UI implementation to provide window control functionality while maintaining a custom window appearance.

``mermaid classDiagram class WindowControls { +closeWindow() +minimizeWindow() +maximizeWindow() +unmaximizeWindow() } class Permissions { +allowClose +allowMinimize +allowMaximize +allowUnmaximize +allowStartDragging } class Configuration { +windowTitle +decorations +width +height +minWidth +minHeight } WindowControls --> Permissions : "requires" Permissions --> Configuration : "defined in"


**Diagram sources**
- [default.json](file://src-tauri/capabilities/default.json#L1-L15)
- [tauri.conf.json](file://src-tauri/tauri.conf.json#L1-L52)

**Section sources**
- [default.json](file://src-tauri/capabilities/default.json#L1-L15)

## Styling Options
The window styling is configured to provide a custom appearance by disabling native window decorations. This allows the application to implement its own title bar and window controls with a consistent design language.

Key styling configuration options include:
- **decorations: false**: Disables native window borders and controls
- Custom title bar implementation in the application UI
- Consistent theme with the application's overall design

The Tauri configuration sets `decorations: false` in the window configuration, which removes the standard window frame and allows the web content to provide the entire window interface.

**Section sources**
- [tauri.conf.json](file://src-tauri/tauri.conf.json#L1-L52)

## Drag Regions
Drag regions are implemented through Tauri's window dragging permission system. The `core:window:allow-start-dragging` permission enables specific areas of the window to function as drag handles.

When this permission is granted, any element in the web interface can be used as a drag region. Typically, this is implemented on the header or title bar area of the application, allowing users to drag the window by clicking and holding on this region.

The drag functionality works as follows:
1. User clicks on a designated drag region (typically the header)
2. The browser sends a drag event to Tauri
3. Tauri initiates a native window drag operation
4. The window follows the cursor until the mouse button is released

This approach provides a seamless drag experience while maintaining the custom window appearance.

**Section sources**
- [default.json](file://src-tauri/capabilities/default.json#L1-L15)

## Customization Guide
To customize window management features in the application, modify the configuration files in the `src-tauri` directory.

### Customizing Window Controls
To modify window control behavior, adjust the permissions in the capability files:

1. Edit the capability JSON file (e.g., `default.json`)
2. Add or remove window permissions as needed:
   - Remove `core:window:allow-close` to disable closing
   - Remove `core:window:allow-minimize` to prevent minimizing
   - Remove `core:window:allow-maximize` to prevent maximizing

### Customizing Drag Regions
To configure drag regions:

1. Ensure `core:window:allow-start-dragging` permission is present
2. Designate UI elements as drag regions in the frontend code
3. The entire area where this functionality is desired should respond to drag events

### Customizing Window Appearance
To modify window styling and dimensions:

1. Edit `tauri.conf.json`
2. Modify window properties:
   - Change `title` to update the window title
   - Adjust `width` and `height` for default size
   - Modify `minWidth` and `minHeight` for minimum dimensions
   - Set `decorations` to `true` to restore native window controls

These customizations allow for extensive control over the window management experience while maintaining the application's custom design.

**Section sources**
- [tauri.conf.json](file://src-tauri/tauri.conf.json#L1-L52)
- [default.json](file://src-tauri/capabilities/default.json#L1-L15)

**Referenced Files in This Document**   
- [default.json](file://src-tauri/capabilities/default.json)
- [tauri.conf.json](file://src-tauri/tauri.conf.json)

Clone this wiki locally