Home
Softono
i

ivis-at-bilkent

Professional software vendor delivering innovative solutions on the Softono platform. Specialized in both open-source and proprietary software development.

Visit Website
Total Products
5

Software by ivis-at-bilkent

cytoscape.js-context-menus
Open Source

cytoscape.js-context-menus

cytoscape-context-menus ================================================================================ ## Description A Cytoscape.js extension to provide context menu around elements and core instance distributed under [The MIT License](https://opensource.org/licenses/MIT). ![Image of extension](assets/example.png) Please cite the following paper when using this extension: U. Dogrusoz , A. Karacelik, I. Safarli, H. Balci, L. Dervishi, and M.C. Siper, "[Efficient methods and readily customizable libraries for managing complexity of large networks](https://doi.org/10.1371/journal.pone.0197238)", PLoS ONE, 13(5): e0197238, 2018. ## Demo Here are demos: **simple** and **customized**, respectively: <p align="center"> <a href="https://ivis-at-bilkent.github.io/cytoscape.js-context-menus/demo.html" title="Simple"><img src="https://www.cs.bilkent.edu.tr/~ivis/images/demo1.png" height=42px></a> &emsp; <a href="https://ivis-at-bilkent.github.io/cytoscape.js-context-menus/demo-customized.html" title="Customized"><img src="https://www.cs.bilkent.edu.tr/~ivis/images/demo2.png" height=42px></a> </p> ## Dependencies * Cytoscape.js ^2.7.0 || ^3.0.0 ## Usage instructions Download the library: * via npm: `npm install cytoscape-context-menus`, * via bower: `bower install cytoscape-context-menus`, or * via direct download in the repository (probably from a tag). Import the library as appropriate for your project: ES import: Note: es import doesn't work for plain javascript applications because webpack doesn't support es module output at the moment. ```js import cytoscape from 'cytoscape'; import contextMenus from 'cytoscape-context-menus'; // register extension cytoscape.use(contextMenus); // import CSS as well import 'cytoscape-context-menus/cytoscape-context-menus.css'; ``` CommonJS: ```js var cytoscape = require('cytoscape'); var contextMenus = require('cytoscape-context-menus'); contextMenus(cytoscape); // register extension ``` AMD: ```js require(['cytoscape', 'cytoscape-context-menus'], function(cytoscape, contextMenus) { contextMenus(cytoscape); // register extension }); ``` Plain HTML/JS has the extension registered for you automatically, because no `require()` is needed. ## Default Options ```js var options = { // Customize event to bring up the context menu // Possible options https://js.cytoscape.org/#events/user-input-device-events evtType: 'cxttap', // List of initial menu items // A menu item must have either onClickFunction or submenu or both menuItems: [/* { id: 'remove', // ID of menu item content: 'remove', // Display content of menu item tooltipText: 'remove', // Tooltip text for menu item image: {src : "remove.svg", width : 12, height : 12, x : 6, y : 4}, // menu icon // Filters the elements to have this menu item on cxttap // If the selector is not truthy no elements will have this menu item on cxttap selector: 'node, edge', onClickFunction: function () { // The function to be executed on click console.log('remove element'); }, disabled: false, // Whether the item will be created as disabled show: false, // Whether the item will be shown or not hasTrailingDivider: true, // Whether the item will have a trailing divider coreAsWell: false // Whether core instance have this item on cxttap submenu: [] // Shows the listed menuItems as a submenu for this item. An item must have either submenu or onClickFunction or both. }, { id: 'hide', content: 'hide', tooltipText: 'hide', selector: 'node, edge', onClickFunction: function () { console.log('hide element'); }, disabled: true }, { id: 'add-node', content: 'add node', tooltipText: 'add node', image: {src : "add.svg", width : 12, height : 12, x : 6, y : 4}, selector: 'node', coreAsWell: true, onClickFunction: function () { console.log('add node'); } }*/ ], // css classes that menu items will have menuItemClasses: [ // add class names to this list ], // css classes that context menu will have contextMenuClasses: [ // add class names to this list ], // Indicates that the menu item has a submenu. If not provided default one will be used submenuIndicator: { src: 'assets/submenu-indicator-default.svg', width: 12, height: 12 } }; ``` **Note:** `selector` and `coreAsWell` options are ignored for the items that are inside a submenu. Their visiblity depends on their root parent's visibility. ## API ### Instance API ```js var instance = cy.contextMenus(options); ``` #### `instance.isActive()` * Returns whether the extension is active. #### `instance.appendMenuItem(item, parentID = undefined)` * Appends given menu item to the menu items list. * If parentID is specified, the item is inserted to the submenu of the item with parentID. * If the parent has no submenu then it will automatically be created. * If not specified item will be inserted to the root of the contextmenu #### `instance.appendMenuItems(items, parentID = undefined)` * Same with above but takes an array of items #### `instance.removeMenuItem(itemID)` * Removes the menu item with given ID and its submenu along with #### `instance.setTrailingDivider(itemID, status)` * Sets whether the menuItem with given ID will have a following divider #### `instance.insertBeforeMenuItem(item, existingItemID)` * Inserts given item before the existingitem #### `instance.moveToSubmenu(itemID, options = null)` * Moves the item with given ID to the submenu of the parent with the given ID or to root with the specified options * If `options` is a `string`, then it is the id of the parent * If `options` is a `{ selector?: string, coreAsWell?: boolean }`, then old properties are overwritten by them and the menu item is moved to the root. If it doesn't have either properties item is **not moved**. * If `options` is null or not provided, then it is just moved to the root #### `instance.moveBeforeOtherMenuItem(itemID, existingItemID)` * Inserts the `item` before the `existingItem` and moves it to the submenu that contains the `existingItem` #### `instance.disableMenuItem(itemID)` * Disables the menu item with given ID. #### `instance.enableMenuItem(itemID)` * Enables the menu item with given ID. #### `instance.showMenuItem(itemID)` * Shows the menu item with given ID. #### `instance.hideMenuItem(itemID)` * Hides the menu item with given ID. #### `instance.destroy()` * Destroys the extension instance #### `instance.swapItems(x, y)` * Changes the order of items. `x` and `y` are id of context menu items to be swapped #### `instance.getOptions()` * Returns the used options ### Other API #### `cy.contextMenus('get')` * Returns the existing instance to the extension ## Build targets * `npm run build` : Build `./src/**` into `cytoscape-edge-editing.js` in production environment and minimize the file. * `npm run build:dev` : Build `./src/**` into `cytoscape-edge-editing.js` in development environment without minimizing the file. ## Publishing instructions This project is set up to automatically be published to npm and bower. To publish: 1. Build the extension : `npm run build` 1. Commit the build : `git commit -am "Build for release"` 1. Bump the version number and tag: `npm version major|minor|patch` 1. Push to origin: `git push && git push --tags` 1. Publish to npm: `npm publish .` 1. If publishing to bower for the first time, you'll need to run `bower register cytoscape-context-menus https://github.com/iVis-at-Bilkent/cytoscape.js-context-menus.git` ## Team * [Hasan Balcı](https://github.com/hasanbalci), [Ugur Dogrusoz](https://github.com/ugurdogrusoz) of [i-Vis at Bilkent University](http://www.cs.bilkent.edu.tr/~ivis) ### Alumni * [Metin Can Siper](https://github.com/metincansiper) and [Onur Sahin](https://github.com/onsah)

