amitwh/markdown-converter
1
0
Fork 0
mirror of https://github.com/amitwh/markdown-converter.git synced 2026-10-01 17:29:29 +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/styles-sidebar.css
+39 -3
View File
@@ -1089,19 +1089,55 @@ body[class*='dark'] .preview-content a.wiki-link {
}
.flowchart-preview-render {
flex: 1;
/* Non-zero CSS height guarantees the Mermaid-rendered SVG has room to lay
* out — without this, flex children in a collapsed parent can compute to 0
* height and mermaid's <svg> ends up invisible even though it parsed and
* attached to the DOM. */
min-height: 120px;
padding: 8px;
overflow: auto;
}
/* v4.9.5 — force light, readable surfaces inside the flowchart canvas and
* preview regardless of the project's theme class on <body>. The flowchart
* is a focused editor surface (similar to the PDF viewer) and the previous
* "inherit body theme" approach left users with dark-on-dark rectangles and
* dark-on-dark Mermaid SVG output, both effectively invisible. Keeping this
* surface light trades theme consistency for guaranteed visibility — the
* user has been explicit that WORKING > consistent with body theme. */
.flowchart-canvas-host,
.flowchart-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;
stroke-width: 1.25;
}
.flowchart-node {
cursor: grab;
}
/* v4.9.5 — selection highlight: prior to this rule set, `.selected` only
* painted a 2px stroke on a near-black fill — barely visible against the
* dark canvas. Add a fill change AND bump stroke-width so the highlight is
* unmissable. Same logic for edges. */
.flowchart-node.selected rect,
.flowchart-node.selected polygon {
stroke: var(--accent, #4a9eff);
stroke-width: 2;
fill: #e3f0ff !important;
stroke: #4a9eff !important;
stroke-width: 3;
}
.flowchart-edge.selected {
stroke: var(--accent, #4a9eff);
stroke: #4a9eff !important;
stroke-width: 3;
}
.flowchart-label-input {
font-size: 13px;