├── .npmignore
├── .babelrc
├── .gitignore
├── view-utilities-extension-demo.gif
├── bower.json
├── LICENSE
├── package.json
├── webpack.config.js
├── CITATION.cff
├── src
    ├── undo-redo.js
    ├── index.js
    └── view-utilities.js
├── README.md
├── cytoscape-view-utilities.js
├── demo.html
└── demo-undoable.html


/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": ["@babel/env"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .idea
3 | /nbproject/private/
4 | /nbproject/*


--------------------------------------------------------------------------------
/view-utilities-extension-demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iVis-at-Bilkent/cytoscape.js-view-utilities/HEAD/view-utilities-extension-demo.gif


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cytoscape-view-utilities",
 3 |   "description": "Package of view utilities for cytoscape.js",
 4 |   "main": "cytoscape-view-utilities.js",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "https://github.com/iVis-at-Bilkent/view-utilities.git"
 8 |   },
 9 |   "ignore": [
10 |     "**/.*",
11 |     "node_modules",
12 |     "bower_components",
13 |     "test",
14 |     "tests"
15 |   ],
16 |   "keywords": [
17 |     "cytoscape",
18 |     "cyext"
19 |   ],
20 |   "license": "MIT"
21 | }
22 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 - present, iVis@Bilkent.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do 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.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cytoscape-view-utilities",
 3 |   "version": "6.0.0",
 4 |   "description": "Package of view utilities for cytoscape.js",
 5 |   "main": "cytoscape-view-utilities.js",
 6 |   "spm": {
 7 |     "main": "cytopscape-view-utilities.js"
 8 |   },
 9 |   "scripts": {
10 |     "test": "echo \"Error: no test specified\" && exit 1",
11 |     "build": "cross-env NODE_ENV=production webpack",
12 |     "build:dev": "cross-env NODE_ENV=development webpack"
13 |   },
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "https://github.com/iVis-at-Bilkent/cytoscape.js-view-utilities.git"
17 |   },
18 |   "keywords": [
19 |     "cytoscape",
20 |     "cyext"
21 |   ],
22 |   "license": "MIT",
23 |   "bugs": {
24 |     "url": "https://github.com/iVis-at-Bilkent/cytoscape.js-view-utilities/issues"
25 |   },
26 |   "homepage": "https://github.com/iVis-at-Bilkent/cytoscape.js-view-utilities",
27 |   "devDependencies": {
28 |     "@babel/core": "^7.11.6",
29 |     "@babel/preset-env": "^7.11.5",
30 |     "babel-loader": "^8.1.0",
31 |     "camelcase": "^6.0.0",
32 |     "cross-env": "^7.0.2",
33 |     "webpack": "^4.44.2",
34 |     "webpack-cli": "^3.3.12"
35 |   },
36 |   "peerDependencies": {
37 |     "cytoscape": "^3.2.0"
38 |   },
39 |   "dependencies": {
40 |     "geometric": "^2.2.3"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/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 env = process.env;
 6 | 
 7 | const NODE_ENV = env.NODE_ENV;
 8 | const PROD = NODE_ENV === 'production';
 9 | const SRC_DIR = './src';
10 | 
11 | let config = {
12 |   // unless we are in production, use inline-source-map development tool
13 |   // which helps track down bugs
14 |   devtool: PROD ? false : 'inline-source-map',
15 | 
16 |   // entry point - src/index.js
17 |   entry: path.join(__dirname, SRC_DIR, 'index.js'),
18 | 
19 |   // webpack throws warning if not provided a default mode
20 |   // use the 'build:dev' script if you want development mode with non-minified file
21 |   // this mode is used in 'build' script
22 |   mode: 'production',
23 |   output: {
24 |     path: path.join( __dirname ),
25 |     filename: pkg.name + '.js',
26 |     library: camelcase( pkg.name ),
27 |     libraryTarget: 'umd'
28 |   },
29 |   // loader
30 |   module: {
31 |     rules: [
32 |       { 
33 |         test: /\.js$/, 
34 |         exclude: /node_modules/, 
35 |         use: 'babel-loader' 
36 |       }
37 |     ]
38 |   },
39 |   // minimize file if mode is production
40 |   optimization: {
41 |     minimize: PROD ? true : false
42 |   },
43 |   externals: {
44 |     geometric: 'geometric'
45 |   }
46 | };
47 | 
48 | module.exports = config;


--------------------------------------------------------------------------------
/CITATION.cff:
--------------------------------------------------------------------------------
 1 | cff-version: 1.2.0
 2 | message: "If you use this software, please cite it as below."
 3 | authors:
 4 | - family-names: "Dogrusoz"
 5 |   given-names: "Ugur"
 6 |   orcid: "https://orcid.org/0000-0002-7153-0784"
 7 | - family-names: "Karacelik"
 8 |   given-names: "Alper"
 9 |   orcid: "https://orcid.org/0000-0000-0000-0000"
10 | - family-names: "Safarli"
11 |   given-names: "Ilkin"
12 | - family-names: "Balci"
13 |   given-names: "Hasan"
14 |   orcid: "https://orcid.org/0000-0001-8319-7758"
15 | - family-names: "Dervishi"
16 |   given-names: "Leonard"
17 | - family-names: "Siper"
18 |   given-names: "Metin Can" 
19 | title: "cytoscape-view-utilities"
20 | version: 6.0.0
21 | date-released: 2021-06-16
22 | url: "https://github.com/iVis-at-Bilkent/cytoscape.js-view-utilities"
23 | preferred-citation:
24 |   type: article
25 |   authors:
26 |   - family-names: "Dogrusoz"
27 |     given-names: "Ugur"
28 |     orcid: "https://orcid.org/0000-0002-7153-0784"
29 |   - family-names: "Karacelik"
30 |     given-names: "Alper"
31 |     orcid: "https://orcid.org/0000-0000-0000-0000"
32 |   - family-names: "Safarli"
33 |     given-names: "Ilkin"
34 |   - family-names: "Balci"
35 |     given-names: "Hasan"
36 |     orcid: "https://orcid.org/0000-0001-8319-7758"
37 |   - family-names: "Dervishi"
38 |     given-names: "Leonard"
39 |   - family-names: "Siper"
40 |     given-names: "Metin Can"
41 |   doi: "10.1371/journal.pone.0197238"
42 |   journal: "PLOS ONE"
43 |   month: 5
44 |   start: 1 # First page number
45 |   end: 18 # Last page number
46 |   title: "Efficient methods and readily customizable libraries for managing complexity of large networks"
47 |   issue: 5
48 |   volume: 13
49 |   year: 2018
50 | 


--------------------------------------------------------------------------------
/src/undo-redo.js:
--------------------------------------------------------------------------------
 1 | // Registers ur actions related to highlight
 2 | function highlightUR(cy, ur, viewUtilities) {
 3 |   function getStatus(eles) {
 4 |     eles = eles ? eles : cy.elements();
 5 |     var classes = viewUtilities.getAllHighlightClasses();
 6 |     var r = [];
 7 |     for (var i = 0; i < classes.length; i++) {
 8 |       r.push(eles.filter(`.${classes[i]}:visible`))
 9 |     }
10 |     var selector = classes.map(x => '.' + x).join(',');
11 |     // last element of array is elements which are not highlighted by any style
12 |     r.push(eles.filter(":visible").not(selector));
13 |     
14 |     return r;
15 |   }
16 | 
17 |   function generalUndo(args) {
18 |     var current = args.current;
19 |     var r = [];
20 |     for (var i = 0; i < args.length - 1; i++) {
21 |       r.push(viewUtilities.highlight(args[i], i));
22 |     }
23 |     // last element is for not highlighted by any style
24 |     r.push(viewUtilities.removeHighlights(args[args.length - 1]));
25 | 
26 |     r['current'] = current;
27 |     return r;
28 |   }
29 | 
30 |   function generalRedo(args) {
31 |     var current = args.current;
32 |     var r = [];
33 |     for (var i = 0; i < current.length - 1; i++) {
34 |       r.push(viewUtilities.highlight(current[i], i));
35 |     }
36 |     // last element is for not highlighted by any style
37 |     r.push(viewUtilities.removeHighlights(current[current.length - 1]));
38 | 
39 |     r['current'] = current;
40 |     return r;
41 |   }
42 | 
43 |   function generateDoFunc(func) {
44 |     return function (args) {
45 |       var res = getStatus();
46 |       if (args.firstTime)
47 |         viewUtilities[func](args.eles, args.idx);
48 |       else
49 |         generalRedo(args);
50 | 
51 |       res.current = getStatus();
52 | 
53 |       return res;
54 |     };
55 |   }
56 | 
57 |   ur.action("highlightNeighbors", generateDoFunc("highlightNeighbors"), generalUndo);
58 |   ur.action("highlight", generateDoFunc("highlight"), generalUndo);
59 |   ur.action("removeHighlights", generateDoFunc("removeHighlights"), generalUndo);
60 | }
61 | 
62 | // Registers ur actions related to hide/show
63 | function hideShowUR(cy, ur, viewUtilities) {
64 |   function urShow(eles) {
65 |     return viewUtilities.show(eles);
66 |   }
67 | 
68 |   function urHide(eles) {
69 |     return viewUtilities.hide(eles);
70 |   }
71 | 
72 |   function urShowHiddenNeighbors(eles) {
73 |     return viewUtilities.showHiddenNeighbors(eles);
74 |   }
75 | 
76 |   ur.action("show", urShow, urHide);
77 |   ur.action("hide", urHide, urShow);
78 |   ur.action("showHiddenNeighbors",urShowHiddenNeighbors, urHide);
79 | }
80 | 
81 | module.exports = function (cy, ur, viewUtilities) {
82 |   highlightUR(cy, ur, viewUtilities);
83 |   hideShowUR(cy, ur, viewUtilities);
84 | };
85 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
  1 | ;
  2 | (function () {
  3 |   'use strict';
  4 | 
  5 |   // registers the extension on a cytoscape lib ref
  6 |   var register = function (cytoscape) {
  7 | 
  8 |     if (!cytoscape) {
  9 |       return;
 10 |     } // can't register if cytoscape unspecified
 11 | 
 12 |     var options = {
 13 |       highlightStyles: [],
 14 |       selectStyles: {},
 15 |       setVisibilityOnHide: false, // whether to set visibility on hide/show
 16 |       setDisplayOnHide: true, // whether to set display on hide/show
 17 |       zoomAnimationDuration: 1500, //default duration for zoom animation speed
 18 |       neighbor: function (ele) { // return desired neighbors of tapheld node
 19 |         return false;
 20 |       },
 21 |       neighborSelectTime: 500, //ms, time to taphold to select desired neighbors
 22 |       lassoStyle: { lineColor: "#d67614", lineWidth: 3 },
 23 |       htmlElem4marqueeZoom: '', // should be string like `#cy` or `.cy`. `#cy` means get element with the ID 'cy'. `.cy` means the element with class 'cy' 
 24 |       marqueeZoomCursor: 'se-resize', // the cursor that should be used when marquee zoom is enabled. It can also be an image if a URL to an image is given 
 25 |       isShowEdgesBetweenVisibleNodes: true // When showing elements, show edges if both source and target nodes become visible
 26 |     };
 27 | 
 28 |     var undoRedo = require("./undo-redo");
 29 |     var viewUtilities = require("./view-utilities");
 30 | 
 31 |     cytoscape('core', 'viewUtilities', function (opts) {
 32 |       var cy = this;
 33 | 
 34 |       function getScratch(eleOrCy) {
 35 |         if (!eleOrCy.scratch("_viewUtilities")) {
 36 |           eleOrCy.scratch("_viewUtilities", {});
 37 |         }
 38 | 
 39 |         return eleOrCy.scratch("_viewUtilities");
 40 |       }
 41 | 
 42 |       // If 'get' is given as the param then return the extension instance
 43 |       if (opts === 'get') {
 44 |         return getScratch(cy).instance;
 45 |       }
 46 | 
 47 |       /**
 48 |       * Deep copy or merge objects - replacement for jQuery deep extend
 49 |       * Taken from http://youmightnotneedjquery.com/#deep_extend
 50 |       * and bug related to deep copy of Arrays is fixed.
 51 |       * Usage:Object.extend({}, objA, objB)
 52 |       */
 53 |       function extendOptions(out) {
 54 |         out = out || {};
 55 | 
 56 |         for (var i = 1; i < arguments.length; i++) {
 57 |           var obj = arguments[i];
 58 | 
 59 |           if (!obj)
 60 |             continue;
 61 | 
 62 |           for (var key in obj) {
 63 |             if (obj.hasOwnProperty(key)) {
 64 |               if (Array.isArray(obj[key])) {
 65 |                 out[key] = obj[key].slice();
 66 |               } else if (typeof obj[key] === 'object') {
 67 |                 out[key] = extendOptions(out[key], obj[key]);
 68 |               } else {
 69 |                 out[key] = obj[key];
 70 |               }
 71 |             }
 72 |           }
 73 |         }
 74 | 
 75 |         return out;
 76 |       };
 77 | 
 78 |       options = extendOptions({}, options, opts);
 79 | 
 80 |       // create a view utilities instance
 81 |       var instance = viewUtilities(cy, options);
 82 | 
 83 |       if (cy.undoRedo) {
 84 |         var ur = cy.undoRedo(null, true);
 85 |         undoRedo(cy, ur, instance);
 86 |       }
 87 | 
 88 |       // set the instance on the scratch pad
 89 |       getScratch(cy).instance = instance;
 90 | 
 91 |       if (!getScratch(cy).initialized) {
 92 |         getScratch(cy).initialized = true;
 93 | 
 94 |         var shiftKeyDown = false;
 95 |         document.addEventListener('keydown', function (event) {
 96 |           if (event.key == "Shift") {
 97 |             shiftKeyDown = true;
 98 |           }
 99 |         });
100 |         document.addEventListener('keyup', function (event) {
101 |           if (event.key == "Shift") {
102 |             shiftKeyDown = false;
103 |           }
104 |         });
105 |         //Select the desired neighbors after taphold-and-free
106 |         cy.on('taphold', 'node, edge', function (event) {
107 |           var target = event.target || event.cyTarget;
108 |           var tapheld = false;
109 |           var neighborhood;
110 |           var timeout = setTimeout(function () {
111 |             if (shiftKeyDown) {
112 |               cy.elements().unselect();
113 |               neighborhood = options.neighbor(target);
114 |               if (neighborhood)
115 |                 neighborhood.select();
116 |               target.lock();
117 | 
118 |               // this call is necessary to make sure
119 |               // the tapheld node or edge stays selected
120 |               // after releasing taphold
121 |               target.unselectify();
122 | 
123 |               // tracks whether the taphold event happened
124 |               // necessary if we want to keep 'neighborSelectTime'
125 |               // property, otherwise unnecessary 
126 |               tapheld = true;
127 |             }
128 |           }, options.neighborSelectTime - 500);
129 | 
130 |           // this listener prevents the original tapheld node or edge
131 |           // from being unselected after releasing from taphold
132 |           // together with the 'unselectify' call above
133 |           // called as one time event since it's defined inside another event,
134 |           // shouldn't be defined over and over with 'on'
135 |           cy.one('tapend', function () {
136 |             if (tapheld) {
137 |               setTimeout(function () {
138 |                 target.selectify();
139 |                 target.unlock();
140 |                 tapheld = false;
141 |               }, 100);
142 |             }
143 |             else {
144 |               clearTimeout(timeout);
145 |             }
146 |           });
147 | 
148 |           cy.one('drag', 'node', function (e) {
149 |             var targetDragged = e.target || e.cyTarget;
150 |             if (target == targetDragged && tapheld === false) {
151 |               clearTimeout(timeout);
152 |             }
153 |           })
154 |         });
155 |       }
156 | 
157 |       // return the instance of extension
158 |       return getScratch(cy).instance;
159 |     });
160 | 
161 |   };
162 | 
163 |   if (typeof module !== 'undefined' && module.exports) { // expose as a commonjs module
164 |     module.exports = register;
165 |   }
166 | 
167 |   if (typeof define !== 'undefined' && define.amd) { // expose as an amd/requirejs module
168 |     define('cytoscape-view-utilities', function () {
169 |       return register;
170 |     });
171 |   }
172 | 
173 |   if (typeof cytoscape !== 'undefined') { // expose to global cytoscape (i.e. window.cytoscape)
174 |     register(cytoscape);
175 |   }
176 | 
177 | })();
178 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | cytoscape-view-utilities
  2 | ================================================================================
  3 | 
  4 | ## Description
  5 | 
  6 | This Cytoscape.js extension provides miscellenaous view utilities such as hide/show, highlight, marquee zoom and free form selection, distributed under [The MIT License](https://opensource.org/licenses/MIT).
  7 | 
  8 | ![](view-utilities-extension-demo.gif)
  9 | 
 10 | Please cite the following paper when using this extension: 
 11 | 
 12 | U. Dogrusoz , A. Karacelik, I. Safarli, H. Balci, L. Dervishi, and M. C. Siper, "[Efficient methods and readily customizable libraries for managing complexity of large networks](https://doi.org/10.1371/journal.pone.0197238)", PLoS ONE, 13(5): e0197238, 2018.
 13 | 
 14 | ## Demo
 15 | 
 16 | Click [here](https://ivis-at-bilkent.github.io/cytoscape.js-view-utilities/demo.html) (no undo) or [here](https://ivis-at-bilkent.github.io/cytoscape.js-view-utilities/demo-undoable.html) (undoable) for a demo
 17 | 
 18 | ## API
 19 | 
 20 | `var instance = cy.viewUtilities(options)` <br />
 21 | @param options — If not provided, default options will be used. See the below section for default options.
 22 | `highlightStyles` is array of objects. The objects should follow the format `{node: ..., edge: ...}`. `selectStyles` will be used if you want to override the highlighted styles when the objects are selected.
 23 | `lassoStyle` will be used to override the lasso line style.<br />
 24 | e.g
 25 | ```js
 26 | var options = {
 27 |   highlightStyles: [
 28 |     { node: { 'border-color': '#0b9bcd',  'border-width': 3 }, edge: {'line-color': '#0b9bcd', 'source-arrow-color': '#0b9bcd', 'target-arrow-color': '#0b9bcd', 'width' : 3} },
 29 |     { node: { 'border-color': '#04f06a',  'border-width': 3 }, edge: {'line-color': '#04f06a', 'source-arrow-color': '#04f06a', 'target-arrow-color': '#04f06a', 'width' : 3} },
 30 |   ],
 31 |   selectStyles: { 
 32 |     node: {'border-color': 'black', 'border-width': 3, 'background-color': 'lightgrey'}, 
 33 |     edge: {'line-color': 'black', 'source-arrow-color': 'black', 'target-arrow-color': 'black', 'width' : 3} 
 34 |   },
 35 |   setVisibilityOnHide: false, // whether to set visibility on hide/show
 36 |   setDisplayOnHide: true, // whether to set display on hide/show
 37 |   zoomAnimationDuration: 1500, // default duration for zoom animation speed
 38 |   neighbor: function(ele){
 39 |       return ele.closedNeighborhood();
 40 |   },
 41 |   neighborSelectTime: 500,
 42 |   lassoStyle: {lineColor: "#d67614", lineWidth: 3} // default lasso line color, dark orange, and default line width
 43 |   htmlElem4marqueeZoom: '', // should be string like `#cy` or `.cy`. `#cy` means get element with the ID 'cy'. `.cy` means the element with class 'cy' 
 44 |   marqueeZoomCursor: 'se-resize', // the cursor that should be used when marquee zoom is enabled. It can also be an image if a URL to an image is given
 45 |   isShowEdgesBetweenVisibleNodes: true // When showing elements, show edges if both source and target nodes become visible
 46 | };
 47 | var api = cy.viewUtilities(options);
 48 | ```
 49 | 
 50 | `instance.highlight(eles, idx = 0)` <br />
 51 | @param eles — [a cytoscape.js collection](https://js.cytoscape.org/#cy.collection) (collection of elements) to be highlighted <br />
 52 | @param idx — The index of the cytoscape.js style. If you don't specify it, the first style will be used. <br />
 53 | Apply style class to the specified elements. Style class is specified with its index <br />
 54 | 
 55 | `instance.highlightNeighbors(eles, idx = 0)` <br />
 56 | @param eles — [a cytoscape.js collection](https://js.cytoscape.org/#cy.collection) (collection of elements) to be highlighted <br />
 57 | @param idx — The index of the cytoscape.js style. If you don't specify it, the first style will be used. <br />
 58 | Highlights elements' neighborhood (based on the color option). Similar to the highlight function, either the elements and highlighting option can both be sent in the arguments. If only the elements are sent, then the default highlight color is used.
 59 | 
 60 | `instance.removeHighlights(eles)` <br />
 61 | @param eles — elements to remove highlights <br />
 62 | Remove highlights from eles.
 63 | 
 64 | `instance.hide(eles)` <br />
 65 | @param eles — elements to hide <br />
 66 | Hides given eles.
 67 | 
 68 | `instance.show(eles)` <br />
 69 | @param eles — elements to show <br />
 70 | Unhides given eles.
 71 | 
 72 | `instance.showHiddenNeighbors(eles)` <br />
 73 | @param eles — elements to show hidden neighbors <br />
 74 | Unhides hidden neigbors of given eles. Note that compound nodes are not respected as expected.
 75 | 
 76 | `instance.zoomToSelected(eles)` <br />
 77 | @param eles — elements to zoom <br />
 78 | Zoom to selected eles.
 79 | 
 80 | `instance.enableMarqueeZoom(callback)` <br />
 81 | @param callback — is called at the end of the function <br />
 82 | Enables marquee zoom. It is automatically called when CTRL+Shift keys are down.
 83 | 
 84 | `instance.disableMarqueeZoom()` <br />
 85 | Disables marquee zoom. It is automatically called when CTRL+Shift keys are up.
 86 | 
 87 | `instance.enableLassoMode(callback)` <br />
 88 | @param callback — is called at the end of the function<br />
 89 | Enables lasso tool.
 90 | 
 91 | `instance.disableLassoMode()` <br />
 92 | Disables lasso tool.
 93 | 
 94 | `instance.getHighlightStyles()` <br />
 95 | Returns current `highlightStyles` which is an array of objects like below
 96 | ``` 
 97 | [
 98 |   { node: { 'border-color': '#0b9bcd',  'border-width': 3 }, edge: {'line-color': '#0b9bcd', 'source-arrow-color': '#0b9bcd', 'target-arrow-color': '#0b9bcd', 'width' : 3} },
 99 |   { node: { 'border-color': '#bf0603',  'border-width': 3 }, edge: {'line-color': '#bf0603', 'source-arrow-color': '#bf0603', 'target-arrow-color': '#bf0603', 'width' : 3} },
100 | ],
101 | ```
102 | 
103 | `instance.getAllHighlightClasses()` <br />
104 | Returns all currently used [cytoscape.js style classes](https://js.cytoscape.org/#selectors/group-class-amp-id) 
105 | 
106 | `instance.changeHighlightStyle(idx, nodeStyle, edgeStyle) ` <br />
107 | @param idx — index of the style that is going to be changed <br />
108 | @param nodeStyle — [cytoscape style](https://js.cytoscape.org/#style) for nodes <br />
109 | @param edgeStyle — [cytoscape style](https://js.cytoscape.org/#style) for edges <br />
110 | Changes the style specified with `idx`.
111 | 
112 | `instance.addHighlightStyle(nodeStyle, edgeStyle) ` <br />
113 | @param nodeStyle — [cytoscape style](https://js.cytoscape.org/#style) for nodes <br />
114 | @param edgeStyle — [cytoscape style](https://js.cytoscape.org/#style) for edges <br />
115 | Adds a new style to the `highlightStyles` array.
116 | 
117 | `instance.removeHighlightStyle(styleIdx): void` <br />
118 | @param styleIdx —  index of the style to delete (0 based) <br />
119 | Removes the style from `highlightStyles` array.
120 | 
121 | `instance.changeLassoStyle(styleObj) ` <br />
122 | @param styleObj — lasso line style object with lineColor and/or lineWidth properties
123 | 
124 | ## Default Options
125 | ```js
126 | var options = {
127 |   highlightStyles: [],
128 |   selectStyles: {},
129 |   setVisibilityOnHide: false, // whether to set visibility on hide/show
130 |   setDisplayOnHide: true, // whether to set display on hide/show
131 |   zoomAnimationDuration: 1500, // default duration for zoom animation speed
132 |   neighbor: function (ele) { // return desired neighbors of tapheld element
133 |     return false;
134 |   },
135 |   neighborSelectTime: 500, // ms, time to taphold to select desired neighbors in addition to the taphold event detect time by cytoscape
136 |   lassoStyle: {lineColor: "#d67614", lineWidth: 3} // default lasso line color, dark orange, and default line width
137 | };
138 | ```
139 | 
140 | ## Default Undo-Redo Actions
141 | 
142 | `ur.do("highlight", args)` 
143 | 
144 | `ur.do("highlightNeighbors", args)` 
145 | `ur.do("highlightNeighbours", args)` 
146 | 
147 | `ur.do("removeHighlights")` 
148 | 
149 | `ur.do("hide", eles)` 
150 | 
151 | `ur.do("show", eles)` 
152 | 
153 | ## Dependencies
154 | 
155 |  * Cytoscape.js ^3.2.0
156 |  * Geometric.js ^2.2.3
157 |  * cytoscape-undo-redo.js ^1.0.8 (optional)
158 | 
159 | ## Usage instructions
160 | 
161 | Download the library:
162 |  * via npm: `npm install cytoscape-view-utilities` , 
163 |  * via bower: `bower install cytoscape-view-utilities` , or
164 |  * via direct download in the repository (probably from a tag).
165 | 
166 | `require()` the library as appropriate for your project:
167 | 
168 | CommonJS:
169 | 
170 | ``` js
171 | var cytoscape = require('cytoscape');
172 | var viewUtilities = require('cytoscape-view-utilities');
173 | 
174 | viewUtilities(cytoscape); // register extension
175 | ```
176 | 
177 | AMD:
178 | 
179 | ``` js
180 | require(['cytoscape', 'cytoscape-view-utilities'], function(cytoscape, view - utilities) {
181 |     view - utilities(cytoscape); // register extension
182 | });
183 | ```
184 | 
185 | Plain HTML/JS has the extension registered for you automatically, because no `require()` is needed.
186 | 
187 | ## Build targets
188 | 
189 | * `npm run build` : Build `./src/**` into `cytoscape-view-utilities.js` in production environment and minimize the file.
190 | * `npm run build:dev` :  Build `./src/**` into `cytoscape-view-utilities.js` in development environment without minimizing the file.
191 | 
192 | ## Publishing instructions
193 | 
194 | This project is set up to automatically be published to npm and bower.  To publish:
195 | 
196 | 1. Build the extension : `npm run build`
197 | 1. Commit the build : `git commit -am "Build for release"`
198 | 1. Bump the version number and tag: `npm version major|minor|patch`
199 | 1. Push to origin: `git push && git push --tags`
200 | 1. Publish to npm: `npm publish .`
201 | 1. If publishing to bower for the first time, you'll need to run `bower register cytoscape-view-utilities https://github.com/iVis-at-Bilkent/view-utilities.git`
202 | 
203 | ## Team
204 | 
205 |   + [Hasan Balci](https://github.com/hasanbalci), [Metin Can Siper](https://github.com/metincansiper), [Huseyin Eren Calik](https://github.com/herencalik), [Mubashira Zaman](https://github.com/MobiZaman), and [Ugur Dogrusoz](https://github.com/ugurdogrusoz) of [i-Vis at Bilkent University](http://www.cs.bilkent.edu.tr/~ivis)
206 | 
207 | ## Alumni
208 | 
209 |   + [Selim Firat Yilmaz](https://github.com/mrsfy), [Leonard Dervishi](https://github.com/leonarddrv), [Kaan Sancak](https://github.com/kaansancak)
210 | 
211 | 


--------------------------------------------------------------------------------
/cytoscape-view-utilities.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("geometric")):"function"==typeof define&&define.amd?define(["geometric"],t):"object"==typeof exports?exports.cytoscapeViewUtilities=t(require("geometric")):e.cytoscapeViewUtilities=t(e.geometric)}(window,(function(e){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var i=t[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(o,i,function(t){return e[t]}.bind(null,i));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){var o;function i(e){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}!function(){"use strict";var r=function(e){if(e){var t={highlightStyles:[],selectStyles:{},setVisibilityOnHide:!1,setDisplayOnHide:!0,zoomAnimationDuration:1500,neighbor:function(e){return!1},neighborSelectTime:500,lassoStyle:{lineColor:"#d67614",lineWidth:3},htmlElem4marqueeZoom:"",marqueeZoomCursor:"se-resize",isShowEdgesBetweenVisibleNodes:!0},o=n(1),r=n(2);e("core","viewUtilities",(function(e){var n=this;function l(e){return e.scratch("_viewUtilities")||e.scratch("_viewUtilities",{}),e.scratch("_viewUtilities")}if("get"===e)return l(n).instance;t=function e(t){t=t||{};for(var n=1;n<arguments.length;n++){var o=arguments[n];if(o)for(var r in o)o.hasOwnProperty(r)&&(Array.isArray(o[r])?t[r]=o[r].slice():"object"===i(o[r])?t[r]=e(t[r],o[r]):t[r]=o[r])}return t}({},t,e);var s=r(n,t);if(n.undoRedo){var u=n.undoRedo(null,!0);o(n,u,s)}if(l(n).instance=s,!l(n).initialized){l(n).initialized=!0;var a=!1;document.addEventListener("keydown",(function(e){"Shift"==e.key&&(a=!0)})),document.addEventListener("keyup",(function(e){"Shift"==e.key&&(a=!1)})),n.on("taphold","node, edge",(function(e){var o,i=e.target||e.cyTarget,r=!1,l=setTimeout((function(){a&&(n.elements().unselect(),(o=t.neighbor(i))&&o.select(),i.lock(),i.unselectify(),r=!0)}),t.neighborSelectTime-500);n.one("tapend",(function(){r?setTimeout((function(){i.selectify(),i.unlock(),r=!1}),100):clearTimeout(l)})),n.one("drag","node",(function(e){var t=e.target||e.cyTarget;i==t&&!1===r&&clearTimeout(l)}))}))}return l(n).instance}))}};e.exports&&(e.exports=r),void 0===(o=function(){return r}.call(t,n,t,e))||(e.exports=o),"undefined"!=typeof cytoscape&&r(cytoscape)}()},function(e,t){function n(e,t,n){function o(t){t=t||e.elements();for(var o=n.getAllHighlightClasses(),i=[],r=0;r<o.length;r++)i.push(t.filter(".".concat(o[r],":visible")));var l=o.map((function(e){return"."+e})).join(",");return i.push(t.filter(":visible").not(l)),i}function i(e){for(var t=e.current,o=[],i=0;i<e.length-1;i++)o.push(n.highlight(e[i],i));return o.push(n.removeHighlights(e[e.length-1])),o.current=t,o}function r(e){return function(t){var i=o();return t.firstTime?n[e](t.eles,t.idx):function(e){for(var t=e.current,o=[],i=0;i<t.length-1;i++)o.push(n.highlight(t[i],i));o.push(n.removeHighlights(t[t.length-1])),o.current=t}(t),i.current=o(),i}}t.action("highlightNeighbors",r("highlightNeighbors"),i),t.action("highlight",r("highlight"),i),t.action("removeHighlights",r("removeHighlights"),i)}e.exports=function(e,t,o){n(e,t,o),function(e,t,n){function o(e){return n.show(e)}function i(e){return n.hide(e)}t.action("show",o,i),t.action("hide",i,o),t.action("showHiddenNeighbors",(function(e){return n.showHiddenNeighbors(e)}),i)}(0,t,o)}},function(e,t,n){e.exports=function(e,t){var o=[],i=0,r=!1,l=!1,s=!1,u=!1,a=!1,c=null;function h(){u=null,a||(d(!0),a=!0,l=!1,s=!1,r&&(b.disableMarqueeZoom(),r=!1))}function d(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(t.htmlElem4marqueeZoom){var n=null;t.htmlElem4marqueeZoom.startsWith(".")&&(n=document.getElementsByClassName(t.htmlElem4marqueeZoom.substr(1))[0]),t.htmlElem4marqueeZoom.startsWith("#")&&(n=document.getElementById(t.htmlElem4marqueeZoom.substr(1))),n?e?n.style.cursor=c:(c=n.style.cursor,t.marqueeZoomCursor.includes(".")?n.style.cursor="url('".concat(t.marqueeZoomCursor,"'), pointer"):n.style.cursor=t.marqueeZoomCursor):console.log("element not found!")}}function g(){t.selectStyles.node&&e.style().selector("node:selected").css(t.selectStyles.node).update(),t.selectStyles.edge&&e.style().selector("edge:selected").css(t.selectStyles.edge).update()}function f(n){var i=o[n],r=t.highlightStyles[n].node,l=t.highlightStyles[n].edge;e.style().selector("node."+i).css(r).update(),e.style().selector("edge."+i).css(l).update()}function y(n,i){e.startBatch();for(var r=0;r<t.highlightStyles.length;r++)n.removeClass(o[r]);n.addClass(o[i]),e.endBatch()}function m(e){return e.add(e.descendants()).closedNeighborhood()}!function(){for(var e=0;e<t.highlightStyles.length;e++){var n="__highligtighted__"+i;o.push(n),i++,f(e)}g(),document.addEventListener("keydown",(function(e){"Control"!=e.key&&"Shift"!=e.key&&"Meta"!=e.key||("Control"==e.key||"Meta"==e.key?s=!0:"Shift"==e.key&&(l=!0),a=!1,clearTimeout(u),u=setTimeout(h,750),s&&l&&!r&&(b.enableMarqueeZoom(),r=!0))})),document.addEventListener("keyup",(function(e){"Control"!=e.key&&"Shift"!=e.key&&"Meta"!=e.key||(a=!0,"Shift"==e.key?l=!1:"Control"!=e.key&&"Meta"!=e.key||(s=!1),!r||l&&s||(b.disableMarqueeZoom(),r=!1))}))}();var p,v,b={};b.hide=function(e){return(e=(e=e.filter(":visible")).union(e.connectedEdges())).unselect(),t.setVisibilityOnHide&&e.css("visibility","hidden"),t.setDisplayOnHide&&e.css("display","none"),e},b.show=function(e){if(e=e.not(":visible"),t.isShowEdgesBetweenVisibleNodes){var n=e.connectedEdges((function(t){return!(!t.source().visible()&&!e.contains(t.source())||!t.target().visible()&&!e.contains(t.target()))}));e=e.union(n)}return e.unselect(),t.setVisibilityOnHide&&e.css("visibility","visible"),t.setDisplayOnHide&&e.css("display","element"),e},b.showHiddenNeighbors=function(e){return this.show(m(e))},b.highlight=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return y(e,t),e},b.getHighlightStyles=function(){return t.highlightStyles},b.highlightNeighbors=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return this.highlight(m(e),t)},b.removeHighlights=function(n){e.startBatch(),null!=n&&null!=n.length||(n=e.elements());for(var i=0;i<t.highlightStyles.length;i++)n.removeClass(o[i]);return e.endBatch(),n},b.isHighlighted=function(e){for(var n=!1,i=0;i<t.highlightStyles.length;i++)e.is("."+o[i]+":visible")&&(n=!0);return n},b.changeHighlightStyle=function(e,n,o){t.highlightStyles[e].node=n,t.highlightStyles[e].edge=o,f(e),g()},b.addHighlightStyle=function(e,n){var r={node:e,edge:n};t.highlightStyles.push(r);var l="__highligtighted__"+i;o.push(l),i++,f(t.highlightStyles.length-1),g()},b.removeHighlightStyle=function(n){n<0||n>t.highlightStyles.length-1||(e.elements().removeClass(o[n]),t.highlightStyles.splice(n,1),o.splice(n,1))},b.getAllHighlightClasses=function(){for(var e=[],n=0;n<t.highlightStyles.length;n++)e.push(o[n]);return o},b.zoomToSelected=function(n){var o,i=n.boundingBox(),r=Math.abs(i.x1-i.x2),l=Math.abs(i.y1-i.y2);return o=r>=200||l>=200?50:e.width()<e.height()?(200-r)/2*e.width()/200:(200-l)/2*e.height()/200,e.animate({fit:{eles:n,padding:o}},{duration:t.zoomAnimationDuration}),n},b.enableMarqueeZoom=function(n){var o,i,s,u;d(!1),r=!0,e.autounselectify(!0),e.one("tapstart",p=function(e){1==l&&(o=e.position.x,i=e.position.y,s=void 0)}),e.one("tapend",v=function(r){if(s=r.position.x,u=r.position.y,null==o||null==s)return e.autounselectify(!1),void(n&&n());if(o>s){var l=o;o=s,s=l}if(i>u){l=i;i=u,u=l}var a;s-o<200&&(o-=a=(200-(s-o))/2,s+=a);u-i<200&&(i-=a=(200-(u-i))/2,u+=a);if(o>e.elements().boundingBox().x2||s<e.elements().boundingBox().x1||i>e.elements().boundingBox().y2||u<e.elements().boundingBox().y1)return e.autounselectify(!1),void(n&&n());var c=Math.min(e.width()/Math.abs(s-o),e.height()/Math.abs(u-i)),h=e.width()/2-(e.pan().x+c*(o+s)/2),d=e.height()/2-(e.pan().y+c*(i+u)/2);e.animate({panBy:{x:h,y:d},zoom:c,duration:t.zoomAnimationDuration,complete:function(){n&&n(),e.autounselectify(!1)}})})},b.disableMarqueeZoom=function(){d(!0),e.off("tapstart",p),e.off("tapend",v),e.autounselectify(!1),r=!1};var S=n(3);return b.changeLassoStyle=function(e){e.lineWidth&&(t.lassoStyle.lineWidth=e.lineWidth),e.lineColor&&(t.lassoStyle.lineColor=e.lineColor)},b.enableLassoMode=function(n){var o=!1,i=document.createElement("canvas");i.id="lasso-canvas";var r=e.container();r.appendChild(i);var l=r.offsetWidth,s=r.offsetHeight;i.width=l,i.height=s,i.setAttribute("style","z-index: 1000; position: absolute; top: 0; left: 0;"),e.panningEnabled(!1),e.zoomingEnabled(!1),e.autounselectify(!0);var u=[];i.onclick=function(l){if(0==o){o=!0;var s=i.getContext("2d");s.strokeStyle=t.lassoStyle.lineColor,s.lineWidth=t.lassoStyle.lineWidth,s.lineJoin="round",e.panningEnabled(!1),e.zoomingEnabled(!1),e.autounselectify(!0);var a=l.offsetX,c=l.offsetY;u.push([a,c]),i.onmouseleave=function(t){o=!1,r.removeChild(i),i=null,e.panningEnabled(!0),e.zoomingEnabled(!0),e.autounselectify(!1),n&&n()},i.onmousemove=function(e){s.beginPath(),u.push([e.offsetX,e.offsetY]),s.moveTo(a,c),s.lineTo(e.offsetX,e.offsetY),a=e.offsetX,c=e.offsetY,s.stroke(),s.closePath()}}else{var h=e.elements();u.push(u[0]);for(var d=0;d<h.length;d++)if(h[d].isEdge()){var g=[h[d].sourceEndpoint().x*e.zoom()+e.pan().x,h[d].sourceEndpoint().y*e.zoom()+e.pan().y],f=[h[d].targetEndpoint().x*e.zoom()+e.pan().x,h[d].targetEndpoint().y*e.zoom()+e.pan().y];S.pointInPolygon(g,u)&&S.pointInPolygon(f,u)&&h[d].select()}else{e.autounselectify(!1);var y=[[h[d].renderedBoundingBox().x1,h[d].renderedBoundingBox().y1],[h[d].renderedBoundingBox().x1,h[d].renderedBoundingBox().y2],[h[d].renderedBoundingBox().x2,h[d].renderedBoundingBox().y2],[h[d].renderedBoundingBox().x2,h[d].renderedBoundingBox().y1]];(S.polygonIntersectsPolygon(y,u)||S.polygonInPolygon(y,u)||S.polygonInPolygon(u,y))&&h[d].select()}o=!1,r.removeChild(i),i=null,e.panningEnabled(!0),e.zoomingEnabled(!0),n&&n()}}},b.disableLassoMode=function(){var t=document.getElementById("lasso-canvas");t&&(t.parentElement.removeChild(t),t=null),e.panningEnabled(!0),e.zoomingEnabled(!0),e.autounselectify(!1)},b}},function(t,n){t.exports=e}])}));


--------------------------------------------------------------------------------
/src/view-utilities.js:
--------------------------------------------------------------------------------
  1 | var viewUtilities = function (cy, options) {
  2 | 
  3 |   var classNames4Styles = [];
  4 |   // give a unique name for each unique style EVER added
  5 |   var totStyleCnt = 0;
  6 |   var marqueeZoomEnabled = false;
  7 |   var shiftKeyDown = false;
  8 |   var ctrlKeyDown = false;
  9 |   var timer4KeyUp = false;
 10 |   var isDownedKeyUp = false;
 11 |   var prevCursor = null;
 12 |   init();
 13 |   function init() {
 14 |     // add provided styles
 15 |     for (var i = 0; i < options.highlightStyles.length; i++) {
 16 |       var s = '__highligtighted__' + totStyleCnt;
 17 |       classNames4Styles.push(s);
 18 |       totStyleCnt++;
 19 |       updateCyStyle(i);
 20 |     }
 21 | 
 22 |     // add styles for selected
 23 |     addSelectionStyles();
 24 | 
 25 |     document.addEventListener("keydown", function (event) {
 26 |       if (event.key != "Control" && event.key != "Shift" && event.key != "Meta") {
 27 |         return;
 28 |       }
 29 | 
 30 |       if (event.key == "Control" || event.key == "Meta") {
 31 |         ctrlKeyDown = true;
 32 |       }
 33 |       else if (event.key == "Shift") {
 34 |         shiftKeyDown = true;
 35 |       }
 36 |       isDownedKeyUp = false;
 37 |       clearTimeout(timer4KeyUp);
 38 |       timer4KeyUp = setTimeout(callKeyUpManually, 750);
 39 |       if (ctrlKeyDown && shiftKeyDown && !marqueeZoomEnabled) {
 40 |         instance.enableMarqueeZoom();
 41 |         marqueeZoomEnabled = true;
 42 |       }
 43 |     });
 44 | 
 45 |     document.addEventListener("keyup", function (event) {
 46 |       if (event.key != "Control" && event.key != "Shift" && event.key != "Meta") {
 47 |         return;
 48 |       }
 49 |       isDownedKeyUp = true;
 50 |       if (event.key == "Shift") {
 51 |         shiftKeyDown = false;
 52 |       }
 53 |       else if (event.key == "Control" || event.key == "Meta") {
 54 |         ctrlKeyDown = false;
 55 |       }
 56 |       if (marqueeZoomEnabled && (!shiftKeyDown || !ctrlKeyDown)) {
 57 |         instance.disableMarqueeZoom();
 58 |         marqueeZoomEnabled = false;
 59 |       }
 60 |     });
 61 | 
 62 |   }
 63 | 
 64 |   // ctrl + shift + tab does not call keyup after keydown
 65 |   function callKeyUpManually() {
 66 |     timer4KeyUp = null;
 67 |     if (isDownedKeyUp) {
 68 |       return;
 69 |     }
 70 |     setCursor(true);
 71 |     isDownedKeyUp = true;
 72 |     shiftKeyDown = false;
 73 |     ctrlKeyDown = false;
 74 |     if (marqueeZoomEnabled) {
 75 |       instance.disableMarqueeZoom();
 76 |       marqueeZoomEnabled = false;
 77 |     }
 78 |   }
 79 | 
 80 |   function setCursor(isReturnBack = false) {
 81 |     if (!options.htmlElem4marqueeZoom) {
 82 |       return;
 83 |     }
 84 |     let el = null;
 85 |     if (options.htmlElem4marqueeZoom.startsWith('.')) {
 86 |       el = document.getElementsByClassName(options.htmlElem4marqueeZoom.substr(1))[0];
 87 |     }
 88 |     if (options.htmlElem4marqueeZoom.startsWith('#')) {
 89 |       el = document.getElementById(options.htmlElem4marqueeZoom.substr(1));
 90 |     }
 91 |     if (!el) {
 92 |       console.log('element not found!');
 93 |       return;
 94 |     }
 95 |     if (isReturnBack) {
 96 |       el.style.cursor = prevCursor;
 97 |     } else {
 98 |       prevCursor = el.style.cursor;
 99 |       if (options.marqueeZoomCursor.includes('.')) {
100 |         el.style.cursor = `url('${options.marqueeZoomCursor}'), pointer`;
101 |       } else {
102 |         el.style.cursor = options.marqueeZoomCursor;
103 |       }
104 |     }
105 |   }
106 | 
107 |   function addSelectionStyles() {
108 |     if (options.selectStyles.node) {
109 |       cy.style().selector('node:selected').css(options.selectStyles.node).update();
110 |     }
111 |     if (options.selectStyles.edge) {
112 |       cy.style().selector('edge:selected').css(options.selectStyles.edge).update();
113 |     }
114 |   }
115 | 
116 |   function updateCyStyle(classIdx) {
117 |     var className = classNames4Styles[classIdx];
118 |     var cssNode = options.highlightStyles[classIdx].node;
119 |     var cssEdge = options.highlightStyles[classIdx].edge;
120 |     cy.style().selector('node.' + className).css(cssNode).update();
121 |     cy.style().selector('edge.' + className).css(cssEdge).update();
122 |   }
123 | 
124 |   // Helper functions for internal usage (not to be exposed)
125 |   function highlight(eles, idx) {
126 |     cy.startBatch();
127 |     for (var i = 0; i < options.highlightStyles.length; i++) {
128 |       eles.removeClass(classNames4Styles[i]);
129 |     }
130 |     eles.addClass(classNames4Styles[idx]);
131 |     cy.endBatch();
132 |   }
133 | 
134 |   function getWithNeighbors(eles) {
135 |     return eles.add(eles.descendants()).closedNeighborhood();
136 |   }
137 |   // the instance to be returned
138 |   var instance = {};
139 | 
140 |   // Section hide-show
141 |   // hide given eles
142 |   instance.hide = function (eles) {
143 |     //eles = eles.filter("node")
144 |     eles = eles.filter(":visible");
145 |     eles = eles.union(eles.connectedEdges());
146 | 
147 |     eles.unselect();
148 | 
149 |     if (options.setVisibilityOnHide) {
150 |       eles.css('visibility', 'hidden');
151 |     }
152 | 
153 |     if (options.setDisplayOnHide) {
154 |       eles.css('display', 'none');
155 |     }
156 | 
157 |     return eles;
158 |   };
159 | 
160 |   // unhide given eles
161 |   instance.show = function (eles) {
162 |     eles = eles.not(":visible");
163 | 
164 |     if (options.isShowEdgesBetweenVisibleNodes) {
165 |       var connectedEdges = eles.connectedEdges(function (edge) {
166 |         if ((edge.source().visible() || eles.contains(edge.source())) && (edge.target().visible() || eles.contains(edge.target()))) {
167 |           return true;
168 |         }
169 |         return false;
170 |       });
171 |       eles = eles.union(connectedEdges);
172 |     }
173 | 
174 |     eles.unselect();
175 | 
176 |     if (options.setVisibilityOnHide) {
177 |       eles.css('visibility', 'visible');
178 |     }
179 | 
180 |     if (options.setDisplayOnHide) {
181 |       eles.css('display', 'element');
182 |     }
183 | 
184 |     return eles;
185 |   };
186 | 
187 |   // Section highlight
188 |   instance.showHiddenNeighbors = function (eles) {
189 |     return this.show(getWithNeighbors(eles));
190 |   };
191 | 
192 |   // Highlights eles
193 |   instance.highlight = function (eles, idx = 0) {
194 |     highlight(eles, idx); // Use the helper here
195 |     return eles;
196 |   };
197 | 
198 |   instance.getHighlightStyles = function () {
199 |     return options.highlightStyles;
200 |   };
201 | 
202 |   // Highlights eles' neighborhood
203 |   instance.highlightNeighbors = function (eles, idx = 0) {
204 |     return this.highlight(getWithNeighbors(eles), idx);
205 |   };
206 | 
207 |   // Remove highlights from eles.
208 |   // If eles is not defined considers cy.elements()
209 |   instance.removeHighlights = function (eles) {
210 |     cy.startBatch();
211 |     if (eles == null || eles.length == null) {
212 |       eles = cy.elements();
213 |     }
214 |     for (var i = 0; i < options.highlightStyles.length; i++) {
215 |       eles.removeClass(classNames4Styles[i]);
216 |     }
217 |     cy.endBatch();
218 |     return eles;
219 |   };
220 | 
221 |   // Indicates if the ele is highlighted
222 |   instance.isHighlighted = function (ele) {
223 |     var isHigh = false;
224 |     for (var i = 0; i < options.highlightStyles.length; i++) {
225 |       if (ele.is('.' + classNames4Styles[i] + ':visible')) {
226 |         isHigh = true;
227 |       }
228 |     }
229 |     return isHigh;
230 |   };
231 | 
232 |   instance.changeHighlightStyle = function (idx, nodeStyle, edgeStyle) {
233 |     options.highlightStyles[idx].node = nodeStyle;
234 |     options.highlightStyles[idx].edge = edgeStyle;
235 |     updateCyStyle(idx);
236 |     addSelectionStyles();
237 |   };
238 | 
239 |   instance.addHighlightStyle = function (nodeStyle, edgeStyle) {
240 |     var o = { node: nodeStyle, edge: edgeStyle };
241 |     options.highlightStyles.push(o);
242 |     var s = '__highligtighted__' + totStyleCnt;
243 |     classNames4Styles.push(s);
244 |     totStyleCnt++;
245 |     updateCyStyle(options.highlightStyles.length - 1);
246 |     addSelectionStyles();
247 |   };
248 | 
249 |   instance.removeHighlightStyle = function (styleIdx) {
250 |     if (styleIdx < 0 || styleIdx > options.highlightStyles.length - 1) {
251 |       return;
252 |     }
253 |     cy.elements().removeClass(classNames4Styles[styleIdx]);
254 |     options.highlightStyles.splice(styleIdx, 1);
255 |     classNames4Styles.splice(styleIdx, 1);
256 |   };
257 | 
258 |   instance.getAllHighlightClasses = function () {
259 |     var a = [];
260 |     for (var i = 0; i < options.highlightStyles.length; i++) {
261 |       a.push(classNames4Styles[i]);
262 |     }
263 |     return classNames4Styles;
264 |   };
265 | 
266 |   //Zoom selected Nodes
267 |   instance.zoomToSelected = function (eles) {
268 |     var boundingBox = eles.boundingBox();
269 |     var diff_x = Math.abs(boundingBox.x1 - boundingBox.x2);
270 |     var diff_y = Math.abs(boundingBox.y1 - boundingBox.y2);
271 |     var padding;
272 |     if (diff_x >= 200 || diff_y >= 200) {
273 |       padding = 50;
274 |     }
275 |     else {
276 |       padding = (cy.width() < cy.height()) ?
277 |         ((200 - diff_x) / 2 * cy.width() / 200) : ((200 - diff_y) / 2 * cy.height() / 200);
278 |     }
279 | 
280 |     cy.animate({
281 |       fit: {
282 |         eles: eles,
283 |         padding: padding
284 |       }
285 |     }, {
286 |       duration: options.zoomAnimationDuration
287 |     });
288 |     return eles;
289 |   };
290 | 
291 |   //Marquee Zoom
292 |   var tabStartHandler;
293 |   var tabEndHandler;
294 | 
295 |   instance.enableMarqueeZoom = function (callback) {
296 |     setCursor(false);
297 |     marqueeZoomEnabled = true;
298 |     var rect_start_pos_x, rect_start_pos_y, rect_end_pos_x, rect_end_pos_y;
299 |     //Make the cy unselectable
300 |     cy.autounselectify(true);
301 | 
302 |     cy.one('tapstart', tabStartHandler = function (event) {
303 |       if (shiftKeyDown == true) {
304 |         rect_start_pos_x = event.position.x;
305 |         rect_start_pos_y = event.position.y;
306 |         rect_end_pos_x = undefined;
307 |       }
308 |     });
309 |     cy.one('tapend', tabEndHandler = function (event) {
310 |       rect_end_pos_x = event.position.x;
311 |       rect_end_pos_y = event.position.y;
312 |       //check whether corners of rectangle is undefined
313 |       //abort marquee zoom if one corner is undefined
314 |       if (rect_start_pos_x == undefined || rect_end_pos_x == undefined) {
315 |         cy.autounselectify(false);
316 |         if (callback) {
317 |           callback();
318 |         }
319 |         return;
320 |       }
321 |       //Reoder rectangle positions
322 |       //Top left of the rectangle (rect_start_pos_x, rect_start_pos_y)
323 |       //right bottom of the rectangle (rect_end_pos_x, rect_end_pos_y)
324 |       if (rect_start_pos_x > rect_end_pos_x) {
325 |         var temp = rect_start_pos_x;
326 |         rect_start_pos_x = rect_end_pos_x;
327 |         rect_end_pos_x = temp;
328 |       }
329 |       if (rect_start_pos_y > rect_end_pos_y) {
330 |         var temp = rect_start_pos_y;
331 |         rect_start_pos_y = rect_end_pos_y;
332 |         rect_end_pos_y = temp;
333 |       }
334 | 
335 |       //Extend sides of selected rectangle to 200px if less than 100px
336 |       if (rect_end_pos_x - rect_start_pos_x < 200) {
337 |         var extendPx = (200 - (rect_end_pos_x - rect_start_pos_x)) / 2;
338 |         rect_start_pos_x -= extendPx;
339 |         rect_end_pos_x += extendPx;
340 |       }
341 |       if (rect_end_pos_y - rect_start_pos_y < 200) {
342 |         var extendPx = (200 - (rect_end_pos_y - rect_start_pos_y)) / 2;
343 |         rect_start_pos_y -= extendPx;
344 |         rect_end_pos_y += extendPx;
345 |       }
346 | 
347 |       //Check whether rectangle intersects with bounding box of the graph
348 |       //if not abort marquee zoom
349 |       if ((rect_start_pos_x > cy.elements().boundingBox().x2)
350 |         || (rect_end_pos_x < cy.elements().boundingBox().x1)
351 |         || (rect_start_pos_y > cy.elements().boundingBox().y2)
352 |         || (rect_end_pos_y < cy.elements().boundingBox().y1)) {
353 |         cy.autounselectify(false);
354 |         if (callback) {
355 |           callback();
356 |         }
357 |         return;
358 |       }
359 | 
360 |       //Calculate zoom level
361 |       var zoomLevel = Math.min(cy.width() / (Math.abs(rect_end_pos_x - rect_start_pos_x)),
362 |         cy.height() / Math.abs(rect_end_pos_y - rect_start_pos_y));
363 | 
364 |       var diff_x = cy.width() / 2 - (cy.pan().x + zoomLevel * (rect_start_pos_x + rect_end_pos_x) / 2);
365 |       var diff_y = cy.height() / 2 - (cy.pan().y + zoomLevel * (rect_start_pos_y + rect_end_pos_y) / 2);
366 | 
367 |       cy.animate({
368 |         panBy: { x: diff_x, y: diff_y },
369 |         zoom: zoomLevel,
370 |         duration: options.zoomAnimationDuration,
371 |         complete: function () {
372 |           if (callback) {
373 |             callback();
374 |           }
375 |           cy.autounselectify(false);
376 |         }
377 |       });
378 |     });
379 |   };
380 | 
381 |   instance.disableMarqueeZoom = function () {
382 |     setCursor(true);
383 |     cy.off('tapstart', tabStartHandler);
384 |     cy.off('tapend', tabEndHandler);
385 |     cy.autounselectify(false);
386 |     marqueeZoomEnabled = false;
387 |   };
388 |   //Lasso Mode
389 |   var geometric = require('geometric');
390 | 
391 |   instance.changeLassoStyle = function (styleObj) {
392 |     if (styleObj.lineWidth)
393 |       options.lassoStyle.lineWidth = styleObj.lineWidth;
394 |     if (styleObj.lineColor)
395 |       options.lassoStyle.lineColor = styleObj.lineColor;
396 |   };
397 | 
398 |   instance.enableLassoMode = function (callback) {
399 | 
400 |     var isClicked = false;
401 |     var tempCanv = document.createElement('canvas');
402 |     tempCanv.id = 'lasso-canvas';
403 |     const container = cy.container();
404 |     container.appendChild(tempCanv);
405 | 
406 |     const width = container.offsetWidth;
407 |     const height = container.offsetHeight;
408 | 
409 |     tempCanv.width = width;
410 |     tempCanv.height = height;
411 |     tempCanv.setAttribute("style", `z-index: 1000; position: absolute; top: 0; left: 0;`,);
412 | 
413 |     cy.panningEnabled(false);
414 |     cy.zoomingEnabled(false);
415 |     cy.autounselectify(true);
416 |     var points = [];
417 | 
418 |     tempCanv.onclick = function (event) {
419 | 
420 |       if (isClicked == false) {
421 |         isClicked = true;
422 |         var context = tempCanv.getContext("2d");
423 |         context.strokeStyle = options.lassoStyle.lineColor;
424 |         context.lineWidth = options.lassoStyle.lineWidth;
425 |         context.lineJoin = "round";
426 |         cy.panningEnabled(false);
427 |         cy.zoomingEnabled(false);
428 |         cy.autounselectify(true);
429 |         var formerX = event.offsetX;
430 |         var formerY = event.offsetY;
431 | 
432 |         points.push([formerX, formerY]);
433 |         tempCanv.onmouseleave = function (e) {
434 |           isClicked = false;
435 |           container.removeChild(tempCanv);
436 |           tempCanv = null;
437 |           cy.panningEnabled(true);
438 |           cy.zoomingEnabled(true);
439 |           cy.autounselectify(false);
440 |           if (callback) {
441 |             callback();
442 |           }
443 |         };
444 |         tempCanv.onmousemove = function (e) {
445 |           context.beginPath();
446 |           points.push([e.offsetX, e.offsetY]);
447 |           context.moveTo(formerX, formerY);
448 |           context.lineTo(e.offsetX, e.offsetY);
449 |           formerX = e.offsetX;
450 |           formerY = e.offsetY;
451 |           context.stroke();
452 |           context.closePath();
453 |         };
454 |       }
455 |       else {
456 |         var eles = cy.elements();
457 |         points.push(points[0]);
458 |         for (var i = 0; i < eles.length; i++) {
459 |           if (eles[i].isEdge()) {
460 | 
461 |             var p1 = [(eles[i].sourceEndpoint().x) * cy.zoom() + cy.pan().x, (eles[i].sourceEndpoint().y) * cy.zoom() + cy.pan().y];
462 |             var p2 = [(eles[i].targetEndpoint().x) * cy.zoom() + cy.pan().x, (eles[i].targetEndpoint().y) * cy.zoom() + cy.pan().y];
463 | 
464 |             if (geometric.pointInPolygon(p1, points) && geometric.pointInPolygon(p2, points)) {
465 |               eles[i].select();
466 |             }
467 | 
468 |           }
469 |           else {
470 |             cy.autounselectify(false);
471 |             var bb = [[eles[i].renderedBoundingBox().x1, eles[i].renderedBoundingBox().y1],
472 |             [eles[i].renderedBoundingBox().x1, eles[i].renderedBoundingBox().y2],
473 |             [eles[i].renderedBoundingBox().x2, eles[i].renderedBoundingBox().y2],
474 |             [eles[i].renderedBoundingBox().x2, eles[i].renderedBoundingBox().y1]];
475 | 
476 |             if (geometric.polygonIntersectsPolygon(bb, points) || geometric.polygonInPolygon(bb, points)
477 |               || geometric.polygonInPolygon(points, bb)) {
478 |               eles[i].select();
479 |             }
480 |           }
481 |         }
482 |         isClicked = false;
483 |         container.removeChild(tempCanv);
484 |         tempCanv = null;
485 | 
486 |         cy.panningEnabled(true);
487 |         cy.zoomingEnabled(true);
488 |         if (callback) {
489 |           callback();
490 |         }
491 |       }
492 |     };
493 |   };
494 | 
495 |   instance.disableLassoMode = function () {
496 |     var c = document.getElementById('lasso-canvas');
497 |     if (c) {
498 |       c.parentElement.removeChild(c);
499 |       c = null;
500 |     }
501 |     cy.panningEnabled(true);
502 |     cy.zoomingEnabled(true);
503 |     cy.autounselectify(false);
504 |   }
505 |   // return the instance
506 |   return instance;
507 | };
508 | 
509 | module.exports = viewUtilities;
510 | 


--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE>
  2 | <html>
  3 | 
  4 |     <head>
  5 |         <title>cytoscape-view-utilities.js demo</title>
  6 | 
  7 |         <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
  8 | 
  9 |         <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
 10 | 
 11 |         <!-- for testing with local version of cytoscape.js -->
 12 |         <!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
 13 |         <script src="https://unpkg.com/layout-base/layout-base.js"></script>
 14 |         <script src="https://unpkg.com/cose-base/cose-base.js"></script>
 15 |         <script src="https://unpkg.com/cytoscape-cose-bilkent/cytoscape-cose-bilkent.js"></script>
 16 |         <script src="https://unpkg.com/geometric@2.2.3/build/geometric.min.js"></script>
 17 |         
 18 |         <script src="cytoscape-view-utilities.js"></script>
 19 | 
 20 |         <style>
 21 |             body {
 22 |                 font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
 23 |                 font-size: 14px;
 24 |             }
 25 |             #cy {
 26 |                 width: 75%;
 27 |                 height: 100%;
 28 |                 left: 26%;
 29 |                 top: 0%;
 30 |                 float: left;
 31 |                 overflow: hidden;
 32 |                 position: fixed;
 33 |             }
 34 |             .topnav {
 35 |                 width: 25%;
 36 |                 background-color: #e9e9e9;
 37 |                 font-weight: bold;
 38 |                 border-color: black;
 39 |                 border-style: solid;
 40 |                 font-size: 16;
 41 |                 padding: 10;
 42 |             }
 43 |             .topnav b:hover
 44 |             {
 45 |                background-color:white;
 46 |             }
 47 |             /* Customize the label (the container) */
 48 |             .topnav .container {
 49 | 
 50 |               position: relative;
 51 |               padding: 10px;
 52 |               cursor: pointer;
 53 |               left: 5px;
 54 |               -webkit-user-select: none;
 55 |               -moz-user-select: none;     
 56 |               -ms-user-select: none;
 57 |               user-select: none;
 58 |               display: flex;
 59 |             }
 60 |             /* Hide the browser's default radio button */
 61 |             .topnav .container input {
 62 |               position: absolute;
 63 |               opacity: 0;
 64 |               cursor: pointer;
 65 |               height: 0;
 66 |               width: 0;
 67 |             }
 68 |             /* Create a custom radio button */
 69 |             .topnav .checkmark {
 70 |               position: absolute;
 71 |               top: 17px;
 72 |               left: 0;
 73 |               right: 0px;
 74 |               height: 12px;
 75 |               width: 12px;
 76 |               margin-right: 20px;
 77 |               background-color: #000000;
 78 |               border-radius: 50%;
 79 |             }
 80 |             /* On mouse-over, add a grey background color */
 81 |             .container:hover input ~ .checkmark {
 82 |                     background-color: #000000;
 83 |             }
 84 |             /* When the radio button is checked, add a blue background */
 85 |             .container input:checked ~ .checkmark {
 86 |                     background-color: #000   
 87 |             }
 88 |             /* Create the indicator (the dot/circle - hidden when not checked) */
 89 |             .checkmark:after {
 90 |                     content: "";
 91 |                     position: absolute;
 92 |                     display: none;
 93 |             }
 94 |             /* Show the indicator (dot/circle) when checked */
 95 |             .container input:checked ~ .checkmark:after {
 96 |                     display: block;
 97 |             }
 98 |             /* Style the indicator (dot/circle) */
 99 |             .container .checkmark:after {
100 |                     position: absolute;
101 |                     top: 3px;
102 |                     left: 3px;
103 |                     width: 6px;
104 |                     height: 6px;
105 |                     border-radius: 50%;
106 |                     background: white;
107 |             }
108 | 
109 |             .topnav c {
110 |               float: left;
111 |               width: 30px;
112 |               height: 20px;
113 |               border: 2px solid white;
114 |               margin-left: 10px;
115 |               margin-right: 40px;
116 |             }
117 | 
118 |             .m-1{
119 |               margin: 1px;
120 |               padding: 2px;
121 |             }
122 | 
123 |         </style>
124 |         <script>
125 |             document.addEventListener("DOMContentLoaded", function(){
126 |                 var cy = window.cy = cytoscape({
127 |                     container: document.getElementById('cy'),
128 |                     layout: { name: "cose-bilkent" },
129 |                     style: [
130 |                         {
131 |                             selector: 'node',
132 |                             style: {
133 |                                 'content': 'data(name)',
134 |                                 'border-color': 'grey',
135 |                                 'border-width': 3,
136 |                                 'background-color': 'lightgrey'
137 |                             }
138 |                         },
139 |                         {
140 |                             selector: 'edge',
141 |                             style: {
142 |                                 'curve-style' : 'straight',
143 |                                 'target-arrow-shape': 'triangle'
144 |                             }
145 |                         },
146 |                         {
147 |                             selector: 'edge:selected',
148 |                             style: {
149 |                                 'line-color': 'black',
150 |                                 'source-arrow-color': 'black',
151 |                                 'target-arrow-color': 'black', 
152 |                             }
153 |                         },
154 |                         {
155 |                             selector: 'node:selected',
156 |                             style: {
157 |                                 'border-color': 'black',
158 |                                 'border-width': '3px',
159 |                                 'background-color': 'lightgrey'
160 |                             }
161 |                         },
162 |                         {
163 |                             selector: 'node:parent',
164 |                             style: {
165 |                                 'background-color': 'lightgrey'
166 |                             }
167 |                         }
168 |                     ],
169 |                     wheelSensitivity: 0.2,
170 | 
171 |                     elements: {
172 |                         nodes: [
173 |                             
174 |                             { data: { id: 'n1', name: 'n1' } },
175 |                             { data: { id: 'n2', name: 'n2' } },
176 |                             { data: { id: 'n3', name: 'n3' } },
177 |                             { data: { id: 'n4', name: 'n4' } },
178 |                             { data: { id: 'n5', name: 'n5' } },
179 |                             { data: { id: 'n6', name: 'n6' } },
180 |                             { data: { id: 'n7', name: 'n7' } },
181 |                             { data: { id: 'n8', name: 'n8' } },
182 |                             { data: { id: 'n9', name: 'n9' } },
183 |                             { data: { id: 'n10', name: 'n10' } },
184 |                             { data: { id: 'n11', name: 'n11' } },
185 |                             { data: { id: 'n12', name: 'n12' } },
186 |                             { data: { id: 'n13', name: 'n13' } },
187 |                             { data: { id: 'n14', name: 'n14' } },
188 |                             { data: { id: 'n15', name: 'n15' } },
189 |                             { data: { id: 'n16', name: 'n16' } },
190 |                             { data: { id: 'n17', name: 'n17' } },
191 |                         ],
192 |                         edges: [
193 |                             
194 |                             { data: { source: "n1", target: "n2" } },
195 |                             { data: { source: 'n1', target: 'n3' } },
196 |                             { data: { source: 'n2', target: 'n3' } },
197 |                             { data: { source: "n3", target: "n4" } },
198 |                             { data: { source: "n4", target: "n5" } },
199 |                             { data: { source: 'n3', target: 'n6' } },
200 |                             { data: { source: 'n2', target: 'n7' } },
201 |                             { data: { source: "n3", target: "n7" } },
202 |                             { data: { source: "n5", target: "n6" } },
203 |                             { data: { source: 'n6', target: 'n7' } },
204 |                             { data: { source: 'n6', target: 'n8' } },
205 |                             { data: { source: "n8", target: "n9" } },
206 |                             { data: { source: "n8", target: "n10" } },
207 |                             { data: { source: "n8", target: "n11" } },
208 |                             { data: { source: "n9", target: "n11" } },
209 |                             { data: { source: 'n11', target: 'n12' } },
210 |                             { data: { source: 'n11', target: 'n13' } },
211 |                             { data: { source: "n11", target: "n14" } },
212 |                             { data: { source: "n13", target: "n15" } },
213 |                             { data: { source: 'n13', target: 'n16' } },
214 |                             { data: { source: 'n15', target: 'n16' } },
215 |                             { data: { source: "n15", target: "n17" } }
216 |                         ]
217 |                     }
218 |                 });
219 | 
220 |                 var api = cy.viewUtilities({
221 |                     highlightStyles: [
222 |                       { node: { 'border-color': '#0b9bcd',  'border-width': 3 }, edge: {'line-color': '#0b9bcd', 'source-arrow-color': '#0b9bcd', 'target-arrow-color': '#0b9bcd', 'width' : 3} },
223 |                       { node: { 'border-color': '#04f06a',  'border-width': 3 }, edge: {'line-color': '#04f06a', 'source-arrow-color': '#04f06a', 'target-arrow-color': '#04f06a', 'width' : 3} },
224 |                       { node: { 'border-color': '#f5e663',  'border-width': 3 }, edge: {'line-color': '#f5e663', 'source-arrow-color': '#f5e663', 'target-arrow-color': '#f5e663', 'width' : 3} },
225 |                       { node: { 'border-color': '#bf0603',  'border-width': 3 }, edge: {'line-color': '#bf0603', 'source-arrow-color': '#bf0603', 'target-arrow-color': '#bf0603', 'width' : 3} },
226 |                     ],
227 |                     selectStyles: { 
228 |                       node: {'border-color': 'black', 'border-width': 3, 'background-color': 'lightgrey'}, 
229 |                       edge: {'line-color': 'black', 'source-arrow-color': 'black', 'target-arrow-color': 'black', 'width' : 3} 
230 |                     },
231 |                     setVisibilityOnHide: false, // whether to set visibility on hide/show
232 |                     setDisplayOnHide: true, // whether to set display on hide/show
233 |                     zoomAnimationDuration: 1500, //default duration for zoom animation speed
234 |                     neighbor: function(ele){
235 |                       if (ele.isNode()) {
236 |                           return ele.closedNeighborhood();
237 |                       }
238 |                       else if (ele.isEdge()) {
239 |                           return ele.source().closedNeighborhood().union(ele.target().closedNeighborhood());
240 |                       }
241 |                     },
242 |                     neighborSelectTime: 1000
243 |                 });
244 | 
245 |                 var layout = cy.layout({
246 |                     name: 'cose-bilkent',
247 |                     randomize: false,
248 |                     fit: false
249 |                 });
250 | 
251 |                 function changeBorder(eles){
252 |                     eles.forEach(function( ele ){
253 |                         ele.css("background-color", 'purple');
254 |                     });
255 |                     return eles;
256 |                 }
257 |                 
258 |                 function revertBorder(eles){
259 |                     eles.forEach(function( ele ){
260 |                         ele.css("background-color", 'lightgrey');
261 |                   });
262 |                   return eles;
263 |                 }
264 |                 function getButtonsToDef(){
265 |                   document.getElementById("marqueeZoom").style.backgroundColor = "#11ffee00";
266 |                   document.getElementById("lassoTool").style.backgroundColor = "#11ffee00";
267 |                 }
268 |                 document.getElementById("hide").addEventListener("click", function () {
269 |                     api.disableMarqueeZoom();
270 |                     api.disableLassoMode();
271 |                     getButtonsToDef();
272 |                     var nodesWithHiddenNeighbor = cy.edges(":hidden").connectedNodes(':visible');
273 |                     revertBorder(nodesWithHiddenNeighbor);
274 |                     api.hide(cy.$(":selected"));
275 |                     nodesWithHiddenNeighbor = cy.edges(":hidden").connectedNodes(':visible');
276 |                     changeBorder(nodesWithHiddenNeighbor);
277 |                     if(document.getElementById('layout').checked){
278 |                       layout.run();
279 |                     }
280 |                 });
281 |                 
282 |                 document.getElementById("showAll").addEventListener("click", function () {
283 |                     api.disableMarqueeZoom();
284 |                     api.disableLassoMode();
285 |                     getButtonsToDef();
286 |                     var nodesWithHiddenNeighbor = cy.edges(":hidden").connectedNodes(':visible');
287 |                     revertBorder(nodesWithHiddenNeighbor);
288 |                     api.show(cy.elements());
289 |                     if(document.getElementById('layout').checked){
290 |                       layout.run();
291 |                     }
292 |                 });
293 | 
294 |                 document.getElementById("showHiddenNeighbors").addEventListener("click", function () {
295 |                     api.disableMarqueeZoom();
296 |                     api.disableLassoMode();
297 |                     getButtonsToDef();
298 |                     var selectedNodes = cy.nodes(":selected");
299 |                     var nodesWithHiddenNeighbor = cy.edges(":hidden").connectedNodes(':visible');
300 |                     revertBorder(nodesWithHiddenNeighbor);
301 |                     api.showHiddenNeighbors(selectedNodes);
302 |                     nodesWithHiddenNeighbor = cy.edges(":hidden").connectedNodes(':visible');
303 |                     changeBorder(nodesWithHiddenNeighbor); 
304 |                     if(document.getElementById('layout').checked){
305 |                       layout.run();
306 |                     }
307 |                 });
308 | 
309 |                 document.getElementById("zoomToSelected").addEventListener("click", function () {
310 |                     api.disableMarqueeZoom();
311 |                     api.disableLassoMode();
312 |                     getButtonsToDef();
313 |                     var selectedEles = cy.$(":selected");
314 |                     api.zoomToSelected(selectedEles);
315 |                     if(document.getElementById('layout').checked){
316 |                       layout.run();
317 |                     }
318 |                 });
319 | 
320 |                 document.getElementById("marqueeZoom").addEventListener("click", function () {
321 |                     //document.getElementById("cy").style.cursor ="crosshair";
322 |                     api.disableLassoMode();
323 |                     getButtonsToDef();
324 |                     document.getElementById("marqueeZoom").style.backgroundColor = "darkgray";
325 |                     var callbackFunc = function() {
326 |                       document.getElementById("marqueeZoom").style.backgroundColor = "#11ffee00";
327 |                     }; 
328 |                     api.enableMarqueeZoom(callbackFunc);
329 |                 });
330 |                 
331 |                 api.changeLassoStyle({lineColor: "#d67614",lineWidth: 3});
332 |                 document.getElementById('colorInpSec').value = "#d67614";
333 |                 document.getElementById('lineWidth').value = 3;
334 | 
335 |                 document.getElementById("lassoTool").addEventListener("click", function () {
336 |                     api.disableMarqueeZoom();
337 |                     getButtonsToDef();
338 |                     document.getElementById("lassoTool").style.backgroundColor = "darkgray";
339 |                     var callbackFunc = function() {
340 |                       document.getElementById("lassoTool").style.backgroundColor = "#11ffee00";
341 |                     };
342 |                     api.enableLassoMode(callbackFunc);
343 |                 });
344 | 
345 |                 var tappedBefore;
346 |                 cy.on('tap', 'node', function (event) {
347 |                     var node = this;
348 |                     var tappedNow = node;
349 |                     setTimeout(function () {
350 |                       tappedBefore = null;
351 |                     }, 300);
352 |                     if (tappedBefore && tappedBefore.id() === tappedNow.id()) {
353 |                       tappedNow.trigger('doubleTap');
354 |                       tappedBefore = null;
355 |                     } else {
356 |                       tappedBefore = tappedNow;
357 |                     }
358 |                 });
359 | 
360 |                 cy.on('doubleTap', 'node', function (event) {
361 |                     /*
362 |                     var nodesWithHiddenNeighbor = cy.edges(":hidden").connectedNodes(':visible');
363 |                     revertBorder(nodesWithHiddenNeighbor);
364 |                     api.show(cy.nodes(":selected").neighborhood().union(cy.nodes(":selected").neighborhood().parent()));
365 |                     nodesWithHiddenNeighbor = cy.edges(":hidden").connectedNodes(':visible');
366 |                     changeBorder(nodesWithHiddenNeighbor);
367 |                     */
368 |                     api.disableMarqueeZoom();
369 |                     api.disableLassoMode();
370 |                     getButtonsToDef();
371 |                     var selectedNodes = cy.nodes(":selected");
372 |                     var nodesWithHiddenNeighbor = cy.edges(":hidden").connectedNodes(':visible');
373 |                     revertBorder(nodesWithHiddenNeighbor);
374 |                     api.showHiddenNeighbors(selectedNodes); 
375 |                     nodesWithHiddenNeighbor = cy.edges(":hidden").connectedNodes(':visible');
376 | 		            changeBorder(nodesWithHiddenNeighbor); 
377 |                     if(document.getElementById('layout').checked){
378 |                       layout.run();
379 |                     }
380 |                 });
381 |                 
382 |                 document.getElementById("highlightNeighbors").addEventListener("click", function () {
383 |                     api.disableMarqueeZoom();
384 |                     api.disableLassoMode();
385 |                     getButtonsToDef();
386 |                     if (cy.$(":selected").length > 0) {
387 |                       var idx = document.getElementById('highlightColors').selectedIndex;
388 |                       api.highlightNeighbors(cy.$(":selected"), idx);
389 |                     }
390 |                 });
391 | 
392 |                 document.getElementById("highlightElements").addEventListener("click", function () {
393 |                     api.disableMarqueeZoom();
394 |                     api.disableLassoMode();
395 |                     getButtonsToDef();
396 |                     if (cy.$(":selected").length > 0) {
397 |                       var idx = document.getElementById('highlightColors').selectedIndex;
398 |                       api.highlight(cy.$(":selected"), idx);
399 |                     }
400 |                 });
401 | 
402 |                 document.getElementById("removeSelectedHighlights").addEventListener("click", function () {
403 |                     api.disableMarqueeZoom();
404 |                     api.disableLassoMode();
405 |                     getButtonsToDef();
406 | 										if(cy.$(":selected").length > 0)
407 |                     	api.removeHighlights(cy.$(":selected"));
408 |                 });
409 | 
410 |                 document.getElementById("removeAllHighlights").addEventListener("click", function () {
411 |                     api.disableMarqueeZoom();
412 |                     api.disableLassoMode();
413 |                     getButtonsToDef();
414 |                     api.removeHighlights();
415 |                 });
416 | 
417 |                 document.getElementById('addColorBtn').addEventListener('click', function() {
418 |                   getButtonsToDef();
419 |                   let color = getRandomColor();
420 |                   let nodeStyle = { 'border-color': color,  'border-width': 3 };
421 |                   let edgeStyle = {'line-color': color, 'source-arrow-color': color, 'target-arrow-color': color, 'width' : 3}
422 |                   api.addHighlightStyle(nodeStyle, edgeStyle);
423 |                   addHighlightColorOptions();
424 |                   document.getElementById('highlightColors').selectedIndex = api.getHighlightStyles().length - 1;
425 |                   document.getElementById('colorInp').value = color;
426 |                 });
427 | 
428 |                 document.getElementById('colorChangerBtn').addEventListener('click', function () {
429 |                   getButtonsToDef();
430 |                   let color = document.getElementById('colorInp').value;
431 |                   var idx = document.getElementById('highlightColors').selectedIndex;
432 |                   let nodeStyle = { 'border-color': color,  'border-width': 3 };
433 |                   let edgeStyle = {'line-color': color, 'source-arrow-color': color, 'target-arrow-color': color, 'width' : 3}
434 |                   api.changeHighlightStyle(idx, nodeStyle, edgeStyle);
435 | 
436 |                   var opt = document.getElementById('highlightColors').options[idx];
437 |                   opt.value =  color;
438 |                   opt.text = color;
439 |                 });
440 | 
441 |                 document.getElementById('highlightColors').addEventListener('change', function(e) {
442 |                   document.getElementById('colorInp').value = e.target.value;
443 |                 });
444 | 
445 |                 document.getElementById('colorInpSec').addEventListener('change', function(e) {
446 |                   api.changeLassoStyle({lineColor:document.getElementById('colorInpSec').value});
447 |                 });
448 |                 document.getElementById("lineWidth").addEventListener('change', function(e) {
449 |                   api.changeLassoStyle({lineWidth:document.getElementById("lineWidth").value});
450 |                 });
451 |                 
452 | 
453 |                 addHighlightColorOptions();
454 |                 var s =  api.getHighlightStyles()[0];
455 |                 if (s) {
456 |                   document.getElementById('colorInp').value = s.node['border-color'];
457 |                 }
458 |                 function addHighlightColorOptions() {
459 |                   var colors = api.getHighlightStyles().map(x => x.node['border-color']);
460 |                   
461 |                   document.getElementById('highlightColors').innerHTML = '';
462 | 
463 |                   for (var i = 0; i < colors.length; i++) {
464 |                     var o = document.createElement('option');
465 |                     o.text = colors[i];
466 |                     o.value = colors[i];
467 |                     if (i == 0) {
468 |                       o.selected = 'selected';
469 |                     }
470 |                     document.getElementById('highlightColors').appendChild(o);
471 |                   }
472 |                 }
473 | 
474 |                 function getRandomColor() {
475 |                   const letters = '0123456789ABCDEF';
476 |                   let color = '#';
477 |                   for (let i = 0; i < 6; i++) {
478 |                     color += letters[Math.floor(Math.random() * 16)];
479 |                   }
480 |                   return color;
481 |                 }
482 |                 
483 |             });
484 | 
485 |             
486 |         </script>
487 |     </head>
488 | 
489 |     <body>
490 |         <h1>cytoscape.js-view-utilities demo</h1>
491 |         <div class="topnav">
492 |             <b id="hide" style="cursor: pointer; color: brown">Hide Selected</b> / <b id="showAll" style="cursor: pointer; color: brown">Show All</b> <br/><br/>
493 | 
494 |             <b>Highlight Color:</b>
495 |             <div class="m-1">
496 |                 <select id="highlightColors">
497 |                 </select>
498 |                 <input type="color" id="colorInp">
499 |                 <button id="colorChangerBtn">Update Color</button>
500 |                 <button id="addColorBtn">Add Color</button>
501 |             </div>
502 |             <br/>
503 | 
504 |             <b id="highlightElements" style="cursor: pointer; color: brown">Highlight Selected</b> <br/><br/>
505 |             <b id="highlightNeighbors" style="cursor: pointer; color: brown">Highlight Neighbors</b><br/><br/>
506 |             <b id="showHiddenNeighbors" style="cursor: pointer; color: brown">Show Hidden Neighbors of Selected</b> <br/><br/>
507 |             <b id="removeSelectedHighlights" style="cursor: pointer; color: brown">Remove Selected Highlights</b> <br/><br/>
508 |             <b id="removeAllHighlights" style="cursor: pointer; color: brown">Remove All Highlights</b> <br/><br/>
509 |             <b id="zoomToSelected" style="cursor: pointer; color: brown">Zoom to Selected</b><br/><br/>
510 |             <b id="marqueeZoom" style="cursor: pointer; color: brown">Marquee Zoom</b>
511 |             <br/>
512 |             <span style="font-weight: normal !important; font-size: 14px !important;">Shift + drag to specify region; gets disabled after zoom, mouse events on canvas and other api functions calls.</span>
513 |             <br/><br/>
514 |             <b id="lassoTool" style="cursor: pointer; color: brown">Lasso Tool</b>
515 |             <br/>
516 |             <span style="font-weight: normal !important; font-size: 14px !important;">Left click to start specifying region; left click again to complete the region.</span>
517 |             <br/>
518 |             <span style="font-weight: normal !important; font-size: 14px !important;">Line width (between 1 and 10) and Color:</span>
519 |             <input type="number" id="lineWidth" min="1" max="10">
520 |             <input type="color" id="colorInpSec"><br/><br/>
521 |             <label for="layout" style="vertical-align:middle;">Rearrange on Hide/Show</label>
522 |             <input type="checkbox" id="layout" name="layout" style="vertical-align:middle;" value="checked">
523 |             <br/><br/>
524 |             <span style="font-weight: normal !important; font-size: 14px !important;">Shift + taphold to select neighbors</span>
525 |            
526 |         </div>
527 |         <div id="cy"></div>
528 | 
529 |     </body>
530 | 
531 | </html>


--------------------------------------------------------------------------------
/demo-undoable.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE>
  2 | 
  3 | <html>
  4 | 
  5 |     <head>
  6 |         <title>cytoscape-view-utilities.js demo</title>
  7 | 
  8 |         <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
  9 | 
 10 |         <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
 11 | 
 12 |         <!-- for testing with local version of cytoscape.js -->
 13 |         <!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
 14 |         <script src="https://unpkg.com/layout-base/layout-base.js"></script>
 15 |         <script src="https://unpkg.com/cose-base/cose-base.js"></script>
 16 |         <script src="https://unpkg.com/cytoscape-cose-bilkent/cytoscape-cose-bilkent.js"></script>
 17 |         <script src="https://unpkg.com/cytoscape-undo-redo/cytoscape-undo-redo.js"></script>
 18 |         <script src="https://unpkg.com/geometric@2.2.3/build/geometric.min.js"></script>
 19 |         
 20 |         <script src="cytoscape-view-utilities.js"></script>
 21 | 
 22 |         <style>
 23 |             body {
 24 |                 font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
 25 |                 font-size: 14px;
 26 |             }
 27 |             #cy {
 28 |                 width: 75%;
 29 |                 height: 100%;
 30 |                 left: 26%;
 31 |                 top: 0%;
 32 |                 float: left;
 33 |                 overflow: hidden;
 34 |                 position: fixed;
 35 |             }
 36 |             .topnav {
 37 |                 width: 25%;
 38 |                 background-color: #e9e9e9;
 39 |                 font-weight: bold;
 40 |                 border-color: black;
 41 |                 border-style: solid;
 42 |                 font-size: 16;
 43 |                 padding: 10;
 44 |             }
 45 |             .topnav b:hover
 46 |             {
 47 |                 background-color:white;
 48 |             }
 49 |             /* Customize the label (the container) */
 50 |             .topnav .container {
 51 |                 position: relative;
 52 |                 padding: 14px;
 53 |                 cursor: pointer;
 54 |                 font-size: 15px;
 55 |                 left: 5px;
 56 |                 -webkit-user-select: none;
 57 |                 -moz-user-select: none;
 58 |                 -ms-user-select: none;
 59 |                 user-select: none;
 60 |             }
 61 |             /* Hide the browser's default radio button */
 62 |             .topnav .container input {
 63 |                 position: absolute;
 64 |                 opacity: 0;
 65 |                 cursor: pointer;
 66 |                 height: 0;
 67 |                 width: 0;
 68 |             }
 69 |             /* Create a custom radio button */
 70 |             .topnav .checkmark {
 71 |                 position: absolute;
 72 |                 top: 17px;
 73 |                 left: 0;
 74 |                 right: 0px;
 75 |                 height: 12px;
 76 |                 width: 12px;
 77 |                 margin-right: 20px;
 78 |                 background-color: #000000;
 79 |                 border-radius: 50%;
 80 |             }
 81 |             /* On mouse-over, add a grey background color */
 82 |             .container:hover input ~ .checkmark {
 83 |                 background-color: #000000;
 84 |             }
 85 |             /* When the radio button is checked, add a blue background */
 86 |             .container input:checked ~ .checkmark {
 87 |                 background-color: #000;
 88 |             }
 89 |             /* Create the indicator (the dot/circle - hidden when not checked) */
 90 |             .checkmark:after {
 91 |                 content: "";
 92 |                 position: absolute;
 93 |                 display: none;
 94 |             }
 95 |             /* Show the indicator (dot/circle) when checked */
 96 |             .container input:checked ~ .checkmark:after {
 97 |                 display: block;
 98 |             }
 99 |             /* Style the indicator (dot/circle) */
100 |             .container .checkmark:after {
101 |                 position: absolute;
102 |                 top: 3px;
103 |                 left: 3px;
104 |                 width: 6px;
105 |                 height: 6px;
106 |                 border-radius: 50%;
107 |                 background: white;
108 |             }
109 | 
110 |             .m-1{
111 |               margin: 1px;
112 |               padding: 2px;
113 |             }
114 |         </style>
115 | 
116 |         <script>
117 | 
118 |             document.addEventListener("DOMContentLoaded", function(){
119 | 
120 |                 var cy = window.cy = cytoscape({
121 |                     container: document.getElementById('cy'),
122 |                     layout: { name: "cose-bilkent" },
123 |                     style: [
124 |                         {
125 |                             selector: 'node',
126 |                             style: {
127 |                                 'content': 'data(name)',
128 |                                 'border-color': 'grey',
129 |                                 'border-width': 3,
130 |                                 'background-color': 'lightgrey'
131 |                             }
132 |                         },
133 |                         {
134 |                             selector: 'edge',
135 |                             style: {
136 |                                 'curve-style' : 'straight',
137 |                                 'target-arrow-shape': 'triangle'
138 |                             }
139 |                         },
140 |                         {
141 |                             selector: 'edge:selected',
142 |                             style: {
143 |                                 'line-color': 'black',
144 |                                 'source-arrow-color': 'black',
145 |                                 'target-arrow-color': 'black',                                 
146 |                             }
147 |                         },
148 |                         {
149 |                             selector: 'node:selected',
150 |                             style: {
151 |                                 'border-color': 'black',
152 |                                 'border-width': '3px',
153 |                                 'background-color': 'lightgrey'
154 |                             }
155 |                         },
156 |                         {
157 |                             selector: 'node:parent',
158 |                             style: {
159 |                                 'background-color': 'lightgrey'
160 |                             }
161 |                         }
162 |                     ],
163 |                     wheelSensitivity: 0.2,
164 | 
165 |                     elements: {
166 |                         nodes: [
167 |                             
168 |                             { data: { id: 'n1', name: 'n1' } },
169 |                             { data: { id: 'n2', name: 'n2' } },
170 |                             { data: { id: 'n3', name: 'n3' } },
171 |                             { data: { id: 'n4', name: 'n4' } },
172 |                             { data: { id: 'n5', name: 'n5' } },
173 |                             { data: { id: 'n6', name: 'n6' } },
174 |                             { data: { id: 'n7', name: 'n7' } },
175 |                             { data: { id: 'n8', name: 'n8' } },
176 |                             { data: { id: 'n9', name: 'n9' } },
177 |                             { data: { id: 'n10', name: 'n10' } },
178 |                             { data: { id: 'n11', name: 'n11' } },
179 |                             { data: { id: 'n12', name: 'n12' } },
180 |                             { data: { id: 'n13', name: 'n13' } },
181 |                             { data: { id: 'n14', name: 'n14' } },
182 |                             { data: { id: 'n15', name: 'n15' } },
183 |                             { data: { id: 'n16', name: 'n16' } },
184 |                             { data: { id: 'n17', name: 'n17' } },
185 |                         ],
186 |                         edges: [
187 |                             
188 |                             { data: { source: "n1", target: "n2" } },
189 |                             { data: { source: 'n1', target: 'n3' } },
190 |                             { data: { source: 'n2', target: 'n3' } },
191 |                             { data: { source: "n3", target: "n4" } },
192 |                             { data: { source: "n4", target: "n5" } },
193 |                             { data: { source: 'n3', target: 'n6' } },
194 |                             { data: { source: 'n2', target: 'n7' } },
195 |                             { data: { source: "n3", target: "n7" } },
196 |                             { data: { source: "n5", target: "n6" } },
197 |                             { data: { source: 'n6', target: 'n7' } },
198 |                             { data: { source: 'n6', target: 'n8' } },
199 |                             { data: { source: "n8", target: "n9" } },
200 |                             { data: { source: "n8", target: "n10" } },
201 |                             { data: { source: "n8", target: "n11" } },
202 |                             { data: { source: "n9", target: "n11" } },
203 |                             { data: { source: 'n11', target: 'n12' } },
204 |                             { data: { source: 'n11', target: 'n13' } },
205 |                             { data: { source: "n11", target: "n14" } },
206 |                             { data: { source: "n13", target: "n15" } },
207 |                             { data: { source: 'n13', target: 'n16' } },
208 |                             { data: { source: 'n15', target: 'n16' } },
209 |                             { data: { source: "n15", target: "n17" } }
210 |                         ]
211 |                     }
212 |                 });
213 | 
214 |                 var api = cy.viewUtilities({
215 |                   highlightStyles: [
216 |                     { node: { 'border-color': '#0b9bcd',  'border-width': 3 }, edge: {'line-color': '#0b9bcd', 'source-arrow-color': '#0b9bcd', 'target-arrow-color': '#0b9bcd', 'width' : 3} },
217 |                     { node: { 'border-color': '#04f06a',  'border-width': 3 }, edge: {'line-color': '#04f06a', 'source-arrow-color': '#04f06a', 'target-arrow-color': '#04f06a', 'width' : 3} },
218 |                     { node: { 'border-color': '#f5e663',  'border-width': 3 }, edge: {'line-color': '#f5e663', 'source-arrow-color': '#f5e663', 'target-arrow-color': '#f5e663', 'width' : 3} },
219 |                     { node: { 'border-color': '#bf0603',  'border-width': 3 }, edge: {'line-color': '#bf0603', 'source-arrow-color': '#bf0603', 'target-arrow-color': '#bf0603', 'width' : 3} },
220 |                   ],
221 |                   selectStyles: { 
222 |                     node: {'border-color': 'black', 'border-width': 3, 'background-color': 'lightgrey'}, 
223 |                     edge: {'line-color': 'black', 'source-arrow-color': 'black', 'target-arrow-color': 'black', 'width' : 3} 
224 |                   },
225 |                   setVisibilityOnHide: false, // whether to set visibility on hide/show
226 |                   setDisplayOnHide: true, // whether to set display on hide/show
227 |                   zoomAnimationDuration: 1500, //default duration for zoom animation speed
228 |                   neighbor: function(ele){
229 |                       if (ele.isNode()) {
230 |                           return ele.closedNeighborhood();
231 |                       }
232 |                       else if (ele.isEdge()) {
233 |                           return ele.source().closedNeighborhood().union(ele.target().closedNeighborhood());
234 |                       }
235 |                   },
236 |                   neighborSelectTime: 1000
237 |                 });
238 | 
239 |                 var ur = cy.undoRedo();
240 |                 
241 |                 var layout = cy.layout({
242 |                     name: 'cose-bilkent',
243 |                     randomize: false,
244 |                     fit: false
245 |                 });                
246 | 
247 |                 function thickenBorder(eles){
248 |                     eles.forEach(function( ele ){
249 |                         ele.css("background-color", 'purple');
250 |                     });
251 |                     eles.data("thickBorder", true);
252 |                     return eles;
253 |                 }
254 |                 // Decrease border width when hidden neighbors of the nodes become visible
255 |                 function thinBorder(eles){
256 |                     eles.forEach(function( ele ){
257 |                         ele.css("background-color", 'lightgrey');
258 |                     });
259 |                     eles.removeData("thickBorder");
260 |                     return eles;
261 |                 }
262 | 
263 |                 function getButtonsToDef(){
264 |                   document.getElementById("marqueeZoom").style.backgroundColor = "#11ffee00";
265 |                   document.getElementById("lassoTool").style.backgroundColor = "#11ffee00";
266 |                 }
267 | 
268 |                 ur.action("thickenBorder", thickenBorder, thinBorder);
269 |                 ur.action("thinBorder", thinBorder, thickenBorder);
270 |                 
271 |                 //In below functions, finding the nodes to hide/show are sample specific.
272 |                 //If the sample graph changes, those calculations may also need a change.
273 |                 document.getElementById("hide").addEventListener("click", function () {
274 |                     api.disableMarqueeZoom();
275 |                     api.disableLassoMode();
276 |                     getButtonsToDef();
277 |                     var actions = [];
278 |                     var nodesToHide = cy.$(":selected").add(cy.$(":selected").nodes().descendants());
279 |                     var nodesWithHiddenNeighbor = cy.edges(":hidden").connectedNodes().intersection(nodesToHide);
280 |                     actions.push({name: "thinBorder", param: nodesWithHiddenNeighbor});
281 |                     actions.push({name: "hide", param: nodesToHide});
282 |                     nodesWithHiddenNeighbor = nodesToHide.neighborhood(":visible")
283 |                         .nodes().difference(nodesToHide).difference(cy.nodes("[thickBorder]"));
284 |                     actions.push({name: "thickenBorder", param: nodesWithHiddenNeighbor});
285 |                     cy.undoRedo().do("batch", actions);
286 |                     if(document.getElementById('layout').checked){
287 |                       layout.run();
288 |                     }
289 |                 });
290 |                 
291 |                 document.getElementById("showAll").addEventListener("click", function () {
292 |                     api.disableMarqueeZoom();
293 |                     api.disableLassoMode();
294 |                     getButtonsToDef();
295 |                     var actions = [];
296 |                     var nodesWithHiddenNeighbor = cy.nodes("[thickBorder]");
297 |                     actions.push({name: "thinBorder", param: nodesWithHiddenNeighbor});
298 |                     actions.push({name: "show", param: cy.elements()});
299 |                     ur.do("batch", actions);
300 |                     if(document.getElementById('layout').checked){
301 |                       layout.run();
302 |                     }                    
303 |                 });
304 |                 
305 |                 document.getElementById("showHiddenNeighbors").addEventListener("click", function () {
306 | 
307 |                     /*
308 |                     var hiddenEles = cy.$(":selected").neighborhood().filter(':hidden');
309 |                     var actions = [];
310 |                     var nodesWithHiddenNeighbor = (hiddenEles.neighborhood(":visible").nodes("[thickBorder]"))
311 |                         .difference(cy.edges(":hidden").difference(hiddenEles.edges().union(hiddenEles.nodes().connectedEdges())).connectedNodes());
312 |                     actions.push({name: "thinBorder", param: nodesWithHiddenNeighbor});
313 |                     actions.push({name: "show", param: hiddenEles.union(hiddenEles.parent())});
314 |                     nodesWithHiddenNeighbor = hiddenEles.nodes().edgesWith(cy.nodes(":hidden").difference(hiddenEles.nodes()))
315 |                         .connectedNodes().intersection(hiddenEles.nodes());
316 |                     actions.push({name: "thickenBorder", param: nodesWithHiddenNeighbor});*/
317 |                     api.disableMarqueeZoom();
318 |                     api.disableLassoMode();
319 |                     getButtonsToDef();
320 |                     var hiddenEles = cy.$(":selected").neighborhood().filter(':hidden');
321 |                     var selectedNodes = cy.nodes(":selected");
322 |                     var nodesWithHiddenNeighbor = (hiddenEles.neighborhood(":visible").nodes("[thickBorder]"))
323 |                         .difference(cy.edges(":hidden").difference(hiddenEles.edges().union(hiddenEles.nodes().connectedEdges())).connectedNodes());
324 |                   
325 |                     var actions = [];
326 |                     actions.push({name: "thinBorder", param: nodesWithHiddenNeighbor});
327 |                     actions.push({name: "showHiddenNeighbors", param: selectedNodes});                  
328 |                   
329 |                     nodesWithHiddenNeighbor = hiddenEles.nodes().edgesWith(cy.nodes(":hidden").difference(hiddenEles.nodes()))
330 |                         .connectedNodes().intersection(hiddenEles.nodes());
331 |                     actions.push({name: "thickenBorder", param: nodesWithHiddenNeighbor});
332 | 
333 |                     cy.undoRedo().do("batch", actions);
334 |                     if(document.getElementById('layout').checked){
335 |                       layout.run();
336 |                     }
337 |                 });
338 |                 
339 |                 document.getElementById("zoomToSelected").addEventListener("click", function () {
340 |                     api.disableMarqueeZoom();
341 |                     api.disableLassoMode();
342 |                     getButtonsToDef();
343 |                     var selectedEles = cy.$(":selected");
344 |                     api.zoomToSelected(selectedEles);
345 |                     if(document.getElementById('layout').checked){
346 |                       layout.run();
347 |                     }
348 |                 });
349 |                 
350 |                 document.getElementById("marqueeZoom").addEventListener("click", function () {
351 |                     api.disableLassoMode();
352 |                     getButtonsToDef();
353 |                     document.getElementById("marqueeZoom").style.backgroundColor = "darkgray";
354 |                     var callbackFunc = function() {
355 |                       document.getElementById("marqueeZoom").style.backgroundColor = "#11ffee00";
356 |                     }; 
357 |                     api.enableMarqueeZoom(callbackFunc);
358 |                 });
359 | 
360 |                 api.changeLassoStyle({lineColor: "#d67614",lineWidth: 3});
361 |                 document.getElementById('colorInpSec').value = "#d67614";
362 |                 document.getElementById('lineWidth').value = 3;
363 | 
364 |                 document.getElementById("lassoTool").addEventListener("click", function () {
365 |                     api.disableMarqueeZoom();
366 |                     getButtonsToDef();
367 |                     document.getElementById("lassoTool").style.backgroundColor = "darkgray";
368 |                     var callbackFunc = function() {
369 |                         document.getElementById("lassoTool").style.backgroundColor = "#11ffee00";
370 |                     };
371 |                     api.enableLassoMode(callbackFunc);
372 |                 });
373 | 
374 |                 var tappedBefore;
375 |                 cy.on('tap', 'node', function (event) {
376 |                     var node = this;
377 |                     var tappedNow = node;
378 |                     setTimeout(function () {
379 |                         tappedBefore = null;
380 |                     }, 300);
381 |                     if (tappedBefore && tappedBefore.id() === tappedNow.id()) {
382 |                         tappedNow.trigger('doubleTap');
383 |                         tappedBefore = null;
384 |                     } else {
385 |                         tappedBefore = tappedNow;
386 |                     }
387 |                 });
388 |                 
389 |                 cy.on('doubleTap', 'node', function (event) {
390 |                     api.disableMarqueeZoom();
391 |                     api.disableLassoMode();
392 |                     getButtonsToDef();
393 |                     var hiddenEles = cy.$(":selected").neighborhood().filter(':hidden');
394 |                     var selectedNodes = cy.nodes(":selected");
395 |                     var nodesWithHiddenNeighbor = (hiddenEles.neighborhood(":visible").nodes("[thickBorder]")).difference(cy.edges(":hidden").difference(hiddenEles.edges().union(hiddenEles.nodes().connectedEdges())).connectedNodes());
396 |                     var actions = [];
397 |                     actions.push({name: "thinBorder", param: nodesWithHiddenNeighbor});
398 | 
399 |                     actions.push({name: "showHiddenNeighbors", param: selectedNodes});                  
400 |                   
401 |                     nodesWithHiddenNeighbor = hiddenEles.nodes().edgesWith(cy.nodes(":hidden").difference(hiddenEles.nodes()))
402 |                         .connectedNodes().intersection(hiddenEles.nodes());
403 |                     actions.push({name: "thickenBorder", param: nodesWithHiddenNeighbor});
404 | 
405 |                     cy.undoRedo().do("batch", actions);
406 | 
407 | 
408 |                     /* var hiddenEles = cy.$(":selected").neighborhood().filter(':hidden');
409 |                     var actions = [];
410 |                     var nodesWithHiddenNeighbor = (hiddenEles.neighborhood(":visible").nodes("[thickBorder]"))
411 |                         .difference(cy.edges(":hidden").difference(hiddenEles.edges().union(hiddenEles.nodes().connectedEdges())).connectedNodes());
412 |                     actions.push({name: "thinBorder", param: nodesWithHiddenNeighbor});
413 |                     actions.push({name: "show", param: hiddenEles.union(hiddenEles.parent())});
414 |                     nodesWithHiddenNeighbor = hiddenEles.nodes().edgesWith(cy.nodes(":hidden").difference(hiddenEles.nodes()))
415 |                         .connectedNodes().intersection(hiddenEles.nodes());
416 |                     actions.push({name: "thickenBorder", param: nodesWithHiddenNeighbor});
417 |                     cy.undoRedo().do("batch", actions); */
418 |                 });
419 | 
420 |                 document.getElementById("highlightNeighbors").addEventListener("click", function () {
421 |                   if (cy.$(":selected").length > 0) {
422 |                     ur.do("highlightNeighbors", { eles: cy.$(":selected"), idx: document.getElementById('highlightColors').selectedIndex });
423 |                   }
424 |                 });
425 | 
426 |                 document.getElementById("highlightElements").addEventListener("click", function () {
427 |                   if (cy.$(":selected").length > 0) {
428 |                     ur.do("highlight", { eles: cy.$(":selected"), idx: document.getElementById('highlightColors').selectedIndex });
429 |                   }
430 |                 });
431 | 
432 |                 document.getElementById("removeSelectedHighlights").addEventListener("click", function () {
433 |                     if(cy.$(":selected").length > 0)
434 |                     	ur.do("removeHighlights", {eles: cy.$(":selected")});
435 |                 });
436 | 
437 |                 document.getElementById("removeAllHighlights").addEventListener("click", function () {
438 |                     ur.do("removeHighlights");
439 |                 });
440 |                 
441 |                 document.getElementById('highlightColors').addEventListener('change', function(e) {
442 |                   document.getElementById('colorInp').value = e.target.value;
443 |                 });
444 | 
445 |                 document.getElementById('colorInpSec').addEventListener('change', function(e) {
446 |                   api.changeLassoStyle({lineColor:document.getElementById('colorInpSec').value});
447 |                 });
448 |                 document.getElementById("lineWidth").addEventListener('change', function(e) {
449 |                   api.changeLassoStyle({lineWidth:document.getElementById("lineWidth").value});
450 |                 });
451 | 
452 |                 document.getElementById('colorChangerBtn').addEventListener('click', function () {
453 |                   let color = document.getElementById('colorInp').value;
454 |                   var idx = document.getElementById('highlightColors').selectedIndex;
455 |                   let nodeStyle = { 'border-color': color,  'border-width': 3 };
456 |                   let edgeStyle = {'line-color': color, 'source-arrow-color': color, 'target-arrow-color': color, 'width' : 3}
457 |                   api.changeHighlightStyle(idx, nodeStyle, edgeStyle);
458 | 
459 |                   var opt = document.getElementById('highlightColors').options[idx];
460 |                   opt.value =  color;
461 |                   opt.text = color;
462 |                 });
463 |                 
464 |                 document.getElementById('addColorBtn').addEventListener('click', function() {
465 |                   let color = getRandomColor();
466 |                   let nodeStyle = { 'border-color': color,  'border-width': 3 };
467 |                   let edgeStyle = {'line-color': color, 'source-arrow-color': color, 'target-arrow-color': color, 'width' : 3}
468 |                   api.addHighlightStyle(nodeStyle, edgeStyle);
469 |                   addHighlightColorOptions();
470 |                   document.getElementById('highlightColors').selectedIndex = api.getHighlightStyles().length - 1;
471 |                   document.getElementById('colorInp').value = color;
472 |                 });
473 | 
474 |                 addHighlightColorOptions();
475 |                 var s =  api.getHighlightStyles()[0];
476 |                 if (s) {
477 |                   document.getElementById('colorInp').value = s.node['border-color'];
478 |                 }
479 |                 function addHighlightColorOptions() {
480 |                   var colors = api.getHighlightStyles().map(x => x.node['border-color']);
481 |                   
482 |                   document.getElementById('highlightColors').innerHTML = '';
483 | 
484 |                   for (var i = 0; i < colors.length; i++) {
485 |                     var o = document.createElement('option');
486 |                     o.text = colors[i];
487 |                     o.value = colors[i];
488 |                     if (i == 0) {
489 |                       o.selected = 'selected';
490 |                     }
491 |                     document.getElementById('highlightColors').appendChild(o);
492 |                   }
493 |                 }
494 | 
495 |                 function getRandomColor() {
496 |                   const letters = '0123456789ABCDEF';
497 |                   let color = '#';
498 |                   for (let i = 0; i < 6; i++) {
499 |                     color += letters[Math.floor(Math.random() * 16)];
500 |                   }
501 |                   return color;
502 |                 }
503 | 
504 |                 document.addEventListener("keydown", function (e) {
505 |                     if (e.ctrlKey){
506 |                         if (e.which === 90)
507 |                             ur.undo();
508 |                         else if (e.which === 89)
509 |                             ur.redo();
510 |                     }
511 |                 });
512 |             });
513 |         </script>
514 |     </head>
515 | 
516 |     <body>
517 |         <h1>cytoscape.js-view-utilities demo undoable</h1>
518 | 
519 |         <div class="topnav">
520 |             <b id="hide" style="cursor: pointer; color: darkmagenta">Hide Selected</b> / <b id="showAll" style="cursor: pointer; color: darkmagenta">Show All</b> <br/><br/>
521 |             
522 |             <b>Highlight Color:</b>
523 |             <div class="m-1">
524 |                 <select id="highlightColors">
525 |                 </select>
526 |                 <input type="color" id="colorInp">
527 |                 <button id="colorChangerBtn">Update Color</button>
528 |                 <button id="addColorBtn">Add Color</button>
529 |             </div>
530 |             <br/>
531 | 
532 |             <b id="highlightElements" style="cursor: pointer; color: darkmagenta">Highlight Selected</b> <br/><br/>
533 |             <b id="highlightNeighbors" style="cursor: pointer; color: darkmagenta">Highlight Neighbors</b><br/><br/>
534 |             <b id="showHiddenNeighbors" style="cursor: pointer; color: darkmagenta">Show Hidden Neighbors of Selected</b> <br/><br/>
535 |             <b id="removeSelectedHighlights" style="cursor: pointer; color: darkmagenta">Remove Selected Highlights</b> <br/><br/>
536 |             <b id="removeAllHighlights" style="cursor: pointer; color: darkmagenta">Remove All Highlights</b> <br/><br/>
537 |             <b id="zoomToSelected" style="cursor: pointer; color: darkmagenta">Zoom to Selected</b><br/><br/>
538 |             <b id="marqueeZoom" style="cursor: pointer; color: darkmagenta">Marquee Zoom</b>
539 |             <br/>
540 |             <span style="font-weight: normal !important; font-size: 14px !important;">Shift + drag to specify region; gets disabled after zoom, mouse events on canvas and other api functions calls.</span>
541 |             <br/><br/>
542 |             <b id="lassoTool" style="cursor: pointer; color: darkmagenta">Lasso Tool</b>
543 |             <br/>
544 |             <span style="font-weight: normal !important; font-size: 14px !important;">Left click to start specifying region; left click again to complete the region.</span>
545 |             <br/>
546 |             <span style="font-weight: normal !important; font-size: 14px !important;">Line width (between 1 and 10) and Color:</span>
547 |             <input type="number" id="lineWidth" min="1" max="10">
548 |             <input type="color" id="colorInpSec"><br/><br/>
549 |             <label for="layout" style="vertical-align:middle;">Rearrange on Hide/Show</label>
550 |             <input type="checkbox" id="layout" name="layout" style="vertical-align:middle;" value="checked">
551 |             <br/><br/>
552 |             <span style="font-weight: normal !important; font-size: 14px !important;">CTRL+Z to undo, CTRL+Y to redo</span>
553 |             <br/><br/>
554 |             <span style="font-weight: normal !important; font-size: 14px !important;">Shift + taphold to select neighbors</span>
555 |         </div>
556 | 
557 |         <div id="cy"></div>
558 | 
559 |     </body>
560 | 
561 | </html>
562 | 


--------------------------------------------------------------------------------