![](\"expand-collapse-extension-demo.gif\")
\n \n ![](\"expand-collapse-extension-edge-demo.gif\")
\n\n \n \n \n
\nDemo with custom cue image \nUndoable demo \nCollapsing edges and nodes demo\n
\n\n## API\n\n- Note that compounds are nodes.\n\n`cy.expandCollapse(options)`\nTo initialize the extension with given options.\n\n`var api = cy.expandCollapse('get')`\nTo get the extension instance after initialization.\n\n- Following functions get options parameter to apply during a particular event unlike the function above.\n\n`api.collapse(nodes, options)`\nCollapse given nodes, extend options with given param.\n\n`api.collapseRecursively(nodes, options)`\nCollapse given nodes recursively, extend options with given param.\n\n`api.collapseCluster(nodeIds, clusterId, clusterColorClassesPriorities, opts)`\nCollapse given nodes in the given cluster\n\n`api.collapseAll(options)`\nCollapse all nodes on graph (recursively), extend options with given param.\n\n`api.expand(nodes, options)`\nExpand given nodes, extend options with given param.\n\n`api.expandCluster(nodeIds, clusterId, clusterColorClassesPriorities, opts)`\nExpand given nodes in the given cluster\n\n`api.expandRecursively(nodes, options)`\nExpand given nodes recursively, extend options with given param.\n\n`api.expandAll(options)`\nExpand all nodes on graph (recursively), extend options with given param.\n\n`api.isExpandable(node)`\nGet whether node is expandable (or is collapsed)\n\n`api.isCollapsible(node)`\nGet whether node is collapsible.\n\n`api.expandableNodes(nodes)`\nGet expandable ones inside given nodes if nodes parameter is not specified consider all nodes\n\n`api.collapsibleNodes(nodes)`\nGet collapsible ones inside given nodes if nodes parameter is not specified consider all nodes\n\n`api.setOptions(options)`\nResets the options to the given parameter.\n\n`api.setOption(name, value)`\nSets the value of the option given by the name to the given value.\n\n`api.extendOptions(options)`\nExtend the current options with the given options.\n\n`api.getCollapsedChildren(node)`\nGet the children of the given collapsed node which are removed during collapse operation\n\n`api.getCollapsedChildrenRecursively(node)`\nGet collapsed children recursively including nested collapsed children. Returned value includes edges and nodes, use selector to get edges or nodes.\n\n`api.getAllCollapsedChildrenRecursively()`\nGet collapsed children of all collapsed nodes recursively. Returned value includes edges and nodes, use selector to get edges or nodes.\n\n`api.clearVisualCue()`\nForces the visual cue to be cleared. It is to be called in extreme cases.\n\n`api.enableCue()`\nEnable rendering of visual cue.\n\n`api.disableCue()`\nDisable rendering of visual cue.\n\n`api.getParent(nodeId)`\nGet the parent of a node given its node id. Useful to reach parent of a node removed because of collapse operation.\n\n`api.collapseEdges(edges,options)`\nCollapse the given edges if all the given edges are between same two nodes and number of edges passed is at least 2. Does nothing otherwise.\n\n`api.expandEdges(edges){`\nExpand the given collapsed edges\n\n`api.collapseEdgesBetweenNodes(nodes, options)`\nCollapse all edges between the set of given nodes.\n\n`api.expandEdgesBetweenNodes(nodes)`\nExpand all collapsed edges between the set of given nodes\n\n`api.collapseAllEdges(options)`\nCollapse all edges in the graph.\n\n`api.expandAllEdges()`\nExpand all edges in the graph.\n\n`api.loadJson(jsonStr)`\nLoad elements from JSON string.\n\n`api.saveJson(elems, filename)`\nReturn elements in JSON format and saves them to a file if a file name is provided via `filename` parameter. Default value for `elems` is all the elements.\n\n## Events\n\nNotice that following events are performed for _each_ node that is collapsed/expanded. Also, notice that any post-processing layout is performed _after_ the event.\n\n`cy.nodes().on(\"expandcollapse.beforecollapse\", function(event) { var node = this; ... })` Triggered before a node is collapsed\n\n`cy.nodes().on(\"expandcollapse.aftercollapse\", function(event) { var node = this; ... })` Triggered after a node is collapsed\n\n`cy.nodes().on(\"expandcollapse.beforeexpand\", function(event) { var node = this; ... })` Triggered before a node is expanded\n\n`cy.nodes().on(\"expandcollapse.afterexpand\", function(event) { var node = this; ... })` Triggered after a node is expanded\n\n`cy.edges().on(\"expandcollapse.beforecollapseedge\", function(event) { var edge = this; ... })` Triggered before an edge is collapsed\n\n`cy.edges().on(\"expandcollapse.aftercollapseedge\", function(event) { var edge = this; ... })` Triggered after an edge is collapsed\n\n`cy.edges().on(\"expandcollapse.beforeexpandedge\", function(event) { var edge = this; ... })` Triggered before an edge is expanded\n\n`cy.edges().on(\"expandcollapse.afterexpandedge\", function(event) { var edge = this; ... })` Triggered after an edge is expanded\n\n## Default Options\n\n```javascript\nvar options = {\n layoutBy: null, // for rearrange after expand/collapse. It's just layout options or whole layout function. Choose your side!\n groupLayoutBy: null, // for rearrange group nodes after expand/collapse. It's just layout options or whole layout function. Choose your side!\n fisheye: true, // whether to perform fisheye view after expand/collapse you can specify a function too\n animate: true, // whether to animate on drawing changes you can specify a function too\n animationDuration: 1000, // when animate is true, the duration in milliseconds of the animation\n ready: function () {}, // callback when expand/collapse initialized\n undoable: true, // and if undoRedoExtension exists,\n\n cueEnabled: true, // Whether cues are enabled\n expandCollapseCuePosition: \"top-left\", // default cue position is top left you can specify a function per node too\n expandCollapseCueSize: 12, // size of expand-collapse cue\n expandCollapseCueLineSize: 8, // size of lines used for drawing plus-minus icons\n expandCueImage: undefined, // image of expand icon if undefined draw regular expand cue\n collapseCueImage: undefined, // image of collapse icon if undefined draw regular collapse cue\n expandCollapseCueSensitivity: 1, // sensitivity of expand-collapse cues\n\n edgeTypeInfo: \"edgeType\", //the name of the field that has the edge type, retrieved from edge.data(), can be a function\n groupEdgesOfSameTypeOnCollapse: false,\n allowNestedEdgeCollapse: true,\n zIndex: 999, // z-index value of the canvas in which cue ımages are drawn\n layoutHandler: function () {}, // layout function to be called after expand/collapse\n allowReArrangeLayout: true, // whether to rearrange layout after expand/collapse\n customLayout: false, // whether to use custom layout\n shouldSaveFinalPositions: false, // whether to save final positions of all nodes; when all groups are expanded\n avoidExpandingClusters: true, // whether to include clusters in the expandAll operation\n supportMapId: \"\",\n};\n```\n\n## Default Undo/Redo Actions\n\n`ur.do(\"collapse\", { nodes: eles, options: opts)` Equivalent of eles.collapse(opts)\n\n`ur.do(\"expand\", { nodes: eles, options: opts)` Equivalent of eles.expand(opts)\n\n`ur.do(\"collapseRecursively\", { nodes: eles, options: opts)` Equivalent of eles.collapseRecursively(opts)\n\n`ur.do(\"expandRecursively\", { nodes: eles, options: opts)` Equivalent of eles.expandRecursively(opts)\n\n`ur.do(\"collapseAll\", { options: opts)` Equivalent of cy.collapseAll(opts)\n\n`ur.do(\"expandAll\", { options: opts })` Equivalent of cy.expandAll(opts)\n\n`ur.do(\"collapseEdges\", { edges: eles, options: opts})` Equivalent of eles.collapseEdges(opts)\n\n`ur.do(\"expandEdges\", { edges: eles})` Equivalent of eles.expandEdges()\n\n`ur.do(\"collapseEdgesBetweenNodes\", { nodes: eles, options: opts})` Equivalent of eles.collapseEdgesBetweenNodes(opts)\n\n`ur.do(\"expandEdgesBetweenNodes\", { nodes: eles})` Equivalent of eles.expandEdgesBetweenNodes()\n\n`ur.do(\"collapseAllEdges\", {options: opts)}` Equivalent of cy.collapseAllEdges(opts)\n\n`ur.do(\"expandAllEdges\")`Equivalent of cy.expandAllEdges()\n\n## Elements Style\n\n- Collapsed nodes have 'cy-expand-collapse-collapsed-node' class.\n- Meta edges (edges from/to collapsed nodes) have 'cy-expand-collapse-meta-edge' class.\n- Collapsed edges have 'cy-expand-collapse-collapsed-edge' class.\n- Collapsed edges data have 'directionType' field which can be either:\n - 'unidirection' if all the edges that are collapsed into this edge have the same direction (all have same source and same target)\n or\n - 'bidirection' if the edges that are collapsed into this edge have different direction (different target and/or source)\n- Collapsed edges data have a field that holds the type, the field name is as defined in options but if it is not defined in options or was defined as a function it will be named 'edgeType'\n\n## Dependencies\n\n- Cytoscape.js ^3.3.0\n- cytoscape-dagre ^2.5.0\n- cytoscape-fcose ^2.2.0\n\n## Usage instructions\n\nDownload the library:\n\n- via npm: `npm install nr-cytoscape-expand-collapse`,\n- via bower: `bower install nr-cytoscape-expand-collapse`, or\n\n`require()` the library as appropriate for your project:\n\nCommonJS:\n\n```js\nvar cytoscape = require(\"cytoscape\");\nvar expandCollapse = require(\"cytoscape-expand-collapse\");\n\nexpandCollapse(cytoscape); // register extension\n```\n\nAMD:\n\n```js\nrequire([\"cytoscape\", \"cytoscape-expand-collapse\"], function (\n cytoscape,\n expandCollapse\n) {\n expandCollapse(cytoscape); // register extension\n});\n```\n\nPlain HTML/JS has the extension registered for you automatically, because no `require()` is needed.\n\n## Build targets\n\n- `npm run build` : Build `./src/**` into `cytoscape-expand-collapse.js` in production environment and minimize the file.\n- `npm run build:dev` : Build `./src/**` into `cytoscape-expand-collapse.js` in development environment without minimizing the file.\n\n## Publishing instructions\n\nTo publish:\n\n1. Build the extension : `npm run build`\n1. Bump the version number in package.json\n1. Bump the version number in package-lock.json `npm i`\n1. Stage the changes: `git add .`\n1. Commit the build : `git commit -m \"your-commit-msg\"`\n1. Push to origin: `git push origin HEAD`\n1. login to npm : `npm login`\n1. Publish to npm: `npm publish`\n","readmeFilename":"README.md"}