292 lines
11 KiB
JavaScript
292 lines
11 KiB
JavaScript
const TOML = require('./mini-st.js')
|
|
|
|
/**
|
|
* 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) ? TOML.parse(extractConfig[1]) : {viewerConfig: {}, annotations: {}, annotationSets: {}}
|
|
if (mvconfig.viewerConfig === undefined) {
|
|
mvconfig.viewerConfig = {
|
|
default: {
|
|
"camera-controls": true
|
|
}
|
|
}
|
|
}
|
|
if (mvconfig.annotations === undefined) {
|
|
mvconfig.annotations = {}
|
|
}
|
|
const mView = $('model-viewer')[0]
|
|
const hsButtons = [...mView.parentElement.querySelectorAll('.disable-on-none')]
|
|
hsButtons.forEach( mb => {
|
|
mb.toggleAttribute('disabled',$.isEmptyObject(mvconfig.annotations))
|
|
})
|
|
|
|
if (mvconfig.annotationSets === undefined) {
|
|
mvconfig.annotationSets = {}
|
|
}
|
|
return [editText, mvconfig]
|
|
}
|
|
|
|
/**
|
|
* Reads the TOML string in the edit panel
|
|
* and updates hotspot elements and menu settings
|
|
*
|
|
* @return {bool|object} arrays of view and set names on successful read and update false on failure
|
|
*/
|
|
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
|
|
}
|
|
const currentSet = $('model-viewer').attr('currentSet') || 'default'
|
|
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 {
|
|
set: Object.keys(mvconfig.annotationSets),
|
|
view: Object.keys(mvconfig.viewerConfig)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Parses the current hotspots into TOML object
|
|
* and writes the TOML 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${TOML.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 Number.parseFloat(v).toFixed((typeof fix == 'object') ? fix[idx] : fix) + v.substring(v.search(/[a-z]/))
|
|
})
|
|
}
|
|
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${TOML.stringify(mvconfig, null, 2)}\n`)
|
|
$('#wpTextbox1').val(textUpdate)
|
|
return newControl
|
|
}
|
|
|
|
/**
|
|
* Add a new annoation set object to annotatsionSets array
|
|
*
|
|
* @param {string} newSet name of new view config
|
|
*/
|
|
addAnnotationSet = function(newSet) {
|
|
const mView = $('model-viewer')[0]
|
|
let [currentText, mvconfig] = extractMvconfig()
|
|
mvconfig.annotationSets[newSet] = []
|
|
const textUpdate = currentText.replace(/(?<=<mvconfig>)([\S\s]*?)(?=<\/mvconfig>)/gm,`\n${TOML.stringify(mvconfig, null, 2)}\n`)
|
|
$('#wpTextbox1').val(textUpdate)
|
|
selectAnnotationSet(newSet)
|
|
}
|
|
|
|
/**
|
|
* Add a new set of view configurations to viewerConfig
|
|
*
|
|
* @param {string} newView name of new view config
|
|
*/
|
|
addViewConfig = function(newView) {
|
|
const mView = $('model-viewer')[0]
|
|
let [currentText, mvconfig] = extractMvconfig()
|
|
mvconfig.viewerConfig[newView] = { "camera-controls": true }
|
|
const textUpdate = currentText.replace(/(?<=<mvconfig>)([\S\s]*?)(?=<\/mvconfig>)/gm,`\n${TOML.stringify(mvconfig, null, 2)}\n`)
|
|
$('#wpTextbox1').val(textUpdate)
|
|
selectViewConfig(newView)
|
|
}
|
|
|
|
/**
|
|
* Switch the current model-viewer attributes to a different
|
|
* set of configurations in the mvconfig data
|
|
*
|
|
* @param {string} view the view name (viewerConfig object key)
|
|
*/
|
|
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)
|
|
}
|
|
})
|
|
mView.setAttribute('current-view',selectView)
|
|
}
|
|
|
|
/**
|
|
* Set new default camera orbit and send values to the preview
|
|
* editor
|
|
*/
|
|
writeCameraOrbit = function() {
|
|
const mView = $('model-viewer')[0]
|
|
const currentView = mView.getAttribute('current-view') ? mView.getAttribute('current-view') : 'default'
|
|
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[currentView]['camera-orbit'] = newOrbit
|
|
mvconfig.viewerConfig[currentView]['camera-target'] = newTarget
|
|
mvconfig.viewerConfig[currentView]['field-of-view'] = newField
|
|
const textUpdate = currentText.replace(/(?<=<mvconfig>)([\S\s]*?)(?=<\/mvconfig>)/gm,`\n${TOML.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${TOML.stringify(mvconfig, null, 2)}\n`)
|
|
$('#wpTextbox1').val(textUpdate)
|
|
} |