Workspace Layout & Multi-Window

StoryFlow Editor uses a flexible docking system. Tabs live in groups you can split, rearrange, tear off into their own windows, and drag between windows - so you can lay out your scripts, Content Browsers, and tools exactly the way you work.

Overview

Every panel in the editor - script editors, the Content Browser, Global Search, and others - is a tab. Tabs are arranged into tab groups, and groups can be split horizontally or vertically to put two panels side by side. The default workspace is a single main group on top with a Content Browser docked in a group below it.

What the docking system lets you do:

• Tear off a tab into a brand-new editor window by dragging it out of its strip.
• Open multiple Content Browsers in one window to browse two folders at once.
• Drag tabs between windows, with a live preview that follows your cursor across monitors.
• Keep each tab's view state - content, selection, search - when it moves to another window.
• Reset everything back to the default layout with a single menu action.

Tabs, Groups & Splits

Tabs sit in a strip at the top of their group. You can:

• Reorder tabs within a strip by dragging them left or right - neighboring tabs slide aside to make room.
• Move a tab to another group by dragging it onto that group. Drop zones light up to show where the tab will land.
• Create a split by dragging a tab to the top, bottom, left, or right edge of a group - the group divides and the tab opens in the new half.
• Resize groups by dragging the divider between them.

Tearing a Tab Into a New Window

Any detachable tab can become its own editor window. This is the fastest way to put two scripts side by side, move a Content Browser onto a second monitor, or pull a tool out of your way.

1. Press and hold on a tab, then start dragging it.
2. While your cursor stays inside the tab strip, the drag behaves like a reorder - tabs shuffle to show the new position.
3. Once your cursor leaves the strip, the dragged tab detaches from the row and a floating preview follows your cursor freely in any direction.
4. When the tab is detachable and you are not hovering a dock target, a "New Window" badge appears next to the preview.
5. Release over empty desktop space (or another monitor) to spawn a new editor window containing that tab.

How the Tear-Off Gesture Works

The gesture is modeled on browser tab tear-off. While the cursor is inside the origin strip, the drag is clamped to the horizontal axis and reorders siblings. The moment the cursor crosses outside the strip's bounds, the siblings freeze and the preview switches to free 2D movement - that single boundary is what decides whether you are reordering or tearing off. Because the same threshold drives the visual cues and the drop decision, releasing while the free-floating preview is showing always detaches.

Which tabs can be torn off:

• Script, character, image, markdown, and other file tabs detach into a new editor window.
• Content Browser tabs detach as well - the same outcome as the Window → Open Content Browser in New Window menu action, just driven by the drag gesture.

Move Window vs. New Window

If the tab you drag out is the only tab in the entire window (no other tabs and no splits), tearing it off would just recreate an identical window. Instead, the editor takes a shortcut: it moves the existing window to your cursor rather than destroying it and building a new one. In this case the preview badge reads "Move Window" instead of "New Window".

The window lands so the tab stays under your cursor at the same spot you grabbed it. A maximized window restores to a normal size first, then moves. (A full-screen window falls back to spawning a fresh window, since "moving" it would be jarring.) Because nothing is recreated, your file, its unsaved changes, and your undo history are all preserved exactly.

Multiple Content Browsers

You can have two independent Content Browser instances open per window, labeled Content Browser 1 and Content Browser 2 in the Window menu. Open them from Window → Content Browser 1 / Window → Content Browser 2, then split the window to view both at once - handy for dragging assets from one folder to another, or keeping a reference folder pinned while you work elsewhere.

Each Content Browser keeps its own view state, completely isolated from the other:

• Current folder and navigation history (back/forward)
• Search query
• Selected files and folders
• Thumbnail/item size
• Expanded folders in the tree view

The project-wide things - your favorites, folder colors, and the set of open files - are shared, so both browsers always agree on the project itself. Only the per-view bits above differ between the two.

Dragging Tabs Across Windows

Tabs aren't trapped in the window they were born in. With two or more editor windows open for the same project, you can drag a tab out of one window and drop it onto another. As your cursor enters the destination window's tab strip or a dockable region, that window's drop zones light up to show where the tab will land:

• Onto a tab strip: a gap opens at the cursor's insertion point and neighboring tabs slide aside, just like reordering within a strip. Drop to insert at that exact position.
• Onto an edge (top / bottom / left / right): the destination group splits and the tab docks into the new half.

Drop the tab and it transfers to the destination window. If the cursor doesn't land on any window's dock zone, the tab detaches into a new window instead (see Tearing a Tab Into a New Window).

The Drag Preview

While you drag a tab outside its source window - over another window, across a gap between monitors, or onto empty desktop - a small floating preview of the tab follows your cursor. It carries the tab's icon and title and shows the same "New Window" / "Move Window" hint badge as an in-window tear-off, so the drag feels continuous even as the cursor leaves the window it started in.

Preserved View State on Detach

Moving a tab to another window - by tear-off or cross-window drop - carries its state with it. Nothing is lost in the move:

• File tabs keep their content and their unsaved-changes mark. A file with edits you haven't saved arrives in the new window still dirty, with those edits intact - it is never silently saved or reset to disk.
• Script (.sfe) tabs additionally carry the currently selected node or variable and which Details sub-view was showing, so the right-hand panel looks the same after the move.
• Content Browser tabs carry their full view state - folder, search, selection, item size, expanded folders, and lock setting.
• Logs and Settings tabs carry their search box and a few in-panel toggles across the move.
• Global Search and References tabs keep their active query/target, because that state is held centrally and re-read when the panel mounts in the new window.

Window → Reset Layout

Rearranged your workspace into a corner you can't get out of? Window → Reset Layout rebuilds the default layout - without restarting the app. It mirrors the "Reset Layout" command you may know from Unreal Engine.

What Reset Layout does:

• Consolidates your windows. Every other editor window for the project hands its tabs back to the main window and closes. Each closing window transfers its live content first, so a file open (and edited) in a detached window keeps its content and unsaved-changes mark - even an unsaved file is preserved, not discarded.
• Re-docks your open files into the main tab group of the surviving window.
• Restores the default arrangement - the main group with a Content Browser docked below - and snaps panel sizes back to their defaults.
• Resets the inner script panels too. A script editor's inner layout - Variables, Flows, Canvas, and Details - returns to its default arrangement, undoing any panels you closed, merged, or resized inside the editor.

Tips & Notes

• Telling windows apart: each window's title (in Alt+Tab, the taskbar, and the OS window menu) reflects the active tab of its main group, so two editor windows show different names. Two Content Browser windows stay distinguishable by their 1 / 2 instance number.
• Same project, many windows: all open editor windows share the same project. Detaching and re-docking move panels around - they don't open a second project.
• Layout is saved automatically: there's no "save layout" button. Splits, tab placement, and the active tab are persisted and rebuilt next session. Unrecognized leftovers from an older version are skipped so the layout still loads.
• Cancel a drag: press Esc mid-drag to abort - the tab snaps back and nothing moves.