add rotate buttons

This commit is contained in:
Stewart Allen 2020-06-15 09:47:12 -04:00
commit 10f92b83ea
3 changed files with 38 additions and 4 deletions

View file

@ -1915,6 +1915,14 @@
$('mode-cam').onclick = () => { API.mode.set('CAM') }; $('mode-cam').onclick = () => { API.mode.set('CAM') };
$('mode-laser').onclick = () => { API.mode.set('LASER') }; $('mode-laser').onclick = () => { API.mode.set('LASER') };
$('unrotate').onclick = () => { API.widgets.for(w => w.unrotate()) }; $('unrotate').onclick = () => { API.widgets.for(w => w.unrotate()) };
// rotation buttons
let d = (Math.PI / 180) * 5;
$('rot_x_lt').onclick = () => { API.selection.rotate(-d,0,0) };
$('rot_x_gt').onclick = () => { API.selection.rotate( d,0,0) };
$('rot_y_lt').onclick = () => { API.selection.rotate(0,-d,0) };
$('rot_y_gt').onclick = () => { API.selection.rotate(0, d,0) };
$('rot_z_lt').onclick = () => { API.selection.rotate(0,0,-d) };
$('rot_z_gt').onclick = () => { API.selection.rotate(0,0, d) };
// add app name hover info // add app name hover info
$('app-info').innerText = KIRI.version; $('app-info').innerText = KIRI.version;

View file

@ -435,6 +435,21 @@ and (orientation : landscape) {
#pop-rotate .value, #pop-scale .value { #pop-rotate .value, #pop-scale .value {
width: 90%; width: 90%;
} }
#pop-rotate label {
padding: 3px;
}
#pop-rotate svg {
padding: 3px;
font-size: 20px;
border-radius: 3px;
border: 1px solid rgba(0,0,0,0);
}
#pop-rotate svg:hover {
color: #345;
font-size: 20px;
background-color: rgba(255,255,255,0.5);
border: 1px solid #aaa;
}
#lock_x, #lock_y, #lock_z { #lock_x, #lock_y, #lock_z {
position: absolute; position: absolute;
left: 2px; left: 2px;

View file

@ -138,16 +138,27 @@
<label>rotate</label> <label>rotate</label>
<div id="pop-rotate" class="pop-lcol row fillh russo"> <div id="pop-rotate" class="pop-lcol row fillh russo">
<div> <div>
<label class="grow">X</label> <div class="grow a-center">
<div>&lt; &gt;</div> <i id="rot_x_lt" class="fas fa-chevron-left"></i>
<label>X</label>
<i id="rot_x_gt" class="fas fa-chevron-right"></i>
</div>
<input id="rot_x" class="value center" size="5"/ value="0"> <input id="rot_x" class="value center" size="5"/ value="0">
</div> </div>
<div> <div>
<label class="grow">Y</label> <div class="grow a-center">
<i id="rot_y_lt" class="fas fa-chevron-left"></i>
<label>Y</label>
<i id="rot_y_gt" class="fas fa-chevron-right"></i>
</div>
<input id="rot_y" class="value center" size="5"/ value="0"> <input id="rot_y" class="value center" size="5"/ value="0">
</div> </div>
<div> <div>
<label class="grow">Z</label> <div class="grow a-center">
<i id="rot_z_lt" class="fas fa-chevron-left"></i>
<label>Z</label>
<i id="rot_z_gt" class="fas fa-chevron-right"></i>
</div>
<input id="rot_z" class="value center" size="5"/ value="0"> <input id="rot_z" class="value center" size="5"/ value="0">
</div> </div>
<div id="unrotate" class="col j-center">reset</div> <div id="unrotate" class="col j-center">reset</div>