jsPlumb Demo源码分析

2022-06-21 02:41:14

html 代码：

<!doctype html>
<html>
    <head>

        <title>jsPlumb 1.5.2 demo - jQuery</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  
  <link rel="stylesheet" href="demo.css">
    </head>
    <body>
   <div id="main">
   <div id="render"></div>
            <div class="component window" id="window1"><strong>Window 1</strong></div>
            <div class="component window" id="window2"><strong>Window 2</strong></div>
            <div class="component window" id="window3"><strong>Window 3</strong></div>
            <div class="component window" id="window4"><strong>Window 4</strong></div>
            <div class="component window" id="window5"><strong>Window 5</strong></div>
            <div class="component window" id="window6"><strong>Window 6</strong></div>
            <div class="component window" id="window7"><strong>Window 7</strong></div>
        </div>
</body>
<script type=‘text/javascript‘ src=‘C:/Users/qiaoqiao.li/Desktop/msm/jquery-1.9.0-min.js‘></script>
<script type=‘text/javascript‘ src=‘C:/Users/qiaoqiao.li/Desktop/msm/jquery-ui-1.9.2-min.js‘></script>
<script type=‘text/javascript‘ src=‘C:/Users/qiaoqiao.li/Desktop/msm/jquery.ui.touch-punch.min.js‘></script>
<script type=‘text/javascript‘ src=‘C:/Users/qiaoqiao.li/Desktop/msm/jquery.jsPlumb-1.5.2.js‘></script>


<script src="demo.js"></script>
</html>

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

css样式：

#window1 { top:5em;left:4em;}
#window2 { top:17em; left:49em;}
#window3 { top:31em;left:4em; }
#window4 { top:9em; left:28em;}
#window5 {top:45em;left:33em;}
#window6 {top:30em;left:64em;}
#window7 {top:52em;left:6em;}
#window8 {left:66em;top:32em;}
body {
    padding:0;
    margin:0;
    background-color:white;
    font-family:‘Open Sans‘, ‘Helvetica Neue‘, Helvetica, Arial, sans-serif;
    background-color:#eaedef;

}
@font-face {
font-family: ‘Open Sans‘;
font-style: normal;
font-weight: 400;
  src:local(‘Open Sans‘),
   local(‘OpenSans‘),
   url("OpenSans-Regular.ttf") format(‘truetype‘),
   url("OpenSans.woff") format(‘woff‘);
}

#main {
margin-top:44px;
position: relative;
font-size: 80%;
}

#render {
background-color:#fff;
}
.window{

    text-align:center;
    z-index:24;
cursor:pointer;
box-shadow: 2px 2px 19px #aaa;
   -o-box-shadow: 2px 2px 19px #aaa;
   -webkit-box-shadow: 2px 2px 19px #aaa;
   -moz-box-shadow: 2px 2px 19px #aaa;

}
.component {
border:1px solid #346789;
border-radius:0.5em;
opacity:0.8;
filter:alpha(opacity=80);
background-color:white;
color:black;
padding:0.5em;
font-size:0.8em;
}

.component:hover {
    border:1px solid #123456;
    box-shadow: 2px 2px 19px #444;
   -o-box-shadow: 2px 2px 19px #444;
   -webkit-box-shadow: 2px 2px 19px #444;
   -moz-box-shadow: 2px 2px 19px #fff;
    opacity:0.9;
    filter:alpha(opacity=90);
}

.window {
    background-color:white;
    border:1px solid #346789;
    box-shadow: 2px 2px 19px #e0e0e0;
    -o-box-shadow: 2px 2px 19px #e0e0e0;
    -webkit-box-shadow: 2px 2px 19px #e0e0e0;
    -moz-box-shadow: 2px 2px 19px #e0e0e0;
    -moz-border-radius:0.5em;
    border-radius:0.5em;
    width:5em; height:5em;
    position:absolute;
    color:black;
    padding:0.5em;
    width:8em;
    height:8em;
    line-height: 8em;
    font-size:0.8em;
    -webkit-transition: -webkit-box-shadow 0.15s ease-in;
    -moz-transition: -moz-box-shadow 0.15s ease-in;
    -o-transition: -o-box-shadow 0.15s ease-in;
    transition: box-shadow 0.15s ease-in;
}

.window:hover {
    border:1px solid #123456;
    box-shadow: 2px 2px 19px #444;
   -o-box-shadow: 2px 2px 19px #444;
   -webkit-box-shadow: 2px 2px 19px #444;
   -moz-box-shadow: 2px 2px 19px #fff;
    opacity:0.9;
    filter:alpha(opacity=90);
}

.window a {
    font-family:helvetica;
}
._jsPlumb_drag_select * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none
}
/** Z-INDEX **/

