Skip to content

Commit b099e2f

Browse files
authored
Add support for interactive panel docking (#4015)
* Add interactive panel docking * Preserve active tab when a panel group is docked * Add inter-panel gutter hover color * Code review fixes * More code review
1 parent 39656d4 commit b099e2f

File tree

9 files changed

+488
-63
lines changed

9 files changed

+488
-63
lines changed

editor/src/messages/portfolio/portfolio_message.rs

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
use super::document::utility_types::document_metadata::LayerNodeIdentifier;
2-
use super::utility_types::PanelGroupId;
2+
use super::utility_types::{DockingSplitDirection, PanelGroupId, PanelType};
33
use crate::messages::frontend::utility_types::{ExportBounds, FileType};
44
use crate::messages::portfolio::document::utility_types::clipboards::Clipboard;
55
use crate::messages::portfolio::utility_types::FontCatalog;
@@ -61,6 +61,11 @@ pub enum PortfolioMessage {
6161
LoadDocumentResources {
6262
document_id: DocumentId,
6363
},
64+
MoveAllPanelTabs {
65+
source_group: PanelGroupId,
66+
target_group: PanelGroupId,
67+
insert_index: usize,
68+
},
6469
MovePanelTab {
6570
source_group: PanelGroupId,
6671
target_group: PanelGroupId,
@@ -146,6 +151,12 @@ pub enum PortfolioMessage {
146151
group: PanelGroupId,
147152
tab_index: usize,
148153
},
154+
SplitPanelGroup {
155+
target_group: PanelGroupId,
156+
direction: DockingSplitDirection,
157+
tabs: Vec<PanelType>,
158+
active_tab_index: usize,
159+
},
149160
SelectDocument {
150161
document_id: DocumentId,
151162
},

editor/src/messages/portfolio/portfolio_message_handler.rs

Lines changed: 94 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -460,6 +460,59 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageContext<'_>> for Portfolio
460460
self.load_document(new_document, document_id, responses, false);
461461
responses.add(PortfolioMessage::SelectDocument { document_id });
462462
}
463+
PortfolioMessage::MoveAllPanelTabs {
464+
source_group,
465+
target_group,
466+
insert_index,
467+
} => {
468+
if source_group == target_group {
469+
return;
470+
}
471+
472+
let Some(source_state) = self.workspace_panel_layout.panel_group(source_group) else { return };
473+
let tabs: Vec<PanelType> = source_state.tabs.clone();
474+
let source_active_tab_index = source_state.active_tab_index;
475+
if tabs.is_empty() {
476+
return;
477+
}
478+
479+
// Validate that the target group exists before modifying the source
480+
if self.workspace_panel_layout.panel_group(target_group).is_none() {
481+
log::error!("Target panel group {target_group:?} not found");
482+
return;
483+
}
484+
485+
// Destroy layouts for all moved tabs and the displaced target tab
486+
for &panel_type in &tabs {
487+
Self::destroy_panel_layouts(panel_type, responses);
488+
}
489+
if let Some(old_target_panel) = self.workspace_panel_layout.panel_group(target_group).and_then(|g| g.active_panel_type()) {
490+
Self::destroy_panel_layouts(old_target_panel, responses);
491+
}
492+
493+
// Clear the source group
494+
if let Some(source) = self.workspace_panel_layout.panel_group_mut(source_group) {
495+
source.tabs.clear();
496+
source.active_tab_index = 0;
497+
}
498+
499+
// Insert all tabs into the target group, preserving which tab was active in the source
500+
if let Some(target) = self.workspace_panel_layout.panel_group_mut(target_group) {
501+
let index = insert_index.min(target.tabs.len());
502+
target.tabs.splice(index..index, tabs.iter().copied());
503+
target.active_tab_index = index + source_active_tab_index.min(tabs.len().saturating_sub(1));
504+
}
505+
506+
self.workspace_panel_layout.prune();
507+
508+
responses.add(MenuBarMessage::SendLayout);
509+
responses.add(PortfolioMessage::UpdateWorkspacePanelLayout);
510+
511+
// Refresh the new active tab
512+
if let Some(panel_type) = self.workspace_panel_layout.panel_group(target_group).and_then(|g| g.active_panel_type()) {
513+
self.refresh_panel_content(panel_type, responses);
514+
}
515+
}
463516
PortfolioMessage::MovePanelTab {
464517
source_group,
465518
target_group,
@@ -1222,6 +1275,45 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageContext<'_>> for Portfolio
12221275
}
12231276
}
12241277
}
1278+
PortfolioMessage::SplitPanelGroup {
1279+
target_group,
1280+
direction,
1281+
tabs,
1282+
active_tab_index,
1283+
} => {
1284+
// Destroy layouts for the dragged tabs and the target group's active panel (it may get remounted by the frontend)
1285+
for &panel_type in &tabs {
1286+
Self::destroy_panel_layouts(panel_type, responses);
1287+
}
1288+
if let Some(target_active) = self.workspace_panel_layout.panel_group(target_group).and_then(|g| g.active_panel_type()) {
1289+
Self::destroy_panel_layouts(target_active, responses);
1290+
}
1291+
1292+
// Remove the dragged tabs from their current panel groups (without pruning, so the target group survives)
1293+
for &panel_type in &tabs {
1294+
self.remove_panel_from_layout(panel_type);
1295+
}
1296+
1297+
// Create the new panel group adjacent to the target, then prune empty groups
1298+
let Some(new_id) = self.workspace_panel_layout.split_panel_group(target_group, direction, tabs.clone(), active_tab_index) else {
1299+
log::error!("Failed to insert split adjacent to panel group {target_group:?}");
1300+
return;
1301+
};
1302+
self.workspace_panel_layout.prune();
1303+
1304+
responses.add(MenuBarMessage::SendLayout);
1305+
responses.add(PortfolioMessage::UpdateWorkspacePanelLayout);
1306+
1307+
// Refresh the new panel group's active tab
1308+
if let Some(panel_type) = self.workspace_panel_layout.panel_group(new_id).and_then(|g| g.active_panel_type()) {
1309+
self.refresh_panel_content(panel_type, responses);
1310+
}
1311+
1312+
// Refresh the target group's active panel since its component may have been remounted
1313+
if let Some(target_active) = self.workspace_panel_layout.panel_group(target_group).and_then(|g| g.active_panel_type()) {
1314+
self.refresh_panel_content(target_active, responses);
1315+
}
1316+
}
12251317
PortfolioMessage::SelectDocument { document_id } => {
12261318
// Auto-save the document we are leaving
12271319
let mut node_graph_open = false;
@@ -1667,7 +1759,7 @@ impl PortfolioMessageHandler {
16671759
selected_nodes.first().copied()
16681760
}
16691761

1670-
/// Remove a dockable panel type from whichever panel group currently contains it, then prune empty groups.
1762+
/// Remove a dockable panel type from whichever panel group currently contains it. Does not prune empty groups.
16711763
fn remove_panel_from_layout(&mut self, panel_type: PanelType) {
16721764
// Save the panel's current position so it can be restored there later
16731765
self.workspace_panel_layout.save_panel_position(panel_type);
@@ -1678,8 +1770,6 @@ impl PortfolioMessageHandler {
16781770
group.tabs.retain(|&t| t != panel_type);
16791771
group.active_tab_index = group.active_tab_index.min(group.tabs.len().saturating_sub(1));
16801772
}
1681-
1682-
self.workspace_panel_layout.prune();
16831773
}
16841774

16851775
/// Toggle a dockable panel on or off. When toggling off, refresh the newly active tab in its panel group (if any).
@@ -1689,6 +1779,7 @@ impl PortfolioMessageHandler {
16891779
let was_visible = self.workspace_panel_layout.panel_group(group_id).is_some_and(|g| g.is_visible(panel_type));
16901780
Self::destroy_panel_layouts(panel_type, responses);
16911781
self.remove_panel_from_layout(panel_type);
1782+
self.workspace_panel_layout.prune();
16921783

16931784
// If the removed panel was the active tab, refresh whichever panel is now active in that panel group
16941785
if was_visible && let Some(new_active) = self.workspace_panel_layout.panel_group(group_id).and_then(|g| g.active_panel_type()) {

editor/src/messages/portfolio/utility_types.rs

Lines changed: 96 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,16 @@ impl From<String> for PanelType {
112112
#[derive(Clone, Copy, Debug, Default, PartialEq, Eq, Hash, serde::Serialize, serde::Deserialize)]
113113
pub struct PanelGroupId(pub u64);
114114

115+
/// Which edge of a panel group to split on when docking a dragged panel.
116+
#[cfg_attr(feature = "wasm", derive(tsify::Tsify))]
117+
#[derive(Clone, Copy, Debug, PartialEq, Eq, serde::Serialize, serde::Deserialize)]
118+
pub enum DockingSplitDirection {
119+
Left,
120+
Right,
121+
Top,
122+
Bottom,
123+
}
124+
115125
/// State of a single panel group (leaf subdivision) in the workspace layout tree.
116126
#[cfg_attr(feature = "wasm", derive(tsify::Tsify), tsify(large_number_types_as_bigints))]
117127
#[derive(Clone, Debug, Default, PartialEq, serde::Serialize, serde::Deserialize)]
@@ -207,6 +217,26 @@ impl WorkspacePanelLayout {
207217
self.root.prune();
208218
}
209219

220+
/// Split a panel group by inserting a new panel group adjacent to it.
221+
/// The direction determines where the new group goes relative to the target.
222+
/// Left/Right creates a horizontal (row) split, Top/Bottom creates a vertical (column) split.
223+
/// Returns the ID of the newly created panel group, or `None` if insertion failed.
224+
pub fn split_panel_group(&mut self, target_group_id: PanelGroupId, direction: DockingSplitDirection, tabs: Vec<PanelType>, active_tab_index: usize) -> Option<PanelGroupId> {
225+
let new_id = self.next_id();
226+
let new_group = SplitChild {
227+
subdivision: PanelLayoutSubdivision::PanelGroup {
228+
id: new_id,
229+
state: PanelGroupState { tabs, active_tab_index },
230+
},
231+
size: 50.,
232+
};
233+
234+
let insert_before = matches!(direction, DockingSplitDirection::Left | DockingSplitDirection::Top);
235+
let needs_horizontal = matches!(direction, DockingSplitDirection::Left | DockingSplitDirection::Right);
236+
237+
self.root.insert_split_adjacent(target_group_id, new_group, insert_before, needs_horizontal, 0).then_some(new_id)
238+
}
239+
210240
/// Recalculate the default sizes for all splits in the tree based on document panel proximity.
211241
pub fn recalculate_default_sizes(&mut self) {
212242
self.root.recalculate_default_sizes();
@@ -409,23 +439,78 @@ impl PanelLayoutSubdivision {
409439
}
410440
}
411441

412-
/// Remove empty panel groups and collapse single-child splits.
442+
/// Remove empty panel groups and collapse unnecessary nesting.
443+
/// Does NOT collapse single-child splits into their child, as that would change subdivision depths
444+
/// and break the direction-by-depth alternation system.
413445
pub fn prune(&mut self) {
414-
if let PanelLayoutSubdivision::Split { children } = self {
415-
// Recursively prune children first
416-
children.iter_mut().for_each(|child| child.subdivision.prune());
446+
let PanelLayoutSubdivision::Split { children } = self else { return };
417447

418-
// Remove empty panel groups
419-
children.retain(|child| !matches!(&child.subdivision, PanelLayoutSubdivision::PanelGroup { state, .. } if state.tabs.is_empty()));
448+
// Recursively prune children
449+
children.iter_mut().for_each(|child| child.subdivision.prune());
420450

421-
// Remove empty splits (splits that lost all their children after pruning)
422-
children.retain(|child| !matches!(&child.subdivision, PanelLayoutSubdivision::Split { children } if children.is_empty()));
451+
// Remove empty panel groups
452+
children.retain(|child| !matches!(&child.subdivision, PanelLayoutSubdivision::PanelGroup { state, .. } if state.tabs.is_empty()));
423453

424-
// If a split has exactly one child, replace this subdivision with that child's subdivision
425-
if children.len() == 1 {
426-
*self = children.remove(0).subdivision;
454+
// Remove empty splits (splits that lost all their children after pruning)
455+
children.retain(|child| !matches!(&child.subdivision, PanelLayoutSubdivision::Split { children } if children.is_empty()));
456+
}
457+
458+
/// Check if this subtree contains a panel group with the given ID.
459+
pub fn contains_group(&self, target_id: PanelGroupId) -> bool {
460+
match self {
461+
PanelLayoutSubdivision::PanelGroup { id, .. } => *id == target_id,
462+
PanelLayoutSubdivision::Split { children } => children.iter().any(|child| child.subdivision.contains_group(target_id)),
463+
}
464+
}
465+
466+
/// Inserts a new split child adjacent to a target panel group and returns whether the insertion was successful.
467+
/// Recurses to the deepest split closest to the target that matches the requested split direction.
468+
/// If the target is a direct child of a mismatched-direction split, this wraps it in a new sub-split.
469+
pub fn insert_split_adjacent(&mut self, target_id: PanelGroupId, new_child: SplitChild, insert_before: bool, needs_horizontal: bool, depth: usize) -> bool {
470+
let PanelLayoutSubdivision::Split { children } = self else { return false };
471+
472+
let is_horizontal = depth.is_multiple_of(2);
473+
let direction_matches = is_horizontal == needs_horizontal;
474+
475+
// Find which child subtree contains the target
476+
let Some(containing_index) = children.iter().position(|child| child.subdivision.contains_group(target_id)) else {
477+
return false;
478+
};
479+
480+
// If the target is a direct child: we can certainly insert the new split, either as a sibling (if direction matches) or wrapping the target in a new split (if direction is mismatched)
481+
let target_is_direct_child = matches!(&children[containing_index].subdivision, PanelLayoutSubdivision::PanelGroup { id, .. } if *id == target_id);
482+
if target_is_direct_child {
483+
// Direction matches and target is right here: insert as a sibling
484+
if direction_matches {
485+
let insert_index = if insert_before { containing_index } else { containing_index + 1 };
486+
children.insert(insert_index, new_child);
427487
}
488+
// Direction mismatch: wrap the target in a new sub-split (at depth+1, which has the opposite direction of this and thus is the requested direction)
489+
else {
490+
let old_child_subdivision = std::mem::replace(&mut children[containing_index].subdivision, PanelLayoutSubdivision::Split { children: vec![] });
491+
let old_child = SplitChild {
492+
subdivision: old_child_subdivision,
493+
size: 50.,
494+
};
495+
496+
if let PanelLayoutSubdivision::Split { children: sub_children } = &mut children[containing_index].subdivision {
497+
if insert_before {
498+
sub_children.push(new_child);
499+
sub_children.push(old_child);
500+
} else {
501+
sub_children.push(old_child);
502+
sub_children.push(new_child);
503+
}
504+
}
505+
}
506+
507+
return true;
428508
}
509+
510+
// The target is deeper, so recurse into the containing child's subtree and return its insertion outcome
511+
children[containing_index]
512+
.subdivision
513+
.insert_split_adjacent(target_id, new_child.clone(), insert_before, needs_horizontal, depth + 1)
429514
}
430515

431516
/// Check if this subtree contains the document panel.

frontend/src/components/window/MainWindow.svelte

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -54,30 +54,6 @@
5454
5555
.workspace {
5656
position: relative;
57-
flex: 1 1 100%;
58-
59-
.workspace-grid-subdivision {
60-
position: relative;
61-
flex: 1 1 0;
62-
min-height: 28px;
63-
64-
&.folded {
65-
flex-grow: 0;
66-
height: 0;
67-
}
68-
}
69-
70-
.workspace-grid-resize-gutter {
71-
flex: 0 0 4px;
72-
73-
&.layout-row {
74-
cursor: ns-resize;
75-
}
76-
77-
&.layout-col {
78-
cursor: ew-resize;
79-
}
80-
}
8157
}
8258
8359
// Needed for the viewport hole punch on desktop

0 commit comments

Comments
 (0)