jointjs

I am trying to create a sort of a Tool menu for every object - when you click or hover over an element, it shows several actions that could be done: delete, rotate, enlarge, link, etc. I have used this question as the guideline - and was able to add and extend the ToolElement itself, with the help of the JFiddle . However, after that I got stuck on the functionality of linking. What I want to do is the green arrow. And when I click and drag the green arrow, I want the link to start dragging from the object, just like a port, only from the object itself. I tried reading the documentation, but

I am working on a JointJS graph, using DirectedGraph to take care of the layout and I am trying to achieve something similar to the image below. I need the nodes (A, B, C, D, E, F, G, H, I, J) to be "outlined" or enclosed in a separate node (Foo, Bar, Hmm). When I add all of the elements to the graph, everything is on top of each other. However, if I do not add the vertices between the regions, all the elements are laid out correctly, but without the vertices connecting the regions. Based on the code below, what am I doing wrong? Do the nodes (A, B, C, D, E, F, G, H, I, J) cause an error

1) I'm using JointJS diagramming lib. I want to change the css of a particular inPort when using joint.shapes.devs . For linking sourcePort to the target I'm using source: { id: source.id, selector: source.getPortSelector(sourcePort)} It's giving me accurate source port, but how to apply css on this particular port after knowing it as my source connector? Is there a way? 2) Can we fit/wrap the label automatically inside the element if its width is longer than the element-width? I'm using joint.shapes.devs.Atomic element(s). I came across foreignobject but don't know how to use it? Can anyone

I want to interactively add links to my JointJS based graph. My idea is to create a small temporary node on pointerdown with a link from the original node to this temporary node, drag it on top of another node and on pointerup create the real link removing the temporary link and node. Unfortunately I don't know how to convince the pointer to move the temporary element and not the node on which the pointerdown event happened. Any idea? Thanks! var tmp_obj; paper.on('cell:pointerdown', function(cellView, evt, x, y) { if(evt.button == 1) { // Freeze the selected node so it does not move paper

I would like to add a label to a link by doing a doubleclick on the link. So this is my attempt: paper.on({ 'cell:pointerdblclick': function(cellView, event, x, y){ if (cellView.model.isLink()) { cellView.model.label(0, { position: .5, attrs: { rect: { fill: 'white' }, text: { text: 'my label' } } }); } }, }); The problem is, that by doing a doubleclick there is also a vertex beeing created at the same time. How can I prevent that? Or what would be another simple way to let users add a label for a link? As shown in the docs ( http://jointjs.com/api#joint.dia.LinkView:addVertex ) just add this