JavaScript Libraries & Components Diagramming & Flowcharts
89 Github Stars
cytoscape.js-undo-redo
Open Source

cytoscape.js-undo-redo

cytoscape-undo-redo ================================================================================ ## Description A Cytsocape.js extension to control actions on Cytoscape.js graph, also providing built-in functionalities for common Cytoscape.js operations like dragging nodes, adding/removing nodes, etc. distributed under [The MIT License](https://opensource.org/licenses/MIT). Please cite the following paper when using this extension: U. Dogrusoz , A. Karacelik, I. Safarli, H. Balci, L. Dervishi, and M.C. Siper, "[Efficient methods and readily customizable libraries for managing complexity of large networks](https://doi.org/10.1371/journal.pone.0197238)", PLoS ONE, 13(5): e0197238, 2018. ## Demo Click [here](http://ivis-at-bilkent.github.io/cytoscape.js-undo-redo/demo.html) for demo ## API ```javascript var cy = cytoscape({...}); var ur = cy.undoRedo(options); ``` `cy.undoRedo(options, dontInit)` Sets options. Also, dontInit can be left blank and is to be used in extensions to set default actions of an extension. `ur.action( actionName, actionFunction, undoFunction)` Register action with its undo function & action name. actionFunction's return value will be used to call undoFunction by argument and vice versa. This function is chainable: `ur.action(...).action(...)` `ur.do(actionName, args)` Calls registered function with action name actionName via actionFunction(args) * `args.firstTime` is reserved. The reason behind is on first call of actionFunction takes a parameter with property `args.firstTime = true` (if args is object or array). After first call, it's set to false. `ur.undo()` Undo last action. Returns arguments that are passed to redo. `ur.redo()` Redo last action. Returns arguments that are passed to undo. `ur.undoAll()` Undo all actions in undo stack. `ur.redoAll()` Redo all actions in redo stack. `cy.on("undo", function(actionName, args){} )` Calls registered function with action name actionName via actionFunction(args) `cy.on("redo", function(actionName, args){} )` Calls registered function with action name actionName via actionFunction(args) *Note that args are returned from opposite action like (undo => redo || redo => undo) `ur.isUndoStackEmpty()` Get whether undo stack is empty (namely is undoable) `ur.isRedoStackEmpty()` Get whether undo stack is empty (namely is redoable) `ur.getUndoStack()` Gets actions (with their args) in undo stack `ur.getRedoStack()` Gets actions (with their args) in redo stack `ur.reset(undos, redos)` If arguments are provided, overrides undo and redo stacks. Otherwise, undo and redo stacks are cleared. ## Default Options ```javascript var options = { isDebug: false, // Debug mode for console messages actions: {},// actions to be added undoableDrag: true, // Whether dragging nodes are undoable can be a function as well stackSizeLimit: undefined, // Size limit of undo stack, note that the size of redo stack cannot exceed size of undo stack ready: function () { // callback when undo-redo is ready } } var ur = cy.undoRedo(options); // Can also be set whenever wanted. ``` ## Events Parameters:<br> actionName: Name of the action.<br> args: Arguments passed to the action.<br> res: The value returned when the function is executed. This value is to be passed to redo function in afterUndo case and it will be passed to undo function in afterDo/afterRedo cases.<br> `.on("beforeUndo", function(event, actionName, args){ })` `.on("afterUndo", function(event, actionName, args, res){ })` `.on("beforeRedo", function(event, actionName, args){ })` `.on("afterRedo", function(event, actionName, args, res){ })` `.on("beforeDo", function(event, actionName, args){ })` `.on("afterDo", function(event, actionName, args, res){ })` ## Default Actions (Undoable/Redoable) * Default actions can be run by the same way like `ur.do("remove", "#spec")` * Undoable dragging can be disabled through options `undoableDrag: false` `.do("add", eleObj)` http://js.cytoscape.org/#cy.add `.do("remove", eles/selector)` http://js.cytoscape.org/#cy.remove `.do("layout", args)` http://js.cytoscape.org/#core/layout ```javascript var args = { options: {}, // layout options eles: null // if not null eles.layout will be called. } ``` `.do("changeParent", args)` http://js.cytoscape.org/#eles.move (Just for the nodes and regards the new positions of the nodes as well) ```javascript var args = { parentData: parentData, // It keeps the newParentId (Just an id for each nodes for the first time) nodes: nodes, // Nodes to move the new parent posDiffX: diffX, // How the positions of the nodes will change in 'X' axis after they are moved the new parent posDiffY: diffY, // How the positions of the nodes will change in 'Y' axis after they are moved the new parent callback: function(eles) {} // optional - a function to be called after the change has occured, on the newly created elements } ``` * Following actions take argument(s) instead of extending `.do("restore", eles/selector)` http://js.cytoscape.org/#eles.restore `.do("clone", eles/selector)` http://js.cytoscape.org/#eles.restore `.do("select", eles/selector)` http://js.cytoscape.org/#eles.select `.do("unselect", eles/selector)` http://js.cytoscape.org/#eles.unselect `.do("move", args)` http://js.cytoscape.org/#eles.move ```javascript var args = { eles: ..., // eles/selector location: ... // as is in docs } ``` * The `batch` action can execute several actions at the same time. Those actions can then be undone as a whole. `.do("batch", actionList)` ```javascript var actionList = [{ name: ..., // name of the action param: ... // object containing the parameters as you would pass them to said action }, {...}, // a second action to be executed ... ] ``` ## Example ```javascript function deleteEles(eles){ return eles.remove(); } function restoreEles(eles){ return eles.restore(); } ur.action("deleteEles", deleteEles, restoreEles); // register var selecteds = cy.$(":selected"); ur.do("deleteEles", selecteds); // ur.undo(); ur.redo(); ``` * Note that default `remove` default action above has the same functionality and also supports string selectors like `#spec`. ## Dependencies * Cytoscape.js ^3.3.0 ## Usage instructions Download the library: * via npm: `npm install cytoscape-undo-redo`, * via bower: `bower install cytoscape-undo-redo`, or * via direct download in the repository (probably from a tag). `require()` the library as appropriate for your project: CommonJS: ```js var cytoscape = require('cytoscape'); var undoRedo = require('cytoscape-undo-redo'); undoRedo( cytoscape ); // register extension ``` AMD: ```js require(['cytoscape', 'cytoscape-undo-redo'], function( cytoscape, undoRedo ){ undoRedo( cytoscape ); // register extension }); ``` Plain HTML/JS has the extension registered for you automatically, because no `require()` is needed. ## Publishing instructions This project is set up to automatically be published to npm and bower. To publish: 1. Set the version number environment variable: `export VERSION=1.2.3` 1. Publish: `gulp publish` 1. If publishing to bower for the first time, you'll need to run `bower register cytoscape-undo-redo https://github.com/iVis-at-Bilkent/cytoscape.js-undo-redo.git` ## Team * [Selim Firat Yilmaz](https://github.com/mrsfy), [Metin Can Siper](https://github.com/metincansiper), [Ugur Dogrusoz](https://github.com/ugurdogrusoz) of [i-Vis at Bilkent University](http://www.cs.bilkent.edu.tr/~ivis)

