[WIP] Add a POC InstancePropertiesEditor

newIDE/src/App.js

@@ -4,7 +4,6 @@ import './App.css';
 
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import RaisedButton from 'material-ui/RaisedButton';
-import Drawer from 'material-ui/Drawer';
 import Panes from './UI/Panes';
 import injectTapEventPlugin from 'react-tap-event-plugin';
 
@@ -12,11 +11,10 @@ import EventsSheetContainer from './EventsSheet/EventsSheetContainer.js';
 import SceneEditor from './SceneEditor';
 import ProjectManager from './ProjectManager';
 import ExternalEditor from './ExternalEditor';
+import InstancePropertiesEditor from './InstancesEditor/InstancePropertiesEditor';
 
 import Window from './Utils/Window.js';
 
-import JSONTree from 'react-json-tree'
-
 const gd = global.gd;
 import game from './fixtures/game.json';
 

newIDE/src/InstancesEditor/InstancePropertiesEditor/index.js

@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import TextField from 'material-ui/TextField';
+import JSONTree from 'react-json-tree';
+import Checkbox from 'material-ui/Checkbox';
+
+export default class InstancePropertiesEditor extends Component {
+  constructor() {
+    super();
+
+    this.schema = {
+      'X': {
+        onChange: (event, newValue) => {
+          this.props.instances.forEach(instance => instance.setX(parseFloat(newValue)));
+        }
+      },
+      'Y': {
+        onChange: (event, newValue) => {
+          this.props.instances.forEach(instance => instance.setX(parseFloat(newValue)));
+        }
+      }
+    }
+  }
+
+  renderEditField = (raw, value, key, key2, key3, key4) => {
+    let keys = [key];
+    if (key2) keys = keys.concat(key2);
+    if (key3) keys = keys.concat(key3);
+    if (key4) keys = keys.concat(key4);
+    let fullKey = keys.join('.');
+
+
+    const onChangeCb = this.schema[fullKey] ? this.schema[fullKey].onChange : undefined;
+    if (typeof value === 'boolean') {
+      return (<Checkbox
+        defaultChecked={value}
+      />);
+    } else {
+      return (<TextField hintText="Hint Text" defaultValue={value} onChange={onChangeCb} />);
+    }
+  }
+
+  render() {
+    if (!this.props.instances || !this.props.instances.length)
+      return null;
+
+    const instance = this.props.instances[0];
+    const data ={ //TODO: Move this out of render?
+      X: instance.getX(),
+      Y: instance.getY(),
+      'Z Order': instance.getZOrder(),
+      'Layer': instance.getLayer(),
+      'Locked': instance.isLocked(),
+      'Custom size': {
+        'Enabled?': true,
+        width: 50,
+        height: 150,
+      },
+    }
+
+    return (
+      <JSONTree
+        key={instance.ptr}
+        data={data}
+        hideRoot={true}
+        getItemString={(type, data, itemType, itemString) => null}
+        valueRenderer={this.renderEditField}
+      />
+    )
+  }
+}

newIDE/src/InstancesEditor/InstancesEditorContainer.js

@@ -135,6 +135,10 @@ export default class InstancesEditorContainer extends Component {
     if (!this.keyboardShortcuts.shouldMultiSelect())
       this.instancesSelection.clearSelection();
     this.instancesSelection.selectInstance(instance);
+
+    if (this.props.onInstancesSelected) {
+      this.props.onInstancesSelected(this.instancesSelection.getSelectedInstances());
+    }
   }
 
   _onOverInstance = (instance) => {

newIDE/src/SceneEditor/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import ObjectsList from '../ObjectsList';
 import FullSizeInstancesEditor from '../InstancesEditor/FullSizeInstancesEditor';
+import InstancePropertiesEditor from '../InstancesEditor/InstancePropertiesEditor';
 
 export default class SceneEditor extends Component {
   state = {};
@@ -17,6 +18,12 @@ export default class SceneEditor extends Component {
     });
   }
 
+  _onInstancesSelected = (instances) => {
+    this.setState({
+      selectedInstances: instances,
+    });
+  }
+
   render() {
     const { project, layoutName } = this.props;
     if (!project.hasLayoutNamed(layoutName)) {
@@ -27,6 +34,12 @@ export default class SceneEditor extends Component {
 
     return (
       <div style={{display: 'flex', flex: 1}}>
+        <div style={{
+          flex: 0.2,
+          overflowY: 'scroll',
+        }}>
+          <InstancePropertiesEditor instances={this.state.selectedInstances}/>
+        </div>
         <div style={{
           flex: 1,
           display: 'flex',
@@ -37,10 +50,11 @@ export default class SceneEditor extends Component {
             initialInstances={layout.getInitialInstances()}
             selectedObjectName={this.state.selectedObjectName}
             onNewInstanceAdded={this._onNewInstanceAdded}
+            onInstancesSelected={this._onInstancesSelected}
           />
         </div>
         <div style={{
-          flex: 0.3,
+          flex: 0.2,
           overflowY: 'scroll',
         }}>
           <ObjectsList