There is a graph using Vis.js Network that consist of circles and edges between them.
Hovering mouse over a circle is supposed to show a tooltip.
Using Vis.js hoverNode and node.title (for tooltip content).
When mouse is moving from empty space into a circle - it always works:
However if mouse if moved over the edges neighter hoverNode nor 'blurNode` every triggered:
Is this a bug? Are there any possible work-arounds?
Related
When I want to for example hover over my area chart dot symbols I could not do it because they could overlap each other.
See images:
Hover over event not triggered - No tooltip shows up
Hover over event triggered - Tooltip shows up
Maybe I can place the charts in the same layer or something like that to make it work properly?
What I noticed: As the charts loads in, the newer one covers the older one.
I could load the chart which has higher Y axis values first and than the charts with smaller Y axis values.
But that solution would only work in those cases where every single chart points are clearly bigger/smaller than the other chart's points.
I'm developing a small Qt application similar to the DiagramScene example. I have subclassed QGraphicsView instead of QGraphicsScene. My view is zooming in and out with the mouseWheel, I can drag it with the mouse and I can add Nodes and Links with clicking.
I click on one Node, (the first end of the line item is set), then move the mouse (the second end of the line is following the mouse cursor), then I click on the second Node and anchor the second end of the line item to this second node.
The problem is, when the view is zoomed in, or I have moved the view, when I click on a Node and move the mouse, the preview of the link is not visible. When I click on the second Node - the link is still not visible. The link between the two Nodes becomes visible only after I zoom out or drag the view to some point and it intersects with the sides of the view.
Any ideas how to fix this?
Thank you so much in advance.
I finally fixed it. I was wrong to use data members for the coordinates (also the bounding rect and paint method) of my custom Graphics items. I changed the code using the setPos() function which gives the right coordinates to my items. #Merlin069 thank you, actually your last question got me thinking whether I set the coordinates correctly.
I have a script that gets the coordinate of a map by clicking. At the same time, there are circle overlays spread across the map. I can get the coordinate of anywhere but the area covered by the overlays. What is a good work-around for this problem?
Either make the circles with {clickable: false} or capture the click event on the circles also
I have an image that I show inside a canvas which I can zoom in on.
The problem is that when zoomed in, I try to drag the image, I can see the outline of the image in the foreground, (i.e.) outside the canvas boundary.
Is there anyway to tell the dragHandler to crop the "grabbed" image outside the canvas boundary?
In my experience using the built in drag/drop flex stuff is overkill for something that involves moving a component around in a canvas.
The easier way to do this (in my opinion) would be to listen for mouse down/up/move the image around in the canvas yourself.
When you detect a mouse down on your image, add a listener for mouse move (pro tip: make sure you set useCapture to true when calling addEventListener) and store the position of the mouse relative the origin of your image. Then whenever you get a mouse move, change the position of your image within your canvas taking into account the position of the mouse within the image (which you stored on mouse down). Keep doing this until mouse up occurs, then remove your mouse move listener.
There are some additional finer points to account for (what if the user drags outside of the canvas? Or outside of the browser window?), but this will get you started.
Hope that helps.
I have a component which draws a grid of things and I want a small highlight square to follow the mouse around highlighting the square that the mouse is currently over.
The whole grid is basically just one big sprite (it's a very large grid and this was faster than using pre-existing components) and the highlight square is another sprite which I'm trying to move around according to the mouse position.
So, what I have is a MouseEvent.MOUSE_MOVE handler attached to the grid sprite and this tries to determine where the mouse is and what square it's over so that it can move the highlight square to the right place. I was using localX/localY for this, but as soon as I move the highlight sprite under the mouse, these become local to the highlight and not the grid!
I was toying with stageX/Y as well, but these seemed to become pretty useless when the stage is scrolled or your component is hiding in nested display containers.
Basically, i think, you want to check the the grid components mouseX and mouseY property which will give you the mouse coordinates relative to that component. Then a little bit of maths should be able to give you what grid element you are over.
Assuming your highlight sprite is a sibling to the grid and they are both children of the main application, and you've drawn child sprites (squares) within the grid: You could add event listeners to each of the grid's square sprites. On rollover, highlight the square. Then you probably won't need to perform any translation of grid or mouse coordinates using grid.localToGlobal(new Point(targetSquare.x, targetSquare.y)) or highlightSquare.globalToLocal(grid_point).