model explorer

modules/ui/components/Section.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import ls from './Section.less';
+import Fa from './Fa';
+
+export const TabContext = React.createContext(0);
+
+export class Section extends React.PureComponent {
+
+  constructor({defaultClosed}) {
+    super();
+    this.state = {
+      closed: defaultClosed
+    }
+  }
+
+  render() {
+    let {label, closable, children} = this.props;
+    let closed = this.isClosed();
+    return <TabContext.Consumer>
+      {
+        tabs => <div className={ls.section} style={{paddingLeft: 10}}>
+          <TabContext.Provider value={tabs + 1}>
+            <div className={ls.header}>
+            <span className={ls.handle} onClick={closable ? this.tweakClose : undefined}>
+              <Fa fw icon={closable && children ? ('caret-' + (closed ? 'right' : 'down')) : null}/>
+            </span>
+              <span className={ls.label}>{label}</span>
+            </div>
+            {!closed && children}
+          </TabContext.Provider>
+        </div>
+      }
+    </TabContext.Consumer>;
+  }
+
+  isClosed() {
+    let {closable} = this.props;
+    if (!closable) return false;
+    return closable && this.state.closed;
+  }
+
+  tweakClose = () => {
+    this.setState({closed: !this.isClosed()});
+  }
+}
+
+

modules/ui/components/Section.less

@@ -0,0 +1,16 @@
+
+.section {
+}
+
+.header {
+  
+}
+
+.handle {
+  
+}
+
+.label {
+  
+}
+

web/app/cad/dom/components/ObjectExplorer.jsx

@@ -1,10 +1,28 @@
 import React from 'react';
+import connect from '../../../../../modules/ui/connect';
+import {Section} from '../../../../../modules/ui/components/Section';
+import {MShell} from '../../model/mshell';
 
-export default class ObjectExplorer extends React.Component {
+export default connect(streams => streams.craft.models.map(models => ({models})))
+(function ObjectExplorer({models}) {
 
-  render() {
-    return <div >
-      ObjectExplorer
-    </div>
-  }
-}
+  return models.map(m => <Section label={'shell ' + m.id}>
+    <Section label='faces'>
+      {
+        m.faces.map(f => <Section label={'face ' + f.id}>
+          <Section label='sketch'>
+            {f.sketchObjects.map(o => <div>{o.id + ':' + o.sketchPrimitive.constructor.name}</div>)}
+          </Section>
+        </Section>)
+      }
+    </Section>
+    <Section label='edges'>
+      {
+        m.faces.map(e => <Section label={'edge ' + e.id}>
+        </Section>)
+      }
+    </Section>
+
+  </Section>);
+
+});