Desktop: Hook up native window controls (#3161)

* Implement window controls

* Fix drag target size

* Maximize with drag area double click

Author: timon-schelling

desktop/src/app.rs

@@ -164,6 +164,11 @@ impl WinitApp {
 					window.set_minimized(minimized);
 				}
 			}
+			DesktopFrontendMessage::DragWindow => {
+				if let Some(window) = &self.window {
+					let _ = window.drag_window();
+				}
+			}
 			DesktopFrontendMessage::CloseWindow => {
 				let _ = self.event_loop_proxy.send_event(CustomEvent::CloseWindow);
 			}
@@ -271,7 +276,9 @@ impl ApplicationHandler<CustomEvent> for WinitApp {
 		let mut window = Window::default_attributes()
 			.with_title(APP_NAME)
 			.with_min_inner_size(winit::dpi::LogicalSize::new(400, 300))
-			.with_inner_size(winit::dpi::LogicalSize::new(1200, 800));
+			.with_inner_size(winit::dpi::LogicalSize::new(1200, 800))
+			.with_decorations(false)
+			.with_resizable(true);
 
 		#[cfg(target_os = "linux")]
 		{

desktop/wrapper/src/intercept_frontend_message.rs

@@ -70,6 +70,9 @@ pub(super) fn intercept_frontend_message(dispatcher: &mut DesktopWrapperMessageD
 			// Forward this to update the UI
 			return Some(message);
 		}
+		FrontendMessage::DragWindow => {
+			dispatcher.respond(DesktopFrontendMessage::DragWindow);
+		}
 		FrontendMessage::CloseWindow => {
 			dispatcher.respond(DesktopFrontendMessage::CloseWindow);
 		}

desktop/wrapper/src/messages.rs

@@ -36,6 +36,8 @@ pub enum DesktopFrontendMessage {
 		maximized: bool,
 		minimized: bool,
 	},
+	DragWindow,
+	CloseWindow,
 	PersistenceWriteDocument {
 		id: DocumentId,
 		document: Document,
@@ -55,7 +57,6 @@ pub enum DesktopFrontendMessage {
 		preferences: Preferences,
 	},
 	PersistenceLoadPreferences,
-	CloseWindow,
 }
 
 pub enum DesktopWrapperMessage {

editor/src/messages/app_window/app_window_message.rs

@@ -8,5 +8,6 @@ pub enum AppWindowMessage {
 	AppWindowMinimize,
 	AppWindowMaximize,
 	AppWindowUpdatePlatform { platform: AppWindowPlatform },
+	AppWindowDrag,
 	AppWindowClose,
 }

editor/src/messages/app_window/app_window_message_handler.rs

@@ -31,6 +31,9 @@ impl MessageHandler<AppWindowMessage, ()> for AppWindowMessageHandler {
 				self.platform = platform;
 				responses.add(FrontendMessage::UpdatePlatform { platform: self.platform });
 			}
+			AppWindowMessage::AppWindowDrag => {
+				responses.add(FrontendMessage::DragWindow);
+			}
 			AppWindowMessage::AppWindowClose => {
 				responses.add(FrontendMessage::CloseWindow);
 			}

editor/src/messages/frontend/frontend_message.rs

@@ -343,6 +343,7 @@ pub enum FrontendMessage {
 		maximized: bool,
 		minimized: bool,
 	},
+	DragWindow,
 	CloseWindow,
 	UpdateViewportHolePunch {
 		active: bool,

frontend/src/components/layout/LayoutRow.svelte

@@ -43,6 +43,7 @@
 	on:dragover
 	on:dragstart
 	on:drop
+	on:mousedown
 	on:mouseup
 	on:pointerdown
 	on:pointerenter
@@ -67,7 +68,6 @@ on:keydown
 on:keypress
 on:keyup
 on:lostpointercapture
-on:mousedown
 on:mouseenter
 on:mouseleave
 on:mousemove

frontend/src/components/window/title-bar/TitleBar.svelte

@@ -76,13 +76,15 @@
 				<TextButton label={entry.label} icon={entry.icon} menuListChildren={entry.children} action={entry.action} flush={true} />
 			{/each}
 		{/if}
+		<LayoutRow on:mousedown={() => editor.handle.appWindowDrag()} on:dblclick={() => editor.handle.appWindowMaximize()} />
 	</LayoutRow>
 	<!-- Document title -->
-	<LayoutRow class="center">
+	<LayoutRow class="center" on:mousedown={() => editor.handle.appWindowDrag()} on:dblclick={() => editor.handle.appWindowMaximize()}>
 		<WindowTitle text={windowTitle} />
 	</LayoutRow>
 	<!-- Window buttons (except on Mac) -->
 	<LayoutRow class="right">
+		<LayoutRow on:mousedown={() => editor.handle.appWindowDrag()} on:dblclick={() => editor.handle.appWindowMaximize()} />
 		{#if platform === "Windows"}
 			<WindowButtonsWindows {maximized} />
 		{:else if platform === "Linux"}

frontend/wasm/src/editor_api.rs

@@ -352,6 +352,13 @@ impl EditorHandle {
 		self.dispatch(message);
 	}
 
+	/// Drag the application window
+	#[wasm_bindgen(js_name = appWindowDrag)]
+	pub fn app_window_start_drag(&self) {
+		let message = AppWindowMessage::AppWindowDrag;
+		self.dispatch(message);
+	}
+
 	/// Displays a dialog with an error message
 	#[wasm_bindgen(js_name = errorDialog)]
 	pub fn error_dialog(&self, title: String, description: String) {