Files
markdown-converter/src/flowchart-generator.html
T
amitwh 1a357bbd6a 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
2026-09-30 22:43:05 +05:30

707 lines
22 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flowchart Generator - MarkdownConverter</title>
<!--
v4.9.6 — Standalone Flowchart Generator window.
Stylesheets are src/-relative (mirrors src/index.html). NO ../ escape —
the standalone BrowserWindow's document base is src/, so a ../fonts.css
would resolve outside src/ and fail to load.
v4.11.0 — Added a node-list panel (#fc-nodelist) below the canvas
that exposes every mutation via buttons and form controls. The
canvas itself is purely visual now (the v4.10.0 floating selection
toolbar that fired on click hit-testing was unreliable in the
user's Electron runtime). Removed #fc-selection-toolbar.
v4.12.0 — Reorganised #fc-nodelist so the connect form is the
second section (right after Add Node) instead of being buried below
the node/edge lists; added per-node color picker; added
"Save to File" button next to "Insert at Cursor".
-->
<link rel="stylesheet" href="fonts.css" />
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="styles-modern.css" />
<link rel="stylesheet" href="styles-concreteinfo.css" />
<link rel="stylesheet" href="styles-sidebar.css" />
<link rel="stylesheet" href="styles-zen.css" />
<link rel="stylesheet" href="styles-welcome.css" />
<link rel="stylesheet" href="katex.min.css" />
<style>
:root {
--fc-bg: #fafafa;
--fc-text: #1f2328;
--fc-border: #d0d7de;
--fc-accent: #e5461f;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', system-ui, sans-serif;
background: var(--fc-bg);
color: var(--fc-text);
min-height: 100vh;
display: flex;
flex-direction: column;
}
.fc-header {
background: linear-gradient(135deg, #464646 0%, #0d0b09 100%);
padding: 12px 20px;
border-bottom: 3px solid var(--fc-accent);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.fc-header h1 {
color: #fff;
font-size: 1.05rem;
font-weight: 600;
}
.fc-hint {
color: #9a9696;
font-size: 0.75rem;
}
.fc-toolbar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-bottom: 1px solid var(--fc-border);
background: #fff;
}
.fc-btn {
padding: 6px 14px;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
border: 1px solid var(--fc-border);
background: #fff;
color: var(--fc-text);
}
.fc-btn:hover {
border-color: var(--fc-accent);
}
.fc-btn.primary {
background: var(--fc-accent);
color: #fff;
border-color: var(--fc-accent);
}
.fc-btn.primary:hover {
background: #c93a18;
}
.fc-status {
margin-left: auto;
font-size: 0.75rem;
color: #6e7681;
}
/* v4.12.0 — the status line moved inside #fc-nodelist (no longer a
* flex toolbar child), so `margin-left: auto` is a no-op there. Reset
* it explicitly so the status sits flush-left below the toolbar row. */
.fc-nodelist .fc-status {
margin-left: 0;
display: block;
min-height: 1em;
}
.fc-split {
display: flex;
flex: 1;
min-height: 0;
}
/* v4.11.0 — left column holds both the canvas and the node-list panel.
* Flex-column so the canvas expands to fill remaining space and the
* nodelist sits below with a fixed max-height. */
.fc-left {
flex: 7;
min-width: 0;
display: flex;
flex-direction: column;
}
.fc-canvas-host {
flex: 1;
min-width: 0;
min-height: 200px;
position: relative;
background: #fafafa;
border-right: 1px solid var(--fc-border);
}
.fc-canvas-host svg.flowchart-canvas {
width: 100%;
height: 100%;
display: block;
cursor: default;
}
.fc-preview-host {
flex: 3;
min-width: 0;
display: flex;
flex-direction: column;
background: #fafafa;
}
.fc-preview-source {
flex: 1;
min-height: 120px;
margin: 0;
padding: 12px;
font-family: var(--mono-font, 'JetBrains Mono', monospace);
font-size: 12px;
overflow: auto;
white-space: pre;
border-bottom: 1px solid var(--fc-border);
background: #fff;
color: var(--fc-text);
}
.fc-preview-render {
flex: 1;
min-height: 120px;
padding: 12px;
overflow: auto;
background: #fff;
}
/* v4.9.6 — forced light surfaces inside the standalone window.
* Diverges from body theme to guarantee readability, mirroring the
* v4.9.5 fix in src/styles-sidebar.css for the (now-legacy) sidebar. */
.fc-canvas-host,
.fc-preview-host {
background: #fafafa !important;
color: #1f2328 !important;
}
.flowchart-node rect,
.flowchart-node polygon {
fill: #ffffff !important;
stroke: #1f2328 !important;
stroke-width: 1.25;
}
.flowchart-node text {
fill: #1f2328 !important;
}
.flowchart-edge {
stroke: #1f2328 !important;
}
/* v4.13.0 — visual polish. Adds a visible selection ring (was
previously only the .selected class without a distinct colour),
a hover tint, an enlarged resize-handle hit area, a smoother
modal dialog animation, and a proper opaque background behind
edge labels so they stay readable across curved connectors. */
.flowchart-node {
cursor: grab;
transition: filter 0.12s ease-out;
}
.flowchart-node:hover .flowchart-node-shape {
filter: drop-shadow(0 0 2px rgba(37, 99, 235, 0.45));
}
.flowchart-node.selected .flowchart-node-shape {
stroke: #2563eb !important;
stroke-width: 2.25;
}
.flowchart-edge {
cursor: pointer;
}
.flowchart-edge:hover {
stroke: #2563eb !important;
}
.flowchart-edge.selected {
stroke: #2563eb !important;
stroke-width: 2.5;
}
/* Resize handle — larger invisible hit area + visible square. */
.flowchart-resize-handle {
cursor: nwse-resize;
}
.flowchart-resize-handle-hit {
fill: transparent;
stroke: none;
}
.flowchart-resize-handle-grip {
fill: #2563eb;
stroke: #1e40af;
stroke-width: 1;
}
/* Edge label background — keeps labels legible across curves by
giving them an opaque white pill behind the text. */
.flowchart-edge-label-bg {
fill: #ffffff;
stroke: #d1d5db;
stroke-width: 0.5;
}
/* Modal dialog — fade + scale-in entrance. */
.fc-modal {
animation: fc-modal-in 0.15s ease-out;
}
@keyframes fc-modal-in {
from {
opacity: 0;
transform: translate(-50%, -50%) scale(0.96);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
.fc-modal-overlay {
animation: fc-overlay-in 0.12s ease-out;
}
@keyframes fc-overlay-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* v4.13.0 — keyboard shortcuts modal + kbd tags. The modal
reuses the existing .fc-modal animation; the table lays
out Action / Shortcut columns, with <kbd> tags for the
key combos styled to look like physical keys. */
.fc-shortcuts-modal {
max-width: 460px;
width: 90vw;
}
.fc-shortcuts-table {
width: 100%;
border-collapse: collapse;
margin: 12px 0 16px;
font-size: 0.9rem;
}
.fc-shortcuts-table th {
text-align: left;
font-weight: 600;
padding: 4px 0;
border-bottom: 1px solid var(--fc-border, #d1d5db);
color: #4b5563;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.fc-shortcuts-table td {
padding: 6px 8px;
border-bottom: 1px solid #f3f4f6;
}
.fc-shortcuts-table td:last-child {
text-align: right;
white-space: nowrap;
}
kbd {
display: inline-block;
padding: 1px 6px;
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
font-size: 0.78rem;
background: #f3f4f6;
border: 1px solid #d1d5db;
border-bottom-width: 2px;
border-radius: 3px;
color: #1f2937;
margin: 0 1px;
}
/* v4.10.0 — preview-render info card explaining the layout */
.fc-preview-render-note {
font-size: 0.75rem;
color: #6e7681;
font-style: italic;
}
/* ============ v4.11.0 — node-list panel (button-driven UI) ============ */
.fc-nodelist {
border-top: 1px solid var(--fc-border);
padding: 16px 20px;
background: #fff;
max-height: 40vh;
overflow-y: auto;
}
.fc-section-title {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #57606a;
margin: 12px 0 8px;
font-weight: 600;
}
.fc-section-title:first-child {
margin-top: 0;
}
.fc-add-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.fc-history-row {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 12px;
}
.fc-history-count {
margin-left: auto;
font-size: 11px;
color: var(--fc-border);
font-variant-numeric: tabular-nums;
}
.fc-ul {
list-style: none;
padding: 0;
margin: 0 0 12px;
}
.fc-ul li {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-bottom: 1px solid var(--fc-border);
}
.fc-ul li .fc-node-id {
font-family: monospace;
color: #57606a;
min-width: 80px;
}
.fc-ul li input {
flex: 1;
padding: 4px 6px;
border: 1px solid var(--fc-border);
border-radius: 4px;
}
.fc-ul li select {
padding: 4px;
border: 1px solid var(--fc-border);
border-radius: 4px;
}
.fc-ul li button {
padding: 4px 10px;
border: 1px solid var(--fc-border);
background: #f6f8fa;
color: #1f2328;
border-radius: 4px;
cursor: pointer;
}
.fc-ul li button.fc-delete {
background: #cf222e;
color: #fff;
border-color: #cf222e;
}
.fc-connect-row {
display: flex;
align-items: center;
gap: 8px;
margin: 12px 0;
flex-wrap: wrap;
}
.fc-connect-row select {
padding: 4px;
border: 1px solid var(--fc-border);
border-radius: 4px;
min-width: 100px;
}
/* v4.12.0 — small helper text under section titles */
.fc-help {
font-size: 11px;
color: #57606a;
margin: 0 0 8px;
}
/* v4.12.0 — per-node fill color picker sits next to the kind <select>
* and label <input>. Native <input type="color"> gives a platform-native
* color dialog so the user can pick any color, including custom. */
.fc-ul li input[type='color'] {
flex: 0 0 auto;
padding: 0;
width: 32px;
height: 24px;
border: 1px solid var(--fc-border);
border-radius: 4px;
cursor: pointer;
background: #fff;
}
.fc-toolbar-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 8px;
}
</style>
</head>
<body>
<div class="fc-header">
<h1>Flowchart Generator</h1>
<span class="fc-hint"
>Use the panel below the canvas to add nodes and edges &middot; Click Insert at Cursor to
send to editor</span
>
</div>
<div class="fc-split">
<div class="fc-left">
<div class="fc-canvas-host" id="canvas-host"></div>
<!-- v4.13.0 — keyboard shortcuts overlay. Triggered by the
"Shortcuts (?)" toolbar button or the ? key. Hidden by
default; .open toggles visibility + the fade-in animation. -->
<div class="fc-modal-overlay" id="fc-shortcuts-overlay" hidden></div>
<div
class="fc-modal fc-shortcuts-modal"
id="fc-shortcuts-modal"
role="dialog"
aria-labelledby="fc-shortcuts-title"
hidden
>
<h2 id="fc-shortcuts-title">Keyboard Shortcuts</h2>
<table class="fc-shortcuts-table">
<thead>
<tr>
<th>Action</th>
<th>Shortcut</th>
</tr>
</thead>
<tbody>
<tr>
<td>Undo</td>
<td><kbd>Ctrl/⌘</kbd>+<kbd>Z</kbd></td>
</tr>
<tr>
<td>Redo</td>
<td><kbd>Ctrl/⌘</kbd>+<kbd>Shift</kbd>+<kbd>Z</kbd></td>
</tr>
<tr>
<td>Copy selection</td>
<td><kbd>Ctrl/⌘</kbd>+<kbd>C</kbd></td>
</tr>
<tr>
<td>Paste</td>
<td><kbd>Ctrl/⌘</kbd>+<kbd>V</kbd></td>
</tr>
<tr>
<td>Duplicate</td>
<td><kbd>Ctrl/⌘</kbd>+<kbd>D</kbd></td>
</tr>
<tr>
<td>Delete selected</td>
<td><kbd>Delete</kbd> / <kbd>Backspace</kbd></td>
</tr>
<tr>
<td>Connect from a node</td>
<td><kbd>Alt</kbd>+drag</td>
</tr>
<tr>
<td>Pan view</td>
<td><kbd>Shift</kbd>+drag on background</td>
</tr>
<tr>
<td>Multi-select</td>
<td><kbd>Shift</kbd>+click / drag-rect</td>
</tr>
<tr>
<td>Zoom in / out</td>
<td><kbd>Ctrl</kbd>+wheel</td>
</tr>
<tr>
<td>Reset All</td>
<td>(toolbar button)</td>
</tr>
<tr>
<td>Show this overlay</td>
<td><kbd>?</kbd></td>
</tr>
</tbody>
</table>
<div class="fc-modal-actions">
<button class="fc-btn primary" id="fc-shortcuts-close">Close (Esc)</button>
</div>
</div>
<!--
v4.11.0 — button-driven UI. Every mutation (add/delete node,
add/delete edge, change label, change kind) goes through the
controls in this panel. The canvas is purely visual now.
v4.12.0 — Reorganised the panel so the Connect form is the
second section (right after Add Node) — user feedback said
the old layout buried it below the node/edge lists and they
couldn't find it. Also added a per-node color picker and a
Save to File button alongside Insert at Cursor.
-->
<div id="fc-nodelist" class="fc-nodelist">
<h3 class="fc-section-title">History</h3>
<div class="fc-history-row">
<button class="fc-btn" id="fc-btn-undo" title="Undo (Ctrl+Z)">↶ Undo</button>
<button class="fc-btn" id="fc-btn-redo" title="Redo (Ctrl+Shift+Z)">↷ Redo</button>
<span class="fc-history-count" id="fc-history-count" aria-live="polite">0</span>
</div>
<h3 class="fc-section-title">Add Node</h3>
<div class="fc-add-row">
<button class="fc-btn" data-add="process">+ Process</button>
<button class="fc-btn" data-add="decision">+ Decision</button>
<button class="fc-btn" data-add="terminator">+ Terminator</button>
<button class="fc-btn" data-add="subroutine">+ Subroutine</button>
<button class="fc-btn" data-add="document">+ Document</button>
</div>
<h3 class="fc-section-title">Add Connection</h3>
<p class="fc-help">Pick two nodes and click "+ Edge" to connect them.</p>
<div class="fc-connect-row">
<label for="fc-connect-from">From:</label>
<select id="fc-connect-from"></select>
<label for="fc-connect-to">To:</label>
<select id="fc-connect-to"></select>
<button class="fc-btn" id="fc-connect-btn">+ Edge</button>
<button class="fc-btn" id="fc-connect-cancel">Refresh</button>
</div>
<h3 class="fc-section-title">Nodes <span id="fc-node-count">0</span></h3>
<ul id="fc-nodelist-ul" class="fc-ul"></ul>
<h3 class="fc-section-title">Edges <span id="fc-edge-count">0</span></h3>
<ul id="fc-edgelist-ul" class="fc-ul"></ul>
<h3 class="fc-section-title">Export</h3>
<div class="fc-toolbar-row">
<button
class="fc-btn primary"
id="fc-btn-insert"
title="Insert Mermaid block at cursor in main editor"
>
Insert at Cursor
</button>
<button
class="fc-btn"
id="fc-btn-save"
title="Save Mermaid source to a .mmd / .md / .txt file"
>
Save to File
</button>
<button
class="fc-btn"
id="fc-btn-open"
title="Open a .mmd / .md file and load its flowchart"
>
Open from File
</button>
<button class="fc-btn" id="fc-btn-reset" title="Clear all nodes and edges">
Reset All
</button>
</div>
<h3 class="fc-section-title">Align (multi-select)</h3>
<div class="fc-toolbar-row">
<button
class="fc-btn"
id="fc-btn-select-all"
title="Select every node so the alignment buttons work"
>
Select All
</button>
</div>
<div class="fc-toolbar-row">
<button
class="fc-btn"
id="fc-btn-align-left"
title="Align selected nodes to the left edge"
>
Align Left
</button>
<button
class="fc-btn"
id="fc-btn-align-right"
title="Align selected nodes to the right edge"
>
Align Right
</button>
<button
class="fc-btn"
id="fc-btn-align-top"
title="Align selected nodes to the top edge"
>
Align Top
</button>
<button
class="fc-btn"
id="fc-btn-align-bottom"
title="Align selected nodes to the bottom edge"
>
Align Bottom
</button>
<button
class="fc-btn"
id="fc-btn-align-center-h"
title="Align selected nodes to a common horizontal center"
>
Center H
</button>
<button
class="fc-btn"
id="fc-btn-align-center-v"
title="Align selected nodes to a common vertical center"
>
Center V
</button>
<button
class="fc-btn"
id="fc-btn-distribute-h"
title="Distribute selected nodes evenly between leftmost and rightmost"
>
Distribute H
</button>
<button
class="fc-btn"
id="fc-btn-distribute-v"
title="Distribute selected nodes evenly between topmost and bottommost"
>
Distribute V
</button>
</div>
<h3 class="fc-section-title">Export Image</h3>
<div class="fc-toolbar-row">
<button class="fc-btn" id="fc-btn-export-svg" title="Export the canvas as a .svg file">
Export SVG
</button>
<button class="fc-btn" id="fc-btn-export-png" title="Export the canvas as a .png file">
Export PNG
</button>
<button class="fc-btn" id="fc-btn-export-jpg" title="Export the canvas as a .jpg file">
Export JPG
</button>
<button
class="fc-btn"
id="fc-btn-export-vsdx"
title="Export the canvas as an editable Visio .vsdx file"
>
Export Visio
</button>
<button
class="fc-btn"
id="fc-btn-help"
title="Show keyboard shortcuts (press ? any time)"
>
Shortcuts (?)
</button>
</div>
<span id="fc-status" aria-live="polite"></span>
</div>
</div>
<div class="fc-preview-host" id="preview-host">
<pre class="fc-preview-source" id="preview-source"></pre>
<div class="fc-preview-render" id="preview-render"></div>
</div>
</div>
<!--
v4.9.8 — bundle everything into one script. The four pure modules
(shapes / mermaid / store / canvas) plus the controller bootstrap
live in src/renderer/flowchart-bundle.js. No cross-file script-tag
ordering, no UMD wrappers, no `require()` — the bundle sets the
four window globals before the controller's bootstrap() runs.
v4.11.0 — the bundle's controller bootstrap wires up the
#fc-nodelist panel. The legacy #fc-selection-toolbar floating
toolbar is gone.
v4.12.0 — the bundle also wires the new #fc-btn-save button and
the per-node color picker inside the node list.
-->
<script src="renderer/flowchart-bundle.js"></script>
</body>
</html>