mirror of
https://github.com/amitwh/markdown-converter.git
synced 2026-10-01 09:19:34 +05:30
feat(flowchart): discoverable connect form + per-node color + save-to-file export; v4.12.0
User feedback on v4.11.0: the Add Connection form was buried below the
node/edge lists and they couldn't find it; they also asked for per-node
color and Save to File export. v4.12.0 reorganises the #fc-nodelist panel
to put the connect form right after the Add Node buttons, adds a native
<input type="color"> per node row that drives a new store.setNodeColor
mutator (with serialize/deserialize round-trip), and wires a Save to File
button that pops a system save dialog via a new 'save-text-file' IPC
channel.
- src/flowchart-generator.html — panel order is now Add Node /
Add Connection / Nodes / Edges / Export (Insert · Save · Reset).
Removed the legacy top toolbar; status moved into the panel.
Added .fc-help, per-node color-picker CSS, .fc-toolbar-row.
- src/flowchart/flowchart-shapes.js — shapeSvg() accepts an optional
6th 'color' arg; emits fill=... on rects and polygons. Falls back to
#ffffff for empty/null/undefined so old callers keep working.
- src/flowchart/flowchart-store.js — setNodeColor(id, color) mutator
with snapshot/emit, normalizeColor() helper (hex validation),
addNode accepts color, deserialize normalises missing color.
- src/renderer/flowchart-bundle.js — mirrors all of the above inline
(the bundle is loaded as a single <script>), wires fc-btn-save to
api.saveFile, passes node.color to shapeSvg in the canvas render,
and renders <input type='color'> per node row.
- src/main.js — new ipcMain.handle('save-text-file', ...) using a
system Save dialog (mirrors the ascii:save handler shape).
- src/preload.js — added 'save-text-file' to ALLOWED_SEND_CHANNELS
and a saveFile(content, defaultName) helper on the flowchart bridge.
Tests: 92/92 suites, 1165/1165 tests pass on this run
- +9 store tests (color defaults, setNodeColor, undo, hex validation,
round-trip, deserialize normalisation)
- +7 shapes tests (fill color on all 5 kinds, fallback to #ffffff)
- +6 controller tests (color picker wires setNodeColor, canvas rect
reflects color, Save to File calls api.saveFile with the fenced
Mermaid source and 'flowchart.mmd', cancel + error paths surface in
status)
Verification:
- npm run lint clean
- npm run format:check clean
- npm test 92/92 suites, 1165/1165 tests pass
Amit Haridas
This commit is contained in:
@@ -15,6 +15,11 @@
|
||||
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" />
|
||||
@@ -97,6 +102,14 @@
|
||||
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;
|
||||
@@ -258,6 +271,32 @@
|
||||
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>
|
||||
@@ -269,18 +308,6 @@
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="fc-toolbar">
|
||||
<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-reset" title="Clear all nodes and edges">Reset</button>
|
||||
<span class="fc-status" id="fc-status" aria-live="polite"></span>
|
||||
</div>
|
||||
|
||||
<div class="fc-split">
|
||||
<div class="fc-left">
|
||||
<div class="fc-canvas-host" id="canvas-host"></div>
|
||||
@@ -288,6 +315,12 @@
|
||||
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">Add Node</h3>
|
||||
@@ -299,12 +332,8 @@
|
||||
<button class="fc-btn" data-add="document">+ Document</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">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>
|
||||
@@ -313,6 +342,34 @@
|
||||
<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-reset" title="Clear all nodes and edges">
|
||||
Reset All
|
||||
</button>
|
||||
</div>
|
||||
<span id="fc-status" aria-live="polite"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fc-preview-host" id="preview-host">
|
||||
@@ -331,6 +388,9 @@
|
||||
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>
|
||||
|
||||
@@ -3,6 +3,11 @@
|
||||
* Each `shapeSvg` returns ONE SVG element string — the canvas wraps it in a
|
||||
* <g data-node-id="…"> alongside a <text> label.
|
||||
*
|
||||
* v4.12.0 — Added an optional `color` (6th) argument so callers can set a
|
||||
* per-node fill color. Falls back to `#ffffff` when omitted so callers that
|
||||
* don't care about color (the existing tests, the sidebar panel) keep
|
||||
* working unchanged.
|
||||
*
|
||||
* Pure module: no DOM, no globals, no side effects.
|
||||
*
|
||||
* @module flowchart-shapes
|
||||
@@ -15,21 +20,23 @@ const DEFAULT_WIDTH = 140;
|
||||
const DEFAULT_HEIGHT = 60;
|
||||
const LABEL_PADDING_X = 16;
|
||||
const LABEL_PADDING_Y = 12;
|
||||
const DEFAULT_FILL = '#ffffff';
|
||||
|
||||
function shapeSvg(kind, x, y, width, height) {
|
||||
function shapeSvg(kind, x, y, width, height, color) {
|
||||
if (!SHAPE_KINDS.includes(kind)) {
|
||||
throw new Error(`flowchart-shapes: unknown shape kind "${kind}"`);
|
||||
}
|
||||
const fill = typeof color === 'string' && color.length > 0 ? color : DEFAULT_FILL;
|
||||
switch (kind) {
|
||||
case 'process':
|
||||
return `<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="4" ry="4" />`;
|
||||
return `<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="4" ry="4" fill="${fill}" />`;
|
||||
case 'terminator':
|
||||
return `<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="${height / 2}" ry="${height / 2}" />`;
|
||||
return `<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="${height / 2}" ry="${height / 2}" fill="${fill}" />`;
|
||||
case 'subroutine': {
|
||||
const inset = 4;
|
||||
return (
|
||||
`<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="4" ry="4" />` +
|
||||
`<rect x="${x + inset}" y="${y + inset}" width="${width - 2 * inset}" height="${height - 2 * inset}" rx="4" ry="4" />`
|
||||
`<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="4" ry="4" fill="${fill}" />` +
|
||||
`<rect x="${x + inset}" y="${y + inset}" width="${width - 2 * inset}" height="${height - 2 * inset}" rx="4" ry="4" fill="${fill}" />`
|
||||
);
|
||||
}
|
||||
case 'decision': {
|
||||
@@ -39,7 +46,7 @@ function shapeSvg(kind, x, y, width, height) {
|
||||
const top = `${cx},${y}`;
|
||||
const right = `${x + width},${cy}`;
|
||||
const bottom = `${cx},${y + height}`;
|
||||
return `<polygon points="${left} ${top} ${right} ${bottom}" />`;
|
||||
return `<polygon points="${left} ${top} ${right} ${bottom}" fill="${fill}" />`;
|
||||
}
|
||||
case 'document': {
|
||||
// Parallelogram: top-right and bottom-right indented by ~20% of height.
|
||||
@@ -48,7 +55,7 @@ function shapeSvg(kind, x, y, width, height) {
|
||||
const tr = `${x + width},${y}`;
|
||||
const br = `${x + width - skew},${y + height}`;
|
||||
const bl = `${x},${y + height}`;
|
||||
return `<polygon points="${tl} ${tr} ${br} ${bl}" />`;
|
||||
return `<polygon points="${tl} ${tr} ${br} ${bl}" fill="${fill}" />`;
|
||||
}
|
||||
default:
|
||||
throw new Error(`flowchart-shapes: unknown shape kind "${kind}"`);
|
||||
|
||||
@@ -2,9 +2,12 @@
|
||||
* Pure graph store for the flow chart editor.
|
||||
*
|
||||
* Graph = { nodes: Node[], edges: Edge[] }
|
||||
* Node: { id, kind, x, y, label }
|
||||
* Node: { id, kind, x, y, label, color? } (color: CSS hex string, defaults to #ffffff)
|
||||
* Edge: { id, fromNodeId, toNodeId, kind: 'solid'|'dotted'|'thick', label? }
|
||||
*
|
||||
* v4.12.0 — Nodes carry an optional `color` field (CSS hex string).
|
||||
* `setNodeColor(id, color)` mutates it; `serialize`/`deserialize` round-trip it.
|
||||
*
|
||||
* IO is injected for unit tests + persistence:
|
||||
* { persistencePath, readFile, writeFile, now }
|
||||
*
|
||||
@@ -14,6 +17,7 @@
|
||||
const NODE_KINDS = ['process', 'decision', 'terminator', 'subroutine', 'document'];
|
||||
const EDGE_KINDS = ['solid', 'dotted', 'thick'];
|
||||
const UNDO_LIMIT = 50;
|
||||
const DEFAULT_NODE_COLOR = '#ffffff';
|
||||
|
||||
function clone(obj) {
|
||||
return JSON.parse(JSON.stringify(obj));
|
||||
@@ -35,6 +39,22 @@ function isValidNode(node) {
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Normalise a node's `color` field. Accepts a CSS hex string (with or without
|
||||
* the leading `#`), rejects anything else by falling back to the default.
|
||||
* Returns `undefined` when the input is falsy so callers can use the spread
|
||||
* operator (`{ ...node, ...normalizeColor(node.color) }`) without overwriting
|
||||
* existing fields with `undefined`.
|
||||
*/
|
||||
function normalizeColor(color) {
|
||||
if (typeof color !== 'string' || color.length === 0) return { color: DEFAULT_NODE_COLOR };
|
||||
const trimmed = color.trim();
|
||||
// Hex: #rgb / #rrggbb (case-insensitive). Anything else falls back to default.
|
||||
const hex = /^#?[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/.test(trimmed);
|
||||
if (!hex) return { color: DEFAULT_NODE_COLOR };
|
||||
return { color: trimmed.startsWith('#') ? trimmed : `#${trimmed}` };
|
||||
}
|
||||
|
||||
function isValidEdge(edge) {
|
||||
return (
|
||||
edge &&
|
||||
@@ -82,12 +102,19 @@ function create(io) {
|
||||
return clone(graph);
|
||||
}
|
||||
|
||||
function addNode({ kind, x, y, label = '' }) {
|
||||
function addNode({ kind, x, y, label = '', color }) {
|
||||
if (!NODE_KINDS.includes(kind)) {
|
||||
throw new Error(`flowchart-store: unknown node kind "${kind}"`);
|
||||
}
|
||||
snapshot();
|
||||
const node = { id: newId('n'), kind, x, y, label };
|
||||
const node = {
|
||||
id: newId('n'),
|
||||
kind,
|
||||
x,
|
||||
y,
|
||||
label,
|
||||
...normalizeColor(color),
|
||||
};
|
||||
graph.nodes.push(node);
|
||||
emit();
|
||||
return node;
|
||||
@@ -128,6 +155,14 @@ function create(io) {
|
||||
emit();
|
||||
}
|
||||
|
||||
function setNodeColor(id, color) {
|
||||
const idx = findNodeIndex(id);
|
||||
if (idx === -1) throw new Error(`flowchart-store: unknown node id "${id}"`);
|
||||
snapshot();
|
||||
graph.nodes[idx] = { ...graph.nodes[idx], ...normalizeColor(color) };
|
||||
emit();
|
||||
}
|
||||
|
||||
function removeNode(id) {
|
||||
const idx = findNodeIndex(id);
|
||||
if (idx === -1) return;
|
||||
@@ -219,7 +254,10 @@ function create(io) {
|
||||
graph = { nodes: [], edges: [] };
|
||||
return;
|
||||
}
|
||||
const nodes = Array.isArray(parsed.nodes) ? parsed.nodes.filter(isValidNode) : [];
|
||||
const rawNodes = Array.isArray(parsed.nodes) ? parsed.nodes.filter(isValidNode) : [];
|
||||
// v4.12.0 — normalise the optional `color` field on every node so the
|
||||
// rehydrated graph has a guaranteed valid color (#ffffff by default).
|
||||
const nodes = rawNodes.map((n) => ({ ...n, ...normalizeColor(n.color) }));
|
||||
const nodeIds = new Set(nodes.map((n) => n.id));
|
||||
const edges = Array.isArray(parsed.edges)
|
||||
? parsed.edges.filter(
|
||||
@@ -242,6 +280,7 @@ function create(io) {
|
||||
moveNode,
|
||||
setNodeLabel,
|
||||
setNodeKind,
|
||||
setNodeColor,
|
||||
removeNode,
|
||||
connect,
|
||||
disconnect,
|
||||
|
||||
+23
@@ -5530,6 +5530,29 @@ ipcMain.on('open-flowchart-generator', () => {
|
||||
openFlowchartGenerator();
|
||||
});
|
||||
|
||||
// v4.12.0 — Save the flowchart's Mermaid source to a user-chosen file via a
|
||||
// system Save dialog. Mirrors the v4.9.6 ASCII `ascii:save` handler shape
|
||||
// (`{ canceled } | { canceled: false, path }`) but exposes a generic IPC
|
||||
// channel so the standalone Flowchart Generator window can call it. The
|
||||
// destination is fully user-controlled (the dialog enforces the path), so no
|
||||
// userData-sandbox check is applied here.
|
||||
ipcMain.handle('save-text-file', async (event, { content, defaultName } = {}) => {
|
||||
const { dialog } = require('electron');
|
||||
const win = BrowserWindow.fromWebContents(event.sender);
|
||||
const result = await dialog.showSaveDialog(win || undefined, {
|
||||
title: 'Save Mermaid Source',
|
||||
defaultPath: typeof defaultName === 'string' && defaultName ? defaultName : 'flowchart.mmd',
|
||||
filters: [
|
||||
{ name: 'Mermaid', extensions: ['mmd', 'md'] },
|
||||
{ name: 'Text', extensions: ['txt'] },
|
||||
{ name: 'All Files', extensions: ['*'] },
|
||||
],
|
||||
});
|
||||
if (result.canceled || !result.filePath) return { canceled: true };
|
||||
await require('fs').promises.writeFile(result.filePath, content ?? '', 'utf-8');
|
||||
return { canceled: false, path: result.filePath };
|
||||
});
|
||||
|
||||
// ============================================
|
||||
// ASCII Art Generator Window
|
||||
// ============================================
|
||||
|
||||
@@ -101,6 +101,9 @@ const ALLOWED_SEND_CHANNELS = [
|
||||
// Flowchart generator (standalone window — v4.9.6)
|
||||
'open-flowchart-generator',
|
||||
|
||||
// Flowchart generator: dialog-based file save (v4.12.0)
|
||||
'save-text-file',
|
||||
|
||||
// ASCII art generator (standalone window — invoke channels)
|
||||
'ascii:generate',
|
||||
'ascii:list-fonts',
|
||||
@@ -533,10 +536,16 @@ contextBridge.exposeInMainWorld('electronAPI', {
|
||||
// write-text-file) which sandbox writes to <userData>. Insert at cursor
|
||||
// sends the Mermaid-fenced source through the existing 'insert-content'
|
||||
// channel which the renderer.js sidebar panel also uses.
|
||||
//
|
||||
// v4.12.0 — `saveFile` opens a system Save dialog and writes the content
|
||||
// to a user-chosen path. Bypasses the userData sandbox (user can save
|
||||
// anywhere) — the dialog enforces the destination.
|
||||
flowchart: {
|
||||
getUserDataPath: () => ipcRenderer.invoke('get-user-data-path'),
|
||||
readFile: (p) => ipcRenderer.invoke('read-text-file', p),
|
||||
writeFile: (p, content) => ipcRenderer.invoke('write-text-file', { path: p, content }),
|
||||
saveFile: (content, defaultName) =>
|
||||
ipcRenderer.invoke('save-text-file', { content, defaultName }),
|
||||
insertAtCursor: (text) => ipcRenderer.send('insert-content', text),
|
||||
},
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* v4.11.0 — Bundled single-file Flowchart Generator loader.
|
||||
* v4.12.0 — Bundled single-file Flowchart Generator loader.
|
||||
*
|
||||
* Inlines the four pure modules (flowchart-shapes / flowchart-mermaid /
|
||||
* flowchart-store / flowchart-canvas) plus the renderer controller
|
||||
@@ -49,6 +49,18 @@
|
||||
* selection state, no more floating toolbar. `promptInline` /
|
||||
* `confirmInline` are kept only for the Reset confirmation
|
||||
* modal.
|
||||
* v4.12.0 — User feedback: the v4.11.0 connect form (From dropdown +
|
||||
* To dropdown + "+ Edge") was buried below the node/edge
|
||||
* lists and they couldn't find it. Moved the connect form
|
||||
* up to the second section in #fc-nodelist (right after Add
|
||||
* Node). Also added (a) a per-node color picker in the
|
||||
* node list (`<input type="color">` → `store.setNodeColor`)
|
||||
* — `shapeSvg` now accepts an optional color arg and
|
||||
* normalises `#ffffff` by default; (b) a "Save to File"
|
||||
* button alongside "Insert at Cursor" that opens a system
|
||||
* save dialog via a new `save-text-file` IPC channel. The
|
||||
* standalone top toolbar was removed; Insert / Save / Reset
|
||||
* now live inside the panel's new "Export" section.
|
||||
*
|
||||
* The legacy individual files under src/flowchart/* and
|
||||
* src/renderer/flowchart-controller.js are kept untouched — the
|
||||
@@ -60,26 +72,30 @@
|
||||
'use strict';
|
||||
|
||||
// ========== flowchart-shapes (inlined) ==========
|
||||
// v4.12.0 — accepts an optional `color` (6th) arg so the canvas can paint
|
||||
// each node with its per-node fill color. Falls back to `#ffffff`.
|
||||
const SHAPE_KINDS = ['process', 'decision', 'terminator', 'subroutine', 'document'];
|
||||
const DEFAULT_WIDTH = 140;
|
||||
const DEFAULT_HEIGHT = 60;
|
||||
const LABEL_PADDING_X = 16;
|
||||
const LABEL_PADDING_Y = 12;
|
||||
const DEFAULT_FILL = '#ffffff';
|
||||
|
||||
function shapeSvg(kind, x, y, width, height) {
|
||||
function shapeSvg(kind, x, y, width, height, color) {
|
||||
if (!SHAPE_KINDS.includes(kind)) {
|
||||
throw new Error(`flowchart-shapes: unknown shape kind "${kind}"`);
|
||||
}
|
||||
const fill = typeof color === 'string' && color.length > 0 ? color : DEFAULT_FILL;
|
||||
switch (kind) {
|
||||
case 'process':
|
||||
return `<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="4" ry="4" />`;
|
||||
return `<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="4" ry="4" fill="${fill}" />`;
|
||||
case 'terminator':
|
||||
return `<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="${height / 2}" ry="${height / 2}" />`;
|
||||
return `<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="${height / 2}" ry="${height / 2}" fill="${fill}" />`;
|
||||
case 'subroutine': {
|
||||
const inset = 4;
|
||||
return (
|
||||
`<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="4" ry="4" />` +
|
||||
`<rect x="${x + inset}" y="${y + inset}" width="${width - 2 * inset}" height="${height - 2 * inset}" rx="4" ry="4" />`
|
||||
`<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="4" ry="4" fill="${fill}" />` +
|
||||
`<rect x="${x + inset}" y="${y + inset}" width="${width - 2 * inset}" height="${height - 2 * inset}" rx="4" ry="4" fill="${fill}" />`
|
||||
);
|
||||
}
|
||||
case 'decision': {
|
||||
@@ -89,7 +105,7 @@
|
||||
const top = `${cx},${y}`;
|
||||
const right = `${x + width},${cy}`;
|
||||
const bottom = `${cx},${y + height}`;
|
||||
return `<polygon points="${left} ${top} ${right} ${bottom}" />`;
|
||||
return `<polygon points="${left} ${top} ${right} ${bottom}" fill="${fill}" />`;
|
||||
}
|
||||
case 'document': {
|
||||
// Parallelogram: top-right and bottom-right indented by ~20% of height.
|
||||
@@ -98,7 +114,7 @@
|
||||
const tr = `${x + width},${y}`;
|
||||
const br = `${x + width - skew},${y + height}`;
|
||||
const bl = `${x},${y + height}`;
|
||||
return `<polygon points="${tl} ${tr} ${br} ${bl}" />`;
|
||||
return `<polygon points="${tl} ${tr} ${br} ${bl}" fill="${fill}" />`;
|
||||
}
|
||||
default:
|
||||
throw new Error(`flowchart-shapes: unknown shape kind "${kind}"`);
|
||||
@@ -190,9 +206,12 @@
|
||||
window.FlowchartMermaid = { toMermaid, escapeLabel, nodeDeclaration, edgeDeclaration };
|
||||
|
||||
// ========== flowchart-store (inlined) ==========
|
||||
// v4.12.0 — Nodes carry an optional `color` field; `setNodeColor(id, color)`
|
||||
// mutates it, and serialize/deserialize round-trip it.
|
||||
const STORE_NODE_KINDS = ['process', 'decision', 'terminator', 'subroutine', 'document'];
|
||||
const STORE_EDGE_KINDS = ['solid', 'dotted', 'thick'];
|
||||
const STORE_UNDO_LIMIT = 50;
|
||||
const STORE_DEFAULT_COLOR = '#ffffff';
|
||||
|
||||
function storeClone(obj) {
|
||||
return JSON.parse(JSON.stringify(obj));
|
||||
@@ -214,6 +233,16 @@
|
||||
);
|
||||
}
|
||||
|
||||
function normalizeColor(color) {
|
||||
if (typeof color !== 'string' || color.length === 0) {
|
||||
return { color: STORE_DEFAULT_COLOR };
|
||||
}
|
||||
const trimmed = color.trim();
|
||||
const hex = /^#?[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/.test(trimmed);
|
||||
if (!hex) return { color: STORE_DEFAULT_COLOR };
|
||||
return { color: trimmed.startsWith('#') ? trimmed : `#${trimmed}` };
|
||||
}
|
||||
|
||||
function isValidEdge(edge) {
|
||||
return (
|
||||
edge &&
|
||||
@@ -261,12 +290,19 @@
|
||||
return storeClone(graph);
|
||||
}
|
||||
|
||||
function addNode({ kind, x, y, label = '' }) {
|
||||
function addNode({ kind, x, y, label = '', color }) {
|
||||
if (!STORE_NODE_KINDS.includes(kind)) {
|
||||
throw new Error(`flowchart-store: unknown node kind "${kind}"`);
|
||||
}
|
||||
snapshot();
|
||||
const node = { id: storeNewId('n'), kind, x, y, label };
|
||||
const node = {
|
||||
id: storeNewId('n'),
|
||||
kind,
|
||||
x,
|
||||
y,
|
||||
label,
|
||||
...normalizeColor(color),
|
||||
};
|
||||
graph.nodes.push(node);
|
||||
emit();
|
||||
return node;
|
||||
@@ -307,6 +343,14 @@
|
||||
emit();
|
||||
}
|
||||
|
||||
function setNodeColor(id, color) {
|
||||
const idx = findNodeIndex(id);
|
||||
if (idx === -1) throw new Error(`flowchart-store: unknown node id "${id}"`);
|
||||
snapshot();
|
||||
graph.nodes[idx] = { ...graph.nodes[idx], ...normalizeColor(color) };
|
||||
emit();
|
||||
}
|
||||
|
||||
function removeNode(id) {
|
||||
const idx = findNodeIndex(id);
|
||||
if (idx === -1) return;
|
||||
@@ -398,7 +442,8 @@
|
||||
graph = { nodes: [], edges: [] };
|
||||
return;
|
||||
}
|
||||
const nodes = Array.isArray(parsed.nodes) ? parsed.nodes.filter(isValidNode) : [];
|
||||
const rawNodes = Array.isArray(parsed.nodes) ? parsed.nodes.filter(isValidNode) : [];
|
||||
const nodes = rawNodes.map((n) => ({ ...n, ...normalizeColor(n.color) }));
|
||||
const nodeIds = new Set(nodes.map((n) => n.id));
|
||||
const edges = Array.isArray(parsed.edges)
|
||||
? parsed.edges.filter(
|
||||
@@ -421,6 +466,7 @@
|
||||
moveNode,
|
||||
setNodeLabel,
|
||||
setNodeKind,
|
||||
setNodeColor,
|
||||
removeNode,
|
||||
connect,
|
||||
disconnect,
|
||||
@@ -545,7 +591,10 @@
|
||||
tabindex: '0',
|
||||
'aria-label': `${node.kind}: ${node.label || '(no label)'}`,
|
||||
});
|
||||
g.innerHTML = shapeSvg(node.kind, 0, 0, DEFAULT_WIDTH, DEFAULT_HEIGHT);
|
||||
// v4.12.0 — pass the per-node fill color through to the shape SVG.
|
||||
// `shapeSvg` itself falls back to #ffffff when the color is missing
|
||||
// or invalid, so old (uncolored) sessions keep rendering correctly.
|
||||
g.innerHTML = shapeSvg(node.kind, 0, 0, DEFAULT_WIDTH, DEFAULT_HEIGHT, node.color);
|
||||
const text = canvasSvgEl('text', {
|
||||
x: DEFAULT_WIDTH / 2,
|
||||
y: DEFAULT_HEIGHT / 2 + 4,
|
||||
@@ -783,6 +832,7 @@
|
||||
previewSource: document.getElementById('preview-source'),
|
||||
previewRender: document.getElementById('preview-render'),
|
||||
btnInsert: document.getElementById('fc-btn-insert'),
|
||||
btnSave: document.getElementById('fc-btn-save'),
|
||||
btnReset: document.getElementById('fc-btn-reset'),
|
||||
status: document.getElementById('fc-status'),
|
||||
// v4.11.0 — node-list panel (button-driven UI). Every mutation goes
|
||||
@@ -1167,6 +1217,19 @@
|
||||
});
|
||||
li.appendChild(labelInput);
|
||||
|
||||
// v4.12.0 — per-node fill color. Native <input type="color"> opens a
|
||||
// platform color picker (presets + custom). We listen for `input`
|
||||
// (continuous as the user drags) so the canvas re-renders live.
|
||||
const colorInput = document.createElement('input');
|
||||
colorInput.type = 'color';
|
||||
colorInput.value = node.color || '#ffffff';
|
||||
colorInput.title = 'Node fill color';
|
||||
colorInput.setAttribute('aria-label', 'Node fill color');
|
||||
colorInput.addEventListener('input', () => {
|
||||
if (_store) _store.setNodeColor(node.id, colorInput.value);
|
||||
});
|
||||
li.appendChild(colorInput);
|
||||
|
||||
const delBtn = document.createElement('button');
|
||||
delBtn.type = 'button';
|
||||
delBtn.textContent = '×';
|
||||
@@ -1363,6 +1426,30 @@
|
||||
});
|
||||
}
|
||||
|
||||
// v4.12.0 — Save to File. Pops a system save dialog and writes the
|
||||
// Mermaid-fenced source to the user-chosen path via the generic
|
||||
// 'save-text-file' IPC channel. The main-process handler resolves with
|
||||
// `{ canceled: true }` if the user dismissed the dialog.
|
||||
if (els.btnSave) {
|
||||
els.btnSave.addEventListener('click', async () => {
|
||||
if (!_store || !api.saveFile) return;
|
||||
const source = toMermaid(_store.getGraph());
|
||||
const fenced = '```mermaid\n' + source + '\n```';
|
||||
try {
|
||||
const result = await api.saveFile(fenced, 'flowchart.mmd');
|
||||
if (result && result.canceled) {
|
||||
setStatus('Save cancelled');
|
||||
} else if (result && result.path) {
|
||||
setStatus(`Saved to ${result.path}`);
|
||||
} else {
|
||||
setStatus('Saved');
|
||||
}
|
||||
} catch (err) {
|
||||
setStatus(`Save failed: ${err && err.message ? err.message : err}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (els.btnReset) {
|
||||
els.btnReset.addEventListener('click', async () => {
|
||||
if (!_store) return;
|
||||
|
||||
Reference in New Issue
Block a user