JavaScript Libraries & Components Diagramming & Flowcharts
49 Github Stars
cytoscape.js-edge-editing
Open Source

cytoscape.js-edge-editing

cytoscape-edge-editing ================================================================================ ## Description A Cytoscape.js extension enabling interactive editing of edge bend and control points for segment and unbundled bezier edges, respectively. It also allows for reconnection of edges to other source/target nodes. The extension is distributed under [The MIT License](https://opensource.org/licenses/MIT). * The term 'anchor' will be used here and in the code to refer to bend and control points collectively. * To highlight anchor positions of an edge you should select the edge and unselect any other edges. Note that in determining the edge to highlight the anchor positions we assume that the unvisible edges are not selected. * To add an anchor select the edge and unselect any other edge, right click where you want to add the anchor and click 'Add Bend Point' or 'Add Control Point' on the context menu (requires 'cytoscape.js-context-menus' extension). The context menu will distiguish between the edges and it will not be possible to a bend point on an unbundled bezier edge and vice versa. * Bend points or control points can be added to edges which are not of type segments or unbundled bezier. The edge will then become segemetns or unbundled bezier accordingly. * To remove an anchor select the edge and unselect any other edge, right click on the anchor and click 'Remove Bend Point' or 'Remove Control Point' on the context menu (requires 'cytoscape.js-context-menus' extension). * To move an anchor drag and drop it when the edge is the only selected edge. * Alternatively, * You can click anywhere on the edge (if it is the only selected edge) to introduce and relocate an anchor by dragging. * A bend point is removed if it is dropped near the line segment between its two neighbours. * Drag and drop can also be used to quickly create and drag an anchor on a highlighted edge. The anchor type will be decided based on the edge type. This will not work with edges which are not segments or unbundled bezier. * To reconnect an edge, select the handle (source or target), drag and drop on the new (source or target) node. <img src="edge-editing-animated-demo.gif" width="600"> Please cite the following paper when using this extension: U. Dogrusoz , A. Karacelik, I. Safarli, H. Balci, L. Dervishi, and M.C. Siper, "[Efficient methods and readily customizable libraries for managing complexity of large networks](https://doi.org/10.1371/journal.pone.0197238)", PLoS ONE, 13(5): e0197238, 2018. Here is a demo: <p align="center"> <a href="https://ivis-at-bilkent.github.io/cytoscape.js-edge-editing/demo.html"><img src="https://www.cs.bilkent.edu.tr/~ivis/images/demo1.png" height=42px></a> </p> ## Dependencies * Cytoscape.js ^3.3.0 * Konva ^7.0.3 * cytoscape-undo-redo.js(optional) ^1.0.1 * cytoscape-context-menus.js(optional) ^2.0.0 ## Usage instructions Download the library: * via npm: `npm install cytoscape-edge-editing`, * via bower: `bower install cytoscape-edge-editing`, or * via direct download in the repository (probably from a tag). `require()` the library as appropriate for your project: CommonJS: ```js var cytoscape = require('cytoscape'); var konva = require('konva'); var edgeEditing = require('cytoscape-edge-editing'); edgeEditing( cytoscape, konva ); // register extension ``` AMD: ```js require(['cytoscape', 'cytoscape-edge-editing', 'konva'], function( cytoscape, edge-editing, konva ){ edge-editing( cytoscape, konva ); // register extension }); ``` Plain HTML/JS has the extension registered for you automatically, because no `require()` is needed. ## API ```js var instance = cy.edgeEditing( options ); ``` An instance has a number of functions available: ```js /* * Get anchors of the given edge in an array A, * A[2 * i] is the x coordinate and A[2 * i + 1] is the y coordinate * of the ith anchor. (Returns undefined if the curve style is not segments nor unbundled bezier) */ instance.getAnchorsAsArray(ele); // Initilize anchors for the given edges using 'options.bendPositionsFunction' and 'options.controlPositionsFunction' instance.initAnchorPoints(eles); // Removes anchor with some index from an edge instance.deleteSelectedAnchor(ele, index); // Get type of an edge as `bend`, `control` or `none` instance.getEdgeType(ele); ``` You can also get an existing instance: ```js cy.edgeEditing('get'); // Returns undefined if the extension is not initialized yet ``` Or you can check if the extension is initilized before ```js cy.edgeEditing('initialized'); ``` ## Default Options ```js var options = { // A function parameter to get bend point positions, should return positions of bend points bendPositionsFunction: function(ele) { return ele.data('bendPointPositions'); }, // Return true to draw rounded corners for the bend points. Requires Cytoscape^3.29.0 bendCornersIsRoundFunction: function(ele) { return false; }, // A function parameter to get control point positions, should return positions of control points controlPositionsFunction: function(ele) { return ele.data('controlPointPositions'); }, // A function parameter to set bend point positions bendPointPositionsSetterFunction: function(ele, bendPointPositions) { ele.data('bendPointPositions', bendPointPositions); }, // A function parameter to set bend point positions controlPointPositionsSetterFunction: function(ele, controlPointPositions) { ele.data('controlPointPositions', controlPointPositions); }, // whether to initilize bend and control points on creation of this extension automatically initAnchorsAutomatically: true, // the classes of those edges that should be ignored ignoredClasses: [], // whether the bend editing operations are undoable (requires cytoscape-undo-redo.js) undoable: false, // the size of bend and control point shape is obtained by multipling width of edge with this parameter anchorShapeSizeFactor: 3, // z-index value of the canvas in which bend points are drawn zIndex: 999, /*An option that controls the distance (in pixels) within which a bend point is considered near the line segment between its two neighbors and will be automatically removed min value = 0 , max value = 20 , values less than 0 are set to 0 and values greater than 20 are set to 20 */ bendRemovalSensitivity : 8, // to not show a menu item, pass `false` for corresponding menu item title. Below are 6 menu item titles. // title of add bend point menu item (User may need to adjust width of menu items according to length of this option) addBendMenuItemTitle: "Add Bend Point", // title of remove bend point menu item (User may need to adjust width of menu items according to length of this option) removeBendMenuItemTitle: "Remove Bend Point", // title of remove all bend points menu item removeAllBendMenuItemTitle: "Remove All Bend Points", // title of add control point menu item (User may need to adjust width of menu items according to length of this option) addControlMenuItemTitle: "Add Control Point", // title of remove control point menu item (User may need to adjust width of menu items according to length of this option) removeControlMenuItemTitle: "Remove Control Point", // title of remove all control points menu item removeAllControlMenuItemTitle: "Remove All Control Points", // whether the bend and control points can be moved by arrows moveSelectedAnchorsOnKeyEvents: function () { return true; }, // Can be a function or boolean. If `false`, edge reconnection won't be active. If `true`, connects edge to its new source/target as usual. // If a function is given, the function will be called with parameters: newSource.id(), newTarget.id(), edge.data(), location handleReconnectEdge: true, // Can be `false` or `true`. If `false`, it won't interact with anchors (control and bend points). If `false`, it won't show any context menu items as well. handleAnchors: true, // this function checks validation of the edge and its new source/target validateEdge: function (edge, newSource, newTarget) { return 'valid'; }, // this function is called with reconnected edge if reconnected edge is not valid according to `validateEdge` function actOnUnsuccessfulReconnection: undefined, // specifically for edge-editing menu items, whether trailing dividers should be used useTrailingDividersAfterContextMenuOptions: false, // Enable / disable drag creation of anchor points when there is at least one anchor already on the edge enableCreateAnchorOnDrag: true, // size of anchor point can be auto changed to compensate the impact of zoom enableFixedAnchorSize: false, // automatically remove anchor (bend point) if its previous segment and next segment is almost in a same line enableRemoveAnchorMidOfNearLine: true, // edge reconnection handles can be shown with select or hover events isShowHandleOnHover: false, anchorColor: '#000000', // default anchor color is black endPointColor: '#000000' // default endpoint color is black }; ``` ## Build targets * `npm run build` : Build `./src/**` into `cytoscape-edge-editing.js` in production environment and minimize the file. * `npm run build:dev` : Build `./src/**` into `cytoscape-edge-editing.js` in development environment without minimizing the file. ## Publishing instructions This project is set up to automatically be published to npm and bower. To publish: 1. Build the extension : `npm run build` 1. Commit the build : `git commit -am "Build for release"` 1. Bump the version number and tag: `npm version major|minor|patch` 1. Push to origin: `git push && git push --tags` 1. Publish to npm: `npm publish .` 1. If publishing to bower for the first time, you'll need to run `bower register cytoscape-edge-editing https://github.com/iVis-at-Bilkent/cytoscape.js-edge-editing.git` ## Team * [Muhammed Salih Altun](https://github.com/msalihaltun), [Gledis Zeneli](https://github.com/gledis69), [Ugur Dogrusoz](https://github.com/ugurdogrusoz) of [i-Vis at Bilkent University](http://www.cs.bilkent.edu.tr/~ivis) ### Alumni * [Metin Can Siper](https://github.com/metincansiper), [Ahmet Candiroglu](https://github.com/ahmetcandiroglu)

