Coder Social home page Coder Social logo

ivis-at-bilkent / cytoscape.js-autopan-on-drag Goto Github PK

View Code? Open in Web Editor NEW
11.0 18.0 4.0 58 KB

A Cytsocape.js extension to automatically pan when nodes are out of canvas bounds

License: MIT License

JavaScript 80.52% HTML 19.48%
cytoscapejs cytoscapejs-extension editor network-visualization diagramming graph-drawing

cytoscape.js-autopan-on-drag's People

Contributors

alexnault avatar hasanbalci avatar kinimesi avatar metincansiper avatar ugurdogrusoz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

cytoscape.js-autopan-on-drag's Issues

Remove jQuery dependency

This extension's README lies about dependencies. It does not mention the jQuery dependency. Today for a lot of developers having jQuery as a dependency is quite unattractive resp. unacceptable.

The jQuery dependency should be removed. This extension uses jQuery merely to measure width/height of a DOM element, which might not justify adding such a "deprecated" library to ones project.

The autopan extension seems to be quite useful and just needs some minor "modernization".

Release scratchpad fix

The newest release of this extension (2.1.0) throws an error at initialization:

TypeError: undefined is not an object (evaluating 'scratchPad[name]')

Apparently this issue is fixed by #9 but this fix is not yet released.

This extension should be newly released.

Work together with edgehandles extension

I use the edgehandles extension and want trigger auto panning for the edgehandles "ghost node". The ghost node is the one the user moves while drawing an edge. The problem is that the ghost node does not trigger auto panning.

By default the ghost node is transparent and tiny, and I thought this might be the problem:

      ghostNode.style({
        'background-color': 'blue',
        'width': 0.0001,
        'height': 0.0001,
        'opacity': 0,
        'events': 'no'
      });

For testing I've made the ghost node bigger and non-transparent, and removed events: no, but no success.

How can I make edgehandle's ghost node trigger auto panning?

Scratchpad namespace mismatch

The autopan extension has a scratchpad namespace reference to "_undoRedo" which did not exist. This was likely just a minor copy/paste error from the undo redo extension.

I've submitted a PR #9 with the fix.

Zenodo Integration?

Might be a good idea to add this extension and any others you have to Zenodo (https://zenodo.org/). Really easy to set up and it integrates with GitHub so that on every new release it will automatically register the extension with a new DOI.

Conflict when more than one instance on one page

I have declared several Cytoscape instances on one page with different div as containers. And I called cy.autopanOnDrag({}); for each Cytoscape instance. However, no matter which graph(the node in that graph) I drag, the viewport of the last Cytoscape instance moves.

Here is a part of my code:

 cys = $.map($('.cy'), function (container) {
        var cy = cytoscape($.extend({}, cytoscapeOptions, {container: container}));
        cy.autopanOnDrag({
            // options here...
        });
        return cy;
    });

Shorter package name

This project is really cool, but I wonder if the package name could be a little bit shorter.

Maybe something like cytoscape-dragpan?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.