how to add/connect a new edge to nodes via drag and drop - cytoscape.js - cytoscape.js

How can I add a new edge to connect 2 nodes via drag and drop? I would like to drag/draw a new edge from node x to node y manually via mouse.
It would be greatful, if you could give a working example in jsfiddle or something like that!

App-level features should be written in your own app code or in an extension.
Have you taken a look at the extensions?
There are two extensions on the list thus far for this usecase.
Cytoscape.js is very extensible, so it's easy to write your own extension if you want something different.

Related

How to create a list which sorts its self like games with the animation

I am creating a game in flutter in which I want to create my leader board page in which I want to achieve the list like Reorderable widget but in that we drag the tile manually but I need to get it automate ,it should elevate and lower another tiles same animation like Reorderable list but it should be automated
I hope I will find some solution with large community
You can take a look at the AnimatedList in Flutter: https://api.flutter.dev/flutter/widgets/AnimatedList-class.html
When a new value is inserted (or removed), it is automatically animated (and you can of course customize this animation to suit your needs).
I'm not sure how you would handle moving an item from one place to the next in the list, though.
Update
I found this other SO thread which mentions the great_list_view package, in which you can just update your underlying list (with the new score, or sort it again) and it will automatically animate it for you. That sounds like a good option, and the package has recently been updated and has a decent amount of likes on pub.
https://pub.dev/packages/great_list_view

Editing Video Effects panel on VLC for Mac

Ok so this question is actually in two parts.
I coded a video filter for VLC and I would like to add a control to the Video Effects panel on the OS X UI. So far I've been able to link my plugin the the UI by hijacking one of the existing controls, but this isn't ideal.
Now, if I open up the Xcode project (I'm running Xcode 6.3.1) and try to open the VideoEffect.xib file, I get the following error:
I tried to google this but it sounds like the only alternative would be to play archaeologist and dig up an old copy of Xcode 3. Is there any other way to be able to open this file and edit it somehow? I tried to look at the XML code but if I started to change that I'd do more damage than good.
The second thing I'd like to do is sending back values from the effect module to the UI. At the moment (by hijacking one of the existing sliders), all I can do is read a value from the panel with
config_ChainParse(p_filter, FILTER_PREFIX, ppsz_filter_options, p_filter->p_cfg);
p_filter->p_sys->i_factor = var_CreateGetIntegerCommand(p_filter, FILTER_PREFIX "factor");
and then, inside the callback function:
p_sys->i_factor = VLC_CLIP( newval.i_int, 0, 255 );
However, I haven't been able to write back the value. I'd like the filter to set p_sys->i_factor to a random value at start. This works (using var_SetInteger()), but it isn't reflected in the position of the slider in the Video Effect panel. I suspect I need to hack a bit deeper for that. Any ideas?
Regarding your first question with the xib-file. Consider downloading and using our forthcoming 3.0 code from git://git.videolan.org/vlc.git - it allows editing of said file without Xcode 3.
Regarding your second question, why would you want your video filter to interfere with the UI? This is not how the architecture of VLC works and there is no correct way to do it at this point. You would need to edit the core to do another global variable callback to ask the UI to reload the presented filter configuration.
Perhaps, if you give details about what your filter does and what you want to achieve, we find a more supported way :)

How to interactively create an edge on canvas between two nodes

As in the cytoscape.js to make an interactive communication between nodes? Is it possible? In similarity how it is implemented in a factoid (http://webservice.baderlab.org:3000/).
That is, you can interactively create an edge on canvas between two nodes and then save it in the database.
The bundled edgehandles plugin is what you're looking for, though you'll also need the cxtmenu plugin or some other manual UI for starting the gesture (e.g. a mode + tap) to support touch devices. They have their options documented at the top of the source, and they will be further documented in 2.1 once they are migrated to the jQuery plugin site -- those plugins are simply jQuery plugins that use the cy.js API afterall.

Generating tooltips with cytoscape.js?

I'm trying to replicate the helpful tooltip feature of the old cytoscape web. Is there a way to attach a tooltip to nodes and edges in the new cytoscape.js? I've tried looking for this function, but couldn't find anything.
Thanks!
Use the Cytoscape.js qTip extension : https://github.com/cytoscape/cytoscape.js-qtip
--
Original answer:
I will be porting over some of my own code to a separate qtip interface plugin soon. In the meanwhile, you may find this code useful:
https://github.com/PathwayCommons/factoid/blob/master/lib/app/client/qtip.js

Identify the monitor with the browser window in FireBreath

I am using FireBreath to create a cross browser plugin which makes use of some native libraries for the respective platform (some .NET based DLLs for Windows and Objective-C based dylibs/frameworks for Mac). Native libraries display UI screens. In order to improve usability, if the user has a multi/extended monitor setup, i would like the native UIs to appear on the same screen as the browser window is currently on.
If an identifier to the monitor with the browser window can be retrieved, that can be passed down to the native components which can be configured to display their UIs on that monitor. I have used FireBreath's getWindowPosition() method to get the rect coordinates of the plugin and used that info to identify the correct monitor in the Windows platform.
However, the coordinates returned in Mac seems to be always 0 (or 1) irrespective of monitor on which the browser window currently resides. I understand that we have to configure an event model and a drawing model in order for this to work in Mac. I have tried following event/drawing model combinations without much success.
1) Cocoa/CoreGraphics
2) Carbon/CoreGraphics
Any help in this regard is much appreciated. Also please do share if there are other approaches to achieve the same. What i want to achieve is to identify the monitor on which the current active browser window resides in Mac. I am unsure at this point, but it maybe possible to achieve this at Objective-C level (without any changes at FireBreath level). Also please note that i want to support Safari, Firefox and Chrome browsers.
You won't like this answer, but simply put you can't do that on Mac. The problem is that with CoreGraphics you are only given a CGContextRef to work with, and it doesn't know where it will be drawn. It was technically possible in older browsers to get an NSWindow by exploiting some internal implementation details, but many browsers that's no longer possible and it was never supported.
Other drawing models are the same; CoreAnimation you have a CALayer but it doesn't know which screen or monitor it is drawn to. I personally think it's a bit annoying as well, but I do not know of any way to find out which monitor your plugin is rendered to, particularly since most of them actually copy the buffer to something else and render in a different process.
I did manage to come up with a workaround and i am just replying here for the completeness of the thread. As #taxilian explained, it is not possible to retrieve plugin coordinates using the window reference. As an alternative approach, Javascript 'Window' object has 2 properties called 'screenX' and 'screenY' that return X and Y coordinates of the browser window relative to the screen. If the user has an extended monitor setup, these are the absolute coordinates with respect to the full extended screen. We can use these values to determine the monitor with the browser window (if the X coordinate is outside the bounds of the primary monitor's width, then the browser should essentially be on the extended monitor). We can retrieve DOM properties from Firebreath as explained in the following link:
http://www.firebreath.org/display/documentation/Invoking+methods+on+the+DOM