jetersu / jsplumb Goto Github PK

Some implementations using jsPlumb would like for the position of connection 
endpoints (known in jsPlumb as 'Anchors') to dynamically change depending on 
the orientation of the two elements in the connection - say you have Element1 
sitting to the left of Element2, for instance, and you plumb it with a 
RightMiddle to LeftMiddle connection, then you move Element1 so it is now on 
the right hand side of Element2.  A 'dynamic' Anchor would switch so it was 
LeftMiddle of Element1 and RightMiddle of Element2.  

This particular scenario is actually one instance of the generic case in which 
a suitable Anchor is selected from some list, with the criterion being that we 
want the Anchor that is closest to the other element in the Connection. In this 
example there are two Anchors to choose from, but perhaps the most useful case 
for people would be the one in which the Anchor can be situated at LeftMiddle, 
TopCenter, RightMiddle or BottomCenter.  

the solution should support arbitrary lists of Anchors but allow a user to 
select a simple scenario with very little effort.

go to the draggableConnectors demo (jQuery or MooTools) and drag a yellow 
connector from window one to window two.  now drag it off window two and attach 
it to window 3.  jsPlumb erroneously reports that there are two connections.  
seems it has been added again despite being an existing connection.

original screen (in jsPlumb demos)
http://dl.dropbox.com/u/1383480/work/original.png

print preview
http://dl.dropbox.com/u/1383480/work/preview.png

When 
 A connected to B and
 B connected to A
In real world (my case: flow graphs) it is common situation.

AutoDefault anchor selects same port for both connections
and connections overlap (drawn as one)

What steps will reproduce the problem?
1. Create test HTML with NO jQuery.UI
2. Run it in browser (Chrome)
3. Observe error in JS console: 
Uncaught TypeError: Object #<an Object> has no method 'draggable'

Please provide any additional information below.

    var draggable = params.draggable == null ? true : params.draggable;

Is this string correct? I have params.draggable = undefined here

In our AJAX app we saw hundreds of error messages "target is undefined" in this 
line:  

 for (var i = 0; i < target.length; i++) 

of function "$.fn.detach = function(target)"

An undefined check fixes this problem:

  $.fn.detach = function(target) {
      return this.each(function() 
      {
         var id = $(this).attr("id");
         if (typeof target == 'string') target = [target];
         if (typeof target === 'undefined') {}
         else
         {
            for (var i = 0; i < target.length; i++)
                 jsPlumb.detach(id, target[i]);
         }
      });     
  };

What steps will reproduce the problem?
1. look at the MooTools dragAnim demo
2. press 'remove all connections' 
3. observe failure.

What is the expected output? success. What do you see instead? failure.


Please use labels and text to provide additional information.

this was requested by someone and seems like it could be useful.  targeted for 
release 1.1.1.

What steps will reproduce the problem?
1. Load the scenario-loopback_Connector-Django.html file into FF.
2. See the Connector label box is clipped on the right side.

What is the expected output? What do you see instead?

I expect to see the label box not clipped.  It's clipped.

What version of the product are you using? On what operating system?

v1.2.4, XP Pro 2002 SP3

Please provide any additional information below.

This mostly happens with nearly horizontal Connectors, and in particularily 
narrow angular ranges otherwise, i.e., only between 6:30-7:30 o'clock.

when I try to use jsPlumb in Internet Explorer beta 
and set document mode to 'edge'
library complains about lack of g_vml_manager

my suggestions
perhaps you should check browser version too
and get rid of 
    var ie = (/MSIE/.test(navigator.userAgent) && !window.opera) everywhere

-var ie = (/MSIE/.test(navigator.userAgent) && !window.opera);  
+var useVML = $.browser.msie && $.browser.version.substr(0,1)<9

or, alternatively, you can use some hasNativeCanvasSupport() function from 
http://stackoverflow.com/questions/2745432/best-way-to-detect-that-html5-canvas-
is-not-supported

Hi, Simon!

I am using you library to visualize something like task flow 
http://dl.dropbox.com/u/1383480/work/2010-10-20_120556.png
As you can see sometimes labels are very long

It would be nice if labels can be drawn in multiple lines
 when they contain '\n' characters

maybe this will give you a clue how to render text in multiple lines
http://gist.github.com/366054

When a draggable initialized with jsPlumb.draggable() is dragged, the class 
jsPlumb_dragged is added, but when the drag stops the class remains.

I mainly use the 'currently dragging' for z-index manipulation, so the 
jsPlumb_dragged is useless unless it is toggled off.

Also, a very useful addition would be to add a class to connectors and 
endpoints affected by a drag, until now I achieved this with the drag start and 
stop callbacks, but imo it should be built in jsPlumb.

