amitwh/markdown-converter
1
0
Fork 0
mirror of https://github.com/amitwh/markdown-converter.git synced 2026-10-01 09:19:34 +05:30
Code Issues Packages Projects Releases Wiki Activity

fix(flowchart): ensure rendered SVG + selection visibility; force light theme in canvas; v4.9.5

Browse Source 
v4.9.4 shipped three interaction bugs in the Flow Chart panel that combined to make it look broken at runtime: (1) .flowchart-preview-render had no min-height, so the Mermaid SVG clipped to 0 when the sidebar flex column shrank; (2) the canvas + preview hosts inherited the body.theme-concreteinfo dark theme, producing dark-on-dark nodes; (3) .flowchart-node.selected only set a 2px stroke on the rect's existing dark fill, which was effectively invisible.

Fix: styles-sidebar.css adds min-height: 120px on .flowchart-preview-render; forces a light background on .flowchart-canvas-host / .flowchart-preview-host with !important so theme inheritance cannot override it; forces explicit white fills and dark strokes on .flowchart-node rect/polygon/text and .flowchart-edge so labels read against any background; selection now changes fill (#e3f0ff) AND bumps stroke-width to 3 on both nodes and edges. renderer.js renderFlowChartMermaid now always initializes Mermaid with theme: 'default' regardless of body class — keeps the Mermaid SVG light to match the CSS-forced canvas surface.

Three new CSS regression tests in tests/flowchart-panel.test.js read the shipped stylesheet and assert the three structural invariants (non-zero min-height on render target, !important light background on canvas+preview hosts, fill + stroke-width >= 3 on .flowchart-node.selected).

Tradeoff: the flowchart surface is now always light, diverging from body theme. Visibility of a working editor is the priority per user direction.

Amit Haridas
This commit is contained in:
amitwh
2026-09-14 23:09:23 +05:30
parent d31ed86fab
commit 9557c0af4d
6 changed files with 130 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer.js
+9 -1
View File
@@ -2440,7 +2440,15 @@ document.addEventListener('DOMContentLoaded', async () => {
const mermaidModule = require('mermaid');
window.mermaid = mermaidModule.default || mermaidModule;
}
const theme = document.body.className.includes('theme-dark') ? 'dark' : 'default';
// v4.9.5 — force the Mermaid theme to 'default' (light) regardless of the
// project's <body class="theme-…">. The flowchart preview lives next to
// the editor inside a sidebar that we deliberately render on a forced
// light surface (see .flowchart-canvas-host / .flowchart-preview-host in
// src/styles-sidebar.css). Mermaid's `dark` theme produces near-black
// SVG fills, which against a near-white background are unreadable and
// against a dark background completely invisible. Keep this in sync with
// the CSS rule above — both are needed.
const theme = 'default';
window.mermaid.initialize({ startOnLoad: false, theme, securityLevel: 'loose' });
window.mermaid
.run({ nodes: [div] })