mirror of
https://github.com/amitwh/markdown-converter.git
synced 2026-10-01 09:19:34 +05:30
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
707 lines
22 KiB
HTML
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 · 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>
|