Try to make objects draggable on the scene

newIDE/app/src/InstancesEditor/index.js

@@ -80,6 +80,15 @@ export default class InstancesEditorContainer extends Component {
     this.backgroundArea.on('mousedown', event =>
       this._onBackgroundClicked(event.data.global.x, event.data.global.y)
     );
+    this.pixiRenderer.view.addEventListener('mouseup', event => {
+      console.log("PLOP")
+      console.log(event);
+      console.log(this.props.draggedObjectName)
+    });
+    this.pixiRenderer.view.addEventListener('mousemove', event => {
+      console.log("move");
+      if (this.props.onMouseMove) this.props.onMouseMove(event);
+    });
     this.backgroundArea.on('touchstart', event =>
       this._onBackgroundClicked(event.data.global.x, event.data.global.y)
     );

newIDE/app/src/ObjectsList/index.js

@@ -12,7 +12,10 @@ import { showWarningBox } from '../UI/Messages/MessageBox';
 import { makeAddItem } from '../UI/ListAddItem';
 import { SortableContainer, SortableElement } from 'react-sortable-hoc';
 import { enumerateObjects, filterObjectsList } from './EnumerateObjects';
-import type { ObjectWithContextList, ObjectWithContext } from '../ObjectsList/EnumerateObjects';
+import type {
+  ObjectWithContextList,
+  ObjectWithContext,
+} from '../ObjectsList/EnumerateObjects';
 
 const listItemHeight = 48;
 const styles = {
@@ -24,7 +27,7 @@ const styles = {
   },
   listContainer: {
     flex: 1,
-  }
+  },
 };
 
 const AddObjectRow = makeAddItem(ListItem);
@@ -42,7 +45,7 @@ const SortableAddObjectRow = SortableElement(props => {
   return <AddObjectRow {...props} />;
 });
 
