Extract out styles and bug fixes (44acf64f) · Commits · Patrik Meijer / react-components

src/components/GraphEditor/DefaultStyles.jsx

0 → 100644

+93 −0

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

+21 −99

Original line number	Diff line number	Diff line
		@@ -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,11 +289,11 @@ export default class GraphEditor extends Component {
		},
		});
		}
		}

		if (createPointer && createPointer.target === id) {
		cytoData.classes += ' valid-pointer-target';
		}
		}

		Object.keys(childData.sets)
		.forEach((setName) => {
		@@ -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

+1 −40

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

Admin message