Skip to content

GitLab

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

Add functional demo for GraphEditor and comment out overflowing comps

parent 45b2c41b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2081 additions and 46 deletions
demo/demoApp.jsx
View file @ e0f7d8ae
......@@ -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>
......
src/components/GraphEditor/DEMO_DATA.json 0 → 100644
View file @ e0f7d8ae
This diff is collapsed.
src/components/GraphEditor/GraphEditor.jsx
View file @ e0f7d8ae
......@@ -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">
......
src/components/GraphEditor/ReactCytoscape.jsx
View file @ e0f7d8ae
......@@ -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
......
src/components/GraphEditor/demo.jsx
View file @ e0f7d8ae
/* 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