├── documentation ├── md │ ├── demos.md │ ├── core │ │ ├── notation.md │ │ ├── isDestroyed.md │ │ ├── viewport.md │ │ ├── extent.md │ │ ├── onRender.md │ │ ├── unmount.md │ │ ├── promiseOn.md │ │ ├── autolock.md │ │ ├── core.md │ │ ├── autoungrabify.md │ │ ├── getElementById.md │ │ ├── autounselectify.md │ │ ├── emit.md │ │ ├── panningEnabled.md │ │ ├── zoomingEnabled.md │ │ ├── userPanningEnabled.md │ │ ├── userZoomingEnabled.md │ │ ├── boxSelectionEnabled.md │ │ ├── offRender.md │ │ ├── delay.md │ │ ├── stop.md │ │ ├── forceRender.md │ │ ├── fit.md │ │ ├── one.md │ │ ├── center.md │ │ ├── pan.md │ │ ├── mount.md │ │ ├── reset.md │ │ ├── collection.md │ │ ├── panBy.md │ │ ├── animate.md │ │ ├── removeListener.md │ │ ├── on.md │ │ ├── destroy.md │ │ ├── png.md │ │ ├── resize.md │ │ ├── layout.md │ │ ├── elements.md │ │ ├── add.md │ │ ├── remove.md │ │ └── jpg.md │ ├── layout │ │ ├── emit.md │ │ ├── events.md │ │ ├── on.md │ │ ├── one.md │ │ ├── removeListener.md │ │ ├── manipulation.md │ │ ├── promiseOn.md │ │ ├── stop.md │ │ ├── run.md │ │ └── intro.md │ ├── collection │ │ ├── removeCss.md │ │ ├── lock.md │ │ ├── grabify.md │ │ ├── panify.md │ │ ├── select.md │ │ ├── unlock.md │ │ ├── ungrabify.md │ │ ├── unpanify.md │ │ ├── unselect.md │ │ ├── selectify.md │ │ ├── unselectify.md │ │ ├── addClass.md │ │ ├── compoundNodes.md │ │ ├── shift.md │ │ ├── removeClass.md │ │ ├── absoluteComplement.md │ │ ├── flashClass.md │ │ ├── source.md │ │ ├── target.md │ │ ├── incomers.md │ │ ├── outgoers.md │ │ ├── symmetricDifference.md │ │ ├── algorithms.md │ │ ├── connectedEdges.md │ │ ├── contains.md │ │ ├── sources.md │ │ ├── successors.md │ │ ├── targets.md │ │ ├── connectedNodes.md │ │ ├── predecessors.md │ │ ├── edgesTo.md │ │ ├── edgesWith.md │ │ ├── hasClass.md │ │ ├── renderedCss.md │ │ ├── is.md │ │ ├── on.md │ │ ├── eq.md │ │ ├── promiseOn.md │ │ ├── anySame.md │ │ ├── allAre.md │ │ ├── intersection.md │ │ ├── removeScratch.md │ │ ├── positions.md │ │ ├── allAreNeighbors.md │ │ ├── numericStyleUnits.md │ │ ├── same.md │ │ ├── size.md │ │ ├── emit.md │ │ ├── group.md │ │ ├── map.md │ │ ├── kruskal.md │ │ ├── union.md │ │ ├── commonAncestors.md │ │ ├── difference.md │ │ ├── closenessCentrality.md │ │ ├── some.md │ │ ├── every.md │ │ ├── filter.md │ │ ├── pannable.md │ │ ├── segmentPoints.md │ │ ├── toggleClass.md │ │ ├── codirectedEdges.md │ │ ├── move.md │ │ ├── classes.md │ │ ├── delay.md │ │ ├── jsons.md │ │ ├── once.md │ │ ├── animate.md │ │ ├── reduce.md │ │ ├── closenessCentralityNormalized.md │ │ ├── stop.md │ │ ├── pageRank.md │ │ ├── parallelEdges.md │ │ ├── kargerStein.md │ │ ├── max.md │ │ ├── min.md │ │ ├── position.md │ │ ├── boundingBox.md │ │ ├── forEach.md │ │ ├── restore.md │ │ ├── betweennessCentrality.md │ │ ├── affinityPropagation.md │ │ ├── sort.md │ │ ├── degreeCentrality.md │ │ ├── markovClustering.md │ │ ├── neighborhood.md │ │ ├── removeListener.md │ │ ├── hierarchicalClustering.md │ │ ├── one.md │ │ ├── remove.md │ │ ├── diff.md │ │ ├── collection.md │ │ ├── floydWarshall.md │ │ ├── layoutDimensions.md │ │ ├── layout.md │ │ ├── style.md │ │ ├── degree.md │ │ ├── fuzzyCMeans.md │ │ ├── degreeCentralityNormalized.md │ │ ├── removeData.md │ │ ├── controlPoints.md │ │ ├── midpoint.md │ │ ├── merge.md │ │ ├── aStar.md │ │ ├── unmerge.md │ │ ├── data.md │ │ ├── bellmanFord.md │ │ ├── numericStyle.md │ │ ├── json.md │ │ ├── dijkstra.md │ │ ├── kMedoids.md │ │ ├── kMeans.md │ │ ├── breadthFirstSearch.md │ │ └── depthFirstSearch.md │ ├── layouts │ │ ├── circle.md │ │ ├── grid.md │ │ ├── preset.md │ │ ├── random.md │ │ ├── null.md │ │ ├── concentric.md │ │ ├── breadthfirst.md │ │ └── cose.md │ ├── animation │ │ ├── play.md │ │ ├── progress.md │ │ ├── pause.md │ │ ├── apply.md │ │ ├── reverse.md │ │ ├── promise.md │ │ └── stop.md │ ├── animations.md │ └── architecture.md ├── CNAME ├── demos │ ├── 2abfc41c86c1e3cb0700 │ ├── 173313aba1f31cae49a5 │ ├── 18504640d9a03c178fff │ ├── 7b511e1f48ffd044ad66 │ ├── f70c9e45c43f40f7dfe1 │ ├── 0365589fdb70b58af282 │ ├── 04030586763520be8d7a │ ├── 29419ca0e6430a7185a5 │ ├── 2ebdc40f1c2540de6cf0 │ ├── 546dd8ca4872cc87106a │ ├── 5b192c88616af2f75344 │ ├── 621d51ea7de19608127e │ ├── 689efca4fcb0fd05671b │ ├── 7e2f4d29ff7ef1a1bba5 │ ├── b7c65115947d9e0e8ec8 │ ├── cde4db55e581d10405f5 │ ├── e52c2fbc0b09edd6ec46 │ ├── eb861f83fb741628342f │ ├── f64e811fc3311414e083 │ ├── 310dca83ba6970812dd0 │ ├── 444dc95703caa319c147 │ ├── 57e7cc43342193d9d21a │ ├── 6c9907e7896f8ae23f9f │ ├── aedff159b0df05ccfaa5 │ ├── 59e38e9f20e25a293e44 │ ├── pie-style │ │ ├── style.css │ │ └── index.html │ ├── animated-bfs │ │ ├── style.css │ │ └── index.html │ ├── architecture │ │ ├── style.css │ │ └── index.html │ ├── compound-nodes │ │ ├── style.css │ │ └── index.html │ ├── genemania-export │ │ ├── style.css │ │ └── index.html │ ├── visual-style │ │ ├── style.css │ │ └── index.html │ ├── performance-tuning │ │ ├── style.css │ │ └── index.html │ ├── cose-layout │ │ ├── style.css │ │ ├── index.html │ │ └── code.js │ ├── dagre-layout │ │ ├── style.css │ │ └── index.html │ ├── grid-layout │ │ ├── style.css │ │ ├── code.js │ │ └── index.html │ ├── labels │ │ ├── style.css │ │ └── index.html │ ├── circle-layout │ │ ├── style.css │ │ ├── code.js │ │ └── index.html │ ├── concentric-layout │ │ ├── style.css │ │ ├── index.html │ │ └── code.js │ ├── edge-types │ │ ├── style.css │ │ ├── code.js │ │ └── index.html │ ├── node-types │ │ ├── style.css │ │ ├── cy-style.json │ │ ├── code.js │ │ └── index.html │ ├── spread-layout │ │ ├── style.css │ │ ├── code.js │ │ └── index.html │ ├── cose-bilkent-layout │ │ ├── style.css │ │ ├── code.js │ │ └── index.html │ ├── cose-bilkent-layout-compound │ │ ├── style.css │ │ ├── code.js │ │ └── index.html │ ├── qtip-extension │ │ ├── style.css │ │ ├── code.js │ │ └── index.html │ ├── initialisation │ │ ├── style.css │ │ └── index.html │ ├── linkout-example │ │ ├── style.css │ │ └── index.html │ ├── images-breadthfirst-layout │ │ ├── style.css │ │ └── index.html │ ├── edge-arrows │ │ ├── style.css │ │ ├── code.js │ │ ├── cy-style.json │ │ └── index.html │ ├── multiple-instances │ │ ├── style.css │ │ └── index.html │ ├── 6000-elements │ │ ├── style.css │ │ ├── code.js │ │ └── index.html │ └── wine-cheese-map │ │ └── index.html ├── font │ ├── FontAwesome.otf │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.ttf │ ├── fontawesome-webfont.woff │ └── fontawesome-webfont.woff2 ├── img │ ├── demos │ │ ├── cxtmenu.png │ │ ├── labels.png │ │ ├── popper.png │ │ ├── automove.png │ │ ├── edge-types.png │ │ ├── node-types.png │ │ ├── pie-style.png │ │ ├── animated-bfs.png │ │ ├── architecture.png │ │ ├── avsdf-layout.png │ │ ├── cola-layout.png │ │ ├── colajs-graph.png │ │ ├── cose-layout.png │ │ ├── dagre-layout.png │ │ ├── edge-arrows.png │ │ ├── edgehandles.png │ │ ├── euler-layout.png │ │ ├── fcose-layout.png │ │ ├── grid-layout.png │ │ ├── klay-layout.png │ │ ├── popper-tippy.png │ │ ├── visual-style.png │ │ ├── 6000-elements.png │ │ ├── circle-layout.png │ │ ├── cola-compound.png │ │ ├── compound-nodes.png │ │ ├── initialisation.png │ │ ├── linkout-example.png │ │ ├── qtip-extension.png │ │ ├── spread-layout.png │ │ ├── tokyo-railways.png │ │ ├── wine-cheese-map.png │ │ ├── angularjs-example.png │ │ ├── concentric-layout.png │ │ ├── genemania-export.png │ │ ├── cola-layout-compound.png │ │ ├── cose-bilkent-layout.png │ │ ├── multiple-instances.png │ │ ├── performance-tuning.png │ │ ├── compound-drag-and-drop.png │ │ ├── fcose-layout-compound.png │ │ ├── images-breadthfirst-layout.png │ │ └── cose-bilkent-layout-compound.png │ └── cytoscape-logo.png └── css │ └── highlight │ ├── pojoaque.jpg │ ├── school_book.png │ ├── brown_papersq.png │ ├── ascetic.css │ └── mono-blue.css ├── src ├── heap.js ├── version.js ├── window.js ├── cjs.js ├── core │ ├── animation │ │ └── start.js │ ├── export.js │ ├── style.js │ ├── data.js │ └── layout.js ├── extensions │ ├── index.js │ ├── renderer │ │ ├── index.js │ │ ├── null │ │ │ └── index.js │ │ ├── base │ │ │ ├── coord-ele-math │ │ │ │ ├── index.js │ │ │ │ └── nodes.js │ │ │ └── images.js │ │ └── canvas │ │ │ └── node-shapes.js │ └── layout │ │ └── index.js ├── util │ ├── sort.js │ ├── extend.js │ ├── strings.js │ ├── regex.js │ ├── memoize.js │ └── timing.js ├── collection │ ├── dimensions │ │ └── index.js │ ├── animation.js │ ├── group.js │ ├── cache-traversal-call.js │ └── algorithms │ │ └── index.js ├── selector │ ├── new-query.js │ └── matching.js ├── define │ ├── index.js │ └── events.js ├── test.js ├── map.js ├── style │ └── container.js └── index.js ├── test └── requires │ └── foo.js ├── debug ├── images │ ├── gnu.jpg │ ├── gnu.png │ ├── favicon.png │ └── gnu-small.png ├── style.js ├── livereload.js ├── notify.js ├── layout.js ├── filter.js └── toggles.js ├── .babelrc ├── .travis.yml ├── .npmignore ├── benchmark ├── single │ └── index.js ├── id-selector.js ├── all │ └── index.js ├── is.js ├── all-are.js ├── kruskal.js ├── page-rank.js ├── same.js ├── classes.js ├── floyd-warshall.js ├── has-class.js ├── any-same.js ├── contains.js ├── init.js ├── all-are-neighbors.js ├── bfs.js ├── dijkstra.js ├── dfs.js ├── bellman-ford.js ├── karger-stein.js ├── add-remove-class.js ├── degree-centrality.js ├── closeness-centrality.js ├── betweenness-centrality.js ├── a-star.js ├── collection-creation.js ├── add-remove.js ├── add.js ├── selector-filter.js └── graphs │ ├── abcde.json │ └── random.js ├── .gitignore ├── .eslintrc.json ├── .size-snapshot.json └── LICENSE /documentation/md/demos.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /documentation/md/core/notation.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /documentation/md/layout/emit.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /documentation/md/layout/events.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /documentation/md/layout/on.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /documentation/md/layout/one.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /documentation/md/core/isDestroyed.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /documentation/CNAME: -------------------------------------------------------------------------------- 1 | js.cytoscape.org 2 | -------------------------------------------------------------------------------- /documentation/md/collection/removeCss.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /documentation/md/layout/removeListener.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /documentation/demos/2abfc41c86c1e3cb0700: -------------------------------------------------------------------------------- 1 | ./labels -------------------------------------------------------------------------------- /src/heap.js: -------------------------------------------------------------------------------- 1 | export { default } from 'heap'; 2 | -------------------------------------------------------------------------------- /documentation/demos/173313aba1f31cae49a5: -------------------------------------------------------------------------------- 1 | ./pie-style -------------------------------------------------------------------------------- /documentation/demos/18504640d9a03c178fff: -------------------------------------------------------------------------------- 1 | ./edge-types -------------------------------------------------------------------------------- /documentation/demos/7b511e1f48ffd044ad66: -------------------------------------------------------------------------------- 1 | ./cose-layout -------------------------------------------------------------------------------- /documentation/demos/f70c9e45c43f40f7dfe1: -------------------------------------------------------------------------------- 1 | ./grid-layout -------------------------------------------------------------------------------- /documentation/demos/0365589fdb70b58af282: -------------------------------------------------------------------------------- 1 | ./spread-layout -------------------------------------------------------------------------------- /documentation/demos/04030586763520be8d7a: -------------------------------------------------------------------------------- 1 | ./circle-layout -------------------------------------------------------------------------------- /documentation/demos/29419ca0e6430a7185a5: -------------------------------------------------------------------------------- 1 | ./genemania-export -------------------------------------------------------------------------------- /documentation/demos/2ebdc40f1c2540de6cf0: -------------------------------------------------------------------------------- 1 | ./colajs-graph -------------------------------------------------------------------------------- /documentation/demos/546dd8ca4872cc87106a: -------------------------------------------------------------------------------- 1 | ./qtip-extension -------------------------------------------------------------------------------- /documentation/demos/5b192c88616af2f75344: -------------------------------------------------------------------------------- 1 | ./compound-nodes -------------------------------------------------------------------------------- /documentation/demos/621d51ea7de19608127e: -------------------------------------------------------------------------------- 1 | ./initialisation -------------------------------------------------------------------------------- /documentation/demos/689efca4fcb0fd05671b: -------------------------------------------------------------------------------- 1 | ./architecture -------------------------------------------------------------------------------- /documentation/demos/7e2f4d29ff7ef1a1bba5: -------------------------------------------------------------------------------- 1 | ./animated-bfs -------------------------------------------------------------------------------- /documentation/demos/b7c65115947d9e0e8ec8: -------------------------------------------------------------------------------- 1 | ./visual-style -------------------------------------------------------------------------------- /documentation/demos/cde4db55e581d10405f5: -------------------------------------------------------------------------------- 1 | ./wine-cheese-map -------------------------------------------------------------------------------- /documentation/demos/e52c2fbc0b09edd6ec46: -------------------------------------------------------------------------------- 1 | ./dagre-layout -------------------------------------------------------------------------------- /documentation/demos/eb861f83fb741628342f: -------------------------------------------------------------------------------- 1 | ./linkout-example -------------------------------------------------------------------------------- /documentation/demos/f64e811fc3311414e083: -------------------------------------------------------------------------------- 1 | ./tokyo-railways -------------------------------------------------------------------------------- /src/version.js: -------------------------------------------------------------------------------- 1 | export default process.env.VERSION; 2 | -------------------------------------------------------------------------------- /documentation/demos/310dca83ba6970812dd0: -------------------------------------------------------------------------------- 1 | ./multiple-instances -------------------------------------------------------------------------------- /documentation/demos/444dc95703caa319c147: -------------------------------------------------------------------------------- 1 | ./concentric-layout -------------------------------------------------------------------------------- /documentation/demos/57e7cc43342193d9d21a: -------------------------------------------------------------------------------- 1 | ./performance-tuning -------------------------------------------------------------------------------- /documentation/demos/6c9907e7896f8ae23f9f: -------------------------------------------------------------------------------- 1 | ./cose-bilkent-layout -------------------------------------------------------------------------------- /documentation/demos/aedff159b0df05ccfaa5: -------------------------------------------------------------------------------- 1 | ./images-breadthfirst-layout -------------------------------------------------------------------------------- /test/requires/foo.js: -------------------------------------------------------------------------------- 1 | function foo(){ 2 | return 'bar'; 3 | } 4 | -------------------------------------------------------------------------------- /documentation/demos/59e38e9f20e25a293e44: -------------------------------------------------------------------------------- 1 | ./cose-bilkent-layout-compound -------------------------------------------------------------------------------- /documentation/md/layouts/circle.md: -------------------------------------------------------------------------------- 1 | The `circle` layout puts nodes in a circle. -------------------------------------------------------------------------------- /documentation/md/layouts/grid.md: -------------------------------------------------------------------------------- 1 | The `grid` layout puts nodes in a well-spaced grid. -------------------------------------------------------------------------------- /documentation/md/collection/lock.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.$('#j').lock(); 5 | ``` -------------------------------------------------------------------------------- /debug/images/gnu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/debug/images/gnu.jpg -------------------------------------------------------------------------------- /debug/images/gnu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/debug/images/gnu.png -------------------------------------------------------------------------------- /documentation/md/collection/grabify.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.$('#j').grabify(); 5 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/panify.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.$('#j').panify(); 5 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/select.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.$('#j').select(); 5 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/unlock.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.$('#j').unlock(); 5 | ``` -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["@babel/preset-env", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /documentation/md/collection/ungrabify.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.$('#j').ungrabify(); 5 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/unpanify.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.$('#j').unpanify(); 5 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/unselect.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.$('#j').unselect(); 5 | ``` -------------------------------------------------------------------------------- /documentation/md/layouts/preset.md: -------------------------------------------------------------------------------- 1 | The `preset` layout puts nodes in the positions you specify manually. -------------------------------------------------------------------------------- /debug/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/debug/images/favicon.png -------------------------------------------------------------------------------- /documentation/md/collection/selectify.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.$('#j').unselectify(); 5 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/unselectify.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.$('#j').unselectify(); 5 | ``` -------------------------------------------------------------------------------- /documentation/md/layouts/random.md: -------------------------------------------------------------------------------- 1 | The `random` layout puts nodes in random positions within the viewport. -------------------------------------------------------------------------------- /debug/images/gnu-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/debug/images/gnu-small.png -------------------------------------------------------------------------------- /documentation/md/collection/addClass.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.$('#j, #e').addClass('foo'); 5 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/compoundNodes.md: -------------------------------------------------------------------------------- 1 | These functions apply to [compound graphs](#notation/compound-nodes). -------------------------------------------------------------------------------- /documentation/md/collection/shift.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.$('#j').shift({ x: 10, y: 20 }); 5 | ``` -------------------------------------------------------------------------------- /documentation/md/layouts/null.md: -------------------------------------------------------------------------------- 1 | The `null` layout puts all nodes at (0, 0). It's useful for debugging purposes. -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "8" 4 | - "10" 5 | sudo: false 6 | script: npm run ci:build 7 | -------------------------------------------------------------------------------- /documentation/md/collection/removeClass.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.$('#j, #e').removeClass('foo'); 5 | ``` -------------------------------------------------------------------------------- /src/window.js: -------------------------------------------------------------------------------- 1 | export default ( typeof window === 'undefined' ? null : window ); // eslint-disable-line no-undef 2 | -------------------------------------------------------------------------------- /documentation/md/collection/absoluteComplement.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.$('#j').absoluteComplement(); 5 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/flashClass.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.$('#j, #e').flashClass('foo', 1000); 5 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/source.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | var je = cy.$('#je'); 5 | 6 | je.source(); 7 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/target.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | var je = cy.$('#je'); 5 | 6 | je.target(); 7 | ``` -------------------------------------------------------------------------------- /documentation/font/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/font/FontAwesome.otf -------------------------------------------------------------------------------- /documentation/img/demos/cxtmenu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/cxtmenu.png -------------------------------------------------------------------------------- /documentation/img/demos/labels.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/labels.png -------------------------------------------------------------------------------- /documentation/img/demos/popper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/popper.png -------------------------------------------------------------------------------- /documentation/md/collection/incomers.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | Get incomers of `j`: 4 | ```js 5 | cy.$('#j').incomers(); 6 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/outgoers.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | Get outgoers of `j`: 4 | ```js 5 | cy.$('#j').outgoers(); 6 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/symmetricDifference.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.$('#j, #e, #k').symdiff('#j, #g'); 5 | ``` -------------------------------------------------------------------------------- /documentation/img/cytoscape-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/cytoscape-logo.png -------------------------------------------------------------------------------- /documentation/img/demos/automove.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/automove.png -------------------------------------------------------------------------------- /documentation/img/demos/edge-types.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/edge-types.png -------------------------------------------------------------------------------- /documentation/img/demos/node-types.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/node-types.png -------------------------------------------------------------------------------- /documentation/img/demos/pie-style.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/pie-style.png -------------------------------------------------------------------------------- /documentation/md/collection/algorithms.md: -------------------------------------------------------------------------------- 1 | 2 |
3 | -------------------------------------------------------------------------------- /documentation/md/collection/connectedEdges.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | var j = cy.$('#j'); 5 | 6 | j.connectedEdges(); 7 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/contains.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.$('#j, #e').contains( cy.$('#j') ); // true 5 | ``` 6 | -------------------------------------------------------------------------------- /documentation/md/collection/sources.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | var edges = cy.$('#je, #kg'); 5 | 6 | edges.sources(); 7 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/successors.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | Get successors of `j`: 4 | ```js 5 | cy.$('#j').successors(); 6 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/targets.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | var edges = cy.$('#je, #kg'); 5 | 6 | edges.targets(); 7 | ``` -------------------------------------------------------------------------------- /documentation/css/highlight/pojoaque.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/css/highlight/pojoaque.jpg -------------------------------------------------------------------------------- /documentation/img/demos/animated-bfs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/animated-bfs.png -------------------------------------------------------------------------------- /documentation/img/demos/architecture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/architecture.png -------------------------------------------------------------------------------- /documentation/img/demos/avsdf-layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/avsdf-layout.png -------------------------------------------------------------------------------- /documentation/img/demos/cola-layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/cola-layout.png -------------------------------------------------------------------------------- /documentation/img/demos/colajs-graph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/colajs-graph.png -------------------------------------------------------------------------------- /documentation/img/demos/cose-layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/cose-layout.png -------------------------------------------------------------------------------- /documentation/img/demos/dagre-layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/dagre-layout.png -------------------------------------------------------------------------------- /documentation/img/demos/edge-arrows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/edge-arrows.png -------------------------------------------------------------------------------- /documentation/img/demos/edgehandles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/edgehandles.png -------------------------------------------------------------------------------- /documentation/img/demos/euler-layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/euler-layout.png -------------------------------------------------------------------------------- /documentation/img/demos/fcose-layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/fcose-layout.png -------------------------------------------------------------------------------- /documentation/img/demos/grid-layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/grid-layout.png -------------------------------------------------------------------------------- /documentation/img/demos/klay-layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/klay-layout.png -------------------------------------------------------------------------------- /documentation/img/demos/popper-tippy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/popper-tippy.png -------------------------------------------------------------------------------- /documentation/img/demos/visual-style.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/visual-style.png -------------------------------------------------------------------------------- /documentation/md/collection/connectedNodes.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | var je = cy.$('#je'); 5 | 6 | je.connectedNodes(); 7 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/predecessors.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | Get predecessors of `j`: 4 | ```js 5 | cy.$('#j').predecessors(); 6 | ``` -------------------------------------------------------------------------------- /documentation/md/core/viewport.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.viewport({ 5 | zoom: 2, 6 | pan: { x: 100, y: 100 } 7 | }); 8 | ``` -------------------------------------------------------------------------------- /documentation/css/highlight/school_book.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/css/highlight/school_book.png -------------------------------------------------------------------------------- /documentation/font/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/font/fontawesome-webfont.eot -------------------------------------------------------------------------------- /documentation/font/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/font/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /documentation/font/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/font/fontawesome-webfont.woff -------------------------------------------------------------------------------- /documentation/img/demos/6000-elements.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/6000-elements.png -------------------------------------------------------------------------------- /documentation/img/demos/circle-layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/circle-layout.png -------------------------------------------------------------------------------- /documentation/img/demos/cola-compound.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/cola-compound.png -------------------------------------------------------------------------------- /documentation/img/demos/compound-nodes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/compound-nodes.png -------------------------------------------------------------------------------- /documentation/img/demos/initialisation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/initialisation.png -------------------------------------------------------------------------------- /documentation/img/demos/linkout-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/linkout-example.png -------------------------------------------------------------------------------- /documentation/img/demos/qtip-extension.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/qtip-extension.png -------------------------------------------------------------------------------- /documentation/img/demos/spread-layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/spread-layout.png -------------------------------------------------------------------------------- /documentation/img/demos/tokyo-railways.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/tokyo-railways.png -------------------------------------------------------------------------------- /documentation/img/demos/wine-cheese-map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/wine-cheese-map.png -------------------------------------------------------------------------------- /documentation/md/collection/edgesTo.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | var j = cy.$('#j'); 5 | var e = cy.$('#e'); 6 | 7 | j.edgesTo(e); 8 | ``` -------------------------------------------------------------------------------- /documentation/md/core/extent.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | This function returns a plain object bounding box with format `{ x1, y1, x2, y2, w, h }`. -------------------------------------------------------------------------------- /documentation/md/core/onRender.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.onRender(function(){ 5 | console.log('frame rendered'); 6 | }); 7 | ``` -------------------------------------------------------------------------------- /documentation/md/core/unmount.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | This function sets the instance to be headless after unmounting from the current container. -------------------------------------------------------------------------------- /documentation/css/highlight/brown_papersq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/css/highlight/brown_papersq.png -------------------------------------------------------------------------------- /documentation/font/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/font/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /documentation/img/demos/angularjs-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/angularjs-example.png -------------------------------------------------------------------------------- /documentation/img/demos/concentric-layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/concentric-layout.png -------------------------------------------------------------------------------- /documentation/img/demos/genemania-export.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/genemania-export.png -------------------------------------------------------------------------------- /documentation/md/collection/edgesWith.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | var j = cy.$('#j'); 5 | var e = cy.$('#e'); 6 | 7 | j.edgesWith(e); 8 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/hasClass.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | console.log( 'j has class `foo` : ' + cy.$('#j').hasClass('foo') ); 5 | ``` -------------------------------------------------------------------------------- /documentation/img/demos/cola-layout-compound.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/cola-layout-compound.png -------------------------------------------------------------------------------- /documentation/img/demos/cose-bilkent-layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/cose-bilkent-layout.png -------------------------------------------------------------------------------- /documentation/img/demos/multiple-instances.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/multiple-instances.png -------------------------------------------------------------------------------- /documentation/img/demos/performance-tuning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/performance-tuning.png -------------------------------------------------------------------------------- /documentation/md/collection/renderedCss.md: -------------------------------------------------------------------------------- 1 | Note that this function has the alias `ele.renderedStyle()`, which is interchangeable with `ele.renderedCss()`. -------------------------------------------------------------------------------- /documentation/img/demos/compound-drag-and-drop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/compound-drag-and-drop.png -------------------------------------------------------------------------------- /documentation/img/demos/fcose-layout-compound.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/fcose-layout-compound.png -------------------------------------------------------------------------------- /documentation/md/collection/is.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | var j = cy.$('#j'); 5 | 6 | console.log( 'j has weight > 50 ? ' + j.is('[weight > 50]') ); 7 | ``` -------------------------------------------------------------------------------- /documentation/img/demos/images-breadthfirst-layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/images-breadthfirst-layout.png -------------------------------------------------------------------------------- /documentation/md/collection/on.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.$('#j').on('tap', function(evt){ 5 | console.log( 'tap ' + evt.target.id() ); 6 | }); 7 | ``` 8 | -------------------------------------------------------------------------------- /documentation/md/core/promiseOn.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.pon('tap').then(function( event ){ 5 | console.log('tap promise fulfilled'); 6 | }); 7 | ``` 8 | -------------------------------------------------------------------------------- /documentation/img/demos/cose-bilkent-layout-compound.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tmcw/cytoscape.js/unstable/documentation/img/demos/cose-bilkent-layout-compound.png -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | documentation 2 | test 3 | debug 4 | gulpfile.js 5 | bower.json 6 | build 7 | node_modules 8 | snippets 9 | benchmark 10 | CONTRIBUTING.md 11 | .babelrc 12 | -------------------------------------------------------------------------------- /documentation/md/collection/eq.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | You may use `eles[i]` in place of `eles.eq(i)` as a more performant alternative. -------------------------------------------------------------------------------- /documentation/md/core/autolock.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | Enable: 4 | ```js 5 | cy.autolock( true ); 6 | ``` 7 | 8 | Disable: 9 | ```js 10 | cy.autolock( false ); 11 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/promiseOn.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.$('#j').pon('tap').then(function( event ){ 5 | console.log('tap promise fulfilled'); 6 | }); 7 | ``` 8 | -------------------------------------------------------------------------------- /documentation/md/core/core.md: -------------------------------------------------------------------------------- 1 | The core object is your interface to a graph. It is your entry point to Cytoscape.js: All of the library's features are accessed through this object. -------------------------------------------------------------------------------- /documentation/md/collection/anySame.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | var j = cy.$('#j'); 5 | var guys = cy.$('#j, #g, #k'); 6 | 7 | console.log( 'any same ? ' + j.anySame(guys) ); 8 | ``` -------------------------------------------------------------------------------- /documentation/md/core/autoungrabify.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | Enable: 4 | ```js 5 | cy.autoungrabify( true ); 6 | ``` 7 | 8 | Disable: 9 | ```js 10 | cy.autoungrabify( false ); 11 | ``` -------------------------------------------------------------------------------- /documentation/md/core/getElementById.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.getElementById('j'); 5 | ``` 6 | 7 | Using the shorter alias: 8 | 9 | ```js 10 | cy.$id('j'); 11 | ``` 12 | -------------------------------------------------------------------------------- /documentation/md/collection/allAre.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | var jAndE = cy.$('#j, #e'); 5 | 6 | console.log( 'j and e all have weight > 50 ? ' + jAndE.allAre('[weight > 50]') ); 7 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/intersection.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | var jNhd = cy.$('#j').neighborhood(); 5 | var eNhd = cy.$('#e').neighborhood(); 6 | 7 | jNhd.intersection( eNhd ); 8 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/removeScratch.md: -------------------------------------------------------------------------------- 1 | Note that `ele.removeScratch()` sets the scratchpad object for the specified namespace to `undefined`. This allows you to use meaningful `null` values. -------------------------------------------------------------------------------- /documentation/md/core/autounselectify.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | Enable: 4 | ```js 5 | cy.autounselectify( true ); 6 | ``` 7 | 8 | Disable: 9 | ```js 10 | cy.autounselectify( false ); 11 | ``` -------------------------------------------------------------------------------- /documentation/md/core/emit.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.on('tap', function(evt, f, b){ 5 | console.log('tap', f, b); 6 | }); 7 | 8 | cy.emit('tap', ['foo', 'bar']); 9 | ``` 10 | -------------------------------------------------------------------------------- /documentation/md/core/panningEnabled.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | Enable: 4 | ```js 5 | cy.panningEnabled( true ); 6 | ``` 7 | 8 | Disable: 9 | ```js 10 | cy.panningEnabled( false ); 11 | ``` -------------------------------------------------------------------------------- /documentation/md/core/zoomingEnabled.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | Enable: 4 | ```js 5 | cy.zoomingEnabled( true ); 6 | ``` 7 | 8 | Disable: 9 | ```js 10 | cy.zoomingEnabled( false ); 11 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/positions.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.nodes().positions(function( node, i ){ 5 | return { 6 | x: i * 100, 7 | y: 100 8 | }; 9 | }); 10 | ``` 11 | -------------------------------------------------------------------------------- /documentation/md/collection/allAreNeighbors.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | var j = cy.$('#j'); 5 | var gAndK = cy.$('#g, #k'); 6 | 7 | console.log( 'all neighbours ? ' + j.allAreNeighbors(gAndK) ); 8 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/numericStyleUnits.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | - `px` for pixels 4 | - `em` for ems 5 | - `%` for percent 6 | - `rad` for radians 7 | - `s` for seconds 8 | - `ms` for milliseconds 9 | -------------------------------------------------------------------------------- /documentation/md/collection/same.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | var heavies = cy.$('node[weight > 60]'); 5 | var guys = cy.$('#j, #g, #k'); 6 | 7 | console.log( 'same ? ' + heavies.same(guys) ); 8 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/size.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | Note that as an alternative, you may read `eles.length` instead of `eles.size()`. The two are interchangeable. -------------------------------------------------------------------------------- /documentation/md/core/userPanningEnabled.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | Enable: 4 | ```js 5 | cy.userPanningEnabled( true ); 6 | ``` 7 | 8 | Disable: 9 | ```js 10 | cy.userPanningEnabled( false ); 11 | ``` -------------------------------------------------------------------------------- /documentation/md/core/userZoomingEnabled.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | Enable: 4 | ```js 5 | cy.userZoomingEnabled( true ); 6 | ``` 7 | 8 | Disable: 9 | ```js 10 | cy.userZoomingEnabled( false ); 11 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/emit.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | var j = cy.$('#j'); 5 | 6 | j.on('tap', function(){ 7 | console.log('tap!!'); 8 | }); 9 | 10 | j.emit('tap'); // tap!! 11 | ``` 12 | -------------------------------------------------------------------------------- /documentation/md/core/boxSelectionEnabled.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | Enable: 4 | ```js 5 | cy.boxSelectionEnabled( true ); 6 | ``` 7 | 8 | Disable: 9 | ```js 10 | cy.boxSelectionEnabled( false ); 11 | ``` -------------------------------------------------------------------------------- /documentation/md/core/offRender.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | var handler; 5 | cy.onRender(handler = function(){ 6 | console.log('frame rendered'); 7 | }); 8 | 9 | cy.offRender( handler ); 10 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/group.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | The group strings are `'nodes'` for nodes and `'edges'` for edges. In general, you should be using `ele.isEdge()` and `ele.isNode()` instead of `ele.group()`. -------------------------------------------------------------------------------- /benchmark/single/index.js: -------------------------------------------------------------------------------- 1 | // set this to run just a single suite via `gulp benchmark-single` 2 | // (useful when working on a specific function) 3 | var suite = require('../selector-filter'); 4 | 5 | suite.run({ async: true }); 6 | -------------------------------------------------------------------------------- /documentation/md/core/delay.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy 5 | .animate({ 6 | fit: { eles: '#j' } 7 | }) 8 | 9 | .delay(1000) 10 | 11 | .animate({ 12 | fit: { eles: '#e' } 13 | }) 14 | ; 15 | ``` -------------------------------------------------------------------------------- /documentation/md/core/stop.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.animate({ 5 | fit: { eles: '#j' } 6 | }, { duration: 2000 }); 7 | 8 | // stop in the middle 9 | setTimeout(function(){ 10 | cy.stop(); 11 | }, 1000); 12 | ``` -------------------------------------------------------------------------------- /documentation/demos/pie-style/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px helvetica neue, helvetica, arial, sans-serif; 3 | } 4 | 5 | #cy { 6 | height: 100%; 7 | width: 100%; 8 | position: absolute; 9 | left: 0; 10 | top: 0; 11 | } -------------------------------------------------------------------------------- /documentation/md/collection/map.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | Get an array of node weights: 4 | ```js 5 | var weights = cy.nodes().map(function( ele ){ 6 | return ele.data('weight'); 7 | }); 8 | 9 | console.log(weights); 10 | ``` 11 | -------------------------------------------------------------------------------- /documentation/md/core/forceRender.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | This function forces the renderer to draw a new frame. It is useful for very specific edgecases, such as in certain UI extensions, but it should not be needed for most developers. 4 | -------------------------------------------------------------------------------- /src/cjs.js: -------------------------------------------------------------------------------- 1 | // an entrypoint to use the raw source in cjs projects 2 | // e.g. require('cytoscape/src/cjs') or setting an alias in your build tool of 'cytoscape':'cytoscape/src/cjs' 3 | 4 | module.exports = require('./index.js').default; 5 | -------------------------------------------------------------------------------- /documentation/demos/animated-bfs/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px helvetica neue, helvetica, arial, sans-serif; 3 | } 4 | 5 | #cy { 6 | height: 100%; 7 | width: 100%; 8 | position: absolute; 9 | left: 0; 10 | top: 0; 11 | } -------------------------------------------------------------------------------- /documentation/demos/architecture/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px helvetica neue, helvetica, arial, sans-serif; 3 | } 4 | 5 | #cy { 6 | height: 100%; 7 | width: 100%; 8 | position: absolute; 9 | left: 0; 10 | top: 0; 11 | } -------------------------------------------------------------------------------- /documentation/demos/compound-nodes/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px helvetica neue, helvetica, arial, sans-serif; 3 | } 4 | 5 | #cy { 6 | height: 100%; 7 | width: 100%; 8 | position: absolute; 9 | left: 0; 10 | top: 0; 11 | } -------------------------------------------------------------------------------- /documentation/demos/genemania-export/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px helvetica neue, helvetica, arial, sans-serif; 3 | } 4 | 5 | #cy { 6 | height: 100%; 7 | width: 100%; 8 | position: absolute; 9 | left: 0; 10 | top: 0; 11 | } -------------------------------------------------------------------------------- /documentation/demos/visual-style/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px helvetica neue, helvetica, arial, sans-serif; 3 | } 4 | 5 | #cy { 6 | height: 100%; 7 | width: 100%; 8 | position: absolute; 9 | left: 0; 10 | top: 0; 11 | } -------------------------------------------------------------------------------- /documentation/md/collection/kruskal.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | Note that this function runs Kruskal's algorithm on the subset of the graph in the calling collection. 4 | 5 | 6 | ## Examples 7 | 8 | ```js 9 | cy.elements().kruskal(); 10 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/union.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | With a collection: 4 | ```js 5 | var j = cy.$('#j'); 6 | var e = cy.$('#e'); 7 | 8 | j.union(e); 9 | ``` 10 | 11 | With a selector: 12 | ```js 13 | cy.$('#j').union('#e'); 14 | ``` -------------------------------------------------------------------------------- /documentation/demos/performance-tuning/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px helvetica neue, helvetica, arial, sans-serif; 3 | } 4 | 5 | #cy { 6 | position: absolute; 7 | left: 0; 8 | top: 0; 9 | bottom: 0; 10 | right: 0; 11 | } 12 | -------------------------------------------------------------------------------- /documentation/md/layouts/concentric.md: -------------------------------------------------------------------------------- 1 | The `concentric` layout positions nodes in concentric circles, based on a metric that you specify to segregate the nodes into levels. This layout sets the `concentric` value in [`ele.scratch()`](#ele.scratch). 2 | -------------------------------------------------------------------------------- /documentation/md/animation/play.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | var jAni = cy.$('#j').animation({ 5 | style: { 6 | 'background-color': 'red', 7 | 'width': 75 8 | }, 9 | duration: 1000 10 | }); 11 | 12 | jAni.play(); 13 | ``` 14 | -------------------------------------------------------------------------------- /src/core/animation/start.js: -------------------------------------------------------------------------------- 1 | function startAnimation( self, ani, now, isCore ){ 2 | let ani_p = ani._private; 3 | 4 | ani_p.started = true; 5 | ani_p.startTime = now - ani_p.progress * ani_p.duration; 6 | } 7 | 8 | export default startAnimation; 9 | -------------------------------------------------------------------------------- /documentation/md/collection/commonAncestors.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | You can get the closest common ancestor via `nodes.commonAncestors().first()` and the farthest via `nodes.commonAncestors().last()`, because the common ancestors are in descending order of closeness. -------------------------------------------------------------------------------- /documentation/md/core/fit.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | If no collection is specified, then the graph is fit to all nodes and edges in the graph. 4 | 5 | ## Examples 6 | 7 | Fit the graph on nodes `j` and `e`: 8 | ```js 9 | cy.fit( cy.$('#j, #e') ); 10 | ``` 11 | -------------------------------------------------------------------------------- /documentation/md/core/one.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.one('tap', 'node', function(){ 5 | console.log('tap!'); 6 | }); 7 | 8 | cy.$('node').eq(0).trigger('tap'); // tap! 9 | cy.$('node').eq(1).trigger('tap'); // nothing b/c already tapped 10 | ``` -------------------------------------------------------------------------------- /documentation/md/layouts/breadthfirst.md: -------------------------------------------------------------------------------- 1 | The `breadthfirst` layout puts nodes in a hierarchy, based on a breadthfirst traversal of the graph. It is best suited to trees and forests in its default top-down mode, and it is best suited to DAGs in its circle mode. 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .project 2 | .DS_Store 3 | .buildpath 4 | .versions 5 | node_modules 6 | npm-debug.log 7 | build 8 | build/* 9 | build/** 10 | documentation/slimerjs-*/** 11 | documentation/api/** 12 | documentation/download/*.zip 13 | benchmark/suite/cytoscape.js 14 | -------------------------------------------------------------------------------- /documentation/md/collection/difference.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | With a collection: 4 | ```js 5 | var j = cy.$('#j'); 6 | var nodes = cy.nodes(); 7 | 8 | nodes.difference(j); 9 | ``` 10 | 11 | With a selector: 12 | ```js 13 | cy.nodes().difference('#j'); 14 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/closenessCentrality.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | This function directly returns the numerical closeness centrality value for the specified root node. 4 | 5 | ## Examples 6 | 7 | ```js 8 | console.log( 'cc of j: ' + cy.$().cc({ root: '#j' }) ); 9 | ``` -------------------------------------------------------------------------------- /documentation/md/layout/manipulation.md: -------------------------------------------------------------------------------- 1 | Layouts have a set of functions available to them, which allow for more complex behaviour than the primary run-one-layout-at-a-time usecase. A new, developer accessible layout can be made via [`cy.layout()`](#core/visuals/cy.layout). 2 | -------------------------------------------------------------------------------- /documentation/md/layout/promiseOn.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | var layout = cy.layout({ name: 'random' }); 5 | 6 | layout.pon('layoutstop').then(function( event ){ 7 | console.log('layoutstop promise fulfilled'); 8 | }); 9 | 10 | layout.run(); 11 | ``` 12 | -------------------------------------------------------------------------------- /documentation/md/core/center.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | If no collection is specified, then the graph is centred on all nodes and edges in the graph. 4 | 5 | ## Examples 6 | 7 | Centre the graph on node `j`: 8 | ```js 9 | var j = cy.$('#j'); 10 | cy.center( j ); 11 | ``` 12 | -------------------------------------------------------------------------------- /debug/style.js: -------------------------------------------------------------------------------- 1 | /* global cy, $ */ 2 | 3 | (function(){ 4 | $("#string-stylesheet-apply-button").addEventListener("click", function(){ 5 | var stylesheetStr = $('#string-stylesheet').value; 6 | 7 | cy.style().fromString( stylesheetStr ).update(); 8 | }); 9 | }()); 10 | -------------------------------------------------------------------------------- /documentation/md/collection/some.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | var jAndE = cy.$('#j, #e'); 5 | var someHeavierThan50 = jAndE.some(function( ele ){ 6 | return ele.data('weight') > 50; 7 | }); 8 | 9 | console.log( 'some heavier than 50 ? ' + someHeavierThan50 ); 10 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/every.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | var jAndE = cy.$('#j, #e'); 5 | var everyHeavierThan50 = jAndE.every(function( ele ){ 6 | return ele.data('weight') > 50; 7 | }); 8 | 9 | console.log( 'every heavier than 50 ? ' + everyHeavierThan50 ); 10 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/filter.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | With a selector: 4 | 5 | ```js 6 | cy.nodes().filter('[weight > 50]'); 7 | ``` 8 | 9 | With a function: 10 | 11 | ```js 12 | cy.nodes().filter(function( ele ){ 13 | return ele.data('weight') > 50; 14 | }); 15 | ``` 16 | -------------------------------------------------------------------------------- /documentation/md/collection/pannable.md: -------------------------------------------------------------------------------- 1 | ## Description 2 | 3 | A pannable element allows passthrough panning: The user can pan the graph when dragging on the element. Thus, a pannable element is necessarily ungrabbable. 4 | 5 | By default, an edge is pannable and a node is not pannable. -------------------------------------------------------------------------------- /src/extensions/index.js: -------------------------------------------------------------------------------- 1 | import layout from './layout'; 2 | import renderer from './renderer'; 3 | 4 | export default [ 5 | { 6 | type: 'layout', 7 | extensions: layout 8 | }, 9 | 10 | { 11 | type: 'renderer', 12 | extensions: renderer 13 | } 14 | ]; 15 | -------------------------------------------------------------------------------- /src/util/sort.js: -------------------------------------------------------------------------------- 1 | export const ascending = ( a, b ) => { 2 | if( a < b ){ 3 | return -1; 4 | } else if( a > b ){ 5 | return 1; 6 | } else { 7 | return 0; 8 | } 9 | }; 10 | 11 | export const descending = ( a, b ) => { 12 | return -1 * ascending( a, b ); 13 | }; 14 | -------------------------------------------------------------------------------- /documentation/md/animations.md: -------------------------------------------------------------------------------- 1 | An animation represents a visible change in state over a duration of time for a single element. Animations can be generated via [`cy.animation()`](#cy.animation) (for animations on the viewport) and [`ele.animation()`](#ele.animation) (for animations on graph elements). 2 | -------------------------------------------------------------------------------- /documentation/md/collection/segmentPoints.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | While the segment points may be specified relatively in the stylesheet, this function returns the absolute [model positions](#notation/position) of the segment points. The points are specified in the order of source-to-target direction. 4 | -------------------------------------------------------------------------------- /documentation/md/collection/toggleClass.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | Toggle: 4 | ```js 5 | cy.$('#j, #e').toggleClass('foo'); 6 | ``` 7 | 8 | Toggle on: 9 | ```js 10 | cy.$('#j, #e').toggleClass('foo', true); 11 | ``` 12 | 13 | Toggle off: 14 | ```js 15 | cy.$('#j, #e').toggleClass('foo', false); 16 | ``` -------------------------------------------------------------------------------- /documentation/md/animation/progress.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | var jAni = cy.$('#j').animation({ 5 | style: { 6 | 'background-color': 'red', 7 | 'width': 75 8 | }, 9 | duration: 1000 10 | }); 11 | 12 | // set animation to 50% and then play 13 | jAni.progress(0.5).play(); 14 | ``` 15 | -------------------------------------------------------------------------------- /debug/livereload.js: -------------------------------------------------------------------------------- 1 | /* global document, location, window */ 2 | 3 | window.addEventListener('DOMContentLoaded', function(){ 4 | var script = document.createElement('script'); 5 | 6 | script.src = 'http://' + location.hostname + ':35729/livereload.js'; 7 | 8 | document.head.prepend( script ); 9 | }); 10 | -------------------------------------------------------------------------------- /documentation/md/collection/codirectedEdges.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | Two edges are said to be codirected if they connect the same two nodes in the same direction: The edges have the same source and target. 4 | 5 | ## Examples 6 | 7 | ```js 8 | cy.$('#je').codirectedEdges(); // only self in this case 9 | ``` 10 | -------------------------------------------------------------------------------- /documentation/demos/cose-layout/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: helvetica; 3 | font-size: 14px; 4 | } 5 | 6 | #cy { 7 | width: 100%; 8 | height: 100%; 9 | position: absolute; 10 | left: 0; 11 | top: 0; 12 | z-index: 999; 13 | } 14 | 15 | h1 { 16 | opacity: 0.5; 17 | font-size: 1em; 18 | } 19 | -------------------------------------------------------------------------------- /documentation/demos/dagre-layout/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: helvetica; 3 | font-size: 14px; 4 | } 5 | 6 | #cy { 7 | width: 100%; 8 | height: 100%; 9 | position: absolute; 10 | left: 0; 11 | top: 0; 12 | z-index: 999; 13 | } 14 | 15 | h1 { 16 | opacity: 0.5; 17 | font-size: 1em; 18 | } 19 | -------------------------------------------------------------------------------- /documentation/demos/grid-layout/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: helvetica; 3 | font-size: 14px; 4 | } 5 | 6 | #cy { 7 | width: 100%; 8 | height: 100%; 9 | position: absolute; 10 | left: 0; 11 | top: 0; 12 | z-index: 999; 13 | } 14 | 15 | h1 { 16 | opacity: 0.5; 17 | font-size: 1em; 18 | } 19 | -------------------------------------------------------------------------------- /documentation/demos/labels/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: helvetica, sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | #cy { 7 | position: absolute; 8 | left: 0; 9 | top: 0; 10 | right: 0; 11 | bottom: 0; 12 | z-index: 999; 13 | } 14 | 15 | h1 { 16 | opacity: 0.5; 17 | font-size: 1em; 18 | } 19 | -------------------------------------------------------------------------------- /src/collection/dimensions/index.js: -------------------------------------------------------------------------------- 1 | import * as util from '../../util'; 2 | import position from './position'; 3 | import bounds from './bounds'; 4 | import widthHeight from './width-height'; 5 | import edgePoints from './edge-points'; 6 | 7 | export default util.assign( {}, position, bounds, widthHeight, edgePoints ); 8 | -------------------------------------------------------------------------------- /documentation/demos/circle-layout/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: helvetica; 3 | font-size: 14px; 4 | } 5 | 6 | #cy { 7 | width: 100%; 8 | height: 100%; 9 | position: absolute; 10 | left: 0; 11 | top: 0; 12 | z-index: 999; 13 | } 14 | 15 | h1 { 16 | opacity: 0.5; 17 | font-size: 1em; 18 | } 19 | -------------------------------------------------------------------------------- /documentation/demos/concentric-layout/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: helvetica; 3 | font-size: 14px; 4 | } 5 | 6 | #cy { 7 | width: 100%; 8 | height: 100%; 9 | position: absolute; 10 | left: 0; 11 | top: 0; 12 | z-index: 999; 13 | } 14 | 15 | h1 { 16 | opacity: 0.5; 17 | font-size: 1em; 18 | } 19 | -------------------------------------------------------------------------------- /documentation/demos/edge-types/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: helvetica, sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | #cy { 7 | position: absolute; 8 | left: 0; 9 | top: 0; 10 | right: 0; 11 | bottom: 0; 12 | z-index: 999; 13 | } 14 | 15 | h1 { 16 | opacity: 0.5; 17 | font-size: 1em; 18 | } 19 | -------------------------------------------------------------------------------- /documentation/demos/node-types/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: helvetica, sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | #cy { 7 | position: absolute; 8 | left: 0; 9 | top: 0; 10 | right: 0; 11 | bottom: 0; 12 | z-index: 999; 13 | } 14 | 15 | h1 { 16 | opacity: 0.5; 17 | font-size: 1em; 18 | } 19 | -------------------------------------------------------------------------------- /documentation/demos/spread-layout/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: helvetica; 3 | font-size: 14px; 4 | } 5 | 6 | #cy { 7 | width: 100%; 8 | height: 100%; 9 | position: absolute; 10 | left: 0; 11 | top: 0; 12 | z-index: 999; 13 | } 14 | 15 | h1 { 16 | opacity: 0.5; 17 | font-size: 1em; 18 | } 19 | -------------------------------------------------------------------------------- /src/extensions/renderer/index.js: -------------------------------------------------------------------------------- 1 | import nullRenderer from './null'; 2 | import baseRenderer from './base'; 3 | import canvasRenderer from './canvas'; 4 | 5 | export default [ 6 | { name: 'null', impl: nullRenderer }, 7 | { name: 'base', impl: baseRenderer }, 8 | { name: 'canvas', impl: canvasRenderer } 9 | ]; 10 | -------------------------------------------------------------------------------- /documentation/demos/cose-bilkent-layout/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: helvetica; 3 | font-size: 14px; 4 | } 5 | 6 | #cy { 7 | width: 100%; 8 | height: 100%; 9 | position: absolute; 10 | left: 0; 11 | top: 0; 12 | z-index: 999; 13 | } 14 | 15 | h1 { 16 | opacity: 0.5; 17 | font-size: 1em; 18 | } 19 | -------------------------------------------------------------------------------- /documentation/demos/cose-bilkent-layout-compound/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: helvetica; 3 | font-size: 14px; 4 | } 5 | 6 | #cy { 7 | width: 100%; 8 | height: 100%; 9 | position: absolute; 10 | left: 0; 11 | top: 0; 12 | z-index: 999; 13 | } 14 | 15 | h1 { 16 | opacity: 0.5; 17 | font-size: 1em; 18 | } 19 | -------------------------------------------------------------------------------- /documentation/md/collection/move.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | This function moves the elements in-place, so no `remove` or `add` events are generated. A `move` event is emitted on the moved elements. 4 | 5 | ## Examples 6 | 7 | Move an edge: 8 | ```js 9 | var ej = cy.$('#ej'); 10 | 11 | ej = ej.move({ 12 | target: 'g' 13 | }); 14 | ``` -------------------------------------------------------------------------------- /src/selector/new-query.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Make a new query object 3 | * 4 | * @prop type {Type} The type enum (int) of the query 5 | * @prop checks List of checks to make against an ele to test for a match 6 | */ 7 | let newQuery = function(){ 8 | return { 9 | checks: [] 10 | }; 11 | }; 12 | 13 | export default newQuery; 14 | -------------------------------------------------------------------------------- /benchmark/id-selector.js: -------------------------------------------------------------------------------- 1 | var Suite = require('./suite'); 2 | var suite = new Suite('#id selector', { 3 | setup: function( cytoscape ){ 4 | return cytoscape({ elements: require('./graphs/gal') }); 5 | } 6 | }); 7 | 8 | suite 9 | .add( function( cy ) { 10 | cy.$('#381'); 11 | }) 12 | ; 13 | 14 | module.exports = suite; 15 | -------------------------------------------------------------------------------- /documentation/md/core/pan.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | This function pans the graph viewport origin to the specified rendered pixel position. 4 | 5 | ## Examples 6 | 7 | Pan the graph to (100, 100) rendered pixels. 8 | ```js 9 | cy.pan({ 10 | x: 100, 11 | y: 100 12 | }); 13 | 14 | console.log( cy.pan() ); // prints { x: 100, y: 100 } 15 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/classes.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | Remove all classes: 4 | 5 | ```js 6 | cy.nodes().classes([]); // array 7 | cy.nodes().classes(''); // space-separated string 8 | ``` 9 | 10 | Replace classes: 11 | 12 | ```js 13 | cy.nodes().classes(['foo']); // array 14 | cy.nodes().classes('foo'); // space-separated string 15 | ``` 16 | -------------------------------------------------------------------------------- /documentation/md/animation/pause.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | var j = cy.$('#j'); 5 | var jAni = j.animation({ 6 | style: { 7 | 'background-color': 'red', 8 | 'width': 75 9 | }, 10 | duration: 1000 11 | }); 12 | 13 | jAni.play(); 14 | 15 | // pause about midway 16 | setTimeout(function(){ 17 | jAni.pause(); 18 | }, 500); 19 | ``` 20 | -------------------------------------------------------------------------------- /documentation/md/collection/delay.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.nodes() 5 | .animate({ 6 | style: { 'background-color': 'blue' } 7 | }, { 8 | duration: 1000 9 | }) 10 | 11 | .delay( 1000 ) 12 | 13 | .animate({ 14 | style: { 'background-color': 'yellow' } 15 | }) 16 | ; 17 | 18 | console.log('Animating nodes...'); 19 | ``` -------------------------------------------------------------------------------- /benchmark/all/index.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var path = require('path'); 3 | var isJs = function( name ){ return name.match(/\.js$/) != null; }; 4 | var suiteFiles = fs.readdirSync( path.join(__dirname, '..') ).filter( isJs ); 5 | 6 | suiteFiles.forEach(function( fileName ){ 7 | var suite = require('../' + fileName); 8 | 9 | suite.run(); 10 | }); 11 | -------------------------------------------------------------------------------- /documentation/md/collection/jsons.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | This function returns the [plain JSON representation](#notation/elements-json) of all elements in the collection, the same format which is used at initialisation, in [`cy.add()`](#core/graph-manipulation/cy.add), etc. 4 | 5 | ## Examples 6 | 7 | ```js 8 | console.log( cy.elements().jsons() ); 9 | ``` 10 | -------------------------------------------------------------------------------- /documentation/md/core/mount.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | If the core instance is headless prior to calling `cy.mount()`, then the instance will no longer be headless and the visualisation will be shown in the specified container. If the core instance is non-headless prior to calling `cy.mount()`, then the visualisation is swapped from the prior container to the specified container. -------------------------------------------------------------------------------- /documentation/demos/qtip-extension/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px helvetica neue, helvetica, arial, sans-serif; 3 | position: absolute; 4 | width: 100%; 5 | height: 100%; 6 | left: 0; 7 | top: 0; 8 | margin: 0; 9 | padding: 0; 10 | } 11 | 12 | #cy { 13 | position: absolute; 14 | left: 0; 15 | top: 0; 16 | right: 0; 17 | bottom: 0; 18 | } 19 | -------------------------------------------------------------------------------- /src/collection/animation.js: -------------------------------------------------------------------------------- 1 | import define from '../define'; 2 | 3 | let elesfn = ({ 4 | animate: define.animate(), 5 | animation: define.animation(), 6 | animated: define.animated(), 7 | clearQueue: define.clearQueue(), 8 | delay: define.delay(), 9 | delayAnimation: define.delayAnimation(), 10 | stop: define.stop() 11 | }); 12 | 13 | export default elesfn; 14 | -------------------------------------------------------------------------------- /documentation/md/core/reset.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | This resets the viewport to the origin (0, 0) at zoom level 1. 4 | 5 | ## Examples 6 | 7 | ```js 8 | setTimeout( function(){ 9 | cy.pan({ x: 50, y: -100 }); 10 | }, 1000 ); 11 | 12 | setTimeout( function(){ 13 | cy.zoom( 2 ); 14 | }, 2000 ); 15 | 16 | setTimeout( function(){ 17 | cy.reset(); 18 | }, 3000 ); 19 | 20 | ``` -------------------------------------------------------------------------------- /documentation/demos/initialisation/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px helvetica neue, helvetica, arial, sans-serif; 3 | } 4 | 5 | #cy { 6 | height: 100%; 7 | width: 100%; 8 | position: absolute; 9 | left: 0; 10 | top: 0; 11 | } 12 | 13 | #info { 14 | color: #c88; 15 | font-size: 1em; 16 | position: absolute; 17 | z-index: -1; 18 | left: 1em; 19 | top: 1em; 20 | } -------------------------------------------------------------------------------- /documentation/demos/linkout-example/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px helvetica neue, helvetica, arial, sans-serif; 3 | } 4 | 5 | #cy { 6 | height: 100%; 7 | width: 100%; 8 | position: absolute; 9 | left: 0; 10 | top: 0; 11 | } 12 | 13 | #info { 14 | color: #c88; 15 | font-size: 1em; 16 | position: absolute; 17 | z-index: -1; 18 | left: 1em; 19 | top: 1em; 20 | } -------------------------------------------------------------------------------- /documentation/md/core/collection.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | This function is useful for building up collections. 4 | 5 | ## Examples 6 | 7 | Keep a collection of nodes that have been clicked: 8 | ```js 9 | var collection = cy.collection(); 10 | cy.nodes().on('click', function(e){ 11 | var clickedNode = e.target; 12 | 13 | collection = collection.union(clickedNode); 14 | }); 15 | ``` -------------------------------------------------------------------------------- /documentation/md/core/panBy.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | This function shifts the viewport relatively by the specified position in rendered pixels. That is, specifying a shift of 100 to the right means a translation of 100 on-screen pixels to the right. 4 | 5 | ## Examples 6 | 7 | Pan the graph 100 pixels to the right. 8 | ```js 9 | cy.panBy({ 10 | x: 100, 11 | y: 0 12 | }); 13 | ``` -------------------------------------------------------------------------------- /documentation/md/core/animate.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | Manual pan and zoom: 4 | ```js 5 | cy.animate({ 6 | pan: { x: 100, y: 100 }, 7 | zoom: 2 8 | }, { 9 | duration: 1000 10 | }); 11 | ``` 12 | 13 | Fit to elements: 14 | ```js 15 | var j = cy.$('#j'); 16 | 17 | cy.animate({ 18 | fit: { 19 | eles: j, 20 | padding: 20 21 | } 22 | }, { 23 | duration: 1000 24 | }); 25 | ``` -------------------------------------------------------------------------------- /documentation/demos/images-breadthfirst-layout/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px helvetica neue, helvetica, arial, sans-serif; 3 | } 4 | 5 | #cy { 6 | height: 100%; 7 | width: 100%; 8 | position: absolute; 9 | left: 0; 10 | top: 0; 11 | } 12 | 13 | #eat { 14 | position: absolute; 15 | left: 1em; 16 | top: 1em; 17 | font-size: 1em; 18 | z-index: -1; 19 | color: #c88; 20 | } -------------------------------------------------------------------------------- /documentation/md/animation/apply.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | This function allows you to step directly to a particular progress of the animation while it's paused. 4 | 5 | ## Examples 6 | 7 | ```js 8 | var jAni = cy.$('#j').animation({ 9 | style: { 10 | 'background-color': 'red', 11 | 'width': 75 12 | }, 13 | duration: 1000 14 | }); 15 | 16 | jAni.progress(0.5).apply(); 17 | ``` 18 | -------------------------------------------------------------------------------- /documentation/md/collection/once.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | For each event specified to this function, the handler function is triggered once. This is useful for one-off events that occur on just one element in the calling collection. 4 | 5 | ## Examples 6 | 7 | ```js 8 | cy.nodes().once('click', function(e){ 9 | var ele = e.target; 10 | console.log('clicked ' + ele.id()); 11 | }); 12 | ``` -------------------------------------------------------------------------------- /documentation/md/layout/stop.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | Calling `layout.stop()` stops an asynchronous (continuous) layout. It's useful if you want to prematurely stop a running layout. 4 | 5 | 6 | ## Examples 7 | 8 | ```js 9 | var layout = cy.layout({ name: 'cose' }); 10 | 11 | layout.run(); 12 | 13 | // some time later... 14 | setTimeout(function(){ 15 | layout.stop(); 16 | }, 100); 17 | ``` 18 | -------------------------------------------------------------------------------- /benchmark/is.js: -------------------------------------------------------------------------------- 1 | var Suite = require('./suite'); 2 | 3 | var a; 4 | 5 | var suite = new Suite('eles.is()', { 6 | setup: function( cytoscape ){ 7 | var cy = cytoscape({ elements: require('./graphs/gal') }); 8 | 9 | a = cy.nodes(); 10 | 11 | return cy; 12 | } 13 | }); 14 | 15 | suite 16 | .add( function( cy ) { 17 | a.is('node'); 18 | }) 19 | ; 20 | 21 | module.exports = suite; 22 | -------------------------------------------------------------------------------- /documentation/demos/node-types/cy-style.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "selector": "node", 3 | "style": { 4 | "shape": "data(type)", 5 | "label": "data(type)", 6 | "height": 40, 7 | "width": 40 8 | } 9 | }, { 10 | "selector": "node[points]", 11 | "style": { 12 | "shape-polygon-points": "data(points)", 13 | "label": "polygon\n(custom points)", 14 | "text-wrap": "wrap" 15 | } 16 | }] 17 | -------------------------------------------------------------------------------- /documentation/md/collection/animate.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | Note that you can specify only one of `position` and `renderedPosition`: You can not animate to two positions at once. 4 | 5 | ## Examples 6 | 7 | ```js 8 | cy.nodes().animate({ 9 | position: { x: 100, y: 100 }, 10 | style: { backgroundColor: 'red' } 11 | }, { 12 | duration: 1000 13 | }); 14 | 15 | console.log('Animating nodes...'); 16 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/reduce.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | Join the node IDs into a comma-separated string: 4 | 5 | ```js 6 | var initialValue = null; 7 | var fn = function( prevVal, ele, i, eles ){ 8 | if( prevVal ){ 9 | return prevVal + ',' + ele.id(); 10 | } else { 11 | return ele.id(); 12 | } 13 | }; 14 | var ids = cy.nodes().reduce( fn, initialValue ); 15 | 16 | console.log( ids ); 17 | ``` 18 | -------------------------------------------------------------------------------- /documentation/md/collection/closenessCentralityNormalized.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | This function returns an object of the form: 4 | 5 | ```js 6 | { 7 | /* returns the normalised closeness centrality of the specified node */ 8 | closeness: function( node ){ /* impl */ } 9 | } 10 | ``` 11 | 12 | ## Examples 13 | 14 | ```js 15 | var ccn = cy.$().ccn(); 16 | console.log( 'ccn of j: ' + ccn.closeness('#j') ); 17 | ``` -------------------------------------------------------------------------------- /benchmark/all-are.js: -------------------------------------------------------------------------------- 1 | var Suite = require('./suite'); 2 | 3 | var a; 4 | 5 | var suite = new Suite('eles.allAre()', { 6 | setup: function( cytoscape ){ 7 | var cy = cytoscape({ elements: require('./graphs/gal') }); 8 | 9 | a = cy.nodes(); 10 | 11 | return cy; 12 | } 13 | }); 14 | 15 | suite 16 | .add( function( cy ) { 17 | a.allAre('node'); 18 | }) 19 | ; 20 | 21 | module.exports = suite; 22 | -------------------------------------------------------------------------------- /benchmark/kruskal.js: -------------------------------------------------------------------------------- 1 | var eles; 2 | 3 | var Suite = require('./suite'); 4 | var suite = new Suite('eles.kruskal()', { 5 | setup: function( cytoscape ){ 6 | var cy = cytoscape({ elements: require('./graphs/gal') }); 7 | 8 | eles = cy.elements(); 9 | 10 | return cy; 11 | } 12 | }); 13 | 14 | suite 15 | .add( function( cy ) { 16 | eles.kruskal(); 17 | }) 18 | ; 19 | 20 | module.exports = suite; 21 | -------------------------------------------------------------------------------- /documentation/md/collection/stop.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | cy.nodes().animate({ 5 | style: { 'background-color': 'cyan' } 6 | }, { 7 | duration: 5000, 8 | complete: function(){ 9 | console.log('Animation complete'); 10 | } 11 | }); 12 | 13 | console.log('Animating nodes...'); 14 | 15 | setTimeout(function(){ 16 | console.log('Stopping nodes animation'); 17 | cy.nodes().stop(); 18 | }, 2500); 19 | ``` -------------------------------------------------------------------------------- /benchmark/page-rank.js: -------------------------------------------------------------------------------- 1 | var eles; 2 | 3 | var Suite = require('./suite'); 4 | var suite = new Suite('eles.pageRank()', { 5 | setup: function( cytoscape ){ 6 | var cy = cytoscape({ elements: require('./graphs/gal') }); 7 | 8 | eles = cy.elements(); 9 | 10 | return cy; 11 | } 12 | }); 13 | 14 | suite 15 | .add( function( cy ) { 16 | eles.pageRank({}); 17 | }) 18 | ; 19 | 20 | module.exports = suite; 21 | -------------------------------------------------------------------------------- /src/extensions/renderer/null/index.js: -------------------------------------------------------------------------------- 1 | function NullRenderer( options ){ 2 | this.options = options; 3 | this.notifications = 0; // for testing 4 | } 5 | 6 | let noop = function(){}; 7 | 8 | NullRenderer.prototype = { 9 | recalculateRenderedStyle: noop, 10 | notify: function(){ this.notifications++; }, 11 | init: noop, 12 | isHeadless: function(){ return true; } 13 | }; 14 | 15 | export default NullRenderer; 16 | -------------------------------------------------------------------------------- /benchmark/same.js: -------------------------------------------------------------------------------- 1 | var Suite = require('./suite'); 2 | 3 | var a, b; 4 | 5 | var suite = new Suite('eles.same()', { 6 | setup: function( cytoscape ){ 7 | var cy = cytoscape({ elements: require('./graphs/gal') }); 8 | 9 | a = cy.nodes(); 10 | b = cy.nodes(); 11 | 12 | return cy; 13 | } 14 | }); 15 | 16 | suite 17 | .add( function( cy ) { 18 | a.same(b); 19 | }) 20 | ; 21 | 22 | module.exports = suite; 23 | -------------------------------------------------------------------------------- /documentation/md/collection/pageRank.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | 4 | This function returns an object of the following form: 5 | 6 | ```js 7 | { 8 | /* function that computes the rank of a given node (either object or selector string) */ 9 | rank: function( node ){ /* impl */ } 10 | } 11 | ``` 12 | 13 | 14 | ## Examples 15 | 16 | ```js 17 | var pr = cy.elements().pageRank(); 18 | 19 | console.log('g rank: ' + pr.rank('#g')); 20 | ``` -------------------------------------------------------------------------------- /benchmark/classes.js: -------------------------------------------------------------------------------- 1 | var Suite = require('./suite'); 2 | 3 | var a; 4 | 5 | var suite = new Suite('eles.classes()', { 6 | setup: function( cytoscape ){ 7 | var cy = cytoscape({ elements: require('./graphs/gal'), styleEnabled: false }); 8 | 9 | a = cy.nodes(); 10 | 11 | return cy; 12 | } 13 | }); 14 | 15 | suite 16 | .add( function( cy ) { 17 | a.classes('foo bar'); 18 | }) 19 | ; 20 | module.exports = suite; 21 | -------------------------------------------------------------------------------- /benchmark/floyd-warshall.js: -------------------------------------------------------------------------------- 1 | var eles; 2 | 3 | var Suite = require('./suite'); 4 | var suite = new Suite('eles.floydWarshall()', { 5 | setup: function( cytoscape ){ 6 | var cy = cytoscape({ elements: require('./graphs/gal') }); 7 | 8 | eles = cy.elements(); 9 | 10 | return cy; 11 | } 12 | }); 13 | 14 | suite 15 | .add( function( cy ) { 16 | eles.floydWarshall(); 17 | }) 18 | ; 19 | 20 | module.exports = suite; 21 | -------------------------------------------------------------------------------- /benchmark/has-class.js: -------------------------------------------------------------------------------- 1 | var Suite = require('./suite'); 2 | 3 | var a; 4 | 5 | var suite = new Suite('eles.hasClass()', { 6 | setup: function( cytoscape ){ 7 | var cy = cytoscape({ elements: require('./graphs/gal'), styleEnabled: false }); 8 | 9 | a = cy.nodes(); 10 | 11 | return cy; 12 | } 13 | }); 14 | 15 | suite 16 | .add( function( cy ) { 17 | a.hasClass('foo'); 18 | }) 19 | ; 20 | module.exports = suite; 21 | -------------------------------------------------------------------------------- /documentation/demos/node-types/code.js: -------------------------------------------------------------------------------- 1 | /* global document, window, fetch, cytoscape */ 2 | 3 | (function(){ 4 | var toJson = function(res){ return res.json(); }; 5 | 6 | window.cy = cytoscape({ 7 | container: document.getElementById('cy'), 8 | 9 | layout: { 10 | name: 'grid' 11 | }, 12 | 13 | style: fetch('cy-style.json').then(toJson), 14 | 15 | elements: fetch('data.json').then(toJson) 16 | }); 17 | })(); -------------------------------------------------------------------------------- /benchmark/any-same.js: -------------------------------------------------------------------------------- 1 | var Suite = require('./suite'); 2 | 3 | var a, b; 4 | 5 | var suite = new Suite('eles.anySame()', { 6 | setup: function( cytoscape ){ 7 | var cy = cytoscape({ elements: require('./graphs/gal') }); 8 | 9 | a = cy.nodes(); 10 | b = cy.nodes(); 11 | 12 | return cy; 13 | } 14 | }); 15 | 16 | suite 17 | .add( function( cy ) { 18 | a.anySame(b); 19 | }) 20 | ; 21 | 22 | module.exports = suite; 23 | -------------------------------------------------------------------------------- /documentation/demos/edge-arrows/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: helvetica, sans-serif; 3 | font-size: 14px; 4 | } 5 | 6 | #cy { 7 | position: absolute; 8 | left: 0; 9 | top: 0; 10 | right: 0; 11 | bottom: 0; 12 | z-index: 1; 13 | } 14 | 15 | h1 { 16 | opacity: 0.5; 17 | font-size: 1em; 18 | } 19 | 20 | #hollow { 21 | position: absolute; 22 | right: 0; 23 | top: 0; 24 | margin: 0.5em; 25 | z-index: 2; 26 | } 27 | -------------------------------------------------------------------------------- /benchmark/contains.js: -------------------------------------------------------------------------------- 1 | var Suite = require('./suite'); 2 | 3 | var a, b; 4 | 5 | var suite = new Suite('eles.contains()', { 6 | setup: function( cytoscape ){ 7 | var cy = cytoscape({ elements: require('./graphs/gal') }); 8 | 9 | a = cy.nodes(); 10 | b = cy.nodes(); 11 | 12 | return cy; 13 | } 14 | }); 15 | 16 | suite 17 | .add( function( cy ) { 18 | a.contains( b ); 19 | }) 20 | ; 21 | 22 | module.exports = suite; 23 | -------------------------------------------------------------------------------- /benchmark/init.js: -------------------------------------------------------------------------------- 1 | var Suite = require('./suite'); 2 | 3 | var Cytoscape; 4 | var eles; 5 | 6 | var suite = new Suite('new Cytoscape()', { 7 | setup: function( cytoscapeImpl ){ 8 | Cytoscape = cytoscapeImpl; 9 | 10 | eles = JSON.parse( JSON.stringify( require('./graphs/gal') ) ); 11 | } 12 | }); 13 | 14 | suite 15 | .add( function() { 16 | return new Cytoscape({ elements: eles }); 17 | }) 18 | ; 19 | 20 | module.exports = suite; 21 | -------------------------------------------------------------------------------- /documentation/demos/multiple-instances/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px helvetica neue, helvetica, arial, sans-serif; 3 | } 4 | 5 | #cy { 6 | height: 50%; 7 | width: 100%; 8 | position: absolute; 9 | left: 0; 10 | top: 0; 11 | background-color: #FAEDEF; 12 | } 13 | 14 | #cy2 { 15 | height: 50%; 16 | width: 100%; 17 | position: absolute; 18 | left: 0; 19 | top: 50%; 20 | background-color: #EDF1FA; 21 | border-top: 1px solid #ccc; 22 | } -------------------------------------------------------------------------------- /documentation/md/collection/parallelEdges.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | Two edges are said to be parallel if they connect the same two nodes. Any two parallel edges may connect nodes in the same direction, in which case the edges share the same source and target. They may alternatively connect nodes in the opposite direction, in which case the source and target are reversed in the second edge. 4 | 5 | ## Examples 6 | 7 | ```js 8 | cy.$('#je').parallelEdges(); 9 | ``` 10 | -------------------------------------------------------------------------------- /benchmark/all-are-neighbors.js: -------------------------------------------------------------------------------- 1 | var Suite = require('./suite'); 2 | 3 | var a, b; 4 | 5 | var suite = new Suite('eles.allAreNeighbors()', { 6 | setup: function( cytoscape ){ 7 | var cy = cytoscape({ elements: require('./graphs/gal') }); 8 | 9 | a = cy.nodes(); 10 | b = cy.nodes(); 11 | 12 | return cy; 13 | } 14 | }); 15 | 16 | suite 17 | .add( function( cy ) { 18 | a.allAreNeighbors( b ); 19 | }) 20 | ; 21 | 22 | module.exports = suite; 23 | -------------------------------------------------------------------------------- /benchmark/bfs.js: -------------------------------------------------------------------------------- 1 | var eles, root; 2 | 3 | var Suite = require('./suite'); 4 | var suite = new Suite('eles.bfs()', { 5 | setup: function( cytoscape ){ 6 | var cy = cytoscape({ elements: require('./graphs/gal') }); 7 | 8 | eles = cy.elements(); 9 | root = cy.$('#367'); 10 | 11 | return cy; 12 | } 13 | }); 14 | 15 | suite 16 | .add( function( cy ) { 17 | eles.bfs({ 18 | root: root 19 | }); 20 | }) 21 | ; 22 | 23 | module.exports = suite; 24 | -------------------------------------------------------------------------------- /debug/notify.js: -------------------------------------------------------------------------------- 1 | /* global $ */ 2 | /* eslint-disable no-console */ 3 | 4 | var notify = function( name, descr ){ 5 | console.log( name ); 6 | console.log( descr ); 7 | 8 | $('#note-name').innerHTML = ( name ); 9 | $('#note-descr').innerHTML = ( descr ); 10 | 11 | $('#note').style.display = 'block'; 12 | 13 | clearTimeout( notify.timeout ); 14 | 15 | notify.timeout = setTimeout( function(){ 16 | $('#note').style.display = 'none'; 17 | }, 3000 ); 18 | }; 19 | -------------------------------------------------------------------------------- /documentation/md/collection/kargerStein.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | 4 | This function returns an object of the following form: 5 | 6 | ```js 7 | { 8 | cut, /* Collection of edges that are in the cut */ 9 | partition1, /* Collection of nodes that are in the first partition */ 10 | partition2 /* Collection of nodes that are in the second partition */ 11 | } 12 | ``` 13 | 14 | ## Examples 15 | 16 | ```js 17 | var ks = cy.elements().kargerStein(); 18 | 19 | ks.cut.select(); 20 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/max.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | This function returns an object with the following fields: 4 | 5 | * `value` : The maximum value found. 6 | * `ele` : The element that corresponds to the maximum value. 7 | 8 | 9 | ## Examples 10 | 11 | Find the node with the maximum weight: 12 | ```js 13 | var max = cy.nodes().max(function(){ 14 | return this.data('weight'); 15 | }); 16 | 17 | console.log( 'max val: ' + max.value + ' for element ' + max.ele.id() ); 18 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/min.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | This function returns an object with the following fields: 4 | 5 | * `value` : The minimum value found. 6 | * `ele` : The element that corresponds to the minimum value. 7 | 8 | 9 | ## Examples 10 | 11 | Find the node with the minimum weight: 12 | ```js 13 | var min = cy.nodes().min(function(){ 14 | return this.data('weight'); 15 | }); 16 | 17 | console.log( 'min val: ' + min.value + ' for element ' + min.ele.id() ); 18 | ``` -------------------------------------------------------------------------------- /src/util/extend.js: -------------------------------------------------------------------------------- 1 | export const extend = Object.assign != null ? Object.assign.bind( Object ) : function( tgt ){ 2 | let args = arguments; 3 | 4 | for( let i = 1; i < args.length; i++ ){ 5 | let obj = args[ i ]; 6 | 7 | if( obj == null ){ continue; } 8 | 9 | let keys = Object.keys( obj ); 10 | 11 | for( let j = 0; j < keys.length; j++ ){ 12 | let k = keys[j]; 13 | 14 | tgt[ k ] = obj[ k ]; 15 | } 16 | } 17 | 18 | return tgt; 19 | }; 20 | -------------------------------------------------------------------------------- /documentation/md/collection/position.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | A [position](#notation/position) has two fields, `x` and `y`, that can take on numerical values. 4 | 5 | ## Examples 6 | 7 | ```js 8 | // get x for j 9 | var x = cy.$('#j').position('x'); 10 | 11 | // get the whole position for e 12 | var pos = cy.$('#e').position(); 13 | 14 | // set y for j 15 | cy.$('#j').position('y', 100); 16 | 17 | // set multiple 18 | cy.$('#e').position({ 19 | x: 123, 20 | y: 200 21 | }); 22 | ``` -------------------------------------------------------------------------------- /benchmark/dijkstra.js: -------------------------------------------------------------------------------- 1 | var eles, root; 2 | 3 | var Suite = require('./suite'); 4 | var suite = new Suite('eles.dijkstra()', { 5 | setup: function( cytoscape ){ 6 | var cy = cytoscape({ elements: require('./graphs/gal') }); 7 | 8 | eles = cy.elements(); 9 | root = cy.$('#367'); 10 | 11 | return cy; 12 | } 13 | }); 14 | 15 | suite 16 | .add( function( cy ) { 17 | eles.dijkstra({ 18 | root: root 19 | }); 20 | }) 21 | ; 22 | 23 | module.exports = suite; 24 | -------------------------------------------------------------------------------- /benchmark/dfs.js: -------------------------------------------------------------------------------- 1 | var eles, root; 2 | 3 | var Suite = require('./suite'); 4 | var eles, root; 5 | var suite = new Suite('eles.dfs()', { 6 | setup: function( cytoscape ){ 7 | var cy = cytoscape({ elements: require('./graphs/gal') }); 8 | 9 | eles = cy.elements(); 10 | root = cy.$('#367'); 11 | 12 | return cy; 13 | } 14 | }); 15 | 16 | suite 17 | .add( function( cy ) { 18 | eles.dfs({ 19 | root: root 20 | }); 21 | }) 22 | ; 23 | 24 | module.exports = suite; 25 | -------------------------------------------------------------------------------- /benchmark/bellman-ford.js: -------------------------------------------------------------------------------- 1 | var root, eles; 2 | 3 | var Suite = require('./suite'); 4 | var suite = new Suite('eles.bellmanFord()', { 5 | setup: function( cytoscape ){ 6 | var cy = cytoscape({ elements: require('./graphs/gal') }); 7 | 8 | eles = cy.elements(); 9 | root = cy.$('#367'); 10 | 11 | return cy; 12 | } 13 | }); 14 | 15 | suite 16 | .add( function( cy ) { 17 | eles.bellmanFord({ 18 | root: root 19 | }); 20 | }) 21 | ; 22 | 23 | module.exports = suite; 24 | -------------------------------------------------------------------------------- /benchmark/karger-stein.js: -------------------------------------------------------------------------------- 1 | var eles; 2 | 3 | var Suite = require('./suite'); 4 | var suite = new Suite('eles.kargerStein()', { 5 | setup: function( cytoscape ){ 6 | var cy = cytoscape({ elements: require('./graphs/gal') }); 7 | 8 | eles = cy.elements().components()[0]; // Karger-Stein can run only on connected (sub)graphs 9 | 10 | return cy; 11 | } 12 | }); 13 | 14 | suite 15 | .add( function( cy ) { 16 | eles.kargerStein({}); 17 | }) 18 | ; 19 | 20 | module.exports = suite; 21 | -------------------------------------------------------------------------------- /benchmark/add-remove-class.js: -------------------------------------------------------------------------------- 1 | var Suite = require('./suite'); 2 | 3 | var a; 4 | 5 | var suite = new Suite('eles.addClass(); ... eles.removeClass();', { 6 | setup: function( cytoscape ){ 7 | var cy = cytoscape({ elements: require('./graphs/gal'), styleEnabled: false }); 8 | 9 | a = cy.nodes(); 10 | 11 | return cy; 12 | } 13 | }); 14 | 15 | suite 16 | .add( function( cy ) { 17 | a.addClass('foo bar'); 18 | a.removeClass('foo bar'); 19 | }) 20 | ; 21 | module.exports = suite; 22 | -------------------------------------------------------------------------------- /documentation/md/animation/reverse.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | var jAni = cy.$('#j').animation({ 5 | style: { 6 | 'background-color': 'red', 7 | 'width': 75 8 | }, 9 | duration: 1000 10 | }); 11 | 12 | jAni 13 | .play() // start 14 | .promise('completed').then(function(){ // on next completed 15 | jAni 16 | .reverse() // switch animation direction 17 | .rewind() // optional but makes intent clear 18 | .play() // start again 19 | ; 20 | }) 21 | ; 22 | ``` 23 | -------------------------------------------------------------------------------- /src/core/export.js: -------------------------------------------------------------------------------- 1 | let corefn = ({ 2 | 3 | png: function( options ){ 4 | let renderer = this._private.renderer; 5 | options = options || {}; 6 | 7 | return renderer.png( options ); 8 | }, 9 | 10 | jpg: function( options ){ 11 | let renderer = this._private.renderer; 12 | options = options || {}; 13 | 14 | options.bg = options.bg || '#fff'; 15 | 16 | return renderer.jpg( options ); 17 | } 18 | 19 | }); 20 | 21 | corefn.jpeg = corefn.jpg; 22 | 23 | export default corefn; 24 | -------------------------------------------------------------------------------- /benchmark/degree-centrality.js: -------------------------------------------------------------------------------- 1 | var eles, root; 2 | 3 | var Suite = require('./suite'); 4 | var suite = new Suite('eles.degreeCentrality()', { 5 | setup: function( cytoscape ){ 6 | var cy = cytoscape({ elements: require('./graphs/gal') }); 7 | 8 | eles = cy.elements(); 9 | root = cy.$('#367'); 10 | 11 | return cy; 12 | } 13 | }); 14 | 15 | suite 16 | .add( function( cy ) { 17 | eles.degreeCentrality({ 18 | root: root 19 | }); 20 | }) 21 | ; 22 | 23 | module.exports = suite; 24 | -------------------------------------------------------------------------------- /documentation/md/collection/boundingBox.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | This function returns a plain object with the fields `x1`, `x2`, `y1`, `y2`, `w`, and `h` defined. 4 | 5 | Note that the `includeOverlays` option necessarily includes the dimensions of the body of the element. So using `includeOverlays: true` with `includeNodes: false`, for example, does not make sense. The case where the `includeOverlays` option is only useful in getting the non-overlay dimensions of an element, e.g. `{ includeOverlays: false, includeNodes: true }`. -------------------------------------------------------------------------------- /benchmark/closeness-centrality.js: -------------------------------------------------------------------------------- 1 | var eles, root; 2 | 3 | var Suite = require('./suite'); 4 | var suite = new Suite('eles.closenessCentrality()', { 5 | setup: function( cytoscape ){ 6 | var cy = cytoscape({ elements: require('./graphs/gal') }); 7 | 8 | eles = cy.elements(); 9 | root = cy.$('#367'); 10 | 11 | return cy; 12 | } 13 | }); 14 | 15 | suite 16 | .add( function( cy ) { 17 | eles.closenessCentrality({ 18 | root: root 19 | }); 20 | }) 21 | ; 22 | 23 | module.exports = suite; 24 | -------------------------------------------------------------------------------- /debug/layout.js: -------------------------------------------------------------------------------- 1 | /* global $, cy, cy2 */ 2 | 3 | (function(){ 4 | 5 | $("#layout-button").addEventListener("click", function(){ 6 | cy.layout({ 7 | name: $("#layout-select").value 8 | }).run(); 9 | }); 10 | 11 | var start, end; 12 | cy.bind("layoutstart", function(){ 13 | start = +new Date; 14 | }).bind("layoutstop", function(){ 15 | end = +new Date; 16 | var time = end - start; 17 | 18 | if( !isNaN(time) ){ 19 | $("#layout-time").innerHTML = ( (time) + " ms" ); 20 | } 21 | }); 22 | 23 | })(); 24 | -------------------------------------------------------------------------------- /benchmark/betweenness-centrality.js: -------------------------------------------------------------------------------- 1 | var eles, root; 2 | 3 | var Suite = require('./suite'); 4 | var suite = new Suite('eles.betweennessCentrality()', { 5 | setup: function( cytoscape ){ 6 | var cy = cytoscape({ elements: require('./graphs/gal') }); 7 | 8 | eles = cy.elements(); 9 | root = cy.$('#269'); 10 | 11 | return cy; 12 | } 13 | }); 14 | 15 | suite 16 | .add( function( cy ) { 17 | eles.betweennessCentrality({ 18 | root: root 19 | }); 20 | }) 21 | ; 22 | 23 | module.exports = suite; 24 | -------------------------------------------------------------------------------- /documentation/demos/6000-elements/style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | font: 12pt helvetica neue, helvetica, liberation sans, sans-serif; 5 | line-height: 1; 6 | } 7 | 8 | h1 { 9 | position: absolute; 10 | left: 0; 11 | top: 0; 12 | pointer-events: none; 13 | font-weight: normal; 14 | font-size: 1em; 15 | margin: 0.5em; 16 | color: #888; 17 | } 18 | 19 | #cy { 20 | position: absolute; 21 | left: 0; 22 | right: 0; 23 | top: 0; 24 | bottom: 0; 25 | } 26 | -------------------------------------------------------------------------------- /benchmark/a-star.js: -------------------------------------------------------------------------------- 1 | var eles, root, goal; 2 | 3 | var Suite = require('./suite'); 4 | var suite = new Suite('eles.aStar()', { 5 | setup: function( cytoscape ){ 6 | var cy = cytoscape({ elements: require('./graphs/gal') }); 7 | 8 | eles = cy.elements(); 9 | root = cy.$('#367'); 10 | goal = cy.$('#381'); 11 | 12 | return cy; 13 | } 14 | }); 15 | 16 | suite 17 | .add( function( cy ) { 18 | eles.aStar({ 19 | root: root, 20 | goal: goal 21 | }); 22 | }) 23 | ; 24 | 25 | module.exports = suite; 26 | -------------------------------------------------------------------------------- /debug/filter.js: -------------------------------------------------------------------------------- 1 | /* global $, cy */ 2 | 3 | (function(){ 4 | 5 | function selectFromFilter(){ 6 | var selector = $("#filter-selector").value; 7 | var toSelect = cy.elements(selector); 8 | 9 | toSelect.select(); 10 | cy.elements().not(toSelect).unselect(); 11 | } 12 | 13 | $("#filter-button").addEventListener('click', function(){ 14 | selectFromFilter(); 15 | }); 16 | 17 | $("#filter-selector").addEventListener("keydown", function(e){ 18 | if( e.which == 13 ){ 19 | selectFromFilter(); 20 | } 21 | }); 22 | 23 | })(); 24 | -------------------------------------------------------------------------------- /documentation/md/collection/forEach.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | This function behaves like `Array.prototype.forEach()` with minor changes for convenience: 4 | 5 | * You can exit the iteration early by returning `false` in the iterating function. The `Array.prototype.forEach()` implementation does not support this, but it is included anyway on account of its utility. 6 | 7 | 8 | ## Examples 9 | 10 | ```js 11 | // print all the ids of the nodes in the graph 12 | cy.nodes().forEach(function( ele ){ 13 | console.log( ele.id() ); 14 | }); 15 | ``` -------------------------------------------------------------------------------- /documentation/demos/architecture/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "commonjs": true, 4 | "shared-node-browser": true, 5 | "node": true, 6 | "mocha": true 7 | }, 8 | "parserOptions": { 9 | "sourceType": "module", 10 | "ecmaVersion": 6 11 | }, 12 | "extends": "eslint:recommended", 13 | "rules": { 14 | "no-redeclare": "off", 15 | "semi": "error", 16 | "no-unused-vars": [ 17 | "error", 18 | { 19 | "vars": "all", 20 | "args": "none" 21 | } 22 | ] 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /documentation/md/collection/restore.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | This function puts back elements in the graph that have been removed. It will do nothing if the elements are already in the graph. 4 | 5 | An element can not be restored if its ID is the same as an element already in the graph. You should specify an alternative ID for the element you want to add in that case. 6 | 7 | ## Examples 8 | 9 | ```js 10 | // remove selected elements 11 | var eles = cy.$(':selected').remove(); 12 | 13 | // ... then some time later put them back 14 | eles.restore(); 15 | 16 | ``` -------------------------------------------------------------------------------- /benchmark/collection-creation.js: -------------------------------------------------------------------------------- 1 | var Suite = require('./suite'); 2 | var suite = new Suite('new Collection()', { 3 | setup: function( cytoscape ){ 4 | return cytoscape({ elements: require('./graphs/gal') }); 5 | } 6 | }); 7 | 8 | suite 9 | .add( function( cy ) { 10 | var eles = cy.elements(); 11 | 12 | // make sure the collection is used so it's not optimised out 13 | 14 | var n = 0; 15 | 16 | for( var i = 0; i < eles.length; i++ ){ 17 | n++; 18 | } 19 | 20 | return n; 21 | }) 22 | ; 23 | 24 | module.exports = suite; 25 | -------------------------------------------------------------------------------- /src/define/index.js: -------------------------------------------------------------------------------- 1 | // use this module to cherry pick functions into your prototype 2 | // (useful for functions shared between the core and collections, for example) 3 | 4 | // e.g. 5 | // let foo = define.foo({ /* params... */ }) 6 | 7 | import * as util from '../util'; 8 | import animation from './animation'; 9 | import data from './data'; 10 | import events from './events'; 11 | 12 | let define = {}; 13 | 14 | [ 15 | animation, 16 | data, 17 | events 18 | ].forEach(function( m ){ 19 | util.assign( define, m ); 20 | }); 21 | 22 | export default define; 23 | -------------------------------------------------------------------------------- /src/test.js: -------------------------------------------------------------------------------- 1 | /* 2 | This file tells the Mocha tests what build of Cytoscape to use. 3 | */ 4 | 5 | // For Travis or manual build tests, use the CJS build 6 | // NB : Must do `gulp build-cjs` before `mocha` or `gulp-test` 7 | if( process.env.TRAVIS || process.env.TEST_BUILD ){ 8 | module.exports = require('../build/cytoscape.cjs.js'); 9 | 10 | // Otherwise use the unbundled, unbabelified, raw source 11 | // NB : Must use a version of Node that natively supports all JS features used in the lib 12 | } else { 13 | module.exports = require('./index.js').default; 14 | } 15 | -------------------------------------------------------------------------------- /documentation/md/collection/betweennessCentrality.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | This function returns an object of the form: 4 | 5 | ```js 6 | { 7 | /* returns the betweenness centrality of the specified node */ 8 | betweenness: function( node ){ /* impl */ }, 9 | 10 | /* returns the normalised betweenness centrality of the specified node */ 11 | betweennessNormalized: function( node ){ /* impl */ } 12 | /* alias : betweennessNormalised() */ 13 | } 14 | ``` 15 | 16 | ## Examples 17 | 18 | ```js 19 | var bc = cy.$().bc(); 20 | console.log( 'bc of j: ' + bc.betweenness('#j') ); 21 | ``` -------------------------------------------------------------------------------- /src/map.js: -------------------------------------------------------------------------------- 1 | /* global Map */ 2 | 3 | class ObjectMap { 4 | constructor(){ 5 | this._obj = {}; 6 | } 7 | 8 | set( key, val ){ 9 | this._obj[ key ] = val; 10 | 11 | return this; 12 | } 13 | 14 | delete( key ){ 15 | this._obj[ key ] = undefined; 16 | 17 | return this; 18 | } 19 | 20 | clear(){ 21 | this._obj = {}; 22 | } 23 | 24 | has( key ){ 25 | return this._obj[ key ] !== undefined; 26 | } 27 | 28 | get( key ){ 29 | return this._obj[ key ]; 30 | } 31 | } 32 | 33 | export default typeof Map !== 'undefined' ? Map : ObjectMap; 34 | -------------------------------------------------------------------------------- /documentation/md/collection/affinityPropagation.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | Note that this function performs affinity propagation clustering on only the subset of the graph in the calling collection. Affinity propagation does not normally take into account the topology of the graph. 4 | 5 | This function returns an array, containing collections. Each collection in the array is a cluster found by the algorithm. 6 | 7 | 8 | ## Examples 9 | 10 | ```js 11 | var clusters = cy.elements().ap({ 12 | attributes: [ 13 | function( node ){ return node.data('weight'); } 14 | ] 15 | }); 16 | ``` 17 | -------------------------------------------------------------------------------- /documentation/md/collection/sort.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | Get collection of nodes in order of increasing weight: 4 | ```js 5 | var nodes = cy.nodes().sort(function( a, b ){ 6 | return a.data('weight') - b.data('weight'); 7 | }); 8 | 9 | // show order via animations 10 | var duration = 1000; 11 | nodes.removeStyle().forEach(function( node, i ){ 12 | node.delay( i * duration ).animate({ 13 | style: { 14 | 'border-width': 4, 15 | 'border-color': 'green' 16 | } 17 | }, { duration: duration }); 18 | }); 19 | 20 | console.log('Animating nodes to show sorted order'); 21 | ``` 22 | -------------------------------------------------------------------------------- /.size-snapshot.json: -------------------------------------------------------------------------------- 1 | { 2 | "build/cytoscape.umd.js": { 3 | "bundled": 897790, 4 | "minified": 332573, 5 | "gzipped": 103470 6 | }, 7 | "build/cytoscape.cjs.js": { 8 | "bundled": 827112, 9 | "minified": 349788, 10 | "gzipped": 105510 11 | }, 12 | "build/cytoscape.esm.js": { 13 | "bundled": 826939, 14 | "minified": 349645, 15 | "gzipped": 105476, 16 | "treeshaked": { 17 | "rollup": { 18 | "code": 327269, 19 | "import_statements": 51 20 | }, 21 | "webpack": { 22 | "code": 329136 23 | } 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /documentation/demos/edge-arrows/code.js: -------------------------------------------------------------------------------- 1 | /* global document, window, fetch, cytoscape */ 2 | 3 | (function(){ 4 | var toJson = function(res){ return res.json(); }; 5 | 6 | var cy = window.cy = cytoscape({ 7 | container: document.getElementById('cy'), 8 | 9 | layout: { 10 | name: 'grid', 11 | columns: 4 12 | }, 13 | 14 | style: fetch('cy-style.json').then(toJson), 15 | 16 | elements: fetch('data.json').then(toJson) 17 | }); 18 | 19 | document.getElementById('hollow').addEventListener('click', function(){ 20 | cy.edges().toggleClass('hollow'); 21 | }); 22 | })(); -------------------------------------------------------------------------------- /documentation/md/core/removeListener.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | For all handlers: 4 | 5 | ```js 6 | cy.on('tap', function(){ /* ... */ }); 7 | 8 | // remove all tap listener handlers, including the one above 9 | cy.removeListener('tap'); 10 | ``` 11 | 12 | For a particular handler: 13 | 14 | ```js 15 | var handler = function(){ 16 | console.log('called handler'); 17 | }; 18 | cy.on('tap', handler); 19 | 20 | var otherHandler = function(){ 21 | console.log('called other handler'); 22 | }; 23 | cy.on('tap', otherHandler); 24 | 25 | // just remove handler 26 | cy.removeListener('tap', handler); 27 | ``` 28 | -------------------------------------------------------------------------------- /documentation/md/architecture.md: -------------------------------------------------------------------------------- 1 | Cytoscape.js uses an event-driven model with a core API. The core has several extensions, each of which is notified of events by the core, as needed. Extensions modify the elements in the graph and notify the core of any changes. 2 | 3 | The client application accesses Cytoscape.js solely through the [core](#core). Clients do not access extensions directly, apart from the case where a client wishes to write their own custom extension. 4 | 5 | The following diagramme summarises the extensions of Cytoscape.js, which are discussed in further detail [elsewhere in this documentation](#extensions). -------------------------------------------------------------------------------- /documentation/md/collection/degreeCentrality.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | For `options.directed: false`, this function returns an object of the following form: 4 | 5 | ```js 6 | { 7 | degree /* the degree centrality of the root node */ 8 | } 9 | ``` 10 | 11 | For `options.directed: true`, this function returns an object of the following form: 12 | 13 | ```js 14 | { 15 | indegree, /* the indegree centrality of the root node */ 16 | outdegree /* the outdegree centrality of the root node */ 17 | } 18 | ``` 19 | 20 | ## Examples 21 | 22 | ```js 23 | console.log( 'dc of j: ' + cy.$().dc({ root: '#j' }).degree ); 24 | ``` -------------------------------------------------------------------------------- /src/collection/group.js: -------------------------------------------------------------------------------- 1 | let elesfn = ({ 2 | isNode: function(){ 3 | return this.group() === 'nodes'; 4 | }, 5 | 6 | isEdge: function(){ 7 | return this.group() === 'edges'; 8 | }, 9 | 10 | isLoop: function(){ 11 | return this.isEdge() && this.source()[0] === this.target()[0]; 12 | }, 13 | 14 | isSimple: function(){ 15 | return this.isEdge() && this.source()[0] !== this.target()[0]; 16 | }, 17 | 18 | group: function(){ 19 | let ele = this[0]; 20 | 21 | if( ele ){ 22 | return ele._private.group; 23 | } 24 | } 25 | }); 26 | 27 | 28 | export default elesfn; 29 | -------------------------------------------------------------------------------- /documentation/md/collection/markovClustering.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | Note that this function performs Markov clustering on only the subset of the graph in the calling collection. Markov clustering uses the topology of the graph and the specified edge attributes to determine clusters. 4 | 5 | This function returns an array, containing collections. Each collection in the array is a cluster found by the Markov clustering algorithm. 6 | 7 | ## Examples 8 | 9 | ```js 10 | var clusters = cy.elements().markovCluster({ 11 | attributes: [ 12 | function( edge ){ return edge.data('closeness'); } 13 | ] 14 | }); 15 | ``` 16 | -------------------------------------------------------------------------------- /documentation/md/collection/neighborhood.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | The neighbourhood returned by this function is a bit different than the traditional definition of a "neighbourhood": This returned neighbourhood includes the edges connecting the collection to the neighbourhood. This gives you more flexibility. 4 | 5 | An **open neighbourhood** is one that **does not** include the original set of elements. If unspecified, a neighbourhood is open by default. 6 | 7 | A **closed neighbourhood** is one that **does** include the original set of elements. 8 | 9 | ## Examples 10 | 11 | ```js 12 | cy.$('#j').neighborhood(); 13 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/removeListener.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | ```js 4 | var j = cy.$('#j'); 5 | var handler = function(){ console.log('tap') }; 6 | 7 | // listen 8 | j.on('tap', handler); 9 | 10 | // listen with some other handler 11 | j.on('tap', function(){ 12 | console.log('some other handler'); 13 | }); 14 | 15 | j.emit('tap'); // 'tap' & 'some other handler' 16 | 17 | // remove the renferenced listener handler 18 | j.removeListener('tap', handler); 19 | 20 | j.emit('tap'); // some other handler 21 | 22 | // remove all tap listener handlers (including unnamed handler) 23 | j.removeListener('tap'); 24 | ``` 25 | -------------------------------------------------------------------------------- /documentation/md/collection/hierarchicalClustering.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | Note that this function performs hierarchical clustering on only the subset of the graph in the calling collection. Hierarchical clustering does not normally take into account the topology of the graph. 4 | 5 | This function returns an array, containing collections. Each collection in the array is a cluster found by the algorithm. 6 | 7 | 8 | ## Examples 9 | 10 | ```js 11 | var clusters = cy.elements().hca({ 12 | mode: 'threshold', 13 | threshold: 25, 14 | attributes: [ 15 | function( node ){ return node.data('weight'); } 16 | ] 17 | }); 18 | ``` 19 | -------------------------------------------------------------------------------- /documentation/demos/edge-arrows/cy-style.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "selector": "node", 3 | "style": { 4 | "text-valign": "center", 5 | "text-halign": "left", 6 | "width": 16, 7 | "height": 16 8 | } 9 | }, { 10 | "selector": "node[type]", 11 | "style": { 12 | "label": "data(type)" 13 | } 14 | }, { 15 | "selector": "edge", 16 | "style": { 17 | "width": 1, 18 | "curve-style": "straight" 19 | } 20 | }, { 21 | "selector": "edge[arrow]", 22 | "style": { 23 | "target-arrow-shape": "data(arrow)" 24 | } 25 | }, { 26 | "selector": "edge.hollow", 27 | "style": { 28 | "target-arrow-fill": "hollow" 29 | } 30 | }] 31 | -------------------------------------------------------------------------------- /documentation/md/collection/one.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | For each event specified to this function, the handler function is triggered once per element. This is useful for one-off events that occur on each element in the calling collection once. 4 | 5 | This function is a bit more complicated for compound nodes where a delegate selector has been specified: Note that the handler is called once per element in the *calling collection*, and the handler is triggered by matching descendant elements. 6 | 7 | ## Examples 8 | 9 | ```js 10 | cy.$('node').one('tap', function(e){ 11 | var ele = e.target; 12 | console.log('tapped ' + ele.id()); 13 | }); 14 | ``` -------------------------------------------------------------------------------- /benchmark/add-remove.js: -------------------------------------------------------------------------------- 1 | var Suite = require('./suite'); 2 | var suite = new Suite('cy.add(); ... cy.remove();'); 3 | 4 | suite 5 | .add( function( cy ){ 6 | var N = 1000; 7 | var eles = []; 8 | 9 | for( var i = 0; i < N; i++ ){ 10 | eles.push({ 11 | group: 'nodes', 12 | data: { id: 'node-'+i } 13 | }); 14 | 15 | if( i >= 1 ){ 16 | eles.push({ 17 | group: 'edges', 18 | data: { source: 'node-'+(i-1), target: 'node-'+(i) } 19 | }); 20 | } 21 | } 22 | 23 | cy.add( eles ); 24 | 25 | cy.elements().remove(); 26 | } ) 27 | ; 28 | 29 | module.exports = suite; 30 | -------------------------------------------------------------------------------- /documentation/md/core/on.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | Listen to events that bubble up from elements matching the specified `node` selector: 4 | ```js 5 | cy.on('tap', 'node', function(evt){ 6 | var node = evt.target; 7 | console.log( 'tapped ' + node.id() ); 8 | }); 9 | ``` 10 | 11 | Listen to all tap events that the core receives: 12 | 13 | ```js 14 | cy.on('tap', function(event){ 15 | // target holds a reference to the originator 16 | // of the event (core or element) 17 | var evtTarget = event.target; 18 | 19 | if( evtTarget === cy ){ 20 | console.log('tap on background'); 21 | } else { 22 | console.log('tap on some element'); 23 | } 24 | }); 25 | ``` 26 | -------------------------------------------------------------------------------- /documentation/md/collection/remove.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | This function removes the calling elements from the graph. The elements are not deleted --- they still exist in memory --- but they are no longer in the graph. 4 | 5 | A removed element just exists to be added back to its originating core instance or some other core instance. It does not make sense to call functions, other than `eles.restore()`, on a removed element. A removed element merely exists in this limbo state so you can later add it back to some core instance. 6 | 7 | ## Examples 8 | 9 | Remove selected elements: 10 | 11 | ```js 12 | cy.$(':selected').remove(); 13 | ``` -------------------------------------------------------------------------------- /documentation/demos/pie-style/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Pie style 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /documentation/md/animation/promise.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | 3 | When `ani.apply()` has updated the element style: 4 | 5 | ```js 6 | var jAni = cy.$('#j').animation({ 7 | style: { 8 | 'background-color': 'red', 9 | 'width': 75 10 | }, 11 | duration: 1000 12 | }); 13 | 14 | jAni.progress(0.5).apply().promise('frame').then(function(){ 15 | console.log('j has now has its style at 50% of the animation'); 16 | }); 17 | ``` 18 | 19 | When `ani.play()` is done: 20 | 21 | ```js 22 | var jAni = cy.$('#j').animation({ 23 | style: { 24 | height: 60 25 | }, 26 | duration: 1000 27 | }); 28 | 29 | jAni.play().promise().then(function(){ 30 | console.log('animation done'); 31 | }); 32 | ``` 33 | -------------------------------------------------------------------------------- /documentation/demos/animated-bfs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Animated BFS 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /documentation/demos/compound-nodes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Compound nodes 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /documentation/md/layout/run.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | If the layout is asynchronous (i.e. continuous), then calling `layout.run()` simply starts the layout. Synchronous (i.e. discrete) layouts finish before `layout.run()` returns. Whenever the layout is started, the `layoutstart` event is emitted. 4 | 5 | The layout will emit the `layoutstop` event when it has finished or has been otherwise stopped (e.g. by calling `layout.stop()`). The developer can listen to `layoutstop` using [`layout.on()`](#layouts/layout-events/layout.on) or setting the layout options appropriately with a callback. 6 | 7 | 8 | ## Examples 9 | 10 | ```js 11 | var layout = cy.layout({ name: 'random' }); 12 | 13 | layout.run(); 14 | ``` 15 | -------------------------------------------------------------------------------- /debug/toggles.js: -------------------------------------------------------------------------------- 1 | /* global document, $, cy, $$ */ 2 | 3 | (function(){ 4 | 5 | $$('button.toggler').forEach(function(el){ 6 | el.addEventListener('click', function(){ 7 | var name = el.innerText; 8 | 9 | cy.$(':selected')[name](); 10 | }); 11 | }); 12 | 13 | $('#hide-commands').addEventListener('click', function(){ 14 | document.body.classList.remove('commands-shown'); 15 | document.body.classList.add('commands-hidden'); 16 | 17 | cy.resize(); 18 | }); 19 | 20 | $('#show-commands').addEventListener('click', function(){ 21 | document.body.classList.add('commands-shown'); 22 | document.body.classList.remove('commands-hidden'); 23 | 24 | cy.resize(); 25 | }); 26 | 27 | })(); 28 | -------------------------------------------------------------------------------- /documentation/demos/images-breadthfirst-layout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Images 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /documentation/demos/linkout-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Linkout example 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /documentation/md/collection/diff.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | This function returns a plain object of the form `{ left, right, both }` where 4 | 5 | * `left` is the set of elements only in the calling (i.e. left) collection, 6 | * `right` is the set of elements only in the passed (i.e. right) collection, and 7 | * `both` is the set of elements in both collections. 8 | 9 | ## Examples 10 | 11 | ```js 12 | var diff = cy.$('#j, #e, #k').diff('#j, #g'); 13 | var getNodeId = function( n ){ return n.id() }; 14 | 15 | console.log( 'left: ' + diff.left.map( getNodeId ).join(', ') ); 16 | console.log( 'right: ' + diff.right.map( getNodeId ).join(', ') ); 17 | console.log( 'both: ' + diff.both.map( getNodeId ).join(', ') ); 18 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/collection.md: -------------------------------------------------------------------------------- 1 | A collection contains a set of nodes and edges. Calling a function applies the function to all elements in the collection. When reading values from a collection, [`eles.data()`](#collection/data/eles.data) for example, the value of the first element in the collection is returned. For example: 2 | 3 | ```js 4 | var weight = cy.nodes().data("weight"); 5 | 6 | console.log( cy.nodes()[0].data("weight") + ' == ' + weight ); // weight is the first ele's weight 7 | ``` 8 | 9 | You can ensure that you're reading from the element you want by using a [selector](#selectors) to narrow down the collection to one element (i.e. `eles.size() === 1`) or the [`eles.eq()`](#collection/iteration/eles.eq) function. -------------------------------------------------------------------------------- /documentation/demos/visual-style/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Visual style 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /documentation/md/collection/floydWarshall.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | 4 | This function returns an object of the following form: 5 | 6 | ```js 7 | { 8 | /* function that computes the shortest path between 2 nodes 9 | (either objects or selector strings) */ 10 | path: function( fromNode, toNode ){ /* impl */ }, 11 | 12 | /* function that computes the shortest distance between 2 nodes 13 | (either objects or selector strings) */ 14 | distance: function( fromNode, toNode ){ /* impl */ } 15 | } 16 | ``` 17 | 18 | If no weight function is defined, a constant weight of 1 is used for each edge. 19 | 20 | 21 | ## Examples 22 | 23 | ```js 24 | var fw = cy.elements().floydWarshall(); 25 | 26 | fw.path('#k', '#g').select(); 27 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/layoutDimensions.md: -------------------------------------------------------------------------------- 1 | This function is used to retrieve the width and height of the bounding box of a node. The way the width and height are calculated is affected by the `options` object. 2 | 3 | This function returns an object containing the width and height of the calculated bounding box under the `w` and `h` keys respectively. It can be used as a direct replacement for the `boundingBox()` function assuming only `w` and `h` values are needed. 4 | 5 | ```js 6 | var options = { 7 | nodeDimensionsIncludeLabels: true // boolean which changes whether label dimensions are included when calculating node dimensions, default true 8 | }; 9 | 10 | var dims = cy.nodes().first().layoutDimensions( options ); 11 | ``` 12 | -------------------------------------------------------------------------------- /benchmark/add.js: -------------------------------------------------------------------------------- 1 | var Suite = require('./suite'); 2 | var suite = new Suite('cy.add()'); 3 | 4 | var eles = []; 5 | var N = 100; 6 | 7 | for( var i = 0; i < N; i++ ){ 8 | eles.push({ 9 | group: 'nodes', 10 | data: { id: 'node-'+i } 11 | }); 12 | 13 | if( i >= 1 ){ 14 | eles.push({ 15 | group: 'edges', 16 | data: { source: 'node-'+(i-1), target: 'node-'+(i) } 17 | }); 18 | } 19 | } 20 | 21 | global.elesJson = JSON.stringify( eles ); 22 | 23 | suite 24 | .add( function( cy ){ 25 | cy.add( eles ); 26 | }, { 27 | setup: function( cytoscape ){ 28 | global.eles = JSON.parse( global.elesJson ); 29 | 30 | return cytoscape(); 31 | } 32 | } ) 33 | ; 34 | 35 | module.exports = suite; 36 | -------------------------------------------------------------------------------- /documentation/md/core/destroy.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | The `cy.destroy()` function is not necessary but can be convenient in some cases. It cleans up references and rendering loops such that the memory used by an instance can be garbage collected. 4 | 5 | If you remove the container DOM element from the page, then the instance is cleaned up automatically. Similarly, calling `cy.destroy()` does this cleanup and removes all the container's children from the page. 6 | 7 | When running Cytoscape.js headlessly, using `cy.destroy()` is necessary only if you've explicitly enabled style functionality. 8 | 9 | To drop the memory used by an instance, it is necessary to drop all of your own references to that instance so it can be garbage collected. 10 | -------------------------------------------------------------------------------- /documentation/demos/genemania-export/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | GeneMANIA export 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /documentation/demos/multiple-instances/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Multiple instances 9 | 10 | 11 | 12 |
13 |
14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /documentation/md/collection/layout.md: -------------------------------------------------------------------------------- 1 | This function is useful for running a layout on a subset of the elements in the graph, perhaps in parallel to other layouts. 2 | 3 | You must specify `options.name` with the name of the layout you wish to use. 4 | 5 | This function creates and returns a [layout object](#layouts). You may want to keep a reference to the layout for more advanced usecases, such as running multiple layouts simultaneously. 6 | 7 | Note that you must call [`layout.run()`](#layouts/layout-manipulation/layout.run) in order for it to affect the graph. 8 | 9 | ## Examples 10 | 11 | ```js 12 | var layout = cy.elements().layout({ 13 | name: 'random' 14 | }); 15 | 16 | layout.run(); 17 | ``` 18 | -------------------------------------------------------------------------------- /documentation/demos/performance-tuning/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Performance tuning 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/style/container.js: -------------------------------------------------------------------------------- 1 | import window from '../window'; 2 | 3 | let styfn = {}; 4 | 5 | // gets what an em size corresponds to in pixels relative to a dom element 6 | styfn.getEmSizeInPixels = function(){ 7 | let px = this.containerCss( 'font-size' ); 8 | 9 | if( px != null ){ 10 | return parseFloat( px ); 11 | } else { 12 | return 1; // for headless 13 | } 14 | }; 15 | 16 | // gets css property from the core container 17 | styfn.containerCss = function( propName ){ 18 | let cy = this._private.cy; 19 | let domElement = cy.container(); 20 | 21 | if( window && domElement && window.getComputedStyle ){ 22 | return window.getComputedStyle( domElement ).getPropertyValue( propName ); 23 | } 24 | }; 25 | 26 | export default styfn; 27 | -------------------------------------------------------------------------------- /benchmark/selector-filter.js: -------------------------------------------------------------------------------- 1 | var Suite = require('./suite'); 2 | 3 | var eles; 4 | 5 | var suite = new Suite('eles.filter(selector)', { 6 | setup: function( cytoscape ){ 7 | var cy = cytoscape({ elements: require('./graphs/gal') }); 8 | 9 | eles = cy.nodes(); 10 | 11 | return cy; 12 | } 13 | }); 14 | 15 | suite 16 | .add( function( cy ) { 17 | // n.b. 18 | // - use a selector that matches all nodes so we really compare the selector matching rather than letting the matches exit early 19 | // - only create one selector : compare matching perf, not creation perf 20 | eles.filter('node:unselected:grabbable[gal80Rexp > 0][SUID > 0][Stress >= 5][AverageShortestPathLength > 0]'); 21 | }) 22 | ; 23 | 24 | module.exports = suite; 25 | -------------------------------------------------------------------------------- /documentation/md/collection/style.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | You should use this function very sparingly for setting: 4 | 5 | - There are very few valid usecases for setting with `ele.style()`. 6 | - It *overrides* the style of an element, despite the state and classes that it has. 7 | - In general, it's much better to specify a better stylesheet at initialisation that reflects your application state rather than programmatically modifying style. 8 | - You can not serialise or deserialise overridden style via `ele.json()`. 9 | 10 | Only [defined visual style properties](#style) are supported. 11 | 12 | If you would like to remove a particular overridden style property, you can set `null` or `''` (the empty string) to it. 13 | -------------------------------------------------------------------------------- /src/extensions/layout/index.js: -------------------------------------------------------------------------------- 1 | import breadthfirstLayout from './breadthfirst'; 2 | import circleLayout from './circle'; 3 | import concentricLayout from './concentric'; 4 | import coseLayout from './cose'; 5 | import gridLayout from './grid'; 6 | import nullLayout from './null'; 7 | import presetLayout from './preset'; 8 | import randomLayout from './random'; 9 | 10 | export default [ 11 | { name: 'breadthfirst', impl: breadthfirstLayout }, 12 | { name: 'circle', impl: circleLayout }, 13 | { name: 'concentric',impl: concentricLayout }, 14 | { name: 'cose', impl: coseLayout }, 15 | { name: 'grid', impl: gridLayout }, 16 | { name: 'null', impl: nullLayout }, 17 | { name: 'preset', impl: presetLayout }, 18 | { name: 'random', impl: randomLayout } 19 | ]; 20 | -------------------------------------------------------------------------------- /documentation/md/collection/degree.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | *Degree* : For a node, the degree is the number of edge connections it has. Each time a node is referenced as `source` or `target` of an edge in the graph, that counts as an edge connection. 4 | 5 | *Indegree* : For a node, the indegree is the number of incoming edge connections it has. Each time a node is referred to as `target` of an edge in the graph, that counts as an incoming edge connection. 6 | 7 | *Outdegree* : For a node, the outdegree is the number of outgoing edge connections it has. Each time a node is referred to as `source` of an edge in the graph, that counts as an outgoing edge connection. 8 | 9 | *Total degree* : For a set of nodes, the total degree is the total number of edge connections to nodes in the set. -------------------------------------------------------------------------------- /documentation/md/collection/fuzzyCMeans.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | Note that this function performs fuzzy c-means clustering on only the subset of the graph in the calling collection. 4 | 5 | This function returns an object of the following format: 6 | 7 | ```js 8 | { 9 | // The resultant clusters 10 | clusters: [ /* cluster0, cluster1, ... */ ], 11 | 12 | // A two-dimensional array containing a partition matrix 13 | // degreeOfMembership[i][j] indicates the degree to which nodes[i] belongs to clusters[j] 14 | degreeOfMembership: [ /* row0, row1, ... */ ] 15 | } 16 | ``` 17 | 18 | ## Examples 19 | 20 | ```js 21 | var clusters = cy.elements().fuzzyCMeans({ 22 | k: 2, 23 | attributes: [ 24 | function( node ){ return edge.data('weight'); } 25 | ] 26 | }); 27 | ``` 28 | -------------------------------------------------------------------------------- /src/util/strings.js: -------------------------------------------------------------------------------- 1 | import * as is from '../is'; 2 | import { memoize } from './memoize'; 3 | 4 | export const camel2dash = memoize(str => { 5 | return str.replace( /([A-Z])/g, v => { 6 | return '-' + v.toLowerCase(); 7 | } ); 8 | }); 9 | 10 | export const dash2camel = memoize(str => { 11 | return str.replace( /(-\w)/g, v => { 12 | return v[1].toUpperCase(); 13 | } ); 14 | }); 15 | 16 | export const prependCamel = memoize(( prefix, str ) => { 17 | return prefix + str[0].toUpperCase() + str.substring(1); 18 | }, ( prefix, str ) => { 19 | return prefix + '$' + str; 20 | }); 21 | 22 | export const capitalize = str => { 23 | if( is.emptyString( str ) ){ 24 | return str; 25 | } 26 | 27 | return str.charAt( 0 ).toUpperCase() + str.substring( 1 ); 28 | }; 29 | -------------------------------------------------------------------------------- /documentation/demos/6000-elements/code.js: -------------------------------------------------------------------------------- 1 | fetch('data.json', {mode: 'no-cors'}) 2 | .then(function(res) { 3 | return res.json() 4 | }) 5 | .then(function(data) { 6 | var cy = window.cy = cytoscape({ 7 | container: document.getElementById('cy'), 8 | elements: data.elements, 9 | layout: { 10 | name: 'preset' 11 | }, 12 | style: [{ 13 | selector: 'node', 14 | style: { 15 | 'label': 'data(label)', 16 | 'background-color': '#aaa' 17 | } 18 | }, 19 | { 20 | selector: 'edge', 21 | style: { 22 | 'opacity': 0.2, 23 | 'line-color': '#ccc', 24 | 'width': 3 25 | } 26 | } 27 | ] 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /documentation/md/core/png.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | By default, the export takes into account the current screen pixel density so that the image is of the same quality of the screen. If the `maxWidth` or `maxHeight` options are specified, then the screen pixel density is ignored so that the image can fit in the specified dimensions. 4 | 5 | Specifying `output:'blob-promise'` is the only way to make this function non-blocking. Other outputs may hang the browser until finished, especially for a large image. 6 | 7 | 8 | ## Examples 9 | 10 | ```js 11 | var png64 = cy.png(); 12 | 13 | // put the png data in an img tag 14 | document.querySelector('#png-eg').setAttribute('src', png64); 15 | ``` 16 | 17 | Example image tag: 18 | 19 | 20 | -------------------------------------------------------------------------------- /documentation/md/collection/degreeCentralityNormalized.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | For `options.directed: false`, this function returns an object of the following form: 4 | 5 | ```js 6 | { 7 | /* the normalised degree centrality of the specified node */ 8 | degree: function( node ){ /* impl */ } 9 | } 10 | ``` 11 | 12 | For `options.directed: true`, this function returns an object of the following form: 13 | 14 | ```js 15 | { 16 | /* the normalised indegree centrality of the specified node */ 17 | indegree: function( node ){ /* impl */ }, 18 | 19 | /* the normalised outdegree centrality of the specified node */ 20 | outdegree: function( node ){ /* impl */ } 21 | } 22 | ``` 23 | 24 | ## Examples 25 | 26 | ```js 27 | var dcn = cy.$().dcn(); 28 | console.log( 'dcn of j: ' + dcn.degree('#j') ); 29 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/removeData.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | Using `ele.removeData()` sets the specified fields to `undefined`. This allows you to use a meaningful `null` value in your element data. 4 | 5 | The following data fields are normally immutable, and so they can not be removed: 6 | 7 | * `id` : The `id` field is used to uniquely identify an element in the graph. 8 | * `source` & `target` : These fields define an edge's relationship to nodes, and this relationship can not be changed after creation. 9 | * `parent` : The `parent` field defines the parent (compound) node. 10 | 11 | To modify the topology of the graph without adding or removing elements, you must use [`ele.move()`](#ele.move). Even so, only `parent` may be removed by `ele.move()`. An edge always requires a valid source and target. -------------------------------------------------------------------------------- /src/extensions/renderer/base/coord-ele-math/index.js: -------------------------------------------------------------------------------- 1 | import * as util from '../../../../util'; 2 | 3 | import coords from './coords'; 4 | import edgeArrows from './edge-arrows'; 5 | import edgeControlPoints from './edge-control-points'; 6 | import edgeEndpoints from './edge-endpoints'; 7 | import edgeProjection from './edge-projection'; 8 | import labels from './labels'; 9 | import nodes from './nodes'; 10 | import renderedStyle from './rendered-style'; 11 | import zOrdering from './z-ordering'; 12 | 13 | var BRp = {}; 14 | 15 | [ 16 | coords, 17 | edgeArrows, 18 | edgeControlPoints, 19 | edgeEndpoints, 20 | edgeProjection, 21 | labels, 22 | nodes, 23 | renderedStyle, 24 | zOrdering 25 | ].forEach(function( props ){ 26 | util.extend( BRp, props ); 27 | }); 28 | 29 | export default BRp; 30 | -------------------------------------------------------------------------------- /src/util/regex.js: -------------------------------------------------------------------------------- 1 | export const number = '(?:[-+]?(?:(?:\\d+|\\d*\\.\\d+)(?:[Ee][+-]?\\d+)?))'; 2 | 3 | export const rgba = 'rgb[a]?\\((' + number + '[%]?)\\s*,\\s*(' + number + '[%]?)\\s*,\\s*(' + number + '[%]?)(?:\\s*,\\s*(' + number + '))?\\)'; 4 | export const rgbaNoBackRefs = 'rgb[a]?\\((?:' + number + '[%]?)\\s*,\\s*(?:' + number + '[%]?)\\s*,\\s*(?:' + number + '[%]?)(?:\\s*,\\s*(?:' + number + '))?\\)'; 5 | 6 | export const hsla = 'hsl[a]?\\((' + number + ')\\s*,\\s*(' + number + '[%])\\s*,\\s*(' + number + '[%])(?:\\s*,\\s*(' + number + '))?\\)'; 7 | export const hslaNoBackRefs = 'hsl[a]?\\((?:' + number + ')\\s*,\\s*(?:' + number + '[%])\\s*,\\s*(?:' + number + '[%])(?:\\s*,\\s*(?:' + number + '))?\\)'; 8 | 9 | export const hex3 = '\\#[0-9a-fA-F]{3}'; 10 | export const hex6 = '\\#[0-9a-fA-F]{6}'; 11 | -------------------------------------------------------------------------------- /benchmark/graphs/abcde.json: -------------------------------------------------------------------------------- 1 | { 2 | "nodes": [ 3 | { "data": { "id": "a" } }, 4 | { "data": { "id": "b" } }, 5 | { "data": { "id": "c" } }, 6 | { "data": { "id": "d" } }, 7 | { "data": { "id": "e" } } 8 | ], 9 | 10 | "edges": [ 11 | { "data": { "id": "ae", "weight": 1, "source": "a", "target": "e" } }, 12 | { "data": { "id": "ab", "weight": 3, "source": "a", "target": "b" } }, 13 | { "data": { "id": "be", "weight": 4, "source": "b", "target": "e" } }, 14 | { "data": { "id": "bc", "weight": 5, "source": "b", "target": "c" } }, 15 | { "data": { "id": "ce", "weight": 6, "source": "c", "target": "e" } }, 16 | { "data": { "id": "cd", "weight": 2, "source": "c", "target": "d" } }, 17 | { "data": { "id": "de", "weight": 7, "source": "d", "target": "e" } } 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /documentation/demos/6000-elements/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Cytoscape.js (6,000 elements) 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

Cytoscape.js (6,000 elements)

16 |
17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/core/style.js: -------------------------------------------------------------------------------- 1 | import * as is from '../is'; 2 | import Style from '../style'; 3 | 4 | let corefn = ({ 5 | 6 | style: function( newStyle ){ 7 | if( newStyle ){ 8 | let s = this.setStyle( newStyle ); 9 | 10 | s.update(); 11 | } 12 | 13 | return this._private.style; 14 | }, 15 | 16 | setStyle: function( style ){ 17 | let _p = this._private; 18 | 19 | if( is.stylesheet( style ) ){ 20 | _p.style = style.generateStyle( this ); 21 | 22 | } else if( is.array( style ) ){ 23 | _p.style = Style.fromJson( this, style ); 24 | 25 | } else if( is.string( style ) ){ 26 | _p.style = Style.fromString( this, style ); 27 | 28 | } else { 29 | _p.style = Style( this ); 30 | } 31 | 32 | return _p.style; 33 | } 34 | }); 35 | 36 | export default corefn; 37 | -------------------------------------------------------------------------------- /documentation/md/collection/controlPoints.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | While the control points may be specified relatively in the CSS, this function returns the absolute [model positions](#notation/position) of the control points. The points are specified in the order of source-to-target direction. 4 | 5 | This function works for bundled beziers, but it is not applicable to the middle, straight-line edge in the bundle. 6 | 7 | The number of returned points for each curve style is as follows: 8 | 9 | - `curve-style: bezier` (simple edge) : 1 point for a single quadratic bezier 10 | - `curve-style: bezier` (loop) : 2 points for two quadratic beziers 11 | - `curve-style: unbundled-bezier` : n points for n quadratic beziers, as the number of control points is defined by [`control-point-distances` and `control-point-weights`](#style/bezier-edges) -------------------------------------------------------------------------------- /documentation/md/collection/midpoint.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | The midpoint is, by default, where the edge's label is centred. It is also the position towards which mid arrows point. 4 | 5 | For [`curve-style: unbundled-bezier`](#style/unbundled-bezier-edges) edges, the midpoint is the middle extremum if the number of control points is odd. 6 | 7 | For an even number of control points, the midpoint is where the two middle-most control points meet. This is the middle inflection point for bilaterally symmetric or skew symmetric edges, for example. 8 | 9 | For [`curve-style: segments`](#style/segments-edges) edges, the midpoint is the middle segment point if the number of segment points is odd. For an even number of segment points, the overall midpoint is the midpoint of the middle-most line segment (i.e. the mean of the middle two segment points). 10 | -------------------------------------------------------------------------------- /documentation/demos/wine-cheese-map/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Wine and cheese 8 | 9 | 10 | 13 | 14 | 15 | Reference 16 | 17 | 18 | -------------------------------------------------------------------------------- /documentation/demos/initialisation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Cytoscape.js initialisation 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /documentation/demos/cose-bilkent-layout/code.js: -------------------------------------------------------------------------------- 1 | fetch('data.json', {mode: 'no-cors'}) 2 | .then(function(res) { 3 | return res.json() 4 | }) 5 | .then(function(data) { 6 | var cy = window.cy = cytoscape({ 7 | container: document.getElementById('cy'), 8 | 9 | boxSelectionEnabled: false, 10 | autounselectify: true, 11 | 12 | layout: { 13 | name: 'cose-bilkent', 14 | animate: false 15 | }, 16 | 17 | style: [ 18 | { 19 | selector: 'node', 20 | style: { 21 | 'background-color': '#ad1a66' 22 | } 23 | }, 24 | 25 | { 26 | selector: 'edge', 27 | style: { 28 | 'width': 3, 29 | 'line-color': '#ad1a66' 30 | } 31 | } 32 | ], 33 | 34 | elements: data 35 | }); 36 | }); 37 | -------------------------------------------------------------------------------- /documentation/md/core/resize.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | If your code resizes the graph's dimensions or position (i.e. by changing the style of the HTML DOM element that holds the graph, or by changing the DOM element's position in the DOM tree), you will want to call `cy.resize()` to have the graph resize and redraw itself. 4 | 5 | If tapping in the graph is offset rather than at the correct position, then a call to `cy.resize()` is necessary. Tapping can also become offset if the container element is not empty; the container is expected to be empty so the visualisation can use it. 6 | 7 | Cytoscape.js can not automatically monitor the bounding box of the viewport, as querying the DOM for those dimensions can be expensive. Although `cy.resize()` is automatically called for you on the `window`'s `resize` event, there is no `resize` or `style` event for arbitrary DOM elements. 8 | -------------------------------------------------------------------------------- /documentation/md/core/layout.md: -------------------------------------------------------------------------------- 1 | You must specify `options.name` with the name of the layout you wish to use. 2 | 3 | This function creates and returns a [layout object](#layouts). You may want to keep a reference to the layout for more advanced usecases, such as running multiple layouts simultaneously. 4 | 5 | Note that you must call [`layout.run()`](#layouts/layout-manipulation/layout.run) in order for it to affect the graph. 6 | 7 | The layout includes all elements in the graph at the moment `cy.layout()` is called, as `cy.layout()` is equivalent to `cy.elements().layout()`. You can use [`eles.layout()`](#collection/layout/eles.layout) to run a layout on a subset of the elements in the graph. 8 | 9 | 10 | ## Examples 11 | 12 | ```js 13 | var layout = cy.layout({ 14 | name: 'random' 15 | }); 16 | 17 | layout.run(); 18 | ``` 19 | -------------------------------------------------------------------------------- /documentation/md/collection/merge.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | This function modifies the calling collection instead of returning a new one. Use of this function should be considered for performance in some cases, but otherwise should be avoided. Consider using `eles.union()` instead. 4 | 5 | Use this function only on new collections that you create yourself, using `cy.collection()`. This ensures that you do not unintentionally modify another collection. 6 | 7 | ## Examples 8 | 9 | With a collection: 10 | ```js 11 | var col = cy.collection(); // new, empty collection 12 | var j = cy.$('#j'); 13 | var e = cy.$('#e'); 14 | 15 | col.merge( j ).merge( e ); 16 | ``` 17 | 18 | With a selector: 19 | ```js 20 | var col = cy.collection(); // new, empty collection 21 | 22 | col.merge('#j').merge('#e'); 23 | ``` 24 | -------------------------------------------------------------------------------- /documentation/md/layouts/cose.md: -------------------------------------------------------------------------------- 1 | The `cose` (Compound Spring Embedder) layout uses a physics simulation to lay out graphs. It works well with noncompound graphs and it has additional logic to support compound graphs well. 2 | 3 | It was implemented by [Gerardo Huck](https://www.linkedin.com/in/gerardohuck) as part of Google Summer of Code 2013 (Mentors: Max Franz, Christian Lopes, Anders Riutta, Ugur Dogrusoz). 4 | 5 | Based on the article ["A layout algorithm for undirected compound graphs"](http://dl.acm.org/citation.cfm?id=1498047&CFID=429377863&CFTOKEN=94691144) by Ugur Dogrusoz, Erhan Giral, Ahmet Cetintas, Ali Civril and Emek Demir. 6 | 7 | The `cose` layout is very fast and produces good results. The [`cose-bilkent`](https://github.com/cytoscape/cytoscape.js-cose-bilkent) extension is an evolution of the algorithm that is more computationally expensive but produces near-perfect results. 8 | -------------------------------------------------------------------------------- /src/util/memoize.js: -------------------------------------------------------------------------------- 1 | export const memoize = ( fn, keyFn ) => { 2 | if( !keyFn ){ 3 | keyFn = function(){ 4 | if( arguments.length === 1 ){ 5 | return arguments[0]; 6 | } else if( arguments.length === 0 ){ 7 | return 'undefined'; 8 | } 9 | 10 | let args = []; 11 | 12 | for( let i = 0; i < arguments.length; i++ ){ 13 | args.push( arguments[ i ] ); 14 | } 15 | 16 | return args.join( '$' ); 17 | }; 18 | } 19 | 20 | let memoizedFn = function(){ 21 | let self = this; 22 | let args = arguments; 23 | let ret; 24 | let k = keyFn.apply( self, args ); 25 | let cache = memoizedFn.cache; 26 | 27 | if( !(ret = cache[ k ]) ){ 28 | ret = cache[ k ] = fn.apply( self, args ); 29 | } 30 | 31 | return ret; 32 | }; 33 | 34 | memoizedFn.cache = {}; 35 | 36 | return memoizedFn; 37 | }; 38 | -------------------------------------------------------------------------------- /documentation/demos/edge-types/code.js: -------------------------------------------------------------------------------- 1 | /* global document, window, fetch, cytoscape */ 2 | 3 | (function(){ 4 | var toJson = function(res){ return res.json(); }; 5 | 6 | var cy = window.cy = cytoscape({ 7 | container: document.getElementById('cy'), 8 | 9 | layout: { 10 | name: 'grid', 11 | columns: 4 12 | }, 13 | 14 | style: fetch('cy-style.json').then(toJson), 15 | 16 | elements: fetch('data.json').then(toJson) 17 | }); 18 | 19 | cy.ready(function(){ // make taxi nodes better organised 20 | var n13 = cy.$('#n13'); 21 | var n11 = cy.$('#n11'); 22 | var n12 = cy.$('#n12'); 23 | var p11 = n11.position(); 24 | var p12 = n12.position(); 25 | var d = (p12.x - p11.x)/4; 26 | 27 | n13.position({ 28 | x: (p11.x + p12.x)/2, 29 | y: p11.y - d 30 | }); 31 | 32 | n11.add(n12).position({ y: p11.y + d }); 33 | }); 34 | })(); -------------------------------------------------------------------------------- /documentation/md/core/elements.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | If no elements in the graph match the selector, an empty [collection](#collection) is returned. 4 | 5 | The function `cy.$()` acts as an alias to `cy.filter()`: It lets you type less characters. It is analogous to the jQuery `$` alias used to search the document 6 | 7 | ## Examples 8 | 9 | Get nodes with weight greater than 50: 10 | ```js 11 | cy.nodes('[weight > 50]'); 12 | ``` 13 | 14 | Get edges with source node `n0`: 15 | ```js 16 | cy.edges('[source = "j"]'); 17 | ``` 18 | 19 | Get all nodes and edges with weight greater than 50: 20 | ```js 21 | cy.elements('[weight > 50]'); 22 | cy.filter('[weight > 50]'); // works the same as the above line 23 | ``` 24 | 25 | Get nodes with weight greater than 50 with a filter function: 26 | ```js 27 | cy.filter(function(element, i){ 28 | return element.isNode() && element.data('weight') > 50; 29 | }); 30 | ``` 31 | -------------------------------------------------------------------------------- /documentation/md/collection/aStar.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | Note that this function performs A* search on only the subset of the graph in the calling collection. 4 | 5 | This function returns an object of the following form: 6 | 7 | ```js 8 | { 9 | found, /* true or false */ 10 | distance, /* Distance of the shortest path, if found */ 11 | path /* Ordered collection of elements in the shortest path, if found */ 12 | } 13 | ``` 14 | 15 | Regarding optional options: 16 | 17 | * If no weight function is defined, a constant weight of 1 is used for each edge. 18 | * If no heuristic function is provided, a constant null function will be used, turning this into the same behaviour as Dijkstra's algorithm. The heuristic should be monotonic (also called consistent) in addition to being 'admissible'. 19 | 20 | 21 | ## Examples 22 | 23 | ```js 24 | var aStar = cy.elements().aStar({ root: "#j", goal: "#e" }); 25 | 26 | aStar.path.select(); 27 | ``` -------------------------------------------------------------------------------- /documentation/md/collection/unmerge.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | This function modifies the calling collection instead of returning a new one. Use of this function should be considered for performance in some cases, but otherwise should be avoided. Consider using `eles.filter()` or `eles.remove()` instead. 4 | 5 | Use this function only on new collections that you create yourself, using `cy.collection()`. This ensures that you do not unintentionally modify another collection. 6 | 7 | ## Examples 8 | 9 | With a collection: 10 | 11 | ```js 12 | var col = cy.collection(); // new, empty collection 13 | var e = cy.$('#e'); 14 | 15 | col.merge( cy.nodes() ); 16 | 17 | col.unmerge( e ); 18 | ``` 19 | 20 | With a selector: 21 | 22 | ```js 23 | var col = cy.collection(); // new, empty collection 24 | 25 | col.merge( cy.nodes() ); 26 | 27 | col.unmerge('#e'); 28 | ``` 29 | -------------------------------------------------------------------------------- /src/define/events.js: -------------------------------------------------------------------------------- 1 | import Promise from '../promise'; 2 | 3 | let define = { 4 | 5 | eventAliasesOn: function( proto ){ 6 | let p = proto; 7 | 8 | p.addListener = p.listen = p.bind = p.on; 9 | p.unlisten = p.unbind = p.off = p.removeListener; 10 | p.trigger = p.emit; 11 | 12 | // this is just a wrapper alias of .on() 13 | p.pon = p.promiseOn = function( events, selector ){ 14 | let self = this; 15 | let args = Array.prototype.slice.call( arguments, 0 ); 16 | 17 | return new Promise( function( resolve, reject ){ 18 | let callback = function( e ){ 19 | self.off.apply( self, offArgs ); 20 | 21 | resolve( e ); 22 | }; 23 | 24 | let onArgs = args.concat( [ callback ] ); 25 | let offArgs = onArgs.concat( [] ); 26 | 27 | self.on.apply( self, onArgs ); 28 | } ); 29 | }; 30 | }, 31 | 32 | }; // define 33 | 34 | export default define; 35 | -------------------------------------------------------------------------------- /documentation/demos/cose-bilkent-layout-compound/code.js: -------------------------------------------------------------------------------- 1 | fetch('data.json', {mode: 'no-cors'}) 2 | .then(function(res) { 3 | return res.json() 4 | }) 5 | .then(function(data) { 6 | var cy = window.cy = cytoscape({ 7 | container: document.getElementById('cy'), 8 | 9 | layout: { 10 | name: 'cose-bilkent', 11 | animate: false 12 | }, 13 | 14 | style: [ 15 | { 16 | selector: 'node', 17 | style: { 18 | 'background-color': '#ad1a66' 19 | } 20 | }, 21 | 22 | { 23 | selector: ':parent', 24 | style: { 25 | 'background-opacity': 0.333 26 | } 27 | }, 28 | 29 | { 30 | selector: 'edge', 31 | style: { 32 | 'width': 3, 33 | 'line-color': '#ad1a66' 34 | } 35 | } 36 | ], 37 | 38 | elements: data 39 | }); 40 | }); 41 | -------------------------------------------------------------------------------- /documentation/demos/qtip-extension/code.js: -------------------------------------------------------------------------------- 1 | $(function(){ // on dom ready 2 | 3 | var cy = cytoscape({ 4 | 5 | container: document.getElementById('cy'), 6 | 7 | boxSelectionEnabled: false, 8 | autounselectify: true, 9 | maxZoom: 2, 10 | minZoom: 0.5, 11 | 12 | elements: { 13 | nodes: [ 14 | { data: { id: 'n', label: 'Tap me' } } 15 | ] 16 | }, 17 | 18 | layout: { 19 | name: 'grid', 20 | padding: 100 21 | }, 22 | 23 | ready: function(){ 24 | window.cy = this; 25 | }, 26 | 27 | style: 'node { content: data(label); }' 28 | }); 29 | 30 | // you can use qtip's regular options 31 | // see http://qtip2.com/ 32 | cy.$('#n').qtip({ 33 | content: 'Hello!', 34 | position: { 35 | my: 'top center', 36 | at: 'bottom center' 37 | }, 38 | style: { 39 | classes: 'qtip-bootstrap', 40 | tip: { 41 | width: 16, 42 | height: 8 43 | } 44 | } 45 | }); 46 | 47 | }); // on dom ready 48 | -------------------------------------------------------------------------------- /documentation/md/collection/data.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | Only JSON-serialisable data may be put in `ele.data()`. For temporary data or non-serialisable data, use [`ele.scratch()`](#ele.scratch). 4 | 5 | The following fields are normally immutable: 6 | 7 | * `id` : The `id` field is used to uniquely identify an element in the graph. 8 | * `source` & `target` : These fields define an edge's relationship to nodes, and this relationship can not be changed after creation. 9 | * `parent` : The `parent` field defines the parent (compound) node. 10 | 11 | In order to modify those fields, which alter graph topology, you must use [`ele.move()`](#ele.move). 12 | 13 | ## Examples 14 | 15 | ```js 16 | var j = cy.$('#j'); 17 | 18 | // set the weight field in data 19 | j.data('weight', 60); 20 | 21 | // set several fields at once 22 | j.data({ 23 | name: 'Jerry Jerry Dingleberry', 24 | height: 176 25 | }); 26 | 27 | var weight = j.data('weight'); 28 | ``` 29 | -------------------------------------------------------------------------------- /documentation/md/core/add.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | If plain element objects are used, then [the same format used at initialisation](#core/initialisation) must be followed. 4 | 5 | If a collection of existing elements is specified to a different core instance, then copies of those elements are added, which allows for elements to be effectively transferred between instances of Cytoscape.js. 6 | 7 | ## Examples 8 | 9 | Add a node from a plain object. 10 | 11 | ```js 12 | cy.add({ 13 | group: 'nodes', 14 | data: { weight: 75 }, 15 | position: { x: 200, y: 200 } 16 | }); 17 | ``` 18 | 19 | Add nodes and edges to the graph as plain objects: 20 | 21 | ```js 22 | // can use reference to eles later 23 | var eles = cy.add([ 24 | { group: 'nodes', data: { id: 'n0' }, position: { x: 100, y: 100 } }, 25 | { group: 'nodes', data: { id: 'n1' }, position: { x: 200, y: 200 } }, 26 | { group: 'edges', data: { id: 'e0', source: 'n0', target: 'n1' } } 27 | ]); 28 | ``` 29 | -------------------------------------------------------------------------------- /documentation/demos/grid-layout/code.js: -------------------------------------------------------------------------------- 1 | fetch('data.json', {mode: 'no-cors'}) 2 | .then(function(res) { 3 | return res.json() 4 | }) 5 | .then(function(data) { 6 | var cy = window.cy = cytoscape({ 7 | container: document.getElementById('cy'), 8 | 9 | boxSelectionEnabled: false, 10 | autounselectify: true, 11 | 12 | layout: { 13 | name: 'grid' 14 | }, 15 | 16 | style: [ 17 | { 18 | selector: 'node', 19 | style: { 20 | 'height': 20, 21 | 'width': 20, 22 | 'background-color': '#18e018' 23 | } 24 | }, 25 | 26 | { 27 | selector: 'edge', 28 | style: { 29 | 'curve-style': 'haystack', 30 | 'haystack-radius': 0, 31 | 'width': 5, 32 | 'opacity': 0.5, 33 | 'line-color': '#a2efa2' 34 | } 35 | } 36 | ], 37 | 38 | elements: data 39 | }); 40 | }); 41 | -------------------------------------------------------------------------------- /documentation/demos/circle-layout/code.js: -------------------------------------------------------------------------------- 1 | fetch('data.json', {mode: 'no-cors'}) 2 | .then(function(res) { 3 | return res.json() 4 | }) 5 | .then(function(data) { 6 | var cy = window.cy = cytoscape({ 7 | container: document.getElementById('cy'), 8 | 9 | boxSelectionEnabled: false, 10 | autounselectify: true, 11 | 12 | layout: { 13 | name: 'circle' 14 | }, 15 | 16 | style: [ 17 | { 18 | selector: 'node', 19 | style: { 20 | 'height': 20, 21 | 'width': 20, 22 | 'background-color': '#e8e406' 23 | } 24 | }, 25 | 26 | { 27 | selector: 'edge', 28 | style: { 29 | 'curve-style': 'haystack', 30 | 'haystack-radius': 0, 31 | 'width': 5, 32 | 'opacity': 0.5, 33 | 'line-color': '#f2f08c' 34 | } 35 | } 36 | ], 37 | 38 | elements: data 39 | }); 40 | }); 41 | -------------------------------------------------------------------------------- /documentation/md/collection/bellmanFord.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | 4 | This function returns an object of the following form: 5 | 6 | ```js 7 | { 8 | /* function that computes the shortest path from root node to the argument node 9 | (either objects or selector string) */ 10 | pathTo: function(node){ /* impl */ }, 11 | 12 | /* function that computes the shortest distance from root node to argument node 13 | (either objects or selector string) */ 14 | distanceTo: function(node){ /* impl */ }, 15 | 16 | /* true/false. If true, pathTo and distanceTo will be undefined */ 17 | hasNegativeWeightCycle 18 | } 19 | ``` 20 | 21 | If no weight function is defined, a constant weight of 1 is used for each edge. 22 | 23 | The Bellman-Ford algorithm is good at detecting negative weight cycles, but it can not return path or distance results if it finds them. 24 | 25 | 26 | ## Examples 27 | 28 | ```js 29 | var bf = cy.elements().bellmanFord({ root: "#j" }); 30 | 31 | bf.pathTo('#g').select(); 32 | ``` -------------------------------------------------------------------------------- /documentation/demos/cose-layout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | cose demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

cose demo

19 |
20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /documentation/demos/labels/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Labels demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

Labels demo

19 |
20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /documentation/md/animation/stop.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | This function is useful in situations where you don't want to run an animation any more. Calling `ani.stop()` is analogous to calling `ele.stop()` in that the animation is no longer queued. 4 | 5 | Calling `ani.stop()` makes animation frames faster by reducing the number of animations to check per element per frame. You should call `ani.stop()` when you want to clean up an animation, especially in situations with many animations. You can still reuse a stopped animation, but an animation that has not been stopped can not be garbage collected unless its associated target (i.e. element or core instance) is garbage collected as well. 6 | 7 | 8 | ## Examples 9 | 10 | ```js 11 | var j = cy.$('#j'); 12 | var jAni = j.animation({ 13 | style: { 14 | 'background-color': 'red', 15 | 'width': 75 16 | }, 17 | duration: 1000 18 | }); 19 | 20 | jAni.play(); 21 | 22 | // stop about midway 23 | setTimeout(function(){ 24 | jAni.stop(); 25 | }, 500); 26 | ``` 27 | -------------------------------------------------------------------------------- /src/extensions/renderer/canvas/node-shapes.js: -------------------------------------------------------------------------------- 1 | var CRp = {}; 2 | 3 | CRp.nodeShapeImpl = function( name, context, centerX, centerY, width, height, points ){ 4 | switch( name ){ 5 | case 'ellipse': 6 | return this.drawEllipsePath( context, centerX, centerY, width, height ); 7 | case 'polygon': 8 | return this.drawPolygonPath( context, centerX, centerY, width, height, points ); 9 | case 'roundrectangle': 10 | case 'round-rectangle': 11 | return this.drawRoundRectanglePath( context, centerX, centerY, width, height ); 12 | case 'cutrectangle': 13 | case 'cut-rectangle': 14 | return this.drawCutRectanglePath( context, centerX, centerY, width, height ); 15 | case 'bottomroundrectangle': 16 | case 'bottom-round-rectangle': 17 | return this.drawBottomRoundRectanglePath( context, centerX, centerY, width, height ); 18 | case 'barrel': 19 | return this.drawBarrelPath( context, centerX, centerY, width, height ); 20 | } 21 | }; 22 | 23 | export default CRp; 24 | -------------------------------------------------------------------------------- /documentation/demos/grid-layout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Grid demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

Grid demo

19 |
20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /documentation/md/core/remove.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | Note that removing a node necessarily removes its connected edges. 4 | 5 | Though the elements specified to this function are removed from the graph, they may still exist in memory. However, almost all functions will not work on removed elements. For example, the `eles.neighborhood()` function will fail for a removed element: An element outside of the context of the graph can not have a neighbourhood defined. A removed element exists only so you can restore it back to the originating core instance or to a new instance. 6 | 7 | ## Examples 8 | 9 | Remove an element: 10 | 11 | ```js 12 | var j = cy.$('#j'); 13 | cy.remove( j ); 14 | ``` 15 | 16 | Remove a collection: 17 | 18 | ```js 19 | var collection = cy.elements('node[weight > 50]'); 20 | cy.remove( collection ); 21 | ``` 22 | 23 | Remove elements matching a selector: 24 | 25 | ```js 26 | cy.remove('node[weight > 50]'); // remove nodes with weight greater than 50 27 | ``` 28 | -------------------------------------------------------------------------------- /documentation/demos/circle-layout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Circle demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

Circle demo

19 |
20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /documentation/demos/edge-types/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Edge types demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

Edge types demo

19 |
20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /documentation/demos/cose-layout/code.js: -------------------------------------------------------------------------------- 1 | Promise.all([ 2 | fetch('cy-style.json', {mode: 'no-cors'}) 3 | .then(function(res) { 4 | return res.json() 5 | }), 6 | fetch('data.json', {mode: 'no-cors'}) 7 | .then(function(res) { 8 | return res.json() 9 | }) 10 | ]) 11 | .then(function(dataArray) { 12 | var cy = window.cy = cytoscape({ 13 | container: document.getElementById('cy'), 14 | 15 | layout: { 16 | name: 'cose', 17 | idealEdgeLength: 100, 18 | nodeOverlap: 20, 19 | refresh: 20, 20 | fit: true, 21 | padding: 30, 22 | randomize: false, 23 | componentSpacing: 100, 24 | nodeRepulsion: 400000, 25 | edgeElasticity: 100, 26 | nestingFactor: 5, 27 | gravity: 80, 28 | numIter: 1000, 29 | initialTemp: 200, 30 | coolingFactor: 0.95, 31 | minTemp: 1.0 32 | }, 33 | 34 | style: dataArray[0], 35 | 36 | elements: dataArray[1] 37 | 38 | }); 39 | }); 40 | -------------------------------------------------------------------------------- /documentation/demos/node-types/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Node types demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

Node types demo

19 |
20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /documentation/demos/spread-layout/code.js: -------------------------------------------------------------------------------- 1 | fetch('data.json', {mode: 'no-cors'}) 2 | .then(function(res) { 3 | return res.json() 4 | }) 5 | .then(function(data) { 6 | var cy = window.cy = cytoscape({ 7 | container: document.getElementById('cy'), 8 | 9 | boxSelectionEnabled: false, 10 | autounselectify: true, 11 | 12 | layout: { 13 | name: 'spread', 14 | minDist: 40 15 | }, 16 | 17 | style: [ 18 | { 19 | selector: 'node', 20 | style: { 21 | 'content': 'data(id)', 22 | 'font-size': 8, 23 | 'background-color': '#ea8a31' 24 | } 25 | }, 26 | 27 | { 28 | selector: 'edge', 29 | style: { 30 | 'curve-style': 'haystack', 31 | 'haystack-radius': 0, 32 | 'width': 3, 33 | 'opacity': 0.666, 34 | 'line-color': '#fcc694' 35 | } 36 | } 37 | ], 38 | 39 | elements: data 40 | }); 41 | }); 42 | -------------------------------------------------------------------------------- /documentation/demos/concentric-layout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Concentric demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |

Concentric demo

20 |
21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /documentation/css/highlight/ascetic.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Original style from softwaremaniacs.org (c) Ivan Sagalaev 4 | 5 | */ 6 | 7 | .hljs { 8 | display: block; padding: 0.5em; 9 | background: white; color: black; 10 | } 11 | 12 | .hljs-string, 13 | .hljs-tag .hljs-value, 14 | .hljs-filter .hljs-argument, 15 | .hljs-addition, 16 | .hljs-change, 17 | .apache .hljs-tag, 18 | .apache .hljs-cbracket, 19 | .nginx .hljs-built_in, 20 | .tex .hljs-formula { 21 | color: #888; 22 | } 23 | 24 | .hljs-comment, 25 | .hljs-template_comment, 26 | .hljs-shebang, 27 | .hljs-doctype, 28 | .hljs-pi, 29 | .hljs-javadoc, 30 | .hljs-deletion, 31 | .apache .hljs-sqbracket { 32 | color: #CCC; 33 | } 34 | 35 | .hljs-keyword, 36 | .hljs-tag .hljs-title, 37 | .ini .hljs-title, 38 | .lisp .hljs-title, 39 | .clojure .hljs-title, 40 | .http .hljs-title, 41 | .nginx .hljs-title, 42 | .css .hljs-tag, 43 | .hljs-winutils, 44 | .hljs-flow, 45 | .apache .hljs-tag, 46 | .tex .hljs-command, 47 | .hljs-request, 48 | .hljs-status { 49 | font-weight: bold; 50 | } 51 | -------------------------------------------------------------------------------- /documentation/md/collection/numericStyle.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | - Sizes (e.g. `width`) are in [model](#notation/position) pixels. 4 | - Times (e.g. `transition-duration`) are in milliseconds. 5 | - Angles (e.g. `text-rotation`) are in radians. 6 | - Plain numbers (e.g. `opacity`) are unitless. 7 | - Colours (e.g. `background-color`) are in `[r, g, b]` arrays with values on [0, 255]. 8 | - Lists of numbers (e.g. `edge-distances`) are in arrays. 9 | - Percents range on [0, 1] so that they are useful for calculations. 10 | - Some properties can not have preferred units defined, like `background-position-x` --- it could be in `px` or `%`, for instance. A property like this is returned in the units as specified in the element's style (e.g. the stylesheet). In this case, the units can be returned explicitly via `ele.numericStyleUnits()`. 11 | - Values that can not be expressed as numbers (e.g. `label`) are returned as a string. 12 | 13 | ## Examples 14 | 15 | `node.numericStyle('width')` would return `30` for a 30px wide node, even if the node was specified as `width: 3em`. 16 | -------------------------------------------------------------------------------- /src/collection/cache-traversal-call.js: -------------------------------------------------------------------------------- 1 | import * as is from '../is'; 2 | import * as util from '../util'; 3 | 4 | let cache = function( fn, name ){ 5 | return function traversalCache( arg1, arg2, arg3, arg4 ){ 6 | let selectorOrEles = arg1; 7 | let eles = this; 8 | let key; 9 | 10 | if( selectorOrEles == null ){ 11 | key = ''; 12 | } else if( is.elementOrCollection( selectorOrEles ) && selectorOrEles.length === 1 ){ 13 | key = selectorOrEles.id(); 14 | } 15 | 16 | if( eles.length === 1 && key ){ 17 | let _p = eles[0]._private; 18 | let tch = _p.traversalCache = _p.traversalCache || {}; 19 | let ch = tch[ name ] = tch[ name ] || []; 20 | let hash = util.hashString( key ); 21 | let cacheHit = ch[ hash ]; 22 | 23 | if( cacheHit ){ 24 | return cacheHit; 25 | } else { 26 | return ( ch[ hash ] = fn.call( eles, arg1, arg2, arg3, arg4 ) ); 27 | } 28 | } else { 29 | return fn.call( eles, arg1, arg2, arg3, arg4 ); 30 | } 31 | }; 32 | }; 33 | 34 | export default cache; 35 | -------------------------------------------------------------------------------- /documentation/md/core/jpg.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | By default, the export takes into account the current screen pixel density so that the image is of the same quality of the screen. If the `maxWidth` or `maxHeight` options are specified, then the screen pixel density is ignored so that the image can fit in the specified dimensions. 4 | 5 | Specifying `output:'blob-promise'` is the only way to make this function non-blocking. Other outputs may hang the browser until finished, especially for a large image. 6 | 7 | The JPEG format is lossy, whereas PNG is not. This means that `cy.jpg()` is useful for cases where filesize is more important than pixel-perfect images. JPEG compression will make your images (especially edge lines) blurry and distorted. 8 | 9 | 10 | ## Examples 11 | 12 | ```js 13 | var jpg64 = cy.jpg(); 14 | 15 | // put the png data in an img tag 16 | document.querySelector('#jpg-eg').setAttribute('src', jpg64); 17 | ``` 18 | 19 | Example image tag: 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/core/data.js: -------------------------------------------------------------------------------- 1 | import define from '../define'; 2 | 3 | const fn = { 4 | data: define.data( { 5 | field: 'data', 6 | bindingEvent: 'data', 7 | allowBinding: true, 8 | allowSetting: true, 9 | settingEvent: 'data', 10 | settingTriggersEvent: true, 11 | triggerFnName: 'trigger', 12 | allowGetting: true 13 | } ), 14 | 15 | removeData: define.removeData( { 16 | field: 'data', 17 | event: 'data', 18 | triggerFnName: 'trigger', 19 | triggerEvent: true 20 | } ), 21 | 22 | scratch: define.data( { 23 | field: 'scratch', 24 | bindingEvent: 'scratch', 25 | allowBinding: true, 26 | allowSetting: true, 27 | settingEvent: 'scratch', 28 | settingTriggersEvent: true, 29 | triggerFnName: 'trigger', 30 | allowGetting: true 31 | } ), 32 | 33 | removeScratch: define.removeData( { 34 | field: 'scratch', 35 | event: 'scratch', 36 | triggerFnName: 'trigger', 37 | triggerEvent: true 38 | } ) 39 | }; 40 | 41 | // aliases 42 | fn.attr = fn.data; 43 | fn.removeAttr = fn.removeData; 44 | 45 | export default fn; -------------------------------------------------------------------------------- /documentation/demos/edge-arrows/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Edge arrow types demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

Edge arrow types demo

19 |
20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /documentation/demos/dagre-layout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | cytoscape-dagre.js demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

cytoscape-dagre demo

19 |
20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /documentation/demos/qtip-extension/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | qTip extension 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /documentation/md/collection/json.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | This function returns the [plain JSON representation](#notation/elements-json) of the element, the same format which is used at initialisation, in [`cy.add()`](#core/graph-manipulation/cy.add), etc. 4 | 5 | This function can also be used to set the element's state using the [plain JSON representation](#notation/elements-json) of the element. Each field specified in `ele.json( eleJson )` is diffed against the element's current state, the element is mutated accordingly, and the appropriate events are emitted. This can be used to declaratively modify elements. 6 | 7 | Note that it is much faster to simply specify the diff-patch objects to `ele.json()`, e.g. `ele.json({ data: { foo: 'bar' } })` only updates `foo` in `data`. This avoids the cost of diffs on unchanged fields, which is useful when making many calls to `ele.json()` for larger graphs. 8 | 9 | ## Examples 10 | 11 | Print the JSON for an element: 12 | 13 | ```js 14 | console.log( cy.$('#j').json() ); 15 | ``` 16 | 17 | Make an element selected: 18 | 19 | ```js 20 | cy.$('#j').json({ selected: true }); 21 | ``` 22 | -------------------------------------------------------------------------------- /benchmark/graphs/random.js: -------------------------------------------------------------------------------- 1 | var def = function( specdVal, defVal ){ 2 | return specdVal !== undefined ? specdVal : defVal; 3 | }; 4 | 5 | module.exports = function( opts ){ 6 | opts = opts || {}; 7 | 8 | var nNodes = def( opts.nodes, 2 ); 9 | var nEdges = def( opts.edges, 1 ); 10 | 11 | var generateNode = def( opts.generateNode, function(){ 12 | return {}; 13 | } ); 14 | 15 | var generateEdge = def( opts.generateEdge, function( src, tgt ){ 16 | return { 17 | data: { source: src.data.id, target: tgt.data.id } 18 | }; 19 | } ); 20 | 21 | var nodes = []; 22 | var edges = []; 23 | 24 | var i; 25 | var src, tgt; 26 | 27 | var randNode = function(){ 28 | var index = Math.round( Math.random() * ( nNodes - 1 ) ); 29 | 30 | return nodes[ index ]; 31 | }; 32 | 33 | for( i = 0; i < nNodes; i++ ){ 34 | nodes.push( generateNode() ); 35 | } 36 | 37 | for( i = 0; i < nEdges; i++ ){ 38 | src = randNode(); 39 | tgt = randNode(); 40 | 41 | edges.push( generateEdge( src, tgt ) ); 42 | } 43 | 44 | return { 45 | nodes: nodes, 46 | edges: edges 47 | }; 48 | }; 49 | -------------------------------------------------------------------------------- /documentation/md/collection/dijkstra.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | Note that this function performs Dijkstra's algorithm on only the subset of the graph in the calling collection. 4 | 5 | This function returns an object of the following form: 6 | 7 | ```js 8 | { 9 | distanceTo: function( node ){ /* impl */ } 10 | pathTo: function( node ){ /* impl */ } 11 | } 12 | ``` 13 | 14 | `distanceTo(node)` returns the distance from the source node to `node`, and `pathTo(node)` returns a collection containing the shortest path from the source node to `node`. The path starts with the source node and includes the edges between the nodes in the path such that if `pathTo(node)[i]` is an edge, then `pathTo(node)[i-1]` is the previous node in the path and `pathTo(node)[i+1]` is the next node in the path. 15 | 16 | If no weight function is defined, a constant weight of 1 is used for each edge. 17 | 18 | 19 | ## Examples 20 | 21 | ```js 22 | var dijkstra = cy.elements().dijkstra('#e', function(edge){ 23 | return edge.data('weight'); 24 | }); 25 | 26 | var pathToJ = dijkstra.pathTo( cy.$('#j') ); 27 | var distToJ = dijkstra.distanceTo( cy.$('#j') ); 28 | ``` 29 | -------------------------------------------------------------------------------- /documentation/md/collection/kMedoids.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | Note that this function performs k-mediods clustering on only the subset of the graph in the calling collection. K-medoids does not normally take into consideration topology. 4 | 5 | This function returns an array, containing collections. Each collection in the array is a cluster found by the algorithm. 6 | 7 | One of the major differences between the k-means and k-medoids algorithms is the manner in which the cluster centres are initialized. In k-means, the cluster centres (centroids) are vectors with elements initialised to random values within each dimension's range. In k-medoids, the cluster centres (medoids) are random nodes from the data set. 8 | 9 | The other is that the k-means algorithm determines new cluster centres by taking the average of all the nodes within that cluster, whereas k-medoids selects the node with the lowest configuration cost as the new cluster centre. 10 | 11 | ## Examples 12 | 13 | ```js 14 | var clusters = cy.elements().kMediods({ 15 | k: 2, 16 | attributes: [ 17 | function( node ){ return edge.data('weight'); } 18 | ] 19 | }); 20 | ``` 21 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | 3 | Copyright (c) 2016-2019, The Cytoscape Consortium. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the “Software”), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 9 | of the Software, and to permit persons to whom the Software is furnished to do 10 | so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /documentation/md/collection/kMeans.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | Note that this function performs k-means clustering on only the subset of the graph in the calling collection. K-means does not normally take into consideration the topology of the graph. 4 | 5 | This function returns an array, containing collections. Each collection in the array is a cluster found by the algorithm. 6 | 7 | One of the major differences between the k-means and k-medoids algorithms is the manner in which the cluster centres are initialized. In k-means, the cluster centres (centroids) are vectors with elements initialised to random values within each dimension's range. In k-medoids, the cluster centres (medoids) are random nodes from the data set. 8 | 9 | The other is that the k-means algorithm determines new cluster centres by taking the average of all the nodes within that cluster, whereas k-medoids selects the node with the lowest configuration cost as the new cluster centre. 10 | 11 | ## Examples 12 | 13 | ```js 14 | var clusters = cy.elements().kMeans({ 15 | k: 2, 16 | attributes: [ 17 | function( node ){ return edge.data('weight'); } 18 | ] 19 | }); 20 | ``` 21 | -------------------------------------------------------------------------------- /src/extensions/renderer/base/coord-ele-math/nodes.js: -------------------------------------------------------------------------------- 1 | var BRp = {}; 2 | 3 | import { warn } from '../../../../util'; 4 | 5 | const TOO_SMALL_CUT_RECT = 28; 6 | 7 | let warnedCutRect = false; 8 | 9 | BRp.getNodeShape = function( node ){ 10 | var r = this; 11 | var shape = node.pstyle( 'shape' ).value; 12 | 13 | if( shape === 'cutrectangle' && (node.width() < TOO_SMALL_CUT_RECT || node.height() < TOO_SMALL_CUT_RECT) ){ 14 | if( !warnedCutRect ){ 15 | warn('The `cutrectangle` node shape can not be used at small sizes so `rectangle` is used instead'); 16 | 17 | warnedCutRect = true; 18 | } 19 | 20 | return 'rectangle'; 21 | } 22 | 23 | if( node.isParent() ){ 24 | if( shape === 'rectangle' 25 | || shape === 'roundrectangle' 26 | || shape === 'cutrectangle' 27 | || shape === 'barrel' ){ 28 | return shape; 29 | } else { 30 | return 'rectangle'; 31 | } 32 | } 33 | 34 | if( shape === 'polygon' ){ 35 | var points = node.pstyle( 'shape-polygon-points' ).value; 36 | 37 | return r.nodeShapes.makePolygon( points ).name; 38 | } 39 | 40 | return shape; 41 | }; 42 | 43 | export default BRp; 44 | -------------------------------------------------------------------------------- /src/extensions/renderer/base/images.js: -------------------------------------------------------------------------------- 1 | var BRp = {}; 2 | 3 | BRp.getCachedImage = function( url, crossOrigin, onLoad ){ 4 | var r = this; 5 | var imageCache = r.imageCache = r.imageCache || {}; 6 | var cache = imageCache[ url ]; 7 | 8 | if( cache ){ 9 | if( !cache.image.complete ){ 10 | cache.image.addEventListener('load', onLoad); 11 | } 12 | 13 | return cache.image; 14 | } else { 15 | cache = imageCache[ url ] = imageCache[ url ] || {}; 16 | 17 | var image = cache.image = new Image(); // eslint-disable-line no-undef 18 | 19 | image.addEventListener('load', onLoad); 20 | image.addEventListener('error', function(){ image.error = true; }); 21 | 22 | // #1582 safari doesn't load data uris with crossOrigin properly 23 | // https://bugs.webkit.org/show_bug.cgi?id=123978 24 | var dataUriPrefix = 'data:'; 25 | var isDataUri = url.substring( 0, dataUriPrefix.length ).toLowerCase() === dataUriPrefix; 26 | if( !isDataUri ){ 27 | image.crossOrigin = crossOrigin; // prevent tainted canvas 28 | } 29 | 30 | image.src = url; 31 | 32 | return image; 33 | } 34 | }; 35 | 36 | export default BRp; 37 | -------------------------------------------------------------------------------- /documentation/demos/concentric-layout/code.js: -------------------------------------------------------------------------------- 1 | fetch('data.json', {mode: 'no-cors'}) 2 | .then(function(res) { 3 | return res.json() 4 | }) 5 | .then(function(data) { 6 | var cy = window.cy = cytoscape({ 7 | container: document.getElementById('cy'), 8 | 9 | boxSelectionEnabled: false, 10 | autounselectify: true, 11 | 12 | layout: { 13 | name: 'concentric', 14 | concentric: function( node ){ 15 | return node.degree(); 16 | }, 17 | levelWidth: function( nodes ){ 18 | return 2; 19 | } 20 | }, 21 | 22 | style: [ 23 | { 24 | selector: 'node', 25 | style: { 26 | 'height': 20, 27 | 'width': 20, 28 | 'background-color': '#30c9bc' 29 | } 30 | }, 31 | 32 | { 33 | selector: 'edge', 34 | style: { 35 | 'curve-style': 'haystack', 36 | 'haystack-radius': 0, 37 | 'width': 5, 38 | 'opacity': 0.5, 39 | 'line-color': '#a8eae5' 40 | } 41 | } 42 | ], 43 | 44 | elements: data 45 | }); 46 | }); 47 | -------------------------------------------------------------------------------- /documentation/md/layout/intro.md: -------------------------------------------------------------------------------- 1 | 2 | The function of a layout is to set the positions on the nodes in the graph. Layouts are [extensions](#extensions/layouts) of Cytoscape.js such that it is possible for anyone to write a layout without modifying the library itself. 3 | 4 | Several layouts are included with Cytoscape.js by default, and their options are described in the sections that follow with the default values specified. Note that you must set `options.name` to the name of the layout to specify which one you want to run. 5 | 6 | Each layout has its own algorithm for setting the position for each node. This algorithm influences the overall shape of the graph and the lengths of the edges. A layout's algorithm can be customised by setting its options. Therefore, edge lengths can be controlled by setting the layout options appropriately. 7 | 8 | For force-directed (physics) layouts, there is generally an option to set a weight to each edge to affect the relative edge lengths. Edge length can also be affected by options like spacing factors, angles, and overlap avoidance. Setting edge length depends on the particular layout, and some layouts will allow for more precise edge lengths than others. 9 | -------------------------------------------------------------------------------- /src/util/timing.js: -------------------------------------------------------------------------------- 1 | import window from '../window'; 2 | import debounce from 'lodash.debounce'; 3 | 4 | var performance = window ? window.performance : null; 5 | 6 | var pnow = performance && performance.now ? () => performance.now() : () => Date.now(); 7 | 8 | var raf = (function(){ 9 | if( window ) { 10 | if( window.requestAnimationFrame ){ 11 | return function( fn ){ window.requestAnimationFrame( fn ); }; 12 | } else if( window.mozRequestAnimationFrame ){ 13 | return function( fn ){ window.mozRequestAnimationFrame( fn ); }; 14 | } else if( window.webkitRequestAnimationFrame ){ 15 | return function( fn ){ window.webkitRequestAnimationFrame( fn ); }; 16 | } else if( window.msRequestAnimationFrame ){ 17 | return function( fn ){ window.msRequestAnimationFrame( fn ); }; 18 | } 19 | } 20 | 21 | return function( fn ){ 22 | if( fn ){ 23 | setTimeout( function(){ 24 | fn( pnow() ); 25 | }, 1000 / 60 ); 26 | } 27 | }; 28 | })(); 29 | 30 | export const requestAnimationFrame = fn => raf( fn ); 31 | 32 | export const performanceNow = pnow; 33 | 34 | export const now = () => Date.now(); 35 | 36 | export { debounce }; 37 | -------------------------------------------------------------------------------- /documentation/demos/cose-bilkent-layout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | cytoscape-cose-bilkent.js demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |

cytoscape-cose-bilkent demo

22 |
23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/core/layout.js: -------------------------------------------------------------------------------- 1 | import * as util from '../util'; 2 | import * as is from '../is'; 3 | 4 | let corefn = ({ 5 | 6 | layout: function( options ){ 7 | let cy = this; 8 | 9 | if( options == null ){ 10 | util.error( 'Layout options must be specified to make a layout' ); 11 | return; 12 | } 13 | 14 | if( options.name == null ){ 15 | util.error( 'A `name` must be specified to make a layout' ); 16 | return; 17 | } 18 | 19 | let name = options.name; 20 | let Layout = cy.extension( 'layout', name ); 21 | 22 | if( Layout == null ){ 23 | util.error( 'No such layout `' + name + '` found. Did you forget to import it and `cytoscape.use()` it?' ); 24 | return; 25 | } 26 | 27 | let eles; 28 | if( is.string( options.eles ) ){ 29 | eles = cy.$( options.eles ); 30 | } else { 31 | eles = options.eles != null ? options.eles : cy.$(); 32 | } 33 | 34 | let layout = new Layout( util.extend( {}, options, { 35 | cy: cy, 36 | eles: eles 37 | } ) ); 38 | 39 | return layout; 40 | } 41 | 42 | }); 43 | 44 | corefn.createLayout = corefn.makeLayout = corefn.layout; 45 | 46 | export default corefn; 47 | -------------------------------------------------------------------------------- /documentation/css/highlight/mono-blue.css: -------------------------------------------------------------------------------- 1 | /* 2 | Five-color theme from a single blue hue. 3 | */ 4 | .hljs { 5 | display: block; padding: 0.5em; 6 | background: #EAEEF3; color: #00193A; 7 | } 8 | 9 | .hljs-keyword, 10 | .hljs-title, 11 | .hljs-important, 12 | .hljs-request, 13 | .hljs-header, 14 | .hljs-javadoctag { 15 | font-weight: bold; 16 | } 17 | 18 | .hljs-comment, 19 | .hljs-chunk, 20 | .hljs-template_comment { 21 | color: #738191; 22 | } 23 | 24 | .hljs-string, 25 | .hljs-title, 26 | .hljs-parent, 27 | .hljs-built_in, 28 | .hljs-literal, 29 | .hljs-filename, 30 | .hljs-value, 31 | .hljs-addition, 32 | .hljs-tag, 33 | .hljs-argument, 34 | .hljs-link_label, 35 | .hljs-blockquote, 36 | .hljs-header { 37 | color: #0048AB; 38 | } 39 | 40 | .hljs-decorator, 41 | .hljs-prompt, 42 | .hljs-yardoctag, 43 | .hljs-subst, 44 | .hljs-symbol, 45 | .hljs-doctype, 46 | .hljs-regexp, 47 | .hljs-preprocessor, 48 | .hljs-pragma, 49 | .hljs-pi, 50 | .hljs-attribute, 51 | .hljs-attr_selector, 52 | .hljs-javadoc, 53 | .hljs-xmlDocTag, 54 | .hljs-deletion, 55 | .hljs-shebang, 56 | .hljs-string .hljs-variable, 57 | .hljs-link_url, 58 | .hljs-bullet, 59 | .hljs-sqbracket, 60 | .hljs-phony { 61 | color: #4C81C9; 62 | } 63 | -------------------------------------------------------------------------------- /documentation/demos/cose-bilkent-layout-compound/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | cytoscape-cose-bilkent.js demo (compound) 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |

cytoscape-cose-bilkent demo (compound)

22 |
23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /documentation/md/collection/breadthFirstSearch.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | Note that this function performs a breadth-first search on only the subset of the graph in the calling collection. 4 | 5 | This function returns an object that contains two collections (`{ path: eles, found: node }`), the node found by the search and the path of the search: 6 | 7 | * If no node was found, then `found` is empty. 8 | * If your handler function returns `false`, then the only the path up to that point is returned. 9 | * The path returned includes edges such that if `path[i]` is a node, then `path[i - 1]` is the edge used to get to that node. 10 | 11 | ## Examples 12 | 13 | ```js 14 | var bfs = cy.elements().bfs({ 15 | roots: '#e', 16 | visit: function(v, e, u, i, depth){ 17 | console.log( 'visit ' + v.id() ); 18 | 19 | // example of finding desired node 20 | if( v.data('weight') > 70 ){ 21 | return true; 22 | } 23 | 24 | // example of exiting search early 25 | if( v.data('weight') < 0 ){ 26 | return false; 27 | } 28 | }, 29 | directed: false 30 | }); 31 | 32 | var path = bfs.path; // path to found node 33 | var found = bfs.found; // found node 34 | 35 | // select the path 36 | path.select(); 37 | ``` 38 | -------------------------------------------------------------------------------- /documentation/md/collection/depthFirstSearch.md: -------------------------------------------------------------------------------- 1 | ## Details 2 | 3 | Note that this function performs a depth-first search on only the subset of the graph in the calling collection. 4 | 5 | This function returns an object that contains two collections (`{ path: eles, found: node }`), the node found by the search and the path of the search: 6 | 7 | * If no node was found, then `found` is empty. 8 | * If your handler function returns `false`, then the only the path up to that point is returned. 9 | * The path returned includes edges such that if `path[i]` is a node, then `path[i - 1]` is the edge used to get to that node. 10 | 11 | ## Examples 12 | 13 | ```js 14 | var dfs = cy.elements().dfs({ 15 | roots: '#e', 16 | visit: function(v, e, u, i, depth){ 17 | console.log( 'visit ' + v.id() ); 18 | 19 | // example of finding desired node 20 | if( v.data('weight') > 70 ){ 21 | return true; 22 | } 23 | 24 | // example of exiting search early 25 | if( v.data('weight') < 0 ){ 26 | return false; 27 | } 28 | }, 29 | directed: false 30 | }); 31 | 32 | var path = dfs.path; // path to found node 33 | var found = dfs.found; // found node 34 | 35 | // select the path 36 | path.select(); 37 | ``` 38 | -------------------------------------------------------------------------------- /documentation/demos/spread-layout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | cytoscape-spread.js demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |

cytoscape-spread demo

22 |
23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/collection/algorithms/index.js: -------------------------------------------------------------------------------- 1 | import * as util from '../../util'; 2 | import bfsDfs from './bfs-dfs'; 3 | import dijkstra from './dijkstra'; 4 | import kruskal from './kruskal'; 5 | import aStar from './a-star'; 6 | import floydWarshall from './floyd-warshall'; 7 | import bellmanFord from './bellman-ford'; 8 | import kargerStein from './karger-stein'; 9 | import pageRank from './page-rank'; 10 | import degreeCentrality from './degree-centrality'; 11 | import closenessCentrality from './closeness-centrality'; 12 | import betweennessCentrality from './betweenness-centrality'; 13 | import markovClustering from './markov-clustering'; 14 | import kClustering from './k-clustering'; 15 | import hierarchicalClustering from './hierarchical-clustering'; 16 | import affinityPropagation from './affinity-propagation'; 17 | 18 | var elesfn = {}; 19 | 20 | [ 21 | bfsDfs, 22 | dijkstra, 23 | kruskal, 24 | aStar, 25 | floydWarshall, 26 | bellmanFord, 27 | kargerStein, 28 | pageRank, 29 | degreeCentrality, 30 | closenessCentrality, 31 | betweennessCentrality, 32 | markovClustering, 33 | kClustering, 34 | hierarchicalClustering, 35 | affinityPropagation 36 | ].forEach(function(props) { 37 | util.extend(elesfn, props); 38 | }); 39 | 40 | export default elesfn; 41 | -------------------------------------------------------------------------------- /src/selector/matching.js: -------------------------------------------------------------------------------- 1 | import { matches as queryMatches } from './query-type-match'; 2 | import Type from './type'; 3 | 4 | // filter an existing collection 5 | let filter = function( collection ){ 6 | let self = this; 7 | 8 | // for 1 id #foo queries, just get the element 9 | if( self.length === 1 && self[0].checks.length === 1 && self[0].checks[0].type === Type.ID ){ 10 | return collection.getElementById( self[0].checks[0].value ).collection(); 11 | } 12 | 13 | let selectorFunction = function( element ){ 14 | for( let j = 0; j < self.length; j++ ){ 15 | let query = self[ j ]; 16 | 17 | if( queryMatches( query, element ) ){ 18 | return true; 19 | } 20 | } 21 | 22 | return false; 23 | }; 24 | 25 | if( self.text() == null ){ 26 | selectorFunction = function(){ return true; }; 27 | } 28 | 29 | return collection.filter( selectorFunction ); 30 | }; // filter 31 | 32 | // does selector match a single element? 33 | let matches = function( ele ){ 34 | let self = this; 35 | 36 | for( let j = 0; j < self.length; j++ ){ 37 | let query = self[ j ]; 38 | 39 | if( queryMatches( query, ele ) ){ 40 | return true; 41 | } 42 | } 43 | 44 | return false; 45 | }; // matches 46 | 47 | export default { matches, filter }; 48 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import * as is from './is'; 2 | import Core from './core'; 3 | import extension from './extension'; 4 | import Stylesheet from './stylesheet'; 5 | import version from './version'; 6 | import { warnings } from './util'; 7 | 8 | let cytoscape = function( options ){ 9 | // if no options specified, use default 10 | if( options === undefined ){ 11 | options = {}; 12 | } 13 | 14 | // create instance 15 | if( is.plainObject( options ) ){ 16 | return new Core( options ); 17 | } 18 | 19 | // allow for registration of extensions 20 | else if( is.string( options ) ){ 21 | return extension.apply( extension, arguments ); 22 | } 23 | }; 24 | 25 | // e.g. cytoscape.use( require('cytoscape-foo'), bar ) 26 | cytoscape.use = function( ext ){ 27 | let args = Array.prototype.slice.call( arguments, 1 ); // args to pass to ext 28 | 29 | args.unshift( cytoscape ); // cytoscape is first arg to ext 30 | 31 | ext.apply( null, args ); 32 | 33 | return this; 34 | }; 35 | 36 | cytoscape.warnings = function(bool){ 37 | return warnings(bool); 38 | }; 39 | 40 | // replaced by build system 41 | cytoscape.version = version; 42 | 43 | // expose public apis (mostly for extensions) 44 | cytoscape.stylesheet = cytoscape.Stylesheet = Stylesheet; 45 | 46 | export default cytoscape; 47 | --------------------------------------------------------------------------------