Kalakoi/GDevelop
1
0
Fork 0
mirror of https://github.com/4ian/GDevelop.git synced 2025-10-15 10:19:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix drop from an external source (like objects from the IDE) in newIDE

Browse Source
This commit is contained in:
Florian Rival
2017-06-08 23:52:58 +02:00
parent d4898c56f8
commit 2a99dc6e8a
8 changed files with 159 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
newIDE/app/package.json
View File

@@ -24,9 +24,11 @@
"react-addons-css-transition-group": "15.4.2",
"react-addons-perf": "15.4.2",
"react-color": "2.11.7",
"react-dnd": "2.3.0",
"react-dnd-html5-backend": "2.3.0",
"react-dom": "15.4.2",
"react-measure": "1.4.6",
"react-mosaic-component": "^0.3.4",
"react-mosaic-component": "^0.4.0",
"react-tap-event-plugin": "2.0.1",
"react-virtualized": "9.3.0",
"slug": "0.9.1",

15
newIDE/app/src/InstancesEditor/InstancesEditorContainer.js
View File

@@ -14,6 +14,7 @@ import WindowMask from './WindowMask';
import DropHandler from './DropHandler';
import BackgroundColor from './BackgroundColor';
import PIXI from 'pixi.js';
import SimpleDropTarget from '../Utils/DragDropHelpers/SimpleDropTarget';
export default class InstancesEditorContainer extends Component {
constructor() {
@@ -29,7 +30,7 @@ export default class InstancesEditorContainer extends Component {
this.props.width,
this.props.height
);
this.refs.canvasArea.appendChild(this.pixiRenderer.view);
this.canvasArea.appendChild(this.pixiRenderer.view);
this.pixiRenderer.view.addEventListener('contextmenu', e => {
e.preventDefault();
@@ -92,7 +93,7 @@ export default class InstancesEditorContainer extends Component {
});
this.dropHandler = new DropHandler({
canvas: this.refs.canvasArea,
canvas: this.canvasArea,
onDrop: this._onDrop,
});
@@ -398,10 +399,12 @@ export default class InstancesEditorContainer extends Component {
if (!this.props.project) return null;
return (
<div
ref="canvasArea"
style={{ flex: 1, position: 'absolute', overflow: 'hidden' }}
/>
<SimpleDropTarget>
<div
ref={canvasArea => this.canvasArea = canvasArea}
style={{ flex: 1, position: 'absolute', overflow: 'hidden' }}
/>
</SimpleDropTarget>
);
}
}

156
newIDE/app/src/MainFrame/index.js
View File

@@ -6,6 +6,8 @@ import IconButton from 'material-ui/IconButton';
import Drawer from 'material-ui/Drawer';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import DragDropContextProvider
from '../Utils/DragDropHelpers/DragDropContextProvider';
import Toolbar from './Toolbar';
import StartPage from './StartPage';
import ProjectTitlebar from './ProjectTitlebar';
@@ -36,7 +38,7 @@ import FileWriter from '../Utils/FileWriter';
import fixtureGame from '../fixtures/platformer/platformer.json';
const gd = global.gd;
class MainFrame extends Component {
export default class MainFrame extends Component {
constructor() {
super();
this.state = {
@@ -256,6 +258,7 @@ class MainFrame extends Component {
};
_onOpenFromFile = () => {
// TODO: This should be moved to a LocalFileOpener passed as a props
FileOpener.chooseProjectFile((err, filepath) => {
if (!filepath || err) return;
@@ -264,6 +267,7 @@ class MainFrame extends Component {
};
_onSaveToFile = () => {
// TODO: This should be moved to a LocalFileWriter passed as a props
const filepath = this.state.currentProject.getProjectFile();
if (!filepath) {
console.warn('Unimplemented Saveas'); // TODO
@@ -340,82 +344,82 @@ class MainFrame extends Component {
this.props.loading;
return (
<MuiThemeProvider muiTheme={defaultTheme}>
<div className="main-frame">
<ProjectTitlebar project={this.state.currentProject} />
<Drawer open={this.state.projectManagerOpen}>
<EditorBar
title={currentProject ? currentProject.getName() : 'No project'}
showMenuIconButton={false}
iconElementRight={
<IconButton onClick={this.toggleProjectManager}>
<NavigationClose />
</IconButton>
}
<DragDropContextProvider>
<MuiThemeProvider muiTheme={defaultTheme}>
<div className="main-frame">
<ProjectTitlebar project={this.state.currentProject} />
<Drawer open={this.state.projectManagerOpen}>
<EditorBar
title={currentProject ? currentProject.getName() : 'No project'}
showMenuIconButton={false}
iconElementRight={
<IconButton onClick={this.toggleProjectManager}>
<NavigationClose />
</IconButton>
}
/>
{currentProject &&
<ProjectManager
project={currentProject}
onOpenExternalEvents={this.openExternalEvents}
onOpenLayout={this.openLayout}
onOpenExternalLayout={this.openExternalLayout}
onSaveProject={this._onSaveToFile}
onCloseProject={this._onCloseProject}
onExportProject={this._openExportDialog}
/>}
</Drawer>
<Toolbar
ref={toolbar => this.toolbar = toolbar}
showProjectIcons={!this.props.singleEditor}
hasProject={!!this.state.currentProject}
toggleProjectManager={this.toggleProjectManager}
openProject={this._onOpenFromFile}
loadBuiltinGame={this.loadBuiltinGame}
requestUpdate={this.props.requestUpdate}
/>
{currentProject &&
<ProjectManager
project={currentProject}
onOpenExternalEvents={this.openExternalEvents}
onOpenLayout={this.openLayout}
onOpenExternalLayout={this.openExternalLayout}
onSaveProject={this._onSaveToFile}
onCloseProject={this._onCloseProject}
onExportProject={this._openExportDialog}
/>}
</Drawer>
<Toolbar
ref={toolbar => this.toolbar = toolbar}
showProjectIcons={!this.props.singleEditor}
hasProject={!!this.state.currentProject}
toggleProjectManager={this.toggleProjectManager}
openProject={this._onOpenFromFile}
loadBuiltinGame={this.loadBuiltinGame}
requestUpdate={this.props.requestUpdate}
/>
<Tabs
value={getCurrentTabIndex(this.state.editorTabs)}
onChange={this._onChangeEditorTab}
hideLabels={!!this.props.singleEditor}
>
{getEditors(this.state.editorTabs).map((editorTab, id) => (
<Tab
label={editorTab.name}
value={id}
key={editorTab.key}
onActive={() => this._onEditorTabActive(editorTab)}
onClose={() => this._onCloseEditorTab(editorTab)}
>
<div style={{ display: 'flex', flex: 1, height: '100%' }}>
{editorTab.render()}
</div>
</Tab>
))}
</Tabs>
<LoaderModal show={showLoader} />
<ConfirmCloseDialog
ref={confirmCloseDialog =>
this.confirmCloseDialog = confirmCloseDialog}
/>
{!!exportDialog &&
React.cloneElement(exportDialog, {
open: this.state.exportDialogOpen,
onClose: () => this._openExportDialog(false),
project: this.state.currentProject,
})}
{!!createDialog &&
React.cloneElement(createDialog, {
open: this.state.createDialogOpen,
onClose: () => this._openCreateDialog(false),
onOpen: filepath => {
this._openCreateDialog(false);
this._openFromFile(filepath);
},
})}
</div>
</MuiThemeProvider>
<Tabs
value={getCurrentTabIndex(this.state.editorTabs)}
onChange={this._onChangeEditorTab}
hideLabels={!!this.props.singleEditor}
>
{getEditors(this.state.editorTabs).map((editorTab, id) => (
<Tab
label={editorTab.name}
value={id}
key={editorTab.key}
onActive={() => this._onEditorTabActive(editorTab)}
onClose={() => this._onCloseEditorTab(editorTab)}
>
<div style={{ display: 'flex', flex: 1, height: '100%' }}>
{editorTab.render()}
</div>
</Tab>
))}
</Tabs>
<LoaderModal show={showLoader} />
<ConfirmCloseDialog
ref={confirmCloseDialog =>
this.confirmCloseDialog = confirmCloseDialog}
/>
{!!exportDialog &&
React.cloneElement(exportDialog, {
open: this.state.exportDialogOpen,
onClose: () => this._openExportDialog(false),
project: this.state.currentProject,
})}
{!!createDialog &&
React.cloneElement(createDialog, {
open: this.state.createDialogOpen,
onClose: () => this._openCreateDialog(false),
onOpen: filepath => {
this._openCreateDialog(false);
this._openFromFile(filepath);
},
})}
</div>
</MuiThemeProvider>
</DragDropContextProvider>
);
}
}
export default MainFrame;

3
newIDE/app/src/SceneEditor/InstancesFullEditor/index.js
View File

@@ -1,4 +1,5 @@
import React, { Component } from 'react';
import ObjectsList from '../../ObjectsList';
import FullSizeInstancesEditor
from '../../InstancesEditor/FullSizeInstancesEditor';
@@ -495,4 +496,4 @@ export default class InstancesFullEditor extends Component {
</div>
);
}
}
}

14
newIDE/app/src/UI/EditorMosaic/index.js
View File

@@ -1,10 +1,16 @@
import React, { Component } from 'react';
import { Mosaic, createBalancedTreeFromLeaves } from 'react-mosaic-component';
import { MosaicWithoutDragDropContext, createBalancedTreeFromLeaves } from 'react-mosaic-component';
// Styles for Mosaic:
import 'react-mosaic-component/react-mosaic-component.css';
import '../Theme/Mosaic.css';
export default class EditorMosaic extends Component {
/**
* @class EditorMosaic
*
* Can be used to create a mosaic of resizable editors.
* Must be used inside a component wrapped in a DragDropContext.
*/
class EditorMosaic extends Component {
constructor(props) {
super(props);
@@ -20,7 +26,7 @@ export default class EditorMosaic extends Component {
render() {
return (
<Mosaic
<MosaicWithoutDragDropContext
renderTile={editorName => this.props.editors[editorName]}
className="mosaic-blueprint-theme mosaic-gd-theme"
value={this.state.mosaicNode}
@@ -29,3 +35,5 @@ export default class EditorMosaic extends Component {
);
}
}
export default EditorMosaic;

11
newIDE/app/src/Utils/DragDropHelpers/DragDropContextProvider.js Normal file
View File

@@ -0,0 +1,11 @@
import { Component } from 'react';
import HTML5Backend from 'react-dnd-html5-backend';
import { DragDropContext } from 'react-dnd';
class DragDropContextProvider extends Component {
render() {
return this.props.children;
}
}
export default DragDropContext(HTML5Backend)(DragDropContextProvider);

37
newIDE/app/src/Utils/DragDropHelpers/SimpleDropTarget.js Normal file
View File

@@ -0,0 +1,37 @@
import React, { Component } from 'react';
import { NativeTypes } from 'react-dnd-html5-backend';
import { DropTarget } from 'react-dnd';
class SimpleDropTarget extends Component {
render() {
const { connectDropTarget } = this.props;
return connectDropTarget(this.props.children);
}
}
function collect(connect, monitor) {
return {
// Call this function inside render()
// to let React DnD handle the drag events:
connectDropTarget: connect.dropTarget(),
// You can ask the monitor about the current drag state:
isOver: monitor.isOver(),
isOverCurrent: monitor.isOver({ shallow: true }),
canDrop: monitor.canDrop(),
itemType: monitor.getItemType()
};
}
const spec = {
drop(props, monitor, component) {
if (monitor.didDrop()) {
// If you want, you can check whether some nested
// target already handled drop
return;
}
const item = monitor.getItem();
return { item };
}
};
export default DropTarget(NativeTypes.TEXT, spec, collect)(SimpleDropTarget);

22
newIDE/app/yarn.lock
View File

@@ -2235,18 +2235,12 @@ debug@2.2.0, debug@~2.2.0:
dependencies:
ms "0.7.1"
debug@2.6.7, debug@^2.2.0, debug@^2.4.5, debug@^2.6.0, debug@^2.6.3, debug@^2.6.6:
debug@2.6.7, debug@^2.1.1, debug@^2.2.0, debug@^2.4.5, debug@^2.6.0, debug@^2.6.3, debug@^2.6.6:
version "2.6.7"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.7.tgz#92bad1f6d05bbb6bba22cca88bcd0ec894c2861e"
dependencies:
ms "2.0.0"
debug@^2.1.1:
version "2.6.1"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.1.tgz#79855090ba2c4e3115cc7d8769491d58f0491351"
dependencies:
ms "0.7.2"
decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
version "1.2.0"
resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -4724,10 +4718,6 @@ ms@0.7.1:
version "0.7.1"
resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
ms@0.7.2:
version "0.7.2"
resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
ms@2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -5771,13 +5761,13 @@ react-dev-utils@^2.0.1:
strip-ansi "3.0.1"
text-table "0.2.0"
react-dnd-html5-backend@^2.1.2:
react-dnd-html5-backend@2.3.0, react-dnd-html5-backend@^2.1.2:
version "2.3.0"
resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-2.3.0.tgz#a45ce593f5c6944aa01114b368117c56c954804e"
dependencies:
lodash "^4.2.0"
react-dnd@^2.1.4:
react-dnd@2.3.0, react-dnd@^2.1.4:
version "2.3.0"
resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-2.3.0.tgz#aede61c06b968554dcf2a2445657cdbb3100be49"
dependencies:
@@ -5871,9 +5861,9 @@ react-modal@^1.7.6:
lodash.assign "^4.2.0"
prop-types "^15.5.7"
react-mosaic-component@^0.3.4:
version "0.3.4"
resolved "https://registry.yarnpkg.com/react-mosaic-component/-/react-mosaic-component-0.3.4.tgz#64a50d6ffa76c44c70e4237ff7cb72ef561ab792"
react-mosaic-component@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/react-mosaic-component/-/react-mosaic-component-0.4.0.tgz#19819c6c0aac27a961eeff585ce3cecf9c12b5b7"
dependencies:
classnames "^2.2.5"
immutability-helper "^2.0.0"