We Keep Coding

Has anyone had any success marking ports available when dragging shapes in jointjs?

Ports have the ability to be marked as available when a link is being dragged on the paper (markAvailable documentation). I would like to have the ports displayed whenever I mousedown over a shape. Is there any easy way to do this?

Found my element on the graph, manually manipulated the attributes of said element, then reset the canvas. Kind of dirty but its working for me.

Is it possible to attach an onclick event to specific coordinates in a document?

I am wondering if it is possible to attach an onclick event to specific coordinates in a document. Maybe something similiar to "area coords" in an image map that would allow me to create a rectangular or circular area that when clicked on would execute some code. Been trying to find a solution all morning hope someone with better coding knowledge could clarify this for me.

You could attach a click event to the document itself as opposed to any specific element. The event data should contain the coordinates of the mouse at the time of the click (clientX and clientY).
Assuming no other element intercepts and cancels propagation or returns false, the event should bubble up to the document and your data will be there for you.
$(document).click(function(ev){
console.log(ev.clientX, ev.clientY)
})
That will give you the mouse pointer position in the window. If you want it to be relative to the top of the document, you'll need to do some math using the scroll position of the document.
You could also write some code to filter out clicks that do or do not fall within a given set of coordinates.

Short answer: no.
Long answer:
You could probably write a plugin to do this, but I'm just going to explain the functionality.
Basically, you bind to the click event, like usual. Be sure that the element you bind to is reachable.
Then, loop over an array of coordinates, and if the event position fell in any of the coordinates, called the associated event handler.
Edit: If it wasn't obvious, you can replace "a bunch of coordinates" with a function, or more precisely, a mathematical calculation. You could pass an equation to the handler which works with any kind of 2d shape you want.

No, not unless you have an element that occupies these coordinates. Instead, you could bind the event to whatever element occupies that coordinate space and simply check the coordinates of the click in the event object.

Drag and drop elements into an iframe. Droppable area has wrong coordinates and collisions are wrong

I need to implement drag and drop functionalities in a web application between elements present in a web page, and elements inside an iframe (before you start complaining about iframes, I NEED it for technical reasons, it's not an option).
I have elements in the page that can be dragged into target droppable elements inside an iframe.
I've managed to do it with both jQuery UI and YUI, though both libraries present the same problem: the target element (droppable target) coordinates are misinterpreted, the drop area considered by both libraries is wrong and does not represent the actual droppable object, hence the collisions between the dragged object and the dropped element are messed up entirely. It's like the library sees the droppable element positioned in another place from where it effectively is.
I think this is due to the iframe not being positioned on top-left of page, but in the middle. I think this because I've read many people complaining about this issue and the problem went off if the iframe was top-left positioned. Someone suggest that the coordinates of the droppable element may be calculated based on screenX and screenY, instead of clientX and clientY, and this may be the cause of the issue, not taking into consideration the elements are inside an iframe, and so the coordinates differ between other elements outside the iframe.
So, since it seems there's no way to fix this directly using the library functionalities, and I really don't have time to try every library avaiable out there, I'm thinking about fixing the issue by modifying (patching) the internal functions of the library in question.
The questions are:
1) Did someone experience this behavior before, and managed to fix the issue? Or, is there a library which is able to do this flawlessly?
2) Is there some way to fix this issue using the methods and functionalities of the library itself? And if not,
3) Does somebody know which part of the library calculates the droppable area coordinates, so that I can fix it as a last extreme option?
Thanks in advance, even the smallest help will be appreciated!
EDIT
This fiddle demonstrate the problem. Try to move the green square inside the red square (which is inside an iframe). You will notice the collision between the two squares is wrong.
http://jsfiddle.net/DQdZ9/23/

This is not a "silver bullet" , but I'll go ahead and post this as an answer, but I'm not sure how much value it will have for you. I tracked down a key function in jQuery UI that might be what you're looking for. It's in $.ui.ddmanager (the drag and drop manager), and the function is prepareOffsets. This line:
m[i].offset = m[i].element.offset();
seems to be the one that is setting up the offset for use when the element is actually dropped. This might be a place to fiddle with to adjust the resulting offset based on whether the droppable element is a child of the iframe.
There is another function above it $.ui.intersect that performs the logic to see if the draggable and droppable are intersecting each other.
I'm in the latest release of jQuery UI, and the file is jquery-ui-1.8.14.custom.js on line 2012-2029. If you get the single droppable file itself, jquery.ui.droppable.js, it's on lines 203-220. And these are the dev files, not the min files.

click events registering on image only when the pixel clicked isn't transparent?

Is it possible for click events to register on an image only when the pixel clicked isn't transparent?
If I have a right triangle image, only have the click event register on the actual triangle itself, rather than the whole box, half of which is empty.
Is this even possible without using <canvas>?
I'm already using jQuery in the project, if it has some way of doing this.

Not with plain html and an image.
You might be able to get away with a (relatively unsupported still afaik) css background clip, or using an (and I can't believe I'm recommending this) image map. More code-heavy options would include checking the pixel at the point clicked, but JS doesn't always have access to image data (depends on the browser) and an ajax request for the server to do this would be overkill I think. Canvas and SVG might be decent options for you, but they introduce additional dependencies that you have to be aware of that might not be worth it.
Alternately, you can create the triangle in HTML/CSS. :)

You can define an image map to go around the non-transparent part of the image and handle its clicks. And image maps do support the onclick event attribute.

How do I get clientX and clientY to work inside my "drag" event handler on Firefox?

Mozilla Firefox 3.x seems to have a bug when listening to the "ondrag" event. The event object doesn't report the position of the object being dragged, clientX, clientY, and other screen offsets are all set to zero.
This is quite problematic as I wanted to make a proxy element based on the element being dragged and using of course, clientX and clientY to adjust its position.
I know that there's cool stuff around such as setDragImage in HTML5 but I want to provide a generic abstraction for native DD between browsers.
Faulty code:
document.addEventListener('drag', function(e) {
console.log(e.clientX); // always Zero
}, false);
Note:
This problem doesn't happen on other events (dragstart, dragover) and the mousemove events cannot be captured while dragging something.

I found a solution, I've placed a listener on the "dragover" event at the document level, now I get the right X and Y properties that I can expose through a globally shared object.

The drag event in HTML 5 is not fully functional in todays browsers. To simulate a drag n drop situation you should use:
Add a onmousedown event, setting a var true.
Add a onmouseup event, setting that var false.
Add a onmousemove event, checking if that var is true, and if it is, move your div according to the coordinates.
This always worked for me. If you face any problems, get in touch again, I can provide some examples.
good luck!

I know that there's cool stuff around
such as setDragImage in HTML5 but I
want to provide a generic abstraction
for native DD between browsers.
But why do something like this, aren't there libraries like JQuery & Prototype available for cross browser drag & drop?
Or else if you want to implement a DD library of your own, you can take help of their methods or extend them, as both the libraries are following object oriented paradigm.
This will save much time.