What steps will reproduce the problem?
1. Load the scenario-loopback_Connector-Django.html file into FF.
2. Move the "page_7" box slightly to the left.
3. See the Connector that used to connect to "page_8" suddenly 
   connect to "page_7".

What is the expected output? What do you see instead?

I expected the Connector to not move itself from "page_8" to "page_7".

What version of the product are you using? On what operating system?

v1.2.4, XP Pro 2002 SP3

Please provide any additional information below.

As you drag one box around the other, in some orientations, the Connector is 
properly displayed, and not in others.  I.e., it seems to mostly dislike 2 
o'clock to 5 o'clock, and is fine in other quadrants.

Hi everyone, i open this ticket to share an issue i discovered, i'm not sure if 
it's the library or the usage i'm doing of it which is the problem.
I invite you to go to http://91.121.95.57/jsplumb/jsplumb.php to check the 
problem.
1/ Link option 1 to choice 1
2/ Pick option 1 again and drag it to choice 2

You see? The Two end points are now connected and it's not what i want. I can't 
determined if it's something i'm not doing right.

Version is 1.2.1-all running on jQuery. Hope it's helpfull.

I tried to use the jquery.ui sortable instead of the draggable supported 
behavior but it gets nuts.
Is there a workaround for it ?

it would be a nice feature if jsPlumb supported labelling of connections.  this 
enhancement will cover that addition.  it just needs a little more 
information...

I found 2 places where the window 'jsPlumb' is used that would break Endpoints 
if we use a different instance of jsPlumb:

In jsPlumb-1.2.3-RC1.js:

Line 875 : add a _currentInstance.Defaults.Container before reading 
jsPlumb.Defaults.Container 

Line 1367: this.addEndpoint instead of jsPlumb.addEndpoint

I'm using the 2.2 version for jQuery and when an draggable endpoint is rendered 
his position on the page is not correct. The weird part is that the item is 
correctly repositionned after dragging it.
Here is a screenshot which will be much more explicit.
http://img806.imageshack.us/img806/3164/renderissue.jpg

I guess it's css related but i don't know how to fix that, suggestions are 
welcome.
Thanks.

this feature request was split out from issue 42 :

-----------------------------
Also, a very useful addition would be to add a class to connectors and 
endpoints affected by a drag, until now I achieved this with the drag start and 
stop callbacks, but imo it should be built in jsPlumb.
----------------------------

it's time for a performance review.  many things have been added in the last 
couple of releases and i have the feeling that some calls are being 
unecessarily duplicated.

first step will be to attach a profile to the key methods.

there is no API call to make an element draggable in such a way that the 
endpoints all remain attached.  currently you have to drag a connection from an 
endpoint before jsPlumb registers the drag listener.

calling $(someElement).draggable(...) does not work because jsPlumb is not 
aware of the call and therefore cannot register the interceptors it needs.

so we need an api call like this:

jsPlumb.draggable(element, dragOptions)

when you drags block 'too fast' connection line detaches from correct endpoint
(see screenshot in the attache)

if you drag block a 'little slowly' connection line moves to right place

If there are more endpoints added via addEndpoint and anchor =
jsPlumb.Anchors.BottomCenter, every anchor is drawn at the same
position (bottom center).
It would be useful if the points are automatically drawn at
different positions with a speficied spacing of X px, respectively
equally distributed over (width - N) px.

Like this:

|___x___|

|__x_x__|

|_x_x_x_|

What steps will reproduce the problem?
1. Create two windows with RightMiddle and BottomCenter for example, anchors
2. Observe wrong bezier



patch in _findControlPoint do the trick, see 3rd attachment :)

What steps will reproduce the problem?
1. Div with two endpoints/anchors, with one dragged connection on each
2. jsPlumb.detachAll(id of div);
3. Connections clear but the anchors are not draggable anymore most of the 
time, if I drag the parent div sometime the endpoints will respond to drag 
events.

I have also tried to get the end points by uuid and clear the connections like 
this:
var te = jsPlumb.getEndpoint(me.selected_object_id + '_top');
te.detachAll();
var be = jsPlumb.getEndpoint(me.selected_object_id + '_bottom');
be.detachAll();
jsPlumb.repaintEverything();

but not only are the endpoints not draggable but also the bezier connecting 
lines are orphaned and stay drawn on the canvas.



What version of the product are you using? On what operating system?
1.2.2 ad 1.2.3
jQuery 1.4

Hi Simon!
You work is working well, but I have one isse

There is a top toolbar and flowchart div on the page.
Buttons on toolbar are floating buttons and aligned to right.
To force toolbar div height match it contents height I used 
jQuery 'ui-helper-clearfix' css fixer on toolbar.
After that every connection endpoint is shifted to the top

