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