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

Scraping off components from ContainmentCanvas

parent aa5e8829
......@@ -16,6 +16,7 @@ import DemoConfirmDialog from '../src/components/ConfirmDialog/demo';
import DemoUserProfileNavigator from '../src/components/UserProfileNavigator/demo';
import DemoModalSpinner from '../src/components/ModalSpinner/demo';
import DemoContainmentCanvas from '../src/components/ContainmentCanvas/demo';
import DemoSingleConnectedNode from '../src/components/SingleConnectedNode/demo';
/* eslint-disable */
const store = createStore(reducers, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
......@@ -52,9 +53,13 @@ class demoApp extends Component {
component: <DemoModalSpinner/>,
title: 'ModalSpinner',
},
// {
// component: <DemoContainmentCanvas/>,
// title: 'ContainmentCanvas',
// },
{
component: <DemoContainmentCanvas/>,
title: 'ContainmentCanvas',
component: <DemoSingleConnectedNode/>,
title: 'SingleConnectedNode',
},
];
......
import React from 'react';
import PropTypes from 'prop-types';
import {DropTarget} from 'react-dnd';
import {connect} from 'react-redux';
import SingleConnectedNode from './SingleConnectedNode';
import SingleConnectedNode from '../SingleConnectedNode/SingleConnectedNode';
import DRAG_TYPES from '../../utils/dragTypes';
import ContainmentCanvasItem from './ContainmentCanvasItem';
import SVGRegistryBasedCanvasItem from '../SVGRegistryBasedCanvasItem/SVGRegistryBasedCanvasItem';
import ConnectionManager from './ConnectionManager';
import BasicConnectingComponent from './BasicConnectingComponent';
import BasicEventManager from '../BasicEventManager/BasicEventManager';
import getIndexedName from '../../utils/getIndexedName';
import Z_LEVELS from '../../utils/zLevels';
import ContainmentCanvasInfoCard from './ContainmentCanvasInfoCard';
// TODO we only take loaded children into account
function getChildrenNames(gmeClient, nodeId) {
......
import React from 'react';
import {Link} from 'react-router-dom';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
const ContainmentCanvasInfoCard = () => (
<Card style={{
position: 'absolute',
maxWidth: 600,
left: 'calc(50% - 300px)',
top: '20%',
}}
>
<CardContent>
<Typography style={{marginBottom: 20}} variant="headline" component="h2">
This is your canvas
</Typography>
<Typography component="p">
Use the left menu to add components to your system. Locate which components you
need and drag and drop them onto this Canvas. Based on their interfaces you can wire
components together by clicking the port icons. <br/><br/>
To set the parameter simply double-click it and the parameter editor will show up.
From there you can click the inlined icon and it will take you to the official
Modelica® Standard Library documentation.
</Typography>
</CardContent>
<CardActions>
<Button
size="small"
color="primary"
component={Link}
to="http://doc.modelica.org/om/Modelica.html"
target="_blank"
>
Learn More About Modelica
</Button>
</CardActions>
</Card>
);
export default ContainmentCanvasInfoCard;
......@@ -10,9 +10,9 @@ import DeleteIcon from '@material-ui/icons/Delete';
import Edit from '@material-ui/icons/Edit';
import DRAG_TYPES from '../../utils/dragTypes';
import ContainmentCanvasItemPort from './ContainmentCanvasItemPort';
import SVGRegistryBasedCanvasItemPort from '../SVGRegistryBasedCanvasItem/SVGRegistryBasedCanvasItemPort';
import Territory from '../Territory/Territory';
import BasicConnection from './BasicConnection';
import BasicConnection from '../BasicConnection/BasicConnection';
import {toggleRightDrawer, setActiveSelection} from '../../utils/actions';
import Z_LEVELS from '../../utils/zLevels';
......@@ -421,7 +421,7 @@ class ContainmentCanvasItem extends Component {
const keys = Object.keys(ports);
for (i = 0; i < keys.length; i += 1) {
if (childrenName2Id[keys[i]]) {
portComponents.push((<ContainmentCanvasItemPort
portComponents.push((<SVGRegistryBasedCanvasItemPort
key={keys[i]}
gmeClient={gmeClient}
connectionManager={connectionManager}
......
import React, {Component} from 'react';
import ContainmentCanvas from './ContainmentCanvas';
import ContainmentCanvasItem from "./ContainmentCanvasItem";
export default class DemoContainmentCanvas extends Component {
constructor(props) {
......@@ -10,7 +11,9 @@ export default class DemoContainmentCanvas extends Component {
render() {
return (
<div style={{width: '90%'}}>
<ContainmentCanvas gmeClient={this.gmeClient} scrollPos={{x: 0, y: 0}} activeNode={''} isOver={false} scale={1}/>
<ContainmentCanvas gmeClient={this.gmeClient} scrollPos={{x: 0, y: 0}} activeNode={''} isOver={false} scale={1}>
<ContainmentCanvasItem/>
</ContainmentCanvas>
</div>
)
}
......
......@@ -2,7 +2,7 @@ import React, {Component} from 'react';
import PropTypes from 'prop-types';
import ZLEVELS from '../../utils/zLevels';
export default class ContainmentCanvasItemPort extends Component {
export default class SVGRegistryBasedCanvasItemPort extends Component {
static propTypes = {
gmeClient: PropTypes.object.isRequired,
connectionManager: PropTypes.object.isRequired,
......
import React, {Component}from 'react';
import TextField from '@material-ui/core/TextField';
import SingleConnectedNode from './SingleConnectedNode';
class ExampleSingleConnectedNode extends SingleConnectedNode {
state = {
textContent: '',
}
onNodeLoad(nodeObj) {
this.setState({textContent: 'onNodeLoad [' + nodeObj.getId() + ']'});
}
onNodeUpdate(nodeObj) {
this.setState({textContent: 'onNodeUpdate [' + nodeObj.getId() + ']'});
}
onNodeUnload(nodeId) {
this.setState({textContent: 'onNodeUnload [' + nodeId + ']'});
}
onStateChanged() {
this.setState({textContent: 'onStateChanged [' + this.activeNode + ']'});
}
render() {
const {textContent} = this.state;
return (
<TextField disabled={true} value={textContent}/>
)
}
}
export default class DemoSingleConnectedNode extends Component {
state = {
gmeClient: null,
activeNode: '',
};
constructor(props) {
super(props);
this.state.gmeClient = new window.GME.classes.Client(window.GME.gmeConfig);
}
render() {
const {gmeClient, activeNode} = this.state;
return (
<ExampleSingleConnectedNode gmeClient={gmeClient} activeNode={activeNode}/>
);
}
}
\ No newline at end of file
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