123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187 |
- /*
- this is the JS for the main jsPlumb demo. it is shared between the YUI, jQuery and MooTools
- demo pages.
- */
- ;(function() {
- window.jsPlumbDemo = {
-
- init : function() {
-
- jsPlumb.DefaultDragOptions = { cursor: "pointer", zIndex:2000 };
-
- var connectorStrokeColor = "rgba(50, 50, 200, 1)",
- connectorHighlightStrokeColor = "rgba(180, 180, 200, 1)",
- hoverPaintStyle = { strokeStyle:"#7ec3d9" }; // hover paint style is merged on normal style, so you
- // don't necessarily need to specify a lineWidth
-
- //
- // connect window1 to window2 with a 13 px wide olive colored Bezier, from the BottomCenter of
- // window1 to 3/4 of the way along the top edge of window2. give the connection a 1px black outline,
- // and allow the endpoint styles to derive their color and outline from the connection.
- // label it "Connection One" with a label at 0.7 of the length of the connection, and put an arrow that has a 50px
- // wide tail at a point 0.2 of the length of the connection. we use 'cssClass' and 'endpointClass' to assign
- // our own css classes, and the Label overlay has three css classes specified for it too. we also give this
- // connection a 'hoverPaintStyle', which defines the appearance when the mouse is hovering over it.
- //
- var connection1 = jsPlumb.connect({
- source:"window1",
- target:"window2",
- connector:"Bezier",
- cssClass:"c1",
- endpoint:"Blank",
- endpointClass:"c1Endpoint",
- anchors:["BottomCenter", [ 0.75, 0, 0, -1 ]],
- paintStyle:{
- lineWidth:6,
- strokeStyle:"#a7b04b",
- outlineWidth:1,
- outlineColor:"#666"
- },
- endpointStyle:{ fillStyle:"#a7b04b" },
- hoverPaintStyle:hoverPaintStyle,
- overlays : [ ["Label", {
- cssClass:"l1 component label",
- label : "Connection One",
- location:0.7,
- id:"label",
- events:{
- "click":function(label, evt) {
- alert("clicked on label for connection 1");
- }
- }
- } ],
- ["Arrow", {
- cssClass:"l1arrow",
- location:0.5, width:30
- }]
- ]});
-
- var w23Stroke = "rgb(189,11,11)";
- var connection3 = jsPlumb.connect({
- source:"window2",
- target:"window3",
- paintStyle:{
- lineWidth:8,
- strokeStyle:w23Stroke,
- outlineColor:"#666",
- outlineWidth:1
- },
- detachable:false,
- hoverPaintStyle:hoverPaintStyle,
- anchors:[ [ 0.3 , 1, 0, 1 ], "TopCenter" ],
- endpoint:"Rectangle",
- endpointStyles:[
- { gradient : { stops:[[0, w23Stroke], [1, "#558822"]] }},
- { gradient : {stops:[[0, w23Stroke], [1, "#882255"]] }}
- ]
- });
-
- var connection2 = jsPlumb.connect({source:'window3', target:'window4',
- paintStyle:{
- lineWidth:10,
- strokeStyle:connectorStrokeColor,
- outlineColor:"#666",
- outlineWidth:1
- },
- hoverPaintStyle:hoverPaintStyle,
- anchor:"AutoDefault",
- detachable:false,
- endpointStyle:{
- gradient : {
- stops:[[0, connectorStrokeColor], [1, connectorHighlightStrokeColor]],
- offset:17.5,
- innerRadius:15
- },
- radius:35
- },
- label : function(connection) {
- var d = new Date();
- var fmt = function(n, m) { m = m || 10; return (n < m ? new Array(("" + m).length - (""+n).length + 1).join("0") : "") + n; };
- return (fmt(d.getHours()) + ":" + fmt(d.getMinutes()) + ":" + fmt(d.getSeconds())+ "." + fmt(d.getMilliseconds(), 100));
- },
- labelStyle:{
- cssClass:"component label"
- }
- });
-
- /*
- this connects window5 with window6 using a Flowchart connector that is painted green,
- with large Dot endpoints that are placed in the center of each element. there is a
- label at the default location of 0.5, and the connection is marked as not being
- detachable.
- */
- var conn4Color = "rgba(46,164,26,0.8)";
- var connection4 = jsPlumb.connect({
- source:'window5',
- target:'window6',
- connector:"Flowchart",
- anchors:["Center", "Center"],
- paintStyle:{
- lineWidth:9,
- strokeStyle:conn4Color,
- outlineColor:"#666",
- outlineWidth:1,
- joinstyle:"round"
- },
- hoverPaintStyle:hoverPaintStyle,
- detachable:false,
- endpointsOnTop:false,
- endpointStyle:{ radius:95, fillStyle:conn4Color },
- labelStyle : { cssClass:"component label" },
- label : "big\nendpoints"
- });
-
- var connection5 = jsPlumb.connect({
- source:"window4",
- target:"window5",
- anchors:["BottomRight", "TopLeft"],
- paintStyle:{
- lineWidth:7,
- strokeStyle:"rgb(131,8,135)",
- // outlineColor:"#666",
- // outlineWidth:1,
- dashstyle:"4 2",
- joinstyle:"miter"
- },
- tooltip:"This connection will appear dashed when using SVG or VML. This effect is achieved through CSS - see the accompanying stylesheet for this demo",
- hoverPaintStyle:hoverPaintStyle,
- endpoint:["Image", {url:"../../img/endpointTest1.png"}],
- connector:"Straight",
- endpointsOnTop:true,
- overlays:[ ["Label", {
- cssClass:"component label",
- label : "4 - 5",
- location:0.3
- }],
- "Arrow"
-
- ]});
-
- var stateMachineConnector = {
- connector:"StateMachine",
- paintStyle:{lineWidth:3,strokeStyle:"#056"},
- hoverPaintStyle:{strokeStyle:"#dbe300"},
- endpoint:"Blank",
- anchor:"Continuous",
- overlays:[ ["PlainArrow", {location:1, width:20, length:12} ]]
- };
-
- jsPlumb.connect({
- source:"window3",
- target:"window7"
- }, stateMachineConnector);
-
- jsPlumb.connect({
- source:"window7",
- target:"window3"
- }, stateMachineConnector);
-
- jsPlumb.bind("dblclick", function(connection, originalEvent) { alert("double click on connection from " + connection.sourceId + " to " + connection.targetId); });
- jsPlumb.bind("endpointClick", function(endpoint, originalEvent) { alert("click on endpoint on element " + endpoint.elementId); });
-
- jsPlumb.draggable(jsPlumb.getSelector(".window"));
- }
- };
- })();
|