GraphEditor add set/pointer classes by name and fix bug in reg lookup (5422a968) · Commits · Patrik Meijer / react-components

src/components/GraphEditor/DefaultStyles.jsx

+13 −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.
		* For more info http://js.cytoscape.org/#style
		* Note: " For simplicity and ease of use, specificity rules are completely ignored in stylesheets.
		* For a given style property for a given element, the last matching selector wins. "
		*
		*
		*/

		const DEFAULT_STYLES = [
		@@ -33,6 +38,10 @@ const DEFAULT_STYLES = [
		selector: 'edge.pointer',
		style: {
		content: 'data(label)',
		color: 'rgb(0,0,255)',
		'font-size': 10,

		width: 1,
		'line-color': 'rgb(0,0,255)',
		'curve-style': 'bezier',
		'target-arrow-color': 'rgb(0,0,255)',
		@@ -43,6 +52,10 @@ const DEFAULT_STYLES = [
		selector: 'edge.set-member',
		style: {
		content: 'data(label)',
		color: 'rgb(255,0,255)',
		'font-size': 10,

		width: 1,
		'curve-style': 'bezier',
		'line-color': 'rgb(255,0,255)',
		'target-arrow-color': 'rgb(255,0,255)',

src/components/GraphEditor/GraphEditor.jsx

+24 −22

Original line number	Diff line number	Diff line
		@@ -187,16 +187,10 @@ export default class GraphEditor extends Component {
		const nodeIdsWithChildren = {};

		const getPosition = (id) => {
		const parentNode = nodes[id];
		const node = nodes[id];

		// while (parentNode.parent &&
		// parentNode.parent !== activeNode &&
		// !parentNode[CONSTANTS.CYTOSCAPE_POS_REG_KEY]) {
		// parentNode = children[parentNode.parent];
		// }

		return JSON.parse(JSON.stringify(parentNode.registries[CONSTANTS.CYTOSCAPE_POS_REG_KEY]
		\|\| parentNode.registries.position));
		return JSON.parse(JSON.stringify(node.registries[CONSTANTS.CYTOSCAPE_POS_REG_KEY]
		\|\| node.registries.position \|\| {x: 100, y: 100}));
		};

		const isRenderedAsGmeConnection = (id) => {
		@@ -242,7 +236,8 @@ export default class GraphEditor extends Component {
		source: childData.pointers.src,
		target: childData.pointers.dst,
		},
		classes: `${activeSelection.includes(id) ? 'in-active-selection ' : ''}gme-connection`,
		classes: `gme-connection ${childData.attributes.name}-gme-connection\
		${activeSelection.includes(id) ? ' in-active-selection' : ''}`,
		};

		if (createPointer && createPointer.target === id) {
		@@ -315,7 +310,7 @@ export default class GraphEditor extends Component {
		label: setName,
		memberAttrs: setMemberData.memberAttrs,
		},
		classes: `set-member ${activeSelection.includes(edgeId)
		classes: `set-member ${setName}-set-member ${activeSelection.includes(edgeId)
		? 'in-active-selection' : ''}`,
		};

		@@ -345,7 +340,7 @@ export default class GraphEditor extends Component {
		target: targetId,
		label: pName,
		},
		classes: `${pName === 'base' ? 'base-pointer' : 'pointer'}\
		classes: `${pName === 'base' ? 'base-pointer' : `pointer ${pName}-pointer`}\
		${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
		};

		@@ -371,7 +366,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
		} else {
		result.elements.edges.push(edgeData);
		}
		})
		});

		return result;
		}
		@@ -425,19 +420,27 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
		attachCytoscapeHandlers() {
		this.cy.on('position', ({target}) => {
		const {nodes} = this.props;
		debugger;
		const childNodeDesc = nodes[target.id()];
		const nodeId = target.id();
		const childNodeDesc = nodes[nodeId];

		if (!childNodeDesc) {
		return;
		}

		const floorPos = {
		x: Math.floor(target.position().x),
		y: Math.floor(target.position().y),
		};

		if (childNodeDesc
		&& (!childNodeDesc[CONSTANTS.CYTOSCAPE_POS_REG_KEY]
		\|\| childNodeDesc[CONSTANTS.CYTOSCAPE_POS_REG_KEY].x !== floorPos.x
		\|\| childNodeDesc[CONSTANTS.CYTOSCAPE_POS_REG_KEY].y !== floorPos.y)) {
		this.reposition[target.id()] = {
		id: target.id(),
		if (!childNodeDesc.registries[CONSTANTS.CYTOSCAPE_POS_REG_KEY]) {
		this.reposition[nodeId] = {
		id: nodeId,
		position: floorPos,
		};
		} else if (floorPos.x !== childNodeDesc.registries[CONSTANTS.CYTOSCAPE_POS_REG_KEY].x
		\|\| floorPos.y !== childNodeDesc.registries[CONSTANTS.CYTOSCAPE_POS_REG_KEY].y) {
		this.reposition[nodeId] = {
		id: nodeId,
		position: floorPos,
		};
		}
		@@ -446,7 +449,6 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
		this.cy.on('free', ({target}) => {
		const {setActiveSelection} = this.props;
		if (typeof target.id === 'function' && target.hasClass('aux-node') === false) {
		// console.log('free', cyNode.id(), JSON.stringify(this.reposition));
		this.storePosition(target.id());
		setTimeout(() => {
		setActiveSelection([target.id()]);

Admin message