Commit e0f7d8ae authored by Patrik Meijer's avatar Patrik Meijer
Browse files

Add functional demo for GraphEditor and comment out overflowing comps

parent 45b2c41b
...@@ -50,25 +50,25 @@ class demoApp extends Component { ...@@ -50,25 +50,25 @@ class demoApp extends Component {
component: <DemoModalSpinner/>, component: <DemoModalSpinner/>,
title: 'ModalSpinner', title: 'ModalSpinner',
}, },
{ // {
component: <DemoBasicContainmentCanvas/>, // component: <DemoBasicContainmentCanvas/>,
title: 'BasicContainmentCanvas', // title: 'BasicContainmentCanvas',
height: 400, // height: 400,
}, // },
{ // {
component: <DemoContainmentCanvas/>, // component: <DemoContainmentCanvas/>,
title: 'ContainmentCanvas', // title: 'ContainmentCanvas',
height: 400, // height: 400,
}, // },
{ // {
component: <DemoSingleConnectedNode/>, // component: <DemoSingleConnectedNode/>,
title: 'SingleConnectedNode', // title: 'SingleConnectedNode',
}, // },
{ // {
component: <DemoInfoCard/>, // component: <DemoInfoCard/>,
title: 'InfoCard', // title: 'InfoCard',
height: 200, // height: 200,
}, // },
{ {
component: <DemoPartBrowser/>, component: <DemoPartBrowser/>,
title: 'PartBrowser', title: 'PartBrowser',
...@@ -76,13 +76,14 @@ class demoApp extends Component { ...@@ -76,13 +76,14 @@ class demoApp extends Component {
{ {
component: <DemoGraphEditor/>, component: <DemoGraphEditor/>,
title: 'GraphEditor', title: 'GraphEditor',
height: 800,
}, },
]; ];
return ( return (
<div> <div>
{DEMOS.map(info => ( {DEMOS.map(info => (
<ExpansionPanel defaultExpanded key={info.title}> <ExpansionPanel defaultExpanded={false} key={info.title}>
<ExpansionPanelSummary> <ExpansionPanelSummary>
<Typography variant="headline" color="textSecondary">{info.title}</Typography> <Typography variant="headline" color="textSecondary">{info.title}</Typography>
</ExpansionPanelSummary> </ExpansionPanelSummary>
......
This diff is collapsed.
...@@ -16,7 +16,7 @@ import LockIcon from '@material-ui/icons/Lock'; ...@@ -16,7 +16,7 @@ import LockIcon from '@material-ui/icons/Lock';
import TransformIcon from '@material-ui/icons/Transform'; import TransformIcon from '@material-ui/icons/Transform';
import FullscreenIcon from '@material-ui/icons/Fullscreen'; import FullscreenIcon from '@material-ui/icons/Fullscreen';
import FilterIcon from '@material-ui/icons/FilterList'; import FilterIcon from '@material-ui/icons/FilterList';
import ViewModuleIcon from '@material-ui/icons/ViewModule'; import ShareIcon from '@material-ui/icons/Share';
import ReactCytoscape from './ReactCytoscape'; import ReactCytoscape from './ReactCytoscape';
import SimpleActionMenu from '../SimpleActionMenu'; import SimpleActionMenu from '../SimpleActionMenu';
...@@ -633,7 +633,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`, ...@@ -633,7 +633,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
}} }}
> >
<div style={{ <div style={{
position: 'absolute', position: 'relative',
top: 5, top: 5,
left: 10, left: 10,
zIndex: 4, zIndex: 4,
...@@ -670,7 +670,14 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`, ...@@ -670,7 +670,14 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
layout.run(); layout.run();
}} }}
> >
<ViewModuleIcon/> <ShareIcon style={{
'-webkit-transform': 'rotate(90deg)',
'-moz-transform': 'rotate(90deg)',
'-ms-transform': 'rotate(90deg)',
'-o-transform': 'rotate(90deg)',
transform: 'rotate(90deg)',
}}
/>
</Button> </Button>
</Tooltip> </Tooltip>
<Tooltip id="tooltip-fit-to-screen" title="Fit to screen"> <Tooltip id="tooltip-fit-to-screen" title="Fit to screen">
......
...@@ -84,8 +84,7 @@ export default class ReactCytoscape extends Component { ...@@ -84,8 +84,7 @@ export default class ReactCytoscape extends Component {
this.cy.resize(); this.cy.resize();
} }
if (elements.nodes && elements.nodes.length === 0 && if (elements.nodes && elements.nodes.length === 0 && nextProps.elements.nodes.length > 0) {
nextProps.elements.nodes.length > 0) {
// Initial elements received -> fit graph to canvas. // Initial elements received -> fit graph to canvas.
this.cy.fit(); this.cy.fit();
} }
...@@ -102,6 +101,8 @@ export default class ReactCytoscape extends Component { ...@@ -102,6 +101,8 @@ export default class ReactCytoscape extends Component {
height: '100%', height: '100%',
width: '100%', width: '100%',
display: 'block', display: 'block',
position: 'relative',
top: -40, // Magic: this is to float under the action buttons
}, ...this.props.style); }, ...this.props.style);
return ( return (
<div <div
......
/* globals window */ /* globals window */
import React, {Component} from 'react'; import React, {Component} from 'react';
import GraphEditor from './index'; import GraphEditor from './index';
import SubTreeWatcher from '../SubTreeWatcher'; // import SubTreeWatcher from '../SubTreeWatcher';
import DEMO_DATA from './DEMO_DATA.json';
const EXTRA_OPTIONS = {
};
export default class DemoGraphEditor extends Component { export default class DemoGraphEditor extends Component {
...@@ -16,22 +13,32 @@ export default class DemoGraphEditor extends Component { ...@@ -16,22 +13,32 @@ export default class DemoGraphEditor extends Component {
render() { render() {
return ( return (
<div style={{width: '90%'}}> <GraphEditor
<SubTreeWatcher gmeClient={this.gmeClient} activeNode="/2/3/4" options={EXTRA_OPTIONS}> gmeClient={this.gmeClient}
<GraphEditor activeSelection={[]}
gmeClient={this.gmeClient} activeNode={DEMO_DATA.activeNode}// This would passed in from SubTreeWatcher
activeSelection={[]} nodes={DEMO_DATA.nodes} // This would passed in from SubTreeWatcher
// activeNode is passed on from SubTreeWatcher readOnly={false}
// nodes is passed on from SubTreeWatcher isActivePanel
readOnly={false} setActiveNode={nodeId => console.log('setActiveNode:', nodeId)}
isActivePanel setActiveSelection={nodeIds => console.log('setActiveSelection:', nodeIds)}
setActiveNode={nodeId => console.log('setActiveNode:', nodeId)} // width={800}
setActiveSelection={nodeIds => console.log('setActiveSelection:', nodeIds)} // heigth={600}
width={800} // FIXME: Having to pass these are not that nice.. />
height={600} // Example showing how the SubTreeWatcher is used as parent for the graph-editor
/> //
</SubTreeWatcher> // <SubTreeWatcher gmeClient={this.gmeClient} activeNode="/2/3/4">
</div> // <GraphEditor
// gmeClient={this.gmeClient}
// activeSelection={[]}
// // activeNode is passed on from SubTreeWatcher
// // nodes is passed on from SubTreeWatcher
// readOnly={false}
// isActivePanel
// setActiveNode={nodeId => console.log('setActiveNode:', nodeId)}
// setActiveSelection={nodeIds => console.log('setActiveSelection:', nodeIds)}
// />
// </SubTreeWatcher>
); );
} }
} }
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