._jsPlumb_connector { z-index:18; }
._jsPlumb_endpoint { z-index:19; }
._jsPlumb_overlay { z-index:20; }
._jsPlumb_connector._jsPlumb_hover {
    z-index:21 !important;
}
._jsPlumb_endpoint._jsPlumb_hover {
    z-index:22 !important;
}
._jsPlumb_overlay._jsPlumb_hover {
    z-index:23 !important;
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

js代码：

jsPlumb.bind("ready", function() {

window.jsPlumbDemo = {

  init : function() {

   jsPlumb.importDefaults({
    DragOptions : { cursor: "pointer", zIndex:2000 },
    HoverClass:"connector-hover"
   });

   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",
    //连接器采用Bezier曲线，还有直线和流程图连线
    connector:["Bezier", { curviness:70 }],
    //样式
      cssClass:"c1",
    //端点类型，点对点（Dot Endpoint ）,矩形端点(Rectangle Endpoint).图片端点(Image Endpoint)
    //blank端点类型为空
      endpoint:"Blank",
      endpointClass:"c1Endpoint",
    //anchors锚（动态锚，静态锚）,[x,y,dx,dy];x,y的区间为[0,1]意思为锚的位置;dx,dy的区间为[-1,1]意思为曲线的方向
      anchors:["BottomCenter", [ 0.75, 0, 0, -1 ]],
    //连接线的样式
      paintStyle:{
     //连接线的宽度，int值
     lineWidth:6,
     //连接器的颜色
     strokeStyle:"#a7b04b",
     //连接器或端点的轮廓宽度
     outlineWidth:1,
     //连接器或端点的颜色
     outlineColor:"#666"
    },
    //fillStyle:定义Endpoint的颜色
    endpointStyle:{ fillStyle:"#a7b04b" },
    //连接线悬浮样式
      hoverPaintStyle:hoverPaintStyle,
    //覆盖物类型，四个值Arrow可配置的箭头（可折回），Label点的连接器上可配置的标签，PlainArrow一个三角形的箭头，不可折回，Diamond钻石
      overlays : [
     //连接器上配置的label
     ["Label", {
      cssClass:"l1 component label",
      //显示的label
      label : "Connection One",
      //连接器的位置
      location:0.7,
      id:"label",
      //点击事件
      events:{
       "click":function(label, evt) {
        alert("clicked on label for connection " + label.component.id);
       }
      }
     }],
     //连接器上配置的箭头
     ["Arrow", {
      cssClass:"l1arrow",
      location:0.5, width:20,length:20,
      //点击事件
      events:{
       "click":function(arrow, evt) {
        alert("clicked on arrow for connection " + arrow.component.id);
       }
      }
     }]
    ]
   });


         var w23Stroke = "rgb(189,11,11)";
         var connection3 = jsPlumb.connect({
    source:"window2",
    target:"window3",
    //连接线的样式
    paintStyle:{
    //连接线的宽度，int值
     lineWidth:8,
     //连接器的颜色
     strokeStyle:w23Stroke,
     outlineColor:"#666",
     outlineWidth:1
    },
    detachable:false,
    //连接线悬浮样式
    hoverPaintStyle:hoverPaintStyle,
    //锚
    anchors:[ [ 0.3 , 1, 0, 1 ], "TopCenter" ],
    //端点类型
    endpoint:"Rectangle",
    endpointStyles:[
     //gradient渐变，Linear线条渐变和radial半径渐变两种
     { 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显示时间
    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‘,
    //连接器采用流程图连线，cornerRadius流程图线在折线处为圆角
    connector:[ "Flowchart", { cornerRadius:10 } ],
    //锚，连接器在两个window连接的位置
    anchors:["Center", "Center"],
    //连接线样式
    paintStyle:{
     lineWidth:9,
     strokeStyle:conn4Color,
     outlineColor:"#666",
     outlineWidth:2,
     joinstyle:"round"
    },
    //鼠标悬浮连接线样式
    hoverPaintStyle:hoverPaintStyle,
    detachable:false,
    endpointsOnTop:false,
    //端点样式
    endpointStyle:{ radius:65, 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"
    },
    //鼠标悬浮样式
    hoverPaintStyle:hoverPaintStyle,
    //端点类型为图片
    endpoint:["Image", {url:"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:15, length:12} ]]
   };

   jsPlumb.connect({
    source:"window3",
    target:"window7"
   }, stateMachineConnector);

   jsPlumb.connect({
    source:"window7",
    target:"window3"
   }, stateMachineConnector);

   // jsplumb event handlers

   // double click on any connection
   jsPlumb.bind("dblclick", function(connection, originalEvent) { alert("double click on connection from " + connection.sourceId + " to " + connection.targetId); });
   // single click on any endpoint
   jsPlumb.bind("endpointClick", function(endpoint, originalEvent) { alert("click on endpoint on element " + endpoint.elementId); });
   // context menu (right click) on any component.
   jsPlumb.bind("contextmenu", function(component, originalEvent) {
                alert("context menu on component " + component.id);
                originalEvent.preventDefault();
                return false;
            });

   // make all .window divs draggable. note that here i am just using a convenience method - getSelector -
   // that enables me to reuse this code across all three libraries. In your own usage of jsPlumb you can use
   // your library‘s selector method - "$" for jQuery, "$$" for MooTools, "Y.all" for YUI3.
   jsPlumb.draggable(jsPlumb.getSelector(".window"), { containment:".demo"});

   jsPlumb.bind("click", function(c) {
    var p = $(c.canvas).find("path"),
     l = p[0].getTotalLength(),
     i = l, d = -10, s = 150,
     att = function(a, v) {
      for (var i = 0; i < p.length; i++)
       p[i].setAttribute(a, v);
     },
     tick = function() {
      if (i > 0) {
       i += d;
       att("stroke-dashoffset", i);
       window.setTimeout(tick, s);
      }
     };
    att("stroke-dasharray", l + " " + l);
    tick();

});

}
};

// render mode
var resetRenderMode = function(desiredMode) {
  var newMode = jsPlumb.setRenderMode(desiredMode);

  jsPlumbDemo.init();
};
resetRenderMode(jsPlumb.SVG);

});

jsPlumb Demo源码分析,布布扣,bubuko.com

jsPlumb Demo源码分析

码农公寓

相关文章