diff options
| -rw-r--r-- | docs/dashboard.md | 6 | ||||
| -rw-r--r-- | src/api/dashboard/dashboard.html | 16 |
2 files changed, 17 insertions, 5 deletions
diff --git a/docs/dashboard.md b/docs/dashboard.md index 531bd08..25bcfe8 100644 --- a/docs/dashboard.md +++ b/docs/dashboard.md @@ -123,8 +123,10 @@ every 30 s, which costs the swarm fewer messages and leaves the map up to 30 s b (this node's own links stay current). It's the node's choice, for every page open on it, until clicked again or the node restarts. -The legend above the map names the transports that appear; `hide legend` beside the -box's title gives its room to the map (`show legend` brings it back). +The legend, over the top of the map, names the transports that appear; its contents +are on an underlay of their own shape, as the map's labels, so they read over what is +under them, and the map is dragged through it as anywhere else. `hide legend` beside +the box's title hides it (`show legend` brings it back); the map stays as it is. `layout: static`, beside it, is the default: nodes move only when the map is laid out (below). A click switches to `layout: dynamic`: each measured link is as diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html index 9b23d46..25837c8 100644 --- a/src/api/dashboard/dashboard.html +++ b/src/api/dashboard/dashboard.html @@ -172,7 +172,16 @@ /* After the sliders, as tall; the kinds and the sliders greyed while the dots are off. */ .legend button.toggle { float: none; margin-left: 0; line-height: 1em; } .legend.off .message, .legend.off .slider { opacity: .45; } - #legends { flex: none; } + /* The map and, over its top, the legend: shown or hidden, it takes no room from the + map, which stays as it is. What is under it shows through; its contents are on an + underlay of their own shape (as the map's labels), and only its controls take the + pointer: the map under the rest is dragged as anywhere else. */ + .map-area { position: relative; flex: 1; min-height: 0; display: flex; } + #legends { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; } + #legends .legend > * { filter: drop-shadow(2px 0 0 var(--panel)) + drop-shadow(-2px 0 0 var(--panel)) drop-shadow(0 2px 0 var(--panel)) + drop-shadow(0 -2px 0 var(--panel)); } + #legends button, #legends input, #legends label { pointer-events: auto; } /* Hides the legend, and shows it again. */ button.toggle { font: inherit; font-size: 12px; text-transform: none; letter-spacing: 0; float: right; margin-left: 6px; padding: 0 6px; color: var(--muted); background: none; @@ -244,6 +253,7 @@ <h2>Swarm <button id="legend-toggle" class="toggle">hide legend</button> <button id="rtt-toggle" class="toggle">layout: static</button> <button id="links-toggle" class="toggle">links: live</button></h2> + <div class="map-area"> <div id="legends"> <div class="legend"> <span class="node self">this node</span> @@ -263,6 +273,7 @@ </div> </div> <svg id="graph"><g id="view"><g id="flows" pointer-events="none"></g><g id="flashes" pointer-events="none"></g></g></svg> + </div> </section> <section id="peers-box"> <h2>Peers</h2> @@ -1490,7 +1501,7 @@ function release() { } document.addEventListener("selectionchange", release); -// The legend, hidden and shown again; the map takes the room. +// The legend, hidden and shown again, over the map: the map stays as it is. const legendToggle = document.getElementById("legend-toggle"); function showLegend(shown) { const legends = document.getElementById("legends"); @@ -1499,7 +1510,6 @@ function showLegend(shown) { } legendToggle.addEventListener("click", () => { showLegend(document.getElementById("legends").hidden); - if (state) renderGraph(); }); // Hidden as on the page it was opened from (`handOver`). if (handOver && handOver.legend === false) showLegend(false); |