Add/Remove overlays

[GoogleCodeExporter]

This is an enhancement:

Add or remove overlays with mouse events.

Thank you!

Original issue reported on code.google.com by domime...@gmail.com on 31 May 2011 at 2:01

[GoogleCodeExporter]

unless i'm reading this wrong, you just want to register mouse events on 
Endpoints?  that's already been put in to the 1.2.6 code.  i will mark this 
issue invalid unless i've missed something here.

Original comment by simon.po...@gmail.com on 31 May 2011 at 11:34

• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

Sorry if I was misunderstood.

I mead to add/remove overlays from a connection without having to Detach and 
Re-connect.

Original comment by domime...@gmail.com on 1 Jun 2011 at 1:40

[GoogleCodeExporter]

err whoops no i got confused with another bug.  er.  yeah.  i will do this ;)

i think i'll support a couple of methods:

removeAllOverlays()
removeOverlay(some overlay)

the trick with the removeOverlay method will of course be how is the overlay to 
delete going to be specified?  if you register overlays at connect time you 
actually don't have a handle on them, so how will we tell the connection which 
one to remove?

Original comment by simon.po...@gmail.com on 1 Jun 2011 at 1:44

[GoogleCodeExporter]

i've decided to do a 1.2.6 release with bug fixes; targeting this one for the 
release after - 1.3.0.

Original comment by simon.po...@gmail.com on 2 Jun 2011 at 4:07

• Added labels: Milestone-1.3.0

[GoogleCodeExporter]

Connection now has a removeAllOverlays method.

but i haven't done removeOverlay(..) yet, because i still don't know how you'd 
go about specifying an overlay.

one option is to remove by index.  jsPlumb adds overlays in the order you 
specify them, so you would in theory know the index of the overlay you wanted 
to remove.  the first time, that is.  if you then put it back, or removed 
something else, the indexing would get all mashed up and this would be useless. 
 so i think that option is out.

a second option is that we use some kind of simple matching algorithm.  say, 
for example, this was your connect call:

jsPlumb.connect({
...
overlays: [
 "Label",
 [ "Arrow", { location:0.2 } ],
 [ "Arrow", { location:0.3 } ]
]
});

then it may be possible to support removal by matching the spec (which you 
would, in theory, reuse from the connect call so it would be fairly cohesive):

connection.removeOverlay("Label");

or, a more complex match:

connection.removeOverlay(["Arrow", {location:0.2}]);

we could add a helper method to allow you to remove a few at once:

connection.removeOverlays("Label", ["Arrow", {location:0.2}]);

yet another thing we could do is support an 'id' parameter on overlay specs, 
and this is kind of my favourite:

jsPlumb.connect({
...
overlays: [
 [ "Label", {id:"someLabel"} ],
 [ "Arrow", { location:0.2, id:"arrow one" } ],
 [ "Arrow", { location:0.3, id:"arrow two" } ]
]
});

then:

connection.removeOverlays("someLabel", "arrow one");

this for me would be the best thing.  i think i will just do this. do you have 
any thoughts?

Original comment by simon.po...@gmail.com on 1 Jul 2011 at 12:44

[GoogleCodeExporter]

um, so, to continue this monologue with myself, i have now implemented the 
removeOverlay function using the concept of an 'id' on each label.  this is in 
1.3.0-RC1 (you can see an example in the 1.3.0 qunit tests).

it works the way i suggested in the last comment:

var connection = jsPlumb.connect({
...
overlays: [
 [ "Label", {id:"someLabel"} ],
 [ "Arrow", { location:0.2, id:"arrow one" } ],
 [ "Arrow", { location:0.3, id:"arrow two" } ]
]
});

then:

connection.removeOverlays("someLabel", "arrow one");

or 

connection.removeOverlay("arrow two");

Original comment by simon.po...@gmail.com on 1 Jul 2011 at 12:58

• Changed state: Started

[GoogleCodeExporter]

Simon,

Sorry about the late reply.

This is great! I agree with your decision.

Thank you so much!

Original comment by domime...@gmail.com on 5 Jul 2011 at 4:37

[GoogleCodeExporter]

cool.  

this is in 1.3.0 beta (but not yet documented); there's a demo here:

http://jsplumb.org/jquery/1.3.0/demo.html

i should be releasing 1.3.0 very soon.

Original comment by simon.po...@gmail.com on 5 Jul 2011 at 11:39

[GoogleCodeExporter]

looking good!

Original comment by domime...@gmail.com on 5 Jul 2011 at 11:52

[GoogleCodeExporter]

1.3.0 was released today. marking fixed.

Original comment by simon.po...@gmail.com on 16 Jul 2011 at 12:03

• Changed state: Verified