Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Patrik Meijer
react-components
Commits
e0f7d8ae
Commit
e0f7d8ae
authored
Mar 08, 2019
by
Patrik Meijer
Browse files
Add functional demo for GraphEditor and comment out overflowing comps
parent
45b2c41b
Changes
5
Expand all
Hide whitespace changes
Inline
Side-by-side
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.
Click to expand it.
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
ViewModul
eIcon
from
'
@material-ui/icons/
ViewModul
e
'
;
import
Shar
eIcon
from
'
@material-ui/icons/
Shar
e
'
;
import
ReactCytoscape
from
'
./ReactCytoscape
'
;
import
SimpleActionMenu
from
'
../SimpleActionMenu
'
;
...
...
@@ -633,7 +633,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
}
}
>
<
div
style
=
{
{
position
:
'
absolut
e
'
,
position
:
'
relativ
e
'
,
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>
);
}
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment