mirror of
https://github.com/4ian/GDevelop.git
synced 2025-10-15 10:19:04 +00:00
Compare commits
1 Commits
experiment
...
feature/dr
Author | SHA1 | Date | |
---|---|---|---|
![]() |
c6c116ec44 |
@@ -80,6 +80,15 @@ export default class InstancesEditorContainer extends Component {
|
|||||||
this.backgroundArea.on('mousedown', event =>
|
this.backgroundArea.on('mousedown', event =>
|
||||||
this._onBackgroundClicked(event.data.global.x, event.data.global.y)
|
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.backgroundArea.on('touchstart', event =>
|
||||||
this._onBackgroundClicked(event.data.global.x, event.data.global.y)
|
this._onBackgroundClicked(event.data.global.x, event.data.global.y)
|
||||||
);
|
);
|
||||||
|
@@ -12,7 +12,10 @@ import { showWarningBox } from '../UI/Messages/MessageBox';
|
|||||||
import { makeAddItem } from '../UI/ListAddItem';
|
import { makeAddItem } from '../UI/ListAddItem';
|
||||||
import { SortableContainer, SortableElement } from 'react-sortable-hoc';
|
import { SortableContainer, SortableElement } from 'react-sortable-hoc';
|
||||||
import { enumerateObjects, filterObjectsList } from './EnumerateObjects';
|
import { enumerateObjects, filterObjectsList } from './EnumerateObjects';
|
||||||
import type { ObjectWithContextList, ObjectWithContext } from '../ObjectsList/EnumerateObjects';
|
import type {
|
||||||
|
ObjectWithContextList,
|
||||||
|
ObjectWithContext,
|
||||||
|
} from '../ObjectsList/EnumerateObjects';
|
||||||
|
|
||||||
const listItemHeight = 48;
|
const listItemHeight = 48;
|
||||||
const styles = {
|
const styles = {
|
||||||
@@ -24,7 +27,7 @@ const styles = {
|
|||||||
},
|
},
|
||||||
listContainer: {
|
listContainer: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const AddObjectRow = makeAddItem(ListItem);
|
const AddObjectRow = makeAddItem(ListItem);
|
||||||
@@ -42,7 +45,7 @@ const SortableAddObjectRow = SortableElement(props => {
|
|||||||
return <AddObjectRow {...props} />;
|
return <AddObjectRow {...props} />;
|
||||||
});
|
});
|
||||||
|
|
||||||
class ObjectsList extends Component<*,*> {
|
class ObjectsList extends Component<*, *> {
|
||||||
list: any;
|
list: any;
|
||||||
|
|
||||||
forceUpdateGrid() {
|
forceUpdateGrid() {
|
||||||
@@ -52,6 +55,7 @@ class ObjectsList extends Component<*,*> {
|
|||||||
render() {
|
render() {
|
||||||
let { height, width, fullList, project, selectedObjectName } = this.props;
|
let { height, width, fullList, project, selectedObjectName } = this.props;
|
||||||
|
|
||||||
|
console.log('RENDERList', this.props.disableSort);
|
||||||
return (
|
return (
|
||||||
<List
|
<List
|
||||||
ref={list => (this.list = list)}
|
ref={list => (this.list = list)}
|
||||||
@@ -102,6 +106,7 @@ class ObjectsList extends Component<*,*> {
|
|||||||
getThumbnail={this.props.getThumbnail}
|
getThumbnail={this.props.getThumbnail}
|
||||||
selected={objectWithScope.object.getName() === selectedObjectName}
|
selected={objectWithScope.object.getName() === selectedObjectName}
|
||||||
onObjectSelected={this.props.onObjectSelected}
|
onObjectSelected={this.props.onObjectSelected}
|
||||||
|
disabled={this.props.disableSort}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
@@ -120,7 +125,10 @@ type StateType = {|
|
|||||||
searchText: string,
|
searchText: string,
|
||||||
|};
|
|};
|
||||||
|
|
||||||
export default class ObjectsListContainer extends React.Component<*, StateType> {
|
export default class ObjectsListContainer extends React.Component<
|
||||||
|
*,
|
||||||
|
StateType
|
||||||
|
> {
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
onDeleteObject: (objectWithScope, cb) => cb(true),
|
onDeleteObject: (objectWithScope, cb) => cb(true),
|
||||||
onRenameObject: (objectWithScope, newName, 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) {
|
shouldComponentUpdate(nextProps: *, nextState: StateType) {
|
||||||
|
return true;
|
||||||
// The component is costly to render, so avoid any re-rendering as much
|
// The component is costly to render, so avoid any re-rendering as much
|
||||||
// as possible.
|
// as possible.
|
||||||
// We make the assumption that no changes to objects list is made outside
|
// 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;
|
return true;
|
||||||
|
|
||||||
if (this.props.selectedObjectName !== nextProps.selectedObjectName)
|
if (
|
||||||
|
this.props.selectedObjectName !== nextProps.selectedObjectName ||
|
||||||
|
this.props.disableSort !== nextProps.disableSort
|
||||||
|
)
|
||||||
return true;
|
return true;
|
||||||
|
|
||||||
if (
|
if (
|
||||||
@@ -257,6 +269,9 @@ export default class ObjectsListContainer extends React.Component<*, StateType>
|
|||||||
};
|
};
|
||||||
|
|
||||||
_onMove = (oldIndex: number, newIndex: number) => {
|
_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 { project, objectsContainer } = this.props;
|
||||||
|
|
||||||
const isInContainerObjectsList =
|
const isInContainerObjectsList =
|
||||||
@@ -276,9 +291,26 @@ export default class ObjectsListContainer extends React.Component<*, StateType>
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.props.onDrag) this.props.onDrag(null);
|
||||||
this.forceUpdateList();
|
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 = () => {
|
forceUpdateList = () => {
|
||||||
this.forceUpdate();
|
this.forceUpdate();
|
||||||
this.sortableList.getWrappedInstance().forceUpdateGrid();
|
this.sortableList.getWrappedInstance().forceUpdateGrid();
|
||||||
@@ -289,8 +321,14 @@ export default class ObjectsListContainer extends React.Component<*, StateType>
|
|||||||
const { searchText } = this.state;
|
const { searchText } = this.state;
|
||||||
|
|
||||||
const lists = enumerateObjects(project, objectsContainer);
|
const lists = enumerateObjects(project, objectsContainer);
|
||||||
this.containerObjectsList = filterObjectsList(lists.containerObjectsList, searchText);
|
this.containerObjectsList = filterObjectsList(
|
||||||
this.projectObjectsList = filterObjectsList(lists.projectObjectsList, searchText);
|
lists.containerObjectsList,
|
||||||
|
searchText
|
||||||
|
);
|
||||||
|
this.projectObjectsList = filterObjectsList(
|
||||||
|
lists.projectObjectsList,
|
||||||
|
searchText
|
||||||
|
);
|
||||||
const allObjectsList = filterObjectsList(lists.allObjectsList, searchText);
|
const allObjectsList = filterObjectsList(lists.allObjectsList, searchText);
|
||||||
const fullList = allObjectsList.concat({
|
const fullList = allObjectsList.concat({
|
||||||
key: 'add-objects-row',
|
key: 'add-objects-row',
|
||||||
@@ -302,6 +340,7 @@ export default class ObjectsListContainer extends React.Component<*, StateType>
|
|||||||
// crash the app.
|
// crash the app.
|
||||||
const listKey = project.ptr + ';' + objectsContainer.ptr;
|
const listKey = project.ptr + ';' + objectsContainer.ptr;
|
||||||
|
|
||||||
|
console.log('RENDERList', this.props.disableSort);
|
||||||
return (
|
return (
|
||||||
<Paper style={styles.container}>
|
<Paper style={styles.container}>
|
||||||
<div style={styles.listContainer}>
|
<div style={styles.listContainer}>
|
||||||
@@ -325,8 +364,10 @@ export default class ObjectsListContainer extends React.Component<*, StateType>
|
|||||||
onEditVariables={this._onEditVariables}
|
onEditVariables={this._onEditVariables}
|
||||||
onDelete={this._onDelete}
|
onDelete={this._onDelete}
|
||||||
onRename={this._onRename}
|
onRename={this._onRename}
|
||||||
|
onSortStart={({ index }) => this._onSortStart(index)}
|
||||||
onSortEnd={({ oldIndex, newIndex }) =>
|
onSortEnd={({ oldIndex, newIndex }) =>
|
||||||
this._onMove(oldIndex, newIndex)}
|
this._onMove(oldIndex, newIndex)}
|
||||||
|
disableSort={this.props.disableSort}
|
||||||
helperClass="sortable-helper"
|
helperClass="sortable-helper"
|
||||||
distance={30}
|
distance={30}
|
||||||
/>
|
/>
|
||||||
|
@@ -81,6 +81,9 @@ export default class InstancesFullEditor extends Component {
|
|||||||
|
|
||||||
uiSettings: props.initialUiSettings,
|
uiSettings: props.initialUiSettings,
|
||||||
history: getHistoryInitialState(props.initialInstances),
|
history: getHistoryInitialState(props.initialInstances),
|
||||||
|
|
||||||
|
objectDraggedFromList: null,
|
||||||
|
objectDraggedFromListIsOnInstancesEditor: false,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -395,6 +398,28 @@ export default class InstancesFullEditor extends Component {
|
|||||||
done(true);
|
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 = () => {
|
deleteSelection = () => {
|
||||||
const selectedInstances = this.instancesSelection.getSelectedInstances();
|
const selectedInstances = this.instancesSelection.getSelectedInstances();
|
||||||
selectedInstances.map(instance =>
|
selectedInstances.map(instance =>
|
||||||
@@ -482,6 +507,7 @@ export default class InstancesFullEditor extends Component {
|
|||||||
const { project, layout, initialInstances, resourceSources, onChooseResource } = this.props;
|
const { project, layout, initialInstances, resourceSources, onChooseResource } = this.props;
|
||||||
const selectedInstances = this.instancesSelection.getSelectedInstances();
|
const selectedInstances = this.instancesSelection.getSelectedInstances();
|
||||||
|
|
||||||
|
console.log(this.state.objectDraggedFromListIsOnInstancesEditor, "objectDraggedFromListIsOnInstancesEditor");
|
||||||
const editors = {
|
const editors = {
|
||||||
properties: (
|
properties: (
|
||||||
<MosaicWindow title="Properties">
|
<MosaicWindow title="Properties">
|
||||||
@@ -516,6 +542,8 @@ export default class InstancesFullEditor extends Component {
|
|||||||
onZoomOut={this.zoomOut}
|
onZoomOut={this.zoomOut}
|
||||||
onZoomIn={this.zoomIn}
|
onZoomIn={this.zoomIn}
|
||||||
wrappedEditorRef={editor => (this.editor = editor)}
|
wrappedEditorRef={editor => (this.editor = editor)}
|
||||||
|
draggedObjectName={this.state.objectDraggedFromList}
|
||||||
|
onMouseMove={this._onMouseMoveOverInstancesEditor}
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
'objects-list': (
|
'objects-list': (
|
||||||
@@ -531,6 +559,8 @@ export default class InstancesFullEditor extends Component {
|
|||||||
onEditObject={this.props.onEditObject || this.editObject}
|
onEditObject={this.props.onEditObject || this.editObject}
|
||||||
onDeleteObject={this._onDeleteObject}
|
onDeleteObject={this._onDeleteObject}
|
||||||
onRenameObject={this._onRenameObject}
|
onRenameObject={this._onRenameObject}
|
||||||
|
onDrag={this._onDragObjectFromObjectsList}
|
||||||
|
disableSort={this.state.objectDraggedFromListIsOnInstancesEditor}
|
||||||
ref={objectsList => (this._objectsList = objectsList)}
|
ref={objectsList => (this._objectsList = objectsList)}
|
||||||
/>
|
/>
|
||||||
</MosaicWindow>
|
</MosaicWindow>
|
||||||
|
Reference in New Issue
Block a user