ivis-at-bilkent / cytoscape.js-edge-editing Goto Github PK

Please see 'iVis-at-Bilkent/chise.js#55'

I made changes to plug-in to save data into edge.data instead edge.scratch and now i can save serialized bending data along with edge data and restore it later.

var exported = cy.elements().jsons();

but my issue is when i restore it by rendering again using same element data then it does not display bends. I have to personally click on edge then it shows bend, to prevent manual click I had to apply a workaround, which works but there should be a better way.

cy.elements().each(function (i, ele) {
		if (ele.group() == "edges") {
			ele.select();
			ele.unselect();
		}
	});

Can you add method for export, import and apply bend data?
Attached file with changes. Search for vishal keyword in file to see changes.
cytoscape-edge-bend-editing.zip

Thanks for your help earlier!

For me it would also be handy do have the functions exposed you use in your menu.
I currently use my own menu, and it would be much more flexible if I can create my own menu items so I have more control over these items.

Hi, is there an easy way to remove the jquery dependency? Need this lib but it's a requirement for the project I'm part of to not include jquery

In the demo file, a parameter "bendRemovalSensitivity" has been mentioned, which is not present anywhere in the cytoscape-edge-editing.js file. This parameter is also mentioned in the readme file.

In the readme file, some other options have also been mentioned which are not actually present in the default options in the code. They have been separately created as variables, such as handleReconnectEdge, validateEdge and actOnUnsuccessfulReconnection.

• Create a single anchor on any edge in the demo.
• Select the edge so anchor point and endpoints are drawn.
• Ctrl + Z. See the error in the console.

• In the demo, select the edge with the bend point
• Right click on the bend point and "Remove bend point", we get:

@royludo:
When you have 2 edges between the same 2 nodes, and both edges haven't been touched (no bend point used), then when you want to add a bend point to one edge, they kind of merge and get locked together.

Weirder thing: if the distance between the 2 nodes is large, you can correctly edit the bend point and have a normal behavior IF you click and place your bend point very close to one of the node. When clicking in the middle of the edge to place the bend point, the weird behavior happens.

The cytoscape.js website advertises that this plugin allows one to work with bezier curves, but from what I can tell it only works with segments at present. Experimented a bit locally and it looks like it won't be too much work to support an option for unbundled-bezier. Will make a PR for this option in the near future unless there are any concerns/objections.

Impossible to export and import graph at a later point of time with standard function cy.json().

The produced by cy.json() object is incorrect due to "selector": ".edgebendediting-hasbendpoints" and "selector": ".edgecontrolediting-hascontrolpoints" styles. Removing these styles makes it possible to load a graph, but without blend and control points.

Steps to reproduce:

1. Open demo page https://ivis-at-bilkent.github.io/cytoscape.js-edge-editing/demo.html
2. Run from console: cy.json( cy.json() )
3. The result:

The style property `segment-distances: fn` is invalid cytoscape.min.js:23:12071
Uncaught TypeError: M is null
    parseImpl https://unpkg.com/cytoscape/dist/cytoscape.min.js:32
    parseImplWarn https://unpkg.com/cytoscape/dist/cytoscape.min.js:32
    parse https://unpkg.com/cytoscape/dist/cytoscape.min.js:32
    cssRule https://unpkg.com/cytoscape/dist/cytoscape.min.js:32
    css https://unpkg.com/cytoscape/dist/cytoscape.min.js:32
    appendFromJson https://unpkg.com/cytoscape/dist/cytoscape.min.js:32
    fromJson https://unpkg.com/cytoscape/dist/cytoscape.min.js:32
    fromJson https://unpkg.com/cytoscape/dist/cytoscape.min.js:32
    setStyle https://unpkg.com/cytoscape/dist/cytoscape.min.js:32
    style https://unpkg.com/cytoscape/dist/cytoscape.min.js:32
    json https://unpkg.com/cytoscape/dist/cytoscape.min.js:32
    <anonymous> debugger eval code:1
debugger eval code:32:48009

Is there a quick workaround?

I was going through the project again and noticed this:

The endpoints of edges are not being deleted. I checked and had the same issue in my local repo as well, which suggest that the changes made to the project did not cause this.
After some debugging I noticed this:

The calls to
endpoint1.destroy() endpoint2.destroy() canvas.draw()
should clean the shapes from the stage, but the shapes aren't being removed.

On another note, Hasan noticed that the code is working fine in Newt.

Cytoscape position event on nodes (defined here) slows down the layouts, because it's triggered for each node at the end of the layout. For example, for a graph with 4500 nodes it may cause 7-8 seconds slowdown. It's actual purpose is to redraw bend points and reconnection handles if source or target node of the selected edge changes its position. However, it's triggered unnecessarily in many cases including layouts. Other similar events should also be evaluated for the same reason, but main slowdown is caused by position event in layouts.

This extension will not support moving anchor points in diagonal directions (e.g. bottom-right) as it favors the first key that's pressed. Let's modify the code to support this.

