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
44acf64f
Commit
44acf64f
authored
Feb 14, 2019
by
Patrik Meijer
Browse files
Extract out styles and bug fixes
parent
286c48d2
Changes
3
Hide whitespace changes
Inline
Side-by-side
src/components/GraphEditor/DefaultStyles.jsx
0 → 100644
View file @
44acf64f
/**
* These are the styles for cytoscape defined by the GraphEditor.
* You cannot overwrite the array, only append additional rules.
*/
const
DEFAULT_STYLES
=
[
{
selector
:
'
node.gme-node[hasChildren]
'
,
style
:
{
content
:
'
data(label)
'
,
// http://js.cytoscape.org/#style/background-image
'
background-width
'
:
'
20%
'
,
'
background-height
'
:
'
20%
'
,
},
},
{
selector
:
'
node.gme-node[^hasChildren]
'
,
style
:
{
content
:
'
data(label)
'
,
// http://js.cytoscape.org/#style/background-image
'
background-width
'
:
'
80%
'
,
'
background-height
'
:
'
80%
'
,
},
},
{
selector
:
'
node.aux-node
'
,
css
:
{
width
:
6
,
height
:
6
,
},
},
{
selector
:
'
edge.pointer
'
,
style
:
{
content
:
'
data(label)
'
,
'
line-color
'
:
'
rgb(0,0,255)
'
,
'
curve-style
'
:
'
bezier
'
,
'
target-arrow-color
'
:
'
rgb(0,0,255)
'
,
'
target-arrow-shape
'
:
'
vee
'
,
},
},
{
selector
:
'
edge.set-member
'
,
style
:
{
content
:
'
data(label)
'
,
'
curve-style
'
:
'
bezier
'
,
'
line-color
'
:
'
rgb(255,0,255)
'
,
'
target-arrow-color
'
:
'
rgb(255,0,255)
'
,
'
target-arrow-shape
'
:
'
vee
'
,
},
},
{
selector
:
'
edge.base-pointer
'
,
style
:
{
width
:
1
,
'
line-color
'
:
'
rgb(255,0,0)
'
,
'
curve-style
'
:
'
bezier
'
,
'
target-arrow-fill
'
:
'
hollow
'
,
'
target-arrow-color
'
:
'
rgb(255,0,0)
'
,
'
target-arrow-shape
'
:
'
triangle
'
,
},
},
{
selector
:
'
node[hasChildren].in-active-selection
'
,
style
:
{
// 'border-width': '2px',
'
border-style
'
:
'
solid
'
,
'
border-opacity
'
:
'
1
'
,
'
border-color
'
:
'
rgba(82, 168, 236, 0.6)
'
,
},
},
{
selector
:
'
node[^hasChildren].in-active-selection
'
,
style
:
{
'
background-color
'
:
'
rgba(82, 168, 236, 0.6)
'
,
},
},
{
selector
:
'
node.valid-pointer-target
'
,
style
:
{
'
background-color
'
:
'
rgb(66, 220, 244)
'
,
},
},
{
selector
:
'
edge.in-active-selection
'
,
style
:
{
width
:
5
,
'
line-color
'
:
'
rgba(82, 168, 236, 0.6)
'
,
},
},
];
export
default
DEFAULT_STYLES
;
src/components/GraphEditor/GraphEditor.jsx
View file @
44acf64f
...
...
@@ -16,102 +16,18 @@ 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
ReactCytoscape
from
'
./ReactCytoscape
'
;
import
ContextMenu
from
'
./ContextMenu
'
;
import
FilterSelector
from
'
./FilterSelector
'
;
import
DEFAULT_STYLES
from
'
./DefaultStyles
'
;
const
CONSTANTS
=
{
CYTOSCAPE_POS_REG_KEY
:
'
cytoscapePosition
'
,
};
const
DEFAULT_STYLES
=
[
{
selector
:
'
node.gme-node[hasChildren]
'
,
style
:
{
content
:
'
data(label)
'
,
// http://js.cytoscape.org/#style/background-image
'
background-width
'
:
'
20%
'
,
'
background-height
'
:
'
20%
'
,
},
},
{
selector
:
'
node.gme-node[^hasChildren]
'
,
style
:
{
content
:
'
data(label)
'
,
// http://js.cytoscape.org/#style/background-image
'
background-width
'
:
'
80%
'
,
'
background-height
'
:
'
80%
'
,
},
},
{
selector
:
'
node.aux-node
'
,
css
:
{
width
:
6
,
height
:
6
,
},
},
{
selector
:
'
edge.pointer
'
,
style
:
{
content
:
'
data(label)
'
,
'
line-color
'
:
'
rgb(0,0,255)
'
,
'
curve-style
'
:
'
bezier
'
,
'
target-arrow-color
'
:
'
rgb(0,0,255)
'
,
'
target-arrow-shape
'
:
'
vee
'
,
},
},
{
selector
:
'
edge.set-member
'
,
style
:
{
content
:
'
data(label)
'
,
'
curve-style
'
:
'
bezier
'
,
'
line-color
'
:
'
rgb(255,0,255)
'
,
'
target-arrow-color
'
:
'
rgb(255,0,255)
'
,
'
target-arrow-shape
'
:
'
vee
'
,
},
},
{
selector
:
'
edge.base-pointer
'
,
style
:
{
width
:
1
,
'
line-color
'
:
'
rgb(255,0,0)
'
,
'
curve-style
'
:
'
bezier
'
,
'
target-arrow-fill
'
:
'
hollow
'
,
'
target-arrow-color
'
:
'
rgb(255,0,0)
'
,
'
target-arrow-shape
'
:
'
triangle
'
,
},
},
{
selector
:
'
node[hasChildren].in-active-selection
'
,
style
:
{
// 'border-width': '2px',
'
border-style
'
:
'
solid
'
,
'
border-opacity
'
:
'
1
'
,
'
border-color
'
:
'
rgba(82, 168, 236, 0.6)
'
,
},
},
{
selector
:
'
node[^hasChildren].in-active-selection
'
,
style
:
{
'
background-color
'
:
'
rgba(82, 168, 236, 0.6)
'
,
},
},
{
selector
:
'
node.valid-pointer-target
'
,
style
:
{
'
background-color
'
:
'
rgb(0, 0, 255)
'
,
},
},
// {
// selector: 'edge.in-active-selection',
// style: {
// width: 5,
// 'line-color': 'rgba(82, 168, 236, 0.6)',
// },
// },
];
const
coseBilkentOptions
=
{
name
:
'
cose-bilkent
'
,
// Called on `layoutready`
...
...
@@ -177,6 +93,7 @@ export default class GraphEditor extends Component {
setActiveSelection
:
PropTypes
.
func
.
isRequired
,
setActiveNode
:
PropTypes
.
func
.
isRequired
,
validFilters
:
PropTypes
.
object
,
extraStyles
:
PropTypes
.
arrayOf
(
PropTypes
.
object
),
};
static
defaultProps
=
{
...
...
@@ -190,10 +107,12 @@ export default class GraphEditor extends Component {
sets
:
[],
nodes
:
[],
},
extraStyles
:
[],
};
constructor
(
props
)
{
super
(
props
);
this
.
styles
=
DEFAULT_STYLES
.
concat
(
this
.
props
.
extraStyles
);
this
.
reposition
=
{};
this
.
cyId
=
`cy-
${
Date
.
now
()}
`
;
}
...
...
@@ -326,6 +245,10 @@ export default class GraphEditor extends Component {
classes
:
`
${
activeSelection
.
includes
(
id
)
?
'
in-active-selection
'
:
''
}
gme-connection`
,
};
if
(
createPointer
&&
createPointer
.
target
===
id
)
{
edgeData
.
classes
+=
'
valid-pointer-target
'
;
}
if
(
hasEdgeTargets
(
childData
.
pointers
.
src
,
childData
.
pointers
.
dst
))
{
result
.
hyperEdges
.
push
(
edgeData
);
hyperTargets
[
childData
.
pointers
.
src
]
=
true
;
...
...
@@ -366,10 +289,10 @@ export default class GraphEditor extends Component {
},
});
}
}
if
(
createPointer
&&
createPointer
.
target
===
id
)
{
cytoData
.
classes
+=
'
valid-pointer-target
'
;
if
(
createPointer
&&
createPointer
.
target
===
id
)
{
cytoData
.
classes
+=
'
valid-pointer-target
'
;
}
}
Object
.
keys
(
childData
.
sets
)
...
...
@@ -396,10 +319,6 @@ export default class GraphEditor extends Component {
?
'
in-active-selection
'
:
''
}
`
,
};
if
(
setMemberData
.
label
!==
null
)
{
edgeData
.
data
.
label
=
setMemberData
.
label
;
}
if
(
hasEdgeTargets
(
id
,
setMemberData
.
id
))
{
result
.
hyperEdges
.
push
(
edgeData
);
hyperTargets
[
id
]
=
true
;
...
...
@@ -506,6 +425,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
attachCytoscapeHandlers
()
{
this
.
cy
.
on
(
'
position
'
,
({
target
})
=>
{
const
{
nodes
}
=
this
.
props
;
debugger
;
const
childNodeDesc
=
nodes
[
target
.
id
()];
const
floorPos
=
{
x
:
Math
.
floor
(
target
.
position
().
x
),
...
...
@@ -572,7 +492,9 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
this
.
cy
.
on
(
'
mouseover
'
,
'
node
'
,
(
e
)
=>
{
const
{
createPointer
}
=
this
.
state
;
const
{
gmeClient
}
=
this
.
props
;
if
(
createPointer
&&
typeof
e
.
target
.
id
===
'
function
'
)
{
if
(
createPointer
&&
typeof
e
.
target
.
id
===
'
function
'
&&
e
.
target
.
hasClass
(
'
aux-node
'
)
===
false
)
{
const
gmeNode
=
gmeClient
.
getNode
(
e
.
target
.
id
());
if
(
gmeNode
&&
gmeNode
.
isValidTargetOf
(
createPointer
.
nodeId
,
createPointer
.
ptrName
)
&&
createPointer
.
target
!==
e
.
target
.
id
())
{
...
...
@@ -632,7 +554,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
}
}
>
{
activeNodeName
}
<
Tooltip
id
=
"tooltip-auto-layout"
title
=
"
Run a
uto
-
layout
. Warning this will move everything!
"
>
<
Tooltip
id
=
"tooltip-auto-layout"
title
=
"
A
uto
layout
graph
"
>
<
Button
onClick
=
{
()
=>
{
const
layout
=
this
.
cy
.
layout
(
coseBilkentOptions
);
...
...
@@ -645,7 +567,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
<
TransformIcon
/>
</
Button
>
</
Tooltip
>
<
Tooltip
id
=
"tooltip-dagre-layout"
title
=
"Run Dagre-layout
. Warning this will move everything!
"
>
<
Tooltip
id
=
"tooltip-dagre-layout"
title
=
"Run Dagre-layout"
>
<
Button
onClick
=
{
()
=>
{
const
layout
=
this
.
cy
.
layout
({
name
:
'
dagre
'
});
...
...
@@ -655,7 +577,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
layout
.
run
();
}
}
>
<
Transform
Icon
/>
<
ViewModule
Icon
/>
</
Button
>
</
Tooltip
>
<
Tooltip
id
=
"tooltip-fit-to-screen"
title
=
"Fit to screen"
>
...
...
@@ -692,7 +614,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
}
}
cytoscapeOptions
=
{
{
wheelSensitivity
:
0.1
}
}
layout
=
{
{
name
:
'
preset
'
/* preset dagre */
}
}
style
=
{
DEFAULT_STYLES
.
concat
(
cytoData
.
style
)
}
style
=
{
this
.
styles
.
concat
(
cytoData
.
style
)
}
/>
{
showNodeMenu
&&
showNodeMenu
.
id
===
activeSelection
[
0
]
?
(
...
...
src/components/GraphEditor/ReactCytoscape.jsx
View file @
44acf64f
...
...
@@ -34,46 +34,7 @@ export default class ReactCytoscape extends Component {
containerID
:
'
cy
'
,
layout
:
{
name
:
'
cola
'
},
cytoscapeOptions
:
{},
style
:
[
// {
// selector: 'node.gme-node',
// css: {
// content: function elemRender(ele) {
// return ele.data('label') || ele.data('id');
// },
// 'text-valign': 'center',
// 'text-halign': 'center',
// },
// },
// {
// selector: '$node > node',
// css: {
// 'padding-top': '10px',
// 'padding-left': '10px',
// 'padding-bottom': '10px',
// 'padding-right': '10px',
// 'text-valign': 'top',
// 'text-halign': 'center',
// 'background-color': '#bbb',
// },
// },
// {
// selector: ':selected',
// css: {
// 'background-color': 'black',
// 'line-color': 'black',
// 'target-arrow-color': 'black',
// 'source-arrow-color': 'black',
// },
// },
// {
// selector: 'node.aux-node',
// css: {
// width: '3px',
// height: '3px',
// },
// },
],
style
:
[],
};
componentDidMount
()
{
...
...
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