[WIP] Add basic support for external layouts in newIDE

newIDE/src/App.js

@@ -12,6 +12,7 @@ import injectTapEventPlugin from 'react-tap-event-plugin';
 
 import EventsSheetContainer from './EventsSheet/EventsSheetContainer.js';
 import SceneEditor from './SceneEditor';
+import ExternalLayoutEditor from './SceneEditor/ExternalLayoutEditor';
 import ProjectManager from './ProjectManager';
 import ExternalEditor from './ExternalEditor';
 
@@ -32,6 +33,7 @@ class App extends Component {
       externalEventsOpened: '',
       projectManagerOpen: false,
       sceneOpened: '',
+      externalLayoutOpened: '',
     }
 
     if (ExternalEditor.isSupported()) {
@@ -47,6 +49,11 @@ class App extends Component {
             sceneOpened: editorArguments['edited-element-name'],
           });
         }
+        if (!this.state.externalLayoutOpened && editorArguments['editor'] === 'external-layout-editor') {
+          this.setState({
+            externalLayoutOpened: editorArguments['edited-element-name'],
+          });
+        }
       });
       ExternalEditor.onSetBoundsReceived((x, y, width, height) => {
         // Window.setBounds(x, y, width, height);
@@ -100,7 +107,7 @@ class App extends Component {
   }
 
   render() {
-    const { currentProject, externalEventsOpened, sceneOpened } = this.state;
+    const { currentProject, externalEventsOpened, sceneOpened, externalLayoutOpened } = this.state;
 
     return (
       <MuiThemeProvider>
@@ -121,6 +128,9 @@ class App extends Component {
                   onOpenLayout={name => this.setState({
                     sceneOpened: name
                   })}
+                  onOpenExternalLayout={name => this.setState({
+                    externalLayoutOpened: name
+                  })}
                 />
               )
             }
@@ -141,6 +151,15 @@ class App extends Component {
               />
             )
           }
+          {
+            currentProject && externalLayoutOpened && (
+              <ExternalLayoutEditor
+                key={externalLayoutOpened}
+                project={currentProject}
+                externalLayoutName={externalLayoutOpened}
+              />
+            )
+          }
           {
             currentProject && currentProject.hasExternalEventsNamed(externalEventsOpened) && (
               <EventsSheetContainer

newIDE/src/ObjectsRendering/Renderers/RenderedTiledSpriteInstance.js

@@ -9,13 +9,16 @@ const PIXI = global.PIXI;
  * @class RenderedTiledSpriteInstance
  * @constructor
  */
-function RenderedTiledSpriteInstance(project, layout, instance, associatedObject, pixiContainer) {
+function RenderedTiledSpriteInstance(project, layout, instance, associatedObject, pixiContainer, resourcesLoader) {
     RenderedInstance.call( this, project, layout, instance, associatedObject, pixiContainer );
 
     //Setup the PIXI object:
     var tiledSprite = gd.asTiledSpriteObject(associatedObject);
-    this._pixiObject = new PIXI.extras.TilingSprite(PIXI.Texture.fromImage(tiledSprite.getTexture()), //TODO
-        tiledSprite.getWidth(), tiledSprite.getHeight());
+    this._pixiObject = new PIXI.extras.TilingSprite(
+        PIXI.Texture.fromImage(resourcesLoader.get(project, tiledSprite.getTexture())),
+        tiledSprite.getWidth(),
+        tiledSprite.getHeight()
+    );
     this._pixiContainer.addChild(this._pixiObject);
 }
 RenderedTiledSpriteInstance.prototype = Object.create( RenderedInstance.prototype );
@@ -28,8 +31,7 @@ RenderedTiledSpriteInstance.prototype = Object.create( RenderedInstance.prototyp
 RenderedTiledSpriteInstance.getThumbnail = function(project, resourcesLoader, object) {
     var tiledSprite = gd.asTiledSpriteObject(object);
 
-    var texture = tiledSprite.getTexture();
-    return texture ? texture : "res/unknown32.png";
+    return resourcesLoader.get(project, tiledSprite.getTexture());
 };
 
 RenderedTiledSpriteInstance.prototype.update = function() {

newIDE/src/ProjectManager/index.js

@@ -51,6 +51,25 @@ export default class ProjectManager extends React.Component {
             );
           })}
         />
+        <ListItem
+          primaryText="External layouts"
+          leftIcon={<ContentInbox />}
+          initiallyOpen={true}
+          primaryTogglesNestedList={true}
+          autoGenerateNestedIndicator={true}
+          nestedItems={mapFor(0, project.getExternalLayoutsCount(), (i) => {
+            const externalLayout = project.getExternalLayoutAt(i);
+            const name = externalLayout.getName();
+            return (
+              <ListItem
+                key={i}
+                primaryText={name}
+                leftIcon={<ContentInbox />}
+                onTouchTap={() => this.props.onOpenExternalLayout(name)}
+              />
+            );
+          })}
+        />
       </List>
     );
   }

newIDE/src/SceneEditor/ExternalLayoutEditor.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import InstancesFullEditor from './InstancesFullEditor';
+
+export default class ExternalLayoutEditor extends Component {
+  render() {
+    const { project, externalLayoutName } = this.props;
+    if (!project.hasExternalLayoutNamed(externalLayoutName)) {
+      //TODO: Error component
+      return <div>No external layout called {externalLayoutName} found!</div>;
+    }
+    const externalLayout = project.getExternalLayout(externalLayoutName);
+
+    const layoutName = externalLayout.getAssociatedLayout();
+    if (!project.hasLayoutNamed(layoutName)) {
+      //TODO: Error component
+      return <div>No layout called {layoutName} found for the external layout editor!</div>;
+    }
+    const layout = project.getLayout(layoutName);
+
+    return (
+      <InstancesFullEditor
+        {...this.props}
+        project={project}
+        layout={layout}
+        initialInstances={externalLayout.getInitialInstances()}
+      />
+    );
+  }
+}

newIDE/src/SceneEditor/InstancesFullEditor.js

@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import ObjectsList from '../ObjectsList';
+import FullSizeInstancesEditor from '../InstancesEditor/FullSizeInstancesEditor';
+import InstancePropertiesEditor from '../InstancesEditor/InstancePropertiesEditor';
+
+export default class InstancesFullEditor extends Component {
+  state = {};
+
+  _onObjectSelected = (selectedObjectName) => {
+    this.setState({
+      selectedObjectName,
+    });
+  }
+
+  _onNewInstanceAdded = () => {
+    this.setState({
+      selectedObjectName: null
+    });
+  }
+
+  _onInstancesSelected = (instances) => {
+    this.setState({
+      selectedInstances: instances,
+    });
+  }
+
+  render() {
+    const { project, layout, initialInstances } = this.props;
+
+    return (
+      <div style={{display: 'flex', flex: 1}}>
+        <div style={{
+          width: 200,
+          overflowY: 'scroll',
+        }}>
+          <InstancePropertiesEditor instances={this.state.selectedInstances}/>
+        </div>
+        <div style={{
+          flex: 1,
+          display: 'flex',
+        }}>
+          <FullSizeInstancesEditor
+            project={project}
+            layout={layout}
+            initialInstances={initialInstances}
+            selectedObjectName={this.state.selectedObjectName}
+            onNewInstanceAdded={this._onNewInstanceAdded}
+            onInstancesSelected={this._onInstancesSelected}
+          />
+        </div>
+        <div style={{
+          width: 200,
+          overflowY: 'scroll',
+        }}>
+          <ObjectsList
+            project={project}
+            objectsContainer={layout}
+            onObjectSelected={this._onObjectSelected}
+          />
+        </div>
+      </div>
+    )
+  }
+}

newIDE/src/SceneEditor/index.js

@@ -1,69 +1,24 @@
 import React, { Component } from 'react';
-import ObjectsList from '../ObjectsList';
-import FullSizeInstancesEditor from '../InstancesEditor/FullSizeInstancesEditor';
-import InstancePropertiesEditor from '../InstancesEditor/InstancePropertiesEditor';
+import InstancesFullEditor from './InstancesFullEditor';
 
 export default class SceneEditor extends Component {
-  state = {};
-
-  _onObjectSelected = (selectedObjectName) => {
-    this.setState({
-      selectedObjectName,
-    });
-  }
-
-  _onNewInstanceAdded = () => {
-    this.setState({
-      selectedObjectName: null
-    });
-  }
-
-  _onInstancesSelected = (instances) => {
-    this.setState({
-      selectedInstances: instances,
-    });
-  }
-
   render() {
     const { project, layoutName } = this.props;
     if (!project.hasLayoutNamed(layoutName)) {
+      //TODO: Error component
       return <div>No layout called {layoutName} found!</div>;
     }
 
     const layout = project.getLayout(layoutName);
+    const initialInstances = layout.getInitialInstances();
 
     return (
-      <div style={{display: 'flex', flex: 1}}>
-        <div style={{
-          width: 200,
-          overflowY: 'scroll',
-        }}>
-          <InstancePropertiesEditor instances={this.state.selectedInstances}/>
-        </div>
-        <div style={{
-          flex: 1,
-          display: 'flex',
-        }}>
-          <FullSizeInstancesEditor
-            project={project}
-            layout={layout}
-            initialInstances={layout.getInitialInstances()}
-            selectedObjectName={this.state.selectedObjectName}
-            onNewInstanceAdded={this._onNewInstanceAdded}
-            onInstancesSelected={this._onInstancesSelected}
-          />
-        </div>
-        <div style={{
-          width: 200,
-          overflowY: 'scroll',
-        }}>
-          <ObjectsList
-            project={project}
-            objectsContainer={layout}
-            onObjectSelected={this._onObjectSelected}
-          />
-        </div>
-      </div>
-    )
+      <InstancesFullEditor
+        {...this.props}
+        project={project}
+        layout={layout}
+        initialInstances={initialInstances}
+      />
+    );
   }
 }