Containment Canvas is building up and draws.

demo/demoApp.jsx

@@ -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

demo/static/gme-dist/webgme.classes.build.js

@@ -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;
                 }

package-lock.json

@@ -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",

package.json

@@ -37,6 +37,7 @@
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
     "babel-loader": "^8.0.2",
+    "immutability-helper": "^2.8.1",
     "prop-types": "^15.6.2",
     "react": "^16.5.2",
     "react-dnd": "^2.5.4",

src/components/ContainmentCanvas/ContainmentCanvas.jsx

 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);

src/components/ContainmentCanvas/ContainmentCanvasItem.jsx

 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,

src/components/ContainmentCanvas/demo.jsx

@@ -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>
         )
     }

src/utils/actions.jsx

+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,
+});

src/utils/reducers.jsx

+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,
+});
+