It seems that an issue similar to this one ( iVis-at-Bilkent/cytoscape.js-context-menus#5 ) exists in this repository as well.

When updated a form the edges points move a little.

The edges points position is normal

After updating the form

I have verified edge positions, zoom, pan and all the information that nodes and edges have before updating the form and after and they seem to match.

Thank you

#cytoscape

• Make one last patch release of the master branch with the current name to publish to npm (ivisatbilkent/usual passwd) with updates to README. Something like "this package is deprecated in favor of the package".

• Deprecate the old package in npm: https://docs.npmjs.com/cli/deprecate

• Rename the repo as "cytoscape.js-edge-editing"

In unstable:

• Document the new edge reconnection support in README
• Update the "demo" to
  o include the new edge re-connection handles
  o include a bend in one of the edges on load (which was missing previously)

These are to be done later (after testing):

• Merge unstable to master

• Release as 2.0.0 in Github

• Release the library in npm as "cytoscape-edge-editing"

• Assign it back to me so I can notify Cytoscape.js guys to update the extension list in their web page

Hi
I am unable to add bend points by init bend points. Trying to achieve something like that in the image added:

But now able to achieve. Please help
http://plnkr.co/edit/Ry88ZxN6qt6pkjmkHDxx?p=preview

The enabled option starts the extension in enabled/non-enabled way as expected, but there is no way to dynamically enable/disable it again, which means the user might as well have not used the extension anyways if they are disabling edge-editing this way.

An argument could be made where different instances of an application may want to enable-disable edge editing at initialization based on the instance, but then the API functions and menu options don't respect enabled/disabled state and return errors since only the options object is affected by enabled. Then the application using API functions needs to check whether the extension was enabled in the first place anyways, which means the option is useless.

Thus we should either remove this option, or change it to function as expected and not return errors when disabled, maybe even add enable() and disable() functions to the API. I'm not sure how these functions would operate seamlessly with an application in a dynamic way though (as in while the application is working, would anchors just disappear when disabled?).

The extension only checks for selected edges and that the edge is the only selected one. It doesn't consider nodes can be selected. Which leads to weird behavior like selecting an edge and selecting a node afterwards leaving edge anchors and endpoints rendered still.

First came to attention here.

Hi,

the bug can be reproduced using your demo webpage https://ivis-at-bilkent.github.io/cytoscape.js-edge-editing/demo.html

choose menu to create a bendpoint in an edge, then follow up immediately to drag the point to some where, it may cause two bendpoints adding to the same location and only one of them is dragged away.

it may also happen after a bendpoint is created, just drag it to somewhere then quickly drag it again to another place, sometimes it will create also an unwanted additional bendpoint in its original position.

When a bend point is too close (inside its boundaries?) to a source / target node, the edge becomes invisible (see below).

It would be awesome to have an option to support fixed angles in connectors while dragging a node

Continuation of #54.

Hi Cytoscape Team,
Please let me know if there is a way i can lock the edges, which have bend points added to them.
I want to lock:
Movement of such edges,
Creation of more bend point by users

If possible: please edit: http://plnkr.co/edit/3bZWk3RW877JNOM9PI4U?p=preview
and share your version.
Your help would be greatly appreciated

Best Regards,
Kunal Ganglani

Currently, this extension doesn't use trailing dividers in its context menu item options by default and the extension options don't support changing this setting. This causes a problem when the extension is used in other applications that might also be creating context menu items of their own with trailing dividers: It will make their menu styles inconsistent with some items having trailing dividers and some not, with no way to control the setting for menu items related to this extension.

To solve this issue, this extension should support enabling trailing dividers for context menu items of its own. This could be made optional and set to false by default for backward style compatibility.

Hello, I need on my project to add other display conditions for the context menu.
When there is no bend point on the line, only one item in the menu (add Bend Point)

If there is at least one bend point on the line, three items in the menu (add bend point + remove bend point+ remove all bend point)

Do you think added other option for the context menu? or do you have any suggestions to solve my problem?

The demo files in extensions which are generated by 'https://github.com/cytoscape/slush-cytoscape-extension' sets 'window.cy' as the following 'var cy = window.cy = cytoscape({...'. Therefore, in demo file of this extension this problem is not occuring, but if I change this line so that 'window.cy' is not set the problem occurs.

@maxkfranz is 'window.cy' is set just for debuging purposes in generated 'demo.html' files. If not is it expected that users should set it like it is done in 'demo' files after creating 'cytoscape' instance?

I think that if the first case is true then this is a bug of this extension. However, if the second case is true then there is no problem with this.

Is it possible to disable (remove) reconnection controls?

Since we can actually add a bend point only when the edge is selected, this context menu item ("Add Bend Point" should only appear only when the associated edge is selected.

This bug is reproduced when the following steps are performed in order,

• Open the default graph
• Add a bend point to any edge
• Remove that bend point
• Undo last action
• Redo last action

Noticed by @gledis69 :

Simply move a bend point with arrow keys and then apply undo operation. It gives error in the console.

This bug is reproduces when the following steps are performed in order:

• Open the demo file.
• Add a bend point to any edge.
• Move that bend point.
• Remove that bend point.
• Add another bend point to the same edge.

New bend point is created in wrong position.

Hello, thank you for this extension.
I do have an issue, the context menu is showing the 'remove bendpoint' option, but it doesn't work ?
Since the context-menu functions are not exposed i can't really debug it.

Would be nice if an event listener for "cxttap" wasn't bound if context menu is not included, as this makes it throw errors. Would also appreciate it if anyone has a workaround for now

As seen in the below gif, edge is not drawn when we move the bend points inside the node in a certain order. According to my observation, the problem only occurs when source-endpoint & target-endpoint of the edge are set to "outside-to-node".

When you select an edge and move a bend point and then undo, reconnection handles are rendered in old, outdated positions:

We create a temporary dummy edge while doing edge disconnection/reconnection. Apparently this edge sets style properties on element creation, which is deprecated and a warning is shown in console.

This is not very important, but we should probably adjust to the standards of cytoscape as they change.

If there is not already a posibility to exlude some edges from editing.
E.g. by adding a class to those edges who should be editable or add a class to those who don't.

Hi, thanks for this amazing stuff!

My question is, how to know if the getAnchorsAsArray returns bend points or control points. I now use the class of the edge to derive this, but this does not look like a solid solution to me.

var bendPoints = edgeEdit.getAnchorsAsArray(n)
if (n.classes().includes('edgebendediting-hasbendpoints')) {
bendType = 'bend'
} else if (
n.classes().includes('edgecontrolediting-hascontrolpoints')
) {
bendType = 'control'
}

This extension currently allows two main operations: management of anchor points and reconnection handles. Both operations become functional when extension is initialized. However, a user may need only one of these operations and may want to disable the unused one as in the case of #51. Hence, we need to make both operations optional.

To make reconnection handle optional, we can use handleReconnectEdge option as suggested by @truefusion in #51. This option currently accepts a function to handle reconnection of the edge and if it's undefined, applies the default behaviour. Passing boolean value false to this option can be used to disable reconnection handles.

Similarly, we can add a new option named handleAnchors to enable/disable the usage of anchor points. This option can be true by default and users do not want to use anchor points, but interested in only reconnection handles can set its value to false.

After I move the edge around twice and then try to undo, only one undo seems to be complete. The other undo also completes, but it is not shown on screen. When I zoom out/in it triggers a screen refresh and the change shows.
This only appears to haven when causing actions which are stored as "changeAnchorPoints" and not with changing of edge endpoints.

Also Hasan checked and noticed this bug is not showing up in Newt.

Hi,I use react application with cytoscape..I try to use cytoscape-edge-editing plugin in my react application..I includes dependency like -
import cytoscape from 'cytoscape';
import $ from 'jquery';
import edgeEditing from 'cytoscape-edge-editing';
cytoscape.use(edgeEditing,jquery);

and call the api of edge-editing like-
cy.edgeEditing(options);//options are defined

then I run my application get error "$ is not defined" in node-module/cytoscape-edge-editing

An option that controls the distance within which a bend point is considered "near" the line segment between its two neighbors for removal purposes would be nice.

Would like a cleaner way to remove specific menu items from the context menu. Providing an empty string or a boolean false value to the menu item titles had no effect, so I'm currently doing it through style sheets. But doing it this way isn't going to prevent the menu from activating though there be a lack of children.

While an edge is selected, if we right-click on an empty space, either "Add Bend Point", "Add Control Point" or both of them is shown in the context menu depending on the style of the edge, even though these options should be displayed only when right-clicked on an edge. This problem occurs in unstable branch after merge of #37.

https://raw.githack.com/iVis-at-Bilkent/cytoscape.js-edge-editing/unstable/demo.html

Using the latest demo (above), try adding a bend (using the edge context menu) somewhere along the last line segment of the edge (near Elaine). Notice that depending on the location you choose, the bend is either not created at all or created at a different location than click point.

Actually, selection shouldn't be included in the undo-redo operations. If an element is selected it should continue as selected or vice versa. Currently, when we apply undo-redo operation, the edge with the bend point changes its selection state and if it's in selected state, reconnection handle may not drawn to the correct position. A sample can be seen below:

So if I take an edge from two nodes, and make it a self-edge(source and targets are the same) and if after that I try to insert a bending point to that edge I get errors and the canvas kind of crashes. Because nothing can be manipulated anymore.

Hi,I use react application with cytoscape..I try to use cytoscape-edge-editing plugin in my react application..I includes dependency like -
import cytoscape from 'cytoscape';
import $ from 'jquery';
import edgeEditing from 'cytoscape-edge-editing';
cytoscape.use(edgeEditing,$);

and call the api of edge-editing like-
cy.edgeEditing(options);//options are defined

then I run my application get error "$ is not defined" in node-module/cytoscape-edge-editing