Add reset view position button to model menu

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

includes/GlModelTransformOutput.php

@@ -267,12 +267,21 @@ class GlModelTransformOutput extends MediaTransformOutput {
             'ontouchstart' => 'event.stopPropagation()'
         );
 
+        $resetUrl = $mainConfig->get( 'ExtensionAssetsPath' ) . '/GlModelViewer/resources/reset.svg';
+        $attrMenuButtonReset = array (
+            'class' => 'glmv-menu-button',
+            'onclick' => 'resetView(event.target.closest(".glmv-container").querySelector("model-viewer"))',
+            'onmousedown' => 'event.stopPropagation()',
+            'ontouchstart' => 'event.stopPropagation()'
+        );
+
         $menuButtons = array(
             Html::rawElement('div', $attrMenuButtonPrev, '<img class="awaiting-model" src="' . $gotoUrl . '"></image>'),
             Html::rawElement('div', $attrMenuButtonSlides, '<img class="awaiting-model" src="' . $slideUrl . '"></image>'),
             Html::rawElement('div', $attrMenuButtonNext, '<img class="awaiting-model" src="' . $gotoUrl . '"></image>'),
             Html::rawElement('div', $attrMenuButtonHide, '<img class="awaiting-model" src="' . $hideUrl . '"></image>'),
-            Html::rawElement('div', $attrMenuButtonScreen, '<img class="awaiting-model full-hide" src="' . $screenUpUrl . '"></image><img class="awaiting-model full-show" src="' . $screenDownUrl . '"></image>')
+            Html::rawElement('div', $attrMenuButtonScreen, '<img class="awaiting-model full-hide" src="' . $screenUpUrl . '"></image><img class="awaiting-model full-show" src="' . $screenDownUrl . '"></image>'),
+            Html::rawElement('div', $attrMenuButtonReset, '<img class="awaiting-model" src="' . $resetUrl . '"></image>')
         );
 
         return Html::rawElement('div', $attrMenu, $menuImg . implode($menuButtons));

modules/glmv.css

@@ -117,7 +117,7 @@
     justify-content: flex-start;
 
     &:hover {
-        width: 196px;
+        width: 232px;
 
         & .glmv-menu-image {
             transform: rotate(180deg);

modules/glmv.js

@@ -158,4 +158,15 @@ toggleFullScreen = function(glCont) {
     } else {
         glCont.requestFullscreen()
     }
+}
+
+/**
+ * Reset view to initial position
+ * 
+ * @param {ModelViewer} mView
+ */
+resetView = function(mView) {
+    mView.cameraOrbit = mView.cameraOrbit
+    mView.cameraTarget = mView.cameraTarget
+    mView.fieldOfView = mView.fieldOfView
 }

resources/reset.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M480-80q-143 0-253-90T88-400h82q28 106 114 173t196 67q86 0 160-42.5T756-320H640v-80h240v240h-80v-80q-57 76-141 118T480-80Zm0-280q-50 0-85-35t-35-85q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35ZM80-560v-240h80v80q57-76 141-118t179-42q143 0 253 90t139 230h-82q-28-106-114-173t-196-67q-86 0-160 42.5T204-640h116v80H80Z"/></svg>