reproducible at least in IE8 and Chrome
see the attaches

Additional information:
same issue when I try to use

<div style="clear: both;"></div>

after last button instead of css trick

I am using the basic example of connecting 2 divs on my page.

jsPlumb.connect({source:'window1', target:'window2'});  //This connects in the 
#sidebar area 

The issue Im having is trying to target a div within another div. For example 
how would I connect two divs that are {source: #canvas #window1, target: 
#canvas #window2}

jsPlumb.connect({source:'canvas window1', target:'canvas window2'});  //but i 
want it to connect in the #canvas area

What is the expected output? What do you see instead?
I am also using jQuery draggable and droppable and I want to connect the cloned 
draggable which gets dropped into the #canvas from the #sidebar. Currently 
jsPlumb will only connect the original #window1 and #window2 in the #sidebar 
not the #canvas. If I can target them via '#canvas #window1' then things would 
work beautifully.  


What version of the product are you using? On what operating system?
1.2 - Mac and PC

Using very light JS set:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.jsPlumb-1.0.1.js"></script>

$( some ).plumb( {
       target: $( this ),
} )

gaves no error, but works vbery strange - seems connectors connects target 
with itself.

Also looks like repaint on resize doesn't works

Environment:
jsPlumb 1.2.3
jsPlumb.Container = 'window';

CSS:
#window {
position:relative;
overflow:scroll;
}

window is positioned in the lower right portion of the browser window.

On all endpoints the offset is calculated correctly but it's not calculated 
right when positioning the canvas for the bezier curve ONLY during dragging 
operation. Once the connector snaps to an endpoint the canvas for the curve is 
positioned correctly.

Note: this used to work correctly in 1.2.3 RC1

Hi again, Simon!

just want to replace that 'I' thing with crosshair cursor when dragging div 
as far as I can see, current implmentation fo jQuery ignores this option

-var lines = labelText.split(/\n|\r\n/));
+var lines = labelText.split(/\n|\r\n/);

jsplumb dragging should support the touch events in jquery mobile.  targeted 
for 1.2.4.

Me again, experimenting container stuff :)

I found out that the 2 mentioned functions forget to pass the Endpoint 
container when they call _removeElement, resulting in undead Endpoints.

Adding the container as the second argument of _removeElement fixed this issue.

When a connection is detached via dragging, the event data will have as 
sourceEndpoint the draggable endpoint instead of the previously connected 
endpoint.

I managed to fix this issue by moving the snippet line 1201 to 1207 just before 
the 'if' line 1199 (in the file jquery.jsPlumb-1.2.3-all.js).

When you need to detach a connection from an endpoint using jsPlumb.detach, 
depending on the type of parameters you passed the connection canvas is not 
destroyed. 

Tracing the function calls showed that Endpoint.detach is called, and it does 
not handle the connection removal. But I also remarked that Endpoint.detach is 
sometimes used in a case where we want to keep the connection, like dragging 
contexts. 

The jsPlumb.removeEveryEndpoint and removeEndpoint functions do not delete 
connectors also.

A lot of duplicated code is there in the previous mentioned functions, 
reorganizing it in these areas can solve the issue.

What steps will reproduce the problem?
1. Create a div element with non-alphanumeric characters (ie. 
id="addressBookList[0].id")
2. Try to add an anchor to that element

What is the expected output? What do you see instead?
An anchor is expected. Depending on whether the element or its id is specified, 
it may or may not be draw. However down the line, when other methods are called 
(ie. repaintEverything) that reference the getElementObject object fails.

From jQuery docs: http://api.jquery.com/category/selectors/

