From cef380c7c4d8bf61f0ec6d0d74bd408538ec9388 Mon Sep 17 00:00:00 2001 From: Varun Date: Fri, 27 Mar 2026 17:23:34 +0530 Subject: [PATCH] Sync displayed keyboard shortcuts with live bindings --- README.md | 1 + .../src/content/docs/keyboard-shortcuts.md | 31 +++++++++-- .../src/content/docs/tr/keyboard-shortcuts.md | 31 +++++++++-- public/locales/de/translation.json | 9 +++ public/locales/en/translation.json | 8 ++- public/locales/es/translation.json | 9 +++ public/locales/fr/translation.json | 9 +++ public/locales/ja/translation.json | 9 +++ public/locales/tr/translation.json | 9 +++ public/locales/zh/translation.json | 9 +++ src/components/KeyboardShortcutsModal.tsx | 37 ++++++++----- .../SettingsModal/ShortcutsSettings.tsx | 17 ++++-- src/constants.test.ts | 14 +++-- src/constants.ts | 55 +++++++++++-------- src/i18n/locales/de/translation.json | 9 +++ src/i18n/locales/en/translation.json | 8 ++- src/i18n/locales/es/translation.json | 9 +++ src/i18n/locales/fr/translation.json | 9 +++ src/i18n/locales/ja/translation.json | 9 +++ src/i18n/locales/tr/translation.json | 9 +++ src/i18n/locales/zh/translation.json | 9 +++ 21 files changed, 247 insertions(+), 63 deletions(-) diff --git a/README.md b/README.md index b145754a..264869e2 100644 --- a/README.md +++ b/README.md @@ -292,6 +292,7 @@ Peer-to-peer collaboration via **WebRTC + Yjs**. Share a room link — participa | `Cmd+D` | Duplicate | | `Alt+Arrow` | Quick-create connected node | | `F2` | Edit label inline | +| `Escape` | Clear selection | | `Cmd+Alt+C` / `Cmd+Alt+V` | Copy / Paste style | --- diff --git a/docs-site/src/content/docs/keyboard-shortcuts.md b/docs-site/src/content/docs/keyboard-shortcuts.md index 3958de94..fe1c02f6 100644 --- a/docs-site/src/content/docs/keyboard-shortcuts.md +++ b/docs-site/src/content/docs/keyboard-shortcuts.md @@ -4,16 +4,17 @@ title: Keyboard Shortcuts description: Reference the current keyboard shortcuts for editing, navigation, and diagram authoring in OpenFlowKit. --- -These are the current shortcut groups defined by the app. +These are the current shortcut groups shown in the app. ## Essentials | Action | macOS | Windows/Linux | | --- | --- | --- | | Undo | `Cmd + Z` | `Ctrl + Z` | -| Redo | `Cmd + Shift + Z` | `Ctrl + Shift + Z` | +| Redo | `Cmd + Shift + Z` | `Ctrl + Shift + Z` or `Ctrl + Y` | | Select all | `Cmd + A` | `Ctrl + A` | | Delete selection | `Delete` | `Backspace` | +| Clear selection | `Escape` | `Escape` | ## Manipulation @@ -25,7 +26,8 @@ These are the current shortcut groups defined by the app. | Duplicate-drag | `Opt + Drag` | `Alt + Drag` | | Copy | `Cmd + C` | `Ctrl + C` | | Paste | `Cmd + V` | `Ctrl + V` | -| Group selection | `Cmd + G` | `Ctrl + G` | +| Copy style | `Cmd + Opt + C` | `Ctrl + Alt + C` | +| Paste style | `Cmd + Opt + V` | `Ctrl + Alt + V` | ## Nodes @@ -34,15 +36,32 @@ These are the current shortcut groups defined by the app. | Add mind map child | `Tab` | `Tab` | | Add mind map sibling | `Enter` | `Enter` | | Rename selection | `F2` | `F2` | +| Quick-create connected node | `Opt + Arrow` | `Alt + Arrow` | +| Annotation colors | `1` `2` `3` `4` `5` `6` | `1` `2` `3` `4` `5` `6` | ## Navigation | Action | macOS | Windows/Linux | | --- | --- | --- | -| Open Command Center | `Cmd + K` | `Ctrl + K` | +| Select tool | `V` | `V` | +| Hand tool | `H` | `H` | +| Pan canvas | `Space + Drag` | `Space + Drag` | +| Zoom in | `Cmd + +` | `Ctrl + +` | +| Zoom out | `Cmd + -` | `Ctrl + -` | | Fit view | `Shift + 1` | `Shift + 1` | +| Nudge node | `Arrow` or `Shift + Arrow` | `Arrow` or `Shift + Arrow` | + +## Help + +| Action | macOS | Windows/Linux | +| --- | --- | --- | +| Keyboard shortcuts | `?` | `?` | +| Open Command Center | `Cmd + K` | `Ctrl + K` | +| Search nodes | `Cmd + F` | `Ctrl + F` | ## Notes -- Shortcut availability depends on editor focus and current mode. -- Use the [Command Center](/command-center/) for many actions that do not need a dedicated shortcut. +- Shortcut availability depends on editor focus, current mode, and selection state. +- Mind map shortcuts only apply when a mind map node is selected. +- Annotation color shortcuts only apply when an annotation node is selected. +- Use the [Command Center](/command-center/) for actions that do not need a dedicated shortcut. diff --git a/docs-site/src/content/docs/tr/keyboard-shortcuts.md b/docs-site/src/content/docs/tr/keyboard-shortcuts.md index 942d6548..2cd876bb 100644 --- a/docs-site/src/content/docs/tr/keyboard-shortcuts.md +++ b/docs-site/src/content/docs/tr/keyboard-shortcuts.md @@ -4,16 +4,17 @@ title: Keyboard Shortcuts description: OpenFlowKit’te düzenleme, gezinme ve diyagram üretimi için mevcut klavye kısayolları. --- -Bu tablolar uygulamadaki temel kısayol gruplarını özetler. +Bu tablolar artık uygulamada gösterilen güncel kısayolları özetler. ## Temel | Eylem | macOS | Windows/Linux | | --- | --- | --- | | Undo | `Cmd + Z` | `Ctrl + Z` | -| Redo | `Cmd + Shift + Z` | `Ctrl + Shift + Z` | +| Redo | `Cmd + Shift + Z` | `Ctrl + Shift + Z` veya `Ctrl + Y` | | Tümünü seç | `Cmd + A` | `Ctrl + A` | | Seçimi sil | `Delete` | `Backspace` | +| Seçimi temizle | `Escape` | `Escape` | ## Düzenleme @@ -25,7 +26,8 @@ Bu tablolar uygulamadaki temel kısayol gruplarını özetler. | Sürükleyerek çoğalt | `Opt + Drag` | `Alt + Drag` | | Kopyala | `Cmd + C` | `Ctrl + C` | | Yapıştır | `Cmd + V` | `Ctrl + V` | -| Grupla | `Cmd + G` | `Ctrl + G` | +| Stili kopyala | `Cmd + Opt + C` | `Ctrl + Alt + C` | +| Stili yapıştır | `Cmd + Opt + V` | `Ctrl + Alt + V` | ## Düğüm işlemleri @@ -34,15 +36,32 @@ Bu tablolar uygulamadaki temel kısayol gruplarını özetler. | Zihin haritasına çocuk ekle | `Tab` | `Tab` | | Zihin haritasına kardeş ekle | `Enter` | `Enter` | | Seçimi yeniden adlandır | `F2` | `F2` | +| Bağlı düğümü hızlı oluştur | `Opt + Arrow` | `Alt + Arrow` | +| Not renkleri | `1` `2` `3` `4` `5` `6` | `1` `2` `3` `4` `5` `6` | ## Gezinme | Eylem | macOS | Windows/Linux | | --- | --- | --- | -| Komut Merkezi | `Cmd + K` | `Ctrl + K` | +| Seçim aracı | `V` | `V` | +| El aracı | `H` | `H` | +| Tuvali kaydır | `Space + Drag` | `Space + Drag` | +| Yakınlaştır | `Cmd + +` | `Ctrl + +` | +| Uzaklaştır | `Cmd + -` | `Ctrl + -` | | Görünüşe sığdır | `Shift + 1` | `Shift + 1` | +| Düğümü hafifçe taşı | `Arrow` veya `Shift + Arrow` | `Arrow` veya `Shift + Arrow` | + +## Yardım + +| Eylem | macOS | Windows/Linux | +| --- | --- | --- | +| Klavye kısayolları | `?` | `?` | +| Komut Merkezi | `Cmd + K` | `Ctrl + K` | +| Düğümleri ara | `Cmd + F` | `Ctrl + F` | ## Notlar -- Kısayollar odak durumuna ve aktif moda göre değişebilir. -- Bazı işlemler için doğrudan kısayol yerine [Command Center](/tr/command-center/) kullanmak daha hızlıdır. +- Kısayollar odak durumuna, aktif moda ve seçili öğeye göre değişebilir. +- Zihin haritası kısayolları yalnızca bir zihin haritası düğümü seçiliyken çalışır. +- Not renkleri kısayolları yalnızca bir annotation düğümü seçiliyken çalışır. +- Doğrudan kısayolu olmayan işlemler için [Command Center](/tr/command-center/) kullanabilirsiniz. diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json index 948f14a2..b99704b5 100644 --- a/public/locales/de/translation.json +++ b/public/locales/de/translation.json @@ -17,12 +17,15 @@ "play": "Abspielen", "select": "Auswählen", "selectAll": "Alles auswählen", + "clearSelection": "Clear Selection", "duplicate": "Duplizieren", "duplicateDrag": "Duplizieren und ziehen", "multiSelect": "Mehrfachauswahl", "selectionBox": "Auswahlrahmen", "copy": "Kopieren", "paste": "Einfügen", + "copyStyle": "Copy Style", + "pasteStyle": "Paste Style", "zoomIn": "Vergrößern", "zoomOut": "Verkleinern", "zoomInOut": "Vergrößern/Verkleinern", @@ -31,8 +34,14 @@ "fitView": "Ansicht anpassen", "nudgeNode": "Knoten verschieben", "groupSelection": "Auswahl gruppieren", + "mindmapAddChild": "Mindmap: Add Child Topic", + "mindmapAddSibling": "Mindmap: Add Sibling Topic", + "renameSelection": "Auswahl umbenennen", + "quickCreateConnectedNode": "Quick-create Connected Node", + "annotationColors": "Annotation Colors", "keyboardShortcuts": "Tastaturkürzel", "commandBar": "Befehlsleiste", + "searchNodes": "Search Nodes", "loading": "Laden...", "error": "Fehler", "success": "Erfolg", diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 0c4630d9..983c72ec 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -17,11 +17,14 @@ "play": "Play", "select": "Select", "selectAll": "Select All", + "clearSelection": "Clear Selection", "duplicate": "Duplicate", "duplicateDrag": "Duplicate and Drag", "upload": "Upload", "copy": "Copy", "paste": "Paste", + "copyStyle": "Copy Style", + "pasteStyle": "Paste Style", "zoomIn": "Zoom In", "zoomOut": "Zoom Out", "zoomInOut": "Zoom In/Out", @@ -33,8 +36,11 @@ "mindmapAddChild": "Mindmap: Add Child Topic", "mindmapAddSibling": "Mindmap: Add Sibling Topic", "renameSelection": "Rename Selection", + "quickCreateConnectedNode": "Quick-create Connected Node", + "annotationColors": "Annotation Colors", "keyboardShortcuts": "Keyboard Shortcuts", "commandBar": "Command Bar", + "searchNodes": "Search Nodes", "multiSelect": "Multi-select", "selectionBox": "Selection Box", "loading": "Loading...", @@ -1211,4 +1217,4 @@ "closeTab": "Close Tab", "newFlowTab": "New Flow Tab" } -} \ No newline at end of file +} diff --git a/public/locales/es/translation.json b/public/locales/es/translation.json index 2d2378b0..a2e61737 100644 --- a/public/locales/es/translation.json +++ b/public/locales/es/translation.json @@ -17,12 +17,15 @@ "play": "Reproducir", "select": "Seleccionar", "selectAll": "Seleccionar todo", + "clearSelection": "Clear Selection", "duplicate": "Duplicar", "duplicateDrag": "Duplicar y arrastrar", "multiSelect": "Selección múltiple", "selectionBox": "Caja de selección", "copy": "Copiar", "paste": "Pegar", + "copyStyle": "Copy Style", + "pasteStyle": "Paste Style", "zoomIn": "Acercar", "zoomOut": "Alejar", "zoomInOut": "Acercar/Alejar", @@ -31,8 +34,14 @@ "fitView": "Ajustar vista", "nudgeNode": "Mover nodo", "groupSelection": "Agrupar selección", + "mindmapAddChild": "Mindmap: Add Child Topic", + "mindmapAddSibling": "Mindmap: Add Sibling Topic", + "renameSelection": "Renombrar selección", + "quickCreateConnectedNode": "Quick-create Connected Node", + "annotationColors": "Annotation Colors", "keyboardShortcuts": "Atajos de teclado", "commandBar": "Barra de comandos", + "searchNodes": "Search Nodes", "loading": "Cargando...", "error": "Error", "success": "Éxito", diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json index d80f9c2f..8a5300a3 100644 --- a/public/locales/fr/translation.json +++ b/public/locales/fr/translation.json @@ -17,12 +17,15 @@ "play": "Lire", "select": "Sélectionner", "selectAll": "Tout sélectionner", + "clearSelection": "Clear Selection", "duplicate": "Dupliquer", "duplicateDrag": "Dupliquer et glisser", "multiSelect": "Sélection multiple", "selectionBox": "Boîte de sélection", "copy": "Copier", "paste": "Coller", + "copyStyle": "Copy Style", + "pasteStyle": "Paste Style", "zoomIn": "Zoom avant", "zoomOut": "Zoom arrière", "zoomInOut": "Zoom avant/arrière", @@ -31,8 +34,14 @@ "fitView": "Ajuster la vue", "nudgeNode": "Déplacer le nœud", "groupSelection": "Grouper la sélection", + "mindmapAddChild": "Mindmap: Add Child Topic", + "mindmapAddSibling": "Mindmap: Add Sibling Topic", + "renameSelection": "Renommer la sélection", + "quickCreateConnectedNode": "Quick-create Connected Node", + "annotationColors": "Annotation Colors", "keyboardShortcuts": "Raccourcis clavier", "commandBar": "Barre de commandes", + "searchNodes": "Search Nodes", "loading": "Chargement...", "error": "Erreur", "success": "Succès", diff --git a/public/locales/ja/translation.json b/public/locales/ja/translation.json index 52e30a43..6101f0d5 100644 --- a/public/locales/ja/translation.json +++ b/public/locales/ja/translation.json @@ -17,12 +17,15 @@ "play": "再生", "select": "選択", "selectAll": "すべて選択", + "clearSelection": "Clear Selection", "duplicate": "複製", "duplicateDrag": "複製してドラッグ", "multiSelect": "複数選択", "selectionBox": "選択ボックス", "copy": "コピー", "paste": "貼り付け", + "copyStyle": "Copy Style", + "pasteStyle": "Paste Style", "zoomIn": "ズームイン", "zoomOut": "ズームアウト", "zoomInOut": "ズームイン/アウト", @@ -31,8 +34,14 @@ "fitView": "ビューに合わせる", "nudgeNode": "ノードを微調整", "groupSelection": "選択をグループ化", + "mindmapAddChild": "Mindmap: Add Child Topic", + "mindmapAddSibling": "Mindmap: Add Sibling Topic", + "renameSelection": "選択項目の名前を変更", + "quickCreateConnectedNode": "Quick-create Connected Node", + "annotationColors": "Annotation Colors", "keyboardShortcuts": "キーボードショートカット", "commandBar": "コマンドバー", + "searchNodes": "Search Nodes", "loading": "読み込み中...", "error": "エラー", "success": "成功", diff --git a/public/locales/tr/translation.json b/public/locales/tr/translation.json index c1a08288..837376a9 100644 --- a/public/locales/tr/translation.json +++ b/public/locales/tr/translation.json @@ -18,6 +18,7 @@ "play": "Oynat", "select": "Seç", "selectAll": "Tümünü Seç", + "clearSelection": "Seçimi Temizle", "duplicate": "Çoğalt", "duplicateDrag": "Çoğalt ve Sürükle", "multiSelect": "Çoklu seçim", @@ -25,6 +26,8 @@ "upload": "Yükle", "copy": "Kopyala", "paste": "Yapıştır", + "copyStyle": "Stili Kopyala", + "pasteStyle": "Stili Yapıştır", "zoomIn": "Yakınlaştır", "zoomOut": "Uzaklaştır", "zoomInOut": "Yakınlaştır/Uzaklaştır", @@ -33,8 +36,14 @@ "fitView": "Görünüme Sığdır", "nudgeNode": "Düğümü Hafifçe Taşı", "groupSelection": "Seçimi Grupla", + "mindmapAddChild": "Zihin Haritası: Alt Konu Ekle", + "mindmapAddSibling": "Zihin Haritası: Kardeş Konu Ekle", + "renameSelection": "Seçimi Yeniden Adlandır", + "quickCreateConnectedNode": "Bağlı Düğümü Hızlı Oluştur", + "annotationColors": "Not Renkleri", "keyboardShortcuts": "Klavye Kısayolları", "commandBar": "Komut Çubuğu", + "searchNodes": "Düğümleri Ara", "loading": "Yükleniyor...", "error": "Hata", "success": "Başarılı", diff --git a/public/locales/zh/translation.json b/public/locales/zh/translation.json index dc3498d7..b69f26b9 100644 --- a/public/locales/zh/translation.json +++ b/public/locales/zh/translation.json @@ -17,12 +17,15 @@ "play": "播放", "select": "选择", "selectAll": "全选", + "clearSelection": "Clear Selection", "duplicate": "复制", "duplicateDrag": "复制并拖拽", "multiSelect": "多选", "selectionBox": "选择框", "copy": "复制", "paste": "粘贴", + "copyStyle": "Copy Style", + "pasteStyle": "Paste Style", "zoomIn": "放大", "zoomOut": "缩小", "zoomInOut": "放大/缩小", @@ -31,8 +34,14 @@ "fitView": "适应视图", "nudgeNode": "微移节点", "groupSelection": "分组选择", + "mindmapAddChild": "Mindmap: Add Child Topic", + "mindmapAddSibling": "Mindmap: Add Sibling Topic", + "renameSelection": "重命名所选项", + "quickCreateConnectedNode": "Quick-create Connected Node", + "annotationColors": "Annotation Colors", "keyboardShortcuts": "键盘快捷键", "commandBar": "命令栏", + "searchNodes": "Search Nodes", "loading": "加载中...", "error": "错误", "success": "成功", diff --git a/src/components/KeyboardShortcutsModal.tsx b/src/components/KeyboardShortcutsModal.tsx index 6e92ada9..4d9ef4ef 100644 --- a/src/components/KeyboardShortcutsModal.tsx +++ b/src/components/KeyboardShortcutsModal.tsx @@ -80,7 +80,7 @@ export function KeyboardShortcutsModal(): React.JSX.Element | null { icon={getSectionIcon(section.title)} > {section.items.map((item) => ( - + ))} ))} @@ -103,10 +103,10 @@ export function KeyboardShortcutsModal(): React.JSX.Element | null { } function getSectionIcon(title: string) { - switch (title.toLowerCase()) { - case 'essentials': return ; - case 'manipulation': return ; - case 'navigation': return ; + switch (title) { + case 'shortcuts.essentials': return ; + case 'shortcuts.manipulation': return ; + case 'shortcuts.navigation': return ; default: return ; } } @@ -135,25 +135,32 @@ function ShortcutGroup({ title, icon, children }: ShortcutGroupProps): React.JSX } interface ShortcutItemProps { - keys: string[]; + shortcuts: string[][]; label: string; } -function ShortcutItem({ keys, label }: ShortcutItemProps): React.JSX.Element { +function ShortcutItem({ shortcuts, label }: ShortcutItemProps): React.JSX.Element { const { t } = useTranslation(); return (
{t(`${label}`, label)} -
- {keys.map((k, i) => ( - - {k} - +
+ {shortcuts.map((shortcut, shortcutIndex) => ( + + {shortcutIndex > 0 ? / : null} +
+ {shortcut.map((key, keyIndex) => ( + + {key} + + ))} +
+ ))}
diff --git a/src/components/SettingsModal/ShortcutsSettings.tsx b/src/components/SettingsModal/ShortcutsSettings.tsx index 91fe9c81..2a183d13 100644 --- a/src/components/SettingsModal/ShortcutsSettings.tsx +++ b/src/components/SettingsModal/ShortcutsSettings.tsx @@ -19,11 +19,18 @@ export const ShortcutsSettings = () => { {section.items.map((item) => (
{t(item.label)} -
- {item.keys.map((key, i) => ( - - {key} - +
+ {item.shortcuts.map((shortcut, shortcutIndex) => ( + + {shortcutIndex > 0 ? / : null} +
+ {shortcut.map((key, keyIndex) => ( + + {key} + + ))} +
+ ))}
diff --git a/src/constants.test.ts b/src/constants.test.ts index 4cfea47c..9bba0f7d 100644 --- a/src/constants.test.ts +++ b/src/constants.test.ts @@ -5,17 +5,19 @@ describe('getKeyboardShortcuts', () => { it('returns mac-style labels when requested', () => { const shortcuts = getKeyboardShortcuts(true); - expect(shortcuts[0].items[0].keys).toEqual(['Cmd', 'Z']); - expect(shortcuts[0].items[3].keys).toEqual(['Delete']); - expect(shortcuts[1].items[3].keys).toEqual(['Opt', 'Drag']); + expect(shortcuts[0].items[0].shortcuts).toEqual([['Cmd', 'Z']]); + expect(shortcuts[0].items[1].shortcuts).toEqual([['Cmd', 'Shift', 'Z']]); + expect(shortcuts[0].items[3].shortcuts).toEqual([['Delete']]); + expect(shortcuts[1].items[3].shortcuts).toEqual([['Opt', 'Drag']]); }); it('returns non-mac labels when requested', () => { const shortcuts = getKeyboardShortcuts(false); - expect(shortcuts[0].items[0].keys).toEqual(['Ctrl', 'Z']); - expect(shortcuts[0].items[3].keys).toEqual(['Backspace']); - expect(shortcuts[1].items[3].keys).toEqual(['Alt', 'Drag']); + expect(shortcuts[0].items[0].shortcuts).toEqual([['Ctrl', 'Z']]); + expect(shortcuts[0].items[1].shortcuts).toEqual([['Ctrl', 'Shift', 'Z'], ['Ctrl', 'Y']]); + expect(shortcuts[0].items[3].shortcuts).toEqual([['Backspace']]); + expect(shortcuts[1].items[3].shortcuts).toEqual([['Alt', 'Drag']]); }); it('detects mac-like platforms', () => { diff --git a/src/constants.ts b/src/constants.ts index 3e963878..c42904a6 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -99,7 +99,7 @@ export const EDGE_DASH_PATTERNS: Record