[WIP] Rename SceneEditor to InstancesEditor in newIDE and improve it

newIDE/src/App.js

@@ -9,7 +9,7 @@ import Panes from './UI/Panes';
 import injectTapEventPlugin from 'react-tap-event-plugin';
 
 import EventsSheetContainer from './EventsSheet/EventsSheetContainer.js';
-import FullSizeSceneEditor from './SceneEditor/FullSizeSceneEditor.js';
+import FullSizeInstancesEditor from './InstancesEditor/FullSizeInstancesEditor.js';
 import ProjectManager from './ProjectManager';
 import ExternalEditor from './ExternalEditor';
 
@@ -115,7 +115,7 @@ class App extends Component {
               {/*<JSONTree data={game} />*/}
               {
                 currentProject && currentProject.hasLayoutNamed(sceneOpened) && (
-                  <FullSizeSceneEditor
+                  <FullSizeInstancesEditor
                     key={sceneOpened}
                     project={currentProject}
                     layout={currentProject.getLayout(sceneOpened)}

newIDE/src/InstancesEditor/FullSizeInstancesEditor.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import Measure from 'react-measure';
-import SceneEditorContainer from './SceneEditorContainer.js';
+import InstancesEditorContainer from './InstancesEditorContainer.js';
 
-export default class FullSizeSceneEditor extends Component {
+export default class FullSizeInstancesEditor extends Component {
   constructor() {
     super();
 
@@ -20,7 +20,7 @@ export default class FullSizeSceneEditor extends Component {
         <div style={{display: 'flex', flex: 1}}>
         {
           this.state.width && this.state.height &&
-            <SceneEditorContainer
+            <InstancesEditorContainer
               width={this.state.width}
               height={this.state.height}
               {...this.props}

newIDE/src/InstancesEditor/HighlightedInstance.js

@@ -1,10 +1,12 @@
+import transformRect from '../Utils/TransformRect';
 const gd = global.gd;
 const PIXI = global.PIXI;
 
 export default class InstancesSelection {
-    constructor({getInstanceWidth, getInstanceHeight}) {
+    constructor({getInstanceWidth, getInstanceHeight, toCanvasCoordinates}) {
       this.getInstanceWidth = getInstanceWidth;
       this.getInstanceHeight = getInstanceHeight;
+      this.toCanvasCoordinates = toCanvasCoordinates;
 
       this.highlightedInstance = null;
       this.highlightRectangle = new PIXI.Graphics();
@@ -29,15 +31,21 @@ export default class InstancesSelection {
         return;
       }
 
+      const highlightRectangle = transformRect(this.toCanvasCoordinates, {
+          x: this.highlightedInstance.getX(),
+          y: this.highlightedInstance.getY(),
+          width: this.getInstanceWidth(this.highlightedInstance),
+          height: this.getInstanceHeight(this.highlightedInstance),
+      });
+
       this.highlightRectangle.visible = true;
       this.highlightRectangle.clear();
       this.highlightRectangle.beginFill(0xEEEEFF);
       this.highlightRectangle.fillAlpha = 0.1;
       this.highlightRectangle.alpha = 0.8;
       this.highlightRectangle.lineStyle(1, 0x000000, 1);
-      this.highlightRectangle.drawRect(this.highlightedInstance.getX(), this.highlightedInstance.getY(),
-        this.getInstanceWidth(this.highlightedInstance),
-        this.getInstanceHeight(this.highlightedInstance));
+      this.highlightRectangle.drawRect(highlightRectangle.x, highlightRectangle.y,
+        highlightRectangle.width, highlightRectangle.height);
       this.highlightRectangle.endFill();
     }
 }

newIDE/src/InstancesEditor/InstancesEditorContainer.js

@@ -21,7 +21,7 @@ import gameData from '../fixtures/game.json';
  */
 const rgbToHex = (r, g, b) => "" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
 
-export default class SceneEditorContainer extends Component {
+export default class InstancesEditorContainer extends Component {
   constructor() {
     super();
     this.state = {};
@@ -53,9 +53,7 @@ export default class SceneEditorContainer extends Component {
     };
 
     this.pixiContainer = new PIXI.Container();
-    this.viewPosition = new ViewPosition({
-      onPanMoveView: this._onPanMoveView,
-    });
+    this.viewPosition = new ViewPosition();
     this.sceneRenderer = new SceneRenderer({
       project: this.props.project,
       layout: this.props.layout,
@@ -76,10 +74,12 @@ export default class SceneEditorContainer extends Component {
       getInstanceWidth: this.sceneRenderer.getInstanceWidth,
       getInstanceHeight: this.sceneRenderer.getInstanceHeight,
       onResize: this._onResize,
+      toCanvasCoordinates: this.viewPosition.toCanvasCoordinates,
     });
     this.highlightedInstance = new HighlightedInstance({
       getInstanceWidth: this.sceneRenderer.getInstanceWidth,
       getInstanceHeight: this.sceneRenderer.getInstanceHeight,
+      toCanvasCoordinates: this.viewPosition.toCanvasCoordinates,
     });
     this.keyboardShortcuts = new KeyboardShortcuts();
 
@@ -87,8 +87,8 @@ export default class SceneEditorContainer extends Component {
     this.pixiContainer.addChild(this.viewPosition.getPixiContainer());
     this.pixiContainer.addChild(this.selectionRectangle.getPixiObject());
     this.viewPosition.getPixiContainer().addChild(this.sceneRenderer.getPixiContainer());
-    this.viewPosition.getPixiContainer().addChild(this.highlightedInstance.getPixiObject());
-    this.viewPosition.getPixiContainer().addChild(this.instancesSelection.getPixiContainer());
+    this.pixiContainer.addChild(this.highlightedInstance.getPixiObject());
+    this.pixiContainer.addChild(this.instancesSelection.getPixiContainer());
 
     this.renderScene();
   }

newIDE/src/InstancesEditor/InstancesSelection.js

@@ -1,4 +1,5 @@
 import gesture from 'pixi-simple-gesture';
+import transformRect from '../Utils/TransformRect';
 const gd = global.gd;
 const PIXI = global.PIXI;
 
@@ -6,10 +7,11 @@ const resizeButtonWidth = 18;
 const resizeButtonHeight = 18;
 
 export default class InstancesSelection {
-    constructor({getInstanceWidth, getInstanceHeight, onResize}) {
+    constructor({getInstanceWidth, getInstanceHeight, onResize, toCanvasCoordinates}) {
       this.getInstanceWidth = getInstanceWidth;
       this.getInstanceHeight = getInstanceHeight;
       this.onResize = onResize;
+      this.toCanvasCoordinates = toCanvasCoordinates;
 
       this.selection = [];
       this.selectionOriginalPos = [];
@@ -95,15 +97,20 @@ export default class InstancesSelection {
         }
 
         const instance = this.selection[i];
-        var width = this.getInstanceWidth(instance);
-        var height = this.getInstanceHeight(instance);
+        const width = this.getInstanceWidth(instance);
+        const height = this.getInstanceHeight(instance);
+
+        const selectionRectangle = transformRect(this.toCanvasCoordinates, {
+            x: instance.getX(), y: instance.getY(), width, height
+        });
 
         this.selectedRectangles[i].clear();
         this.selectedRectangles[i].beginFill(0x6868E8);
         this.selectedRectangles[i].lineStyle(1, 0x6868E8, 1);
         this.selectedRectangles[i].fillAlpha = 0.3;
         this.selectedRectangles[i].alpha = 0.8;
-        this.selectedRectangles[i].drawRect(instance.getX(), instance.getY(), width, height);
+        this.selectedRectangles[i].drawRect(selectionRectangle.x, selectionRectangle.y,
+            selectionRectangle.width, selectionRectangle.height);
         this.selectedRectangles[i].endFill();
 
         if ( x1 === undefined || instance.getX() < x1 ) x1 = instance.getX();
@@ -122,17 +129,17 @@ export default class InstancesSelection {
       this.resizeButton.clear();
       this.resizeIcon.visible = false;
       if (this.selection.length !== 0) {
+          const resizeButtonPos = this.toCanvasCoordinates(x2 + 5, y2 + 5);
+
           this.resizeIcon.visible = true;
-          const resizeButtonX = x2 + 5;
-          const resizeButtonY = y2 + 5;
-          this.resizeIcon.position.x = this.resizeButtonX + 1;
-          this.resizeIcon.position.y = this.resizeButtonY + 1;
+          this.resizeIcon.position.x = resizeButtonPos[0] + 1;
+          this.resizeIcon.position.y = resizeButtonPos[1] + 1;
           this.resizeButton.beginFill(0xFFFFFF);
           this.resizeButton.lineStyle(1, 0x6868E8, 1);
           this.resizeButton.fillAlpha = 0.9;
-          this.resizeButton.drawRect(resizeButtonX, resizeButtonY, resizeButtonWidth, resizeButtonHeight);
+          this.resizeButton.drawRect(resizeButtonPos[0], resizeButtonPos[1], resizeButtonWidth, resizeButtonHeight);
           this.resizeButton.endFill();
-          this.resizeButton.hitArea = new PIXI.Rectangle(resizeButtonX, resizeButtonY, resizeButtonWidth, resizeButtonHeight);
+          this.resizeButton.hitArea = new PIXI.Rectangle(resizeButtonPos[0], resizeButtonPos[1], resizeButtonWidth, resizeButtonHeight);
       } else {
         this.resizeButton.hitArea = new PIXI.Rectangle(0, 0, 0, 0);
       }

newIDE/src/InstancesEditor/ObjectsRenderingService.js

@@ -424,6 +424,8 @@ RenderedAdMobInstance.prototype.getDefaultHeight = function() {
  * Mainly used by "scenearea" directive and its associated controller.
  *
  * Call registerObject to add a new function to render a type of object.
+ *
+ * TODO: The module should be renamed InstancesRenderingService
  */
 export default {
     renderers: {

newIDE/src/InstancesEditor/ViewPosition.js

@@ -2,17 +2,13 @@ const PIXI = global.PIXI;
 import gesture from 'pixi-simple-gesture';
 
 export default class ViewPosition {
-  constructor({onPanMoveView}) {
+  constructor() {
     this.viewX = 0;
     this.viewY = 0;
     this._zoomFactor = 1;
     this._pixiContainer = new PIXI.Container();
-
-    // gesture.panable(this._pixiContainer);
-    // this._pixiContainer.on('panmove', (event) => onPanMoveView(event.deltaX, event.deltaY));
   }
 
-
   /**
    * Convert a point from the canvas coordinates (for example, the mouse position) to the
    * "world" coordinates.
@@ -34,6 +30,9 @@ export default class ViewPosition {
    * canvas coordinates.
    */
   toCanvasCoordinates = (x, y) => {
+    x -= this.viewX;
+    y -= this.viewY;
+
     var viewRotation = -0;
     var tmp = x;
     x = Math.cos(viewRotation/180*3.14159)*x - Math.sin(viewRotation/180*3.14159)*y;
@@ -42,7 +41,7 @@ export default class ViewPosition {
     x *= Math.abs(this._pixiContainer.scale.x);
     y *= Math.abs(this._pixiContainer.scale.y);
 
-    return [x-this.viewX, y-this.viewY];
+    return [x, y];
   }
 
   scrollBy(x, y) {

newIDE/src/ObjectsList/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import {List, ListItem} from 'material-ui/List';
+import ContentInbox from 'material-ui/svg-icons/content/inbox';
+import ContentSend from 'material-ui/svg-icons/content/send';
+import mapFor from '../Utils/MapFor';
+
+export default class ProjectManager extends React.Component {
+  render() {
+    const { objectsContainer } = this.props;
+
+    return (
+      <List>
+        {mapFor(0, objectsContainer.getObjectsCount(), (i) => {
+          const object = objectsContainer.getObjectAt(i);
+
+          return (<ListItem
+            key={i}
+            primaryText={object.getName()}
+            leftIcon={<ContentInbox />}
+            onTouchTap={() => {/*TODO*/}}
+          />);
+        })}
+      </List>
+    );
+  }
+}

newIDE/src/ProjectManager/index.js

@@ -2,18 +2,10 @@ import React from 'react';
 import {List, ListItem} from 'material-ui/List';
 import ContentInbox from 'material-ui/svg-icons/content/inbox';
 import ContentSend from 'material-ui/svg-icons/content/send';
-
-const loop = (start, end, func) => { //TODO: move me in utils/package
-  const result = [];
-  for(let i = start; i < end; i++) {
-    result.push(func(i));
-  }
-  return result;
-}
+import mapFor from '../Utils/MapFor';
 
 export default class ProjectManager extends React.Component {
-  state = {
-  };
+  state = {};
 
   render() {
     const { project } = this.props;
@@ -27,7 +19,7 @@ export default class ProjectManager extends React.Component {
           initiallyOpen={true}
           primaryTogglesNestedList={true}
           autoGenerateNestedIndicator={true}
-          nestedItems={loop(0, project.getLayoutsCount(), (i) => {
+          nestedItems={mapFor(0, project.getLayoutsCount(), (i) => {
             const layout = project.getLayoutAt(i);
             const name = layout.getName();
             return (
@@ -46,7 +38,7 @@ export default class ProjectManager extends React.Component {
           initiallyOpen={true}
           primaryTogglesNestedList={true}
           autoGenerateNestedIndicator={true}
-          nestedItems={loop(0, project.getExternalEventsCount(), (i) => {
+          nestedItems={mapFor(0, project.getExternalEventsCount(), (i) => {
             const externalEvents = project.getExternalEventsAt(i);
             const name = externalEvents.getName();
             return (

newIDE/src/Utils/MapFor.js

@@ -0,0 +1,7 @@
+export default (start, end, func) => {
+  const result = [];
+  for(let i = start; i < end; i++) {
+    result.push(func(i));
+  }
+  return result;
+}

newIDE/src/Utils/TransformRect.js

@@ -0,0 +1,10 @@
+export default function transformRect(transformPoint, {x, y, width, height}) {
+  const startPos = transformPoint(x, y);
+  const endPos = transformPoint(x + width, y + height);
+  return {
+    x: startPos[0],
+    y: startPos[1],
+    width: endPos[0] - startPos[0],
+    height: endPos[1] - startPos[1],
+  }
+}