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): wire selection + layout precedence; v4.9.4

Browse Source 
- Add opts.onNodeClick + surgical applySelectionHighlight() so node/edge clicks immediately paint .selected and mirror id into panel state (Delete/Backspace works on freshly-clicked node).
- Add Maximize/Restore button to flowchart toolbar: toggles .main-content.flowchart-takeover which hides .editor-container and lets the canvas + preview split the full window width instead of the 280px sidebar.
- destroy() clears the takeover class so the editor stays usable after leaving the panel.
- 8 new tests in tests/flowchart-panel.test.js for selection wiring and takeover.

Amit Haridas
This commit is contained in:
amitwh
2026-09-14 23:00:47 +05:30
parent e0945b427d
commit d31ed86fab
7 changed files with 394 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles-sidebar.css
+63
View File
@@ -1111,3 +1111,66 @@ body[class*='dark'] .preview-content a.wiki-link {
color: inherit;
z-index: 100;
}
/* Takeover mode — the Flow Chart panel promotes itself to fill the main
* area, hiding the editor-container so the canvas + preview split the full
* window width instead of the 280px sidebar. Toggled by the maximize
* button in src/sidebar/flowchart-panel.js (adds/removes
* `.flowchart-takeover` on `.main-content`). Restore on second click or on
* panel destroy(). */
.main-content.flowchart-takeover .editor-container {
display: none;
}
.main-content.flowchart-takeover .sidebar {
width: auto;
flex: 1;
}
.main-content.flowchart-takeover .sidebar:not(.collapsed) {
/* The takeover is only meaningful with the flowchart panel open, so the
* 48px collapsed-state width doesn't apply. Force the wide layout. */
width: auto;
}
.main-content.flowchart-takeover .sidebar-panel {
flex: 1;
width: auto;
}
.main-content.flowchart-takeover .sidebar-panel-content {
padding: 0;
}
/* The panel itself should fill the panel-content column instead of being
* constrained by the normal 12px padding-block flow. */
.main-content.flowchart-takeover .flowchart-panel {
height: 100%;
}
/* Maximize button — small icon+label pill in the panel toolbar. */
.flowchart-maximize-btn {
margin-left: 8px;
padding: 4px 10px;
border: 1px solid var(--border-color, #444);
background: var(--bg-primary, #fff);
color: inherit;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
display: inline-flex;
align-items: center;
gap: 4px;
}
.flowchart-maximize-btn:hover {
border-color: var(--accent, #4a9eff);
color: var(--accent, #4a9eff);
}
.flowchart-maximize-btn:focus-visible {
outline: 2px solid var(--accent, #4a9eff);
outline-offset: 2px;
}
.flowchart-maximize-btn.active {
background: var(--accent, #4a9eff);
border-color: var(--accent, #4a9eff);
color: var(--accent-fg, #fff);
}
.flowchart-maximize-icon {
font-size: 14px;
line-height: 1;
}