From ede6cf27d70d334f93e59d2e8e207aaae7cb29de Mon Sep 17 00:00:00 2001 From: Danila Poyarkov Date: Fri, 27 Feb 2026 23:10:27 +0300 Subject: [PATCH] Add full keyboard shortcut reference to PLAN.md, fix zoom speed Shortcut table covers all Figma shortcuts organized by category (tools, file, edit, view, object, text, arrange, canvas interaction) with implementation status tracking. Zoom: use continuous exponential scaling (0.99^deltaY) instead of fixed 1.1/0.9 factor per event. --- PLAN.md | 130 +++++++++++++++++++++++++++++++++++++++++++ src/stores/editor.ts | 2 +- 2 files changed, 131 insertions(+), 1 deletion(-) diff --git a/PLAN.md b/PLAN.md index e3a0723f5..9c1e998ff 100644 --- a/PLAN.md +++ b/PLAN.md @@ -1431,4 +1431,134 @@ This PoC validates the entire stack end-to-end in 4 weeks, before committing to --- +## Keyboard Shortcuts Reference + +Full Figma-compatible shortcut map. Implemented shortcuts marked with ✅. + +### Tools (single key, no modifier) + +| Key | Tool | Status | +|-----|------|--------| +| V | Move/Select | ✅ | +| K | Scale | | +| H | Hand | ✅ | +| F | Frame | ✅ | +| S | Section / Slice | | +| R | Rectangle | ✅ | +| O | Ellipse | ✅ | +| L | Line | ✅ | +| ⇧L | Arrow | | +| P | Pen | | +| ⇧P | Pencil | | +| T | Text | ✅ | +| C | Comment | | +| I | Eyedropper | | + +### File + +| Shortcut | Action | Status | +|----------|--------|--------| +| ⌘N | New Window | | +| ⌘O | Open File | ✅ | +| ⌘W | Close Tab | | +| ⌘S | Save | | +| ⇧⌘E | Export… | | + +### Edit + +| Shortcut | Action | Status | +|----------|--------|--------| +| ⌘Z | Undo | ✅ | +| ⇧⌘Z | Redo | ✅ | +| ⌘X | Cut | | +| ⌘C | Copy | | +| ⌘V | Paste | | +| ⇧⌘V | Paste Over Selection | | +| ⌘D | Duplicate | ✅ | +| ⌫ | Delete | ✅ | +| ⌘A | Select All | ✅ | +| ⇧⌘A | Select Inverse | | +| ⌥⌘C | Copy Properties | | +| ⌥⌘V | Paste Properties | | +| ⌃C | Pick Color (Eyedropper) | | + +### View + +| Shortcut | Action | Status | +|----------|--------|--------| +| ⌘' | Pixel Grid | | +| ⌃G | Layout Guides | | +| ⇧R | Rulers | | +| ⌘\ | Show/Hide UI | | +| ⌘= | Zoom In | ✅ | +| ⌘- | Zoom Out | ✅ | +| ⌘0 | Zoom to 100% | ✅ | +| ⌘1 | Zoom to Fit | | +| ⌘2 | Zoom to Selection | | +| N / ⇧N | Next/Previous Frame | | + +### Object + +| Shortcut | Action | Status | +|----------|--------|--------| +| ⌥⌘G | Frame Selection | | +| ⌘G | Group Selection | | +| ⇧⌘G | Ungroup | | +| ⇧A | Add Auto Layout | | +| ⌥⌘K | Create Component | | +| ⌥⌘B | Detach Instance | | +| ⌘] | Bring Forward | | +| ⌥⌘] | Bring to Front | | +| ⌘[ | Send Backward | | +| ⌥⌘[ | Send to Back | | +| ⇧H | Flip Horizontal | | +| ⇧V | Flip Vertical | | +| ⌘E | Flatten | | +| ⇧⌘H | Show/Hide Selection | | +| ⇧⌘L | Lock/Unlock Selection | | +| ⌥/ | Remove Fill | | +| ⇧X | Swap Fill and Stroke | | + +### Text + +| Shortcut | Action | Status | +|----------|--------|--------| +| ⌘B | Bold | | +| ⌘I | Italic | | +| ⌘U | Underline | | +| ⇧⌘X | Strikethrough | | +| ⇧⌘U | Create Link | | + +### Arrange + +| Shortcut | Action | Status | +|----------|--------|--------| +| ⌥A | Align Left | | +| ⌥H | Align Horizontal Centers | | +| ⌥D | Align Right | | +| ⌥W | Align Top | | +| ⌥V | Align Vertical Centers | | +| ⌥S | Align Bottom | | +| ⌥⇧H | Distribute Horizontal Spacing | | +| ⌥⇧V | Distribute Vertical Spacing | | + +### Canvas Interaction + +| Input | Action | Status | +|-------|--------|--------| +| Click | Select node | ✅ | +| Shift+Click | Add/remove from selection | ✅ | +| Alt+Drag | Duplicate and move | ✅ | +| Shift+Drag (draw) | Constrain to square/circle | ✅ | +| Shift+Drag (resize) | Maintain aspect ratio | ✅ | +| Shift+Drag (rotate) | Snap to 15° | ✅ | +| Middle mouse drag | Pan | ✅ | +| Scroll | Pan | ✅ | +| Ctrl+Scroll / Pinch | Zoom | ✅ | +| Double-click text | Edit text inline | ✅ | +| Drag onto frame | Reparent into frame | ✅ | +| Escape | Deselect / Cancel | ✅ | + +--- + *Created: 2026-02-26* diff --git a/src/stores/editor.ts b/src/stores/editor.ts index d878caea6..1cb22e983 100644 --- a/src/stores/editor.ts +++ b/src/stores/editor.ts @@ -278,7 +278,7 @@ export function createEditorStore() { } function applyZoom(delta: number, centerX: number, centerY: number) { - const factor = delta < 0 ? 1.1 : 0.9 + const factor = Math.pow(0.99, delta) const newZoom = Math.max(0.02, Math.min(256, state.zoom * factor)) state.panX = centerX - (centerX - state.panX) * (newZoom / state.zoom) state.panY = centerY - (centerY - state.panY) * (newZoom / state.zoom)