-class ObjectsList extends Component<*,*> {
+class ObjectsList extends Component<*, *> {
   list: any;
 
   forceUpdateGrid() {
@@ -52,6 +55,7 @@ class ObjectsList extends Component<*,*> {
   render() {
     let { height, width, fullList, project, selectedObjectName } = this.props;
 
+    console.log('RENDERList', this.props.disableSort);
     return (
       <List
         ref={list => (this.list = list)}
@@ -102,6 +106,7 @@ class ObjectsList extends Component<*,*> {
               getThumbnail={this.props.getThumbnail}
               selected={objectWithScope.object.getName() === selectedObjectName}
               onObjectSelected={this.props.onObjectSelected}
+              disabled={this.props.disableSort}
             />
           );
         }}
@@ -120,7 +125,10 @@ type StateType = {|
   searchText: string,
 |};
 
-export default class ObjectsListContainer extends React.Component<*, StateType> {
+export default class ObjectsListContainer extends React.Component<
+  *,
+  StateType
+> {
   static defaultProps = {
     onDeleteObject: (objectWithScope, cb) => cb(true),
     onRenameObject: (objectWithScope, newName, cb) => cb(true),
@@ -137,6 +145,7 @@ export default class ObjectsListContainer extends React.Component<*, StateType>
   };
 
   shouldComponentUpdate(nextProps: *, nextState: StateType) {
+    return true;
     // The component is costly to render, so avoid any re-rendering as much
     // as possible.
     // We make the assumption that no changes to objects list is made outside
@@ -152,7 +161,10 @@ export default class ObjectsListContainer extends React.Component<*, StateType>
     )
       return true;
 
-    if (this.props.selectedObjectName !== nextProps.selectedObjectName)
+    if (
+      this.props.selectedObjectName !== nextProps.selectedObjectName ||
+      this.props.disableSort !== nextProps.disableSort
+    )
       return true;
 
     if (
@@ -257,6 +269,9 @@ export default class ObjectsListContainer extends React.Component<*, StateType>
   };
 
   _onMove = (oldIndex: number, newIndex: number) => {
+    console.log("on move with disableSort =", this.props.disableSort);
+    if (this.props.disableSort) return;
+
     const { project, objectsContainer } = this.props;
 
     const isInContainerObjectsList =
@@ -276,9 +291,26 @@ export default class ObjectsListContainer extends React.Component<*, StateType>
       );
     }
 
+    if (this.props.onDrag) this.props.onDrag(null);
     this.forceUpdateList();
   };
 
+  _onSortStart = (index: number) => {
+    const { project, objectsContainer } = this.props;
+
+    let object = null;
+    const isInContainerObjectsList = index < this.containerObjectsList.length;
+    if (isInContainerObjectsList) {
+      object = objectsContainer.getObjectAt(index);
+    } else {
+      object = project.getObjectAt(index);
+    }
+
+    if (!object) return;
+
+    if (this.props.onDrag) this.props.onDrag(object.getName());
+  };
+
   forceUpdateList = () => {
     this.forceUpdate();
     this.sortableList.getWrappedInstance().forceUpdateGrid();
@@ -289,8 +321,14 @@ export default class ObjectsListContainer extends React.Component<*, StateType>
     const { searchText } = this.state;
 
     const lists = enumerateObjects(project, objectsContainer);
-    this.containerObjectsList = filterObjectsList(lists.containerObjectsList, searchText);
-    this.projectObjectsList = filterObjectsList(lists.projectObjectsList, searchText);
+    this.containerObjectsList = filterObjectsList(
+      lists.containerObjectsList,
+      searchText
+    );
+    this.projectObjectsList = filterObjectsList(
+      lists.projectObjectsList,
+      searchText
+    );
     const allObjectsList = filterObjectsList(lists.allObjectsList, searchText);
     const fullList = allObjectsList.concat({
       key: 'add-objects-row',
@@ -302,6 +340,7 @@ export default class ObjectsListContainer extends React.Component<*, StateType>
     // crash the app.
     const listKey = project.ptr + ';' + objectsContainer.ptr;
 
+    console.log('RENDERList', this.props.disableSort);
     return (
       <Paper style={styles.container}>
         <div style={styles.listContainer}>
@@ -325,8 +364,10 @@ export default class ObjectsListContainer extends React.Component<*, StateType>
                 onEditVariables={this._onEditVariables}
                 onDelete={this._onDelete}
                 onRename={this._onRename}
+                onSortStart={({ index }) => this._onSortStart(index)}
                 onSortEnd={({ oldIndex, newIndex }) =>
                   this._onMove(oldIndex, newIndex)}
+                disableSort={this.props.disableSort}
                 helperClass="sortable-helper"
                 distance={30}
               />

newIDE/app/src/SceneEditor/InstancesFullEditor/index.js

@@ -81,6 +81,9 @@ export default class InstancesFullEditor extends Component {
 
       uiSettings: props.initialUiSettings,
       history: getHistoryInitialState(props.initialInstances),
+
+      objectDraggedFromList: null,
+      objectDraggedFromListIsOnInstancesEditor: false,
     };
   }
 
@@ -395,6 +398,28 @@ export default class InstancesFullEditor extends Component {
     done(true);
   };
 
+  _onDragObjectFromObjectsList = (objectName) => {
+    // Use a timeout to make sure that the potential mouse up/drop event
+    // was dispatched and handled by the list before resetting the state.
+    setTimeout(() => {
+      console.log("SETSTATE");
+      this.setState({
+        objectDraggedFromList: objectName,
+        objectDraggedFromListIsOnInstancesEditor: false,
+      });
+    }, 0);
+  }
+
+  _onMouseMoveOverInstancesEditor = () => {
+    console.log("Mouse move over instances editor. Dragged:", this.state.objectDraggedFromList)
+    if (this.state.objectDraggedFromList && !this.state.objectDraggedFromListIsOnInstancesEditor) {
+      console.log("set");
+      this.setState({
+        objectDraggedFromListIsOnInstancesEditor: true,
+      }, () => this.forceUpdateObjectsList());
+    }
+  }
+
   deleteSelection = () => {
     const selectedInstances = this.instancesSelection.getSelectedInstances();
     selectedInstances.map(instance =>
@@ -482,6 +507,7 @@ export default class InstancesFullEditor extends Component {
     const { project, layout, initialInstances, resourceSources, onChooseResource } = this.props;
     const selectedInstances = this.instancesSelection.getSelectedInstances();
 
+    console.log(this.state.objectDraggedFromListIsOnInstancesEditor, "objectDraggedFromListIsOnInstancesEditor");
     const editors = {
       properties: (
         <MosaicWindow title="Properties">
@@ -516,6 +542,8 @@ export default class InstancesFullEditor extends Component {
           onZoomOut={this.zoomOut}
           onZoomIn={this.zoomIn}
           wrappedEditorRef={editor => (this.editor = editor)}
+          draggedObjectName={this.state.objectDraggedFromList}
+          onMouseMove={this._onMouseMoveOverInstancesEditor}
         />
       ),
       'objects-list': (
@@ -531,6 +559,8 @@ export default class InstancesFullEditor extends Component {
             onEditObject={this.props.onEditObject || this.editObject}
             onDeleteObject={this._onDeleteObject}
             onRenameObject={this._onRenameObject}
+            onDrag={this._onDragObjectFromObjectsList}
+            disableSort={this.state.objectDraggedFromListIsOnInstancesEditor}
             ref={objectsList => (this._objectsList = objectsList)}
           />
         </MosaicWindow>