Commit 5422a968 authored by Patrik Meijer's avatar Patrik Meijer
Browse files

GraphEditor add set/pointer classes by name and fix bug in reg lookup

parent 9cc67c06
/**
* 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)',
......
......@@ -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()]);
......
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