I am using Cytoscape.js to create a web application. To enable users to add edges, I have integrated the Edgehandles extension. Two kinds of edges can be added: undirected and directed. To add directed edges, the user holds down the control or apple key. To add undirected edges, the space key is used. Adding directed edges works perfectly. However, when I add an undirected edge, the nodes cannot be moved anymore. node.grabbable() returns false for all nodes. While this seems to always return true before adding an undirected edge.
I am surprised since all I do to make an edge undirected is add a class (see cy.on('add', 'edge', function (event) { even listener). At no point do I explicitly modify node.grabbable(). I thus highly suspect this has to do with the autoungrabify, or autolock functionality of cytoscape.js. However, as you can see in the code, I set those to false.
Any help would be greatly appreciated!
It seems like the even listeners are not working here. So, you probably have to download the files to reproduce the problem.
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [],
autoungrabify: false,
autolock: false,
style: [{
selector: 'edge',
style: {
'target-arrow-shape': 'triangle',
'curve-style': 'bezier',
}
},
{
selector: 'edge.undirected',
style: {
'target-arrow-shape': 'triangle',
'source-arrow-shape': 'triangle'
}
}
]
});
var layout = cy.layout({
name: 'grid'
});
var eh = cy.edgehandles();
var nodeIdCounter = 0;
function addNode(nodeType, position) {
var finalPosition = {
x: Math.random() * 400 + 50,
y: Math.random() * 400 + 50
};
cy.add({
group: 'nodes',
classes: nodeType,
position: finalPosition
});
}
var spaceKeyDown = false;
document.addEventListener('keydown', function(event) {
// Check if the Command key was pressed
if (event.key === 'Meta' || event.key === 'Control' || event.key === ' ') {
eh.enableDrawMode();
}
if (event.key === ' ') {
spaceKeyDown = true;
}
});
// Listen for keyup event
document.addEventListener('keyup', function(event) {
// Check if the Command key was released
if (event.key === 'Meta' || event.key === 'Control' || event.key === ' ') {
eh.disableDrawMode();
}
if (event.key === ' ') {
spaceKeyDown = false;
}
});
cy.on('add', 'edge', function(event) {
var edge = event.target;
if (spaceKeyDown) {
edge.addClass('undirected');
} else {
edge.addClass('directed');
}
});
addNode('observed-variable');
addNode('observed-variable');
addNode('observed-variable');<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.9/cytoscape.min.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-edgehandles/master/cytoscape-edgehandles.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#cy {
z-index: 1;
width: 70%;
height: 80vh;
padding: 10px;
}
</style>
</head>
<body>
<div id="cy"></div>
<script src="javascript.js"></script>
</body>
</html>from cytoscape.js problems with autoungrabify or autolock?
No comments:
Post a Comment