feat(modal): drag dialogs by a title-bar grip, clamped to the window

In-canvas modals were locked to screen-centre. Add a green move-arrow
grip beside the ✕ that drags the dialog; positioning is an offset from
centre applied via asymmetric padding. The drag offset is clamped to the
window so a dialog stops at the edge instead of being squeezed, and the
offset resets when the dialog closes so each opens centred.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/mod.rs

@@ -285,6 +285,14 @@ pub(super) struct OpenCADStudio {
     /// The open in-canvas modal dialog, if any (Plan B: shared overlay instead
     /// of OS windows).
     active_modal: Option<ModalKind>,
+    /// Pixel offset of the active modal from screen-centre (drag-to-move).
+    /// Reset to zero whenever a modal closes so each dialog opens centred.
+    modal_offset: iced::Vector,
+    /// Cursor position from the previous drag-move while the modal title bar is
+    /// held; `None` before the first move of a drag.
+    modal_drag_last: Option<Point>,
+    /// True while the modal title bar is held (a drag is in progress).
+    modal_dragging: bool,
     /// New-release notification window — opened on startup when the
     /// GitHub releases API reports a newer version than this build.
     /// First-launch "make Open CAD Studio the default for .dwg/.dxf?" prompt
@@ -999,6 +1007,12 @@ pub enum Message {
     AboutOpen,
     /// Close whatever in-canvas modal dialog is open (Plan B).
     CloseModal,
+    /// Title-bar pressed: begin dragging the active modal.
+    ModalGrab,
+    /// Cursor moved while dragging the modal title bar.
+    ModalDragMove(Point),
+    /// Title-bar released: stop dragging.
+    ModalDragRelease,
     AboutCopyInfo,
     // ── Plugin Manager window ───────────────────────────────────────────
     PluginManagerOpen,
@@ -1411,6 +1425,9 @@ impl OpenCADStudio {
             main_window: None,
             color_pick_target: None,
             active_modal: None,
+            modal_offset: iced::Vector::ZERO,
+            modal_drag_last: None,
+            modal_dragging: false,
             default_assoc_prompted: false,
             update_notice_version: None,
             update_notice_body: None,

src/app/update.rs

@@ -89,6 +89,10 @@ impl OpenCADStudio {
             _ => {}
         }
         self.active_modal = None;
+        // Recentre the next dialog and drop any in-progress drag.
+        self.modal_offset = iced::Vector::ZERO;
+        self.modal_drag_last = None;
+        self.modal_dragging = false;
     }
 
     pub fn update(&mut self, msg: Message) -> Task<Message> {
@@ -5376,6 +5380,38 @@ impl OpenCADStudio {
                 self.close_active_modal();
                 Task::none()
             }
+            Message::ModalGrab => {
+                // Start a drag; the first ModalDragMove seeds the reference.
+                self.modal_dragging = true;
+                self.modal_drag_last = None;
+                Task::none()
+            }
+            Message::ModalDragMove(p) => {
+                if self.modal_dragging {
+                    if let Some(last) = self.modal_drag_last {
+                        self.modal_offset.x += p.x - last.x;
+                        self.modal_offset.y += p.y - last.y;
+                        // Clamp so the dialog stops at the window edge instead
+                        // of being squeezed (the off-centre padding shrinks the
+                        // dialog once it overlaps a border).
+                        if let Some((cw, ch)) = self.modal_outer_size() {
+                            let ww = self.vp_size.0 + 440.0;
+                            let wh = self.vp_size.1;
+                            let max_x = ((ww - cw) * 0.5).max(0.0);
+                            let max_y = ((wh - ch) * 0.5).max(0.0);
+                            self.modal_offset.x = self.modal_offset.x.clamp(-max_x, max_x);
+                            self.modal_offset.y = self.modal_offset.y.clamp(-max_y, max_y);
+                        }
+                    }
+                    self.modal_drag_last = Some(p);
+                }
+                Task::none()
+            }
+            Message::ModalDragRelease => {
+                self.modal_dragging = false;
+                self.modal_drag_last = None;
+                Task::none()
+            }
 
             Message::AboutCopyInfo => {
                 let info = format!(

src/app/view.rs

@@ -1050,7 +1050,9 @@ impl OpenCADStudio {
         // Former pop-up windows render as overlays here, so they work on both
         // the native (single main window) and web builds.
         let base: Element<'_, Message> = match self.modal_content() {
-            Some(content) => crate::ui::modal::modal(composed, content, Message::CloseModal),
+            Some(content) => {
+                crate::ui::modal::modal(composed, content, Message::CloseModal, self.modal_offset)
+            }
             None => composed.into(),
         };
         // The colour picker is a nested modal: it stacks over whichever dialog
@@ -1064,12 +1066,44 @@ impl OpenCADStudio {
                 .width(iced::Length::Fixed(420.0))
                 .height(iced::Length::Fixed(470.0)),
                 Message::CloseColorPicker,
+                iced::Vector::ZERO,
             )
         } else {
             base
         }
     }
 
+    /// Outer pixel size (content + title-bar/padding chrome) of the active
+    /// modal, used to clamp drag so it cannot be pushed off-screen. Mirrors the
+    /// `sized(..)` dimensions in [`Self::modal_content`]; keep the two in sync.
+    /// `None` has no active modal. About (content-sized) uses a safe estimate.
+    pub(crate) fn modal_outer_size(&self) -> Option<(f32, f32)> {
+        use super::ModalKind::*;
+        // Title bar (~26) + spacing (6) + frame padding (10·2) → ~52 vertical;
+        // frame padding → ~20 horizontal.
+        const EXTRA_W: f32 = 20.0;
+        const EXTRA_H: f32 = 52.0;
+        let (w, h) = match self.active_modal? {
+            About => (440, 360),
+            Shortcuts => (720, 520),
+            PluginManager => (520, 460),
+            UpdateNotice => (560, 460),
+            Layers => (900, 360),
+            PageSetup => (520, 460),
+            LayoutManager => (640, 320),
+            Plotstyle => (780, 540),
+            TextStyle => (860, 480),
+            MlStyle => (620, 420),
+            TableStyle => (620, 420),
+            MLeaderStyle => (560, 560),
+            DimStyle => (720, 560),
+            AssocPrompt => (440, 210),
+            Unsaved => (420, 160),
+            SaveDialog => (560, 480),
+        };
+        Some((w as f32 + EXTRA_W, h as f32 + EXTRA_H))
+    }
+
     /// Build the currently-open modal dialog's content (Plan B), or `None`.
     /// Each former pop-up window is constructed here and given a bounded size
     /// (About shrinks to its content). Rendered as an overlay by `view_main`.

src/ui/modal.rs

@@ -6,8 +6,8 @@
 //! so both stack dialogs here — one code path for every platform.
 
 use crate::app::Message;
-use iced::widget::{button, center, column, container, opaque, stack, text};
-use iced::{Background, Border, Color, Element, Theme};
+use iced::widget::{button, column, container, mouse_area, opaque, row, stack, text};
+use iced::{Background, Border, Color, Element, Length, Padding, Theme, Vector};
 
 const PANEL: Color = Color {
     r: 0.13,
@@ -21,51 +21,110 @@ const BORDER_C: Color = Color {
     b: 0.35,
     a: 1.0,
 };
+/// Title-bar background.
+const TITLE_C: Color = Color {
+    r: 0.18,
+    g: 0.18,
+    b: 0.18,
+    a: 1.0,
+};
+/// Drag-handle arrow — bright green so the move affordance stands out.
+const GRIP_C: Color = Color {
+    r: 0.2,
+    g: 1.0,
+    b: 0.3,
+    a: 1.0,
+};
 
-/// Stack `content` centered over `base` behind a dimmed backdrop, framed with a
-/// close (✕) button in the top-right corner. The backdrop only dims and blocks
-/// clicks from reaching the view beneath — it does **not** dismiss the dialog;
-/// closing is the ✕ button alone (`on_close`).
+/// Stack `content` over `base` behind a dimmed backdrop, framed with a
+/// draggable title bar (the ✕ close button at its right end). The backdrop only
+/// dims and blocks clicks from reaching the view beneath — it does **not**
+/// dismiss the dialog; closing is the ✕ button alone (`on_close`).
+///
+/// `offset` shifts the dialog from screen-centre so it can be dragged by its
+/// title bar; pass `Vector::ZERO` to keep it centred.
 pub fn modal<'a>(
     base: impl Into<Element<'a, Message>>,
     content: impl Into<Element<'a, Message>>,
     on_close: Message,
+    offset: Vector,
 ) -> Element<'a, Message> {
     let close = button(text("✕").size(15))
         .on_press(on_close)
         .padding([1, 7])
         .style(close_style);
 
-    // Close button right-aligned above the content. The column shrinks to the
-    // content's width (no `Fill`), so the dialog sizes to its content; the ✕ is
-    // pushed to that width's right edge.
+    // Draggable title bar: a grip handle next to the ✕. Kept `Shrink` (no
+    // `Fill`) so a single Fill child can't blow the dialog out to the full
+    // screen width — the dialog stays sized to its content. Pressing the grip
+    // starts a drag (handled in `update`).
+    let grip = mouse_area(
+        container(text("✥").size(15).color(GRIP_C))
+            .padding([1, 7])
+            .style(|_: &Theme| container::Style {
+                background: Some(Background::Color(TITLE_C)),
+                border: Border {
+                    radius: 4.0.into(),
+                    ..Default::default()
+                },
+                ..Default::default()
+            }),
+    )
+    .on_press(Message::ModalGrab)
+    .interaction(iced::mouse::Interaction::Grab);
+
+    let title_bar = row![grip, close].spacing(6).align_y(iced::Center);
+
+    // The column shrinks to the content's width; the title bar sits top-right
+    // above it, mirroring the former ✕ placement with a drag handle.
     let framed = container(
-        column![close, content.into()]
+        column![title_bar, content.into()]
             .spacing(6)
             .align_x(iced::alignment::Horizontal::Right),
     )
-    .padding(10)
-    .style(|_: &Theme| container::Style {
-        background: Some(Background::Color(PANEL)),
-        border: Border {
-            color: BORDER_C,
-            width: 1.0,
-            radius: 6.0.into(),
-        },
-        ..Default::default()
-    });
+        .padding(10)
+        .style(|_: &Theme| container::Style {
+            background: Some(Background::Color(PANEL)),
+            border: Border {
+                color: BORDER_C,
+                width: 1.0,
+                radius: 6.0.into(),
+            },
+            ..Default::default()
+        });
+
+    // Position via asymmetric padding (padding is non-negative): shifting a
+    // centred box by `d` on an axis needs (near − far) padding = 2·d there.
+    let pad = Padding {
+        top: offset.y.max(0.0) * 2.0,
+        right: (-offset.x).max(0.0) * 2.0,
+        bottom: (-offset.y).max(0.0) * 2.0,
+        left: offset.x.max(0.0) * 2.0,
+    };
+
+    // The backdrop fills the screen so dragging keeps tracking the cursor even
+    // when it leaves the title bar; release anywhere ends the drag.
+    let backdrop = mouse_area(
+        container(framed)
+            .center_x(Length::Fill)
+            .center_y(Length::Fill)
+            .padding(pad)
+            .style(|_: &Theme| container::Style {
+                background: Some(Background::Color(Color {
+                    a: 0.55,
+                    ..Color::BLACK
+                })),
+                ..Default::default()
+            }),
+    )
+    .on_move(Message::ModalDragMove)
+    .on_release(Message::ModalDragRelease);
 
     stack![
         base.into(),
         // `opaque` blocks pointer events from passing through, so the dimmed
         // backdrop swallows clicks instead of closing or hitting the view.
-        opaque(center(framed).style(|_: &Theme| container::Style {
-            background: Some(Background::Color(Color {
-                a: 0.55,
-                ..Color::BLACK
-            })),
-            ..Default::default()
-        })),
+        opaque(backdrop),
     ]
     .into()
 }