Commit 44acf64f authored by Patrik Meijer's avatar Patrik Meijer
Browse files

Extract out styles and bug fixes

parent 286c48d2
/**
* 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;
...@@ -16,102 +16,18 @@ import LockIcon from '@material-ui/icons/Lock'; ...@@ -16,102 +16,18 @@ import LockIcon from '@material-ui/icons/Lock';
import TransformIcon from '@material-ui/icons/Transform'; import TransformIcon from '@material-ui/icons/Transform';
import FullscreenIcon from '@material-ui/icons/Fullscreen'; import FullscreenIcon from '@material-ui/icons/Fullscreen';
import FilterIcon from '@material-ui/icons/FilterList'; import FilterIcon from '@material-ui/icons/FilterList';
import ViewModuleIcon from '@material-ui/icons/ViewModule';
import ReactCytoscape from './ReactCytoscape'; import ReactCytoscape from './ReactCytoscape';
import ContextMenu from './ContextMenu'; import ContextMenu from './ContextMenu';
import FilterSelector from './FilterSelector'; import FilterSelector from './FilterSelector';
import DEFAULT_STYLES from './DefaultStyles';
const CONSTANTS = { const CONSTANTS = {
CYTOSCAPE_POS_REG_KEY: 'cytoscapePosition', 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 = { const coseBilkentOptions = {
name: 'cose-bilkent', name: 'cose-bilkent',
// Called on `layoutready` // Called on `layoutready`
...@@ -177,6 +93,7 @@ export default class GraphEditor extends Component { ...@@ -177,6 +93,7 @@ export default class GraphEditor extends Component {
setActiveSelection: PropTypes.func.isRequired, setActiveSelection: PropTypes.func.isRequired,
setActiveNode: PropTypes.func.isRequired, setActiveNode: PropTypes.func.isRequired,
validFilters: PropTypes.object, validFilters: PropTypes.object,
extraStyles: PropTypes.arrayOf(PropTypes.object),
}; };
static defaultProps = { static defaultProps = {
...@@ -190,10 +107,12 @@ export default class GraphEditor extends Component { ...@@ -190,10 +107,12 @@ export default class GraphEditor extends Component {
sets: [], sets: [],
nodes: [], nodes: [],
}, },
extraStyles: [],
}; };
constructor(props) { constructor(props) {
super(props); super(props);
this.styles = DEFAULT_STYLES.concat(this.props.extraStyles);
this.reposition = {}; this.reposition = {};
this.cyId = `cy-${Date.now()}`; this.cyId = `cy-${Date.now()}`;
} }
...@@ -326,6 +245,10 @@ export default class GraphEditor extends Component { ...@@ -326,6 +245,10 @@ export default class GraphEditor extends Component {
classes: `${activeSelection.includes(id) ? 'in-active-selection ' : ''}gme-connection`, 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)) { if (hasEdgeTargets(childData.pointers.src, childData.pointers.dst)) {
result.hyperEdges.push(edgeData); result.hyperEdges.push(edgeData);
hyperTargets[childData.pointers.src] = true; hyperTargets[childData.pointers.src] = true;
...@@ -366,10 +289,10 @@ export default class GraphEditor extends Component { ...@@ -366,10 +289,10 @@ export default class GraphEditor extends Component {
}, },
}); });
} }
}
if (createPointer && createPointer.target === id) { if (createPointer && createPointer.target === id) {
cytoData.classes += ' valid-pointer-target'; cytoData.classes += ' valid-pointer-target';
}
} }
Object.keys(childData.sets) Object.keys(childData.sets)
...@@ -396,10 +319,6 @@ export default class GraphEditor extends Component { ...@@ -396,10 +319,6 @@ export default class GraphEditor extends Component {
? 'in-active-selection' : ''}`, ? 'in-active-selection' : ''}`,
}; };
if (setMemberData.label !== null) {
edgeData.data.label = setMemberData.label;
}
if (hasEdgeTargets(id, setMemberData.id)) { if (hasEdgeTargets(id, setMemberData.id)) {
result.hyperEdges.push(edgeData); result.hyperEdges.push(edgeData);
hyperTargets[id] = true; hyperTargets[id] = true;
...@@ -506,6 +425,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`, ...@@ -506,6 +425,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
attachCytoscapeHandlers() { attachCytoscapeHandlers() {
this.cy.on('position', ({target}) => { this.cy.on('position', ({target}) => {
const {nodes} = this.props; const {nodes} = this.props;
debugger;
const childNodeDesc = nodes[target.id()]; const childNodeDesc = nodes[target.id()];
const floorPos = { const floorPos = {
x: Math.floor(target.position().x), x: Math.floor(target.position().x),
...@@ -572,7 +492,9 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`, ...@@ -572,7 +492,9 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
this.cy.on('mouseover', 'node', (e) => { this.cy.on('mouseover', 'node', (e) => {
const {createPointer} = this.state; const {createPointer} = this.state;
const {gmeClient} = this.props; 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()); const gmeNode = gmeClient.getNode(e.target.id());
if (gmeNode && gmeNode.isValidTargetOf(createPointer.nodeId, createPointer.ptrName) if (gmeNode && gmeNode.isValidTargetOf(createPointer.nodeId, createPointer.ptrName)
&& createPointer.target !== e.target.id()) { && createPointer.target !== e.target.id()) {
...@@ -632,7 +554,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`, ...@@ -632,7 +554,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
}} }}
> >
{activeNodeName} {activeNodeName}
<Tooltip id="tooltip-auto-layout" title="Run auto-layout. Warning this will move everything!"> <Tooltip id="tooltip-auto-layout" title="Auto layout graph">
<Button <Button
onClick={() => { onClick={() => {
const layout = this.cy.layout(coseBilkentOptions); const layout = this.cy.layout(coseBilkentOptions);
...@@ -645,7 +567,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`, ...@@ -645,7 +567,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
<TransformIcon/> <TransformIcon/>
</Button> </Button>
</Tooltip> </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 <Button
onClick={() => { onClick={() => {
const layout = this.cy.layout({name: 'dagre'}); const layout = this.cy.layout({name: 'dagre'});
...@@ -655,7 +577,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`, ...@@ -655,7 +577,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
layout.run(); layout.run();
}} }}
> >
<TransformIcon/> <ViewModuleIcon/>
</Button> </Button>
</Tooltip> </Tooltip>
<Tooltip id="tooltip-fit-to-screen" title="Fit to screen"> <Tooltip id="tooltip-fit-to-screen" title="Fit to screen">
...@@ -692,7 +614,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`, ...@@ -692,7 +614,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
}} }}
cytoscapeOptions={{wheelSensitivity: 0.1}} cytoscapeOptions={{wheelSensitivity: 0.1}}
layout={{name: 'preset'/* preset dagre */}} layout={{name: 'preset'/* preset dagre */}}
style={DEFAULT_STYLES.concat(cytoData.style)} style={this.styles.concat(cytoData.style)}
/> />
{showNodeMenu && showNodeMenu.id === activeSelection[0] {showNodeMenu && showNodeMenu.id === activeSelection[0]
? ( ? (
......
...@@ -34,46 +34,7 @@ export default class ReactCytoscape extends Component { ...@@ -34,46 +34,7 @@ export default class ReactCytoscape extends Component {
containerID: 'cy', containerID: 'cy',
layout: {name: 'cola'}, layout: {name: 'cola'},
cytoscapeOptions: {}, cytoscapeOptions: {},
style: [ 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',
// },
// },
],
}; };
componentDidMount() { componentDidMount() {
......
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