jsPlumb removes Straight connection when calling setPaintStyle()

问题

I am using jsPlumb for a medium size project. Although the documentation is slim in terms of solid explanations, I've managed to complete the project and now I'm ready to deliver it.

Right before deliver date I've been asked to make the connection lines straight instead of curved. I thought this would be as easy as adding a keyword to the jsPlumb connect method like: jsPlumb.connect({ connector: 'Straight'... })... and it is. So what's the problem?

This project I'm working on has to allow users to "select" the connection lines so they can then press a "Remove" button to clear the connection they selected. I've allowed users to select a connection by calling jsPlumb's setPaintStyle() method like so:

// Select/Deselect each connection on click
jsPlumb.bind('click', function (connection, e) {
   e.preventDefault();

   connection.setPaintStyle({ 
      strokeStyle: 'red'
   });
});

This works as expected only when the lines are curved (jsPlumb default).

However, if the connector option in the connect() method is changed to "Straight", connection lines that are vertical (their end-points are across from each other) simply disappear when I click on them. The rest of the straight lines that don't have their end-points directly across from each other do not have this issue.

Removing the connector option altogether, or setting its value to "Bezier", or not calling the setPaintStyle() method when the option is set to "Straight", then the clicked line stays in place like is supposed to do.

Here is a jsBin example: jsPlumb setPaintStyle() with Straight lines bug

Initially I thought this was a bug in my application, but after spending a ton of time I've tracked the issue down to the setPaintStyle() method. I feel pretty confident that this is a jsPlumb bug, but I'm not totally sure. It is very frustrating at this point because the only thing that holds me back from delivering the project is the ability to change the stroke color to red. If I can complete this simple task with straight lines, then I can move forward.

I've considered to target the SVG path node myself and change the stroke color that way, but since jsPlumb uses VML for IE8 (ie8 is a requirement for this project), I am not sure that I can do that. Any suggestions?

回答1:

For others out there that might come across this frustrating jsPlumb bug. After spending my whole Saturday looking for a fix, finally I found a way around this.

Instead of using the setPaintStyle() method to change the stroke-color, I actually used a combination of the getPaintStyle() and repaint() methods. Here is a fixed jsBin example: http://jsbin.com/ogekot/7/edit

jsPlumb.bind('click', function (connection, e) {
   e.preventDefault();

   connection.getPaintStyle().strokeStyle = '#CE322A';
   connection.repaint()
});

来源：https://stackoverflow.com/questions/15452943/jsplumb-removes-straight-connection-when-calling-setpaintstyle

标签

javascript

jquery

canvas

svg

jsplumb