diff options
Diffstat (limited to 'graph/web/index.html')
| -rw-r--r-- | graph/web/index.html | 18 |
1 files changed, 16 insertions, 2 deletions
diff --git a/graph/web/index.html b/graph/web/index.html index a568cbc6..909f7b1d 100644 --- a/graph/web/index.html +++ b/graph/web/index.html @@ -28,6 +28,12 @@ .node.near .box { stroke:#c18221; stroke-width:2; } .node.focus .box { stroke:#9c4900; stroke-width:3; } .node.selected .box { stroke:#1569b9; stroke-width:3; } + .node.folded .box { stroke-width:4; } + .region-box { stroke:#9da9b8; stroke-width:1.5; } + .fold-btn { cursor:pointer; } + .fold-btn rect { fill:white; stroke:#596674; } + .fold-btn text { font-size:14px; fill:#152330; } + .fold-btn:focus rect { stroke:#1569b9; stroke-width:2; } .head { font-size:10px; fill:#596674; } .label { font-size:12px; fill:#152330; font-weight:600; } .type { font-size:11px; fill:#455768; } @@ -38,13 +44,16 @@ #detail { position:absolute; top:8px; right:8px; margin:0; padding:12px; max-width:320px; max-height:45%; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; background:#fffffff2; border:1px solid #bac5d0; border-radius:4px; font-size:12px; } - .controls { display:flex; justify-content:center; align-items:center; gap:4px; padding:4px; } + .controls { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; padding:6px; } .button { color:white; background:black; font-size:20px; min-width:30px; } .button:disabled { background:grey; } .count { font-size:20px; min-width:35px; text-align:center; } + #N { width:6ch; } + #scrub { width:clamp(120px,35vw,600px); } </style> <script src="vendor/d3.v7.min.js"></script> <script src="vendor/elk-api.js"></script> + <script src="groups.js"></script> <script src="layout.js"></script> <script src="render.js"></script> </head> @@ -58,6 +67,7 @@ <div class="tools"> <button id="fit" type="button" disabled>Fit</button> <button id="save" type="button" disabled>Save SVG</button> + <button id="unfold" type="button" disabled>Unfold all</button> <label><input id="assocs" type="checkbox"> Associations</label> <label><input id="near" type="checkbox" checked> Peep neighborhood</label> <span class="ctrl">Control</span><span class="data">Data</span><span class="mem">Memory</span> @@ -67,11 +77,15 @@ </div> <div id="graph"><div id="elk"></div><pre id="detail" hidden></pre></div> <div class="controls"> + <button id="doFirst" type="button" onclick="doFirst()" class="button" aria-label="First frame" title="First frame">|⮜</button> <button id="doPrev" type="button" onclick="doPrev()" class="button" aria-label="Previous frame">⮜</button> - <span id="N" class="count">0</span> + <label for="N">Frame</label> + <input id="N" class="count" type="number" min="1" max="1" step="1" value="0" disabled title="Enter a frame number"> <span>/</span> <span id="len" class="count">0</span> <button id="doNext" type="button" onclick="doNext()" class="button" aria-label="Next frame">⮞</button> + <button id="doLast" type="button" onclick="doLast()" class="button" aria-label="Last frame" title="Last available frame">⮞|</button> + <input id="scrub" type="range" min="1" max="1" step="1" value="1" disabled aria-label="Frame slider"> <button id="doExit" type="button" onclick="doExit()" class="button">Exit</button> </div> </div> |