implement rotation reset via an unrotate stack

src/kiri/init.js

@@ -1897,7 +1897,7 @@
         $('mode-sla').onclick = () => { API.mode.set('SLA') };
         $('mode-cam').onclick = () => { API.mode.set('CAM') };
         $('mode-laser').onclick = () => { API.mode.set('LASER') };
-        // $('unrotate').onclick = () => { API.widgets.for(w => w.unrotate()) };
+        $('unrotate').onclick = () => { API.widgets.for(w => w.unrotate()) };
 
         // add app name hover info
         $('app-info').innerText = KIRI.version;

src/kiri/widget.js

@@ -112,7 +112,7 @@
         if (groups.indexOf(this.group) < 0) {
             groups.push(this.group);
         }
-        this.roto = new THREE.Matrix4();
+        this.roto = [];
         this.mesh = null;
         this.points = null;
         // todo resolve use of this vs. mesh.bounds
@@ -549,8 +549,8 @@
         } else {
             m4 = m4.makeRotationFromQuaternion(x);
         }
-        this.roto.multiply(m4);
-        this.mesh.geometry.applyMatrix4(new THREE.Matrix4().getInverse(m4));
+        this.roto.push(m4);
+        this.mesh.geometry.applyMatrix4(m4);
         if (!temp && euler) {
             let rot = this.track.rot;
             rot.x += (x || 0);
@@ -560,7 +560,11 @@
     };
 
     PRO.unrotate = function() {
-        this.mesh.geometry.applyMatrix4(this.roto);
+        this.roto.reverse().forEach(m => {
+            this.mesh.geometry.applyMatrix4(new THREE.Matrix4().getInverse(m));
+        });
+        this.roto = [];
+        this.center();
     };
 
     PRO.mirror = function() {

web/kiri/index.css

@@ -854,7 +854,7 @@ th, tr, td {
     padding: 5px;
     margin-right: 5px;
     border: 1px solid #ccc;
-    border-radius: 3px;
+    border-radius: 4px;
     background-color: white;
     white-space: nowrap;
     z-index: 10;

web/kiri/index.html

@@ -149,7 +149,7 @@
                         <label class="grow">Z</label>
                         <input id="rot_z" class="value center" size="5"/ value="0">
                     </div>
-                    <div id="unrotate" class="col j-center noshow">reset</div>
+                    <div id="unrotate" class="col j-center">reset</div>
                 </div>
             </div>
             <div id="lt-scale" class="lt-menu">