Nybble Processing Mainframe

    flexible-context-menu
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.12 • Public • Published

    flexible-context-menu

    Description

    A flexible context menu for Cytoscape. [Demo incoming]

    Dependencies

    • Cytoscape.js ^3.2.0

    Usage instructions

    Download the library:

    • via npm: npm install flexible-context-menu,
    • via bower: bower install flexible-context-menu, or
    • via direct download in the repository (Look at the releases tab).

    Import the library as appropriate for your project:

    ES import:

    import cytoscape from 'cytoscape';
    import FlexibleContextMenu from 'flexible-context-menu';
     
    cytoscape.use( FlexibleContextMenu );

    CommonJS require:

    let cytoscape = require('cytoscape');
    let FlexibleContextMenu = require('flexible-context-menu');
     
    cytoscape.use( FlexibleContextMenu ); // register extension

    AMD:

    require(['cytoscape', 'flexible-context-menu'], function( cytoscape, flexibleContextMenu ){
      flexibleContextMenu( cytoscape ); // register extension
    });

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

    API

    The extension supports adding menu items for a selected node in the graph. They are, for now, displayed in a circle around the selected node. It exposes only one function - flexibleContextMenu - which is attached to Cytoscape.

    The initialisation for the menu requires the following:

    interface MenuItem {
      icon?: any;
      /** The title for the menu item */
      title: string;
      /** The background color for the menu item */
      color: string
      /** onclick handler for the menu item */
      onClick(): void;
    }
     
    interface Options {
      items: MenuItem[]
      closeIcon: any
      /**
       * The condition under which to display
       * the contextual menu and the menu items
       */
      conditions: {
        /** The condition check for contextual menu */
        overall(currentTarget: NodeSingular): boolean
        /**
         * The condition check for individual menu items.
         * It is checked once for every menu item
         */
        menuItem(itemTitle: string, currentTarget: NodeSingular): boolean
      }
    }
    import Cytoscape from 'cytoscape';
    import FlexibleContextMenu from 'flexible-context-menu';
     
    Cytoscape.use( FlexibleContextMenu );
     
    const cytoscape = Cytoscape({ ... });
     
    const options: Options = { ... };
    cytoscape.flexibleContextMenu(options);

    This only needs to be run once. After that, the contextual menu will appear and disappear based on the conditions you have specified in the options.

    Install

    npm i flexible-context-menu

    DownloadsWeekly Downloads

    5

    Version

    1.0.12

    License

    MIT

    Unpacked Size

    66.8 kB

    Total Files

    15

    Last publish

    Collaborators

    • iamdifferent