implement basic visual lay flat operation

src/kiri/tools.js

@@ -1,5 +1,66 @@
-kiri.load(function(api) {
-    api.event.on('tool.mesh.lay-flat', () => {
-        // console.log('initiate lay-flat');
+kiri.load(function(API) {
+    let pgeo = new THREE.PlaneGeometry(10, 10);
+    let pmat = new THREE.MeshBasicMaterial({color: 0xff0000, opacity: 0.5, transparent: true});
+    let pmesh = new THREE.Mesh(pgeo, pmat);
+    let wgeo = new THREE.WireframeGeometry(pgeo);
+    let wmat = new THREE.LineBasicMaterial({ color: 0 });
+    let wmesh = new THREE.LineSegments(wgeo, wmat);
+    pmesh.add(wmesh);
+
+    let alert;
+    let lastobj;
+    let lastface;
+    let enabled = false;
+
+    function cleanup() {
+        if (lastobj) {
+            lastobj.remove(pmesh);
+            lastobj = undefined;
+        }
+    }
+
+    function endit() {
+        if (enabled) {
+            API.hide.alert(alert);
+            API.feature.hover = false;
+            enabled = false;
+            alert = undefined;
+            cleanup();
+        }
+    }
+
+    API.event.on('key.esc', endit);
+    API.event.on('tool.mesh.lay-flat', () => {
+        if (API.feature.hover) {
+            console.log('lay flat cannot pre-empt hover');
+            return;
+        }
+        API.feature.hover = true;
+        enabled = true;
+        alert = API.show.alert('[ESC] to end lay-flat operation', 600000);
+    });
+    API.event.on('mouse.hover', (ev) => {
+        cleanup();
+        let { int, ints, event, point, type } = ev;
+        if (type === 'widget') {
+            lastface = int.face;
+            let obj = lastobj = int.object;
+            let norm = int.face.normal;
+            obj.add(pmesh);
+            pmesh.position.x = point.x + norm.x * 0.1;
+            pmesh.position.y = -point.z + norm.y * 0.1;
+            pmesh.position.z = point.y + norm.z * 0.1;
+            let q = new THREE.Quaternion().setFromUnitVectors(
+                new THREE.Vector3(0,0,1),
+                new THREE.Vector3(norm.x,norm.y,norm.z)
+            );
+            pmesh.setRotationFromQuaternion(q);
+        }
+    });
+    API.event.on('mouse.hover.up', (ev) => {
+        let { int, point } = ev;
+        let q = new THREE.Quaternion().setFromUnitVectors(lastface.normal, new THREE.Vector3(0,0,-1));
+        API.selection.rotate(q);
+        endit();
     });
 });

web/kiri/index.html

@@ -120,7 +120,7 @@
                             <div><i id="rot_z_gt" class="fas fa-chevron-right"></i></div>
                             <input id="rot_z" class="value center" size="6" value="0">
                             <div class="buttons f-row">
-                                <button id="lay-flat" class="grow hide">lay flat</button>
+                                <button id="lay-flat" class="grow">lay flat</button>
                                 <button id="unrotate" class="grow" lk="reset">reset</button>
                             </div>
                         </div>