12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- ;(function() {
- var curColourIndex = 1, maxColourIndex = 24, nextColour = function() {
- var R,G,B;
- R = parseInt(128+Math.sin((curColourIndex*3+0)*1.3)*128);
- G = parseInt(128+Math.sin((curColourIndex*3+1)*1.3)*128);
- B = parseInt(128+Math.sin((curColourIndex*3+2)*1.3)*128);
- curColourIndex = curColourIndex + 1;
- if (curColourIndex > maxColourIndex) curColourIndex = 1;
- return "rgb(" + R + "," + G + "," + B + ")";
- };
-
- window.jsPlumbDemo = {
-
- init :function() {
-
- jsPlumb.Defaults.Endpoint = ["Dot", {radius:2}];
- jsPlumb.Defaults.HoverPaintStyle = {strokeStyle:"#42a62c", lineWidth:2 };
- jsPlumb.Defaults.ConnectionOverlays = [
- [ "Arrow", {
- location:1,
- id:"arrow",
- length:14,
- foldback:0.8
- } ],
- [ "Label", { label:"FOO", id:"label" }]
- ];
- // initialise draggable elements. note: jsPlumb does not do this by default from version 1.3.4 onwards.
- jsPlumb.draggable(jsPlumb.getSelector(".w"));
- // bind a click listener to each connection; the connection is deleted.
- jsPlumb.bind("click", function(c) {
- jsPlumb.detach(c);
- });
-
- // hand off to the library specific demo code here. not my ideal, but to write common code
- // is less helpful for everyone, because all developers just like to copy stuff, right?
- // make each ".ep" div a source and give it some parameters to work with. here we tell it
- // to use a Continuous anchor and the StateMachine connectors, and also we give it the
- // connector's paint style. note that in this demo the strokeStyle is dynamically generated,
- // which prevents us from just setting a jsPlumb.Defaults.PaintStyle. but that is what i
- // would recommend you do.
- jsPlumbDemo.initEndpoints(nextColour);
- jsPlumb.bind("jsPlumbConnection", function(conn) {
- conn.connection.setPaintStyle({strokeStyle:nextColour()});
- conn.connection.getOverlay("label").setLabel(conn.connection.id);
- });
- // jsPlumb.connect({source:"opened", target:"olga",anchor:"Continuous"});
- // jsPlumb.connect({source:"olga", target:"inperson",anchor:"Continuous"});
- /* jsPlumb.connect({source:"nicola", target:"inperson",anchor:"Continuous"});
- jsPlumb.connect({source:"olga", target:"nicola",anchor:"Continuous"});
- jsPlumb.connect({source:"inperson", target:"rejected",anchor:"Continuous"});*/
- }
- };
- })();
|