JsPlumb - drop Icon with Endpoints on already existing Connector line - javascript

The desired behaviour is that on drop on connector - we want to have this icon connected with Endpoints of others two Icons.
I don't think that there is a build solution for such behaviour in jsPlumb, but maybe I'm wrong. I see oportunity to make it programically.
At first I thought about mouseup event from documentation.
It doesn't work since actually I mouseup on this orange icon HTML element. The conector is underneath. If there is no way to have this event - also the full detail of area of connector would be helpful.

Related

On moving a table in JointJs graph, links are not moving with it..They are getting disconnected and only table is moving. How can I correct it?

In Joint Js graph , links are getting disconnected on moving the tables ? What might be the issue ? How can I correct it. I have shared the link.Please go through it. You will understand what I am saying.
https://resources.jointjs.com/demos/database
This behavior is by design. The demo uses a custom Anchor to change the point of the anchor depending on the position.
If you want to change this behavior you can edit the custom router or make your own.
If you want to remove this behavior, you can remove the defaultAnchor and anchorNamespace options from the JointJS paper. That means it will use the JointJS defaults instead of the custom Anchor.
Although removing these options could make the functionality less desirable in this demo.

D3.JS treemap inconsistent zoom behavior

I'm trying to do a menu of sorts with a d3.js treemap. It mostly works, but I'm having a few glitches that I can't pinpoint.
Basically, sometimes my chart doesn't zoom correctly and instead of seeing the children take the whole SVG area, they show up "unzoomed".
I suspect it must have something to do with the animation's timing vs. some data manipulation for hiding/showing the different nodes, but can't actually figure it out. Other thing I thought might be borking up the behavior relates to the click events being registered by both "parent" and "children" nodes.
I have a similar example setup in JSBIN.
So, I was wondering how I could register/unregister click events in the parent/child nodes on zoom - if that's even the problem - and also if there was a simpler or less-error prone way to change the nodes' visibility.
Any help is welcome!
Well, this might be a bit unorthodox, but I found a way to overcome this.
Basically, instead of trying to mess around with event registering/unregistering, I simply ran the zoom only if the click wasn't from the node at the current zoom level.
So, in my zoom function, I wrapped the zoom handling in an if check:
function zoom(d) {
if(node!=d){
// the rest remains the same
}
}
Either way, I still think that this was happening due to the source elements where the click events were coming from being overlapped in the SVG area - simply put, the click event was being triggered by several overlapping elements, being the first (topmost) in the SVG tree order triggered inadvertently.
Here's a working version.
Hope this helps someone else!
EDIT: This solution isn't perfect, though. Now sometimes the click just doesn't do anything - But it's better than borking the UI. If anyone has other ideas, they're welcome.

d3.js: How to update chart with click with mouse scrubber tooltip

I'm working on updating data dynamically with a click while maintaining a mouseover scrubber to highlight (i.e. append) the data to text elements. I am able to get the initial data and scrubber to work based on this helpful tutorial: http://www.d3noob.org/2014/07/my-favourite-tooltip-method-for-line.html.
My next step was to update my data (i.e. paths and axis) based on a button click. I used this tutorial: http://www.d3noob.org/2013/02/update-d3js-data-dynamically-button.html. However, I am only able to update the paths and axis but the mouseover event is till capturing the old data.
Maybe I still haven't fully grasped the idea of enter, update, exit? Anyone know how to update the mouseover scrubber when the path elements update via the mouse click?
On D3js's website there are plenty of tutorials that explain very clearly how enter, update,and exit work. Personally I prefer this one.
Hope it helps.

oCanvas Chart onHover show data

I'm making a line chart in oCanvas, and I need to show the data of a point of the line, when the user hovers that point with his mouse! Is there like a built-in function for it do it itself, or do I have to make it myself? (I didn't find any useful info on the docs section of the website, and that's why I came here, just in case someone has done it before me and knows how to do it!). I have the data I need to display when the user hovers the point, I just can't get find a hover function. After that I need to show something like a tooltip, that's gonna contain the data. Thank you very much for your help, it is really useful to me! Here's the website: http://ocanvas.org/
oCanvas is a general purpose library, so there is no built-in feature for that. To make hover work, you need to listen to events (mouseenter and mouseleave): http://ocanvas.org/docs/Events/Mouse
When you detect mouseenter you will need to show the tooltip object in the correct position. When you later detect mouseleave you will need to hide the tooltip.

OpenLayers highlight feature on hover and select on click

I'm using OpenLayers to display a map and to provide some drawing features. I also added two SelectFeatures to the vector layer I want to draw on. One for highlighting a drawn feature by hover it and one for selecting a feature by clicking on it.
I used this example to realize this.
The problem is, that this solution doesn't really work (even in the given example).
If I draw a new feature I can highlight it by putting the cursor on it but can't select it with a click. (Same in the example, the given features work fine, but after drawing a new one the select-by-click function doesn't react anymore)
Is there any alternative solution to realize this except the official example?
This example was modified 4 months ago, editing toolbar was excluded due to described confusion.
I was able to get something like this working. You need to activate the controls in a specific order:
highlightControl.activate();
selectControl.activate();
dragControl.activate();
Hover events aren't handled by the Drag and Pan Controller, so they try the select controller, which doesn't use them either, passing them up to the highlight controller. Similarly, click events aren't handled by the drag controller, but are handled by the select controller. Finally, drag events are dealt with by the drag controller. The last to be activated is the first to be "consulted".

Categories