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

Switch add hotspot to button function

Browse Source 
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
Justin Georgi
2024-10-23 20:58:09 -07:00
parent 4a9dab878f
commit a80e422874
3 changed files with 50 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
includes/GlModelViewer.php
View File

@@ -48,7 +48,13 @@ class GlModelViewer extends ImageHandler {
} }
$out = $editor->getContext()->getOutput(); $out = $editor->getContext()->getOutput();
$out->addModules('ext.glmv'); $out->addModules('ext.glmv');
$previewHTML = self::buildViewer($content->getText(), $file->getFullUrl(), ['class' => 'view-default']); $previewViewer = self::buildViewer($content->getText(), $file->getFullUrl(), ['class' => 'view-default']);
$addButtonAttr = array(
'class' => 'AddHotspot',
'onclick' => 'readyAddHotspot()'
);
$addHsButton = Html::rawElement('button',$addButtonAttr,'Add a new hotspot');
$previewHTML = Html::rawElement('div',NULL,$previewViewer.$addHsButton);
return false; return false;
} }

4
modules/glmv.css
View File

@@ -1,3 +1,7 @@
.AddingHotspot {
cursor: crosshair !important;
}
.Hotspot{ .Hotspot{
background: #00000080; background: #00000080;
border-radius: 100%; border-radius: 100%;

63
modules/glmv.js
View File

@@ -4,33 +4,47 @@ modelLoad.setAttribute('src','https://ajax.googleapis.com/ajax/libs/model-viewer
let headElem = document.getElementsByTagName('head')[0] let headElem = document.getElementsByTagName('head')[0]
headElem.appendChild(modelLoad) headElem.appendChild(modelLoad)
if (mw.config.values.wgAction == 'submit') { readyAddHotspot = function() {
[...document.getElementsByTagName('model-viewer')].forEach( mv => { const previewMv = $('model-viewer')
mv.disableTap = true; previewMv.one('click', clickAddHotspot)
}); previewMv.addClass('AddingHotspot')
console.log('Starting point locator...'); previewMv[0].disableTap = true
document.addEventListener('click', e => {
var hsPosition = null;
var targetModel = e.target.closest('model-viewer');
if (targetModel) {
hsPosition = targetModel.positionAndNormalFromPoint(e.clientX, e.clientY);
}
if (hsPosition) {
var 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 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`;
navigator.clipboard.writeText(JSON.stringify(hsOutput, null, 2));
}
});
} }
clickAddHotspot = function(e) {
const previewMv = $('model-viewer')
previewMv.removeClass('AddingHotspot')
let hsPosition = null;
let targetModel = previewMv[0]
targetModel.disableTap = false
if (targetModel) {
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: {}};
if (metadata.annotations === undefined) {
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 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`;
//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);
}
};
onAnnotation = function(e) { onAnnotation = function(e) {
e.stopPropagation(); e.stopPropagation();
var targetAnnotation = e.target.slot.split('-')[1]; let targetAnnotation = e.target.slot.split('-')[1];
var targetModel = e.target.closest('model-viewer'); let targetModel = e.target.closest('model-viewer');
[...targetModel.querySelectorAll('.HotspotAnnotation')].forEach( (an, idx) => { [...targetModel.querySelectorAll('.HotspotAnnotation')].forEach( (an, idx) => {
if (idx + 1 == targetAnnotation && an.classList.contains('HiddenAnnotation')) { if (idx + 1 == targetAnnotation && an.classList.contains('HiddenAnnotation')) {
an.classList.remove('HiddenAnnotation'); an.classList.remove('HiddenAnnotation');
@@ -41,6 +55,7 @@ onAnnotation = function(e) {
} }
}); });
}; };
clearAnnotations = function() { clearAnnotations = function() {
[...document.getElementsByClassName('HotspotAnnotation')].forEach( an => { [...document.getElementsByClassName('HotspotAnnotation')].forEach( an => {
an.classList.add('HiddenAnnotation'); an.classList.add('HiddenAnnotation');