mirror of
https://github.com/amitwh/markdown-converter.git
synced 2026-10-01 09:19:34 +05:30
feat(flowchart): keyboard shortcuts overlay (C19)
After 17 commits of feature work the standalone window had a lot of
hidden keyboard shortcuts (Cmd+Z, Cmd+C/V/D, Delete, Alt+drag, etc.)
that no user could discover. This adds:
- 'Shortcuts (?)' toolbar button next to Export Visio.
- '?' key (or Shift+/) toggles the overlay; Esc closes it.
- A read-only modal that lists every canvas-relevant shortcut in
a 2-column table (Action / Shortcut) with <kbd> tags for the
key combos, styled to look like physical keys.
- Click on the dimmed overlay backdrop also closes it.
- Reuses the existing .fc-modal fade + scale-in animation.
The overlay sits inside #fc-left so it overlays the canvas, not the
side panel. Hidden by default via the HTML hidden attribute.
Implementation: btnHelp / shortcutsModal / shortcutsOverlay /
shortcutsClose are added to the bundle's els bag. A small
showShortcutsOverlay / hideShortcutsOverlay pair toggles their
.hidden. The keydown handler gets two new branches at the top:
- Esc: close the overlay if open.
- ? (computed from ev.key === '?' or 'Shift+/', no modifier
keys held): toggle the overlay.
Both branches return early so the existing Cmd+Z / Cmd+C / etc.
handlers below them still work.
Tests: 3 new (1386 total) covering the toolbar toggle, the
? + Esc keyboard flow, and that every shortcut the user can
trigger is listed in the modal.
Amit Haridas
This commit is contained in:
@@ -1212,6 +1212,10 @@
|
||||
btnDistributeH: document.getElementById('fc-btn-distribute-h'),
|
||||
btnDistributeV: document.getElementById('fc-btn-distribute-v'),
|
||||
btnSelectAll: document.getElementById('fc-btn-select-all'),
|
||||
btnHelp: document.getElementById('fc-btn-help'),
|
||||
shortcutsModal: document.getElementById('fc-shortcuts-modal'),
|
||||
shortcutsOverlay: document.getElementById('fc-shortcuts-overlay'),
|
||||
shortcutsClose: document.getElementById('fc-shortcuts-close'),
|
||||
btnUndo: document.getElementById('fc-btn-undo'),
|
||||
btnRedo: document.getElementById('fc-btn-redo'),
|
||||
historyCount: document.getElementById('fc-history-count'),
|
||||
@@ -2069,6 +2073,24 @@
|
||||
});
|
||||
}
|
||||
|
||||
// v4.13.0 — Keyboard shortcuts overlay. Triggered by the toolbar
|
||||
// button or the ? key. Esc closes. Wired as a separate modal (not
|
||||
// via promptInline / confirmInline) because those are single-input
|
||||
// forms; this one is a read-only table.
|
||||
function showShortcutsOverlay() {
|
||||
if (els.shortcutsModal) els.shortcutsModal.hidden = false;
|
||||
if (els.shortcutsOverlay) els.shortcutsOverlay.hidden = false;
|
||||
}
|
||||
function hideShortcutsOverlay() {
|
||||
if (els.shortcutsModal) els.shortcutsModal.hidden = true;
|
||||
if (els.shortcutsOverlay) els.shortcutsOverlay.hidden = true;
|
||||
}
|
||||
if (els.btnHelp) els.btnHelp.addEventListener('click', showShortcutsOverlay);
|
||||
if (els.shortcutsClose) els.shortcutsClose.addEventListener('click', hideShortcutsOverlay);
|
||||
if (els.shortcutsOverlay) {
|
||||
els.shortcutsOverlay.addEventListener('click', hideShortcutsOverlay);
|
||||
}
|
||||
|
||||
// v4.13.0 — Open from .mmd/.md file. Pops a system Open dialog,
|
||||
// strips the ```mermaid fence (if any), parses via fromMermaid()
|
||||
// (inlined above) and replaces the current graph. Confirms
|
||||
@@ -2150,10 +2172,29 @@
|
||||
// Keyboard shortcuts — Ctrl/Cmd+Z / Ctrl/Cmd+Shift+Z. v4.13.0 — added
|
||||
// copy/paste/duplicate (Cmd+C / Cmd+V / Cmd+D) plus Delete/Backspace
|
||||
// for the canvas-owned selection (replaces the old DOM .selected read).
|
||||
// v4.13.0 — ? opens the shortcuts overlay; Esc closes it.
|
||||
let _clipboard = null; // module-level clipboard for Cmd+C/V/D
|
||||
document.addEventListener('keydown', (ev) => {
|
||||
// Esc closes the shortcuts overlay regardless of meta state.
|
||||
if (ev.key === 'Escape' && els.shortcutsModal && !els.shortcutsModal.hidden) {
|
||||
hideShortcutsOverlay();
|
||||
ev.preventDefault();
|
||||
return;
|
||||
}
|
||||
// ? toggles the overlay. Use Shift+/ since ? requires Shift on US
|
||||
// keyboards; this catches both the literal character and the key.
|
||||
const isMeta = ev.ctrlKey || ev.metaKey;
|
||||
if ((ev.key === '?' || (ev.key === '/' && ev.shiftKey)) && !isMeta && !ev.altKey) {
|
||||
if (els.shortcutsModal && els.shortcutsModal.hidden) {
|
||||
showShortcutsOverlay();
|
||||
} else {
|
||||
hideShortcutsOverlay();
|
||||
}
|
||||
ev.preventDefault();
|
||||
return;
|
||||
}
|
||||
if (!_store) return;
|
||||
const meta = ev.ctrlKey || ev.metaKey;
|
||||
const meta = isMeta;
|
||||
if (meta && !ev.shiftKey && ev.key.toLowerCase() === 'z') {
|
||||
ev.preventDefault();
|
||||
_store.undo();
|
||||
|
||||
Reference in New Issue
Block a user