Create new views and annotation sets

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

modules/glmv-prev.js

@@ -20,14 +20,6 @@ buildPreviewMenu = function() {
     addHS.on('click', readyAddHotspot)
     addHS.setDisabled(true)
 
-    const updateHS = new OO.ui.ButtonWidget({
-        icon: 'reload',
-        label: 'Update annotations',
-        invisibleLabel: true
-    })
-    updateHS.on('click', readMvconfig)
-    updateHS.setDisabled(true)
-
     const deleteHS = new OO.ui.ButtonWidget({
         icon: 'cancel',
         label: 'Delete annotation',
@@ -36,7 +28,7 @@ buildPreviewMenu = function() {
     deleteHS.on('click', readyDelHotspot)
     deleteHS.setDisabled(true)
 
-    const setOptions = ['default', ...Object.keys(origMetadata.annotationSets)]
+    const setOptions = ['default', ...Object.keys(origMetadata.annotationSets), 'Add new']
     let setOptionItems = []
     setOptions.forEach(opt => {
         setOptionItems.push(new OO.ui.MenuOptionWidget({data: opt, label: opt}))
@@ -53,25 +45,15 @@ buildPreviewMenu = function() {
         $overlay: $('#bodyContent')
     })
     setSelectHS.getMenu().on( 'choose', selSet => {
-        selectAnnotationSet(selSet.data)
+        onSetMenu(selSet.data)
     })
     setSelectHS.setDisabled(true)
 
     const hotspotButtons = new OO.ui.ButtonGroupWidget({
-        items: [ addHS, updateHS, deleteHS, setSelectHS ]
+        items: [ addHS, deleteHS, setSelectHS ]
     })
 
     //View Edit Controls
-    const downloadViewerImage = new OO.ui.ButtonWidget({
-        icon: 'imageAdd',
-        label: 'Download current image',
-        invisibleLabel: true
-    })
-    downloadViewerImage.on('click', () => {
-        downloadImage(mw.config.values.wgTitle)
-    })
-    downloadViewerImage.setDisabled(true)
-
     const setView = new OO.ui.ButtonWidget({
         icon: 'camera',
         label: 'Set Initial View',
@@ -162,7 +144,7 @@ buildPreviewMenu = function() {
     })
     setLims.setDisabled(true)
 
-    const setViewConfig = [...Object.keys(origMetadata.viewerConfig)]
+    const setViewConfig = [...Object.keys(origMetadata.viewerConfig), 'Add new']
     let setViewItems = []
     setViewConfig.forEach(opt => {
         setViewItems.push(new OO.ui.MenuOptionWidget({data: opt, label: opt}))
@@ -179,26 +161,50 @@ buildPreviewMenu = function() {
         $overlay: $('#bodyContent')
     })
     selectVC.getMenu().on( 'choose', selSet => {
-        selectViewConfig(selSet.data)
+        onViewMenu(selSet.data)
     })
     selectVC.setDisabled(true)
 
     const cameraButtons = new OO.ui.ButtonGroupWidget({
-        items: [ downloadViewerImage, setControl, setView, setLims, selectVC ]
+        items: [ setControl, setView, setLims, selectVC ]
+    })
+
+    //General controls
+    const downloadViewerImage = new OO.ui.ButtonWidget({
+        icon: 'imageAdd',
+        label: 'Download current image',
+        invisibleLabel: true
+    })
+    downloadViewerImage.on('click', () => {
+        downloadImage(mw.config.values.wgTitle)
+    })
+    downloadViewerImage.setDisabled(true)
+
+    const updateViewer = new OO.ui.ButtonWidget({
+        icon: 'reload',
+        label: 'Update from text',
+        invisibleLabel: true
+    })
+    updateViewer.on('click', refreshConfigs)
+    updateViewer.setDisabled(true)
+
+    const generalButtons = new OO.ui.ButtonGroupWidget({
+        items: [ downloadViewerImage, updateViewer ]
     })
 
     //Main Menu
     const modelMenu = new OO.ui.HorizontalLayout({
         items: [
         hotspotButtons,
-        cameraButtons
+        cameraButtons,
+        generalButtons
         ],
         id: 'edit-model-menu'
     })
 
     $('#wikiPreview').after(modelMenu.$element)
 
-    return [modelMenu, selectVC]
+    return [modelMenu, selectVC, setSelectHS]
 }
 
 /**
@@ -211,15 +217,6 @@ enableMenu = function() {
     });
 }
 
-/**
- * Add a selection option to a ButtonMenuSelectWidget
- * 
- * @param {ButtonMenuSelectWidget} menuWidget
- */
-addMenuOption = function(menuWidget) {
-    menuWidget.menu.addItems([new OO.ui.MenuOptionWidget({data: 'New option', label: 'New option'})])
-}
-
 /**
  * Disable general interaction with model
  * viewer for specific additional function
@@ -278,5 +275,76 @@ downloadImage = function(defName) {
         })
 }
 
+/**
+ * Process view selection menu select event
+ * 
+ * @param {string} selectData data associated with the selected menu label
+ */
+onViewMenu = function(selectData) {
+    if (selectData == 'Add new') {
+        const newSelectIdx = viewSelector.menu.items.length
+        const newView = `View${newSelectIdx}`
+        viewSelector.menu.addItems([new OO.ui.MenuOptionWidget({data: newView, label: newView})], newSelectIdx - 1)
+        addViewConfig(newView)
+    } else {
+        selectViewConfig(selectData)
+    }
+}
+
+/**
+ * Process annotation set menu select event
+ * 
+ * @param {string} selectData data associated with the selected menu label
+ */
+onSetMenu = function(selectData) {
+    if (selectData == 'Add new') {
+        const newSelectIdx = setSelector.menu.items.length
+        const newSet = `Set${newSelectIdx - 1}`
+        setSelector.menu.addItems([new OO.ui.MenuOptionWidget({data: newSet, label: newSet})], newSelectIdx - 1)
+        addAnnotationSet(newSet)
+    } else {
+        selectAnnotationSet(selectData)
+    }
+}
+
+/**
+ * Update the available menu options in the given menu
+ * from an array
+ * 
+ * @param {string} menuTYpe 'set'|'view' to determine which menu to update
+ * @param {array} newOpts array of strings containing new menu options
+ */
+updateMenu = function(menuType, newOpts) {
+    let menuObj
+    switch (menuType) {
+        case 'set':
+            menuObj = setSelector
+            menuOpts = ['default', ...newOpts, 'Add new']
+            break
+        case 'view':
+            menuObj = viewSelector
+            menuOpts = [...newOpts, 'Add new']
+            break
+    }
+    menuObj.menu.clearItems()
+    menuOpts.forEach(opt => {
+        menuObj.menu.addItems([new OO.ui.MenuOptionWidget({data: opt, label: opt})])
+    })
+}
+
+/**
+ * Refresh all viewer settings and menus from the edit input text
+ */
+refreshConfigs = function() {
+    const newLists = readMvconfig()
+    if (newLists) {
+        for (let lst in newLists) {
+            updateMenu(lst, newLists[lst])
+        }
+    }
+}
+
 //Initialize the menu and get required global objects
-const [modelMenu, viewSelector] = buildPreviewMenu()
+const [modelMenu,
+    viewSelector,
+    setSelector] = buildPreviewMenu()