Convert preview menu buld to function
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
@@ -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
|
//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,
|
||||||
menu: {
|
menu: {
|
||||||
items: setOptionItems,
|
items: setOptionItems,
|
||||||
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',
|
||||||
popup: {
|
popup: {
|
||||||
$content: yawButtons.$element.add(pitchButtons.$element),
|
$content: yawButtons.$element.add(pitchButtons.$element),
|
||||||
padded: true,
|
padded: true,
|
||||||
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,
|
||||||
menu: {
|
menu: {
|
||||||
items: setViewItems,
|
items: setViewItems,
|
||||||
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()
|
||||||
Reference in New Issue
Block a user