Add hotspot functionality

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

includes/GlModelViewer.php

@@ -34,10 +34,32 @@ class GlModelViewer extends ImageHandler {
     } else {
       $viewClass = 'default';
     }
-    $modelView = $metadata['viewerConfig'][$viewClass];
-    $modelView = array_merge(['src' => $file->getFullUrl()], $modelView);
-    $modelView['style'] = 'width: 800px; height: 600px;';
-    $result = Html::element('model-viewer', $modelView);
+    if (isset($metadata['annotations'])) {
+      $hotspots = [];
+      foreach($metadata['annotations'] as $idx => $an) {
+        $elAnnot = Html::rawElement('div',['class' => 'HotspotAnnotation HiddenAnnotation'],$an['label']);
+        $hsDefault = array(
+          'class' => 'Hotspot',
+          'slot' => 'hotspot-'.($idx +1),
+          'onmousedown' => 'event.stopPropagation()',
+          'ontouchstart' => 'event.stopPropagation()',
+          'onclick' => 'onAnnotation(event)'
+        );
+        $attrHotspot = array_merge($hsDefault, $an);
+        $elHotspot = Html::rawElement('button',$attrHotspot,$elAnnot.($idx +1));
+        array_push($hotspots, $elHotspot);
+      }
+    }
+    $attrModelView = $metadata['viewerConfig'][$viewClass];
+    $attrModelView = array_merge(['src' => $file->getFullUrl(), 'class' => 'mv-model'], $attrModelView);
+    $attrModelView['style'] = 'width: 100%; height: 100%; min-height: 400px;';
+    $elModel = Html::rawElement('model-viewer', $attrModelView, implode($hotspots));
+    $attrContainer = array(
+      'style' => "width: 800px; height: 600px;",
+      'onmousedown' => 'clearAnnotations()',
+      'ontouchstart' => 'clearAnnotations()'
+    );
+    $result = Html::rawElement('div', $attrContainer, $elModel);
     echo '<script>';
     #GlModelViewer::console_log($handlerParams);
     #GlModelViewer::console_log($frameParams['class']);

modules/glmv.css

@@ -1,3 +1,58 @@
-.glmv-viewer {
-    width: 100%;
-}
+.Hotspot{
+    background: #00000080;
+    border-radius: 100%;
+    border: #FFFFFF 1px solid;
+    box-shadow: rgba(0, 0, 0, 0.25) 0 2px 4px;
+    box-sizing: border-box;
+    color: #FFFFFF;
+    cursor: pointer;
+    height: 24px;
+    position: relative;
+    text-align: center;
+    transition: opacity 0.3s;
+    width: 24px;
+  }
+  
+  .HotspotAnnotation{
+    background: rgb(255, 255, 255);
+    border-radius: 4px;
+    box-shadow: rgba(0, 0, 0, 0.25) 0 2px 4px;
+    color: rgba(0, 0, 0, 0.8);
+    display: block;
+    font-family: Futura, "Helvetica Neue", sans-serif;
+    left: calc(100% + 1em);
+    max-width: 128px;
+    opacity: 1;
+    overflow-wrap: break-word;
+    padding: 0.5em 1em;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    transition: height 0.3s;
+    width: max-content;
+  }
+  
+  .HiddenAnnotation{
+      height: 0;
+      opacity: 0;
+  }
+  
+  .material-symbols-outlined.button-show-model{
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate3d(-50%, -50%, 0);
+      background: #00000080;
+      font-size: 50px;
+      color: white;
+      width: 50px;
+      height: 50px;
+      cursor: pointer;
+      transition: opacity 0.3s, display 0s;
+  }
+  
+  .button-show-model.button-used{
+      opacity: 0;
+      display: none;
+  }

modules/glmv.js

@@ -3,10 +3,11 @@ modelLoad.setAttribute('type','module')
 modelLoad.setAttribute('src','https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js')
 let headElem = document.getElementsByTagName('head')[0]
 headElem.appendChild(modelLoad)
+
+/*
 let urlProm, dataProm
 let isFilePageImage = false
 
-/*
 let glbElems = document.querySelectorAll('.mw-body-content [href$=".glb"][title$=".glb"')
 if (glbElems.length > 0) {
     [...glbElems].forEach((ge, idx) => {
@@ -68,3 +69,44 @@ async function getModelMeta(getTitle) {
     return JSON.parse($(metaApiResp.parse.text['*']).find('pre').text() || '{}')
 }
 */
+
+if (mw.config.values.wgAction == 'submit') {
+	[...document.getElementsByTagName('model-viewer')].forEach( mv => {
+		mv.disableTap = true;
+	});
+	console.log('Starting point locator...');
+	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 = ['|hotspot=NewHotspot'];
+			hsOutput.push('pos=' + hsPosition.position.toString().replaceAll(/(\d{5})(\d*?m)/g,"$1m"));
+			hsOutput.push('norm=' + hsPosition.normal.toString().replaceAll(/(\d{5})(\d*?m)/g,"$1m"));
+			hsOutput.push('orb=' + targetModel.getCameraOrbit());
+			hsOutput.push('targ=' + targetModel.getCameraTarget());
+			navigator.clipboard.writeText(hsOutput.join('|'));
+		}
+	});
+}
+onAnnotation = function(e) {
+	e.stopPropagation();
+	var targetAnnotation = e.target.slot.split('-')[1];
+	var targetModel = e.target.closest('model-viewer');
+	[...targetModel.querySelectorAll('.HotspotAnnotation')].forEach( (an, idx) => {
+		if (idx + 1 == targetAnnotation && an.classList.contains('HiddenAnnotation')) {
+			an.classList.remove('HiddenAnnotation');
+			if (an.parentElement.dataset.target) {targetModel.cameraTarget = an.parentElement.dataset.target}
+			if (an.parentElement.dataset.orbit) {targetModel.cameraOrbit = an.parentElement.dataset.orbit}
+		} else {
+			an.classList.add('HiddenAnnotation');
+		}
+	});
+};
+clearAnnotations = function() {
+	[...document.getElementsByClassName('HotspotAnnotation')].forEach( an => {
+		an.classList.add('HiddenAnnotation');
+	});
+};