checkpoint range work

src/mode/fdm/client.js

@@ -45,14 +45,32 @@
         }
 
         function updateRanges(ranges = []) {
-            console.log({ranges});
             UI.rangeGroup.style.display = isFdmMode && ranges && ranges.length ? 'flex' : 'none';
             let html = [];
-            for (let range of ranges) {
-                html.push(`<div>${range.lo}-${range.hi}<button>x<button></div>`);
+            let bind = [];
+            let now = Date.now();
+            let sorted = ranges.sort((a,b) => b.lo - a.lo);
+            for (let range of sorted) {
+                let id = (now++).toString(36);
+                let rows = Object.entries(range.fields).map(a => `<div><label class="pad">${rangeVars[a[0]]}</label><span></span><label class="val">${a[1]}</label></div>`).join('');
+                let hover = `<div id="hov_${id}" class="range-detail">${rows}</div>`;
+                let info = `<button id="sel_${id}" class="j-center grow">${range.lo} - ${range.hi}</button><button id="del_${id}"><i class="far fa-trash-alt"></i></button>`;
+                html.appendAll([
+                    `<div id="rng_${id}" class="range-info">${hover}${info}</div>`
+                ]);
+                bind.push({id, range});
             }
-            // console.log(UI.rangeGroup.innerHTML);
-            // UI.rangeGroup.innerHTML = html.join('');
+            UI.rangeGroup.firstElementChild.innerHTML = html.join('');
+            for (let rec of bind) {
+                $(`sel_${rec.id}`).onclick = () => {
+                  api.show.layer(rec.range.hi, rec.range.lo);
+                };
+                $(`del_${rec.id}`).onclick = () => {
+                    let io = ranges.indexOf(rec.range);
+                    ranges.splice(io,1);
+                    updateRanges(ranges);
+                };
+              }
         }
 
         api.event.on("mode.set", mode => {

web/kiri/index.css

@@ -1511,3 +1511,35 @@ th, tr, td, label {
 #lab-axis:hover, #lab-scale:hover {
     background-color: rgba(0,0,0,0.2);
 }
+
+.range-info {
+    position: relative;
+}
+.range-info:hover .range-detail {
+    display: flex;
+}
+.range-detail {
+    position: absolute;
+    display: none;
+    flex-direction: column;
+    bottom: 50%;
+    right: 100%;
+    padding: 5px;
+    margin: 0 10px 0 10px;
+    font-size: smaller;
+    font-family: monospace;
+    transform: translateY(50%);
+    background-color: rgba(255,255,255,0.8);
+    border: 1px solid #aaa;
+    border-radius: 5px;
+}
+.range-detail label.pad {
+    padding-right: 8px;
+    border-bottom: 1px solid rgba(0,0,0,0.1);
+}
+.range-detail label.val {
+    font-weight: bold;
+}
+.range-detail span {
+    flex-grow: 1;
+}