# How Draw.io Desktop Implements Window Management with Multiple Displays

> Discover how Draw.io Desktop manages multiple displays using Electron's screen module. Learn how it handles disconnected monitors and recenters windows for seamless multi-monitor setups.

- Repository: [draw.io/drawio-desktop](https://github.com/jgraph/drawio-desktop)
- Tags: internals
- Published: 2026-03-05

---

**Draw.io Desktop uses Electron's `screen` module in [`src/main/electron.js`](https://github.com/jgraph/drawio-desktop/blob/main/src/main/electron.js) to query display work-areas and validate saved window coordinates, automatically recentering windows on the primary display if a monitor is disconnected.**

Multi-monitor setups require robust window management to prevent applications from opening off-screen when displays are unplugged. The draw.io Desktop application, an Electron-based wrapper for the diagrams.net editor, implements sophisticated multi-display window management in [`src/main/electron.js`](https://github.com/jgraph/drawio-desktop/blob/main/src/main/electron.js) to ensure diagrams remain accessible across dynamic display topologies.

## Querying System Display Configuration with Electron's Screen Module

The foundation of draw.io Desktop's multi-display support relies on Electron's built-in `screen` module. Before creating any window, the application retrieves the current monitor layout to establish valid work boundaries.

According to the source code in [`src/main/electron.js`](https://github.com/jgraph/drawio-desktop/blob/main/src/main/electron.js), the app calls `screen.getAllDisplays()` to obtain an array of `Display` objects, each containing a `workArea` property defining the usable rectangle (x, y, width, height) of that monitor.

```javascript
const displays = screen.getAllDisplays(); // src/main/electron.js:L44-L45

```

Each `Display` object provides the coordinates necessary to determine whether a specific x/y position falls within visible screen real estate.

## Validating Window Positions Against Display Bounds

The core safety mechanism preventing off-screen windows is the `isWithinDisplayBounds` helper function. This utility iterates through all connected displays to verify whether a proposed window position resides within any monitor's work area.

As implemented in `src/main/electron.js:L42-L57`, the function performs a point-in-rectangle check against every available display:

```javascript
function isWithinDisplayBounds(pos) {
    const displays = screen.getAllDisplays();
    return displays.reduce((result, display) => {
        const area = display.workArea;
        return (
            result ||
            (pos.x >= area.x && pos.y >= area.y &&
            pos.x < area.x + area.width && pos.y < area.y + area.height)
        );
    }, false);
}

```

This validation runs before window instantiation, ensuring that cached coordinates from previous sessions are still valid under the current display configuration.

## Restoring Persisted Geometry While Handling Display Changes

Draw.io Desktop persists window size and position using `electron-store`, retrieving the last known dimensions from the `lastWinSize` key. However, simply restoring these coordinates risks placing the window on a disconnected monitor.

The application reads the stored string and splits it into width, height, x, and y components:

```javascript
let lastWinSizeStr = (store && store.get('lastWinSize')) || '1200,800,0,0,false,false';
let lastWinSize = lastWinSizeStr ? lastWinSizeStr.split(',') : [1200, 800];

```

Before passing these values to `BrowserWindow`, the code validates the position using `isWithinDisplayBounds`. If the coordinates fail validation—indicating the monitor was unplugged or the display layout changed—the x and y properties are nulled to force Electron to center the window on the primary display (see `src/main/electron.js:L59-L66`):

```javascript
if (!isWithinDisplayBounds(options)) {
    options.x = null;
    options.y = null;
}

```

Only after this clamping step does the application instantiate the window:

```javascript
let mainWindow = new BrowserWindow(options); // src/main/electron.js:L67-L68

```

## Managing Secondary Instances Across Multiple Displays

When users launch a second draw.io instance while one is already running, the application handles this via `app.requestSingleInstanceLock`. The `second-instance` event handler invokes the same `createWindow()` function, ensuring that new windows undergo identical display validation.

As shown in `src/main/electron.js:L95-L112`, this prevents secondary windows from opening off-screen when the original session was positioned on a monitor that is no longer connected:

```javascript
app.on('second-instance', (event, argv, cwd) => {
    // ... validation logic ...
    let win = createWindow();
    // ...
});

```

## Practical Code Examples for Multi-Display Workflows

**Opening a New Window with Automatic Display Validation**

When handling IPC messages for new files, the application uses `createWindow()` which internally applies the display bounds check:

```javascript
// Called from menu or IPC request
ipcMain.on('newfile', (e, arg) => {
    if (!validateSender(e.senderFrame)) return;
    const opts = {}; // width/height can be passed here
    createWindow(opts); // automatically clamps to visible displays
});

```

**Forcing a Window Onto a Specific Secondary Monitor**

To programmatically open a window on a secondary display, developers can calculate coordinates from `screen.getAllDisplays()`:

```javascript
const displays = screen.getAllDisplays();
const second = displays[1]; // assuming at least 2 monitors
const opts = {
    x: second.workArea.x + 50,
    y: second.workArea.y + 50,
    width: 1024,
    height: 768
};
createWindow(opts); // isWithinDisplayBounds will accept valid coordinates

```

**Re-centering When Saved Positions Become Invalid**

The defensive clamping logic ensures windows remain accessible:

```javascript
// Inside createWindow before BrowserWindow construction
if (!isWithinDisplayBounds(options)) {
    // Electron will center the window automatically
    delete options.x;
    delete options.y;
}

```

## Summary

- **Electron's `screen` module** provides the display topology via `getAllDisplays()` in [`src/main/electron.js`](https://github.com/jgraph/drawio-desktop/blob/main/src/main/electron.js)
- **`isWithinDisplayBounds`** validates coordinates against all connected monitor work areas
- **Automatic recentering** occurs when saved positions fall outside current display bounds
- **Secondary instances** undergo identical validation through the shared `createWindow()` function
- **`electron-store`** persists geometry, but coordinates are always verified before window creation

## Frequently Asked Questions

### How does draw.io Desktop prevent windows from opening off-screen?

The application uses the `isWithinDisplayBounds` function in [`src/main/electron.js`](https://github.com/jgraph/drawio-desktop/blob/main/src/main/electron.js) to check if saved coordinates from `electron-store` fall within any connected monitor's `workArea`. If not, it nulls the x and y coordinates, forcing Electron to center the window on the primary display.

### What happens when I open a second draw.io window after unplugging a monitor?

When handling the `second-instance` event, draw.io Desktop calls the same `createWindow()` function used for initial launches. This function validates coordinates against the current display configuration, automatically recentering the window if the original monitor is no longer available.

### Does draw.io Desktop remember which monitor I used last?

Yes, the application stores window size and position in the `lastWinSize` key using `electron-store`. However, before restoring these values, it validates them against the current display layout. If the specific monitor referenced by the saved coordinates is disconnected, the window opens centered on the primary display instead.

### Can I programmatically position draw.io Desktop windows on a specific display?

Yes. By accessing `screen.getAllDisplays()` from Electron's `screen` module, you can calculate coordinates relative to a specific monitor's `workArea` and pass them to `createWindow()`. The built-in validation will accept these coordinates if they fall within the specified display's bounds.