Add annotation set selector to preview

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

modules/glmv-prev.js

@@ -1,3 +1,5 @@
+let [_, origMetadata] = extractMetadata()
+
 //Annotation Edit Controls
 const addHS = new OO.ui.ButtonWidget({
 	icon: 'mapPinAdd',
@@ -24,8 +26,29 @@ const deleteHS = new OO.ui.ButtonWidget({
 deleteHS.on('click', readyDelHotspot)
 deleteHS.setDisabled(true)
 
+const setOptions = ['default', ...Object.keys(origMetadata.annotationSets)]
+let setOptionItems = []
+setOptions.forEach(opt => {
+    setOptionItems.push(new OO.ui.MenuOptionWidget({data: opt, label: opt}))
+})
+
+const setSelectHS = new OO.ui.ButtonMenuSelectWidget({
+	icon: 'mapTrail',
+	label: 'Select annotation set',
+	invisibleLabel: true,
+	menu: {
+		items: setOptionItems,
+        width: 'min-content'
+    },
+    $overlay: $('#bodyContent')
+})
+setSelectHS.getMenu().on( 'choose', selSet => {
+    selectAnnotationSet(selSet.data)
+})
+setSelectHS.setDisabled(true)
+
 const hotspotButtons = new OO.ui.ButtonGroupWidget({
-    items: [ addHS, updateHS, deleteHS ]
+    items: [ addHS, updateHS, deleteHS, setSelectHS ]
 })
 
 //View Edit Controls

modules/glmv.js

@@ -1,6 +1,7 @@
 let slideShowInterval = null
 let grabHotspot = null
 let deleteHotspot = null
+let currentSet = 'default'
 
 /**
  * Disables hiding of various child items 
@@ -19,38 +20,57 @@ modelLoaded = function() {
  */
 readMetadata = function() {
     let hotspotsObj = []
-    var metadata
+    let metadata
+    let slotNum = 1
+
+    createHotspot = function(hsLabel, hsSlot, hsTag) {
+        let newHs = document.createElement('button')
+        newHs.classList.add('Hotspot')
+        newHs.setAttribute('slot',`hotspot-${hsSlot}`)
+        newHs.setAttribute('ontouchstart', 'event.stopPropagation()')
+        newHs.setAttribute('onclick', 'onAnnotation(event)')
+        newHs.setAttribute('onmousedown', 'grabAnnotation(event)')
+        newHs.setAttribute('onmouseup', 'releaseAnnotation(event)')
+        Object.keys(metadata.annotations[hsLabel]).forEach((prop) => {
+            newHs.setAttribute(prop, metadata.annotations[hsLabel][prop])
+        })
+        let newAn = document.createElement('div')
+        newAn.classList.add('HotspotAnnotation', 'HiddenAnnotation')
+        newAn.innerText = hsLabel
+        newHs.appendChild(newAn)
+        newLabel = document.createElement('span')
+        newLabel.innerText = hsTag || (hsSlot)
+        newHs.appendChild(newLabel)
+        hotspotsObj.push(newHs)
+    }
+
     try {
         [_, metadata] = extractMetadata()
     } catch (err) {
         console.warn('Failed to read model metadata:' + err.message)
         return false
     }
-    Object.keys(metadata.annotations).forEach((hs, idx) => {
-        let newHs = document.createElement('button')
-        newHs.classList.add('Hotspot')
-        newHs.setAttribute('slot',`hotspot-${idx + 1}`)
-        newHs.setAttribute('ontouchstart', 'event.stopPropagation()')
-        newHs.setAttribute('onclick', 'onAnnotation(event)')
-        newHs.setAttribute('onmousedown', 'grabAnnotation(event)')
-        newHs.setAttribute('onmouseup', 'releaseAnnotation(event)')
-        Object.keys(metadata.annotations[hs]).forEach((prop) => {
-            newHs.setAttribute(prop, metadata.annotations[hs][prop])
+    if (currentSet != 'default' && metadata.annotationSets[currentSet]) {
+        metadata.annotationSets[currentSet].forEach(hs => {            
+            createHotspot(hs, slotNum)
+            slotNum += 1
         })
-        let newAn = document.createElement('div')
-        newAn.classList.add('HotspotAnnotation', 'HiddenAnnotation')
-        newAn.innerText = hs
-        newHs.appendChild(newAn)
-        newLabel = document.createElement('span')
-        newLabel.innerText = idx + 1
-        newHs.appendChild(newLabel)
-        hotspotsObj.push(newHs)
+    }
+    Object.keys(metadata.annotations).forEach(hs => {
+        if (currentSet != 'default' && metadata.annotationSets[currentSet] && metadata.annotationSets[currentSet].includes(hs)) {
+            return
+        }
+        let label = (currentSet != 'default' && metadata.annotationSets[currentSet]) ? '-' : null
+        createHotspot(hs, slotNum, label)
+        slotNum += 1
     })
+
     $('model-viewer button').remove()
     const mView = $('model-viewer')[0]
     hotspotsObj.forEach(hs => {
         mView.appendChild(hs)
     })
+
     return true
 }
 
@@ -486,3 +506,13 @@ orb2degree = function(orbString, fix = null) {
     }
     return degArray.join(' ')
 }
+
+/**
+ * Change the currently selected annotation set
+ * 
+ * @param {string} newSet name of annotation set to select
+ */
+selectAnnotationSet = function(newSet) {
+    currentSet = newSet
+    readMetadata()
+}