Add functional demo for GraphEditor and comment out overflowing comps (e0f7d8ae) · Commits · Patrik Meijer / react-components

demo/demoApp.jsx

+21 −20

Original line number	Diff line number	Diff line
		@@ -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

+2019 −0

File added.

Preview size limit exceeded, changes collapsed.

src/components/GraphEditor/GraphEditor.jsx

+10 −3

Original line number	Diff line number	Diff line
		@@ -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

+3 −2

Original line number	Diff line number	Diff line
		@@ -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

+28 −21

Original line number	Diff line number	Diff line
		/* 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
		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} // FIXME: Having to pass these are not that nice..
		height={600}
		// width={800}
		// heigth={600}
		/>
		</SubTreeWatcher>
		</div>
		// 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>
		);
		}
		}

Admin message