add vertext deletion. move mode menu to top

src/main/mesh.js

@@ -220,10 +220,17 @@ function space_init(data) {
                     break;
                 case 'Backspace':
                 case 'Delete':
-                    for (let s of selection.list(true)) {
+                    let mode = api.mode.get();
-                        selection.remove(s);
+                    if (mode !== api.modes.object) {
-                        s.showBounds(false);
+                        for (let m of selection.models()) {
-                        s.remove();
+                            m.deleteSelections(mode);
+                        }
+                    } else {
+                        for (let s of selection.list(true)) {
+                            selection.remove(s);
+                            s.showBounds(false);
+                            s.remove();
+                        }
                     }
                     estop(evt);
                     break;
@@ -275,7 +282,7 @@ function space_init(data) {
                     // rotate selected face towawrd z "floor"
                     group.faceDown(int.face.normal);
                 } else {
-                    let modes = api.mode.modes;
+                    let { modes } = api;
                     switch(api.mode.get()) {
                         case modes.object:
                             selection.toggle(shiftKey ? model : model.group);

src/mesh/api.js

@@ -408,8 +408,6 @@ let mode = {
     vertex() {
         mode.set(modes.vertex);
     },
-
-    modes
 };
 
 // persisted preference map
@@ -498,6 +496,8 @@ let api = mesh.api = {
 
     mode,
 
+    modes,
+
     selection,
 
     group,

src/mesh/build.js

@@ -198,6 +198,7 @@ function ui_build() {
             h.div({ id: 'spinner', class: 'spin' })
         ]),
         // display and action areas
+        h.div({ id: 'modes' }),
         h.div({ id: 'actions' }),
         h.div({ id: 'grouplist'}),
         h.div({ id: 'selectlist'}),
@@ -205,7 +206,7 @@ function ui_build() {
         h.div({ id: 'download', class: "hide" })
     ]);
 
-    let { actions, grouplist, selectlist, logger } = bound;
+    let { modes, actions, grouplist, selectlist, logger } = bound;
 
     // create slid in/out logging window
     h.bind(logger, [ h.div({ id: 'logtext' }) ]);
@@ -213,6 +214,14 @@ function ui_build() {
     // a few shortcuts to api calls
     let { file, selection, mode, tool, prefs } = api;
 
+    // top/center mode selector
+    h.bind(modes, [
+        h.button({ _: 'object', id: "mode-object", onclick() { mode.object() } }),
+        h.button({ _: 'face', id: "mode-face", onclick() { mode.face() } }),
+        h.button({ _: 'line', id: "mode-line", onclick() { mode.line() } }),
+        h.button({ _: 'vertex', id: "mode-vertex", onclick() { mode.vertex() } }),
+    ]);
+
     // create hotkey/action menu (top/left)
     h.bind(actions, [
         h.div([
@@ -236,11 +245,6 @@ function ui_build() {
             h.button({ _: 'analyze', onclick: tool.analyze }),
             h.button({ _: 'repair', onclick: tool.repair }),
             h.button({ _: 'clean', onclick: tool.clean }),
-            h.div({ class: "vsep" }),
-            h.button({ _: 'object', id: "mode-object", onclick() { mode.object() } }),
-            h.button({ _: 'face', id: "mode-face", onclick() { mode.face() } }),
-            h.button({ _: 'line', id: "mode-line", onclick() { mode.line() } }),
-            h.button({ _: 'vertex', id: "mode-vertex", onclick() { mode.vertex() } }),
         ]),
     ]);
 

src/mesh/model.js

@@ -82,6 +82,14 @@ mesh.model = class MeshModel extends mesh.object {
             face: materials.face.clone()
         };
 
+        // information about selected faces, lines, and vertices
+        // vertex compound keys are sorted least index to greatest
+        this.sel = {
+            faces: [], // first index into vertices
+            lines: {}, // key = vertex-vertex, val = [ faces ]
+            verts: {}, // key = x-y-z, val = { faces:[], sphere }
+        };
+
         this.file = file || 'unnamed';
         this.load(mesh || vertices, indices, normals);
         // persist in db so it can be restored on page load
@@ -289,8 +297,52 @@ mesh.model = class MeshModel extends mesh.object {
         }
     }
 
-    updateSelectedFaces() {
+    clearSelections() {
-        let faces = this._faces = this._faces || [];
+        console.log('todo: clearSelections');
+    }
+
+    deleteSelections(mode) {
+        let { geometry } = this.mesh;
+        let { groups } = geometry;
+        let { array } = geometry.attributes.position;
+        let newtot = 0;
+        // filter to unselected groups
+        groups = groups.filter(g => g.materialIndex === 0);
+        for (let group of groups) {
+            let start = group.start * 3;
+            let count = group.count * 3;
+            newtot += group.count < Infinity ? count : array.length - start;
+        }
+        // nothing to do if new length is the same
+        if (newtot === array.length) {
+            return;
+        }
+        let newverts = new Float32Array(newtot);
+        let pos = 0;
+        // copy back unselected faces
+        for (let group of groups) {
+            let start = group.start * 3;
+            let count = group.count * 3;
+            if (count === Infinity) count = array.length - start;
+            let slice = array.slice(start, start + count);
+            newverts.set(slice, pos);
+            pos += count;
+        }
+        this.reload(newverts);
+        // clear face selections (since they've been deleted);
+        this.sel.faces = [];
+        this.updateSelections();
+
+        // let { modes } = mesh.api;
+        // switch (mode) {
+        //     case modes.face:
+        //         console.log('delete selected faces');
+        //         break;
+        // }
+    }
+
+    updateSelections() {
+        let faces = this.sel.faces;
         let groups = [];
         if (faces && faces.length) {
             faces = faces.sort((a,b) => a - b).slice();
@@ -320,27 +372,51 @@ mesh.model = class MeshModel extends mesh.object {
     }
 
     toggleSelectedFaces(toggle = []) {
-        let faces = this._faces = this._faces || [];
+        let faces = this.sel.faces;
         for (let t of toggle) {
             faces.remove(t) || faces.addOnce(t);
         }
-        this.updateSelectedFaces();
+    }
+
+    toggleSelectedVertices(vert) {
+        if (Array.isArray(vert)) {
+            for (let e of vert) {
+                this.toggleSelectedVertices(e);
+            }
+            return;
+        }
+        let sel = this.sel;
+        let key = [x,y,z].map(v => v.round(5)).join('-');
+        let rec = sel.verts[key];
+        if (rec) {
+            delete sel.verts[key];
+            space.scene.remove(rec.sphere);
+        } else {
+            let geometry = new THREE.SphereGeometry( 0.5, 16, 16 );
+            let material = new MeshPhongMaterial( { color: 0x777777, transparent: true, opacity: 0.25 } );
+            let sphere = new Mesh( geometry, material );
+            sphere.position.set(x, y, z);
+            space.scene.add(sphere);
+            sel.verts[key] = {
+                sphere,
+                faces,
+                verts
+            };
+        }
     }
 
     // find adjacent faces to clicked point/line on a face
     find(point, face) {
-        // let geometry = new THREE.SphereGeometry( 0.5, 16, 16 );
-        // let material = new MeshPhongMaterial( { color: 0x777777, transparent: true, opacity: 0.25 } );
-        // let sphere = new Mesh( geometry, material );
         let { x, y, z } = point;
         let { a, b, c } = face;
-        // sphere.position.set(x,y,z);
-        // space.scene.add(sphere);
         worker.model_select({
             id: this.id, x, y:-z, z:y, a, b, c, matrix: this.matrix
         }).then(data => {
-            let { faces, edges, verts } = data;
+            let { faces, edges, verts, point } = data;
+            console.log({data});
+            // this.toggleSelectedVertices(verts);
             this.toggleSelectedFaces(faces);
+            this.updateSelections();
         });
     }
 

src/mesh/work.js

@@ -114,6 +114,7 @@ let model = {
         let faces = [];
         let verts = [];
         let edges = [];
+        let point;
         for (let i=0, l=arr.length; i<l; ) {
             // matches here are within radius of a vertex
             // select all faces that share a matched vertex
@@ -141,7 +142,7 @@ let model = {
         if (faces.length === 0) {
             faces.push(Math.min(a,b,c) / 3);
         }
-        return { faces, edges, verts };
+        return { faces, edges, verts, point };
     }
 };
 

web/mesh/index.css

@@ -280,16 +280,34 @@ button:hover {
     border-bottom: 1px dashed gray;
 }
 
-/** actions menu top/left **/
+/** modes menu top/center **/
 
-#actions button.selected {
+#modes {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgba(0,0,0,0.5);
+    border-radius: 2px;
+    margin: 3px;
+    padding: 3px;
+    gap: 2px;
+}
+
+#modes button.selected {
     background-color: rgba(0,255,0,0.5);
 }
 
-#actions button.selected:hover {
+#modes button.selected:hover {
     background-color: rgba(0,255,0,1);
 }
 
+#mode-line, #mode-vertex {
+    display: none;
+}
+
 /** slide in/out logging window **/
 
 #logger {