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. * These are the styles for cytoscape defined by the GraphEditor.
* You cannot overwrite the array, only append additional rules. * 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 = [ const DEFAULT_STYLES = [
...@@ -33,6 +38,10 @@ const DEFAULT_STYLES = [ ...@@ -33,6 +38,10 @@ const DEFAULT_STYLES = [
selector: 'edge.pointer', selector: 'edge.pointer',
style: { style: {
content: 'data(label)', content: 'data(label)',
color: 'rgb(0,0,255)',
'font-size': 10,
width: 1,
'line-color': 'rgb(0,0,255)', 'line-color': 'rgb(0,0,255)',
'curve-style': 'bezier', 'curve-style': 'bezier',
'target-arrow-color': 'rgb(0,0,255)', 'target-arrow-color': 'rgb(0,0,255)',
...@@ -43,6 +52,10 @@ const DEFAULT_STYLES = [ ...@@ -43,6 +52,10 @@ const DEFAULT_STYLES = [
selector: 'edge.set-member', selector: 'edge.set-member',
style: { style: {
content: 'data(label)', content: 'data(label)',
color: 'rgb(255,0,255)',
'font-size': 10,
width: 1,
'curve-style': 'bezier', 'curve-style': 'bezier',
'line-color': 'rgb(255,0,255)', 'line-color': 'rgb(255,0,255)',
'target-arrow-color': 'rgb(255,0,255)', 'target-arrow-color': 'rgb(255,0,255)',
......
...@@ -187,16 +187,10 @@ export default class GraphEditor extends Component { ...@@ -187,16 +187,10 @@ export default class GraphEditor extends Component {
const nodeIdsWithChildren = {}; const nodeIdsWithChildren = {};
const getPosition = (id) => { const getPosition = (id) => {
const parentNode = nodes[id]; const node = nodes[id];
// while (parentNode.parent && return JSON.parse(JSON.stringify(node.registries[CONSTANTS.CYTOSCAPE_POS_REG_KEY]
// parentNode.parent !== activeNode && || node.registries.position || {x: 100, y: 100}));
// !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));
}; };
const isRenderedAsGmeConnection = (id) => { const isRenderedAsGmeConnection = (id) => {
...@@ -242,7 +236,8 @@ export default class GraphEditor extends Component { ...@@ -242,7 +236,8 @@ export default class GraphEditor extends Component {
source: childData.pointers.src, source: childData.pointers.src,
target: childData.pointers.dst, 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) { if (createPointer && createPointer.target === id) {
...@@ -315,7 +310,7 @@ export default class GraphEditor extends Component { ...@@ -315,7 +310,7 @@ export default class GraphEditor extends Component {
label: setName, label: setName,
memberAttrs: setMemberData.memberAttrs, memberAttrs: setMemberData.memberAttrs,
}, },
classes: `set-member ${activeSelection.includes(edgeId) classes: `set-member ${setName}-set-member ${activeSelection.includes(edgeId)
? 'in-active-selection' : ''}`, ? 'in-active-selection' : ''}`,
}; };
...@@ -345,7 +340,7 @@ export default class GraphEditor extends Component { ...@@ -345,7 +340,7 @@ export default class GraphEditor extends Component {
target: targetId, target: targetId,
label: pName, label: pName,
}, },
classes: `${pName === 'base' ? 'base-pointer' : 'pointer'}\ classes: `${pName === 'base' ? 'base-pointer' : `pointer ${pName}-pointer`}\
${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`, ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
}; };
...@@ -371,7 +366,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`, ...@@ -371,7 +366,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
} else { } else {
result.elements.edges.push(edgeData); result.elements.edges.push(edgeData);
} }
}) });
return result; return result;
} }
...@@ -425,19 +420,27 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`, ...@@ -425,19 +420,27 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
attachCytoscapeHandlers() { attachCytoscapeHandlers() {
this.cy.on('position', ({target}) => { this.cy.on('position', ({target}) => {
const {nodes} = this.props; const {nodes} = this.props;
debugger; const nodeId = target.id();
const childNodeDesc = nodes[target.id()]; const childNodeDesc = nodes[nodeId];
if (!childNodeDesc) {
return;
}
const floorPos = { const floorPos = {
x: Math.floor(target.position().x), x: Math.floor(target.position().x),
y: Math.floor(target.position().y), y: Math.floor(target.position().y),
}; };
if (childNodeDesc if (!childNodeDesc.registries[CONSTANTS.CYTOSCAPE_POS_REG_KEY]) {
&& (!childNodeDesc[CONSTANTS.CYTOSCAPE_POS_REG_KEY] this.reposition[nodeId] = {
|| childNodeDesc[CONSTANTS.CYTOSCAPE_POS_REG_KEY].x !== floorPos.x id: nodeId,
|| childNodeDesc[CONSTANTS.CYTOSCAPE_POS_REG_KEY].y !== floorPos.y)) { position: floorPos,
this.reposition[target.id()] = { };
id: target.id(), } 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, position: floorPos,
}; };
} }
...@@ -446,7 +449,6 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`, ...@@ -446,7 +449,6 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
this.cy.on('free', ({target}) => { this.cy.on('free', ({target}) => {
const {setActiveSelection} = this.props; const {setActiveSelection} = this.props;
if (typeof target.id === 'function' && target.hasClass('aux-node') === false) { if (typeof target.id === 'function' && target.hasClass('aux-node') === false) {
// console.log('free', cyNode.id(), JSON.stringify(this.reposition));
this.storePosition(target.id()); this.storePosition(target.id());
setTimeout(() => { setTimeout(() => {
setActiveSelection([target.id()]); setActiveSelection([target.id()]);
......
Supports Markdown
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