Source Endpoint placed incorrectly

[Henrik Skov]

Hi !

Can anybody help me on this strange issue that I am having.?

To reproduce/explain:

1. Navigate to http://www.overdrive.co.za/mapgame/
2. Click Play
3. Click 9 times at random positions on the map - Each click will place an icon at the position clicked.
4. Now 9 more icons are placed on the map showing the correct locations of the cities
4. Now JsPlumb should connect the icons that is the right position to the corresponding wrong position. So, if you were asked to place Amsterdam on the map, the icon inserted on the map as you click where you think Amsterdam is, should be connected to the icon showing the correct location of Amsterdam.

The problem I am having is that the source endpoint of all 9 connections go from just below the top left corner of the map and to the correct target (where Amsterdam actually is), but the source is placed incorrectly.

I am using jsPlumb 1.4.1

Thanks !

/Henrik

[Simon Porritt]

It seems to work for me, in Chrome at least. Maybe you can supply a screenshot of where its going wrong?

[Henrik Skov]

Hi Simon.

Thank you for your reply.

Please see the screenshot below. This is in chrome. I have added 2 lines by hand (using mspaint) - The blue line is an example of the wrong connection done by jsPlumb. And the red line is the connection that should have been made instead of the blue line.

The problem is in Firefox also


/Henrik

Den 10-01-2014 22:40, Simon Porritt skrev:

It seems to work for me, in Chrome at least. Maybe you can supply a screenshot of where its going wrong?

--
You received this message because you are subscribed to a topic in the Google Groups "jsPlumb" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jsplumb/uADfZl9mWkE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jsplumb+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Simon Porritt]

this is what it looks like for me, in chrome on a mac:

have you tried jsPlumb.repaintEverything() after you do the connections?

[Henrik Skov]

Hi Simon !

I will try that repaintEverything() call tonight
By the way, the screendump was on Win7 (FF + Chrome)
Now I updated to version 31 of Chromr on Win8 and the problem is not there...


/Henrik

--

[Simon Porritt]

I noticed that IE11 on Win7 had the same problem, actually, but repaintEverything didn’t fix it for me. You may want to upgrade to jsPlumb 1.5.5 in case it’s an old bug or something.

[Henrik Skov]

Hi Simon !

Calling repaintEverything() does not seem to have any effect whatsoever...

My test results so far:

Internet Explorer 11 (Win8)��� Lines are drawn correctly��� ��� ��� �� �� ��� ��� ��� ��� ��� � ��� ��� ���� (PASS)
Internet Explorer 11 (Win7)��� All lines are drawn from a top left corner point�� ��� ��� ���� (FAIL)
Firefox 26 (Win7)��� ��� ��� ��� ��� � All lines are drawn from a top left corner point�� �� ��� ��� � (FAIL)
Safari 5.1 (Win7)��� ��� ��� ��� ��� �� All lines are drawn from a top left corner point��� ��� ��� ��� (FAIL)
Chrome 31 (Win8)��� ��� ��� ��� ��� Lines are drawn correctly��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� (PASS)
iOS 7��� ��� ��� ��� ��� ��� ��� ��� ��� ��� �� All lines are drawn from a top left corner point��� ��� ��� � (FAIL)
Android 4.2.2 Stock Browser�� Lines are drawn correctly on second play only�� ��� ���� ��� (FAIL)
Chome for Android��� ��� ��� ��� �� Lines are drawn correctly��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� �� (PASS)
Firefox for Android��� ��� ��� ��� ��� All lines are drawn from a top left corner point��� ��� � ��� (FAIL)
Chrome 32 (Win7)��� ��� ��� ���� ��� All lines are drawn from a top left corner point��� ��� ��� � (FAIL)
Firefox 26 (Win8)��� ��� ��� ��� ��� �� Lines are drawn correctly��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� �� � � (PASS)


I don't know what to conclude from these results. It appears that some common library (SVG? )
contains some kind of bug in my Win7 ???


This is the function that calls connect():


function draw_arrows() {

������� setTimeout(
��������������� function()
��������������� {
����������������������� $('.pin_outer_question').each(function()
����������������������� {
������������������������������� var answer = $(this).attr('id');
������������������������������� var varName���� = "sta" + answer;

������������������������������� this[varName] = jsPlumb.getInstance();

������������������������������� var url = window.location.toString();
������������������������������� var frameid = parent.getUrlParts(url)['frameid'];
������������������������������� var zoom = parent.gamemanager_getZoomFactor(document, frameid);
������������������������������� this[varName].setZoom( zoom );��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� // Don't know if this has side effects
��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� // It is used since the IFRAME containing the game has its contents
��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� // scaled to fit the screen dimensions (using CSS3 scale() )

������������������������������� this[varName].connect(
������������������������������� {
��������������������������������������� source:answer,��� ��� ��� ��� �� �� ��� �� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� // The source is an absolutely positioned div containing an image
��������������������������������������� target:'answer_'+answer,��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� ��� // The target is an absolutely posited div contain an image
��������������������������������������� paintStyle:{lineWidth:2,strokeStyle:'rgb(255,255,255)'},
��������������������������������������� maxConnections: 1,
��������������������������������������� anchor:[ 0.5, 0.89, 0, 1 ],
��������������������������������������� endpointStyle:{radius:1},
��������������������������������������� container: "div_questions",
��������������������������������������� connector:"Straight",
��������������������������������������� overlays:[["PlainArrow", {location:0.999999, width:5, length:3} ]],
������������������������������� });
����������������������� });
����������������������� //ajax_load_answers();

����������������������� jsPlumb.getInstance().repaintEverything();��� ��� ��� // Does not seem to have an effect...
��������������� }
��������������� ,200
������� );
}


