docs: click-to-zoom lightbox for diagrams (scroll-zoom + drag-pan)
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.
This commit is contained in:
parent
5dd9c18f79
commit
2a37c6ec51
3 changed files with 160 additions and 0 deletions
43
docs/_source/_static/zoom.css
Normal file
43
docs/_source/_static/zoom.css
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
/* 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; }
|
||||
Loading…
Add table
Add a link
Reference in a new issue