Add click and drag to hotspots during edit

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

includes/GlModelHooks.php

@@ -89,7 +89,7 @@ class GlModelHooks {
     $out->addModules('ext.glmv');
 
     $mvTransform = $file->transform([ 'width' => '800', 'hight' => '600']);
-    $previewViewer = $mvTransform->toHtml();
+    $previewViewer = $mvTransform->toHtml([ 'preview' => true]);
     
     $addButtonAttr = array(
       'class' => 'AddHotspot',

includes/GlModelTransformOutput.php

@@ -49,6 +49,9 @@ class GlModelTransformOutput extends MediaTransformOutput {
         if (isset($options['img-class'])) {
             $this->parameters['class'] = $options['img-class'];
         }
+        if (isset($options['preview']) && $options['preview']) {
+            $this->parameters['preview'] = $options['preview'];
+        }
         return self::buildViewer($this->file->getDescriptionText(),$this->url,$this->parameters);
 	}
 
@@ -89,10 +92,13 @@ class GlModelTransformOutput extends MediaTransformOutput {
         $hsDefault = array(
           'class' => 'Hotspot',
           'slot' => 'hotspot-'.(count($hotspots) +1),
-          'onmousedown' => 'event.stopPropagation()',
           'ontouchstart' => 'event.stopPropagation()',
           'onclick' => 'onAnnotation(event)'
         );
+        if (isset($viewParams['preview'])) {
+            $hsDefault['onmousedown'] = 'grabAnnotation(event)';
+            $hsDefault['onmouseup'] = 'releaseAnnotation(event)';
+        }
         $attrHotspot = array_merge($hsDefault, $an);
         $elHotspot = Html::rawElement('button',$attrHotspot,$elAnnot.(count($hotspots) +1));
         array_push($hotspots, $elHotspot);

modules/glmv.js

@@ -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(currentText)
-        let metadata = (extractMetadata.length >= 2) ? JSON.parse(extractMetadata[1]) : {viewerConfig: {}, annotations: {}, annotationSets: {}}
-        if (metadata.annotations === undefined) {
-            metadata.annotations = {}
-        }
         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
+}