Pan by Model Coordinates

Hello, I have been working on a cytoscape project which requires some sort of panning limit on both x and y. I have tried searching for solutions to this and only found this issue: https://github.com/cytoscape/cytoscape.js/issues/1329, which explains why panning limits are largely not possible due to pan using rendered coordinates, however, there is cy.extent() for getting model coordinates as well, just no way to set them.

Upon reading http://js.cytoscape.org/#layouts/random, I found that the options for this layout (and a few others) include the boundingBox section, which accepts an object that looks like {x1, y1, x2, y2}, or {x1, y1, w, h}. This style of setting up model coordinates is exactly what I would need to implement my panning limits. Something along this lines of:

cy.extent({
    x1: 0, //Set x1
    y1: 0, //Set y1
    w: cy.extent().w, //Keep the current w
    h: cy.extent().h //Keep the current h
});

Currently I manage pan limits using the solution outlined in the aforementioned issue, however, it is kind of a mess in my project and this would make things much easier.

Is this something that’s beyond reason? It would be immensely helpful, and I don’t think only for my use case.

[maxkfranz]

I don’t think we can have cy.extent() as a setter. The dev can set many combinations of invalid values, for example.

But the bigger problem is that setting pan limits is not so straightforward as setting a zoom limit, as explained in #1329. There are too many possible variations and no good, universal default.

Some examples: Do you allow a user gesture and then animate back to an allowed viewport state? Do you block gestures midway if they would break the constraint? How does the UI give feedback for midway-blocked gestures (e.g. it’s confusing if you can’t zoom in on a node when it’s at the boundary of the constraint)? How do you visualise the constraint? How do you access animation objects if they were used for the constraint?

I think these are questions better addressed by apps themselves. If you implement a particular variation of viewport constraint enforcement and want to make a reusable module, feel free to put it in an extension: http://js.cytoscape.org/#extensions

[maxkfranz]

If you fork the repo, you can make any number of changes directly on the unstable branch to make a pull request. It’s not strictly necessary to make a new feature branch.

There’s more information in an upcoming blog post: https://github.com/cytoscape/cytoscape.js-blog/blob/5a5769994e250953247926207f5a5309cc60bc74/_posts/2017-05-09-contributing.md