├── .babelrc ├── .eslintignore ├── .eslintrc ├── .github └── stale.yml ├── .gitignore ├── LICENSE ├── README.md ├── bower.json ├── cytoscape-klay.js ├── demo.html ├── example-graphs └── planar-chain.json ├── package-lock.json ├── package.json ├── pages ├── cytoscape-klay.js ├── demo.html ├── example-graphs └── index.html ├── src ├── assign.js ├── defaults.js ├── index.js └── layout.js ├── test └── example.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env"] 3 | } 4 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/**/* 2 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "commonjs": true, 5 | "node": true, 6 | "amd": true, 7 | "es6": true 8 | }, 9 | "extends": "eslint:recommended", 10 | "rules": { 11 | "semi": "error" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /.github/stale.yml: -------------------------------------------------------------------------------- 1 | # Number of days of inactivity before an issue becomes stale 2 | daysUntilStale: 30 3 | # Number of days of inactivity before a stale issue is closed 4 | daysUntilClose: 30 5 | # Issues with these labels will never be considered stale 6 | exemptLabels: 7 | - pinned 8 | # Label to use when marking an issue as stale 9 | staleLabel: stale 10 | # Comment to post when marking an issue as stale. Set to `false` to disable 11 | markComment: > 12 | This issue has been automatically marked as stale, because it has not had 13 | activity within the past 30 days. It will be closed if no further activity 14 | occurs within the next 30 days. If a feature request is important to you, 15 | please consider making a pull request. Thank you for your contributions. 16 | # Comment to post when closing a stale issue. Set to `false` to disable 17 | closeComment: false 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | 3 | Copyright (c) 2016-2020, 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. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | cytoscape-klay 2 | ================================================================================ 3 | 4 | [![DOI](https://zenodo.org/badge/82093643.svg)](https://zenodo.org/badge/latestdoi/82093643) 5 | 6 | ## Description 7 | 8 | The [Klay](https://github.com/OpenKieler/klayjs) layout algorithm for Cytoscape.js ([demo](https://cytoscape.github.io/cytoscape.js-klay)) 9 | 10 | This discrete layout creates good results for most graphs and it supports compound nodes. 11 | 12 | 13 | ## Dependencies 14 | 15 | * Cytoscape.js ^3.2.0 16 | * Klay ^0.4.1 17 | 18 | 19 | ## Usage instructions 20 | 21 | Download the library: 22 | * via npm: `npm install cytoscape-klay`, 23 | * via bower: `bower install cytoscape-klay`, or 24 | * via direct download in the repository (probably from a tag). 25 | 26 | Import the library as appropriate for your project: 27 | 28 | ES import: 29 | 30 | ```js 31 | import cytoscape from 'cytoscape'; 32 | import klay from 'cytoscape-klay'; 33 | 34 | cytoscape.use( klay ); 35 | ``` 36 | 37 | CommonJS require: 38 | 39 | ```js 40 | let cytoscape = require('cytoscape'); 41 | let klay = require('cytoscape-klay'); 42 | 43 | cytoscape.use( klay ); // register extension 44 | ``` 45 | 46 | AMD: 47 | 48 | ```js 49 | require(['cytoscape', 'cytoscape-klay'], function( cytoscape, klay ){ 50 | klay( cytoscape ); // register extension 51 | }); 52 | ``` 53 | 54 | Plain HTML/JS has the extension registered for you automatically, because no `require()` is needed. 55 | 56 | 57 | ## API 58 | 59 | ```js 60 | var options = { 61 | nodeDimensionsIncludeLabels: false, // Boolean which changes whether label dimensions are included when calculating node dimensions 62 | fit: true, // Whether to fit 63 | padding: 20, // Padding on fit 64 | animate: false, // Whether to transition the node positions 65 | animateFilter: function( node, i ){ return true; }, // Whether to animate specific nodes when animation is on; non-animated nodes immediately go to their final positions 66 | animationDuration: 500, // Duration of animation in ms if enabled 67 | animationEasing: undefined, // Easing of animation if enabled 68 | transform: function( node, pos ){ return pos; }, // A function that applies a transform to the final node position 69 | ready: undefined, // Callback on layoutready 70 | stop: undefined, // Callback on layoutstop 71 | klay: { 72 | // Following descriptions taken from http://layout.rtsys.informatik.uni-kiel.de:9444/Providedlayout.html?algorithm=de.cau.cs.kieler.klay.layered 73 | addUnnecessaryBendpoints: false, // Adds bend points even if an edge does not change direction. 74 | aspectRatio: 1.6, // The aimed aspect ratio of the drawing, that is the quotient of width by height 75 | borderSpacing: 20, // Minimal amount of space to be left to the border 76 | compactComponents: false, // Tries to further compact components (disconnected sub-graphs). 77 | crossingMinimization: 'LAYER_SWEEP', // Strategy for crossing minimization. 78 | /* LAYER_SWEEP The layer sweep algorithm iterates multiple times over the layers, trying to find node orderings that minimize the number of crossings. The algorithm uses randomization to increase the odds of finding a good result. To improve its results, consider increasing the Thoroughness option, which influences the number of iterations done. The Randomization seed also influences results. 79 | INTERACTIVE Orders the nodes of each layer by comparing their positions before the layout algorithm was started. The idea is that the relative order of nodes as it was before layout was applied is not changed. This of course requires valid positions for all nodes to have been set on the input graph before calling the layout algorithm. The interactive layer sweep algorithm uses the Interactive Reference Point option to determine which reference point of nodes are used to compare positions. */ 80 | cycleBreaking: 'GREEDY', // Strategy for cycle breaking. Cycle breaking looks for cycles in the graph and determines which edges to reverse to break the cycles. Reversed edges will end up pointing to the opposite direction of regular edges (that is, reversed edges will point left if edges usually point right). 81 | /* GREEDY This algorithm reverses edges greedily. The algorithm tries to avoid edges that have the Priority property set. 82 | INTERACTIVE The interactive algorithm tries to reverse edges that already pointed leftwards in the input graph. This requires node and port coordinates to have been set to sensible values.*/ 83 | direction: 'UNDEFINED', // Overall direction of edges: horizontal (right / left) or vertical (down / up) 84 | /* UNDEFINED, RIGHT, LEFT, DOWN, UP */ 85 | edgeRouting: 'ORTHOGONAL', // Defines how edges are routed (POLYLINE, ORTHOGONAL, SPLINES) 86 | edgeSpacingFactor: 0.5, // Factor by which the object spacing is multiplied to arrive at the minimal spacing between edges. 87 | feedbackEdges: false, // Whether feedback edges should be highlighted by routing around the nodes. 88 | fixedAlignment: 'NONE', // Tells the BK node placer to use a certain alignment instead of taking the optimal result. This option should usually be left alone. 89 | /* NONE Chooses the smallest layout from the four possible candidates. 90 | LEFTUP Chooses the left-up candidate from the four possible candidates. 91 | RIGHTUP Chooses the right-up candidate from the four possible candidates. 92 | LEFTDOWN Chooses the left-down candidate from the four possible candidates. 93 | RIGHTDOWN Chooses the right-down candidate from the four possible candidates. 94 | BALANCED Creates a balanced layout from the four possible candidates. */ 95 | inLayerSpacingFactor: 1.0, // Factor by which the usual spacing is multiplied to determine the in-layer spacing between objects. 96 | layoutHierarchy: false, // Whether the selected layouter should consider the full hierarchy 97 | linearSegmentsDeflectionDampening: 0.3, // Dampens the movement of nodes to keep the diagram from getting too large. 98 | mergeEdges: false, // Edges that have no ports are merged so they touch the connected nodes at the same points. 99 | mergeHierarchyCrossingEdges: true, // If hierarchical layout is active, hierarchy-crossing edges use as few hierarchical ports as possible. 100 | nodeLayering:'NETWORK_SIMPLEX', // Strategy for node layering. 101 | /* NETWORK_SIMPLEX This algorithm tries to minimize the length of edges. This is the most computationally intensive algorithm. The number of iterations after which it aborts if it hasn't found a result yet can be set with the Maximal Iterations option. 102 | LONGEST_PATH A very simple algorithm that distributes nodes along their longest path to a sink node. 103 | INTERACTIVE Distributes the nodes into layers by comparing their positions before the layout algorithm was started. The idea is that the relative horizontal order of nodes as it was before layout was applied is not changed. This of course requires valid positions for all nodes to have been set on the input graph before calling the layout algorithm. The interactive node layering algorithm uses the Interactive Reference Point option to determine which reference point of nodes are used to compare positions. */ 104 | nodePlacement:'BRANDES_KOEPF', // Strategy for Node Placement 105 | /* BRANDES_KOEPF Minimizes the number of edge bends at the expense of diagram size: diagrams drawn with this algorithm are usually higher than diagrams drawn with other algorithms. 106 | LINEAR_SEGMENTS Computes a balanced placement. 107 | INTERACTIVE Tries to keep the preset y coordinates of nodes from the original layout. For dummy nodes, a guess is made to infer their coordinates. Requires the other interactive phase implementations to have run as well. 108 | SIMPLE Minimizes the area at the expense of... well, pretty much everything else. */ 109 | randomizationSeed: 1, // Seed used for pseudo-random number generators to control the layout algorithm; 0 means a new seed is generated 110 | routeSelfLoopInside: false, // Whether a self-loop is routed around or inside its node. 111 | separateConnectedComponents: true, // Whether each connected component should be processed separately 112 | spacing: 20, // Overall setting for the minimal amount of space to be left between objects 113 | thoroughness: 7 // How much effort should be spent to produce a nice layout.. 114 | }, 115 | priority: function( edge ){ return null; }, // Edges with a non-nil value are skipped when greedy edge cycle breaking is enabled 116 | }; 117 | 118 | cy.layout( options ).run(); 119 | ``` 120 | 121 | 122 | ## Build targets 123 | 124 | * `npm run test` : Run Mocha tests in `./test` 125 | * `npm run build` : Build `./src/**` into `cytoscape-klay.js` 126 | * `npm run watch` : Automatically build on changes with live reloading (N.b. you must already have an HTTP server running) 127 | * `npm run dev` : Automatically build on changes with live reloading with webpack dev server 128 | * `npm run lint` : Run eslint on the source 129 | 130 | N.b. all builds use babel, so modern ES features can be used in the `src`. 131 | 132 | 133 | ## Publishing instructions 134 | 135 | This project is set up to automatically be published to npm and bower. To publish: 136 | 137 | 1. Build the extension : `npm run build:release` 138 | 1. Commit the build : `git commit -am "Build for release"` 139 | 1. Bump the version number and tag: `npm version major|minor|patch` 140 | 1. Push to origin: `git push && git push --tags` 141 | 1. Publish to npm: `npm publish .` 142 | 1. If publishing to bower for the first time, you'll need to run `bower register cytoscape-klay https://github.com/cytoscape/cytoscape.js-klay.git` 143 | 1. [Make a new release](https://github.com/cytoscape/cytoscape.js-klay/releases/new) for Zenodo. 144 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cytoscape-klay", 3 | "description": "The Klay layout algorithm for Cytoscape.js", 4 | "main": "cytoscape-klay.js", 5 | "dependencies": { 6 | "cytoscape": "^3.2.0" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/cytoscape/cytoscape.js-klay.git" 11 | }, 12 | "ignore": [ 13 | "**/.*", 14 | "node_modules", 15 | "bower_components", 16 | "test", 17 | "tests" 18 | ], 19 | "keywords": [ 20 | "cytoscape", 21 | "cytoscape-extension" 22 | ], 23 | "license": "MIT" 24 | } 25 | -------------------------------------------------------------------------------- /cytoscape-klay.js: -------------------------------------------------------------------------------- 1 | (function webpackUniversalModuleDefinition(root, factory) { 2 | if(typeof exports === 'object' && typeof module === 'object') 3 | module.exports = factory(require("klayjs")); 4 | else if(typeof define === 'function' && define.amd) 5 | define(["klayjs"], factory); 6 | else if(typeof exports === 'object') 7 | exports["cytoscapeKlay"] = factory(require("klayjs")); 8 | else 9 | root["cytoscapeKlay"] = factory(root["$klay"]); 10 | })(this, function(__WEBPACK_EXTERNAL_MODULE_4__) { 11 | return /******/ (function(modules) { // webpackBootstrap 12 | /******/ // The module cache 13 | /******/ var installedModules = {}; 14 | /******/ 15 | /******/ // The require function 16 | /******/ function __webpack_require__(moduleId) { 17 | /******/ 18 | /******/ // Check if module is in cache 19 | /******/ if(installedModules[moduleId]) { 20 | /******/ return installedModules[moduleId].exports; 21 | /******/ } 22 | /******/ // Create a new module (and put it into the cache) 23 | /******/ var module = installedModules[moduleId] = { 24 | /******/ i: moduleId, 25 | /******/ l: false, 26 | /******/ exports: {} 27 | /******/ }; 28 | /******/ 29 | /******/ // Execute the module function 30 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 31 | /******/ 32 | /******/ // Flag the module as loaded 33 | /******/ module.l = true; 34 | /******/ 35 | /******/ // Return the exports of the module 36 | /******/ return module.exports; 37 | /******/ } 38 | /******/ 39 | /******/ 40 | /******/ // expose the modules object (__webpack_modules__) 41 | /******/ __webpack_require__.m = modules; 42 | /******/ 43 | /******/ // expose the module cache 44 | /******/ __webpack_require__.c = installedModules; 45 | /******/ 46 | /******/ // identity function for calling harmony imports with the correct context 47 | /******/ __webpack_require__.i = function(value) { return value; }; 48 | /******/ 49 | /******/ // define getter function for harmony exports 50 | /******/ __webpack_require__.d = function(exports, name, getter) { 51 | /******/ if(!__webpack_require__.o(exports, name)) { 52 | /******/ Object.defineProperty(exports, name, { 53 | /******/ configurable: false, 54 | /******/ enumerable: true, 55 | /******/ get: getter 56 | /******/ }); 57 | /******/ } 58 | /******/ }; 59 | /******/ 60 | /******/ // getDefaultExport function for compatibility with non-harmony modules 61 | /******/ __webpack_require__.n = function(module) { 62 | /******/ var getter = module && module.__esModule ? 63 | /******/ function getDefault() { return module['default']; } : 64 | /******/ function getModuleExports() { return module; }; 65 | /******/ __webpack_require__.d(getter, 'a', getter); 66 | /******/ return getter; 67 | /******/ }; 68 | /******/ 69 | /******/ // Object.prototype.hasOwnProperty.call 70 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 71 | /******/ 72 | /******/ // __webpack_public_path__ 73 | /******/ __webpack_require__.p = ""; 74 | /******/ 75 | /******/ // Load entry module and return exports 76 | /******/ return __webpack_require__(__webpack_require__.s = 3); 77 | /******/ }) 78 | /************************************************************************/ 79 | /******/ ([ 80 | /* 0 */ 81 | /***/ (function(module, exports, __webpack_require__) { 82 | 83 | "use strict"; 84 | 85 | 86 | var klay = __webpack_require__(4); 87 | var assign = __webpack_require__(1); 88 | var defaults = __webpack_require__(2); 89 | 90 | var klayNSLookup = { 91 | 'addUnnecessaryBendpoints': 'de.cau.cs.kieler.klay.layered.unnecessaryBendpoints', 92 | 'alignment': 'de.cau.cs.kieler.alignment', 93 | 'aspectRatio': 'de.cau.cs.kieler.aspectRatio', 94 | 'borderSpacing': 'borderSpacing', 95 | 'compactComponents': 'de.cau.cs.kieler.klay.layered.components.compact', 96 | 'compactionStrategy': 'de.cau.cs.kieler.klay.layered.nodeplace.compactionStrategy', 97 | 'contentAlignment': 'de.cau.cs.kieler.klay.layered.contentAlignment', 98 | 'crossingMinimization': 'de.cau.cs.kieler.klay.layered.crossMin', 99 | 'cycleBreaking': 'de.cau.cs.kieler.klay.layered.cycleBreaking', 100 | 'debugMode': 'de.cau.cs.kieler.debugMode', 101 | 'direction': 'de.cau.cs.kieler.direction', 102 | 'edgeLabelSideSelection': 'de.cau.cs.kieler.klay.layered.edgeLabelSideSelection', 103 | // 'de.cau.cs.kieler.klay.layered.edgeNodeSpacingFactor': options.edgeNodeSpacingFactor, 104 | 'edgeRouting': 'de.cau.cs.kieler.edgeRouting', 105 | 'edgeSpacingFactor': 'de.cau.cs.kieler.klay.layered.edgeSpacingFactor', 106 | 'feedbackEdges': 'de.cau.cs.kieler.klay.layered.feedBackEdges', 107 | 'fixedAlignment': 'de.cau.cs.kieler.klay.layered.fixedAlignment', 108 | 'greedySwitchCrossingMinimization': 'de.cau.cs.kieler.klay.layered.greedySwitch', 109 | 'hierarchyHandling': 'de.cau.cs.kieler.hierarchyHandling', 110 | 'inLayerSpacingFactor': 'de.cau.cs.kieler.klay.layered.inLayerSpacingFactor', 111 | 'interactiveReferencePoint': 'de.cau.cs.kieler.klay.layered.interactiveReferencePoint', 112 | 'layerConstraint': 'de.cau.cs.kieler.klay.layered.layerConstraint', 113 | 'layoutHierarchy': 'de.cau.cs.kieler.layoutHierarchy', 114 | 'linearSegmentsDeflectionDampening': 'de.cau.cs.kieler.klay.layered.linearSegmentsDeflectionDampening', 115 | 'mergeEdges': 'de.cau.cs.kieler.klay.layered.mergeEdges', 116 | 'mergeHierarchyCrossingEdges': 'de.cau.cs.kieler.klay.layered.mergeHierarchyEdges', 117 | 'noLayout': 'de.cau.cs.kieler.noLayout', 118 | 'nodeLabelPlacement': 'de.cau.cs.kieler.nodeLabelPlacement', 119 | 'nodeLayering': 'de.cau.cs.kieler.klay.layered.nodeLayering', 120 | 'nodePlacement': 'de.cau.cs.kieler.klay.layered.nodePlace', 121 | 'portAlignment': 'de.cau.cs.kieler.portAlignment', 122 | 'portAlignmentEastern': 'de.cau.cs.kieler.portAlignment.east', 123 | 'portAlignmentNorth': 'de.cau.cs.kieler.portAlignment.north', 124 | 'portAlignmentSouth': 'de.cau.cs.kieler.portAlignment.south', 125 | 'portAlignmentWest': 'de.cau.cs.kieler.portAlignment.west', 126 | 'portConstraints': 'de.cau.cs.kieler.portConstraints', 127 | 'portLabelPlacement': 'de.cau.cs.kieler.portLabelPlacement', 128 | 'portOffset': 'de.cau.cs.kieler.offset', 129 | 'portSide': 'de.cau.cs.kieler.portSide', 130 | 'portSpacing': 'de.cau.cs.kieler.portSpacing', 131 | 'postCompaction': 'de.cau.cs.kieler.klay.layered.postCompaction', 132 | 'priority': 'de.cau.cs.kieler.priority', 133 | 'randomizationSeed': 'de.cau.cs.kieler.randomSeed', 134 | 'routeSelfLoopInside': 'de.cau.cs.kieler.selfLoopInside', 135 | 'separateConnectedComponents': 'de.cau.cs.kieler.separateConnComp', 136 | 'sizeConstraint': 'de.cau.cs.kieler.sizeConstraint', 137 | 'sizeOptions': 'de.cau.cs.kieler.sizeOptions', 138 | 'spacing': 'de.cau.cs.kieler.spacing', 139 | 'splineSelfLoopPlacement': 'de.cau.cs.kieler.klay.layered.splines.selfLoopPlacement', 140 | 'thoroughness': 'de.cau.cs.kieler.klay.layered.thoroughness', 141 | 'wideNodesOnMultipleLayers': 'de.cau.cs.kieler.klay.layered.wideNodesOnMultipleLayers' 142 | }; 143 | 144 | var mapToKlayNS = function mapToKlayNS(klayOpts) { 145 | var keys = Object.keys(klayOpts); 146 | var ret = {}; 147 | 148 | for (var i = 0; i < keys.length; i++) { 149 | var key = keys[i]; 150 | var nsKey = klayNSLookup[key]; 151 | var val = klayOpts[key]; 152 | 153 | ret[nsKey] = val; 154 | } 155 | 156 | return ret; 157 | }; 158 | 159 | var klayOverrides = { 160 | interactiveReferencePoint: 'CENTER' // Determines which point of a node is considered by interactive layout phases. 161 | }; 162 | 163 | var getPos = function getPos(ele) { 164 | var parent = ele.parent(); 165 | var k = ele.scratch('klay'); 166 | var p = { 167 | x: k.x, 168 | y: k.y 169 | }; 170 | 171 | while (parent.nonempty()) { 172 | var kp = parent.scratch('klay'); 173 | p.x += kp.x; 174 | p.y += kp.y; 175 | parent = parent.parent(); 176 | } 177 | 178 | return p; 179 | }; 180 | 181 | var makeNode = function makeNode(node, options) { 182 | var dims = node.layoutDimensions(options); 183 | var padding = node.numericStyle('padding'); 184 | 185 | var k = { 186 | _cyEle: node, 187 | id: node.id(), 188 | padding: { 189 | top: padding, 190 | left: padding, 191 | bottom: padding, 192 | right: padding 193 | } 194 | }; 195 | 196 | if (!node.isParent()) { 197 | k.width = dims.w; 198 | k.height = dims.h; 199 | } 200 | 201 | node.scratch('klay', k); 202 | 203 | return k; 204 | }; 205 | 206 | var makeEdge = function makeEdge(edge, options) { 207 | var k = { 208 | _cyEle: edge, 209 | id: edge.id(), 210 | source: edge.data('source'), 211 | target: edge.data('target'), 212 | properties: {} 213 | }; 214 | 215 | var priority = options.priority(edge); 216 | 217 | if (priority != null) { 218 | k.properties.priority = priority; 219 | } 220 | 221 | edge.scratch('klay', k); 222 | 223 | return k; 224 | }; 225 | 226 | var makeGraph = function makeGraph(nodes, edges, options) { 227 | var klayNodes = []; 228 | var klayEdges = []; 229 | var klayEleLookup = {}; 230 | var graph = { 231 | id: 'root', 232 | children: [], 233 | edges: [] 234 | }; 235 | 236 | // map all nodes 237 | for (var i = 0; i < nodes.length; i++) { 238 | var n = nodes[i]; 239 | var k = makeNode(n, options); 240 | 241 | klayNodes.push(k); 242 | 243 | klayEleLookup[n.id()] = k; 244 | } 245 | 246 | // map all edges 247 | for (var _i = 0; _i < edges.length; _i++) { 248 | var e = edges[_i]; 249 | var _k = makeEdge(e, options); 250 | 251 | klayEdges.push(_k); 252 | 253 | klayEleLookup[e.id()] = _k; 254 | } 255 | 256 | // make hierarchy 257 | for (var _i2 = 0; _i2 < klayNodes.length; _i2++) { 258 | var _k2 = klayNodes[_i2]; 259 | var _n = _k2._cyEle; 260 | 261 | if (!_n.isChild()) { 262 | graph.children.push(_k2); 263 | } else { 264 | var parent = _n.parent(); 265 | var parentK = klayEleLookup[parent.id()]; 266 | 267 | var children = parentK.children = parentK.children || []; 268 | 269 | children.push(_k2); 270 | } 271 | } 272 | 273 | for (var _i3 = 0; _i3 < klayEdges.length; _i3++) { 274 | var _k3 = klayEdges[_i3]; 275 | var _e = _k3._cyEle; 276 | var parentSrc = _e.source().parent(); 277 | var parentTgt = _e.target().parent(); 278 | 279 | // put all edges in the top level for now 280 | // TODO does this cause issues in certain edgecases? 281 | if (false) { 282 | var kp = klayEleLookup[parentSrc.id()]; 283 | 284 | kp.edges = kp.edges || []; 285 | 286 | kp.edges.push(_k3); 287 | } else { 288 | graph.edges.push(_k3); 289 | } 290 | } 291 | 292 | return graph; 293 | }; 294 | 295 | function Layout(options) { 296 | var klayOptions = options.klay; 297 | 298 | this.options = assign({}, defaults, options); 299 | 300 | this.options.klay = assign({}, defaults.klay, klayOptions, klayOverrides); 301 | } 302 | 303 | Layout.prototype.run = function () { 304 | var layout = this; 305 | var options = this.options; 306 | 307 | var eles = options.eles; 308 | var nodes = eles.nodes(); 309 | var edges = eles.edges(); 310 | 311 | var graph = makeGraph(nodes, edges, options); 312 | 313 | klay.layout({ 314 | graph: graph, 315 | options: mapToKlayNS(options.klay), 316 | success: function success() {}, 317 | error: function error(_error) { 318 | throw _error; 319 | } 320 | }); 321 | 322 | nodes.filter(function (n) { 323 | return !n.isParent(); 324 | }).layoutPositions(layout, options, getPos); 325 | 326 | return this; 327 | }; 328 | 329 | Layout.prototype.stop = function () { 330 | return this; // chaining 331 | }; 332 | 333 | Layout.prototype.destroy = function () { 334 | return this; // chaining 335 | }; 336 | 337 | module.exports = Layout; 338 | 339 | /***/ }), 340 | /* 1 */ 341 | /***/ (function(module, exports, __webpack_require__) { 342 | 343 | "use strict"; 344 | 345 | 346 | // Simple, internal Object.assign() polyfill for options objects etc. 347 | 348 | module.exports = Object.assign != null ? Object.assign.bind(Object) : function (tgt) { 349 | for (var _len = arguments.length, srcs = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { 350 | srcs[_key - 1] = arguments[_key]; 351 | } 352 | 353 | srcs.filter(function (src) { 354 | return src != null; 355 | }).forEach(function (src) { 356 | Object.keys(src).forEach(function (k) { 357 | return tgt[k] = src[k]; 358 | }); 359 | }); 360 | 361 | return tgt; 362 | }; 363 | 364 | /***/ }), 365 | /* 2 */ 366 | /***/ (function(module, exports, __webpack_require__) { 367 | 368 | "use strict"; 369 | 370 | 371 | var defaults = { 372 | nodeDimensionsIncludeLabels: false, // Boolean which changes whether label dimensions are included when calculating node dimensions 373 | fit: true, // Whether to fit 374 | padding: 20, // Padding on fit 375 | animate: false, // Whether to transition the node positions 376 | animateFilter: function animateFilter(node, i) { 377 | return true; 378 | }, // Whether to animate specific nodes when animation is on; non-animated nodes immediately go to their final positions 379 | animationDuration: 500, // Duration of animation in ms if enabled 380 | animationEasing: undefined, // Easing of animation if enabled 381 | transform: function transform(node, pos) { 382 | return pos; 383 | }, // A function that applies a transform to the final node position 384 | ready: undefined, // Callback on layoutready 385 | stop: undefined, // Callback on layoutstop 386 | klay: { 387 | // Following descriptions taken from http://layout.rtsys.informatik.uni-kiel.de:9444/Providedlayout.html?algorithm=de.cau.cs.kieler.klay.layered 388 | addUnnecessaryBendpoints: false, // Adds bend points even if an edge does not change direction. 389 | aspectRatio: 1.6, // The aimed aspect ratio of the drawing, that is the quotient of width by height 390 | borderSpacing: 20, // Minimal amount of space to be left to the border 391 | compactComponents: false, // Tries to further compact components (disconnected sub-graphs). 392 | crossingMinimization: 'LAYER_SWEEP', // Strategy for crossing minimization. 393 | /* LAYER_SWEEP The layer sweep algorithm iterates multiple times over the layers, trying to find node orderings that minimize the number of crossings. The algorithm uses randomization to increase the odds of finding a good result. To improve its results, consider increasing the Thoroughness option, which influences the number of iterations done. The Randomization seed also influences results. 394 | INTERACTIVE Orders the nodes of each layer by comparing their positions before the layout algorithm was started. The idea is that the relative order of nodes as it was before layout was applied is not changed. This of course requires valid positions for all nodes to have been set on the input graph before calling the layout algorithm. The interactive layer sweep algorithm uses the Interactive Reference Point option to determine which reference point of nodes are used to compare positions. */ 395 | cycleBreaking: 'GREEDY', // Strategy for cycle breaking. Cycle breaking looks for cycles in the graph and determines which edges to reverse to break the cycles. Reversed edges will end up pointing to the opposite direction of regular edges (that is, reversed edges will point left if edges usually point right). 396 | /* GREEDY This algorithm reverses edges greedily. The algorithm tries to avoid edges that have the Priority property set. 397 | INTERACTIVE The interactive algorithm tries to reverse edges that already pointed leftwards in the input graph. This requires node and port coordinates to have been set to sensible values.*/ 398 | direction: 'UNDEFINED', // Overall direction of edges: horizontal (right / left) or vertical (down / up) 399 | /* UNDEFINED, RIGHT, LEFT, DOWN, UP */ 400 | edgeRouting: 'ORTHOGONAL', // Defines how edges are routed (POLYLINE, ORTHOGONAL, SPLINES) 401 | edgeSpacingFactor: 0.5, // Factor by which the object spacing is multiplied to arrive at the minimal spacing between edges. 402 | feedbackEdges: false, // Whether feedback edges should be highlighted by routing around the nodes. 403 | fixedAlignment: 'NONE', // Tells the BK node placer to use a certain alignment instead of taking the optimal result. This option should usually be left alone. 404 | /* NONE Chooses the smallest layout from the four possible candidates. 405 | LEFTUP Chooses the left-up candidate from the four possible candidates. 406 | RIGHTUP Chooses the right-up candidate from the four possible candidates. 407 | LEFTDOWN Chooses the left-down candidate from the four possible candidates. 408 | RIGHTDOWN Chooses the right-down candidate from the four possible candidates. 409 | BALANCED Creates a balanced layout from the four possible candidates. */ 410 | inLayerSpacingFactor: 1.0, // Factor by which the usual spacing is multiplied to determine the in-layer spacing between objects. 411 | layoutHierarchy: false, // Whether the selected layouter should consider the full hierarchy 412 | linearSegmentsDeflectionDampening: 0.3, // Dampens the movement of nodes to keep the diagram from getting too large. 413 | mergeEdges: false, // Edges that have no ports are merged so they touch the connected nodes at the same points. 414 | mergeHierarchyCrossingEdges: true, // If hierarchical layout is active, hierarchy-crossing edges use as few hierarchical ports as possible. 415 | nodeLayering: 'NETWORK_SIMPLEX', // Strategy for node layering. 416 | /* NETWORK_SIMPLEX This algorithm tries to minimize the length of edges. This is the most computationally intensive algorithm. The number of iterations after which it aborts if it hasn't found a result yet can be set with the Maximal Iterations option. 417 | LONGEST_PATH A very simple algorithm that distributes nodes along their longest path to a sink node. 418 | INTERACTIVE Distributes the nodes into layers by comparing their positions before the layout algorithm was started. The idea is that the relative horizontal order of nodes as it was before layout was applied is not changed. This of course requires valid positions for all nodes to have been set on the input graph before calling the layout algorithm. The interactive node layering algorithm uses the Interactive Reference Point option to determine which reference point of nodes are used to compare positions. */ 419 | nodePlacement: 'BRANDES_KOEPF', // Strategy for Node Placement 420 | /* BRANDES_KOEPF Minimizes the number of edge bends at the expense of diagram size: diagrams drawn with this algorithm are usually higher than diagrams drawn with other algorithms. 421 | LINEAR_SEGMENTS Computes a balanced placement. 422 | INTERACTIVE Tries to keep the preset y coordinates of nodes from the original layout. For dummy nodes, a guess is made to infer their coordinates. Requires the other interactive phase implementations to have run as well. 423 | SIMPLE Minimizes the area at the expense of... well, pretty much everything else. */ 424 | randomizationSeed: 1, // Seed used for pseudo-random number generators to control the layout algorithm; 0 means a new seed is generated 425 | routeSelfLoopInside: false, // Whether a self-loop is routed around or inside its node. 426 | separateConnectedComponents: true, // Whether each connected component should be processed separately 427 | spacing: 20, // Overall setting for the minimal amount of space to be left between objects 428 | thoroughness: 7 // How much effort should be spent to produce a nice layout.. 429 | }, 430 | priority: function priority(edge) { 431 | return null; 432 | } // Edges with a non-nil value are skipped when geedy edge cycle breaking is enabled 433 | }; 434 | 435 | module.exports = defaults; 436 | 437 | /***/ }), 438 | /* 3 */ 439 | /***/ (function(module, exports, __webpack_require__) { 440 | 441 | "use strict"; 442 | 443 | 444 | var impl = __webpack_require__(0); 445 | 446 | // registers the extension on a cytoscape lib ref 447 | var register = function register(cytoscape) { 448 | if (!cytoscape) { 449 | return; 450 | } // can't register if cytoscape unspecified 451 | 452 | cytoscape('layout', 'klay', impl); // register with cytoscape.js 453 | }; 454 | 455 | if (typeof cytoscape !== 'undefined') { 456 | // expose to global cytoscape (i.e. window.cytoscape) 457 | register(cytoscape); 458 | } 459 | 460 | module.exports = register; 461 | 462 | /***/ }), 463 | /* 4 */ 464 | /***/ (function(module, exports) { 465 | 466 | module.exports = __WEBPACK_EXTERNAL_MODULE_4__; 467 | 468 | /***/ }) 469 | /******/ ]); 470 | }); -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | cytoscape-klay.js demo 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 43 | 44 | 83 | 84 | 85 | 86 |

cytoscape-klay demo

87 | 88 |
89 | 90 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /example-graphs/planar-chain.json: -------------------------------------------------------------------------------- 1 | [{"data":{"id":"glyph9","sbgnbbox":{"x":1452.639173965406,"y":609.3619416544145,"w":"120.0","h":"60.0"},"sbgnclass":"macromolecule","sbgnlabel":"hexokinase","sbgnstatesandinfos":[],"ports":[]},"position":{"x":1111.6287997422921,"y":1043.3343801499798},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph0","sbgnbbox":{"x":1351.3490293961959,"y":518.9529901384763,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"glucose","sbgnstatesandinfos":[],"ports":[]},"position":{"x":1046.5127267544701,"y":968.307584024581},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph6","sbgnbbox":{"x":1358.2854747390154,"y":707.9866590968695,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"ATP","sbgnstatesandinfos":[],"sbgnclonemarker":true,"ports":[]},"position":{"x":1203.822207084513,"y":1026.3604616036287},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph8","sbgnbbox":{"x":1322.9939787691299,"y":614.6878118623499,"w":"20.0","h":"20.0"},"sbgnclass":"process","sbgnstatesandinfos":[],"ports":[]},"position":{"x":1132.6140587341597,"y":957.4190963606077},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph7","sbgnbbox":{"x":1239.4852011317887,"y":543.2369849876238,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"ADP","sbgnstatesandinfos":[],"sbgnclonemarker":true,"ports":[]},"position":{"x":1215.9574039199272,"y":928.7615457445613},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph12","sbgnbbox":{"x":841.6855140740067,"y":765.0152660242113,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"ADP","sbgnstatesandinfos":[],"sbgnclonemarker":true,"ports":[]},"position":{"x":974.101647903414,"y":545.2610826823577},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph13","sbgnbbox":{"x":1019.5908382748769,"y":841.6087025848726,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"ATP","sbgnstatesandinfos":[],"sbgnclonemarker":true,"ports":[]},"position":{"x":890.0442883049725,"y":553.7120264723198},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph1","sbgnbbox":{"x":1231.2768042260652,"y":673.2683218469676,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"glucose 6P","sbgnstatesandinfos":[],"ports":[]},"position":{"x":1108.875457801557,"y":868.436986054209},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph2","sbgnbbox":{"x":1039.8995038336504,"y":730.180116446269,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"fructose 6P","sbgnstatesandinfos":[],"ports":[]},"position":{"x":1008.6750452651474,"y":708.552003598157},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph15","sbgnbbox":{"x":569.5498472077387,"y":506.89980858075364,"w":"120.0","h":"60.0"},"sbgnclass":"macromolecule","sbgnlabel":"triose-P isomerase","sbgnstatesandinfos":[],"ports":[]},"position":{"x":617.029138744985,"y":848.501397371728},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph3","sbgnbbox":{"x":903.0347368937041,"y":654.3308627056822,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"fructose 1,6P","sbgnstatesandinfos":[],"ports":[]},"position":{"x":851.216930621302,"y":659.3455292277927},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph17","sbgnbbox":{"x":1195.6310733031135,"y":820.9504141631944,"w":"120.0","h":"60.0"},"sbgnclass":"macromolecule","sbgnlabel":"glucose-6P isomerase","sbgnstatesandinfos":[],"ports":[]},"position":{"x":1162.0418672015658,"y":741.0348588027871},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph10","sbgnbbox":{"x":1141.2404374322139,"y":732.3190922346248,"w":"20.0","h":"20.0"},"sbgnclass":"process","sbgnstatesandinfos":[],"ports":[]},"position":{"x":1081.9750202500586,"y":780.8279586001831},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph19","sbgnbbox":{"x":893.1427762830865,"y":856.2695126662625,"w":"120.0","h":"60.0"},"sbgnclass":"macromolecule","sbgnlabel":"phospho fructokinase","sbgnstatesandinfos":[],"ports":[]},"position":{"x":1029.7198381214419,"y":614.5224738923926},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph11","sbgnbbox":{"x":939.3335184518824,"y":758.3699048922733,"w":"20.0","h":"20.0"},"sbgnclass":"process","sbgnstatesandinfos":[],"ports":[]},"position":{"x":943.146420879508,"y":630.666279523552},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph18","sbgnbbox":{"x":770.4114528170364,"y":659.2220219290564,"w":"120.0","h":"60.0"},"sbgnclass":"macromolecule","sbgnlabel":"adolase","sbgnstatesandinfos":[],"ports":[]},"position":{"x":824.0970607627087,"y":764.0543961152389},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph16","sbgnbbox":{"x":818.0111009023315,"y":564.8072603606723,"w":"20.0","h":"20.0"},"sbgnclass":"process","sbgnstatesandinfos":[],"ports":[]},"position":{"x":759.5059724746263,"y":691.5421746456727},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph22","sbgnbbox":{"x":651.1292498357636,"y":314.1387423188818,"w":"120.0","h":"60.0"},"sbgnclass":"macromolecule","sbgnlabel":"GAPDH","sbgnstatesandinfos":[],"ports":[]},"position":{"x":594.961345615772,"y":522.0417541748872},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph4","sbgnbbox":{"x":792.0076145303351,"y":454.0225025614517,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"GA-3P","sbgnstatesandinfos":[],"ports":[]},"position":{"x":662.4787847243726,"y":675.2298760333642},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph23","sbgnbbox":{"x":704.0937009722281,"y":398.0421081673902,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"Pi","sbgnstatesandinfos":[],"ports":[]},"position":{"x":487.61615672751157,"y":603.1522856700377},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph24","sbgnbbox":{"x":809.2974819306742,"y":231.7141323534711,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"NAD","sbgnstatesandinfos":[],"ports":[]},"position":{"x":658.8451631465821,"y":581.7001108988744},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph25","sbgnbbox":{"x":890.826951363933,"y":299.74915938409947,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"H+","sbgnstatesandinfos":[],"ports":[]},"position":{"x":570.6960738862647,"y":695.0552734751661},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph20","sbgnbbox":{"x":786.2625869125006,"y":331.67766378118495,"w":"20.0","h":"20.0"},"sbgnclass":"process","sbgnstatesandinfos":[],"ports":[]},"position":{"x":574.1924371366047,"y":608.9484231821531},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph26","sbgnbbox":{"x":879.2981049664311,"y":389.27232563593486,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"NADH","sbgnstatesandinfos":[],"ports":[]},"position":{"x":498.3807896892781,"y":676.3002940106064},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph35","sbgnbbox":{"x":627.088268638501,"y":40.089848876876886,"w":"120.0","h":"60.0"},"sbgnclass":"macromolecule","sbgnlabel":"PGK1","sbgnstatesandinfos":[],"ports":[]},"position":{"x":366.9139970586849,"y":373.97753053557665},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph36","sbgnbbox":{"x":329.6761506918384,"y":187.20503497360494,"w":"120.0","h":"60.0"},"sbgnclass":"macromolecule","sbgnlabel":"PG mutase","sbgnstatesandinfos":[],"ports":[]},"position":{"x":518.0977549165863,"y":208.1526848145961},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph37","sbgnbbox":{"x":155.12947729633356,"y":379.5263531900425,"w":"120.0","h":"60.0"},"sbgnclass":"macromolecule","sbgnlabel":"enolase","sbgnstatesandinfos":[],"ports":[]},"position":{"x":276.26023607062757,"y":30.23957832428289},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph38","sbgnbbox":{"x":70.13952165372024,"y":581.2691021233562,"w":"120.0","h":"60.0"},"sbgnclass":"macromolecule","sbgnlabel":"pyruvate kinase","sbgnstatesandinfos":[],"ports":[]},"position":{"x":46.7377473535056,"y":221.32608736564873},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph21","sbgnbbox":{"x":713.4639263718316,"y":229.06355211274115,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"1,3 BPG","sbgnstatesandinfos":[],"ports":[]},"position":{"x":509.1755542479159,"y":522.729824186122},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph42","sbgnbbox":{"x":523.848994074475,"y":108.47701882803744,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"ADP","sbgnstatesandinfos":[],"sbgnclonemarker":true,"ports":[]},"position":{"x":350.07213069459794,"y":452.7584448470666},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph41","sbgnbbox":{"x":718.966532806447,"y":116.46683749236911,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"ATP","sbgnstatesandinfos":[],"sbgnclonemarker":true,"ports":[]},"position":{"x":393.95194752466443,"y":522.9647654134311},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph31","sbgnbbox":{"x":621.3138039842713,"y":145.7168752444793,"w":"20.0","h":"20.0"},"sbgnclass":"process","sbgnstatesandinfos":[],"ports":[]},"position":{"x":438.0668040542705,"y":442.95464186544984},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph27","sbgnbbox":{"x":525.2099120385327,"y":210.92542274858295,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"3 PG","sbgnstatesandinfos":[],"ports":[]},"position":{"x":454.4439329861533,"y":350.04938066829175},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph32","sbgnbbox":{"x":426.3492127437995,"y":257.85665030680025,"w":"20.0","h":"20.0"},"sbgnclass":"process","sbgnstatesandinfos":[],"ports":[]},"position":{"x":441.2359462445837,"y":258.7282268796613},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph28","sbgnbbox":{"x":346.30926488002945,"y":344.4562152937847,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"2 PG","sbgnstatesandinfos":[],"ports":[]},"position":{"x":372.31110615353043,"y":184.18232597220754},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph43","sbgnbbox":{"x":363.54724181648487,"y":486.5705174517715,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"H2O","sbgnstatesandinfos":[],"ports":[]},"position":{"x":371.5247035618821,"y":54.69545105135097},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph33","sbgnbbox":{"x":276.2797233955059,"y":435.0423711483709,"w":"20.0","h":"20.0"},"sbgnclass":"process","sbgnstatesandinfos":[],"ports":[]},"position":{"x":297.7083812604981,"y":115.15768260374307},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph29","sbgnbbox":{"x":227.86139816113416,"y":531.824141876398,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"PEP","sbgnstatesandinfos":[],"ports":[]},"position":{"x":207.6181191900656,"y":133.0100900216337},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph39","sbgnbbox":{"x":104.77693104995387,"y":691.8382969303054,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"ADP","sbgnstatesandinfos":[],"sbgnclonemarker":true,"ports":[]},"position":{"x":141.00971206745135,"y":234.3348651165328},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph40","sbgnbbox":{"x":292.039416141131,"y":643.4009391289965,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"ATP","sbgnstatesandinfos":[],"sbgnclonemarker":true,"ports":[]},"position":{"x":30.97156154365922,"y":130.21288019568124},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph34","sbgnbbox":{"x":193.8304385062596,"y":632.9540034207419,"w":"20.0","h":"20.0"},"sbgnclass":"process","sbgnstatesandinfos":[],"ports":[]},"position":{"x":117.02555107387298,"y":150.35691534513978},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph30","sbgnbbox":{"x":205.4745704273754,"y":733.5181650652648,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"pyruvate","sbgnstatesandinfos":[],"ports":[]},"position":{"x":106.29438061983728,"y":64.01880644701862},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph14","sbgnbbox":{"x":695.1248473196924,"y":482.8828321494848,"w":"20.0","h":"20.0"},"sbgnclass":"process","sbgnstatesandinfos":[],"ports":[]},"position":{"x":650.3790180209226,"y":765.6355043481531},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"glyph5","sbgnbbox":{"x":721.6687687330186,"y":570.3868893775194,"w":"60.0","h":"60.0"},"sbgnclass":"simple chemical","sbgnlabel":"DHA-P","sbgnstatesandinfos":[],"ports":[]},"position":{"x":733.3264274516343,"y":775.4141282148644},"group":"nodes","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e22","sbgnclass":"catalysis","sbgncardinality":0,"source":"glyph9","target":"glyph8","portsource":"glyph9","porttarget":"glyph8"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e23","sbgnclass":"consumption","sbgncardinality":0,"source":"glyph0","target":"glyph8","portsource":"glyph0","porttarget":"glyph8"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e24","sbgnclass":"production","sbgncardinality":0,"source":"glyph8","target":"glyph1","portsource":"glyph8","porttarget":"glyph1"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e25","sbgnclass":"consumption","sbgncardinality":0,"source":"glyph6","target":"glyph8","portsource":"glyph6","porttarget":"glyph8"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e26","sbgnclass":"production","sbgncardinality":0,"source":"glyph8","target":"glyph7","portsource":"glyph8","porttarget":"glyph7"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e27","sbgnclass":"production","sbgncardinality":0,"source":"glyph11","target":"glyph12","portsource":"glyph11","porttarget":"glyph12"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e28","sbgnclass":"consumption","sbgncardinality":0,"source":"glyph13","target":"glyph11","portsource":"glyph13","porttarget":"glyph11"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e29","sbgnclass":"consumption","sbgncardinality":0,"source":"glyph1","target":"glyph10","portsource":"glyph1","porttarget":"glyph10"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e30","sbgnclass":"production","sbgncardinality":0,"source":"glyph10","target":"glyph2","portsource":"glyph10","porttarget":"glyph2"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e31","sbgnclass":"consumption","sbgncardinality":0,"source":"glyph2","target":"glyph11","portsource":"glyph2","porttarget":"glyph11"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e32","sbgnclass":"production","sbgncardinality":0,"source":"glyph11","target":"glyph3","portsource":"glyph11","porttarget":"glyph3"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e33","sbgnclass":"production","sbgncardinality":0,"source":"glyph14","target":"glyph4","portsource":"glyph14","porttarget":"glyph4"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e34","sbgnclass":"catalysis","sbgncardinality":0,"source":"glyph15","target":"glyph14","portsource":"glyph15","porttarget":"glyph14"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e35","sbgnclass":"consumption","sbgncardinality":0,"source":"glyph3","target":"glyph16","portsource":"glyph3","porttarget":"glyph16"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e36","sbgnclass":"production","sbgncardinality":0,"source":"glyph16","target":"glyph5","portsource":"glyph16","porttarget":"glyph5"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e37","sbgnclass":"production","sbgncardinality":0,"source":"glyph16","target":"glyph4","portsource":"glyph16","porttarget":"glyph4"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e38","sbgnclass":"catalysis","sbgncardinality":0,"source":"glyph17","target":"glyph10","portsource":"glyph17","porttarget":"glyph10"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e39","sbgnclass":"catalysis","sbgncardinality":0,"source":"glyph19","target":"glyph11","portsource":"glyph19","porttarget":"glyph11"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e40","sbgnclass":"catalysis","sbgncardinality":0,"source":"glyph18","target":"glyph16","portsource":"glyph18","porttarget":"glyph16"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e41","sbgnclass":"catalysis","sbgncardinality":0,"source":"glyph22","target":"glyph20","portsource":"glyph22","porttarget":"glyph20"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e42","sbgnclass":"consumption","sbgncardinality":0,"source":"glyph4","target":"glyph20","portsource":"glyph4","porttarget":"glyph20"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e43","sbgnclass":"production","sbgncardinality":0,"source":"glyph20","target":"glyph21","portsource":"glyph20","porttarget":"glyph21"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e44","sbgnclass":"consumption","sbgncardinality":0,"source":"glyph23","target":"glyph20","portsource":"glyph23","porttarget":"glyph20"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e45","sbgnclass":"consumption","sbgncardinality":0,"source":"glyph24","target":"glyph20","portsource":"glyph24","porttarget":"glyph20"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e46","sbgnclass":"production","sbgncardinality":0,"source":"glyph20","target":"glyph25","portsource":"glyph20","porttarget":"glyph25"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e47","sbgnclass":"production","sbgncardinality":0,"source":"glyph20","target":"glyph26","portsource":"glyph20","porttarget":"glyph26"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e48","sbgnclass":"catalysis","sbgncardinality":0,"source":"glyph35","target":"glyph31","portsource":"glyph35","porttarget":"glyph31"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e49","sbgnclass":"catalysis","sbgncardinality":0,"source":"glyph36","target":"glyph32","portsource":"glyph36","porttarget":"glyph32"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e50","sbgnclass":"catalysis","sbgncardinality":0,"source":"glyph37","target":"glyph33","portsource":"glyph37","porttarget":"glyph33"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e51","sbgnclass":"catalysis","sbgncardinality":0,"source":"glyph38","target":"glyph34","portsource":"glyph38","porttarget":"glyph34"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e52","sbgnclass":"consumption","sbgncardinality":0,"source":"glyph21","target":"glyph31","portsource":"glyph21","porttarget":"glyph31"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e53","sbgnclass":"consumption","sbgncardinality":0,"source":"glyph42","target":"glyph31","portsource":"glyph42","porttarget":"glyph31"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e54","sbgnclass":"production","sbgncardinality":0,"source":"glyph31","target":"glyph41","portsource":"glyph31","porttarget":"glyph41"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e55","sbgnclass":"production","sbgncardinality":0,"source":"glyph31","target":"glyph27","portsource":"glyph31","porttarget":"glyph27"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e56","sbgnclass":"consumption","sbgncardinality":0,"source":"glyph27","target":"glyph32","portsource":"glyph27","porttarget":"glyph32"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e57","sbgnclass":"production","sbgncardinality":0,"source":"glyph32","target":"glyph28","portsource":"glyph32","porttarget":"glyph28"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e58","sbgnclass":"consumption","sbgncardinality":0,"source":"glyph28","target":"glyph33","portsource":"glyph28","porttarget":"glyph33"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e59","sbgnclass":"production","sbgncardinality":0,"source":"glyph33","target":"glyph43","portsource":"glyph33","porttarget":"glyph43"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e60","sbgnclass":"production","sbgncardinality":0,"source":"glyph33","target":"glyph29","portsource":"glyph33","porttarget":"glyph29"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e61","sbgnclass":"consumption","sbgncardinality":0,"source":"glyph29","target":"glyph34","portsource":"glyph29","porttarget":"glyph34"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e62","sbgnclass":"consumption","sbgncardinality":0,"source":"glyph39","target":"glyph34","portsource":"glyph39","porttarget":"glyph34"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e63","sbgnclass":"production","sbgncardinality":0,"source":"glyph34","target":"glyph40","portsource":"glyph34","porttarget":"glyph40"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e64","sbgnclass":"production","sbgncardinality":0,"source":"glyph34","target":"glyph30","portsource":"glyph34","porttarget":"glyph30"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""},{"data":{"id":"e65","sbgnclass":"production","sbgncardinality":0,"source":"glyph14","target":"glyph5","portsource":"glyph14","porttarget":"glyph5"},"position":{},"group":"edges","removed":false,"selected":false,"selectable":true,"locked":false,"grabbable":true,"classes":""}] 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cytoscape-klay", 3 | "version": "3.1.4", 4 | "description": "The Klay layout algorithm for Cytoscape.js", 5 | "main": "cytoscape-klay.js", 6 | "author": { 7 | "name": "Cytoscape Consortium" 8 | }, 9 | "scripts": { 10 | "postpublish": "run-s gh-pages", 11 | "gh-pages": "gh-pages -d pages", 12 | "copyright": "update license", 13 | "lint": "eslint src", 14 | "build": "cross-env NODE_ENV=production webpack", 15 | "build:min": "cross-env NODE_ENV=production MIN=true webpack", 16 | "build:release": "run-s build copyright", 17 | "watch": "webpack --progress --watch", 18 | "dev": "webpack-dev-server --open", 19 | "test": "mocha" 20 | }, 21 | "repository": { 22 | "type": "git", 23 | "url": "https://github.com/cytoscape/cytoscape.js-klay.git" 24 | }, 25 | "keywords": [ 26 | "cytoscape", 27 | "cytoscape-extension" 28 | ], 29 | "license": "MIT", 30 | "bugs": { 31 | "url": "https://github.com/cytoscape/cytoscape.js-klay/issues" 32 | }, 33 | "homepage": "https://github.com/cytoscape/cytoscape.js-klay", 34 | "devDependencies": { 35 | "babel-core": "^6.24.1", 36 | "babel-loader": "^7.0.0", 37 | "babel-preset-env": "^1.5.1", 38 | "camelcase": "^4.1.0", 39 | "chai": "4.0.2", 40 | "cpy-cli": "^1.0.1", 41 | "cross-env": "^5.0.0", 42 | "eslint": "^3.9.1", 43 | "gh-pages": "^1.0.0", 44 | "mocha": "3.4.2", 45 | "npm-run-all": "^4.1.2", 46 | "rimraf": "^2.6.2", 47 | "update": "^0.7.4", 48 | "updater-license": "^1.0.0", 49 | "webpack": "^2.6.1", 50 | "webpack-dev-server": "^2.4.5" 51 | }, 52 | "peerDependencies": { 53 | "cytoscape": "^3.2.0" 54 | }, 55 | "dependencies": { 56 | "klayjs": "^0.4.1" 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /pages/cytoscape-klay.js: -------------------------------------------------------------------------------- 1 | ../cytoscape-klay.js -------------------------------------------------------------------------------- /pages/demo.html: -------------------------------------------------------------------------------- 1 | ../demo.html -------------------------------------------------------------------------------- /pages/example-graphs: -------------------------------------------------------------------------------- 1 | ../example-graphs/ -------------------------------------------------------------------------------- /pages/index.html: -------------------------------------------------------------------------------- 1 | ../demo.html -------------------------------------------------------------------------------- /src/assign.js: -------------------------------------------------------------------------------- 1 | // Simple, internal Object.assign() polyfill for options objects etc. 2 | 3 | module.exports = Object.assign != null ? Object.assign.bind( Object ) : function( tgt, ...srcs ){ 4 | srcs.filter( src => src != null ).forEach( src => { 5 | Object.keys( src ).forEach( k => tgt[k] = src[k] ); 6 | } ); 7 | 8 | return tgt; 9 | }; 10 | -------------------------------------------------------------------------------- /src/defaults.js: -------------------------------------------------------------------------------- 1 | let defaults = { 2 | nodeDimensionsIncludeLabels: false, // Boolean which changes whether label dimensions are included when calculating node dimensions 3 | fit: true, // Whether to fit 4 | padding: 20, // Padding on fit 5 | animate: false, // Whether to transition the node positions 6 | animateFilter: function( node, i ){ return true; }, // Whether to animate specific nodes when animation is on; non-animated nodes immediately go to their final positions 7 | animationDuration: 500, // Duration of animation in ms if enabled 8 | animationEasing: undefined, // Easing of animation if enabled 9 | transform: function( node, pos ){ return pos; }, // A function that applies a transform to the final node position 10 | ready: undefined, // Callback on layoutready 11 | stop: undefined, // Callback on layoutstop 12 | klay: { 13 | // Following descriptions taken from http://layout.rtsys.informatik.uni-kiel.de:9444/Providedlayout.html?algorithm=de.cau.cs.kieler.klay.layered 14 | addUnnecessaryBendpoints: false, // Adds bend points even if an edge does not change direction. 15 | aspectRatio: 1.6, // The aimed aspect ratio of the drawing, that is the quotient of width by height 16 | borderSpacing: 20, // Minimal amount of space to be left to the border 17 | compactComponents: false, // Tries to further compact components (disconnected sub-graphs). 18 | crossingMinimization: 'LAYER_SWEEP', // Strategy for crossing minimization. 19 | /* LAYER_SWEEP The layer sweep algorithm iterates multiple times over the layers, trying to find node orderings that minimize the number of crossings. The algorithm uses randomization to increase the odds of finding a good result. To improve its results, consider increasing the Thoroughness option, which influences the number of iterations done. The Randomization seed also influences results. 20 | INTERACTIVE Orders the nodes of each layer by comparing their positions before the layout algorithm was started. The idea is that the relative order of nodes as it was before layout was applied is not changed. This of course requires valid positions for all nodes to have been set on the input graph before calling the layout algorithm. The interactive layer sweep algorithm uses the Interactive Reference Point option to determine which reference point of nodes are used to compare positions. */ 21 | cycleBreaking: 'GREEDY', // Strategy for cycle breaking. Cycle breaking looks for cycles in the graph and determines which edges to reverse to break the cycles. Reversed edges will end up pointing to the opposite direction of regular edges (that is, reversed edges will point left if edges usually point right). 22 | /* GREEDY This algorithm reverses edges greedily. The algorithm tries to avoid edges that have the Priority property set. 23 | INTERACTIVE The interactive algorithm tries to reverse edges that already pointed leftwards in the input graph. This requires node and port coordinates to have been set to sensible values.*/ 24 | direction: 'UNDEFINED', // Overall direction of edges: horizontal (right / left) or vertical (down / up) 25 | /* UNDEFINED, RIGHT, LEFT, DOWN, UP */ 26 | edgeRouting: 'ORTHOGONAL', // Defines how edges are routed (POLYLINE, ORTHOGONAL, SPLINES) 27 | edgeSpacingFactor: 0.5, // Factor by which the object spacing is multiplied to arrive at the minimal spacing between edges. 28 | feedbackEdges: false, // Whether feedback edges should be highlighted by routing around the nodes. 29 | fixedAlignment: 'NONE', // Tells the BK node placer to use a certain alignment instead of taking the optimal result. This option should usually be left alone. 30 | /* NONE Chooses the smallest layout from the four possible candidates. 31 | LEFTUP Chooses the left-up candidate from the four possible candidates. 32 | RIGHTUP Chooses the right-up candidate from the four possible candidates. 33 | LEFTDOWN Chooses the left-down candidate from the four possible candidates. 34 | RIGHTDOWN Chooses the right-down candidate from the four possible candidates. 35 | BALANCED Creates a balanced layout from the four possible candidates. */ 36 | inLayerSpacingFactor: 1.0, // Factor by which the usual spacing is multiplied to determine the in-layer spacing between objects. 37 | layoutHierarchy: false, // Whether the selected layouter should consider the full hierarchy 38 | linearSegmentsDeflectionDampening: 0.3, // Dampens the movement of nodes to keep the diagram from getting too large. 39 | mergeEdges: false, // Edges that have no ports are merged so they touch the connected nodes at the same points. 40 | mergeHierarchyCrossingEdges: true, // If hierarchical layout is active, hierarchy-crossing edges use as few hierarchical ports as possible. 41 | nodeLayering:'NETWORK_SIMPLEX', // Strategy for node layering. 42 | /* NETWORK_SIMPLEX This algorithm tries to minimize the length of edges. This is the most computationally intensive algorithm. The number of iterations after which it aborts if it hasn't found a result yet can be set with the Maximal Iterations option. 43 | LONGEST_PATH A very simple algorithm that distributes nodes along their longest path to a sink node. 44 | INTERACTIVE Distributes the nodes into layers by comparing their positions before the layout algorithm was started. The idea is that the relative horizontal order of nodes as it was before layout was applied is not changed. This of course requires valid positions for all nodes to have been set on the input graph before calling the layout algorithm. The interactive node layering algorithm uses the Interactive Reference Point option to determine which reference point of nodes are used to compare positions. */ 45 | nodePlacement:'BRANDES_KOEPF', // Strategy for Node Placement 46 | /* BRANDES_KOEPF Minimizes the number of edge bends at the expense of diagram size: diagrams drawn with this algorithm are usually higher than diagrams drawn with other algorithms. 47 | LINEAR_SEGMENTS Computes a balanced placement. 48 | INTERACTIVE Tries to keep the preset y coordinates of nodes from the original layout. For dummy nodes, a guess is made to infer their coordinates. Requires the other interactive phase implementations to have run as well. 49 | SIMPLE Minimizes the area at the expense of... well, pretty much everything else. */ 50 | randomizationSeed: 1, // Seed used for pseudo-random number generators to control the layout algorithm; 0 means a new seed is generated 51 | routeSelfLoopInside: false, // Whether a self-loop is routed around or inside its node. 52 | separateConnectedComponents: true, // Whether each connected component should be processed separately 53 | spacing: 20, // Overall setting for the minimal amount of space to be left between objects 54 | thoroughness: 7 // How much effort should be spent to produce a nice layout.. 55 | }, 56 | priority: function( edge ){ return null; }, // Edges with a non-nil value are skipped when geedy edge cycle breaking is enabled 57 | }; 58 | 59 | module.exports = defaults; 60 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | const impl = require('./layout'); 2 | 3 | // registers the extension on a cytoscape lib ref 4 | let register = function( cytoscape ){ 5 | if( !cytoscape ){ return; } // can't register if cytoscape unspecified 6 | 7 | cytoscape( 'layout', 'klay', impl ); // register with cytoscape.js 8 | }; 9 | 10 | if( typeof cytoscape !== 'undefined' ){ // expose to global cytoscape (i.e. window.cytoscape) 11 | register( cytoscape ); 12 | } 13 | 14 | module.exports = register; 15 | -------------------------------------------------------------------------------- /src/layout.js: -------------------------------------------------------------------------------- 1 | const klay = require('klayjs'); 2 | const assign = require('./assign'); 3 | const defaults = require('./defaults'); 4 | 5 | const klayNSLookup = { 6 | 'addUnnecessaryBendpoints': 'de.cau.cs.kieler.klay.layered.unnecessaryBendpoints', 7 | 'alignment': 'de.cau.cs.kieler.alignment', 8 | 'aspectRatio': 'de.cau.cs.kieler.aspectRatio', 9 | 'borderSpacing': 'borderSpacing', 10 | 'compactComponents': 'de.cau.cs.kieler.klay.layered.components.compact', 11 | 'compactionStrategy': 'de.cau.cs.kieler.klay.layered.nodeplace.compactionStrategy', 12 | 'contentAlignment': 'de.cau.cs.kieler.klay.layered.contentAlignment', 13 | 'crossingMinimization': 'de.cau.cs.kieler.klay.layered.crossMin', 14 | 'cycleBreaking': 'de.cau.cs.kieler.klay.layered.cycleBreaking', 15 | 'debugMode': 'de.cau.cs.kieler.debugMode', 16 | 'direction': 'de.cau.cs.kieler.direction', 17 | 'edgeLabelSideSelection': 'de.cau.cs.kieler.klay.layered.edgeLabelSideSelection', 18 | // 'de.cau.cs.kieler.klay.layered.edgeNodeSpacingFactor': options.edgeNodeSpacingFactor, 19 | 'edgeRouting': 'de.cau.cs.kieler.edgeRouting', 20 | 'edgeSpacingFactor': 'de.cau.cs.kieler.klay.layered.edgeSpacingFactor', 21 | 'feedbackEdges': 'de.cau.cs.kieler.klay.layered.feedBackEdges', 22 | 'fixedAlignment': 'de.cau.cs.kieler.klay.layered.fixedAlignment', 23 | 'greedySwitchCrossingMinimization': 'de.cau.cs.kieler.klay.layered.greedySwitch', 24 | 'hierarchyHandling': 'de.cau.cs.kieler.hierarchyHandling', 25 | 'inLayerSpacingFactor': 'de.cau.cs.kieler.klay.layered.inLayerSpacingFactor', 26 | 'interactiveReferencePoint': 'de.cau.cs.kieler.klay.layered.interactiveReferencePoint', 27 | 'layerConstraint': 'de.cau.cs.kieler.klay.layered.layerConstraint', 28 | 'layoutHierarchy': 'de.cau.cs.kieler.layoutHierarchy', 29 | 'linearSegmentsDeflectionDampening': 'de.cau.cs.kieler.klay.layered.linearSegmentsDeflectionDampening', 30 | 'mergeEdges': 'de.cau.cs.kieler.klay.layered.mergeEdges', 31 | 'mergeHierarchyCrossingEdges': 'de.cau.cs.kieler.klay.layered.mergeHierarchyEdges', 32 | 'noLayout': 'de.cau.cs.kieler.noLayout', 33 | 'nodeLabelPlacement': 'de.cau.cs.kieler.nodeLabelPlacement', 34 | 'nodeLayering': 'de.cau.cs.kieler.klay.layered.nodeLayering', 35 | 'nodePlacement': 'de.cau.cs.kieler.klay.layered.nodePlace', 36 | 'portAlignment': 'de.cau.cs.kieler.portAlignment', 37 | 'portAlignmentEastern': 'de.cau.cs.kieler.portAlignment.east', 38 | 'portAlignmentNorth': 'de.cau.cs.kieler.portAlignment.north', 39 | 'portAlignmentSouth': 'de.cau.cs.kieler.portAlignment.south', 40 | 'portAlignmentWest': 'de.cau.cs.kieler.portAlignment.west', 41 | 'portConstraints': 'de.cau.cs.kieler.portConstraints', 42 | 'portLabelPlacement': 'de.cau.cs.kieler.portLabelPlacement', 43 | 'portOffset': 'de.cau.cs.kieler.offset', 44 | 'portSide': 'de.cau.cs.kieler.portSide', 45 | 'portSpacing': 'de.cau.cs.kieler.portSpacing', 46 | 'postCompaction': 'de.cau.cs.kieler.klay.layered.postCompaction', 47 | 'priority': 'de.cau.cs.kieler.priority', 48 | 'randomizationSeed': 'de.cau.cs.kieler.randomSeed', 49 | 'routeSelfLoopInside': 'de.cau.cs.kieler.selfLoopInside', 50 | 'separateConnectedComponents': 'de.cau.cs.kieler.separateConnComp', 51 | 'sizeConstraint': 'de.cau.cs.kieler.sizeConstraint', 52 | 'sizeOptions': 'de.cau.cs.kieler.sizeOptions', 53 | 'spacing': 'de.cau.cs.kieler.spacing', 54 | 'splineSelfLoopPlacement': 'de.cau.cs.kieler.klay.layered.splines.selfLoopPlacement', 55 | 'thoroughness': 'de.cau.cs.kieler.klay.layered.thoroughness', 56 | 'wideNodesOnMultipleLayers': 'de.cau.cs.kieler.klay.layered.wideNodesOnMultipleLayers' 57 | }; 58 | 59 | const mapToKlayNS = function( klayOpts ){ 60 | let keys = Object.keys( klayOpts ); 61 | let ret = {}; 62 | 63 | for( let i = 0; i < keys.length; i++ ){ 64 | let key = keys[i]; 65 | let nsKey = klayNSLookup[key]; 66 | let val = klayOpts[key]; 67 | 68 | ret[ nsKey ] = val; 69 | } 70 | 71 | return ret; 72 | }; 73 | 74 | const klayOverrides = { 75 | interactiveReferencePoint: 'CENTER', // Determines which point of a node is considered by interactive layout phases. 76 | }; 77 | 78 | const getPos = function( ele ){ 79 | let parent = ele.parent(); 80 | let k = ele.scratch('klay'); 81 | let p = { 82 | x: k.x, 83 | y: k.y 84 | }; 85 | 86 | while (parent.nonempty()) { 87 | var kp = parent.scratch('klay'); 88 | p.x += kp.x; 89 | p.y += kp.y; 90 | parent = parent.parent(); 91 | } 92 | 93 | return p; 94 | }; 95 | 96 | const makeNode = function( node, options ){ 97 | let dims = node.layoutDimensions( options ); 98 | let padding = node.numericStyle('padding'); 99 | 100 | let k = { 101 | _cyEle: node, 102 | id: node.id(), 103 | padding: { 104 | top: padding, 105 | left: padding, 106 | bottom: padding, 107 | right: padding 108 | } 109 | }; 110 | 111 | if( !node.isParent() ){ 112 | k.width = dims.w; 113 | k.height = dims.h; 114 | } 115 | 116 | node.scratch('klay', k); 117 | 118 | return k; 119 | }; 120 | 121 | const makeEdge = function( edge, options ){ 122 | let k = { 123 | _cyEle: edge, 124 | id: edge.id(), 125 | source: edge.data('source'), 126 | target: edge.data('target'), 127 | properties: {} 128 | }; 129 | 130 | let priority = options.priority( edge ); 131 | 132 | if( priority != null ){ 133 | k.properties.priority = priority; 134 | } 135 | 136 | edge.scratch('klay', k); 137 | 138 | return k; 139 | }; 140 | 141 | const makeGraph = function( nodes, edges, options ){ 142 | let klayNodes = []; 143 | let klayEdges = []; 144 | let klayEleLookup = {}; 145 | let graph = { 146 | id: 'root', 147 | children: [], 148 | edges: [] 149 | }; 150 | 151 | // map all nodes 152 | for( let i = 0; i < nodes.length; i++ ){ 153 | let n = nodes[i]; 154 | let k = makeNode( n, options ); 155 | 156 | klayNodes.push( k ); 157 | 158 | klayEleLookup[ n.id() ] = k; 159 | } 160 | 161 | // map all edges 162 | for( let i = 0; i < edges.length; i++ ){ 163 | let e = edges[i]; 164 | let k = makeEdge( e, options ); 165 | 166 | klayEdges.push( k ); 167 | 168 | klayEleLookup[ e.id() ] = k; 169 | } 170 | 171 | // make hierarchy 172 | for( let i = 0; i < klayNodes.length; i++ ){ 173 | let k = klayNodes[i]; 174 | let n = k._cyEle; 175 | 176 | if( !n.isChild() ){ 177 | graph.children.push( k ); 178 | } else { 179 | let parent = n.parent(); 180 | let parentK = klayEleLookup[ parent.id() ]; 181 | 182 | let children = parentK.children = parentK.children || []; 183 | 184 | children.push( k ); 185 | } 186 | } 187 | 188 | for( let i = 0; i < klayEdges.length; i++ ){ 189 | let k = klayEdges[i]; 190 | let e = k._cyEle; 191 | let parentSrc = e.source().parent(); 192 | let parentTgt = e.target().parent(); 193 | 194 | // put all edges in the top level for now 195 | // TODO does this cause issues in certain edgecases? 196 | if( false && parentSrc.nonempty() && parentTgt.nonempty() && parentSrc.same( parentTgt ) ){ 197 | let kp = klayEleLookup[ parentSrc.id() ]; 198 | 199 | kp.edges = kp.edges || []; 200 | 201 | kp.edges.push( k ); 202 | } else { 203 | graph.edges.push( k ); 204 | } 205 | 206 | } 207 | 208 | return graph; 209 | }; 210 | 211 | function Layout( options ){ 212 | let klayOptions = options.klay; 213 | 214 | this.options = assign( {}, defaults, options ); 215 | 216 | this.options.klay = assign( {}, defaults.klay, klayOptions, klayOverrides ); 217 | } 218 | 219 | Layout.prototype.run = function(){ 220 | let layout = this; 221 | let options = this.options; 222 | 223 | let eles = options.eles; 224 | let nodes = eles.nodes(); 225 | let edges = eles.edges(); 226 | 227 | let graph = makeGraph( nodes, edges, options ); 228 | 229 | klay.layout({ 230 | graph: graph, 231 | options: mapToKlayNS( options.klay ), 232 | success: function () { 233 | }, 234 | error: function(error){ 235 | throw error; 236 | } 237 | }); 238 | 239 | nodes.filter(function(n){ 240 | return !n.isParent(); 241 | }).layoutPositions( layout, options, getPos ); 242 | 243 | return this; 244 | }; 245 | 246 | Layout.prototype.stop = function(){ 247 | return this; // chaining 248 | }; 249 | 250 | Layout.prototype.destroy = function(){ 251 | return this; // chaining 252 | }; 253 | 254 | module.exports = Layout; 255 | -------------------------------------------------------------------------------- /test/example.js: -------------------------------------------------------------------------------- 1 | const chai = require('chai'); 2 | 3 | describe('This', function(){ 4 | it('does that', function(){ 5 | expect( true ).to.be.true; 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const pkg = require('./package.json'); 3 | const camelcase = require('camelcase'); 4 | const process = require('process'); 5 | const webpack = require('webpack'); 6 | const env = process.env; 7 | const NODE_ENV = env.NODE_ENV; 8 | const MIN = env.MIN; 9 | const PROD = NODE_ENV === 'production'; 10 | 11 | let config = { 12 | devtool: PROD ? false : 'inline-source-map', 13 | entry: './src/index.js', 14 | output: { 15 | path: path.join( __dirname ), 16 | filename: pkg.name + '.js', 17 | library: camelcase( pkg.name ), 18 | libraryTarget: 'umd' 19 | }, 20 | module: { 21 | rules: [ 22 | { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' } 23 | ] 24 | }, 25 | externals: PROD ? { 26 | 'klayjs': { 27 | commonjs: 'klayjs', 28 | commonjs2: 'klayjs', 29 | amd: 'klayjs', 30 | root: '$klay' 31 | } 32 | } : [], 33 | plugins: MIN ? [ 34 | new webpack.optimize.UglifyJsPlugin({ 35 | compress: { 36 | warnings: false, 37 | drop_console: false, 38 | } 39 | }) 40 | ] : [] 41 | }; 42 | 43 | module.exports = config; 44 | --------------------------------------------------------------------------------