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

Handle colors and images efficiently

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