mirror of
https://github.com/amitwh/markdown-converter.git
synced 2026-10-01 09:19:34 +05:30
feat(flowchart): visual polish — selection ring, hover, resize grip (C16)
Adds the visual feedback that was missing from the C10 resize + C2
selection commits. The canvas previously set the .selected class but
no CSS rule styled it, so a selected node looked identical to an
unselected one. Same for hover and the resize handle.
CSS additions (src/flowchart-generator.html):
- .flowchart-node: cursor:grab + 0.12s filter transition for the
hover tint (drop-shadow blue glow).
- .flowchart-node:hover .flowchart-node-shape: blue glow.
- .flowchart-node.selected .flowchart-node-shape: 2.25px blue
stroke — replaces the (previously invisible) .selected class.
- .flowchart-edge:hover and .flowchart-edge.selected: blue
stroke + 2.5px width for the same reason.
- .flowchart-resize-handle-hit: 24px transparent rect for an
enlarged hit area (the visible grip stays 10px).
- .flowchart-resize-handle-grip: blue square with stroke, styled
via CSS instead of inline fill/stroke (which were overriding
the rest of the file's theme).
- .flowchart-edge-label-bg: opaque white pill behind edge labels,
so labels stay readable when an edge curves under them.
- .fc-modal / .fc-modal-overlay: fade + scale-in keyframes
(0.15s ease-out) so the promptInline / confirmInline modals
animate in instead of popping in instantly.
Canvas (src/flowchart/flowchart-canvas.js): the resize handle now
emits two rects — a 24px transparent hit area (data-resize-node
attribute preserved) and a smaller 10px visible grip styled via
.flowchart-resize-handle-grip. Cursor stays nwse-resize via CSS.
Tests: no new tests (visual); existing 14 canvas tests still pass.
1376 total.
Amit Haridas
This commit is contained in:
@@ -185,6 +185,77 @@
|
||||
.flowchart-edge {
|
||||
stroke: #1f2328 !important;
|
||||
}
|
||||
/* v4.13.0 — visual polish. Adds a visible selection ring (was
|
||||
previously only the .selected class without a distinct colour),
|
||||
a hover tint, an enlarged resize-handle hit area, a smoother
|
||||
modal dialog animation, and a proper opaque background behind
|
||||
edge labels so they stay readable across curved connectors. */
|
||||
.flowchart-node {
|
||||
cursor: grab;
|
||||
transition: filter 0.12s ease-out;
|
||||
}
|
||||
.flowchart-node:hover .flowchart-node-shape {
|
||||
filter: drop-shadow(0 0 2px rgba(37, 99, 235, 0.45));
|
||||
}
|
||||
.flowchart-node.selected .flowchart-node-shape {
|
||||
stroke: #2563eb !important;
|
||||
stroke-width: 2.25;
|
||||
}
|
||||
.flowchart-edge {
|
||||
cursor: pointer;
|
||||
}
|
||||
.flowchart-edge:hover {
|
||||
stroke: #2563eb !important;
|
||||
}
|
||||
.flowchart-edge.selected {
|
||||
stroke: #2563eb !important;
|
||||
stroke-width: 2.5;
|
||||
}
|
||||
/* Resize handle — larger invisible hit area + visible square. */
|
||||
.flowchart-resize-handle {
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
.flowchart-resize-handle-hit {
|
||||
fill: transparent;
|
||||
stroke: none;
|
||||
}
|
||||
.flowchart-resize-handle-grip {
|
||||
fill: #2563eb;
|
||||
stroke: #1e40af;
|
||||
stroke-width: 1;
|
||||
}
|
||||
/* Edge label background — keeps labels legible across curves by
|
||||
giving them an opaque white pill behind the text. */
|
||||
.flowchart-edge-label-bg {
|
||||
fill: #ffffff;
|
||||
stroke: #d1d5db;
|
||||
stroke-width: 0.5;
|
||||
}
|
||||
/* Modal dialog — fade + scale-in entrance. */
|
||||
.fc-modal {
|
||||
animation: fc-modal-in 0.15s ease-out;
|
||||
}
|
||||
@keyframes fc-modal-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(0.96);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
.fc-modal-overlay {
|
||||
animation: fc-overlay-in 0.12s ease-out;
|
||||
}
|
||||
@keyframes fc-overlay-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
/* v4.10.0 — preview-render info card explaining the layout */
|
||||
.fc-preview-render-note {
|
||||
font-size: 0.75rem;
|
||||
|
||||
Reference in New Issue
Block a user