Handle colors and images efficiently (52d1a0c9) · Commits · Patrik Meijer / react-components

src/components/GraphEditor/DefaultStyles.jsx

+92 −53

Original line number	Diff line number	Diff line
		@@ -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

+14 −28

Original line number	Diff line number	Diff line
		@@ -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([]);
		@@ -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]
		? (

src/components/GraphEditor/ReactCytoscape.jsx

+6 −6

Original line number	Diff line number	Diff line
		@@ -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.

Admin message