If you wish to use any of the meta-characters (#;&,.+*~':"!^$[]()=>|/@ ) as a 
literal part of a name, you must escape the character with two backslashes: \\.

This can be done programmatically in jsPlumb's code as follow...

getElementObject : function(el) {
                        el = el.replace(/(\[|\]|\.)/g, '\\\\$1');
            return typeof(el)=='string' ? $("#" + el) : $(el);
        }

The above will escape ".", "[", "]" -- but the regex should be expanded to esc. 
everything.

jsPlumb should post events when a new connection has been made. the event 
callback should be passed the source and target Endpoints from the connection, 
and possibly the source and target elements, although this information can 
actually be retrieved from Endpoints.


this requirement was raised in issue 13.

...it actually stops connections after 1.  

fix targeted for 1.2.2.

When using the container parameter for endpoints, there seem to be several 
positioning problems:e
- The connection lines will have a wrong position
- If you use a child element(from the element on which the endpoint was added) 
as a container, the canvas object for endpoint will be miss-positioned.
- I tried to add several endpoints, each with his on child element container, 
using list elements, but the canvas are positioned wrong.

I made an example page to test all these things:
http://sepgil.square7.ch/jsplumb/test.html

this is missing from the public API right now.  targeted for 1.1.1.

It seems from the code that this is intentional, but I was wondering whether 
the following functionality could be added.

I would like to restrict the total number of connections that an endpoint can 
have attached. So if the total number of connections was specified at 1, an 
endpoint that was used as either the source or target of a connection would be 
disabled for further connections.

detach is window-specific and therefore not much use for people who are using 
the Endpoint-centric API.  this method will be useful.

On load in IE 8 the error 'Invalid argument' is seen on jquery-1.4.2.js line 
4618:

style[ name ] = value;

Which is caused by jquery-jsPlumb-1.0.3.js line 765 assuming that zIndex is 
numeric when in 
fact it is 'auto'. This patch fixes the problem:

--- a/js/jquery.jsPlumb-1.0.3.js
+++ b/js/jquery.jsPlumb-1.0.3.js
@@ -762,11 +762,11 @@ var jsPlumbConnection = function(params) {
            this.targetEndpointCanvas = newCanvas(jsPlumb.endpointClass);
            // sit them on top of the underlying element?
            if (this.endpointsOnTop) {
-                   $(this.sourceEndpointCanvas).css("zIndex", 
this.source.css("zIndex") + 1);
-                   $(this.targetEndpointCanvas).css("zIndex", 
this.target.css("zIndex") + 1);
+                   $(this.sourceEndpointCanvas).css("zIndex", 
(this.source.css("zIndex") != "auto" ? 
this.source.css("zIndex") : 0) + 
+                   $(this.targetEndpointCanvas).css("zIndex", 
(this.target.css("zIndex") != "auto" ? 
this.target.css("zIndex") : 0) + 
            } else {
-                   $(this.sourceEndpointCanvas).css("zIndex", 
this.source.css("zIndex") - 1);
-                   $(this.targetEndpointCanvas).css("zIndex", 
this.target.css("zIndex") - 1);
+                   $(this.sourceEndpointCanvas).css("zIndex", 
(this.source.css("zIndex") != "auto" ? 
this.source.css("zIndex") : 0) - 
+                   $(this.targetEndpointCanvas).css("zIndex", 
(this.target.css("zIndex") != "auto" ? 
this.target.css("zIndex") : 0) - 
            }
     }

When I try to use jsPlumb in a container different from the body element, I get 
an incorrect behavior when dragging an endpoint. 

The connector is drawn with the wrong offset, it takes the document as a 
reference where it should use its parent position (jQuery's offset() vs 
position()). Also when the drag is aborted, the connector canvas is not 
destroyed.

A page showcasing the issue can be found here:
http://sandbox.gocomplex.net/plumb/draggableConnectorsDemo.html

detach is window-specific and therefore not much use for people who are using 
the Endpoint-centric API.  this method will be useful.

detach is window-specific and therefore not much use for people who are using 
the Endpoint-centric API.  this method will be useful.

First of all, thank you for amazing library!

Ok, I want to create arrow connections using draggable connections feature. 
Maybe I should be able to specify overlay in connectorStyle

var arrowEndpoint = {
                    endpoint:new jsPlumb.Endpoints.Rectangle(),
                    style:{ width:7, height:7, fillStyle:exampleColor },
                    isSource:true,
                    scope:'blue rectangle',
                    connectorStyle : {
                        lineWidth:1,
                        strokeStyle:someColor,
                        overlays:[new jsPlumb.Overlays.Arrow()] //?
                    },
                    isTarget:true,
                };

As far as I can see current implementation doesn't support this

I am writing an extension that uses jsPlumb. The extension takes the 
connections that have been made and uses the connections to create a string 
such as "A connected to B connected to C".

To do this, I need to be able to access the connections set for each element. 
However, I can't access the endpointsByElement array because of variable scope, 
but if I add a simple getter, then I can use the array.

        getEndpointsByElement : function(el) {
        return endpointsByElement[el];
        },

Would it be possible for this to be added? Also, let me know if I'm going about 
this the wrong way.

Thank you!

setup a straight line connector from BOTTOM_CENTER of one element to
TOP_CENTER of another.  move the bottom one directly underneath the top one
- the connector disappears.

same thing can happen when LEFT_MIDDLE/RIGHT_MIDDLE anchors are close
horizontally.

this is due to the connector not checking for a minimum size when computing
the size of the canvas required to paint the connector line. 


good example here:  http://vremenno.net/examples/jsplumb/#

it would be nice if connections could be marked with arrows, to indicate 
direction or whatever.  this is a placeholder for discussions around that.

targetting 1.2.3.