How Draw.io Desktop Implements Window Management with Multiple Displays

Draw.io Desktop uses Electron's screen module in 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 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, 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.

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:

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:

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):

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

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

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:

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:

// 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():

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:

// 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
• 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}