JavaScript Libraries & Components Diagramming & Flowcharts
47 Github Stars
cytoscape.js-node-editing
Open Source

cytoscape.js-node-editing

cytoscape-node-editing ================================================================================ ## Description A Cytoscape.js extension to provide certain node editing functionality as follows: - grapples to resize nodes, - a visual cue to resize node to its label, and - ability to move selected nodes with arrow keys (accelerator keys *Alt* and *Shift* result in slower and faster moves, respectively), distributed under [The MIT License](https://opensource.org/licenses/MIT). <img src="node-editing-animated-demo.gif" width="340"> Please cite the following paper when using this extension: U. Dogrusoz , A. Karacelik, I. Safarli, H. Balci, L. Dervishi, and M.C. Siper, "[Efficient methods and readily customizable libraries for managing complexity of large networks](https://doi.org/10.1371/journal.pone.0197238)", PLoS ONE, 13(5): e0197238, 2018. ## Demo Here are demos: **simple** and **undoable**, respectively: <p align="center"> <a href="https://ivis-at-bilkent.github.io/cytoscape.js-node-editing/demo.html" title="Simple"><img src="https://www.cs.bilkent.edu.tr/~ivis/images/demo1.png" height=42px></a> &emsp; <a href="https://ivis-at-bilkent.github.io/cytoscape.js-node-editing/undoable_demo.html" title="Undoable"><img src="https://www.cs.bilkent.edu.tr/~ivis/images/demo2.png" height=42px></a> </p> ## Default Options ```js cy.nodeEditing({ padding: 5, // spacing between node and grapples/rectangle undoable: true, // and if cy.undoRedo exists grappleSize: 8, // size of square dots grappleColor: "green", // color of grapples grappleStrokeColor: "black", // stroke color of the grapples grappleStrokeWidth: 0, // stroke width of the grapples grappleCornerRadius: 0, // corner radius of the grapples inactiveGrappleStroke: "inside 1px blue", boundingRectangleLineDash: [4, 8], // line dash of bounding rectangle boundingRectangleLineColor: "red", boundingRectangleLineWidth: 1.5, zIndex: 999, minWidth: function (node) { var data = node.data("resizeMinWidth"); return data ? data : 15; }, // a function returns min width of node minHeight: function (node) { var data = node.data("resizeMinHeight"); return data ? data : 15; }, // a function returns min height of node // Getters for some style properties the defaults returns ele.css('property-name') // you are encouraged to override these getters getCompoundMinWidth: function(node) { return node.css('min-width'); }, getCompoundMinHeight: function(node) { return node.css('min-height'); }, getCompoundMinWidthBiasRight: function(node) { return node.css('min-width-bias-right'); }, getCompoundMinWidthBiasLeft: function(node) { return node.css('min-width-bias-left'); }, getCompoundMinHeightBiasTop: function(node) { return node.css('min-height-bias-top'); }, getCompoundMinHeightBiasBottom: function(node) { return node.css('min-height-bias-bottom'); }, // These optional functions will be executed to set the width/height of a node in this extension // Using node.css() is not a recommended way (http://js.cytoscape.org/#eles.style) to do this. Therefore, // overriding these defaults so that a data field or something like that will be used to set node dimentions // instead of directly calling node.css() is highly recommended (Of course this will require a proper // setting in the stylesheet). setWidth: function(node, width) { node.css('width', width); }, setHeight: function(node, height) { node.css('height', height); }, isFixedAspectRatioResizeMode: function (node) { return node.is(".fixedAspectRatioResizeMode") },// with only 4 active grapples (at corners) isNoResizeMode: function (node) { return node.is(".noResizeMode, :parent") }, // no active grapples isNoControlsMode: function (node) { return node.is(".noControlsMode") }, // no controls - do not draw grapples cursors: { // See http://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor // May take any "cursor" css property default: "default", // to be set after resizing finished or mouseleave inactive: "not-allowed", nw: "nw-resize", n: "n-resize", ne: "ne-resize", e: "e-resize", se: "se-resize", s: "s-resize", sw: "sw-resize", w: "w-resize" }, // enable resize content cue according to the node resizeToContentCueEnabled: function (node) { return true; }, // handle resize to content with given function // default function resizes node according to the label resizeToContentFunction: undefined, // select position of the resize to content cue // options: 'top-left', 'top-right', 'bottom-left', 'bottom-right' resizeToContentCuePosition: 'bottom-right', // relative path of the resize to content cue image resizeToContentCueImage: '/node_modules/cytoscape-node-editing/resizeCue.svg', enableMovementWithArrowKeys: true, autoRemoveResizeToContentCue: false, }); ``` ## API `var api = cy.nodeEditing('get')` To get the extension instance after initialization. `api.refreshGrapples()` Refresh rendered node grapples if any. It is an expensive operation and is supposed to be called in rare cases (When it is really needed). `api.removeGrapples()` Remove grapples while node is selected. This is useful when a node is selected but no need to show grapples. ## Dependencies * Cytoscape.js ^3.2.0 * jquery ^1.7.0 || ^2.0.0 || ^3.0.0 * konva ^7.0.3 * cytoscape-undo-redo ^1.0.10 (optional) ## Usage instructions Download the library: * via npm: `npm install cytoscape-node-editing`, * via bower: `bower install cytoscape-node-editing`, or * via direct download in the repository (probably from a tag). `require()` the library as appropriate for your project: CommonJS: ```js var cytoscape = require('cytoscape'); var nodeEditing = require('cytoscape-node-editing'); var konva = require('konva'); nodeEditing( cytoscape, jQuery, konva ); // register extension ``` AMD: ```js require(['cytoscape', 'cytoscape-node-editing', 'jquery', 'konva'], function( cytoscape, nodeEditing, jQuery, konva ){ nodeEditing( cytoscape, jQuery, konva ); // register extension }); ``` Plain HTML/JS has the extension registered for you automatically, because no `require()` is needed. ## Emitted Events `cy.on("nodeediting.resizestart", function(e, type, node){ })` `cy.on("nodeediting.resizeend", function(e, type, node){ })` `cy.on("nodeediting.resizedrag", function(e, type, node){ })` `cy.on("nodeediting.resizetocontent", function(e, node){ })` `type` param can be `topleft`, `topcenter`, `topright`, `centerright`, `bottomright`, `bottomcenter`, `bottomleft`, `centerleft` `node` param corresponds to currently resizing node. ## Build targets * `npm run build` : Build `./src/**` into `cytoscape-edge-editing.js` in production environment and minimize the file. * `npm run build:dev` : Build `./src/**` into `cytoscape-edge-editing.js` in development environment without minimizing the file. ## Publishing instructions This project is set up to automatically be published to npm and bower. To publish: 1. Build the extension : `npm run build` 1. Commit the build : `git commit -am "Build for release"` 1. Bump the version number and tag: `npm version major|minor|patch` 1. Push to origin: `git push && git push --tags` 1. Publish to npm: `npm publish .` 1. If publishing to bower for the first time, you'll need to run `bower register cytoscape-node-editing https://github.com/iVis-at-Bilkent/cytoscape.js-node-editing.git` ## Team * [Muhammed Salih Altun](https://github.com/msalihaltun), [Ugur Dogrusoz](https://github.com/ugurdogrusoz) of [i-Vis at Bilkent University](http://www.cs.bilkent.edu.tr/~ivis) ### Alumni * [Metin Can Siper](https://github.com/metincansiper), [Ahmet Candiroglu](https://github.com/ahmetcandiroglu), [Selim Firat Yilmaz](https://github.com/mrsfy)

