cleaner focusing

Author: jasonford

src/BreadCrumbs.js

@@ -5,9 +5,9 @@ import ReactFireMixin from 'reactfire';
 let BreadCrumbs = React.createClass({
   render() {
     let crumbs = [<BreadCrumb key='/' path='/' root={true} focus={this.props.focus}/>];
-    let pathParts = this.props.path.replace(/^\/|\/$/, '').split('/');
+    let pathParts = this.props.path.replace(/^\/+|\/+$/, '').split('/');
     for (let i=0; i<pathParts.length-1; i+=2) {
-      let currentPath = pathParts.slice(0, i+2).join('/');
+      let currentPath = '/'+pathParts.slice(0, i+2).join('/');
       crumbs.push(<BreadCrumb key={currentPath} path={currentPath} focus={this.props.focus}/>);
     }
     return <div>{crumbs}</div>;
@@ -24,7 +24,7 @@ let BreadCrumb = React.createClass({
   componentDidMount: function () {
     let self = this;
     self.refs.root.addEventListener('tap', (event)=>{
-      self.props.focus(self.props.path);
+      self.props.focus('/' + self.props.path);
     });
   },
   render() {

src/TreeChart.js

@@ -12,7 +12,7 @@ let TreeChart = React.createClass({
   componentWillMount() {
     this.setState({
       path : this.props.path,
-      focus : false,
+      focus : this.props.path,
       element : { // start with empty element designed to show loading
         elements : {}
       }
@@ -61,20 +61,14 @@ let TreeChart = React.createClass({
         self.addElement(0);
       }
     });
-    this.refs.children.addEventListener('tap', function (event) {
-      event.stopPropagation();
-      if (event.dataPath) {
-        self.setState({focus : event.dataPath});
-      }
-    });
     //  stop propagation between layers
     this.refs.root.addEventListener('dropped', function (event) {
       event.stopPropagation();
     });
   },
   addElement(index) {
     this.firebaseRefs.element.child('elements').push({
-      title : "",
+      title : "New Element",
       index : index,
       importance : 1,
       elements : []
@@ -114,7 +108,10 @@ let TreeChart = React.createClass({
     firebase.database().ref(this.props.path + '/elements/' + key).remove();
   },
   focus(path) {
-    this.setState({focus : path});
+    if (path) {
+      this.setState({focus : path});
+    }
+    return this.state.focus;
   },
   render() {
     let self = this;
@@ -132,7 +129,7 @@ let TreeChart = React.createClass({
 
     let childElements = [];
 
-    let focusedChild = self.state.focus;
+    let focusedChild = self.props.focus ? self.props.focus() : self.focus();
 
     rows.forEach((row, index)=>{
       childElements.push(
@@ -145,11 +142,10 @@ let TreeChart = React.createClass({
           self.removeChild(column.key);
         }
         let path = self.props.path + '/elements/' + column.key;
-        let visible = focusedChild === false
-                   || focusedChild === path
-                   || focusedChild === self.props.path; //  focusing on self
+        let visible = focusedChild === self.props.path || focusedChild.indexOf(path) === 0; //  this one parent of focused child
+
         let height = row.height;
-        if (focusedChild === path) {
+        if (focusedChild && focusedChild.indexOf(path) === 0) {
           height = '100%';
         }
 
@@ -159,7 +155,8 @@ let TreeChart = React.createClass({
             key={column.key}
             visible={visible}
             height={height}
-            focused={focusedChild === path}
+            focus={self.props.focus || self.focus} // pass back focus
+            focused={focusedChild && focusedChild.indexOf(path) === 0}
             move={self.moveChild}
             remove={remove}/>);
       });

src/TreeChartChild.js

@@ -35,7 +35,8 @@ let TreeChartChild = React.createClass({
       self.refs.root.style.transform = 'translate(' + event.tx + 'px,'+ event.ty + 'px)'
     });
     this.refs.root.addEventListener("tap", (event)=>{
-      event.dataPath = self.props.path;
+      event.stopPropagation();
+      self.props.focus(self.props.path);
     });
     this.refs.root.addEventListener("drop", (event)=>{
       event.stopPropagation();
@@ -79,7 +80,7 @@ let TreeChartChild = React.createClass({
     let content;
 
     if (this.props.focused) {
-      content = <TreeChart path={this.props.path} isChild={true}/>
+      content = <TreeChart path={this.props.path} isChild={true} focus={this.props.focus}/>
     }
 
     return <div ref="root" className="TreeChartChild" style={style}>