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

Refactor preview vs non preview js

Browse Source 
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
Justin Georgi
2024-11-17 12:35:52 -07:00
parent a801e362d9
commit 816fc9628b
2 changed files with 478 additions and 452 deletions
Download Patch File Download Diff File Expand all files Collapse all files

477
modules/glmv-prev.js
View File

@@ -1,10 +1,17 @@
//Initialize globals
let currentSet = 'default'
let deleteHotspot = null
let grabHotspot = null
//EDIT PREVIEW MENU CREATION AND MODIFICATION
/**
* 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()
let [_, origMetadata] = extractMvconfig()
//Annotation Edit Controls
const addHS = new OO.ui.ButtonWidget({
@@ -21,7 +28,7 @@ buildPreviewMenu = function() {
label: 'Update annotations',
invisibleLabel: true
})
updateHS.on('click', readMetadata)
updateHS.on('click', readMvconfig)
updateHS.setDisabled(true)
const deleteHS = new OO.ui.ButtonWidget({
@@ -217,5 +224,471 @@ addMenuOption = function(menuWidget) {
menuWidget.menu.addItems([new OO.ui.MenuOptionWidget({data: 'New option', label: 'New option'})])
}
//MVCONFIG IO
/**
* Convert text in the preview text editor to js object
*
* @return [string, object] full mvconfig text string and mvconfig object
*/
extractMvconfig = function() {
const editText = $('#wpTextbox1').val()
const extractConfig = editText.match(/<mvconfig>([\S\s]*?)<\/mvconfig>/)
let mvconfig = (extractConfig.length >= 2) ? JSON.parse(extractConfig[1]) : {viewerConfig: {}, annotations: {}, annotationSets: {}}
if (mvconfig.viewerConfig === undefined) {
mvconfig.viewerConfig = {
default: {
"camera-controls": true
}
}
}
if (mvconfig.annotations === undefined) {
mvconfig.annotations = {}
}
if (mvconfig.annotationSets === undefined) {
mvconfig.annotationSets = {}
}
return [editText, mvconfig]
}
/**
* Reads the json string in the edit panel
* and updates hotspot elements
*
* @return {bool} true on successful read and update
*/
readMvconfig = function() {
let hotspotsObj = []
let mvconfig
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(mvconfig.annotations[hsLabel]).forEach((prop) => {
newHs.setAttribute(prop, mvconfig.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 {
[_, mvconfig] = extractMvconfig()
} catch (err) {
console.warn('Failed to read model config:' + err.message)
return false
}
if (currentSet != 'default' && mvconfig.annotationSets[currentSet]) {
mvconfig.annotationSets[currentSet].forEach(hs => {
createHotspot(hs, slotNum)
slotNum += 1
})
}
Object.keys(mvconfig.annotations).forEach(hs => {
if (currentSet != 'default' && mvconfig.annotationSets[currentSet] && mvconfig.annotationSets[currentSet].includes(hs)) {
return
}
let label = (currentSet != 'default' && mvconfig.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
}
/**
* Parses the current hotspots into json object
* and writes the json string to the edit panel
*
* @return {bool} true on successful write to edit panel
*/
writeMvconfig = function () {
let annotationsObj = {}
currentButtons = $('.Hotspot').each(function() {
let buttonEl = $(this)[0]
annotationsObj[buttonEl.childNodes[0].innerText] = {
"data-position": buttonEl.getAttribute('data-position'),
"data-normal": buttonEl.getAttribute('data-normal'),
"data-orbit": buttonEl.getAttribute('data-orbit'),
"data-target": buttonEl.getAttribute('data-target')
}
})
if (Object.keys(annotationsObj).length === 0) return false
const [currentText, mvconfig] = extractMvconfig()
mvconfig.annotations = annotationsObj
const newText = currentText.replace(/(.*?<mvconfig>)[\S\s]*?(<\/mvconfig>.*)/,`$1\n${JSON.stringify(mvconfig, null, 2)}\n$2`)
$('#wpTextbox1').val(newText)
return true
}
/**
* Convert all radian values returned by model-viewer to degrees
*
* @param {string} orbString string with any number of `(number)rad` sub strings
* @param {number|array} fix Optional: number of decimal places to return in converted numbers
* @return {string} string with all radian values and units converted to degrees
*/
orb2degree = function(orbString, fix = null) {
let degArray = orbString.split(' ').map(s => {
if (s.includes('rad')) {
return (Number.parseFloat(s) / Math.PI * 180) + 'deg'
} else {
return s
}
})
if (fix && !['number', 'object'].includes(typeof fix)) {
console.warn('orb2degree: fix parameter invalid type. Ignoring.')
fix = null
}
if (fix) {
degArray = degArray.map((v, idx) => {
let fixReg = new RegExp('(\\d*.\\d{' + (((typeof fix) == 'object') ? fix[idx] : fix) + '})(\\d*)([a-z]*)')
return v.replace(fixReg,'$1$3')
})
}
return degArray.join(' ')
}
/**
* Set camera control setting for the current view
*
* @param {string} view
* @return {bool} new camera-controls setting
*/
toggleCameraControl = function(view) {
let [currentText, mvconfig] = extractMvconfig()
const currentView = (mvconfig.viewerConfig[view]) ? view : 'default'
const newControl = !mvconfig.viewerConfig[currentView]['camera-controls']
if (newControl) {
mvconfig.viewerConfig[currentView]['camera-controls'] = newControl
} else {
delete mvconfig.viewerConfig[currentView]['camera-controls']
}
const textUpdate = currentText.replace(/(?<=<mvconfig>)([\S\s]*?)(?=<\/mvconfig>)/gm,`\n${JSON.stringify(mvconfig, null, 2)}\n`)
$('#wpTextbox1').val(textUpdate)
return newControl
}
selectViewConfig = function(view) {
const mView = $('model-viewer')[0]
let [_, mvconfig] = extractMvconfig()
const selectView = (mvconfig.viewerConfig[view]) ? view : 'default'
const viewConfig = mvconfig.viewerConfig[selectView]
const settings = [
"camera-controls",
"disable-pan",
"disable-tap",
"touch-action",
"disable-zoom",
"orbit-sensitivity",
"zoom-sensitivity",
"pan-sensitivity",
"auto-rotate",
"auto-rotate-delay",
"rotation-per-second",
"interaction-prompt-style",
"interaction-prompt-threshold",
"camera-orbit",
"camera-target",
"field-of-view",
"max-camera-orbit",
"min-camera-orbit",
"max-field-of-view",
"min-field-of-view",
"poster",
"ar",
"ar-modes",
"ar-scale",
"ar-placement"
]
settings.forEach(s => {
if (viewConfig[s]) {
mView.setAttribute(s,viewConfig[s])
} else {
mView.removeAttribute(s)
}
})
}
/**
* Set new default camera orbit and send values to the preview
* editor
*/
writeCameraOrbit = function() {
const mView = $('model-viewer')[0]
const newOrbit = orb2degree(mView.getCameraOrbit().toString(),[2,2,5])
mView.setAttribute('camera-orbit', newOrbit)
const targetObj = mView.getCameraTarget()
const newTarget = `${targetObj.x.toFixed(5)}m ${targetObj.y.toFixed(5)}m ${targetObj.z.toFixed(5)}m`
mView.setAttribute('camera-target', newTarget)
const newField = mView.getFieldOfView().toFixed(5) + 'deg'
mView.setAttribute('field-of-view',newField)
let [currentText, mvconfig] = extractMvconfig()
mvconfig.viewerConfig.default['camera-orbit'] = newOrbit
mvconfig.viewerConfig.default['camera-target'] = newTarget
mvconfig.viewerConfig.default['field-of-view'] = newField
const textUpdate = currentText.replace(/(?<=<mvconfig>)([\S\s]*?)(?=<\/mvconfig>)/gm,`\n${JSON.stringify(mvconfig, null, 2)}\n`)
$('#wpTextbox1').val(textUpdate)
}
/**
* Set new camera orbit limits and send values to the preview
* editor
*
* @param {string} axis [yaw|pitch] orbit value to set
* @param {string} limit [max|min] limit value to set
*/
writeCameraLimit = function(axis, limit) {
const mView = $('model-viewer')[0]
const newOrbit = orb2degree(mView.getCameraOrbit().toString(),[2,2,5])
const newOrbitVals = newOrbit.split(' ')
const valueIndex = (axis == 'yaw') ? 0 : 1
let [currentText, mvconfig] = extractMvconfig()
const oldOrbit = mvconfig.viewerConfig.default[`${limit}-camera-orbit`]
let oldOrbitVals = (oldOrbit) ? oldOrbit.split(' ') : Array(3).fill('auto')
oldOrbitVals[valueIndex] = newOrbitVals[valueIndex]
mvconfig.viewerConfig.default[`${limit}-camera-orbit`] = oldOrbitVals.join(' ')
mView.setAttribute(`${limit}-camera-orbit`, oldOrbitVals.join(' '))
const textUpdate = currentText.replace(/(?<=<mvconfig>)([\S\s]*?)(?=<\/mvconfig>)/gm,`\n${JSON.stringify(mvconfig, null, 2)}\n`)
$('#wpTextbox1').val(textUpdate)
}
/**
* Change the currently selected annotation set
*
* @param {string} newSet name of annotation set to select
*/
selectAnnotationSet = function(newSet) {
currentSet = newSet
readMvconfig()
}
//BASIC MODEL-VIEWER SETTINGS
/**
* Disable general interaction with model
* viewer for specific additional function
*
* @param {string} fnClass class to add to model-viewer
* @param {callback} viewCall callback function to add to model-viewer
* @return {Element} model-viewer element
*/
disableViewer = function(fnClass, viewCall) {
const previewMv = $('model-viewer')
if (viewCall) previewMv.one('click', viewCall)
if (fnClass) previewMv.addClass(fnClass)
previewMv[0].disableTap = true
previewMv[0].toggleAttribute('camera-controls', false)
return previewMv[0]
}
/**
* Enable general interaction with model
* viewer
*
* @return {Element} model-viewer element
*/
enableViewer = function() {
const previewMv = $('model-viewer')
previewMv.off('click', clickAddHotspot)
previewMv.off('click', cancelDeleteHotspot)
previewMv.removeClass('AddingHotspot DeletingHotspot')
previewMv[0].disableTap = false
previewMv[0].toggleAttribute('camera-controls', true)
return previewMv[0]
}
/**
* Use the model viewer methods to get image
* of current view and download
*
* @param {string} defName wiki page name to use as base file name
*/
downloadImage = function(defName) {
const imgName = defName.split('.')[0]
const mView = $('model-viewer')[0]
const dlA = document.createElement('a')
dlA.setAttribute('download',imgName + '.png')
const reader = new FileReader()
reader.addEventListener("load", () => {
dlA.setAttribute('href',reader.result)
dlA.click()
},{once: true})
mView.toBlob(null, null, true)
.then(imgBlob => {
reader.readAsDataURL(imgBlob)
})
}
//HOTSPOT EDITING
/**
* Sets listener and attributes on model-viewer to
* allow for click registering of a new hotspot
*/
readyAddHotspot = function() {
disableViewer('AddingHotspot', clickAddHotspot)
}
/**
* Event listener callback to retrieve the info
* about the model surface point selected by the
* mouse and add that information to the editor
* text input
*
* @param {PointerEvent} e
*/
clickAddHotspot = function(e) {
let hsPosition = null
let targetModel = enableViewer()
if (targetModel) {
hsPosition = targetModel.positionAndNormalFromPoint(e.clientX, e.clientY)
}
if (hsPosition) {
let currentText = $('#wpTextbox1').val()
let [_, mvconfig] = extractMvconfig(currentText)
let hsOutput = {}
hsOutput['data-position'] = hsPosition.position.toString().replaceAll(/(\d{5})(\d*?m)/g,"$1m")
hsOutput['data-normal'] = hsPosition.normal.toString().replaceAll(/(\d{5})(\d*?m)/g,"$1m")
hsOutput['data-orbit'] = orb2degree(targetModel.getCameraOrbit().toString(),[2,2,5])
let targetObj = targetModel.getCameraTarget()
hsOutput['data-target'] = `${targetObj.x.toFixed(5)}m ${targetObj.y.toFixed(5)}m ${targetObj.z.toFixed(5)}m`
mvconfig.annotations['Hotspot ' + (Object.keys(mvconfig.annotations).length + 1)] = hsOutput
let newText = currentText.replace(/(.*?<mvconfig>)[\S\s]*?(<\/mvconfig>.*)/,`$1\n${JSON.stringify(mvconfig, null, 2)}\n$2`)
$('#wpTextbox1').val(newText)
}
readMvconfig()
}
/**
* Set flag and attributes on model-viewer to
* delete the next hotspot that is clicked
*/
readyDelHotspot = function() {
deleteHotspot = true
disableViewer('DeletingHotspot', cancelDeleteHotspot)
}
/**
* Unset deleting flag and return normal
* function and style to model viewer
*/
cancelDeleteHotspot = function() {
deleteHotspot = null
enableViewer()
}
/**
* Delete the selected hotspot
*
* @param {element} hs hotspot element to delete
*/
clickDeleteHotspot = function (hs) {
deleteHotspot = null
enableViewer()
const anName = hs.target.childNodes[0].innerText
let purgeAnnotation = new RegExp('(?<="annotationSets"[\\S\\s]*?)(^.*?' + anName + '.*\n)','gm')
hs.target.remove()
const editText = $('#wpTextbox1').val()
const newText = editText.replace(purgeAnnotation,'')
const finalText = newText.replace(/(,)(\n\s+])/gm,'$2')
$('#wpTextbox1').val(finalText)
writeMvconfig()
readMvconfig()
}
/**
* Check status of delete function
*/
isDeleting = function() {
return deleteHotspot
}
/**
* Prepare to drag a hotspot
*
* @param {MouseEvent} event
*/
grabAnnotation = function(e) {
if (e.ctrlKey) {
grabHotspot = {x: e.x, y: e.y}
const contEl = $('.glmv-container')[0]
contEl.addEventListener('mousemove', moveAnnotation)
const mvEl = $('model-viewer')[0]
} else {
grabHotspot = null
}
}
/**
* Drag currently clicked hotspot
*
* @param {MouseEvent} event
*/
moveAnnotation = function(e) {
if (grabHotspot) {
grabHotspot.move = true
e.target.style['transform'] = `translate(${e.x - grabHotspot.x}px, ${e.y - grabHotspot.y}px) scale(1.1,1.1)`
}
}
/**
* End dragging a hotspot and update information
*
* @param {MouseEvent} event
*/
releaseAnnotation = function(e) {
if (grabHotspot && grabHotspot.move) {
e.target.style['transform']=''
const contEl = $('.glmv-container')[0]
contEl.removeEventListener('mousemove', moveAnnotation)
const mvEl = $('model-viewer')[0]
let newPosition = mvEl.positionAndNormalFromPoint(e.clientX, e.clientY)
const newPos = newPosition.position.toString().replaceAll(/(\d{5})(\d*?m)/g,"$1m")
const newNorm = newPosition.normal.toString().replaceAll(/(\d{5})(\d*?m)/g,"$1m")
mvEl.updateHotspot({
name: e.target.slot,
position: newPos,
normal: newNorm
})
const newOrb = orb2degree(mvEl.getCameraOrbit().toString(),[2,2,5])
e.target.setAttribute('data-orbit', newOrb)
let targetObj = mvEl.getCameraTarget()
const newTarg = `${targetObj.x.toFixed(5)}m ${targetObj.y.toFixed(5)}m ${targetObj.z.toFixed(5)}m`
e.target.setAttribute('data-target', newTarg)
let currentText = $('#wpTextbox1').val()
let [_, mvconfig] = extractMvconfig(currentText)
mvconfig.annotations[e.target.childNodes[0].innerText] = {
"data-position": newPos,
"data-normal": newNorm,
"data-orbit": newOrb,
"data-target": newTarg
}
const newText = currentText.replace(/(.*?<mvconfig>)[\S\s]*?(<\/mvconfig>.*)/,`$1\n${JSON.stringify(mvconfig, null, 2)}\n$2`)
$('#wpTextbox1').val(newText)
}
grabHotspot = null
}
//Initialize the menu and get required global objects
const [modelMenu, viewSelector] = buildPreviewMenu()

453
modules/glmv.js
View File

@@ -1,7 +1,4 @@
let slideShowInterval = null
let grabHotspot = null
let deleteHotspot = null
let currentSet = 'default'
/**
* Disables hiding of various child items
@@ -12,174 +9,6 @@ modelLoaded = function(e) {
if (typeof enableMenu != 'undefined') {enableMenu()}
}
/**
* Reads the json string in the edit panel
* and updates hotspot elements
*
* @return {bool} true on successful read and update
*/
readMetadata = function() {
let hotspotsObj = []
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
}
if (currentSet != 'default' && metadata.annotationSets[currentSet]) {
metadata.annotationSets[currentSet].forEach(hs => {
createHotspot(hs, slotNum)
slotNum += 1
})
}
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
}
/**
* Parses the current hotspots into json object
* and writes the json string to the edit panel
*
* @return {bool} true on successful write to edit panel
*/
writeMetadata = function () {
let annotationsObj = {}
currentButtons = $('.Hotspot').each(function() {
let buttonEl = $(this)[0]
annotationsObj[buttonEl.childNodes[0].innerText] = {
"data-position": buttonEl.getAttribute('data-position'),
"data-normal": buttonEl.getAttribute('data-normal'),
"data-orbit": buttonEl.getAttribute('data-orbit'),
"data-target": buttonEl.getAttribute('data-target')
}
})
if (Object.keys(annotationsObj).length === 0) return false
const [currentText, metadata] = extractMetadata()
metadata.annotations = annotationsObj
const newText = currentText.replace(/(.*?<mvconfig>)[\S\s]*?(<\/mvconfig>.*)/,`$1\n${JSON.stringify(metadata, null, 2)}\n$2`)
$('#wpTextbox1').val(newText)
return true
}
/**
* Convert text in the preview text editor to js object
*
* @return object containing metadata information
*/
extractMetadata = function() {
const editText = $('#wpTextbox1').val()
const extractMetadata = editText.match(/<mvconfig>([\S\s]*?)<\/mvconfig>/)
let metadata = (extractMetadata.length >= 2) ? JSON.parse(extractMetadata[1]) : {viewerConfig: {}, annotations: {}, annotationSets: {}}
if (metadata.viewerConfig === undefined) {
metadata.viewerConfig = {
default: {
"camera-controls": true
}
}
}
if (metadata.annotations === undefined) {
metadata.annotations = {}
}
if (metadata.annotationSets === undefined) {
metadata.annotationSets = {}
}
return [editText, metadata]
}
/**
* Sets listener and attributes on model-viewer to
* allow for click registering of a new hotspot
*/
readyAddHotspot = function() {
disableViewer('AddingHotspot', clickAddHotspot)
}
/**
* Event listener callback to retrieve the info
* about the model surface point selected by the
* mouse and add that information to the editor
* text input
*
* @param {PointerEvent} e
*/
clickAddHotspot = function(e) {
let hsPosition = null
let targetModel = enableViewer()
if (targetModel) {
hsPosition = targetModel.positionAndNormalFromPoint(e.clientX, e.clientY)
}
if (hsPosition) {
let currentText = $('#wpTextbox1').val()
let [_, metadata] = extractMetadata(currentText)
let hsOutput = {}
hsOutput['data-position'] = hsPosition.position.toString().replaceAll(/(\d{5})(\d*?m)/g,"$1m")
hsOutput['data-normal'] = hsPosition.normal.toString().replaceAll(/(\d{5})(\d*?m)/g,"$1m")
hsOutput['data-orbit'] = orb2degree(targetModel.getCameraOrbit().toString(),[2,2,5])
let targetObj = targetModel.getCameraTarget()
hsOutput['data-target'] = `${targetObj.x.toFixed(5)}m ${targetObj.y.toFixed(5)}m ${targetObj.z.toFixed(5)}m`
metadata.annotations['Hotspot ' + (Object.keys(metadata.annotations).length + 1)] = hsOutput
let newText = currentText.replace(/(.*?<mvconfig>)[\S\s]*?(<\/mvconfig>.*)/,`$1\n${JSON.stringify(metadata, null, 2)}\n$2`)
$('#wpTextbox1').val(newText)
}
readMetadata()
}
/**
* Set flag and attributes on model-viewer to
* delete the next hotspot that is clicked
*/
readyDelHotspot = function() {
deleteHotspot = true
disableViewer('DeletingHotspot', cancelDeleteHotspot)
}
/**
* Unset deleting flag and return normal
* function and style to model viewer
*/
cancelDeleteHotspot = function() {
deleteHotspot = null
enableViewer()
}
/**
* Event listener callback to toggle the visibility
* of a hotspot's annotation when the hotspot is
@@ -189,19 +18,9 @@ cancelDeleteHotspot = function() {
*/
onAnnotation = function(e) {
e.stopPropagation()
if (deleteHotspot) {
deleteHotspot = null
enableViewer()
const anName = e.target.childNodes[0].innerText
let purgeAnnotation = new RegExp('(?<="annotationSets"[\\S\\s]*?)(^.*?' + anName + '.*\n)','gm')
e.target.remove()
const editText = $('#wpTextbox1').val()
const newText = editText.replace(purgeAnnotation,'')
const finalText = newText.replace(/(,)(\n\s+])/gm,'$2')
$('#wpTextbox1').val(finalText)
writeMetadata()
readMetadata()
return
if (typeof isDeleting != 'undefined' && isDeleting()) {
clickDeleteHotspot(e)
return
}
let targetAnnotation = Number.parseInt(e.target.slot.split('-')[1])
let targetModel = e.target.closest('model-viewer')
@@ -326,130 +145,6 @@ toggleAnnotations = function(mView) {
})
}
/**
* Prepare to drag a hotspot
*
* @param {MouseEvent} event
*/
grabAnnotation = function(e) {
if (e.ctrlKey) {
grabHotspot = {x: e.x, y: e.y}
const contEl = $('.glmv-container')[0]
contEl.addEventListener('mousemove', moveAnnotation)
const mvEl = $('model-viewer')[0]
} else {
grabHotspot = null
}
}
/**
* Drag currently clicked hotspot
*
* @param {MouseEvent} event
*/
moveAnnotation = function(e) {
if (grabHotspot) {
grabHotspot.move = true
e.target.style['transform'] = `translate(${e.x - grabHotspot.x}px, ${e.y - grabHotspot.y}px) scale(1.1,1.1)`
}
}
/**
* End dragging a hotspot and update information
*
* @param {MouseEvent} event
*/
releaseAnnotation = function(e) {
if (grabHotspot && grabHotspot.move) {
e.target.style['transform']=''
const contEl = $('.glmv-container')[0]
contEl.removeEventListener('mousemove', moveAnnotation)
const mvEl = $('model-viewer')[0]
let newPosition = mvEl.positionAndNormalFromPoint(e.clientX, e.clientY)
const newPos = newPosition.position.toString().replaceAll(/(\d{5})(\d*?m)/g,"$1m")
const newNorm = newPosition.normal.toString().replaceAll(/(\d{5})(\d*?m)/g,"$1m")
mvEl.updateHotspot({
name: e.target.slot,
position: newPos,
normal: newNorm
})
const newOrb = orb2degree(mvEl.getCameraOrbit().toString(),[2,2,5])
e.target.setAttribute('data-orbit', newOrb)
let targetObj = mvEl.getCameraTarget()
const newTarg = `${targetObj.x.toFixed(5)}m ${targetObj.y.toFixed(5)}m ${targetObj.z.toFixed(5)}m`
e.target.setAttribute('data-target', newTarg)
let currentText = $('#wpTextbox1').val()
let [_, metadata] = extractMetadata(currentText)
metadata.annotations[e.target.childNodes[0].innerText] = {
"data-position": newPos,
"data-normal": newNorm,
"data-orbit": newOrb,
"data-target": newTarg
}
const newText = currentText.replace(/(.*?<mvconfig>)[\S\s]*?(<\/mvconfig>.*)/,`$1\n${JSON.stringify(metadata, null, 2)}\n$2`)
$('#wpTextbox1').val(newText)
}
grabHotspot = null
}
/**
* Disable general interaction with model
* viewer for specific additional function
*
* @param {string} fnClass class to add to model-viewer
* @param {callback} viewCall callback function to add to model-viewer
* @return {Element} model-viewer element
*/
disableViewer = function(fnClass, viewCall) {
const previewMv = $('model-viewer')
if (viewCall) previewMv.one('click', viewCall)
if (fnClass) previewMv.addClass(fnClass)
previewMv[0].disableTap = true
previewMv[0].toggleAttribute('camera-controls', false)
return previewMv[0]
}
/**
* Enable general interaction with model
* viewer
*
* @return {Element} model-viewer element
*/
enableViewer = function() {
const previewMv = $('model-viewer')
previewMv.off('click', clickAddHotspot)
previewMv.off('click', cancelDeleteHotspot)
previewMv.removeClass('AddingHotspot DeletingHotspot')
previewMv[0].disableTap = false
previewMv[0].toggleAttribute('camera-controls', true)
return previewMv[0]
}
/**
* Use the model viewer methods to get image
* of current view and download
*
* @param {string} defName wiki page name to use as base file name
*/
downloadImage = function(defName) {
const imgName = defName.split('.')[0]
const mView = $('model-viewer')[0]
const dlA = document.createElement('a')
dlA.setAttribute('download',imgName + '.png')
const reader = new FileReader()
reader.addEventListener("load", () => {
dlA.setAttribute('href',reader.result)
dlA.click()
},{once: true})
mView.toBlob(null, null, true)
.then(imgBlob => {
reader.readAsDataURL(imgBlob)
})
}
/**
* Respond to full screen changes on the gl container
*
@@ -461,146 +156,4 @@ toggleFullScreen = function(glCont) {
} else {
glCont.requestFullscreen()
}
}
/**
* Set camera control setting for the current view
*
* @param {string} view
* @return {bool} new camera-controls setting
*/
toggleCameraControl = function(view) {
let [currentText, mvconfig] = extractMetadata()
const currentView = (mvconfig.viewerConfig[view]) ? view : 'default'
const newControl = !mvconfig.viewerConfig[currentView]['camera-controls']
if (newControl) {
mvconfig.viewerConfig[currentView]['camera-controls'] = newControl
} else {
delete mvconfig.viewerConfig[currentView]['camera-controls']
}
const textUpdate = currentText.replace(/(?<=<mvconfig>)([\S\s]*?)(?=<\/mvconfig>)/gm,`\n${JSON.stringify(mvconfig, null, 2)}\n`)
$('#wpTextbox1').val(textUpdate)
return newControl
}
selectViewConfig = function(view) {
const mView = $('model-viewer')[0]
let [_, mvconfig] = extractMetadata()
const selectView = (mvconfig.viewerConfig[view]) ? view : 'default'
const viewConfig = mvconfig.viewerConfig[selectView]
const settings = [
"camera-controls",
"disable-pan",
"disable-tap",
"touch-action",
"disable-zoom",
"orbit-sensitivity",
"zoom-sensitivity",
"pan-sensitivity",
"auto-rotate",
"auto-rotate-delay",
"rotation-per-second",
"interaction-prompt-style",
"interaction-prompt-threshold",
"camera-orbit",
"camera-target",
"field-of-view",
"max-camera-orbit",
"min-camera-orbit",
"max-field-of-view",
"min-field-of-view",
"poster",
"ar",
"ar-modes",
"ar-scale",
"ar-placement"
]
settings.forEach(s => {
if (viewConfig[s]) {
mView.setAttribute(s,viewConfig[s])
} else {
mView.removeAttribute(s)
}
})
}
/**
* Set new default camera orbit and send values to the preview
* editor
*/
writeCameraOrbit = function() {
const mView = $('model-viewer')[0]
const newOrbit = orb2degree(mView.getCameraOrbit().toString(),[2,2,5])
mView.setAttribute('camera-orbit', newOrbit)
const targetObj = mView.getCameraTarget()
const newTarget = `${targetObj.x.toFixed(5)}m ${targetObj.y.toFixed(5)}m ${targetObj.z.toFixed(5)}m`
mView.setAttribute('camera-target', newTarget)
const newField = mView.getFieldOfView().toFixed(5) + 'deg'
mView.setAttribute('field-of-view',newField)
let [currentText, mvconfig] = extractMetadata()
mvconfig.viewerConfig.default['camera-orbit'] = newOrbit
mvconfig.viewerConfig.default['camera-target'] = newTarget
mvconfig.viewerConfig.default['field-of-view'] = newField
const textUpdate = currentText.replace(/(?<=<mvconfig>)([\S\s]*?)(?=<\/mvconfig>)/gm,`\n${JSON.stringify(mvconfig, null, 2)}\n`)
$('#wpTextbox1').val(textUpdate)
}
/**
* Set new camera orbit limits and send values to the preview
* editor
*
* @param {string} axis [yaw|pitch] orbit value to set
* @param {string} limit [max|min] limit value to set
*/
writeCameraLimit = function(axis, limit) {
const mView = $('model-viewer')[0]
const newOrbit = orb2degree(mView.getCameraOrbit().toString(),[2,2,5])
const newOrbitVals = newOrbit.split(' ')
const valueIndex = (axis == 'yaw') ? 0 : 1
let [currentText, mvconfig] = extractMetadata()
const oldOrbit = mvconfig.viewerConfig.default[`${limit}-camera-orbit`]
let oldOrbitVals = (oldOrbit) ? oldOrbit.split(' ') : Array(3).fill('auto')
oldOrbitVals[valueIndex] = newOrbitVals[valueIndex]
mvconfig.viewerConfig.default[`${limit}-camera-orbit`] = oldOrbitVals.join(' ')
mView.setAttribute(`${limit}-camera-orbit`, oldOrbitVals.join(' '))
const textUpdate = currentText.replace(/(?<=<mvconfig>)([\S\s]*?)(?=<\/mvconfig>)/gm,`\n${JSON.stringify(mvconfig, null, 2)}\n`)
$('#wpTextbox1').val(textUpdate)
}
/**
* Convert all radian values returned by model-viewer to degrees
*
* @param {string} orbString string with any number of `(number)rad` sub strings
* @param {number|array} fix Optional: number of decimal places to return in converted numbers
* @return {string} string with all radian values and units converted to degrees
*/
orb2degree = function(orbString, fix = null) {
let degArray = orbString.split(' ').map(s => {
if (s.includes('rad')) {
return (Number.parseFloat(s) / Math.PI * 180) + 'deg'
} else {
return s
}
})
if (fix && !['number', 'object'].includes(typeof fix)) {
console.warn('orb2degree: fix parameter invalid type. Ignoring.')
fix = null
}
if (fix) {
degArray = degArray.map((v, idx) => {
let fixReg = new RegExp('(\\d*.\\d{' + (((typeof fix) == 'object') ? fix[idx] : fix) + '})(\\d*)([a-z]*)')
return v.replace(fixReg,'$1$3')
})
}
return degArray.join(' ')
}
/**
* Change the currently selected annotation set
*
* @param {string} newSet name of annotation set to select
*/
selectAnnotationSet = function(newSet) {
currentSet = newSet
readMetadata()
}