Add delete hotspot button to editor

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

includes/GlModelHooks.php

@@ -85,9 +85,15 @@ class GlModelHooks {
             'onclick' => 'readMetadata()'
         );
 
+        $delButtonAttr = array(
+            'class' => 'preview-button DeleteHotspots',
+            'onclick' => 'readyDelHotspot()'
+        );
+
         $addHsButton = array(
             Html::rawElement('button',$addButtonAttr,'Add a new hotspot'),
-            Html::rawElement('button',$readButtonAttr,'Update hotspots')
+            Html::rawElement('button',$readButtonAttr,'Update hotspots'),
+            Html::rawElement('button',$delButtonAttr,'Delete hotspot')
         );
 
         $previewHTML = Html::rawElement('div',NULL,$previewViewer.implode($addHsButton));

modules/glmv.css

@@ -2,6 +2,10 @@
     cursor: crosshair !important;
 }
 
+.DeletingHotspot {
+    cursor: not-allowed !important;
+}
+
 .Hotspot{
     background: #00000080;
     border-radius: 100%;
@@ -143,6 +147,10 @@
     transform: scaleX(-1);
 }
 
+.preview-button {
+    margin: 2px;
+}
+
 @media (pointer: coarse)  {
     .Hotspot {
         width: 60px;

modules/glmv.js

@@ -1,5 +1,6 @@
 let slideShowInterval = null
 let grabHotspot = null
+let deleteHotspot = null
 
 /**
  * Disables hiding of various child items 
@@ -97,11 +98,7 @@ extractMetadata = function() {
  * allow for click registering of a new hotspot
  */
 readyAddHotspot = function() {
-    const previewMv = $('model-viewer')
+    disableViewer('AddingHotspot', clickAddHotspot)
-    previewMv.one('click', clickAddHotspot)
-    previewMv.addClass('AddingHotspot')
-    previewMv[0].disableTap = true
-    previewMv[0].toggleAttribute('camera-controls')
 }
 
 /**
@@ -113,12 +110,8 @@ readyAddHotspot = function() {
  * @param {PointerEvent} e 
  */
 clickAddHotspot = function(e) {
-    const previewMv = $('model-viewer')
-    previewMv.removeClass('AddingHotspot')
     let hsPosition = null
-    let targetModel = previewMv[0]
+    let targetModel = enableViewer()
-    targetModel.disableTap = false
-    targetModel.toggleAttribute('camera-controls')
     if (targetModel) {
         hsPosition = targetModel.positionAndNormalFromPoint(e.clientX, e.clientY)
     }
@@ -139,6 +132,24 @@ clickAddHotspot = function(e) {
     readMetadata()
 }
 
+/**
+ * Set flag and attributes on model-viewer to
+ * delete the next hotspot that is clicked
+ */
+readyDelHotspot = function() {
+    deleteHotspot = true
+    disableViewer('DeletingHotspot', cancelDeleteHotspot)
+}
+
+/**
+ * Unset deleting flag and return normal
+ * function and style to model viewer
+ */
+cancelDeleteHotspot = function() {
+    deleteHotspot = null
+    enableViewer()
+}
+
 /**
  * Event listener callback to toggle the visibility
  * of a hotspot's annotation when the hotspot is 
@@ -148,6 +159,14 @@ clickAddHotspot = function(e) {
  */
 onAnnotation = function(e) {
 	e.stopPropagation()
+    if (deleteHotspot) {
+        deleteHotspot = null
+        enableViewer()
+        e.target.remove()
+        writeMetadata()
+        readMetadata()
+        return     
+    }
 	let targetAnnotation = Number.parseInt(e.target.slot.split('-')[1])
 	let targetModel = e.target.closest('model-viewer')
     selectAnnotation(targetModel, targetAnnotation)
@@ -340,4 +359,37 @@ releaseAnnotation = function(e) {
         $('#wpTextbox1').val(newText)
     }
     grabHotspot = null
+}
+
+/**
+ * Disable general interaction with model
+ * viewer for specific additional function
+ * 
+ * @param {string} fnClass class to add to model-viewer
+ * @param {callback} viewCall callback function to add to model-viewer
+ * @return {Element} model-viewer element
+ */
+disableViewer = function(fnClass, viewCall) {
+    const previewMv = $('model-viewer')
+    if (viewCall) previewMv.one('click', viewCall)
+    if (fnClass) previewMv.addClass(fnClass)
+    previewMv[0].disableTap = true
+    previewMv[0].toggleAttribute('camera-controls', false)
+    return previewMv[0]
+}
+
+/**
+ * Enable general interaction with model
+ * viewer
+ * 
+ * @return {Element} model-viewer element
+ */
+enableViewer = function() {
+    const previewMv = $('model-viewer')
+    previewMv.off('click', clickAddHotspot)
+    previewMv.off('click', cancelDeleteHotspot)
+    previewMv.removeClass('AddingHotspot DeletingHotspot')
+    previewMv[0].disableTap = false
+    previewMv[0].toggleAttribute('camera-controls', true)
+    return previewMv[0]
 }