Add "Add Instance of [...]" menu option in SceneEditor (#656)

newIDE/app/src/ObjectsList/ObjectRow.js

@@ -151,11 +151,17 @@ class ThemableObjectRow extends React.Component {
         primaryText={label}
         leftIcon={<ListIcon src={this.props.getThumbnail(project, object)} />}
         rightIconButton={this._renderObjectMenu(object)}
-        onDoubleClick={(event) => {
+        onClick={() => {
+          if (!this.props.onObjectSelected) return;
+          if (this.props.editingName) return;
+          this.props.onObjectSelected(selected ? '' : objectName);
+        }}
+        onDoubleClick={event => {
           if (event.button !== LEFT_MOUSE_BUTTON) return;
           if (!this.props.onEdit) return;
           if (this.props.editingName) return;
 
+          this.props.onObjectSelected('');
           this.props.onEdit(object);
         }}
       />

newIDE/app/src/ObjectsList/index.js

@@ -121,8 +121,11 @@ class ObjectsList extends Component<*, *> {
               onAddNewObject={this.props.onAddNewObject}
               editingName={nameBeingEdited}
               getThumbnail={this.props.getThumbnail}
+              onObjectSelected={this.props.onObjectSelected}
               selected={
-                selectedObjectNames.indexOf(objectWithContext.object.getName()) !== -1
+                selectedObjectNames.indexOf(
+                  objectWithContext.object.getName()
+                ) !== -1
               }
             />
           );
@@ -366,11 +369,10 @@ export default class ObjectsListContainer extends React.Component<
     this.forceUpdateList();
   };
 
-  _onStartDraggingObject = ({index}: {index: number}) => {
+  _onStartDraggingObject = ({ index }: { index: number }) => {
     const { project, objectsContainer } = this.props;
 
-    const isInContainerObjectsList =
-      index < this.containerObjectsList.length;
+    const isInContainerObjectsList = index < this.containerObjectsList.length;
     if (isInContainerObjectsList) {
       this.props.onStartDraggingObject(objectsContainer.getObjectAt(index));
     } else {
@@ -453,6 +455,7 @@ export default class ObjectsListContainer extends React.Component<
                 renamedObjectWithScope={this.state.renamedObjectWithScope}
                 getThumbnail={this.props.getThumbnail}
                 selectedObjectNames={this.props.selectedObjectNames}
+                onObjectSelected={this.props.onObjectSelected}
                 onEditObject={this.props.onEditObject}
                 onCopyObject={this._copyObject}
                 onCutObject={this._cutObject}

newIDE/app/src/SceneEditor/index.js

@@ -31,6 +31,7 @@ import EditorBar from '../UI/EditorBar';
 import InfoBar from '../UI/Messages/InfoBar';
 import ContextMenu from '../UI/Menu/ContextMenu';
 import { showWarningBox } from '../UI/Messages/MessageBox';
+import { shortenString } from '../Utils/StringHelpers';
 
 import {
   undo,
@@ -366,6 +367,28 @@ export default class SceneEditor extends Component {
     );
   };
 
+  _onObjectSelected = (selectedObjectName: string) => {
+    if (!selectedObjectName) {
+      this.setState({
+        selectedObjectNames: [],
+      });
+    } else {
+      this.setState({
+        selectedObjectNames: [selectedObjectName],
+      });
+    }
+  };
+
+  _onAddInstanceUnderCursor = () => {
+    if (!this.state.selectedObjectNames.length) return;
+    const objectSelected = this.state.selectedObjectNames[0];
+    const cursorPosition = this.editor.getLastCursorPosition();
+    this._addInstance(cursorPosition[0], cursorPosition[1], objectSelected);
+    this.setState({
+      selectedObjectNames: [objectSelected],
+    });
+  };
+
   _addInstance = (x, y, objectName) => {
     if (!objectName) return;
 
@@ -387,7 +410,9 @@ export default class SceneEditor extends Component {
 
   _onInstancesSelected = instances => {
     this.setState({
-      selectedObjectNames: uniq(instances.map(instance => instance.getObjectName())),
+      selectedObjectNames: uniq(
+        instances.map(instance => instance.getObjectName())
+      ),
     });
     this.forceUpdatePropertiesEditor();
     this.updateToolbar();
@@ -761,6 +786,7 @@ export default class SceneEditor extends Component {
             ) => {
               return this._canObjectUseNewName(objectWithContext, newName);
             }}
+            onObjectSelected={this._onObjectSelected}
             onRenameObject={this._onRenameObject}
             onObjectPasted={() => this.updateBehaviorsSharedData()}
             onStartDraggingObject={this._onStartDraggingObjectFromList}
@@ -876,7 +902,7 @@ export default class SceneEditor extends Component {
           />
         </Drawer>
         <InfoBar
-          message="Drag and Drop the object to the scene to add an instance."
+          message="Drag and Drop the object to the scene or use the right click menu to add an instance of it."
           show={!!this.state.selectedObjectNames.length}
         />
         <InfoBar
@@ -933,9 +959,21 @@ export default class SceneEditor extends Component {
           ref={contextMenu => (this.contextMenu = contextMenu)}
           buildMenuTemplate={() => [
             {
-              label: 'Edit Object',
-              click: () => this.openObjectEditor(),
-              enabled: this.instancesSelection.hasSelectedInstances(),
+              label: this.state.selectedObjectNames.length
+                ? 'Add an Instance of ' +
+                  shortenString(this.state.selectedObjectNames[0], 7)
+                : '',
+              click: () => this._onAddInstanceUnderCursor(),
+              visible: this.state.selectedObjectNames.length > 0,
+            },
+            {
+              label: this.state.selectedObjectNames.length
+                ? 'Edit Object ' +
+                  shortenString(this.state.selectedObjectNames[0], 14)
+                : '',
+              click: () =>
+                this.editObjectByName(this.state.selectedObjectNames[0]),
+              visible: this.state.selectedObjectNames.length > 0,
             },
             {
               label: 'Scene properties',

newIDE/app/src/Utils/StringHelpers.js

@@ -0,0 +1,3 @@
+export const shortenString = (str: string, maxLength: number) => {
+  return str.length > maxLength ? str.substring(0, maxLength) + '...' : str;
+};