JavaScript Libraries & Components Diagramming & Flowcharts
27 Github Stars
cytoscape.js-autopan-on-drag
Open Source

cytoscape.js-autopan-on-drag

cytoscape-autopan-on-drag ================================================================================ ## Description A Cytsocape.js extension to automatically pan when nodes are out of canvas bounds distributed under [The MIT License](https://opensource.org/licenses/MIT). Please cite the following paper when using this extension: U. Dogrusoz , A. Karacelik, I. Safarli, H. Balci, L. Dervishi, and M.C. Siper, "[Efficient methods and readily customizable libraries for managing complexity of large networks](https://doi.org/10.1371/journal.pone.0197238)", PLoS ONE, 13(5): e0197238, 2018. ## Dependencies * Cytoscape.js ^2.7.0 || ^3.0.0" ## Demo [Click for the demo](https://ivis-at-bilkent.github.io/cytoscape.js-autopan-on-drag/demo.html) ## Usage instructions Download the library: * via npm: `npm install cytoscape-autopan-on-drag`, * via bower: `bower install cytoscape-autopan-on-drag`, or * via direct download in the repository (probably from a tag). `require()` the library as appropriate for your project: CommonJS: ```js var cytoscape = require('cytoscape'); var autopanOnDrag = require('cytoscape-autopan-on-drag'); autopanOnDrag( cytoscape ); // register extension ``` AMD: ```js require(['cytoscape', 'cytoscape-autopan-on-drag'], function( cytoscape, autopanOnDrag ){ autopanOnDrag( cytoscape ); // register extension }); ``` Plain HTML/JS has the extension registered for you automatically, because no `require()` is needed. ## Default Options ```js var options = { enabled: true, // Whether the extension is enabled on register selector: 'node', // Which elements will be affected by this extension speed: 1 // Speed of panning when elements exceed canvas bounds }; ``` ## API ```js var instance = cy.autopanOnDrag( options ); ``` An instance has a number of functions available: ```js instance.enable(); // enable the instance instance.disable(); // disable the instance ``` You can also get an existing instance: ```js cy.autopanOnDrag('get'); ``` ## Publishing instructions This project is set up to automatically be published to npm and bower. To publish: 1. Set the version number environment variable: `export VERSION=1.2.3` 1. Publish: `gulp publish` 1. If publishing to bower for the first time, you'll need to run `bower register cytoscape-autopan-on-drag https://github.com/iVis-at-Bilkent/cytoscape.js-autopan-on-drag.git` ## Team * [Metin Can Siper](https://github.com/metincansiper), [Ugur Dogrusoz](https://github.com/ugurdogrusoz) of [i-Vis at Bilkent University](http://www.cs.bilkent.edu.tr/~ivis)

JavaScript Libraries & Components Diagramming & Flowcharts
13 Github Stars