Skip to content

GitLab

Commit 52d1a0c9 authored by Patrik Meijer's avatar Patrik Meijer
Browse files

Handle colors and images efficiently

parent 26bd5bdb
Hide whitespace changes
Inline Side-by-side
src/components/GraphEditor/DefaultStyles.jsx
View file @ 52d1a0c9
......@@ -14,15 +14,27 @@ const COLORS = {
SET: 'rgb(255,0,255)',
BASE_POINTER: 'rgb(255,0,0)',
SELECTED: 'rgba(82, 168, 236, 0.6)',
VALID_TARGET: 'rgb(139, 255, 135)',
VALID_TARGET: 'rgb(66, 244, 66)',
INVALID_TARGET: 'rgb(255, 135, 135)',
DARK_GREY: 'rgb(153, 153, 153)',
LIGHT_GREY: 'whitesmoke',
};
const DEFAULT_STYLES = [
{
selector: 'node.gme-node[hasChildren]',
selector: 'node.gme-node',
style: {
content: 'data(attributes.name)',
'background-image': (ele) => {
const value = ele.data('registries').SVGIcon;
return (value && value.indexOf('<') === -1) ? `url(/assets/DecoratorSVG/${value})` : undefined;
},
},
},
{
selector: 'node.gme-node[hasChildren]',
style: {
'background-color': ele => ele.data('registries').color || COLORS.LIGHT_GREY,
// http://js.cytoscape.org/#style/background-image
'background-width': '20%',
'background-height': '20%',
......@@ -31,108 +43,135 @@ const DEFAULT_STYLES = [
{
selector: 'node.gme-node[^hasChildren]',
style: {
content: 'data(attributes.name)',
'background-color': ele => ele.data('registries').color || COLORS.DARK_GREY,
// http://js.cytoscape.org/#style/background-image
'background-width': '80%',
'background-height': '80%',
},
},
{
selector: 'node.aux-node',
selector: 'node.gme-node.in-active-selection',
style: {
width: 6,
height: 6,
'background-color': 'rgb(174, 219, 255)',
'border-color': COLORS.SELECTED,
'border-style': 'solid',
'border-opacity': '1',
'border-width': 5,
},
},
{
selector: 'edge.pointer',
selector: 'edge.gme-connection',
style: {
content: 'data(label)',
color: COLORS.EDGE_LABEL,
'font-size': 7,
width: 1,
'line-color': COLORS.POINTER,
'curve-style': 'bezier',
'target-arrow-color': COLORS.POINTER,
'target-arrow-shape': 'vee',
'line-color': ele => ele.data('registries').color || 'rgb(0, 0, 0)',
// 'curve-style': 'bezier',
// 'target-arrow-shape': (ele) => {
// const arrow = ele.data('registries').lineEndArrow;
// let result = 'none';
//
// if (arrow) {
// result = 'triangle';
// }
//
// return result;
// },
// 'target-arrow-color': ele => ele.data('registries').color || COLORS.DARK_GREY,
// 'source-arrow-shape': (ele) => {
// const arrow = ele.data('registries').lineStartArrow;
// let result = 'none';
//
// if (arrow) {
// result = 'triangle';
// }
//
// return result;
// },
// 'source-arrow-color': ele => ele.data('registries').color || COLORS.DARK_GREY,
},
},
{
selector: 'edge.set-member',
selector: 'edge.gme-connection.in-active-selection',
style: {
content: 'data(label)',
color: COLORS.EDGE_LABEL,
'font-size': 7,
width: 1,
'curve-style': 'bezier',
'line-color': COLORS.SET,
'target-arrow-color': COLORS.SET,
'target-arrow-shape': 'vee',
width: 5,
'line-color': COLORS.SELECTED,
},
},
{
selector: 'edge.base-pointer',
selector: 'node.gme-node.valid-action-target',
style: {
width: 1,
'line-color': COLORS.BASE_POINTER,
'curve-style': 'bezier',
'target-arrow-fill': 'hollow',
'target-arrow-color': COLORS.BASE_POINTER,
'target-arrow-shape': 'triangle',
'border-color': COLORS.VALID_TARGET,
'border-style': 'solid',
'border-opacity': '1',
'border-width': 10,
},
},
{
selector: 'node[hasChildren].in-active-selection',
selector: 'node.gme-node.invalid-action-target',
style: {
// 'border-width': '2px',
'border-color': COLORS.INVALID_TARGET,
'border-style': 'solid',
'border-opacity': '1',
'border-color': COLORS.SELECTED,
'border-width': 10,
},
},
{
selector: 'node[^hasChildren].in-active-selection',
selector: 'edge.gme-connection.valid-action-target',
style: {
'background-color': COLORS.SELECTED,
width: 4,
'line-color': COLORS.VALID_TARGET,
},
},
{
selector: 'edge.in-active-selection',
selector: 'edge.gme-connection.invalid-action-target',
style: {
width: 5,
'line-color': COLORS.SELECTED,
width: 4,
'line-color': COLORS.INVALID_TARGET,
},
},
{
selector: 'node.valid-action-target',
selector: 'node.aux-node',
style: {
'background-color': COLORS.VALID_TARGET,
width: 3,
height: 3,
},
},
{
selector: 'node.invalid-action-target',
selector: 'edge.pointer',
style: {
'background-color': COLORS.INVALID_TARGET,
content: 'data(label)',
color: COLORS.EDGE_LABEL,
'font-size': 7,
width: 1,
'line-color': COLORS.POINTER,
'curve-style': 'bezier',
'target-arrow-color': COLORS.POINTER,
'target-arrow-shape': 'vee',
},
},
{
selector: 'edge.valid-action-target',
selector: 'edge.set-member',
style: {
width: 4,
'line-color': COLORS.VALID_TARGET,
content: 'data(label)',
color: COLORS.EDGE_LABEL,
'font-size': 7,
width: 1,
'curve-style': 'bezier',
'line-color': COLORS.SET,
'target-arrow-color': COLORS.SET,
'target-arrow-shape': 'vee',
},
},
{
selector: 'edge.invalid-action-target',
selector: 'edge.base-pointer',
style: {
width: 4,
'line-color': COLORS.INVALID_TARGET,
width: 1,
'line-color': COLORS.BASE_POINTER,
'curve-style': 'bezier',
'target-arrow-fill': 'hollow',
'target-arrow-color': COLORS.BASE_POINTER,
'target-arrow-shape': 'triangle',
},
},
];
export default DEFAULT_STYLES;
src/components/GraphEditor/GraphEditor.jsx
View file @ 52d1a0c9
......@@ -145,7 +145,7 @@ export default class GraphEditor extends Component {
componentWillReceiveProps({activeNode}) {
const {activeNode: preActiveNode} = this.props;
if (activeNode !== preActiveNode) {
this.reposition = {};
// update creatingNew etc.
}
}
......@@ -176,7 +176,6 @@ export default class GraphEditor extends Component {
nodes: [],
edges: [],
},
style: [],
hyperEdges: [],
};
......@@ -276,16 +275,6 @@ ${activeSelection.includes(id) ? 'in-active-selection' : ''}`,
nodeIdsWithChildren[childData.parent] = true;
}
// Use the images defined for the node.
if (childData.registries.SVGIcon && childData.registries.SVGIcon.indexOf('<') === -1) {
result.style.push({
selector: `node[id = "${id}"]`,
style: {
'background-image': `url(/assets/DecoratorSVG/${childData.registries.SVGIcon})`,
},
});
}
if (creatingNew && creatingNew.target === id) {
cytoData.classes += creatingNew.isValid ? ' valid-action-target' : ' invalid-action-target';
}
......@@ -581,9 +570,6 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
}));
this.storePositions(repositions);
setTimeout(() => {
setActiveSelection([target.id()]);
});
} else {
// Free outside of canvas
setActiveSelection([]);
......@@ -697,13 +683,13 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
</Button>
</Tooltip>
{/*<Tooltip id="tooltip-show-filters" title="Manage filters">*/}
{/*<Button*/}
{/*onClick={() => {*/}
{/*this.setState({showFilterSelector: true});*/}
{/*}}*/}
{/*>*/}
{/*<FilterIcon/>*/}
{/*</Button>*/}
{/*<Button*/}
{/*onClick={() => {*/}
{/*this.setState({showFilterSelector: true});*/}
{/*}}*/}
{/*>*/}
{/*<FilterIcon/>*/}
{/*</Button>*/}
{/*</Tooltip>*/}
</span>
</div>
......@@ -721,7 +707,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
}}
cytoscapeOptions={{wheelSensitivity: 0.1}}
layout={{name: 'preset'/* preset dagre */}}
style={this.styles.concat(cytoData.style)}
style={this.styles}
/>
{showNodeMenu && showNodeMenu.id === activeSelection[0]
? (
......@@ -741,11 +727,11 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
/>) : null}
{/*<FilterSelector*/}
{/*open={showFilterSelector}*/}
{/*validItems={validFilters}*/}
{/*activeItems={activeFilters}*/}
{/*handleToggle={this.toggleFilter}*/}
{/*onClose={(() => this.setState({showFilterSelector: false}))}*/}
{/*open={showFilterSelector}*/}
{/*validItems={validFilters}*/}
{/*activeItems={activeFilters}*/}
{/*handleToggle={this.toggleFilter}*/}
{/*onClose={(() => this.setState({showFilterSelector: false}))}*/}
{/*/>*/}
</div>);
}
......
src/components/GraphEditor/ReactCytoscape.jsx
View file @ 52d1a0c9
......@@ -69,9 +69,13 @@ export default class ReactCytoscape extends Component {
style,
} = this.props;
if (JSON.stringify(style) !== JSON.stringify(nextProps.style)) {
this.cy.style(nextProps.style);
}
// TODO: Consider making more fine-grained updates here instead.
if (JSON.stringify(elements) !== JSON.stringify(nextProps.elements) ||
JSON.stringify(hyperEdges) !== JSON.stringify(nextProps.hyperEdges)) {
if (JSON.stringify(elements) !== JSON.stringify(nextProps.elements)
|| JSON.stringify(hyperEdges) !== JSON.stringify(nextProps.hyperEdges)) {
this.cy.json({elements: nextProps.elements});
this.edgeConnHandler.addEdges(nextProps.hyperEdges);
}
......@@ -80,10 +84,6 @@ export default class ReactCytoscape extends Component {
this.cy.resize();
}
if (JSON.stringify(style) !== JSON.stringify(nextProps.style)) {
this.cy.style(nextProps.style);
}
if (elements.nodes && elements.nodes.length === 0 &&
nextProps.elements.nodes.length > 0) {
// Initial elements received -> fit graph to canvas.
......
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