24 lines
1.1 KiB
Markdown
24 lines
1.1 KiB
Markdown
|
|
|
|
## Make App Windows Draggable
|
|
|
|
### Problem
|
|
Windows currently use fixed `defaultPosition` via framer-motion `animate`, so they can't be repositioned by the user.
|
|
|
|
### Approach
|
|
Use framer-motion's built-in `drag` prop on the window container, constrained by a `dragConstraints` ref (the desktop). The title bar acts as the drag handle via `dragListener={false}` on the main div + `dragControls` triggered from the title bar.
|
|
|
|
### Changes
|
|
|
|
**`src/components/os/AppWindow.tsx`**
|
|
- Add `useState` for `position` (initialized from `defaultPosition`)
|
|
- Use `useDragControls` from framer-motion
|
|
- Add `drag` prop to `motion.div` with `dragControls`, `dragMomentum={false}`, `dragListener={false}`
|
|
- Add `dragConstraints` prop (parent bounds or screen-based object)
|
|
- Title bar gets `onPointerDown` to start drag via `dragControls.start()`
|
|
- When maximized, disable drag
|
|
- Track position via `onDragEnd` to persist position across re-renders
|
|
- Remove the `x`/`y`/`top`/`left` from the `animate` prop (use `style` for initial positioning instead, so drag offset works correctly)
|
|
- Set `cursor-grab` / `cursor-grabbing` on title bar
|
|
|