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

Add click and drag to hotspots during edit

Browse Source 
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
Justin Georgi
2024-10-28 19:37:37 -07:00
parent 6905e1310f
commit 46ee8b6ee9
3 changed files with 88 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
modules/glmv.js
View File

@@ -1,4 +1,6 @@
let slideShowInterval = null
let grabHotspotTimer = null
let grabHotspotStart = null
/**
* Sets listener and attributes on model-viewer to
@@ -32,11 +34,7 @@ clickAddHotspot = function(e) {
}
if (hsPosition) {
let currentText = $('#wpTextbox1').val()
let extractMetadata = currentText.match(/<pre>([\S\s]*?)<\/pre>/)
let metadata = (extractMetadata.length >= 2) ? JSON.parse(extractMetadata[1]) : {viewerConfig: {}, annotations: {}, annotationSets: {}}
if (metadata.annotations === undefined) {
metadata.annotations = {}
}
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")
@@ -44,7 +42,6 @@ clickAddHotspot = function(e) {
hsOutput['data-orbit'] = `${orbitObj.theta.toFixed(2)}rad ${orbitObj.phi.toFixed(2)}rad ${orbitObj.radius.toFixed(2)}m`
let targetObj = targetModel.getCameraTarget()
hsOutput['data-target'] = `${targetObj.x.toFixed(5)}m ${targetObj.y.toFixed(5)}m ${targetObj.z.toFixed(5)}m`
//navigator.clipboard.writeText(JSON.stringify(hsOutput, null, 2));
metadata.annotations['New Hotspot'] = hsOutput
let newText = currentText.replace(/(.*?<pre>)[\S\s]*?(<\/pre>.*)/,`$1\n${JSON.stringify(metadata, null, 2)}\n$2`)
$('#wpTextbox1').val(newText)
@@ -162,3 +159,80 @@ slideshowAnnotations = function(mView, slideDuration = 5000) {
slideShowInterval = setInterval(nextAnnotation, slideDuration, mView)
}
}
/**
* Prepare to drag a hotspot
*
* @param {MouseEvent} event
*/
grabAnnotation = function(e) {
if (!grabHotspotStart) {
grabHotspotStart = {x: e.x, y: e.y}
const contEl = $('.glmv-container')[0]
contEl.addEventListener('mousemove', moveAnnotation)
}
}
/**
* Drag currently clicked hotspot
*
* @param {MouseEvent} event
*/
moveAnnotation = function(e) {
e.target.style['transform'] = `translate(${e.x - grabHotspotStart.x}px, ${e.y - grabHotspotStart.y}px) scale(1.1,1.1)`
}
/**
* End dragging a hotspot and update information
*
* @param {MouseEvent} event
*/
releaseAnnotation = function(e) {
if (grabHotspotStart) {
e.target.style['transform']=''
grabHotspotStart = null
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
})
let orbitObj = mvEl.getCameraOrbit()
const newOrb = `${orbitObj.theta.toFixed(2)}rad ${orbitObj.phi.toFixed(2)}rad ${orbitObj.radius.toFixed(2)}m`
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(/(.*?<pre>)[\S\s]*?(<\/pre>.*)/,`$1\n${JSON.stringify(metadata, null, 2)}\n$2`)
$('#wpTextbox1').val(newText)
}
}
/**
* Convert text in the preview text editor to js object
*
* @param {string} editText
*
* @return object containing metadata information
*/
extractMetadata = function(editText) {
let extractMetadata = editText.match(/<pre>([\S\s]*?)<\/pre>/)
let metadata = (extractMetadata.length >= 2) ? JSON.parse(extractMetadata[1]) : {viewerConfig: {}, annotations: {}, annotationSets: {}}
if (metadata.annotations === undefined) {
metadata.annotations = {}
}
return metadata
}