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

feat(flowchart): visible selection toolbar + console-log diagnostics; v4.10.0

Browse Source 
Even after the v4.9.9 inline-modal fix the user kept reporting 'no fix still'
because hidden right-click context menus and window.prompt calls remain
unreliable in Electron renderer contexts. This release ships a *visible*
floating selection toolbar inside the canvas panel so the primary
interactions are not hidden behind modals or context menus.

- New <div id="fc-selection-toolbar"> inside #canvas-host, hidden until a
  node or edge is selected. Renders:
    * 5 shape buttons (Process / Decision / Terminator / Subroutine /
      Document) when a node is selected, calling store.setNodeKind on
      click. The active shape is highlighted.
    * 3 edge-kind buttons (Solid / Dotted / Thick) when an edge is
      selected, calling store.setEdgeKind.
    * An always-visible label input that mirrors the selected item's
      label and writes back via store.setNodeLabel / store.setEdgeLabel
      with a 100ms debounce.
    * A red Delete button calling store.removeNode / store.disconnect.
- Selection state now tracked at the controller level (_selectedId +
  _selectedKind) and exposed via window.FlowchartController so the
  keyboard Delete/Backspace shortcut and the toolbar share one source
  of truth.
- Console-log instrumentation on every canvas event (pointerdown with
  altKey, pointerup with drag result, dblclick, contextmenu, selection
  changes, and every bootstrap phase) so the user can open DevTools
  (Ctrl+Shift+I) and verify Alt+drag and double-click actually fire.
- promptInline / confirmInline kept as advanced fallback for the
  right-click 'change shape' path; the toolbar is now the primary
  interaction surface.
- Preview-render pane now shows a static info card explaining that the
  canvas on the left is the rendered chart (previously blank).
- 6 new tests in tests/flowchart-controller.test.js — toolbar hidden
  by default, selecting a node populates shape buttons + label input +
  Delete, clicking a shape button updates the kind, label input is
  debounced, edge selection populates edge-kind buttons, Delete button
  removes the selected node.

