Make tool windows resizable by dragging edges or corners
Library, Notes, and the other floating tool windows (Tasks, Calendar, Gallery, Email, Cookbook, Brain, Settings, Theme, Compare, Research, Sessions) could be moved and snapped but never resized — there were no resize handles and dragging the edges did nothing. Add a shared makeWindowResizable() helper and wire it into the existing makeWindowDraggable() so every draggable window gains native-style edge/corner resizing from one place: - Grab any of the four edges or four corners to resize; the cursor reflects the active handle (ew/ns/nwse/nesw-resize). - Detects pointer proximity to the border instead of injecting handle elements, so it works regardless of each window's overflow model (.modal-content scrolls its body; .notes-pane scrolls an inner el). - Min-size clamp (320x200) and viewport clamping so a window can't be collapsed to nothing or dragged off-screen. - Per-window size is remembered and restored on reopen. - Disabled on mobile (windows are full-screen sheets there) and while a window is docked or fullscreen-snapped. - Touch supported at tablet width and up; self-heals a missed pointer-up so a lost mouseup can't leave a window stuck in resize mode.
This commit is contained in:
@@ -37,6 +37,7 @@
|
||||
// Default true when onEnterFullscreen is supplied.
|
||||
|
||||
import { makeEdgeDockController } from './modalSnap.js';
|
||||
import { makeWindowResizable } from './windowResize.js';
|
||||
|
||||
const SNAP_PX = 6; // cursor distance from top edge for fullscreen snap
|
||||
const UNSNAP_PX = 24; // cursor distance from top before fullscreen exits
|
||||
@@ -70,6 +71,26 @@ export function makeWindowDraggable(modal, options = {}) {
|
||||
header.style.cursor = 'move';
|
||||
header.style.userSelect = 'none';
|
||||
|
||||
// Edge/corner resize. Every draggable window also becomes resizable — the
|
||||
// same gesture a native desktop window uses (grab an edge or corner, drag).
|
||||
// Skipped on mobile (windows are full-screen sheets there) and while the
|
||||
// window is fullscreen-snapped or docked. Wired here so all ~12 callsites
|
||||
// get it without per-file changes.
|
||||
if (options.enableResize !== false) {
|
||||
const _dockClasses = ['modal-right-docked', 'modal-left-docked'];
|
||||
makeWindowResizable(content, {
|
||||
modal,
|
||||
mobileSkip,
|
||||
minWidth: options.minWidth,
|
||||
minHeight: options.minHeight,
|
||||
isLocked: () => (fsClass && modal && modal.classList.contains(fsClass))
|
||||
|| (modal && _dockClasses.some((c) => modal.classList.contains(c))),
|
||||
storageKey: options.resizeStorageKey
|
||||
|| (modal && modal.id ? 'winsize-' + modal.id
|
||||
: (content.id ? 'winsize-' + content.id : null)),
|
||||
});
|
||||
}
|
||||
|
||||
const rightDock = enableDock ? makeEdgeDockController(modal, 'right') : null;
|
||||
// Left dock is opt-in (enableLeftDock). For most windows it's off — the
|
||||
// sidebar lives on the left, so a left dock collides with it. The email
|
||||
|
||||
Reference in New Issue
Block a user