Refactor to MediaHandler transform (#20)

Closes #6, Closes #18

This PR separates out 3 different classes: a distinct Hooks handling class, a MediaHandler class for models, and a MediaTransform class that handles all the actual model rendering.

Reviewed-on: #20
This commit is contained in:
2024-10-27 04:11:16 +00:00
parent 39329f5497
commit 3b5c2e993d
6 changed files with 395 additions and 269 deletions

View File

@@ -20,32 +20,32 @@ readyAddHotspot = function() {
clickAddHotspot = function(e) {
const previewMv = $('model-viewer')
previewMv.removeClass('AddingHotspot')
let hsPosition = null;
let hsPosition = null
let targetModel = previewMv[0]
targetModel.disableTap = false
if (targetModel) {
hsPosition = targetModel.positionAndNormalFromPoint(e.clientX, e.clientY);
hsPosition = targetModel.positionAndNormalFromPoint(e.clientX, e.clientY)
}
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: {}};
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 = [];
metadata.annotations = {}
}
let hsOutput = {label: 'NewHotspot'};
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");
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")
let orbitObj = targetModel.getCameraOrbit()
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`;
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.push(hsOutput);
let newText = currentText.replace(/(.*?<pre>)[\S\s]*?(<\/pre>.*)/,`$1\n${JSON.stringify(metadata, null, 2)}\n$2`);
$('#wpTextbox1').val(newText);
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)
}
};
}
/**
* Event listener callback to toggle the visibility