s/attribute/component/

Author: ngokevin

src/components/Main.js

@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 
 const Events = require('../lib/Events.js');
 const Editor = require('../lib/editor');
-import AttributesSidebar from './attributes/AttributesSidebar';
+import ComponentsSidebar from './components/Sidebar';
 import {MenuWidget} from './menu/Menu';
 import ModalTextures from './modals/ModalTextures';
 import SceneGraph from './SceneGraph';
@@ -74,7 +74,7 @@ export default class Main extends React.Component {
             <div className='sidebar-title'>scenegraph</div>
             <SceneGraph scene={scene}/>
           </div>
-          <AttributesSidebar/>
+          <ComponentsSidebar/>
         </div>
         <a href='#' className='toggle-edit' onClick={this.toggleEditor}>
           {this.state.editorEnabled ? 'Exit' : 'Edit'}

src/components/attributes/AttributesPanel.js

@@ -1,11 +1,7 @@
 import React from 'react';
 import Collapsible from '../Collapsible';
-import Component from './Component';
-import CommonComponents from './CommonComponents';
 
-const DEFAULT_COMPONENTS = ['visible', 'position', 'scale', 'rotation'];
-
-class AddComponent extends React.Component {
+export default class AddComponent extends React.Component {
   static propTypes = {
     entity: React.PropTypes.object
   };
@@ -59,7 +55,7 @@ class AddComponent extends React.Component {
               <select ref='select'>
                 {this.renderComponentOptions()}
               </select>
-              <a href='#' className='button fa fa-plus-circle' onClick={this.addComponent}></a>
+              <a href='#' className='button fa fa-plus-circle' onClick={this.addComponent}/>
             </span>
           </div>
         </div>
@@ -68,28 +64,6 @@ class AddComponent extends React.Component {
   }
 }
 
-const Attributes = props => {
-  const entity = props.entity;
-  const components = entity ? entity.components : {};
-  const defaultComponents = Object.keys(components).filter(function (key) {
-    return DEFAULT_COMPONENTS.indexOf(key) === -1;
-  }).sort().map(function (key) {
-    return <Component entity={entity} key={key} name={key} component={components[key]}/>;
-  });
-
-  return (
-    <div className='attributes'>
-      <CommonComponents entity={entity}/>
-      <AddComponent entity={entity}/>
-      {defaultComponents}
-    </div>
-  );
-};
-Attributes.PropTypes = {
-  entity: React.PropTypes.object.isRequired
-};
-export default Attributes;
-
 /**
  * Check if component has multiplicity.
  */

src/components/attributes/AttributesSidebar.js

@@ -1,11 +1,10 @@
 import React from 'react';
-
-const Events = require('../../lib/Events.js');
 import {InputWidget} from '../widgets';
-import AttributeRow from './AttributeRow';
+import PropertyRow from './PropertyRow';
 import Collapsible from '../Collapsible';
-import MixinsComponent from './MixinsComponent';
+import Mixins from './Mixins';
 import {updateEntity} from '../../actions/entity';
+const Events = require('../../lib/Events.js');
 
 // @todo Take this out and use updateEntity?
 function changeId (entity, componentName, propertyName, value) {
@@ -15,6 +14,9 @@ function changeId (entity, componentName, propertyName, value) {
   }
 }
 
+/**
+ * Core component properties such as id, position, rotation, scale.
+ */
 const CommonComponents = props => {
   const entity = props.entity;
   const components = entity ? props.entity.components : {};
@@ -39,13 +41,13 @@ const CommonComponents = props => {
             const componentData = components[key];
             const schema = AFRAME.components[key].schema;
             return (
-              <AttributeRow onChange={updateEntity} key={key} name={key}
-                            schema={schema} data={componentData.data} componentname={key}
-                            entity={props.entity}/>
+              <PropertyRow onChange={updateEntity} key={key} name={key}
+                schema={schema} data={componentData.data} componentname={key}
+                entity={props.entity}/>
             );
           })
         }
-        <MixinsComponent entity={entity}/>
+        <Mixins entity={entity}/>
       </div>
     </Collapsible>
   );

src/components/attributes/Attributes.js renamed to src/components/components/AddComponent.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import AttributeRow from './AttributeRow';
+import PropertyRow from './PropertyRow';
 import Collapsible from '../Collapsible';
 
 function isSingleProperty (schema) {
@@ -10,6 +10,9 @@ function isSingleProperty (schema) {
   return 'default' in schema;
 }
 
+/**
+ * Single component.
+ */
 export default class Component extends React.Component {
   static propTypes = {
     component: React.PropTypes.any,
@@ -37,19 +40,19 @@ export default class Component extends React.Component {
       componentName = componentName.substr(0, componentName.indexOf('__'));
     }
 
-    let attributeRows;
+    let propertyRows;
     if (isSingleProperty(componentData.schema)) {
       var key = componentName.toLowerCase();
       var schema = AFRAME.components[key.toLowerCase()].schema;
-      attributeRows = (
-        <AttributeRow key={key} name={key} schema={schema}
+      propertyRows = (
+        <PropertyRow key={key} name={key} schema={schema}
           data={componentData.data} componentname={key}
           entity={this.props.entity}/>
       );
     } else {
-      attributeRows = Object.keys(componentData.schema).map(key => {
+      propertyRows = Object.keys(componentData.schema).map(key => {
         return (
-          <AttributeRow key={key} name={key} schema={componentData.schema[key]}
+          <PropertyRow key={key} name={key} schema={componentData.schema[key]}
             data={componentData.data[key]} componentname={this.props.name}
             entity={this.props.entity}/>
         );
@@ -68,7 +71,7 @@ export default class Component extends React.Component {
             </div>
           </div>
         </div>
-        <div className='collapsible-content'>{attributeRows}</div>
+        <div className='collapsible-content'>{propertyRows}</div>
       </Collapsible>
     );
   }

src/components/attributes/CommonComponents.js renamed to src/components/components/CommonComponents.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import AddComponent from './AddComponent';
+import Component from './Component';
+import CommonComponents from './CommonComponents';
+const Events = require('../../lib/Events');
+
+const DEFAULT_COMPONENTS = ['visible', 'position', 'scale', 'rotation'];
+
+export default class ComponentsContainer extends React.Component {
+  static propTypes = {
+    entity: React.PropTypes.object.isRequired
+  };
+
+  constructor (props) {
+    super(props);
+    this.state = {
+      entity: props.entity
+    };
+  }
+
+  componentDidMount () {
+    this.refresh();
+    Events.on('entitySelected', entity => {
+      this.setState({entity: entity});
+      if (entity !== null) {
+        entity.addEventListener('componentchanged', this.refresh);
+      }
+    });
+    document.addEventListener('componentremoved', event => {
+      if (this.state.entity === event.detail.target) {
+        this.refresh();
+      }
+    });
+  }
+
+  refresh = () => {
+    this.forceUpdate();
+  }
+
+  render () {
+    const entity = this.state.entity;
+    const components = entity ? entity.components : {};
+    const defaultComponents = Object.keys(components).filter(function (key) {
+      return DEFAULT_COMPONENTS.indexOf(key) === -1;
+    }).sort().map(function (key) {
+      return <Component entity={entity} key={key} name={key} component={components[key]}/>;
+    });
+
+    return (
+      <div className='components'>
+        <CommonComponents entity={entity}/>
+        <AddComponent entity={entity}/>
+        {defaultComponents}
+      </div>
+    );
+  }
+}

src/components/attributes/Component.js renamed to src/components/components/Component.js

@@ -9,7 +9,7 @@ function trim (s) {
   return s;
 }
 
-export default class MixinsComponent extends React.Component {
+export default class Mixin extends React.Component {
   static propTypes = {
     entity: React.PropTypes.object.isRequired
   };
@@ -29,7 +29,9 @@ export default class MixinsComponent extends React.Component {
 
   addMixin = () => {
     const entity = this.props.entity;
-    entity.setAttribute('mixin', trim(entity.getAttribute('mixin') + ' ' + this.refs.select.value));
+    entity.setAttribute(
+      'mixin', trim(entity.getAttribute('mixin') + ' ' + this.refs.select.value));
+
     // @todo Is there some aframe event that we could catch instead of explicitly emit the objectChanged event?
     Events.emit('objectChanged', entity);
   }

src/components/components/ComponentsContainer.js

@@ -9,23 +9,33 @@ import TextureWidget from '../widgets/TextureWidget';
 import Vec3Widget from '../widgets/Vec3Widget';
 import {updateEntity} from '../../actions/entity';
 
-export default class AttributeRow extends React.Component {
+export default class PropertyRow extends React.Component {
   static propTypes = {
     componentname: React.PropTypes.string.isRequired,
+    id: React.PropTypes.string,
     name: React.PropTypes.string.isRequired,
     schema: React.PropTypes.object.isRequired
   };
 
+  constructor (props) {
+    super(props);
+    this.id = props.componentname + ':' + props.id;
+  }
+
   getWidget () {
     const props = this.props;
     const isMap = props.componentname === 'material' && (props.name === 'envMap' ||
                                                          props.name === 'src');
     const type = props.schema.type;
+
     const widgetProps = {
       componentname: props.componentname,
       entity: props.entity,
       name: props.name,
-      onChange: updateEntity,
+      // Wrap updateEntity for tracking.
+      onChange: function () {
+        updateEntity.apply(this, arguments);
+      },
       value: props.data
     };
     const numberWidgetProps = {
@@ -65,10 +75,9 @@ export default class AttributeRow extends React.Component {
   render () {
     const props = this.props;
     const title = 'type: ' + props.schema.type + ' value: ' + JSON.stringify(props.data);
-    const id = props.componentname + '.' + props.name;
     return (
       <div className='row'>
-        <label htmlFor={id} className='text' title={title}>{props.name}</label>
+        <label htmlFor={this.id} className='text' title={title}>{props.name}</label>
         {this.getWidget(props.schema.type)}
       </div>
     );

src/components/attributes/MixinsComponent.js renamed to src/components/components/Mixins.js

@@ -0,0 +1,23 @@
+var React = require('react');
+
+import ComponentsContainer from './ComponentsContainer';
+
+export default class Sidebar extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {open: false};
+  }
+
+  handleToggle = () => {
+    this.setState({open: !this.state.open});
+  }
+
+  render () {
+    return (
+      <div id='sidebar'>
+        <div className='sidebar-title'>components</div>
+        <ComponentsContainer/>
+      </div>
+    );
+  }
+}