Preserve active tab when a panel group is docked

Author: Keavon

editor/src/messages/portfolio/portfolio_message.rs

@@ -155,6 +155,7 @@ pub enum PortfolioMessage {
 		target_group: PanelGroupId,
 		direction: DockingSplitDirection,
 		tabs: Vec<PanelType>,
+		active_tab_index: usize,
 	},
 	SelectDocument {
 		document_id: DocumentId,

editor/src/messages/portfolio/portfolio_message_handler.rs

@@ -471,6 +471,7 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageContext<'_>> for Portfolio
 
 				let Some(source_state) = self.workspace_panel_layout.panel_group(source_group) else { return };
 				let tabs: Vec<PanelType> = source_state.tabs.clone();
+				let source_active_tab_index = source_state.active_tab_index;
 				if tabs.is_empty() {
 					return;
 				}
@@ -489,13 +490,13 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageContext<'_>> for Portfolio
 					source.active_tab_index = 0;
 				}
 
-				// Insert all tabs into the target group
+				// Insert all tabs into the target group, preserving which tab was active in the source
 				if let Some(target) = self.workspace_panel_layout.panel_group_mut(target_group) {
 					let index = insert_index.min(target.tabs.len());
 					for (i, panel_type) in tabs.iter().enumerate() {
 						target.tabs.insert(index + i, *panel_type);
 					}
-					target.active_tab_index = index;
+					target.active_tab_index = index + source_active_tab_index.min(tabs.len().saturating_sub(1));
 				}
 
 				self.workspace_panel_layout.prune();
@@ -1270,7 +1271,12 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageContext<'_>> for Portfolio
 					}
 				}
 			}
-			PortfolioMessage::SplitPanelGroup { target_group, direction, tabs } => {
+			PortfolioMessage::SplitPanelGroup {
+				target_group,
+				direction,
+				tabs,
+				active_tab_index,
+			} => {
 				// Destroy layouts for the dragged tabs and the target group's active panel (it may get remounted by the frontend)
 				for &panel_type in &tabs {
 					Self::destroy_panel_layouts(panel_type, responses);
@@ -1285,7 +1291,7 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageContext<'_>> for Portfolio
 				}
 
 				// Create the new panel group adjacent to the target, then prune empty groups
-				let new_id = self.workspace_panel_layout.split_panel_group(target_group, direction, tabs.clone());
+				let new_id = self.workspace_panel_layout.split_panel_group(target_group, direction, tabs.clone(), active_tab_index);
 				self.workspace_panel_layout.prune();
 
 				responses.add(MenuBarMessage::SendLayout);

editor/src/messages/portfolio/utility_types.rs

@@ -221,12 +221,12 @@ impl WorkspacePanelLayout {
 	/// The direction determines where the new group goes relative to the target.
 	/// Left/Right creates a horizontal (row) split, Top/Bottom creates a vertical (column) split.
 	/// Returns the ID of the newly created panel group.
-	pub fn split_panel_group(&mut self, target_group_id: PanelGroupId, direction: DockingSplitDirection, tabs: Vec<PanelType>) -> PanelGroupId {
+	pub fn split_panel_group(&mut self, target_group_id: PanelGroupId, direction: DockingSplitDirection, tabs: Vec<PanelType>, active_tab_index: usize) -> PanelGroupId {
 		let new_id = self.next_id();
 		let new_group = SplitChild {
 			subdivision: PanelLayoutSubdivision::PanelGroup {
 				id: new_id,
-				state: PanelGroupState { tabs, active_tab_index: 0 },
+				state: PanelGroupState { tabs, active_tab_index },
 			},
 			size: 50.,
 		};

frontend/src/components/window/Panel.svelte

@@ -39,7 +39,7 @@
 	export let emptySpaceAction: (() => void) | undefined = undefined;
 	export let crossPanelDropAction: ((sourcePanelId: string, targetPanelId: string, insertIndex: number) => void) | undefined = undefined;
 	export let groupDropAction: ((sourcePanelId: string, targetPanelId: string, insertIndex: number) => void) | undefined = undefined;
-	export let splitDropAction: ((targetPanelId: string, direction: DockingEdge, tabs: PanelType[]) => void) | undefined = undefined;
+	export let splitDropAction: ((targetPanelId: string, direction: DockingEdge, tabs: PanelType[], activeTabIndex: number) => void) | undefined = undefined;
 
 	let className = "";
 	export { className as class };
@@ -199,7 +199,12 @@
 			}
 			// Edge docking drop: create a new split adjacent to the target panel
 			else if (crossPanelState.active && crossPanelState.hoverDockingPanelId && crossPanelState.hoverDockingEdge) {
-				splitDropAction?.(crossPanelState.hoverDockingPanelId, crossPanelState.hoverDockingEdge, crossPanelState.draggedTabs);
+				splitDropAction?.(
+					crossPanelState.hoverDockingPanelId,
+					crossPanelState.hoverDockingEdge,
+					crossPanelState.draggedTabs,
+					crossPanelState.draggingGroup ? crossPanelState.sourceTabIndex : 0,
+				);
 			}
 			// Cross-panel tab bar drop: insert as a tab in the target panel group
 			else if (

frontend/src/components/window/PanelSubdivision.svelte

@@ -150,8 +150,8 @@
 		editor.moveAllPanelTabs(BigInt(sourcePanelId), BigInt(targetPanelId), insertIndex);
 	}
 
-	function splitDrop(targetPanelId: string, direction: string, tabs: string[]) {
-		editor.splitPanelGroup(BigInt(targetPanelId), direction, tabs);
+	function splitDrop(targetPanelId: string, direction: string, tabs: string[], activeTabIndex: number) {
+		editor.splitPanelGroup(BigInt(targetPanelId), direction, tabs, activeTabIndex);
 	}
 
 	function isDocumentGroup(state: PanelGroupState): boolean {

frontend/wrapper/src/editor_wrapper.rs

@@ -474,13 +474,14 @@ impl EditorWrapper {
 	}
 
 	#[wasm_bindgen(js_name = splitPanelGroup)]
-	pub fn split_panel_group(&self, target_group: u64, direction: String, tabs: JsValue) {
+	pub fn split_panel_group(&self, target_group: u64, direction: String, tabs: JsValue, active_tab_index: usize) {
 		let direction: DockingSplitDirection = serde_wasm_bindgen::from_value(JsValue::from_str(&direction)).unwrap();
 		let tabs: Vec<PanelType> = serde_wasm_bindgen::from_value(tabs).unwrap();
 		let message = PortfolioMessage::SplitPanelGroup {
 			target_group: PanelGroupId(target_group),
 			direction,
 			tabs,
+			active_tab_index,
 		};
 		self.dispatch(message);
 	}