russell@unturf.com
2a37c6ec51
Graphviz renders SVG as <object>, which swallows clicks and can't be lightboxed. Vendored, dependency-free zoom.js converts each graphviz <object> to a clickable <img> (crisp vector) and adds a fullscreen overlay: click to open, scroll to zoom toward the cursor, drag to pan, Esc / dbl-click / background-click to close. Works for any img.zoomable, so future charts get it free. Degrades gracefully (no JS -> inline image still renders). Wired via html_css_files / html_js_files.
43 lines
859 B
CSS
43 lines
859 B
CSS
/* Click-to-zoom for diagrams (graphviz SVG + any img.zoomable).
|
|
Vendored, dependency-free. See zoom.js. */
|
|
|
|
.graphviz img,
|
|
img.zoomable {
|
|
cursor: zoom-in;
|
|
max-width: 100%;
|
|
}
|
|
|
|
#arb-zoom-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 100000;
|
|
background: rgba(10, 12, 16, 0.92);
|
|
display: none;
|
|
overflow: hidden;
|
|
cursor: grab;
|
|
}
|
|
#arb-zoom-overlay.open { display: block; }
|
|
#arb-zoom-overlay.grabbing { cursor: grabbing; }
|
|
|
|
#arb-zoom-overlay img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
max-width: none;
|
|
transform-origin: 0 0;
|
|
user-select: none;
|
|
-webkit-user-drag: none;
|
|
}
|
|
|
|
#arb-zoom-hint {
|
|
position: fixed;
|
|
top: 10px;
|
|
right: 16px;
|
|
z-index: 100001;
|
|
display: none;
|
|
color: #fff;
|
|
font: 13px/1.4 system-ui, sans-serif;
|
|
opacity: 0.75;
|
|
pointer-events: none;
|
|
}
|
|
#arb-zoom-overlay.open ~ #arb-zoom-hint { display: block; }
|