Window Management

Overview

Linch Desktop Core provides a complete multi-window management solution, including window creation, inter-window communication, and event listening.

Window Management API

createWindow

Create a new window.

import { createWindow } from '@linch-tech/desktop-core';

const editorWindow = await createWindow('editor', {
  url: '/editor',
  title: 'Editor',
  width: 800,
  height: 600,
  center: true,
});

Signature

function createWindow(label: string, options?: WindowOptions): Promise<WebviewWindow>

WindowOptions

Field	Type	Default	Description
`url`	`string`	-	URL to load in the window
`title`	`string`	-	Window title
`width`	`number`	-	Window width
`height`	`number`	-	Window height
`x`	`number`	-	Window X position
`y`	`number`	-	Window Y position
`resizable`	`boolean`	`true`	Whether the window is resizable
`decorations`	`boolean`	`true`	Whether to show system decorations
`center`	`boolean`	`false`	Whether to center the window

getWindow

Get a reference to an existing window.

import { getWindow } from '@linch-tech/desktop-core';

const win = getWindow('editor');
if (win) {
  await win.setFocus();
}

closeWindowByLabel

Close a specific window.

import { closeWindowByLabel } from '@linch-tech/desktop-core';

await closeWindowByLabel('editor');

getAllWindows

Get a list of all open windows.

import { getAllWindows } from '@linch-tech/desktop-core';

const windows = getAllWindows();
console.log(`${windows.length} windows open`);

Inter-Window Communication

sendToWindow

Send an event to a specific window.

import { sendToWindow } from '@linch-tech/desktop-core';

await sendToWindow('editor', 'file-opened', {
  path: '/data/document.txt',
  content: 'File content...',
});

Signature

function sendToWindow(label: string, event: string, payload: unknown): Promise<void>

useWindowEvent

Listen for events from other windows in a React component, with automatic cleanup on unmount.

import { useWindowEvent } from '@linch-tech/desktop-core';

function EditorPage() {
  useWindowEvent<{ path: string; content: string }>('file-opened', (payload) => {
    setFilePath(payload.path);
    setContent(payload.content);
  });

  return <div>...</div>;
}

Signature

function useWindowEvent<T = unknown>(
  event: string,
  handler: (payload: T) => void
): void

useBroadcast

Broadcast events to all windows.

import { useBroadcast } from '@linch-tech/desktop-core';

function MainWindow() {
  const { broadcast } = useBroadcast();

  const handleThemeChange = async (theme: string) => {
    await broadcast('theme-changed', { theme });
  };

  return <ThemeSwitcher onChange={handleThemeChange} />;
}

Signature

function useBroadcast(): {
  broadcast: (event: string, payload: unknown) => Promise<void>;
}

Full Example

import { createWindow, sendToWindow, useWindowEvent, useBroadcast } from '@linch-tech/desktop-core';

// Main window
function MainWindow() {
  const { broadcast } = useBroadcast();

  const openEditor = async () => {
    await createWindow('editor', {
      url: '/editor',
      width: 800,
      height: 600,
    });
    // Send data after window is ready
    setTimeout(() => {
      sendToWindow('editor', 'load-file', { id: 123 });
    }, 500);
  };

  return <button onClick={openEditor}>Open Editor</button>;
}

// Editor window
function EditorWindow() {
  const [fileId, setFileId] = useState<number | null>(null);

  useWindowEvent<{ id: number }>('load-file', (payload) => {
    setFileId(payload.id);
  });

  return <div>Editing file #{fileId}</div>;
}

Window Management

On this page