Note: The URL changed was changed to: http://dev.henrik.commutenet.dk/?id=game-map

I will try to re-test after upgrading to 1.5.5 - These results are from 1.4.1

Maybe you could test in browsers available to you and send back your results ?



/Henrik

Den 11-01-2014 21:47, Simon Porritt skrev:

I noticed that IE11 on Win7 had the same problem, actually, but repaintEverything didn�t fix it for me. You may want to upgrade to jsPlumb 1.5.5 in case it�s an old bug or something.

[Henrik Skov]

Hi Simon !

Upgrading to jsPlumb 1.5.5 didn't help.

Just to iterate my test results (saw that Google Groups don't like tabs in email so here they are again):

Internet Explorer 11 (Win7)   
All lines are drawn from a top left corner point (FAIL)

Internet Explorer 11 (Win8)   
Lines are drawn correctly (PASS)

Firefox 26 (Win7)
All lines are drawn from a top left corner point (FAIL)

Safari 5.1 (Win7)                      
All lines are drawn from a top left corner point (FAIL)

Chrome 31 (Win8)                   
Lines are drawn correctly (PASS)

iOS 7 (Safari)                                      
All lines are drawn from a top left corner point (FAIL)

Android 4.2.2 Stock Browser
Lines are drawn correctly on second play only (FAIL)

Chome for Android
Lines are drawn correctly (PASS)

Firefox for Android
All lines are drawn from a top left corner point (FAIL)

Chrome 32 (Win7)                    
All lines are drawn from a top left corner point (FAIL)

Firefox 26 (Win8)
Lines are drawn correctly (PASS)

Opera 12 (Win 7)
All lines are drawn from a top left corner point (FAIL)

Opera 12 (Win 8)
Lines are drawn correctly (PASS)


So my conclusion is that jsPlumb does not work on most browsers if using Win7 ??
Surely, that seems wrong, so maybe you could have a look at the code here:

http://dev.henrik.commutenet.dk/?id=game-map

I have been "challenged" by this behaviour/bug for more than a week, so I am getting desperate and getting to a point where I would perhaps by willing to pay for some assistance if the problem gets fixed....

Other stuff I have tried:

- Upgrading to JQUERY 1.9.1
- repaintEverything()
- Removing zoom/scale (the game zooms/scales the html element of the iframe on window resize)
- Using the container concept with a common container (and that container has position:relative) but that didn't work and messed with other stuff in the game
- Removing calls to fadeTo()

Maybe its some kind of timing issue (the game uses setTimeout() function) and because the PCs running Win7 are too slow, then endpoints do not become visible "in time" and when that happens jsPlumb just uses the point near the top left corner as an endpont (I am obviously guessing here.....)


So ideas are most welcome :)

/Henrik

Den 11-01-2014 21:47, Simon Porritt skrev:

I noticed that IE11 on Win7 had the same problem, actually, but repaintEverything didn’t fix it for me. You may want to upgrade to jsPlumb 1.5.5 in case it’s an old bug or something.

--

[Simon Porritt]

Have you tried putting a breakpoint inside the jsplumb code?  It looks like the anchors are deciding they should be located at [0,0].  Can you not put a breakpoint in and figure out why they think they should be there?

[Fredrik]

Is this resolved? 

I think I'm having the same issue :(

//Fredrik

[Simon Porritt]

Without seeing some code I'm afraid my first suggestion to you would be the same thing...set a breakpoint and have a look around.

[Fredrik]

Ok, will try to do that.

Any suggestion on where to start looking?

It seems, like you stated above, that my anchors for some reason is positioned at 0,0 (top, left).

Can it have something to do with the fact that I'm removing my element from the DOM (not with jsPlumb.remove()) and later adds it back to the DOM but at a different position?

I've tried repainting/revalidating/recalculatingOffsets but nothing works.

I can see that my endpoint elements are still there but one of them (the one that belongs to the element that is moved) has the position 0,0 now.

Thing is, I'm almost certain this has worked before which makes me believe, as Henrik pointed out, that it could be a timing issue? 

Otherwise we are much satisfied with the work you've done!

//Fredrik

[Fredrik]

Hi again,

Here is an example, which doesn't make much sense, but demonstrates my problem.

