Commit 9e386f7f authored by Tamas Kecskes's avatar Tamas Kecskes
Browse files

Using child element in ContainmentCanvas

parent f7538f47
......@@ -6,7 +6,6 @@ import Typography from '@material-ui/core/Typography';
import {DragDropContext} from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import reducers from '../src/utils/reducers';
import DemoProjectSeedCards from '../src/components/ProjectSeedCards/demo';
import DemoAttributeEditor from '../src/components/AttributeEditor/demo';
......
export {default} from './BasicConnection';
\ No newline at end of file
......@@ -30,8 +30,10 @@ function getChildrenNames(gmeClient, nodeId) {
const canvasTarget = {
drop(props, monitor, canvas) {
console.log('dropping...');
const dragItem = monitor.getItem();
if (dragItem.move) {
console.log('dropping...move');
const offset = monitor.getDifferenceFromInitialOffset();
const node = props.gmeClient.getNode(dragItem.gmeId);
const position = node.getRegistry('position');
......@@ -44,6 +46,7 @@ const canvasTarget = {
props.gmeClient.setRegistry(dragItem.gmeId, 'position', position);
} else if (dragItem.create) {
console.log('dropping...create');
const dragOffset = monitor.getClientOffset();
const metaNode = props.gmeClient.getNode(dragItem.gmeId);
const position = {
......@@ -130,6 +133,14 @@ class ContainmentCanvas extends SingleConnectedNode {
super(props);
this.cm = new ConnectionManager();
this.em = new BasicEventManager();
this.item = React.createElement(SVGRegistryBasedCanvasItem);
if (this.props.children !== undefined) {
if (this.props.children[0] !== undefined) {
this.item = this.props.children[0];
} else {
this.item = this.props.children;
}
}
}
populateChildren(nodeObj) {
......@@ -180,15 +191,17 @@ class ContainmentCanvas extends SingleConnectedNode {
const {connectDropTarget, activeNode, gmeClient} = this.props;
const {children, dragMode} = this.state;
const childrenItems = children.map(child => (<SVGRegistryBasedCanvasItem
key={child.id}
gmeClient={gmeClient}
activeNode={child.id}
contextNode={activeNode}
connectionManager={this.cm}
eventManager={this.em}
scale={1}
/>));
const childrenItems = children.map(child => {
return React.cloneElement(this.item, {
key: child.id,
gmeClient: gmeClient,
activeNode: child.id,
contextNode: activeNode,
connectionManager: this.cm,
eventManager: this.em,
scale: 1,
});
});
const content = (
<div
......@@ -212,7 +225,8 @@ class ContainmentCanvas extends SingleConnectedNode {
}}
role="presentation"
onClick={this.onMouseClick}
onKeyDown={() => {}}
onKeyDown={() => {
}}
onContextMenu={this.onMouseClick}
onMouseLeave={this.onMouseLeave}
onMouseMove={this.onMouseMove}
......@@ -225,4 +239,14 @@ class ContainmentCanvas extends SingleConnectedNode {
}
}
export default DropTarget(DRAG_TYPES.GME_NODE, canvasTarget, collect)(ContainmentCanvas);
export default DropTarget(DRAG_TYPES
.GME_NODE
,
canvasTarget
,
collect
)(
ContainmentCanvas
)
;
import {default} from './ContainmentCanvas';
\ No newline at end of file
export const setActiveNode = activeNode => ({
type: 'SET_ACTIVE_NODE',
activeNode,
});
export const setActiveSelection = activeSelection => ({
type: 'SET_ACTIVE_SELECTION',
activeSelection,
});
export const toggleLeftDrawer = (show) => {
if (show) {
return {
type: 'SHOW_LEFT_DRAWER',
};
}
return {
type: 'HIDE_LEFT_DRAWER',
};
};
export const toggleRightDrawer = (show) => {
if (show) {
return {
type: 'SHOW_RIGHT_DRAWER',
};
}
return {
type: 'HIDE_RIGHT_DRAWER',
};
};
export const setScale = scale => ({
type: 'SET_SCALE',
scale,
});
export const addPlotVariable = variable => ({
type: 'ADD_PLOT_VARIABLE',
variable,
});
export const removePlotVariable = variable => ({
type: 'REMOVE_PLOT_VARIABLE',
variable,
});
export const clearPlotVariables = () => ({
type: 'CLEAR_PLOT_VARIABLES',
});
export const setPlotNode = nodeId => ({
type: 'SET_PLOT_NODE',
nodeId,
});
export const setSimResData = simRes => ({
type: 'SET_SIM_RES_DATA',
simRes,
});
export const setResultNode = resultNode => ({
type: 'SET_RESULT_NODE',
resultNode,
});
export const toggleModelingView = (show) => {
if (show) {
return {
type: 'MODELING_VIEW',
};
}
return {
type: 'SIMULATION_VIEW',
};
};
export const setSystemWaiting = systemWaiting => ({
type: 'SET_SYSTEM_WAITING',
systemWaiting,
});
export const setCurrentUser = currentUser => ({
type: 'SET_CURRENT_USER',
currentUser,
});
export const setIdToDisplayName = userIdToDisplayName => ({
type: 'SET_ID_TO_DISPLAY_NAME_MAP',
userIdToDisplayName,
});
import {combineReducers} from 'redux';
import update from 'immutability-helper';
const activeNode = (state = null, action) => {
if (action.type === 'SET_ACTIVE_NODE') {
return action.activeNode;
}
return state;
};
const activeSelection = (state = [], action) => {
if (action.type === 'SET_ACTIVE_SELECTION') {
return action.activeSelection;
}
return state;
};
const leftDrawer = (state = true, action) => {
if (action.type === 'SHOW_LEFT_DRAWER') {
return true;
} else if (action.type === 'HIDE_LEFT_DRAWER') {
return false;
}
return state;
};
const rightDrawer = (state = false, action) => {
if (action.type === 'SHOW_RIGHT_DRAWER') {
return true;
} else if (action.type === 'HIDE_RIGHT_DRAWER') {
return false;
}
return state;
};
const scale = (state = 0.6, action) => {
if (action.type === 'SET_SCALE') {
return action.scale;
}
return state;
};
const modelingView = (state = true, action) => {
if (action.type === 'MODELING_VIEW') {
return true;
} else if (action.type === 'SIMULATION_VIEW') {
return false;
}
return state;
};
const systemWaiting = (state = false, action) => {
if (action.type === 'SET_SYSTEM_WAITING') {
return action.systemWaiting;
}
return state;
};
const plotData = (state = {nodeId: null, variables: [], simRes: null}, action) => {
switch (action.type) {
case 'ADD_PLOT_VARIABLE':
return update(state, {
variables: {$push: [action.variable]},
});
case 'REMOVE_PLOT_VARIABLE':
return update(state, {
variables: {$splice: [[state.variables.indexOf(action.variable), 1]]},
});
case 'CLEAR_PLOT_VARIABLES':
return update(state, {
variables: {$set: []},
});
case 'SET_PLOT_NODE':
return update(state, {
nodeId: {$set: action.nodeId},
});
case 'SET_SIM_RES_DATA':
return update(state, {
simRes: {$set: action.simRes},
});
default:
return state;
}
};
const resultNode = (state = null, action) => {
if (action.type === 'SET_RESULT_NODE') {
return action.resultNode;
}
return state;
};
const users = (state = {currentUser: null, idToDisplayName: {}}, action) => {
switch (action.type) {
case 'SET_CURRENT_USER':
return update(state, {
currentUser: {$set: action.currentUser},
});
case 'SET_ID_TO_DISPLAY_NAME_MAP':
return update(state, {
userIdToDisplayName: {$set: action.userIdToDisplayName},
});
default:
return state;
}
};
export default combineReducers({
activeNode,
activeSelection,
leftDrawer,
rightDrawer,
scale,
modelingView,
plotData,
resultNode,
systemWaiting,
users,
});
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment