I have a cytoscape graph added to my web app. In the core's configuration I've set the boxSelectionEnabled to true.
This is letting me draw a Box with holding Shift or Ctrl around graph elements.
Now i am trying to read all these elements upon the boxend event of graph like this,
this.cy.on("boxend", lang.hitch(this, function (event) {
console.log("boxend");
//read selected elements of graph by boxselection
}));
But, this even is not triggering. I tried with other box events such as boxstart,boxselect,box but those are not working as well. Although, I tried same with events such as tap,cxttap events and they are working fine without any issue.
So, is there any way to get all the box selection elements from graph with these events.
Thanks,
Suraj.
cy.on('boxend') seems to be working fine. You probably have an issue with wrapping the callback the way you have.
Related
On LightningtChartJS, I added 2 LineSeries which displays correctly (screenshot).
sample line graph
Then I am trying to do the highlighting of the lines on hover, plus the hover and mouseclick events.
I set the following:
const series=this.chart.addLineSeries({});
series.add(data); //data var is set above this code
series.setHighlightOnHover(true);
series.onHover((...args)=>{
console.log(args);
});
series.onMouseClick((...args)=>{
console.log(args);
});
The the highlight doesn't work, hover and click events don't trigger when I hover or click on a any of the lines.
Please help.
Seems that this feature is not working on the 3.0 version. It should be fixed in a patch or minor release in the near future. To try it out immediately you can revert to previous version, and it should work out of the box - highlighting on hover is enabled by default.
EDIT: v3.0.1 has just been released along with fixes to this issue.
In this version, LineSeries mouse interactions are disabled by default because they don't perform well in all cases. In order for mouse interactions to work you must enable them with setMouseInteractions(true).
The mentioned performance issues can happen with FREEFORM line series and large amount of data (~hundreds of thousands of data points). If you are using a progressive data pattern then there are no issues.
EDIT: v3.4
The general situation is still the same, the mouse interactions of Line Series are still disabled by default and you must enable them with setMouseInteractions(true). Furthermore, highlighting on hover is also disabled by default, and must be enabled with setHighlightOnHover(true).
Following snippet is confirmed to work in online examples:
const series = chart.addLineSeries({
dataPattern: {
pattern: 'ProgressiveX',
regularProgressiveStep: true,
}
})
.setHighlightOnHover(true)
.setMouseInteractions(true)
series.onHover((...args)=>{
console.log(args);
});
series.onMouseClick((...args)=>{
console.log(args);
});
However, something of an extra complication is the automatic disabling of mouse interactions during animations and scrolling, which is enabled by default. These can be disabled as follows:
chart
.setMouseInteractionsWhileScrolling(true)
.setMouseInteractionsWhileZooming(true)
Thankfully we are just about to move into a breaking version release v4.0.0 where we can properly resolve the situation. Stay tuned for improvements regarding mouse interactions in the coming months.
How can i go to a window position after an update on my Repl example? When i scroll down and click on a card and go back to the main window it allways jumps to the top. I have tried to insert window.scrollTo on afterupdate and also beforeupdate, inside the OpenCard.svelte also inside the App.svelte but i cant figure it out. What would be the best solution for this?
Repl
There is more than one solution for this, because this is quite a lot of code for such a question.
one solution would be to add this line to your showHome function
function showHome() {
visible = true;
requestAnimationFrame(() => window.scrollTo(0,100)); // That's the line
}
HOW IT WORKS:
The reason this solution works is because you condition the entire app on the visible variable, so after setting visible = true; the app hasn't updated yet, and therefore calling window.scrollTo immediately will just scroll before the refresh.
thus putting it inside a requestAnimationFrame will wait for the next redraw of the DOM, making the scroll only after the DOM's update.
Another solution would still require requestAnimationFrame,
There's no avoiding it using.
It will require to create a reactive statement like this:
$: if (visible) requestAnimationFrame(() => window.scrollTo(0,100));
That way your app will always know when to change the scroll based on your visible variable's value.
I think you should go with the second solution, it's more stable on future changes.
To learn more about requestAnimationFrame and how to use it: https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame
Question
I'm working with Adobe Scene7 BasicZoomViewer and I'm looking for a way to tell the ZoomViewer to reset the zoom so that the user is no longer zoomed in on an image but instead will show the default "zoom" level.
What I've found
The closest thing I found to what I need is this reset property ZoomView.reset which "Resets the viewport when the frame (image) changes. If set to 0 it preserves the current viewport with the best possible fit while preserving the aspect ratio of the newly set image".
This looks close to something I need but it states that it will reset or preserve the aspect ratio when a new image has been inserted but I am not inserting new images.
Demo from Adobe
There is a button on the image that the API inserts into the page that resets the zoom level. Adobe provides a demo page that shows what I'm working with. If you look at the bottom left, the right-most button is the reset button. When clicked, it has to make some kind of API call and I need to figure out which one it is.
Edit
I've been able to find a minified version of the BasicZoomViewer and I am currently attempting to make sense of the code.
There is an event listener placed on the "Zoom Reset Button" that just simply calls a reset() method on line 274 in the uglified version of the file. Currently, I am trying to make sense of the file and figure out how to access this method.
c.zoomResetButton.addEventListener("click", function () {
c.zoomView.zoomReset()
});
I will be answering my own question. If someone finds a better way please feel free to answer as well.
tldr;
Create a variable to hold the instance of your s7viewers.BasicZoomViewer() and inside of that you can access the event handlers and much more.
Example of calling the reset zoom handler
// instantiate the s7viewers class and save it in a variable
var s7BasicZoomViewer = new s7viewers.BasicZoomViewer({
containerId: 's7viewer',
params: {
asset: assetUrl,
serverurl: serverUrl
})
// example of how to call the "zoomReset()" method
s7BasicZoomViewer.zoomResetButton.component.events.click[0].handler()
Explanation
After digging through the minified code that was uglified I found an event listener on the s7zoomresetbutton DOM class name, or perhaps it's watching for the ID of that DOM element which is the same ID as the container div for your S7 BasicZoom Viewer plus some added text to make this ID unique. For example, if the container div is s7viewer then the reset zoom button will have an ID of s7viewer_zoomresetbutton.
Now, going through the code I found this event listener which let me know there must be some way to call the zoomReset() method.
c.zoomResetButton.addEventListener("click", function () {
c.zoomView.zoomReset()
});
In the code above, the value of c is this or in other words it's the instance of your S7 BasicViewerZoom and in my case I have multiple depending on how many images I need to zoom on.
When instantiating the s7viewers class you can then reference that instance later and access the event handlers on each button and other properties and methods.
From there it was just looking through the object returned from the instance and calling the handler for the reset button.
I'm working on an app that, from the Main.mxml, opens one or many Window.mxml instances. When it's done I want all windows to be chromeless so the custom controls need to work.
In Main I've added applicationComplete="init();" so the init function gets ran, which contains clickhandlers, which makes the buttons work.
However, this way of running an init function doesn't seem to be valid for an mx:Window.
I can cheat by not using a clickhandler for the minimize and close buttons with a click="this.minimize();", but I don't know of a way like this to make the move work because it's a MOUSE_DOWN event.
Question 1:
Is there a way to have such an init function in an mx:Window?
Question 2:
What's a good way to make the buttons on the Window instances all work?
ps. If you think question 2 needs a separate post please let me know, they're so closely related and seemingly simple I couldn't decide.
Example code:
Main.mxml - http://pastebin.com/0HHVpkb8
Window.mxml - http://pastebin.com/g5TWuLYk
Window doesn't have an applicationComplete event, but it does have windowComplete event. Perhaps that would work for you. There is a list if Window events here.
I am able to render a google map on a flex canvas. I create the map using the code below and then place markers on it in the onMapReady method (not shown)
var map:com.google.maps.Map=new com.google.maps.Map();
map.id="map";
map.key="bla bla";
_mapCanvas.addChild(map);
map.addEventListener(MapEvent.MAP_READY,onMapReady);
It all works fine. However, if I remove the map and then set _mapCanvas to null, then run exactly the same code again, the onMapReady event does not fire. It is weird, but once a map has been created and deleted, the onMapReady event never seems to fire again.
Anyone got any ideas?
Thanks.
I still don't know why this was happening, but I worked around the issue by creating the map as an application-level variable, only instantiating it once, and then adding and removing it from canvases as required. Not ideal, but at least I can now display and remove a map dynamically, even if it exists in memory between invocations.