stateMachineDemo.js #1

;(function() {
		
	window.jsPlumbDiagram = { 
	
		init :function() {
							
//			jsPlumb.Defaults.Endpoint = ["Dot", {radius:2}];
			jsPlumb.Defaults.Endpoint = "Blank";
//			jsPlumb.Defaults.HoverPaintStyle = {strokeStyle:"#42a62c", lineWidth:2 };
            jsPlumb.Defaults.PaintStyle = {lineWidth:2,strokeStyle:"black"};
			jsPlumb.Defaults.HoverPaintStyle = {strokeStyle:"#dbe300"},
			jsPlumb.Defaults.ConnectionOverlays = [
//			    ["Arrow", {location:0.1, width:10, length:10, direction:-1} ],
			    ["Arrow", {location:1, width:10, length:10} ],	
                [ "Label", { label:"Label", id:"label" }]
			];
            jsPlumb.Defaults.Anchor = "Continuous";
            jsPlumb.Defaults.Connector = "StateMachine",

            // 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.
			jsPlumbDiagram.initEndpoints("black");

//            jsPlumb.bind("jsPlumbConnection", function(conn) {
//                conn.connection.setPaintStyle({strokeStyle:nextColour()});
//                conn.connection.getOverlay("label").setLabel(conn.connection.id);
//            });

            
			//var arrowCommon = { foldback:0.7, fillStyle:"gray", width:14 };
			
//			var overlays = [
//							[ "Arrow", { location:0.7 }, arrowCommon ],
//							[ "Arrow", { location:0.3, direction:-1 }, arrowCommon ]
//						];
			
			
//			var stateMachineConnector = {				
//					connector:"StateMachine",
//					paintStyle:{lineWidth:2,strokeStyle:"#056"},
//					hoverPaintStyle:{strokeStyle:"#dbe300"},
//					endpoint:"Blank",
//					anchor:"Continuous",
////					overlays:[ ["PlainArrow", {location:1, width:20, length:12} ]]
//					overlays:[ ["Arrow", {location:0.1, width:20, length:10, direction:-1} ],
//					           ["Arrow", {location:1, width:20, length:10} ],
//					           ]
//				};
            
			jsPlumb.connect({
				source:"release",
				target:"main"});
			
			//jsPlumb.connect({source:"release", target:"main",anchor:"Continuous"});
			//jsPlumb.connect({source:"main", target:"devel",anchor:"Continuous"});

		}
	};
})();