Commit aa5e8829 authored by Tamas Kecskes's avatar Tamas Kecskes
Browse files

Containment Canvas is building up and draws.

parent bc7bd2c4
......@@ -4,6 +4,12 @@ import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import Typography from '@material-ui/core/Typography';
import {DragDropContext} from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import reducers from '../src/utils/reducers';
import DemoProjectSeedCards from '../src/components/ProjectSeedCards/demo';
import DemoAttributeEditor from '../src/components/AttributeEditor/demo';
import DemoConfirmDialog from '../src/components/ConfirmDialog/demo';
......@@ -11,7 +17,13 @@ import DemoUserProfileNavigator from '../src/components/UserProfileNavigator/dem
import DemoModalSpinner from '../src/components/ModalSpinner/demo';
import DemoContainmentCanvas from '../src/components/ContainmentCanvas/demo';
export default class demoApp extends Component {
/* eslint-disable */
const store = createStore(reducers, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
/* eslint-enable */
class demoApp extends Component {
componentDidMount() {
window.onGMEInit = () => {
window.gmeClient = new window.GME.classes.Client(window.GME.gmeConfig);
......@@ -40,26 +52,31 @@ export default class demoApp extends Component {
component: <DemoModalSpinner/>,
title: 'ModalSpinner',
},
// {
// component: <DemoContainmentCanvas/>,
// title: 'ContainmentCanvas',
// },
{
component: <DemoContainmentCanvas/>,
title: 'ContainmentCanvas',
},
];
return (
<div>
{DEMOS.map((info) => {
return (
<ExpansionPanel defaultExpanded key={info.title}>
<ExpansionPanelSummary>
<Typography variant="headline" color="textSecondary">{info.title}</Typography>
</ExpansionPanelSummary>
<div style={{padding: 20}}>
{info.component}
</div>
</ExpansionPanel>
)
})}
</div>);
<Provider store={store}>
<div>
{DEMOS.map((info) => {
return (
<ExpansionPanel defaultExpanded key={info.title}>
<ExpansionPanelSummary>
<Typography variant="headline" color="textSecondary">{info.title}</Typography>
</ExpansionPanelSummary>
<div style={{padding: 20}}>
{info.component}
</div>
</ExpansionPanel>
)
})}
</div>
</Provider>);
};
};
\ No newline at end of file
};
export default DragDropContext(HTML5Backend)(demoApp);
\ No newline at end of file
......@@ -210,6 +210,11 @@
switch (regName) {
case 'position':
return {y: (Math.trunc(pos / 10)) * 40, x: (pos % 10) * 100};
case 'SVGIcon':
case 'SVGBbox':
case 'SVGPorts':
case 'SVGAttributes':
return undefined;
default:
return 'RegValue_' + cnt;
}
......
......@@ -3884,6 +3884,15 @@
"integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE=",
"dev": true
},
"immutability-helper": {
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/immutability-helper/-/immutability-helper-2.8.1.tgz",
"integrity": "sha512-8AVB5EUpRBUdXqfe4cFsFECsOIZ9hX/Arl8B8S9/tmwpYv3UWvOsXUPOjkuZIMaVxfSWkxCzkng1rjmEoSWrxQ==",
"dev": true,
"requires": {
"invariant": "^2.2.0"
}
},
"import-local": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz",
......
import React from 'react';
import PropTypes from 'prop-types';
import {DropTarget} from 'react-dnd';
import {connect} from 'react-redux';
import SingleConnectedNode from './SingleConnectedNode';
import DRAG_TYPES from '../../utils/dragTypes';
......@@ -218,11 +219,11 @@ class ContainmentCanvas extends SingleConnectedNode {
onMouseMove={this.onMouseMove}
>
<BasicConnectingComponent connectionManager={this.cm}/>
{childrenItems.length > 0 ? childrenItems : ContainmentCanvasInfoCard()}
{childrenItems.length > 0 ? childrenItems : null}
</div>);
return connectDropTarget(content);
}
}
export default (DropTarget(DRAG_TYPES.GME_NODE, canvasTarget, collect)(ContainmentCanvas));
export default DropTarget(DRAG_TYPES.GME_NODE, canvasTarget, collect)(ContainmentCanvas);
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {DragSource} from 'react-dnd';
import {connect} from 'react-redux';
import {Samy} from 'react-samy-svg';
import IconButton from '@material-ui/core/IconButton';
......@@ -13,7 +13,7 @@ import DRAG_TYPES from '../../utils/dragTypes';
import ContainmentCanvasItemPort from './ContainmentCanvasItemPort';
import Territory from '../Territory/Territory';
import BasicConnection from './BasicConnection';
import {toggleRightDrawer, setActiveSelection} from './actions';
import {toggleRightDrawer, setActiveSelection} from '../../utils/actions';
import Z_LEVELS from '../../utils/zLevels';
const canvasItemSource = {
......@@ -325,15 +325,17 @@ class ContainmentCanvasItem extends Component {
territory[activeNode] = {children: 1};
}
let newSvg = {
base: nodeObj.getRegistry('SVGIcon') || defaultSVG,
bbox: nodeObj.getRegistry('SVGBbox') || {x: 0, y: 0, height: 100, width: 100},
ports: nodeObj.getRegistry('SVGPorts') || {},
attributes: nodeObj.getRegistry('SVGAttributes') || {},
//TODO probably would be better to move towards ejs
};
this.setState({
position: nodeObj.getRegistry('position'),
svg: {
base: childNode.getRegistry('SVGIcon') || defaultSVG,
bbox: childNode.getRegistry('SVGBbox') || {x: 0, y: 0, height: 100, width: 100},
ports: childNode.getRegistry('SVGPorts') || {},
attributes: childNode.getRegistry('SVGAttributes') || {},
//TODO probably would be better to move towards ejs
},
svg: newSvg,
isConnection,
color,
endPoints: newEndpoints,
......
......@@ -10,7 +10,7 @@ export default class DemoContainmentCanvas extends Component {
render() {
return (
<div style={{width: '90%'}}>
<ContainmentCanvas gmeClient={this.gmeClient} scrollPos={{x: 0, y: 0}} activeNode={''}/>
<ContainmentCanvas gmeClient={this.gmeClient} scrollPos={{x: 0, y: 0}} activeNode={''} isOver={false} scale={1}/>
</div>
)
}
......
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,
});
Supports Markdown
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