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

Add reset view position button to model menu

Browse Source 
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
Justin Georgi
2025-05-03 10:02:43 -07:00
parent 383818b6f8
commit 7e353bee24
4 changed files with 23 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
includes/GlModelTransformOutput.php
View File

@@ -267,12 +267,21 @@ class GlModelTransformOutput extends MediaTransformOutput {
'ontouchstart' => 'event.stopPropagation()' '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( $menuButtons = array(
Html::rawElement('div', $attrMenuButtonPrev, '<img class="awaiting-model" src="' . $gotoUrl . '"></image>'), 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', $attrMenuButtonSlides, '<img class="awaiting-model" src="' . $slideUrl . '"></image>'),
Html::rawElement('div', $attrMenuButtonNext, '<img class="awaiting-model" src="' . $gotoUrl . '"></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', $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)); return Html::rawElement('div', $attrMenu, $menuImg . implode($menuButtons));

2
modules/glmv.css
View File

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

11
modules/glmv.js
View File

@@ -158,4 +158,15 @@ toggleFullScreen = function(glCont) {
} else { } else {
glCont.requestFullscreen() 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
} }

1
resources/reset.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 447 B