Where can we add our event data to cytoscape triggered events? - cytoscape.js

Looking to find where we can insert our own data for triggered events.
I have an extension that use to call onImpl(events, selector, data, callback), but that was back in 2.3.7. What is the updated way to add my event data if I want to pass data that can be used with the event?

As far as I know, it is not possible to pass data to core events anymore. But you can do it when you emit the events programmatically.
I'm assuming this is the extension that you mentioned. If you just want the paz/zoom functionality, you can use the pan-zoom extension.
I'm not sure if a toolbar extension would be any useful. The customization of the toolbar with an extension would be very limited. You can create a fancy toolbar, style and position it as you like and connect the buttons with Cytoscape events with jQuery or other similar libraries.
P.S: instead of passing the data to the event, you may keep the data in a global variable and access it from callback function.

Related

Refresh button in React-admin

I'm trying to access the refresh button in react-admin project. I tried using getElementsbyClassName it returns HTMLComponents Object but it isn't accessible i.e I can see the component on printing it to console but isn't accessible by code. Is there a way for me to disable this refresh button wherever I want?
I'm not sure the exact use case here, but you can create your own custom AppBar that renders essentially whatever you want: https://marmelab.com/react-admin/Theming.html#replacing-the-appbar.
also see this GitHub issue that mentions removing it entirely: https://github.com/marmelab/react-admin/issues/3383
Within your custom AppBar you could have some logic checks within your custom AppBar if you know ahead of time when you'll want it disabled (like on a certain page/component).
If you need it to be more dyanimcally disabled, you could probably have a very high-level context/state to control that as well..
**NOTE: I have built a custom AppBar before, but I haven't done any selective rendering or disabling within it. So, I can't guarantee that this is exactly correct, but it fits with other custom components I've built.

see the list of event listeners currently attached

I want to check the list of event listeners that are added. For example, I used the code cy.on('pan zoom resize', update); and added function called update in for loop. I do this many times. I also call cy.off('pan zoom resize', update); to remove the event listeners but I want to be sure about it.
The only think I can think of is using console.log but this method might not be helpful.
I also think that in some places people forgot to remove the event listeners and just always added. With too many repetitions this might cause problems.
There is a data field in the private cytoscape object called listeners. You can see that if you:
console.log() the cy object,
navigate to _private,
then open the emitter object
and lastly go to listeners
This is the array listing all the default and user defined event listeners with some metadata like the event, type and scope of the listener.
You can access this in your code by simply calling
cy.emitter().listeners
The question now is, why do you need this information in the first place? Normally, you should be just fine if you call cy.off('eventXY', ...) before using any cy.on('eventXY', ...). Are you sure you need this for your application to work? Maybe elaborate more on the core problem (why you want these information in the first place).
Thanks and have a great day!

Managing Angular 5 layout with a service

In an angular5 application, I have various sections of my page layout that I would like to control through an angular service. For example, I have a sidenav component that displays when a value is set to open, and I would like to be able to toggle it from any component I'd like.
My initial thought was that it would be nice if I could bind the open value to a variable in a LayoutService I would create, and the LayoutService would contain a toggle() method that would toggle the value and cause the sidenav to open/close. I could then inject my LayoutService into any component I'd like and control various parts of my layout.
Any idea whether this is possible and how I could go about doing this? I thought it might be possible using an EventEmitter or something, but I was wondering whether there was a simpler way and I'd rather not use redux.
https://stackblitz.com/edit/angular-lj7gsz
Here's a side-bar you can open and close using simple rxjs objects.
In the side-bar service, I've created a BehaviorSubject that you can pass boolean values to and I also exposed an Observable, which will emit every time a new value is passed to that subject.
By subscribing to that observable (I've used the async pipe to subscribe for me), my side-bar component will know when other components wish to open or close the side-bar. All the other components need to do is inject the service and call the service's open or close methods.
It's not perfect, but I feel it's definitely better than using event emitters as they were never made to be used in services.
Hopefully this is helpful.

Swapping keys for cesium mouse events and creating custom events

I am new to cesium so need some very basic help.
How can we swap the behavior of the mouse left button and right button without having to code the behavior ourselves?
Moreover, can someone give me a basic coding example to define our own mouse button event? I have tried to run the one from Sandcastle but it is not working at the moment, can't figure out the problem for now.
You don't need to use Cesium's mouse event system, you can just listen to the normal JavaScript mouse events outside of Cesium and react to them. The DOM element to listen to is the canvas, typically viewer.cesiumWidget.canvas.
Cesium's built-in event system is not easily configurable for now, that's an item on the wishlist. Part of the problem here is that the default behavior changes at runtime. For example, when the camera tracks or un-tracks an entity, the input event wiring gets rearranged on the fly, and customizations may be overwritten. Someday Cesium's event handlers will need to be rewritten to be configurable.
To extend what #emackey stated:
The general recommendation from the Cesium team is to use native JS events whenever possible. The event handlers within the Cesium library are there more for internal library use and plugin modules.
As for how to capture the mouse click/scroll/move events otherwise it would be helpful to have an example of what you tried so far. Though this is a good reference to read http://www.html5rocks.com/en/mobile/touchandmouse/

programmatically expand a tree inside a dojox.TreeGrid

I have a simple tree grid and i need to programmatically expand a row to show its children. In essence i need to fake the click event that triggers the opening of the tree.
see and example here http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/grid/tests/test_treegrid_model_lazy.html
I haven't personally used the TreeGrid, but from the API docs, it looks like you want to use the expandoFetch(rowIndex,open) function with the open parameter as true:
myTreeGrid.expandoFetch(0,true);