The Layout Engine

The Workbench Philosophy

Most web applications treat the screen as a static document. Python Online treats the screen as a Stage. The Layout Engine is responsible for managing a complex DOM tree containing heavy, stateful components without sacrificing performance.

We achieved this by building a custom, multi-pane window manager directly into the browser, giving you absolute control over how you view your code and data.

The 5-Zone Drop System

You can create highly customized layouts by dragging any tab header. When you drag a tab over an existing pane, the engine activates one of five hidden drop zones (blue overlay) based on your mouse position:

• Center Zone: Drop the tab in the middle of the pane to merge it into the existing tab group.
• Left / Right Zones: Drop the tab near the left or right edge to split the pane vertically, allowing you to view two files side-by-side.
• Top / Bottom Zones: Drop the tab near the top or bottom edge to split the pane horizontally.

The "Memory-First" Architecture

One of the most frustrating aspects of standard web apps is state loss. If you switch tabs in a normal browser app, the previous component is often destroyed to save memory, taking your scroll position and selection with it.

Python Online utilizes a Sibling Toggle Pattern to solve this:

1. When you open a file, a dedicated Monaco Editor instance is created and cached in memory.
2. When you click a different tab (e.g., switching from main.py to the REPL), the Layout Engine does not destroy your code editor.
3. Instead, it seamlessly unmounts it from the DOM or applies display: none, keeping the underlying memory state perfectly intact.

The Result: When you switch back to main.py, your cursor is blinking on the exact line you left it, your text selection is preserved, and your undo/redo history remains unaffected.

Focus Authority & Keyboard Sinks

In a multi-pane environment containing multiple text editors and terminals, managing where your keystrokes go is a complex challenge. If not handled correctly, you could accidentally delete code while trying to type in a terminal.

The Layout Engine acts as the absolute Focus Authority. It guarantees that only the active tab in the currently highlighted pane group is allowed to intercept keyboard inputs.

Everything is a Tab

To maximize flexibility, Python Online treats system utilities identically to code files. The Output Console, the Interactive REPL, the Bash Terminal, and the Problems (Linter) panel are all First-Class Tabs.

This means you can tear the Terminal out of its default group, drag it to the right side of your screen, and split it horizontally with the Output Console. You dictate the workspace.

Warm Boot Session Restore

Your layout configurations are valuable. Every time you move a tab, resize a pane gutter, or switch focus, the Layout Engine records a snapshot of the interface and syncs it to your browser's local storage.

If you accidentally close your browser, or shut down your computer for the night, returning to Python Online will trigger a Warm Boot. The engine reads the snapshot, reconstitutes the split-pane math, reopens your specific tabs, and places your focus exactly where you left off.