Commit 2434c7f6 authored by Patrik Meijer's avatar Patrik Meijer
Browse files

Handle reposition using dragFree - now it works again and should be more efficient

parent b36cdc9d
...@@ -32,11 +32,11 @@ const coseBilkentOptions = { ...@@ -32,11 +32,11 @@ const coseBilkentOptions = {
name: 'cose-bilkent', name: 'cose-bilkent',
// Called on `layoutready` // Called on `layoutready`
ready: function ready() { ready: function ready() {
console.log('coseBilkent ready'); // console.log('coseBilkent ready');
}, },
// Called on `layoutstop` // Called on `layoutstop`
stop: function stop() { stop: function stop() {
console.log('coseBilkent stop'); // console.log('coseBilkent stop');
}, },
// Whether to include labels in node dimensions. Useful for avoiding label overlap // Whether to include labels in node dimensions. Useful for avoiding label overlap
nodeDimensionsIncludeLabels: true, nodeDimensionsIncludeLabels: true,
...@@ -112,8 +112,8 @@ export default class GraphEditor extends Component { ...@@ -112,8 +112,8 @@ export default class GraphEditor extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.styles = DEFAULT_STYLES.concat(this.props.extraStyles); const {extraStyles} = props;
this.reposition = {}; this.styles = DEFAULT_STYLES.concat(extraStyles);
this.cyId = `cy-${Date.now()}`; this.cyId = `cy-${Date.now()}`;
} }
...@@ -190,26 +190,26 @@ export default class GraphEditor extends Component { ...@@ -190,26 +190,26 @@ export default class GraphEditor extends Component {
const node = nodes[id]; const node = nodes[id];
return JSON.parse(JSON.stringify(node.registries[CONSTANTS.CYTOSCAPE_POS_REG_KEY] return JSON.parse(JSON.stringify(node.registries[CONSTANTS.CYTOSCAPE_POS_REG_KEY]
|| node.registries.position || {x: 100, y: 100})); || node.registries.position
|| {
x: 100,
y: 100,
}));
}; };
const isRenderedAsGmeConnection = (id) => { const targetsExist = (src, dst) => nodes[src] && nodes[dst] && src !== activeNode && dst !== activeNode;
return nodes[id] &&
typeof nodes[id].pointers.src === 'string' &&
typeof nodes[id].pointers.dst === 'string' &&
targetsExist(nodes[id].pointers.src, nodes[id].pointers.dst);
}
const targetsExist = (src, dst) => { const isRenderedAsGmeConnection = id => nodes[id]
return nodes[src] && nodes[dst] && src !== activeNode && dst !== activeNode; && typeof nodes[id].pointers.src === 'string'
}; && typeof nodes[id].pointers.dst === 'string'
&& targetsExist(nodes[id].pointers.src, nodes[id].pointers.dst);
const hasEdgeTargets = (src, dst) => { const hasEdgeTargets = (src, dst) => {
function isEdge(target) { function isEdge(target) {
return nodes[target].pointers && return nodes[target].pointers
typeof nodes[target].pointers.src === 'string' && && typeof nodes[target].pointers.src === 'string'
typeof nodes[target].pointers.dst === 'string' && && typeof nodes[target].pointers.dst === 'string'
targetsExist(nodes[target].pointers.src, nodes[target].pointers.dst); && targetsExist(nodes[target].pointers.src, nodes[target].pointers.dst);
} }
return isEdge(src) || isEdge(dst); return isEdge(src) || isEdge(dst);
...@@ -327,8 +327,8 @@ ${activeSelection.includes(id) ? 'in-active-selection' : ''}`, ...@@ -327,8 +327,8 @@ ${activeSelection.includes(id) ? 'in-active-selection' : ''}`,
Object.keys(childData.pointers) Object.keys(childData.pointers)
.forEach((pName) => { .forEach((pName) => {
const targetId = childData.pointers[pName]; const targetId = childData.pointers[pName];
if (!targetId || activeFilters[`pointers$${pName}`] || !targetsExist(id, targetId) || if (!targetId || activeFilters[`pointers$${pName}`] || !targetsExist(id, targetId)
(isGmeConnection && (pName === 'src' || pName === 'dst'))) { || (isGmeConnection && (pName === 'src' || pName === 'dst'))) {
return; return;
} }
...@@ -371,26 +371,31 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`, ...@@ -371,26 +371,31 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
return result; return result;
} }
storePosition = (nodeId) => { storePositions = (repositions) => {
const {gmeClient} = this.props; const {gmeClient, nodes} = this.props;
if (Object.keys(this.reposition).length > 0) { if (repositions.length > 0) {
gmeClient.startTransaction(); gmeClient.startTransaction();
Object.keys(this.reposition) repositions.forEach((posData) => {
.forEach((id) => { const childNodeDesc = nodes[posData.id];
if (id.indexOf(nodeId) === 0 || nodeId.indexOf(id) === 0) {
gmeClient.setRegistry(
id,
CONSTANTS.CYTOSCAPE_POS_REG_KEY,
this.reposition[id].position,
);
}
});
if (!childNodeDesc) {
return;
}
const floorPos = {
x: Math.floor(posData.position.x),
y: Math.floor(posData.position.y),
};
if (!childNodeDesc.registries[CONSTANTS.CYTOSCAPE_POS_REG_KEY]
|| floorPos.x !== childNodeDesc.registries[CONSTANTS.CYTOSCAPE_POS_REG_KEY].x
|| floorPos.y !== childNodeDesc.registries[CONSTANTS.CYTOSCAPE_POS_REG_KEY].y) {
gmeClient.setRegistry(posData.id, CONSTANTS.CYTOSCAPE_POS_REG_KEY, floorPos);
}
});
gmeClient.completeTransaction(); gmeClient.completeTransaction();
} }
this.reposition = {};
}; };
showFilterSelector = () => { showFilterSelector = () => {
...@@ -417,51 +422,42 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`, ...@@ -417,51 +422,42 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
}); });
}; };
attachCytoscapeHandlers() { atLayoutStop = () => {
this.cy.on('position', ({target}) => { this.storePositions(this.cy.nodes('.gme-node')
const {nodes} = this.props; .map(ele => ({
const nodeId = target.id(); id: ele.id(),
const childNodeDesc = nodes[nodeId]; position: ele.position(),
})));
if (!childNodeDesc) { };
return;
}
const floorPos = {
x: Math.floor(target.position().x),
y: Math.floor(target.position().y),
};
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,
};
}
});
this.cy.on('free', ({target}) => { attachCytoscapeHandlers() {
this.cy.on('dragfree', ({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) {
this.storePosition(target.id()); const repositions = [
{
id: target.id(),
position: target.position(),
},
];
target.descendants('node.gme-node')
.forEach(child => repositions.push({
id: child.id(),
position: child.position(),
}));
this.storePositions(repositions);
setTimeout(() => { setTimeout(() => {
setActiveSelection([target.id()]); setActiveSelection([target.id()]);
}); });
} else { } else {
// Free outside of canvas // Free outside of canvas
this.reposition = {};
setActiveSelection([]); setActiveSelection([]);
} }
}); });
this.cy.on('vclick', 'node', (e) => { this.cy.on('vclick', 'node', (e) => {
this.reposition = {};
const {setActiveSelection, gmeClient} = this.props; const {setActiveSelection, gmeClient} = this.props;
const {createPointer} = this.state; const {createPointer} = this.state;
if (typeof e.target.id === 'function') { if (typeof e.target.id === 'function') {
...@@ -469,7 +465,6 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`, ...@@ -469,7 +465,6 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
this.setState({createPointer: null}); this.setState({createPointer: null});
gmeClient.setPointer(createPointer.nodeId, createPointer.ptrName, createPointer.target); gmeClient.setPointer(createPointer.nodeId, createPointer.ptrName, createPointer.target);
} else if (e.target.hasClass('aux-node') === false) { } else if (e.target.hasClass('aux-node') === false) {
// console.log('vclick', e.target.id(), JSON.stringify(this.reposition));
this.setState({ this.setState({
showNodeMenu: { showNodeMenu: {
id: e.target.id(), id: e.target.id(),
...@@ -494,9 +489,9 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`, ...@@ -494,9 +489,9 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
this.cy.on('mouseover', 'node', (e) => { this.cy.on('mouseover', 'node', (e) => {
const {createPointer} = this.state; const {createPointer} = this.state;
const {gmeClient} = this.props; const {gmeClient} = this.props;
if (createPointer && if (createPointer
typeof e.target.id === 'function' && && typeof e.target.id === 'function'
e.target.hasClass('aux-node') === false) { && e.target.hasClass('aux-node') === false) {
const gmeNode = gmeClient.getNode(e.target.id()); const gmeNode = gmeClient.getNode(e.target.id());
if (gmeNode && gmeNode.isValidTargetOf(createPointer.nodeId, createPointer.ptrName) if (gmeNode && gmeNode.isValidTargetOf(createPointer.nodeId, createPointer.ptrName)
&& createPointer.target !== e.target.id()) { && createPointer.target !== e.target.id()) {
...@@ -561,7 +556,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`, ...@@ -561,7 +556,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
onClick={() => { onClick={() => {
const layout = this.cy.layout(coseBilkentOptions); const layout = this.cy.layout(coseBilkentOptions);
layout.on('layoutstop', () => { layout.on('layoutstop', () => {
this.storePosition(activeNode); this.atLayoutStop();
}); });
layout.run(); layout.run();
}} }}
...@@ -574,7 +569,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`, ...@@ -574,7 +569,7 @@ ${activeSelection.includes(edgeId) ? ' in-active-selection' : ''}`,
onClick={() => { onClick={() => {
const layout = this.cy.layout({name: 'dagre'}); const layout = this.cy.layout({name: 'dagre'});
layout.on('layoutstop', () => { layout.on('layoutstop', () => {
this.storePosition(activeNode); this.atLayoutStop();
}); });
layout.run(); layout.run();
}} }}
......
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