Numbers Prefer Multiplication

    cytoscape-anywhere-panning
    TypeScript icon, indicating that this package has built-in type declarations

    0.5.5 • Public • Published

    cytoscape-anywhere-panning

    NOTE You may not need this plugin because of this commit.

    NOTE The API has drastically changed from v0.4.0 to v0.5.0.

    Description

    Allow panning from nodes/edges (demo)

    Dependencies

    • Cytoscape.js ^3.2.0

    Usage instructions

    Download the library:

    • via npm: npm install cytoscape-anywhere-panning,
    • via unpkg: https://unpkg.com/cytoscape-anywhere-panning/dist/index.js

    Import the library as appropriate for your project:

    ES import:

    import cytoscape from 'cytoscape';
    import anywherePanning from 'cytoscape-anywhere-panning';
     
    cytoscape.use( anywherePanning );

    CommonJS require:

    let cytoscape = require('cytoscape');
    let anywherePanning = require('cytoscape-anywhere-panning');
     
    cytoscape.use( anywherePanning ); // register extension

    AMD:

    require(['cytoscape', 'cytoscape-anywhere-panning'], function( cytoscape, anywherePanning ){
      anywherePanning( cytoscape ); // register extension
    });

    Plain HTML/JS has the extension registered for you automatically, because no require() is needed.

    API

    cy.anywherePanning();
     
    cy.anywherePanning({
        // Drag threshold in pixel.
        // The panning starts only after the distance between start cursor position
        // to the current cursor position beyond the "threshold".
        threshold: 10,
     
        // A function list which receive cytoscape.EventObject and returns boolean.
        // When non functions return true, anywhere panning is ignored.
        // Note that when no activators are specfied, the default activators like
        // below is used.
        activators: [
            function(evt) {
                if (evt instanceof MouseEvent) {
                    // Enable when user drag with left button
                    return evt.originalEvent.button === 0;
                }
                else if (evt instanceof TouchEvent) {
                    // Enable when user drag with one finger
                    return evt.originalEvent.touches.length === 1;
                }
                return false;
            },
        ],
    });
     
     
    // An event which is emitted when panning has started.
    // The second argument is an event for "vmousedown".
    cy.on('awpanstart', function(evt, evt2) {
        panning = 'started';
    });
     
    // An event which is emitted when the cursor has moved during panning.
    // The second argument is an event for "vmousemove".
    cy.on('awpanmove', function(evt, evt2) {
        panning = 'moving';
    });
     
    // An event which is emitted when the panning has ended.
    // The second argument is an event for "vmouseup".
    cy.on('awpanend', function(evt, evt2) {
        panning = 'ended';
    });

    Build targets

    • npm run build : Build ./src/** into dist/index.js
    • npm run lint : Run eslint on the source

    Publishing instructions

    This project is set up to automatically be published to npm and bower. To publish:

    1. Build the extension : npm run build
    2. Commit the build : git commit -am "Build for release"
    3. Bump the version number and tag: npm version major|minor|patch
    4. Push to origin: git push && git push --tags
    5. Publish to npm: npm publish .

    Install

    npm i cytoscape-anywhere-panning

    DownloadsWeekly Downloads

    283

    Version

    0.5.5

    License

    MIT

    Unpacked Size

    18.3 kB

    Total Files

    10

    Last publish

    Collaborators

    • fixpoint-machine-user
    • lambdalisue