Skip to content
GitLab
Commit 44acf64f authored by Patrik Meijer's avatar Patrik Meijer
Browse files

Extract out styles and bug fixes

parent 286c48d2
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 auto-layout. Warning this will move everything!">
<Tooltip id="tooltip-auto-layout" title="Auto 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();
}}
>
<TransformIcon/>
<ViewModuleIcon/>
</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() {
......
Supports Markdown
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