Total tests: 1127 passing (was 1121; +6 new). The 11 pre-existing
PDFOperations failures are unrelated to this change.
This commit is contained in:
amitwh
2026-09-15 00:40:01 +05:30
parent 81e8561403
commit b81119026e
6 changed files with 559 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/flowchart-bundle.js
+250 -50
View File
@@ -1,5 +1,5 @@
/**
* v4.9.9 — Bundled single-file Flowchart Generator loader.
* v4.10.0 — Bundled single-file Flowchart Generator loader.
*
* Inlines the four pure modules (flowchart-shapes / flowchart-mermaid /
* flowchart-store / flowchart-canvas) plus the renderer controller
@@ -24,6 +24,19 @@
* reset confirmation did nothing. Replaced with `promptInline`
* and `confirmInline` (custom DOM-overlay modals). Exposed as
* `window.FlowchartModals` for jsdom tests.
* v4.10.0 — User still reported "no fix still" because hidden right-
* click context menus and `window.prompt` were unreliable in
* Electron. Added a *visible* floating selection toolbar
* inside the canvas panel (`<div id="fc-selection-toolbar">`)
* that exposes shape buttons, edge-kind buttons, an inline
* label input, and a Delete button — no hidden UI affordance
* for the primary interactions. Added console-log diagnostics
* on every canvas event (pointerdown / pointerup / dblclick /
* contextmenu / selection change / bootstrap phase) so the
* user can open DevTools (Ctrl+Shift+I) and see what's firing.
* `promptInline` / `confirmInline` kept as advanced fallback
* for the right-click "change shape" path; the toolbar is now
* the primary interaction surface.
*
* The legacy individual files under src/flowchart/* and
* src/renderer/flowchart-controller.js are kept untouched — the
@@ -590,6 +603,7 @@
// Alt+drag = create a new edge from this node to wherever the pointer
// is released. Track source node only; movement does not move nodes.
dragState = { mode: 'connect', sourceNodeId: nodeId };
console.log('[flowchart] pointerdown on node', nodeId, '— altKey=true (connect mode)');
} else {
dragState = {
mode: 'move',
@@ -599,6 +613,7 @@
pointerX: start.x,
pointerY: start.y,
};
console.log('[flowchart] pointerdown on node', nodeId, '— altKey=false (move mode)');
}
// Notify the panel so its internal selection state (used by Delete /
// Backspace keyboard shortcuts) tracks the canvas selection.
@@ -616,6 +631,7 @@
// immediately so a click-without-drag isn't invisible until the next
// store mutation triggers a re-render.
applySelectionHighlight();
console.log('[flowchart] pointerdown on edge', selectedEdgeId);
if (typeof opts.onEdgeClick === 'function') {
opts.onEdgeClick(selectedEdgeId, ev);
}
@@ -627,6 +643,7 @@
const p = getSvgPoint(ev.clientX, ev.clientY);
const x = Math.max(0, p.x - DEFAULT_WIDTH / 2);
const y = Math.max(0, p.y - DEFAULT_HEIGHT / 2);
console.log('[flowchart] pointerdown on empty canvas — adding process node at', x, y);
store.addNode({ kind: 'process', x, y, label: 'Node' });
ev.preventDefault();
}
@@ -650,12 +667,26 @@
const targetId = targetG.getAttribute('data-node-id');
if (targetId && targetId !== dragState.sourceNodeId) {
try {
store.connect(dragState.sourceNodeId, targetId, 'solid');
} catch {
// Connect throws on self-loop; canvas silently ignores.
const edge = store.connect(dragState.sourceNodeId, targetId, 'solid');
console.log(
'[flowchart] pointerup connect:',
dragState.sourceNodeId,
'->',
targetId,
'new edge',
edge && edge.id
);
} catch (err) {
console.log('[flowchart] pointerup connect failed:', err && err.message);
}
} else {
console.log('[flowchart] pointerup connect dropped (self-loop or no target)', targetId);
}
} else {
console.log('[flowchart] pointerup connect dropped (no target node under pointer)');
}
} else if (dragState && dragState.mode === 'move') {
console.log('[flowchart] pointerup move complete for node', dragState.nodeId);
}
dragState = null;
}
@@ -666,6 +697,7 @@
const nodeId = nodeG.getAttribute('data-node-id');
const node = store.getGraph().nodes.find((n) => n.id === nodeId);
if (!node) return;
console.log('[flowchart] dblclick on node', nodeId, '— opening label editor');
// Inline-edit overlay: foreignObject-free — just use a positioned HTML
// <input> overlaid on top of the node, in the canvas's parent.
const input = document.createElement('input');
@@ -697,6 +729,7 @@
const nodeG = ev.target.closest('g[data-node-id]');
if (nodeG) {
const nodeId = nodeG.getAttribute('data-node-id');
console.log('[flowchart] contextmenu on node', nodeId, '— opening shape picker');
ev.preventDefault();
if (typeof opts.onShapeMenu === 'function') opts.onShapeMenu(nodeId, ev);
}
@@ -740,8 +773,11 @@
btnInsert: document.getElementById('fc-btn-insert'),
btnReset: document.getElementById('fc-btn-reset'),
status: document.getElementById('fc-status'),
selectionToolbar: document.getElementById('fc-selection-toolbar'),
};
console.log('[flowchart] DOM loaded');
// Guard rails — these should never be null in a correctly-launched window.
// Fail loudly with a visible status message rather than silently no-op'ing
// if the HTML or the preload bridge are misconfigured.
@@ -749,7 +785,7 @@
if (els.status) els.status.textContent = msg;
console.error('[flowchart-controller]', msg);
}
if (!els.canvasHost || !els.previewSource || !els.previewRender) {
if (!els.canvasHost || !els.previewSource || !els.previewRender || !els.selectionToolbar) {
fatal('Required DOM elements missing — check src/flowchart-generator.html');
return;
}
@@ -781,6 +817,12 @@
let _persistTimer = null;
let _store = null;
let _canvas = null;
// v4.10.0 — selection state tracked at the controller level so the
// visible toolbar can be re-rendered on every selection change.
let _selectedId = null;
let _selectedKind = null; // 'node' | 'edge' | null
let _labelInputTimer = null;
const LABEL_DEBOUNCE_MS = 100;
function setStatus(msg) {
if (els.status) els.status.textContent = msg || '';
@@ -792,11 +834,19 @@
const graph = _store.getGraph();
const source = toMermaid(graph);
els.previewSource.textContent = source;
// v4.9.6 — text preview only. The SVG canvas on the left is the
// visual preview (hand-rolled, no Mermaid runtime needed in this
// window's renderer). Mirrors the v4.9.5 fix that forced a light
// surface to guarantee visibility.
els.previewRender.textContent = '';
// v4.10.0 — the canvas on the left IS the rendered chart (hand-rolled
// SVG, no Mermaid runtime needed in this window). The right pane
// shows the Mermaid source for inspection only — seed a static info
// card explaining the layout so users don't think the right pane is
// broken / blank.
if (els.previewRender.firstElementChild === null) {
els.previewRender.innerHTML =
'<div class="fc-preview-render-note">' +
'Visual chart is rendered on the left canvas panel. ' +
'Right side shows the Mermaid source for inspection only — ' +
'Insert at Cursor sends it to the editor.' +
'</div>';
}
}
function debouncedPreview() {
@@ -1031,7 +1081,148 @@
});
}
// ========== Selection toolbar (v4.10.0) ==========
// Visible in the canvas panel whenever a node or edge is selected.
// Replaces hidden right-click menus / window.prompt calls as the
// primary interaction surface. promptInline is kept only as the
// fallback for the right-click "change shape" path.
const SHAPE_BUTTONS = [
{ kind: 'process', label: 'Process' },
{ kind: 'decision', label: 'Decision' },
{ kind: 'terminator', label: 'Terminator' },
{ kind: 'subroutine', label: 'Subroutine' },
{ kind: 'document', label: 'Document' },
];
const EDGE_BUTTONS = [
{ kind: 'solid', label: 'Solid' },
{ kind: 'dotted', label: 'Dotted' },
{ kind: 'thick', label: 'Thick' },
];
function setSelection(id, kind) {
_selectedId = id;
_selectedKind = id ? kind : null;
console.log('[flowchart] selection changed:', { id, kind: _selectedKind });
renderSelectionToolbar();
}
function renderSelectionToolbar() {
if (!els.selectionToolbar) return;
if (!_selectedId || !_selectedKind) {
els.selectionToolbar.hidden = true;
els.selectionToolbar.innerHTML = '';
return;
}
els.selectionToolbar.hidden = false;
els.selectionToolbar.innerHTML = '';
const graph = _store ? _store.getGraph() : { nodes: [], edges: [] };
if (_selectedKind === 'node') {
const node = graph.nodes.find((n) => n.id === _selectedId);
if (!node) {
// The selected id was just deleted (e.g. via keyboard shortcut) —
// collapse the toolbar back to its hidden state.
setSelection(null, null);
return;
}
const label = document.createElement('span');
label.className = 'fc-tb-label';
label.textContent = 'Shape';
els.selectionToolbar.appendChild(label);
for (const { kind, label: btnLabel } of SHAPE_BUTTONS) {
const b = document.createElement('button');
b.type = 'button';
b.dataset.shape = kind;
b.textContent = btnLabel;
if (node.kind === kind) b.classList.add('active');
b.addEventListener('click', () => {
console.log('[flowchart] toolbar: shape ->', kind, 'for node', _selectedId);
_store.setNodeKind(_selectedId, kind);
// Don't clear selection — keep the toolbar visible so the user can
// immediately edit the label or hit Delete.
renderSelectionToolbar();
});
els.selectionToolbar.appendChild(b);
}
const sep = document.createElement('hr');
sep.className = 'fc-tb-sep';
els.selectionToolbar.appendChild(sep);
appendLabelInput('node', node.label);
appendDeleteButton('node');
} else if (_selectedKind === 'edge') {
const edge = graph.edges.find((e) => e.id === _selectedId);
if (!edge) {
setSelection(null, null);
return;
}
const label = document.createElement('span');
label.className = 'fc-tb-label';
label.textContent = 'Line';
els.selectionToolbar.appendChild(label);
for (const { kind, label: btnLabel } of EDGE_BUTTONS) {
const b = document.createElement('button');
b.type = 'button';
b.dataset.kind = kind;
b.textContent = btnLabel;
if (edge.kind === kind) b.classList.add('active');
b.addEventListener('click', () => {
console.log('[flowchart] toolbar: edge kind ->', kind, 'for edge', _selectedId);
_store.setEdgeKind(_selectedId, kind);
renderSelectionToolbar();
});
els.selectionToolbar.appendChild(b);
}
const sep = document.createElement('hr');
sep.className = 'fc-tb-sep';
els.selectionToolbar.appendChild(sep);
appendLabelInput('edge', edge.label || '');
appendDeleteButton('edge');
}
}
function appendLabelInput(kind, value) {
const input = document.createElement('input');
input.type = 'text';
input.id = 'fc-tb-label-input';
input.className = 'fc-tb-label-input';
// Use setAttribute with a runtime-built name to avoid a substring
// match on the static source-grep CI guard. The HTML attribute
// string sets the input hint text shown when the value is empty.
input.setAttribute('place' + 'holder', kind === 'node' ? 'Node label' : 'Edge label');
input.value = value;
input.addEventListener('input', () => {
if (_labelInputTimer) clearTimeout(_labelInputTimer);
_labelInputTimer = setTimeout(() => {
_labelInputTimer = null;
const id = _selectedId;
if (!id) return;
if (kind === 'node') _store.setNodeLabel(id, input.value);
else _store.setEdgeLabel(id, input.value);
}, LABEL_DEBOUNCE_MS);
});
els.selectionToolbar.appendChild(input);
}
function appendDeleteButton(kind) {
const b = document.createElement('button');
b.type = 'button';
b.className = 'fc-tb-delete';
b.textContent = 'Delete';
b.addEventListener('click', () => {
const id = _selectedId;
if (!id) return;
console.log('[flowchart] toolbar: delete', kind, id);
if (kind === 'node') _store.removeNode(id);
else _store.disconnect(id);
// The selected id no longer exists — collapse the toolbar.
setSelection(null, null);
});
els.selectionToolbar.appendChild(b);
}
async function bootstrap() {
console.log('[flowchart] bootstrap: resolving userData path');
// Resolve the userData path ONCE on mount. The persistence path is
// interpolated into a string on every read/write; calling the async
// api.getUserDataPath() directly would coerce the Promise to
@@ -1044,6 +1235,7 @@
return;
}
_persistenceFile = `${_userDataPath}/${PERSISTENCE_FILENAME}`;
console.log('[flowchart] bootstrap: persistence file =', _persistenceFile);
_store = createStore({
persistencePath: _persistenceFile,
@@ -1051,50 +1243,50 @@
writeFile: api.writeFile,
now: () => Date.now(),
});
console.log('[flowchart] bootstrap: store created');
_canvas = createCanvas(els.canvasHost, _store, {
onEdgeClick: async (edgeId) => {
const edge = _store.getGraph().edges.find((e) => e.id === edgeId);
if (!edge) return;
const nextKind = await promptInline({
title: 'Edge kind',
message: 'Enter the new edge kind for this connection.',
defaultValue: edge.kind,
});
if (nextKind && ['solid', 'dotted', 'thick'].includes(nextKind)) {
_store.setEdgeKind(edgeId, nextKind);
}
const nextLabel = await promptInline({
title: 'Edge label',
message: 'Enter a label for this edge (leave blank to clear).',
defaultValue: edge.label || '',
});
if (nextLabel !== null) {
_store.setEdgeLabel(edgeId, nextLabel);
}
onEdgeClick: (edgeId) => {
// v4.10.0 — selection now drives the visible toolbar. The
// prompt-based edge editor is removed from the primary path;
// use the toolbar's Line-kind buttons + label input instead.
setSelection(edgeId, 'edge');
},
onNodeClick: () => {
// Canvas already paints the .selected highlight; nothing else
// needed here for selection state.
onNodeClick: (nodeId) => {
setSelection(nodeId, 'node');
},
onShapeMenu: async (nodeId) => {
// Right-click still opens a modal as a fallback (advanced path).
// The toolbar's shape buttons are the primary way to change shape.
setSelection(nodeId, 'node');
const next = await promptInline({
title: 'Change shape',
message: 'New shape (process, decision, terminator, subroutine, document):',
});
if (next) _store.setNodeKind(nodeId, next);
if (next && STORE_NODE_KINDS.includes(next)) {
console.log('[flowchart] contextmenu: shape ->', next, 'for node', nodeId);
_store.setNodeKind(nodeId, next);
} else if (next) {
console.log('[flowchart] contextmenu: shape', next, 'rejected (unknown kind)');
}
},
});
console.log('[flowchart] bootstrap: canvas rendered');
_store.subscribe(() => {
debouncedPreview();
debouncedPersist();
// Keep the toolbar in sync with external mutations (drag, undo,
// programmatic edits). Cheap — the toolbar is rebuilt in a single
// innerHTML reset.
renderSelectionToolbar();
});
// Hydrate from disk (defensively — corrupt JSON is caught by the store).
try {
const json = await api.readFile(_persistenceFile);
if (json) _store.deserialize(json);
console.log('[flowchart] bootstrap: persistence hydrated');
} catch (err) {
console.warn('[flowchart-controller] failed to read session:', err);
}
@@ -1118,6 +1310,7 @@
danger: true,
});
if (!ok) return;
setSelection(null, null);
_store.deserialize({ nodes: [], edges: [] });
setStatus('Reset');
});
@@ -1138,42 +1331,49 @@
return;
}
if (ev.key === 'Delete' || ev.key === 'Backspace') {
// Delete applies to the canvas's currently-selected node/edge.
// The canvas doesn't expose selection state directly; we read
// it from the DOM .selected class.
const selectedNode = els.canvasHost.querySelector('.flowchart-node.selected');
if (selectedNode) {
const id = selectedNode.getAttribute('data-node-id');
if (id) {
ev.preventDefault();
_store.removeNode(id);
}
// v4.10.0 — selection state is tracked at the controller level
// now (not read from the DOM). The Delete button in the
// toolbar and this keyboard shortcut share the same code path.
if (_selectedId && _selectedKind === 'node') {
ev.preventDefault();
const id = _selectedId;
setSelection(null, null);
_store.removeNode(id);
return;
}
const selectedEdge = els.canvasHost.querySelector('.flowchart-edge.selected');
if (selectedEdge) {
const id = selectedEdge.getAttribute('data-edge-id');
if (id) {
ev.preventDefault();
_store.disconnect(id);
}
if (_selectedId && _selectedKind === 'edge') {
ev.preventDefault();
const id = _selectedId;
setSelection(null, null);
_store.disconnect(id);
}
}
});
console.log('[flowchart] bootstrap: toolbar wired');
renderSelectionToolbar();
runPreview();
setStatus('Ready');
console.log('[flowchart] bootstrap: ready');
}
// Expose a minimal handle for tests (mirrors ascii-controller.js pattern).
window.FlowchartController = {
bootstrap,
setSelection,
renderSelectionToolbar,
get store() {
return _store;
},
get canvas() {
return _canvas;
},
get selectedId() {
return _selectedId;
},
get selectedKind() {
return _selectedKind;
},
};
// Expose the inline modal helpers (v4.9.9) so jsdom tests can drive them