Make left bar proof list show the selected proof & clicking on a left bar proof selects the proof

Author: joom

index.html

@@ -116,6 +116,9 @@
         border-bottom: 1px solid white;
         padding: 1em 0.2em 1em 0.2em;
       }
+      #left-bar ol li span {
+        cursor: pointer;
+      }
       .selected {
         background: #0d6efd;
       }
@@ -135,8 +138,10 @@
         position: absolute;
         top: 0;
         left: 0;
-        background: #ddd;
-        border: 1px solid black;
+        color: white;
+        border-radius: 0.5rem;
+        background: #212529;
+        border: 1px solid #212529;
         padding: 0.5em;
         z-index: 20;
         visibility: hidden;

src/app.js

@@ -182,8 +182,10 @@ const refreshList = () => {
   let ol = document.querySelector('#left-bar ol')
   ol.innerHTML = ''
   proofs.forEach((entry, i) => {
-    ol.innerHTML += `<li value="${i}">
+    ol.innerHTML += `<li value="${i}" class="${entry.selected ? 'selected' : ''}">
+                        <span onclick="javascript:selectProof(${i})">
                         ${entry.proof.conclusion.unicode()}
+                        </span>
                         <br>
                         <button onclick="javascript:giveLatex(${i})" class="latex">L<sup>a</sup>T<sub>e</sub>X</button>
                         <button onclick="javascript:removeProof(${i})">✖ Delete</button>
@@ -208,6 +210,29 @@ const refreshAll = () => {
   redrawAll()
 }
 
+const createSelection = opt => {
+  let root =  opt.selected[0].root
+  let index = proofs.findIndex(entry => root == entry.proof)
+  proofs[index].selected = true
+  refreshList()
+}
+const removeSelection = (opt, shouldRefresh = true) => {
+  for (var i = 0; i < proofs.length; i++) {
+    proofs[i].selected = false
+  }
+  if (shouldRefresh) { refreshList() }
+}
+canvas.on("selection:created", createSelection)
+canvas.on("selection:cleared", removeSelection)
+canvas.on("selection:updated", opt => {
+  removeSelection(opt, false)
+  createSelection(opt)
+})
+const selectProof = i => {
+  canvas.setActiveObject(canvas.item(i))
+  canvas.renderAll()
+}
+
 document.getElementById('addLKGoal').addEventListener('click', async () => {
   addProof(new LKIncomplete(await modalSequentPrompt('Enter an LK goal sequent:')))
 })