.data('foo') can lead to collisions with user data. .scratch('viewUtil').foo does not.

From @canbax: The way marquee zoom is exposed in the demo is confusing. You click on it, it enables the marquee zoom, and when you actually perform the zoom it's automatically disabled without any feedback to the user.

Perhaps we can make this a checkbox, which enables marquee zoom on set and when the user actually performs a marquee zoom we can reset this checkbox (since the marquee zoom action automatically disables marquee zoom).

You'll get an error if you try to override existing functions with an extension. You'll have to use different names for .show() and .hide(), for example.

Please document it in README asap

In undoable demo file,
I highlghted the neighbours of Jerry and get the following screen,

Then I highlighted the neighbours of Kramer and get the following screen,

Finally I performed an undo operation and get the following result,

I think that something must be wrong with undo operation performed after multiple times highlights.

delete tempCanv; is problematic. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Delete_in_strict_mode says use tempCanv = null; instead of that

I see the same errors for delete c;

Let's update Cytoscape.js dependency as ^3.2.0 instead of ^2.7.0 both in README and package.json. This is required if user wants to apply cose-bilkent layout as post-processing.

Also, let's use the latest version of the cose-bilkent in the demo files.

Let's a new method to the API for showing hidden neighbors of nodes. Let's make sure it's documented in README.

User should be able to define up to four different highlighting styles for nodes and edges in options. Let's name those options as "highlighted" (the current one), "highlighted2", "highlighted3" and "highlighted4". After user defined different styles, a sample usage should be as follows:

var instance = cy.viewUtilities(options); 
instance.highlight(eles, "highlighted2");

If user doesn't define the second parameter in the above example that indicates the highlighting style, then the style in "highlighted" should be used as default.

Please try the following link: https://tonicdev.com/56dd390fafca530d006e8a75/57b6c2b4138af81400a64b3d

In both undoable demo at master and undoable demo at unstable, using the "Remove Selected Highlights" action removes all highlights, given that some element is selected.

Steps to reproduce:

• Open either undoable demo.
• Highlight any element(s).
• Select any element(s), highlighted or otherwise.
• Click "Remove Selected Highlights".

Expected: Selected elements have their highlights removed.
Result: All highlights are removed.

This problem doesn't happen in non-undoable demo at master or non-undoable demo at unstable. Probably an issue with undo actions for removing highlights.

It seems that there is a bug in marquee zoom. Normally, it should work either by calling enableMarqueeZoom function via a button and then SHIFT+drag or directly CTRL+SHIFT+drag where CTRL+SHIFT automatically calls enableMarqueeZoom function. Currently, the first approach is not working sometimes. Buggy behavior can be seen in demo with a few consecutive marquee zoom tries.

This extension should really follow the convention that it returns an object with its API, and only registers a single function per core and per collection with the same name as the extension.

e.g.

cy.viewutil().search(...);

cy.$('#foo').viewutil().highlight();

Otherwise, your extension can collide with other extensions or new APIs added to the core.

Let's please (in both demo apps):

• Make sure "Update Color" and "Add Color" buttons fit in one line
• When a new Higlight color is added, can we assign a random distinct color (currently we use the same color over and over again)

I should be able to highlight or unhighlight a selected node with that node remaining selected, but when a node becomes highlighted it no longer is selected.

Hello - if I initialise with non empty highlightStyles and selectStyles, I get the following error:

TypeError: Cannot read property 'selector' of undefined

If I initialise with empty highlightStyles and selectStyles it initialises OK.

Here is some test code that shows options that work and options that do not work:

import cytoscape from "cytoscape";
import viewUtilities from "cytoscape-view-utilities";
viewUtilities(cytoscape); // register extension
const cy = cytoscape()
const optionsWorking = {
    highlightStyles: [],
    selectStyles: {},
};
const optionsNotWorking = {
    highlightStyles: [
        {node: {'border-color': '#0b9bcd', 'border-width': 3},
            edge: {
                'line-color': '#0b9bcd',
                'source-arrow-color': '#0b9bcd',
                'target-arrow-color': '#0b9bcd',
                'width': 3
            }
        },
        {node: {'border-color': '#04f06a', 'border-width': 3},
            edge: {
                'line-color': '#04f06a',
                'source-arrow-color': '#04f06a',
                'target-arrow-color': '#04f06a',
                'width': 3
            }
        },
    ],
    selectStyles: {
        node: {'border-color': 'black', 'border-width': 3, 'background-color': 'lightgrey'},
        edge: {'line-color': 'black', 'source-arrow-color': 'black', 'target-arrow-color': 'black', 'width': 3}
    },
};

let api = cy.viewUtilities(optionsWorking);

export default cy;

Can anyone suggest please what might be the issue?

thanks!

After a fresh clone, opening demo.html in Firefox 54 throws the following errors:

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.  demo.html
ReferenceError: cytoscape is not defined[Learn More]  demo.html:42:21
	<anonymous> file:///tmp/cytoscape.js-view-utilities/demo.html:42:21

I think the problem is that this import does not exist: http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js

I could get it to work by replacing the link with https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.1.2/cytoscape.min.js.

I think that the first problem in the issue ('iVis-at-Bilkent/chise.js#49') is probably application specific but the second one may be related to this extension. I think that the problem here is similar to the problem in 'iVis-at-Bilkent/cytoscape.js-undo-redo#3'.

This might be intentional but adding a new dependency breaks existing applications.

The users should install geometric to use view-utilities.

This error will be shown in all the applications when they deleted node_modules folder and make an npm install. Adding geometric inside devDependencies might fix the issue.

There is a problem in the demo of show operation. I think it isn't related with the show operation itself, but we are missing some elements to show again in the demo.

The shortcut was implemented in Newt but view utilities extension is a more logical place to have this feature. Basically the shortcut works as Marqueue zoom but instead of clicking to activate marqueue zoom and then shift+darg, Simply ctrl+shift+drag would do the job.

I want to change highlight border-width based on user input. I set default at the first time.

let options = { node: { highlighted: C.HIGHLIGHTED_NODE_1, highlighted2: C.HIGHLIGHTED_NODE_2, highlighted3: C.HIGHLIGHTED_NODE_3, // options object has some other properties ... cy.viewUtilities(options)

I change options.node.hightlighted3 and then I call cy.viewUtilities(options) again but I see settings did not changed

Let's update the readme for this extension. Specifically the animated image should show:

• highlight facilities
• hide/show
• marquee zoom
• lasso tool

Is it possible to restrict which nodes can be candidate for view-utilities functionality.
For example I only want parent nodes to be able to hide or show with js-view-utilities
functionality

Similar functionality is provided with -node-resize plugin with which one is able to apply controls over desired nodes only

// https://github.com/iVis-at-Bilkent/cytoscape.js-node-resize provides 
isNoControlsMode: function (node) { return node.is(".noControlsMode") }, // no controls - do not draw grapples

Reported by @kaansancak:
Select a rectangle around a single node. After first zoom, select a similar rectangle (around the same node), sometimes graph disappears.

Double clicking on a node with hidden neighbors would unhide only the first level neighbors but now unhides them all (see the animated demo).
Another problem is that when those nodes are unhidden, they won't get deselected.

• 1. Let's please update the undoable demo as well.
  Let's do the following in both demos:
• 2. Let's rename "Highlight Elements" to "Highlight Selected"
• 3.Let's leave some space before "Highlight Selected"
• 4. We also need to update the README (changes in the API)