improve ObjectExplorer to show adjacent faces for an edge

web/app/cad/craft/ui/ObjectExplorer.jsx

@@ -1,44 +1,63 @@
 import React from 'react';
 import connect from 'ui/connect';
 import {Section} from 'ui/components/Section';
-import Fa from '../../../../../modules/ui/components/Fa';
-import {constant} from '../../../../../modules/lstream';
+import Fa from 'ui/components/Fa';
+import {constant} from 'lstream';
 import ls from './ObjectExplorer.less';
 import cx from 'classnames';
 import {MShell} from '../../model/mshell';
 import {MDatum} from '../../model/mdatum';
+import mapContext from 'ui/mapContext';
+import decoratorChain from 'ui/decoratorChain';
 
 export default connect(streams => streams.craft.models.map(models => ({models})))
 (function ObjectExplorer({models}) {
 
-  return models.map(m => (m instanceof MShell) ? <ModelSection type='shell' model={m} defaultOpen={true}>
+  return models.map(m => (m instanceof MShell) ? <ModelSection type='shell' model={m} defaultOpen={true} key={m.id}>
     <Section label='faces' defaultOpen={true}>
       {
-        m.faces.map(f => <ModelSection type='face' model={f}>
-          <Section label={f.sketchObjects.length ? 'sketch' : <span className={ls.hint}>{'<no sketch assigned>'}</span>}>
-            {f.sketchObjects.map(o => <div>{o.id + ':' + o.sketchPrimitive.constructor.name}</div>)}
-          </Section>
-        </ModelSection>)
+        m.faces.map(f => <FaceSection face={f} key={f.id} />)
       }
     </Section>
     <Section label='edges' defaultOpen={true}>
-      {m.edges.map(e => <ModelSection type='edge' model={e} />)}
+      {m.edges.map(e => <EdgeSection edge={e} key={e.id} />)}
     </Section>
 
   </ModelSection> : (m instanceof MDatum) ? <ModelSection type='datum' model={m} defaultOpen={true}/> : null);
 
 });
 
-const ModelSection = connect((streams, props) => (streams.selection[props.type]||constant([])).map(selection => ({selection})))
+function EdgeSection({edge}) {
+  return <ModelSection type='edge' model={edge} key={edge.id}>
+    {edge.adjacentFaces.map(f => <FaceSection face={f} key={f.id}/>)}
+  </ModelSection>
+}
+
+function FaceSection({face}) {
+  return <ModelSection type='face' model={face} key={face.id}>
+    <Section label={face.sketchObjects.length ? 'sketch' : <span className={ls.hint}>{'<no sketch assigned>'}</span>}>
+      {face.sketchObjects.map(o => <div key={o.id}>{o.id + ':' + o.sketchPrimitive.constructor.name}</div>)}
+    </Section>
+    <Section label='edges' defaultOpen={false}>
+      {face.edges.map(e => <EdgeSection edge={e} key={e.id}/>)}
+    </Section>
+  </ModelSection>;
+}
+
+const ModelSection = decoratorChain(
+  mapContext((ctx, props) => ({
+    select: () => ctx.services.selection[props.type].select([props.model.id])
+  })),
+  connect((streams, props) => (streams.selection[props.type] || constant([])).map(selection => ({selection}))))
 (
-  function ModelSection({model, type, selection, ...props}) {
+  function ModelSection({model, type, selection, select, ...props}) {
     let labelClasses = cx(ls.modelLabel, {
       [ls.selected]: selection.indexOf(model.id) !== -1
     });
-    let label = <span className={labelClasses}><CommonControls /> 
-      {type} {model.id}
+    let label = <span className={labelClasses}><CommonControls/>
+      <span onClick={select}>{type} {model.id}</span>
     </span>;
-    return <Section label={label} {...props}/> 
+    return <Section label={label} {...props}/>;
   }
 );
 

web/app/cad/model/medge.js

@@ -11,4 +11,17 @@ export class MEdge extends MObject {
     this.brepEdge = brepEdge;
   }
 
+  get adjacentFaces() {
+    let out = [];
+    let face = this.shell.brepRegistry.get(this.brepEdge.halfEdge1 && this.brepEdge.halfEdge1.loop.face);
+    if (face) {
+      out.push(face);
+    }
+    face = this.shell.brepRegistry.get(this.brepEdge.halfEdge2 && this.brepEdge.halfEdge2.loop.face);
+    if (face) {
+      out.push(face);
+    }
+    return out;
+  }
+  
 }

web/app/cad/model/mface.js

@@ -75,6 +75,10 @@ export class MFace extends MObject {
     this.sketch = sketch;
     this.sketchObjects = [];
 
+    if (!sketch) {
+      return;
+    }
+    
     const addSketchObjects = sketchObjects => {
       let isConstruction = sketchObjects === sketch.constructionSegments;
       for (let sketchObject of sketchObjects) {
@@ -131,6 +135,17 @@ export class MBrepFace extends MFace {
     this.brepFace = brepFace;
   }
 
+  get edges() {
+    let out = [];
+    for (let he of this.brepFace.edges) {
+      let edge = this.shell.brepRegistry.get(he.edge);
+      if (edge) {
+        out.push(edge);
+      }
+    }
+    return out;
+  }
+  
   getBounds() {
     const bounds = [];
     for (let loop of this.brepFace.loops) {

web/app/cad/model/mshell.js

@@ -23,6 +23,7 @@ export class MBrepShell extends MShell {
     super();
     this.brepShell = shell;
     this.csys = csys || CSys.ORIGIN;
+    this.brepRegistry = new Map();
     
     let faceCounter = 0;
     let edgeCounter = 0;
@@ -31,16 +32,19 @@ export class MBrepShell extends MShell {
     for (let brepFace of this.brepShell.faces) {
       const mFace = new MBrepFace(brepFace.data.id || (this.id + '/F:' + faceCounter++), this, brepFace);
       this.faces.push(mFace);
+      this.brepRegistry.set(brepFace, mFace);
     }
 
     for (let brepEdge of this.brepShell.edges) {
       const mEdge = new MEdge(this.id + '/E:' + edgeCounter++, this, brepEdge);
       this.edges.push(mEdge);
+      this.brepRegistry.set(brepEdge, mEdge);
     }
 
     for (let brepVertex of this.brepShell.vertices) {
       const mVertex = new MVertex(this.id + '/V:' + vertexCounter++, this, brepVertex);
       this.vertices.push(mVertex);
+      this.brepRegistry.set(brepVertex, mVertex);
     }
   }
 }