search

dugarab / jsplumb

Automatically exported from code.google.com/p/jsplumb
0 stars 0 forks source link

Label Rotate ? #350

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago 
Hello 

Does JsPlumb have an option that allows custom overlays or labels to rotate 
with the connection line ? 

Thanks ?

Original issue reported on code.google.com by ofiti...@gmail.com on 4 Feb 2014 at 8:42

csharpbd commented 4 years ago

Well, I tried to find something like that but I did not find any useful resource in jsPlumb default library. After that I work to do and made a label rotate along with the line. In order to do that, I modified the jsPlumb code.

There is a class called AbstractDOMOverlay, it has a method called draw. I used this method to make the label rotate. Simply I find the endpoints and get the position of both endpoints and find the angle. I used the angle to rotate the label.

Please check the code below for the rotating part: if($(this.getElement()).hasClass("lblTopBottomRotate")) { var x1 = this.component.endpoints[0].endpoint.x; var y1 = this.component.endpoints[0].endpoint.y; var x2 = this.component.endpoints[1].endpoint.x; var y2 = this.component.endpoints[1].endpoint.y; var a = Math.atan2(y2 - y1, x2 - x1) 180 / Math.PI; var b = Math.atan2(y1 -y2, x1 - x2) 180 / Math.PI;

                var ts = "translate(-50%, -50%)" + "rotate("+ a +"deg)";
                this.getElement().style.webkitTransform = ts;
                this.getElement().style.mozTransform = ts;
                this.getElement().style.msTransform = ts;
                this.getElement().style.oTransform = ts;
                this.getElement().style.transform = ts;
            }

I've attached the js file with a demo video of the label. I hope, this will help you. Thanks.

jsPlumb rotating label.zip