From a801e362d9be360cc157a2cb199227907712dec6 Mon Sep 17 00:00:00 2001 From: Justin Georgi Date: Sun, 17 Nov 2024 11:35:45 -0700 Subject: [PATCH] Convert preview menu buld to function Signed-off-by: Justin Georgi --- modules/glmv-prev.js | 356 +++++++++++++++++++++++-------------------- 1 file changed, 191 insertions(+), 165 deletions(-) diff --git a/modules/glmv-prev.js b/modules/glmv-prev.js index ddbb744..312e454 100644 --- a/modules/glmv-prev.js +++ b/modules/glmv-prev.js @@ -1,195 +1,221 @@ -let [_, origMetadata] = extractMetadata() +/** + * Use the OOui js library to create wikis-style menu + * options on the preview edits page for interaction + * with the model + */ +buildPreviewMenu = function() { + let [_, origMetadata] = extractMetadata() -//Annotation Edit Controls -const addHS = new OO.ui.ButtonWidget({ - icon: 'mapPinAdd', - label: 'Add annotation', - invisibleLabel: true, - class: 'edit-button' -}) -addHS.on('click', readyAddHotspot) -addHS.setDisabled(true) + //Annotation Edit Controls + const addHS = new OO.ui.ButtonWidget({ + icon: 'mapPinAdd', + label: 'Add annotation', + invisibleLabel: true, + class: 'edit-button' + }) + addHS.on('click', readyAddHotspot) + addHS.setDisabled(true) -const updateHS = new OO.ui.ButtonWidget({ - icon: 'reload', - label: 'Update annotations', - invisibleLabel: true -}) -updateHS.on('click', readMetadata) -updateHS.setDisabled(true) + const updateHS = new OO.ui.ButtonWidget({ + icon: 'reload', + label: 'Update annotations', + invisibleLabel: true + }) + updateHS.on('click', readMetadata) + updateHS.setDisabled(true) -const deleteHS = new OO.ui.ButtonWidget({ - icon: 'cancel', - label: 'Delete annotation', - invisibleLabel: true -}) -deleteHS.on('click', readyDelHotspot) -deleteHS.setDisabled(true) + const deleteHS = new OO.ui.ButtonWidget({ + icon: 'cancel', + label: 'Delete annotation', + invisibleLabel: true + }) + 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 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 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, setSelectHS ] -}) + const hotspotButtons = new OO.ui.ButtonGroupWidget({ + items: [ addHS, updateHS, 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) + //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', - invisibleLabel: true -}) -setView.on('click', writeCameraOrbit) -setView.setDisabled(true) + const setView = new OO.ui.ButtonWidget({ + icon: 'camera', + label: 'Set Initial View', + invisibleLabel: true + }) + setView.on('click', writeCameraOrbit) + setView.setDisabled(true) -const setControl = new OO.ui.ButtonWidget({ - icon: 'hand', - label: 'Toggle camera control', - invisibleLabel: true -}) -setControl.on('click', () => $('model-viewer')[0].toggleAttribute('camera-controls', toggleCameraControl())) -setControl.setDisabled(true) + const setControl = new OO.ui.ButtonWidget({ + icon: 'hand', + label: 'Toggle camera control', + invisibleLabel: true + }) + setControl.on('click', () => $('model-viewer')[0].toggleAttribute('camera-controls', toggleCameraControl())) + setControl.setDisabled(true) -//View Limit Controls -const setMinYaw = new OO.ui.ButtonWidget({ - label: 'Min' -}) -setMinYaw.on('click', () => { - writeCameraLimit('yaw','min') -}) + //View Limit Controls + const setMinYaw = new OO.ui.ButtonWidget({ + label: 'Min' + }) + setMinYaw.on('click', () => { + writeCameraLimit('yaw','min') + }) -const setMaxYaw = new OO.ui.ButtonWidget({ - label: 'Max' -}) -setMaxYaw.on('click', () => { - writeCameraLimit('yaw','max') -}) + const setMaxYaw = new OO.ui.ButtonWidget({ + label: 'Max' + }) + setMaxYaw.on('click', () => { + writeCameraLimit('yaw','max') + }) -const yawLimitButtons = new OO.ui.ButtonGroupWidget({ - items: [ setMinYaw, setMaxYaw ] -}) + const yawLimitButtons = new OO.ui.ButtonGroupWidget({ + items: [ setMinYaw, setMaxYaw ] + }) -const labelYaw = new OO.ui.LabelWidget({ - label: "Yaw:" -}) + const labelYaw = new OO.ui.LabelWidget({ + label: "Yaw:" + }) -const yawButtons = new OO.ui.HorizontalLayout({ - items: [ - labelYaw, - yawLimitButtons - ], - id: 'yaw-limits' -}) + const yawButtons = new OO.ui.HorizontalLayout({ + items: [ + labelYaw, + yawLimitButtons + ], + id: 'yaw-limits' + }) -const setMinPitch = new OO.ui.ButtonWidget({ - label: 'Min' -}) -setMinPitch.on('click', () => { - writeCameraLimit('pitch','min') -}) + const setMinPitch = new OO.ui.ButtonWidget({ + label: 'Min' + }) + setMinPitch.on('click', () => { + writeCameraLimit('pitch','min') + }) -const setMaxPitch = new OO.ui.ButtonWidget({ - label: 'Max' -}) -setMaxPitch.on('click', () => { - writeCameraLimit('pitch','max') -}) + const setMaxPitch = new OO.ui.ButtonWidget({ + label: 'Max' + }) + setMaxPitch.on('click', () => { + writeCameraLimit('pitch','max') + }) -const pitchLimitButtons = new OO.ui.ButtonGroupWidget({ - items: [ setMinPitch, setMaxPitch ] -}) + const pitchLimitButtons = new OO.ui.ButtonGroupWidget({ + items: [ setMinPitch, setMaxPitch ] + }) -const labelPitch = new OO.ui.LabelWidget({ - label: "Pitch:" -}) + const labelPitch = new OO.ui.LabelWidget({ + label: "Pitch:" + }) -const pitchButtons = new OO.ui.HorizontalLayout({ - items: [ - labelPitch, - pitchLimitButtons - ], - id: 'pitch-limits' -}) + const pitchButtons = new OO.ui.HorizontalLayout({ + items: [ + labelPitch, + pitchLimitButtons + ], + id: 'pitch-limits' + }) -const setLims = new OO.ui.PopupButtonWidget({ - label: 'Set View Limits', - invisibleLabel: true, - icon: 'tableMergeCells', - popup: { - $content: yawButtons.$element.add(pitchButtons.$element), - padded: true, - position: 'above' - }, - $overlay: $('#bodyContent') -}) -setLims.setDisabled(true) + const setLims = new OO.ui.PopupButtonWidget({ + label: 'Set View Limits', + invisibleLabel: true, + icon: 'tableMergeCells', + popup: { + $content: yawButtons.$element.add(pitchButtons.$element), + padded: true, + position: 'above' + }, + $overlay: $('#bodyContent') + }) + setLims.setDisabled(true) -const setViewConfig = [...Object.keys(origMetadata.viewerConfig)] -let setViewItems = [] -setViewConfig.forEach(opt => { - setViewItems.push(new OO.ui.MenuOptionWidget({data: opt, label: opt})) -}) + const setViewConfig = [...Object.keys(origMetadata.viewerConfig)] + let setViewItems = [] + setViewConfig.forEach(opt => { + setViewItems.push(new OO.ui.MenuOptionWidget({data: opt, label: opt})) + }) -const selectVC = new OO.ui.ButtonMenuSelectWidget({ - icon: 'eye', - label: 'Select view configuration', - invisibleLabel: true, - menu: { - items: setViewItems, - width: 'min-content' - }, - $overlay: $('#bodyContent') -}) -selectVC.getMenu().on( 'choose', selSet => { - selectViewConfig(selSet.data) -}) -selectVC.setDisabled(true) + const selectVC = new OO.ui.ButtonMenuSelectWidget({ + icon: 'eye', + label: 'Select view configuration', + invisibleLabel: true, + menu: { + items: setViewItems, + width: 'min-content' + }, + $overlay: $('#bodyContent') + }) + selectVC.getMenu().on( 'choose', selSet => { + selectViewConfig(selSet.data) + }) + selectVC.setDisabled(true) + console.log(selectVC) -const cameraButtons = new OO.ui.ButtonGroupWidget({ - items: [ downloadViewerImage, setControl, setView, setLims, selectVC ] -}) + const cameraButtons = new OO.ui.ButtonGroupWidget({ + items: [ downloadViewerImage, setControl, setView, setLims, selectVC ] + }) -//Main Menu -const modelMenu = new OO.ui.HorizontalLayout({ - items: [ - hotspotButtons, - cameraButtons - ], - id: 'edit-model-menu' -}) + //Main Menu + const modelMenu = new OO.ui.HorizontalLayout({ + items: [ + hotspotButtons, + cameraButtons + ], + id: 'edit-model-menu' + }) -$('#wikiPreview').after(modelMenu.$element) + $('#wikiPreview').after(modelMenu.$element) + return [modelMenu, selectVC] +} + +/** + * Enable all the preview menu widgets (called by + * model load event) + */ enableMenu = function() { modelMenu.items.forEach(group => { group.items.forEach(el => el.setDisabled(false)) }); -} \ No newline at end of file +} + +/** + * 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'})]) +} + +//Initialize the menu and get required global objects +const [modelMenu, viewSelector] = buildPreviewMenu() \ No newline at end of file