https://jsfiddle.net/pqapw0tm/6/

Drag the red square inside the dottet square and it will be removed and then placed back at its original position.

Regards

Fredrik

[Simon Porritt]

What does this illustrate?  It would appear to show an element that jsPlumb is tracking being removed from the DOM without telling jsPlumb about it (via `jsPlumb.remove`).  So it isn't surprising that the connection never gets resurrected.

[Fredrik]

Hi,

thanks for replying so fast.

This was my first suspicion also (that we never "tell" jsPlumb that the element has been removed).

I know it is a bad example but I'm trying to illustrate an example from our application where we have two elements, with a connection between them. Then we manipulate the DOM to move an element to a different position (in the DOM).

Today we only use the create connection functionality of jsPlumb (not drag&drop or DOM manipulation).

Funny thing is, when I tried to do this without knockout (which we use in our application) and only did DOM manipulation with pure jquery jsPlumb was able to "update" the connection.

If we use jsPlumb.remove is there a way to tell jsPlumb that we have added the element back? Or do we have to create a new connection all over?

//Fredrik

[Simon Porritt]

um…in the API there isn’t really a clean way of informing jsPlumb you’ve reinstated an element, no. the jsPlumb.remove method would have deleted any connections to/from a removed element anyway.

You could potentially trick it into working by ensuring that the ID of the element was unchanged, and then setting the new element as the source or target member of the Connection, whichever is appropriate. This might work but since it is outside of the API there is not really a guarantee that it would always work with subsequent releases.

This example may be getting us off track from what your real problem is. i meant to write back to your second post saying that when you see [0,0] it almost always means that jsPlumb was unable to figure out the element’s location, which generally is because the offsetLeft and offsetTop properties are not set. There are two main reasons why this would be the case: first, that the element is not actually in the DOM. Second, that the element is not currently visible. The second one perhaps seems more likely.

You can run into trouble with this when you have jsPlumb residing in a tabbed interface. If you draw into a tab that is not currently visible then everything is at [0,0]. You have to repaint everything when the tab gets made visible.

​

[Fredrik]

What you're saying makes sense!

I got my example working by calling jsPlumb.remove() when I'm moving my element. However this forces me to recreate the connection when I recreate my element in the DOM.

Although I am a bit curious why I got it to work without knockout with practically the same procedure (manipulating the DOM).
If you have time I would appreciate if you could have a look :)

Not working (with knockout): https://jsfiddle.net/pqapw0tm/10/
 

Working (with knockout):      https://jsfiddle.net/pqapw0tm/11/

Working (without knockout):  https://jsfiddle.net/pqapw0tm/12/

Regards

Fredrik

[Simon Porritt]

I'm not really sure what you're curious about here...they both make the same jsPlumb calls eventually, dont they?

there is an outstanding enhancement request that's been kicking around for ages for connections that can be dragged from somewhere and then left floating, unattached to any specific element. The question of what should happen when you remove an element feels related, to me.  Like if you have created a connection that is happy to be unattached at one end, it should really care if the element at one end of it gets deleted. it's kind of the same as it being dropped in mid air anyway. i've always considered that part of the solution to this would be some method that sets the source/target on some existing connection, so i suppose this use case of yours would make use of that.

--
You received this message because you are subscribed to the Google Groups "jsPlumb" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jsplumb+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Fredrik]

Maybe I'm not understanding it right, and please correct me if I don't, but in my opinion the different solutions don't make the same calls to jsPlumb.

Example 1: Removes the element from the DOM and places it elsewhere (with knockout binding) but doesn't call jsPlumb.remove() to tell jsPlumb that this element has been removed.

Example 2: Removes the element from the DOM and places it elsewhere (with knockout binding) and calls jsPlumb.remove() to tell jsPlumb about it. Then it creates a new connection with jsPlumb.connect(...)

Example 3: Same as example 1 but without the use of knockout. Instead the DOM manipulations is done with jQuery.

So, I can understand why Example 2 works cause it makes sense that I would need to tell jsPlumb that an element has been removed from the DOM, but I don't understand why I don't need to call jsPlumb.remove in example 3 where I practically doing the same thing but without the use of knockout.

You don't have to spend anymore time with this. As I said I'm only curious about the difference between example 1 and 3 (in a jsPlumb perspective). 

We're still going to rewrite our application to use a similiar approach as in example 2.

Thank you for your time.

Regards

Fredrik

[Simon Porritt]

oh..right…sorry i didn’t notice that you were using jQuery’s remove. The answer is that you never destroy that element so its ID is retained:

var redSquare = $("#conn_1");
            $("#conn_1").remove();
            redSquare.appendTo($("#target_div"));

when you call remove on an element what happens is that it is removed from its parentNode, and sooner or later the DOM will clean it up. But you haven’t cleared any of its attributes or anything. So when you re-append it you just put it back with the same ID and we’re all good.

​

[Fredrik]

Thanks for clarifying it for me and thank you for your time helping out!

Regards

Fredrik

​