jgeorgi/GlModelViewer
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Convert preview menu buld to function

Browse Source 
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
Justin Georgi
2024-11-17 11:35:45 -07:00
parent d419f6fe7e
commit a801e362d9
1 changed files with 191 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
modules/glmv-prev.js
View File

@@ -1,38 +1,44 @@
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 //Annotation Edit Controls
const addHS = new OO.ui.ButtonWidget({ const addHS = new OO.ui.ButtonWidget({
icon: 'mapPinAdd', icon: 'mapPinAdd',
label: 'Add annotation', label: 'Add annotation',
invisibleLabel: true, invisibleLabel: true,
class: 'edit-button' class: 'edit-button'
}) })
addHS.on('click', readyAddHotspot) addHS.on('click', readyAddHotspot)
addHS.setDisabled(true) addHS.setDisabled(true)
const updateHS = new OO.ui.ButtonWidget({ const updateHS = new OO.ui.ButtonWidget({
icon: 'reload', icon: 'reload',
label: 'Update annotations', label: 'Update annotations',
invisibleLabel: true invisibleLabel: true
}) })
updateHS.on('click', readMetadata) updateHS.on('click', readMetadata)
updateHS.setDisabled(true) updateHS.setDisabled(true)
const deleteHS = new OO.ui.ButtonWidget({ const deleteHS = new OO.ui.ButtonWidget({
icon: 'cancel', icon: 'cancel',
label: 'Delete annotation', label: 'Delete annotation',
invisibleLabel: true invisibleLabel: true
}) })
deleteHS.on('click', readyDelHotspot) deleteHS.on('click', readyDelHotspot)
deleteHS.setDisabled(true) deleteHS.setDisabled(true)
const setOptions = ['default', ...Object.keys(origMetadata.annotationSets)] const setOptions = ['default', ...Object.keys(origMetadata.annotationSets)]
let setOptionItems = [] let setOptionItems = []
setOptions.forEach(opt => { setOptions.forEach(opt => {
setOptionItems.push(new OO.ui.MenuOptionWidget({data: opt, label: opt})) setOptionItems.push(new OO.ui.MenuOptionWidget({data: opt, label: opt}))
}) })
const setSelectHS = new OO.ui.ButtonMenuSelectWidget({ const setSelectHS = new OO.ui.ButtonMenuSelectWidget({
icon: 'mapTrail', icon: 'mapTrail',
label: 'Select annotation set', label: 'Select annotation set',
invisibleLabel: true, invisibleLabel: true,
@@ -41,105 +47,105 @@ const setSelectHS = new OO.ui.ButtonMenuSelectWidget({
width: 'min-content' width: 'min-content'
}, },
$overlay: $('#bodyContent') $overlay: $('#bodyContent')
}) })
setSelectHS.getMenu().on( 'choose', selSet => { setSelectHS.getMenu().on( 'choose', selSet => {
selectAnnotationSet(selSet.data) selectAnnotationSet(selSet.data)
}) })
setSelectHS.setDisabled(true) setSelectHS.setDisabled(true)
const hotspotButtons = new OO.ui.ButtonGroupWidget({ const hotspotButtons = new OO.ui.ButtonGroupWidget({
items: [ addHS, updateHS, deleteHS, setSelectHS ] items: [ addHS, updateHS, deleteHS, setSelectHS ]
}) })
//View Edit Controls //View Edit Controls
const downloadViewerImage = new OO.ui.ButtonWidget({ const downloadViewerImage = new OO.ui.ButtonWidget({
icon: 'imageAdd', icon: 'imageAdd',
label: 'Download current image', label: 'Download current image',
invisibleLabel: true invisibleLabel: true
}) })
downloadViewerImage.on('click', () => { downloadViewerImage.on('click', () => {
downloadImage(mw.config.values.wgTitle) downloadImage(mw.config.values.wgTitle)
}) })
downloadViewerImage.setDisabled(true) downloadViewerImage.setDisabled(true)
const setView = new OO.ui.ButtonWidget({ const setView = new OO.ui.ButtonWidget({
icon: 'camera', icon: 'camera',
label: 'Set Initial View', label: 'Set Initial View',
invisibleLabel: true invisibleLabel: true
}) })
setView.on('click', writeCameraOrbit) setView.on('click', writeCameraOrbit)
setView.setDisabled(true) setView.setDisabled(true)
const setControl = new OO.ui.ButtonWidget({ const setControl = new OO.ui.ButtonWidget({
icon: 'hand', icon: 'hand',
label: 'Toggle camera control', label: 'Toggle camera control',
invisibleLabel: true invisibleLabel: true
}) })
setControl.on('click', () => $('model-viewer')[0].toggleAttribute('camera-controls', toggleCameraControl())) setControl.on('click', () => $('model-viewer')[0].toggleAttribute('camera-controls', toggleCameraControl()))
setControl.setDisabled(true) setControl.setDisabled(true)
//View Limit Controls //View Limit Controls
const setMinYaw = new OO.ui.ButtonWidget({ const setMinYaw = new OO.ui.ButtonWidget({
label: 'Min' label: 'Min'
}) })
setMinYaw.on('click', () => { setMinYaw.on('click', () => {
writeCameraLimit('yaw','min') writeCameraLimit('yaw','min')
}) })
const setMaxYaw = new OO.ui.ButtonWidget({ const setMaxYaw = new OO.ui.ButtonWidget({
label: 'Max' label: 'Max'
}) })
setMaxYaw.on('click', () => { setMaxYaw.on('click', () => {
writeCameraLimit('yaw','max') writeCameraLimit('yaw','max')
}) })
const yawLimitButtons = new OO.ui.ButtonGroupWidget({ const yawLimitButtons = new OO.ui.ButtonGroupWidget({
items: [ setMinYaw, setMaxYaw ] items: [ setMinYaw, setMaxYaw ]
}) })
const labelYaw = new OO.ui.LabelWidget({ const labelYaw = new OO.ui.LabelWidget({
label: "Yaw:" label: "Yaw:"
}) })
const yawButtons = new OO.ui.HorizontalLayout({ const yawButtons = new OO.ui.HorizontalLayout({
items: [ items: [
labelYaw, labelYaw,
yawLimitButtons yawLimitButtons
], ],
id: 'yaw-limits' id: 'yaw-limits'
}) })
const setMinPitch = new OO.ui.ButtonWidget({ const setMinPitch = new OO.ui.ButtonWidget({
label: 'Min' label: 'Min'
}) })
setMinPitch.on('click', () => { setMinPitch.on('click', () => {
writeCameraLimit('pitch','min') writeCameraLimit('pitch','min')
}) })
const setMaxPitch = new OO.ui.ButtonWidget({ const setMaxPitch = new OO.ui.ButtonWidget({
label: 'Max' label: 'Max'
}) })
setMaxPitch.on('click', () => { setMaxPitch.on('click', () => {
writeCameraLimit('pitch','max') writeCameraLimit('pitch','max')
}) })
const pitchLimitButtons = new OO.ui.ButtonGroupWidget({ const pitchLimitButtons = new OO.ui.ButtonGroupWidget({
items: [ setMinPitch, setMaxPitch ] items: [ setMinPitch, setMaxPitch ]
}) })
const labelPitch = new OO.ui.LabelWidget({ const labelPitch = new OO.ui.LabelWidget({
label: "Pitch:" label: "Pitch:"
}) })
const pitchButtons = new OO.ui.HorizontalLayout({ const pitchButtons = new OO.ui.HorizontalLayout({
items: [ items: [
labelPitch, labelPitch,
pitchLimitButtons pitchLimitButtons
], ],
id: 'pitch-limits' id: 'pitch-limits'
}) })
const setLims = new OO.ui.PopupButtonWidget({ const setLims = new OO.ui.PopupButtonWidget({
label: 'Set View Limits', label: 'Set View Limits',
invisibleLabel: true, invisibleLabel: true,
icon: 'tableMergeCells', icon: 'tableMergeCells',
@@ -149,16 +155,16 @@ const setLims = new OO.ui.PopupButtonWidget({
position: 'above' position: 'above'
}, },
$overlay: $('#bodyContent') $overlay: $('#bodyContent')
}) })
setLims.setDisabled(true) setLims.setDisabled(true)
const setViewConfig = [...Object.keys(origMetadata.viewerConfig)] const setViewConfig = [...Object.keys(origMetadata.viewerConfig)]
let setViewItems = [] let setViewItems = []
setViewConfig.forEach(opt => { setViewConfig.forEach(opt => {
setViewItems.push(new OO.ui.MenuOptionWidget({data: opt, label: opt})) setViewItems.push(new OO.ui.MenuOptionWidget({data: opt, label: opt}))
}) })
const selectVC = new OO.ui.ButtonMenuSelectWidget({ const selectVC = new OO.ui.ButtonMenuSelectWidget({
icon: 'eye', icon: 'eye',
label: 'Select view configuration', label: 'Select view configuration',
invisibleLabel: true, invisibleLabel: true,
@@ -167,29 +173,49 @@ const selectVC = new OO.ui.ButtonMenuSelectWidget({
width: 'min-content' width: 'min-content'
}, },
$overlay: $('#bodyContent') $overlay: $('#bodyContent')
}) })
selectVC.getMenu().on( 'choose', selSet => { selectVC.getMenu().on( 'choose', selSet => {
selectViewConfig(selSet.data) selectViewConfig(selSet.data)
}) })
selectVC.setDisabled(true) selectVC.setDisabled(true)
console.log(selectVC)
const cameraButtons = new OO.ui.ButtonGroupWidget({ const cameraButtons = new OO.ui.ButtonGroupWidget({
items: [ downloadViewerImage, setControl, setView, setLims, selectVC ] items: [ downloadViewerImage, setControl, setView, setLims, selectVC ]
}) })
//Main Menu //Main Menu
const modelMenu = new OO.ui.HorizontalLayout({ const modelMenu = new OO.ui.HorizontalLayout({
items: [ items: [
hotspotButtons, hotspotButtons,
cameraButtons cameraButtons
], ],
id: 'edit-model-menu' 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() { enableMenu = function() {
modelMenu.items.forEach(group => { modelMenu.items.forEach(group => {
group.items.forEach(el => el.setDisabled(false)) group.items.forEach(el => el.setDisabled(false))
}); });
} }
/**
* 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()