Replan transform tools and saving

TODO.md

@@ -111,25 +111,42 @@ A step-by-step checklist for porting MatterControl's design features to a Vue +
 
 ## Phase 5: Transform Tools
 
-### Transform Gizmos
+### Translate Mode (Default with Selection)
-- [ ] Install three.js `TransformControls`
+- [ ] Create custom translate gizmo with 3 axis arrows (colored by axis)
 - [ ] Attach gizmo to selected object(s)
-- [ ] Implement translate mode
+- [ ] Left-drag handle: free translate along axis
-- [ ] Implement rotate mode
+- [ ] Right-drag handle: grid-aligned translate along axis
-- [ ] Implement scale mode
+- [ ] Mouse wheel on handle: change grid granularity
 - [ ] Hide gizmo when nothing selected
 
-### Tool Switching
+### Rotation Mode (Ctrl Modifier)
-- [ ] Create toolbar with tool buttons (Select, Move, Rotate, Scale)
+- [ ] Create custom rotation gizmo with flat ring handles per axis
-- [ ] Add keyboard shortcuts (Q=Select, W=Move, E=Rotate, R=Scale)
+- [ ] Show rotation rings when Ctrl held with selection
-- [ ] Show active tool indicator
+- [ ] Hover effect: ring thickens and brightens
-- [ ] Add Escape to switch to Select tool
+- [ ] Left-drag ring: free (by-pixel) rotation
+- [ ] Right-drag ring: constrained rotation (15°, 30°, 45° based on mouse distance from control)
+- [ ] Display angle wheel during constrained rotation (world-oriented)
+- [ ] Track object rotation state for world-oriented snapping
 
-### Transform Options
+### Scale Mode (Ctrl+Shift Modifier)
-- [ ] Add snap-to-grid toggle for translate
+- [ ] Create bounding box visualization for selection
-- [ ] Add grid size input (1, 0.5, 0.1, etc.)
+- [ ] Show scale handles when Ctrl+Shift held with selection
-- [ ] Add angle snap toggle for rotate
+- [ ] Corner handles: white cubes for uniform scaling
-- [ ] Add angle snap size (15°, 45°, 90°)
+  - [ ] Left-drag: free scale
+  - [ ] Right-drag: symmetrical proportional scale from center
+- [ ] Face center handles: colored cubes (by axis) for stretch
+  - [ ] Left-drag: one-directional stretch along axis
+  - [ ] Right-drag: symmetrical stretch from center along axis
+- [ ] Hover effect: handles grow subtly and brighten
+
+### Camera Mode (Alt Modifier)
+- [ ] Left-drag: orbit camera
+- [ ] Right-drag: pan camera
+- [ ] Left-click object: center/zoom camera on object
+
+### Shift Modifier Behaviors
+- [ ] Click with Shift: add to selection (already in Phase 4)
+- [ ] Drag translate handle with Shift: duplicate selection along axis
 
 ---
 
@@ -259,38 +276,27 @@ A step-by-step checklist for porting MatterControl's design features to a Vue +
 
 ---
 
-## Phase 11: Persistence (IndexedDB)
+## Phase 11: Continuous Autosave
 
 ### Database Setup
 - [ ] Install `idb` library (IndexedDB wrapper)
 - [ ] Define database schema version 1
-- [ ] Create `projects` object store
+- [ ] Create `scene` object store for current scene state
 - [ ] Create `settings` object store
 - [ ] Implement database open/migration
 
-### Project Storage
-- [ ] Define `Project` interface (id, name, created, modified)
-- [ ] Implement `saveProject()` - serialize scene
-- [ ] Implement `loadProject()` - deserialize scene
-- [ ] Implement `listProjects()` - get all projects
-- [ ] Implement `deleteProject()`
-
 ### Scene Serialization
 - [ ] Serialize mesh geometry (positions, normals, indices)
 - [ ] Serialize object transforms and metadata
 - [ ] Serialize group hierarchy
 - [ ] Handle large meshes efficiently (binary format)
 
-### Unsaved Changes
+### Continuous Autosave
-- [ ] Track "dirty" state when scene modified
+- [ ] Implement autosave on every scene change (debounced)
-- [ ] Show unsaved indicator in header
+- [ ] Save immediately on significant actions (add/delete object, transform complete)
-- [ ] Warn before closing with unsaved changes
+- [ ] Load saved scene automatically on app start
-- [ ] Warn before "New Project" with unsaved changes
+- [ ] Handle serialization errors gracefully
-
+- [ ] Show subtle save indicator during autosave (optional)
-### Auto-Save
-- [ ] Add debounced auto-save on scene changes
-- [ ] Store current project ID in localStorage
-- [ ] Load last project on app start
 
 ---
 

TWEAKS.md

@@ -0,0 +1,39 @@
+- Left click is object select
+- Left click drag is lasso
+
+- Right click is context menu
+- Right click drag is nothing special
+
+- Translate mode is default with a selection
+    - 3 arrows colored by axis
+    - Left click dragging a handle is free translate along axis
+    - Right click dragging a handle is grid aligned translate along axis
+    - Mouse wheel up and down changes the granularity of the grid
+
+- Holding shift activates a special mode
+    - Allows adding to selection
+    - Dragging translate handles duplicates the selection along that axis
+
+- Holding alt activates camera mode
+    - Left click drag orbits the camera
+    - Right click drag pans the camera
+    - Left clicking an object centers/zooms the camera on the object
+
+- Holding ctrl activates rotation mode
+    - Makes rotation handles visible on a selection
+        - Rotation handles are flat rings
+        - Hovering a rotation handle makes the ring thicken and slightly brighten
+        - Left click dragging is by-pixel rotation
+        - Right click dragging is constrained rotation, 15, 30 or 45 degrees depending on how far from the controls the mouse is moved. During constrained rotation, an angle wheel of the appropriate granularity is displayed. This wheel is oriented absolutely to the world, not the object's current rotation. This means that the object needs to keep track of its rotation.
+
+- Holding ctrl+shift activates scale mode
+    - A bounding box appears on the selection
+        - Hovering a scale handle makes them grow subtly and slightly brighten
+    - The corners of the bounding box have white cubes that are scaling handles
+        - Left click dragging is free scale
+        - Right click dragging is symmetrical proportional scale (from the center of the bounding box)
+    - The centers of the faces of the bounding box have colored (by axis) cubes that are stretch handles
+        - Left click dragging is one-directional stretch along the axis
+        - Right click dragging is symmetrical stretch (from the center of the bounding box) along the axis
+
+- Continuous autosave