jsplumb學習（一）---初識jsplumb
阿新 • • 發佈：2019-01-25
七月開始實習工作了，一來到公司就要接觸聽都沒聽過的ETL專案，唉，什麼是ETL啊？還是不管吧，作為一名開發人員，懂的開發，能完成需求就差不多了，還是認真鼓搗一下自己的程式碼吧。
接觸流程設計器這個概念就是從ETL開始的，當時公司採用的是myFlow來作為流程設計器的首要開發源庫，所以剛上手的時候也鼓搗了下myFlow.講真，myFlow確實封裝了很多方便的操作方法，但是整個專案下來，公司大牛們都覺得整體樣式不好看，於是就採用了另一個流程設計器庫jsPlumb,廢話不多說，先來看看jsPlumb到底是什麼。
基本概念：
1.anchor(錨點)
坐落在一個元素身上，用於多個元素之間相互連線的點，主要分為以下四類：
- 靜態 - 這些固定在元素上的某個點上，不能移動。可以使用字串來指定它們，以確定jsPlumb所附帶的預設值，或描述該位置的陣列
- 動態 - 這是靜態錨的列表，每次連線繪製時，jsPlumb從中選擇最合適的點。
- 周長錨 - 這些錨點符合某些給定形狀的周長。它們在本質上是動態錨，其位置從底層形狀的周邊中選擇。
- 連續錨 - 這些錨不固定在任何特定位置; 它們被分配到元素的四個面之一，這取決於該元素與關聯連線中另一個元素的方向。
聯結器是實際連線UI元素的線。jsPlumb有四個聯結器實現 - 一條直線，一個貝塞爾曲線，“流程圖”和“狀態機”。預設聯結器是Bezier曲線。
3.Endpoint(端點)
一個Endpoint模型的的外觀
認識了幾個基本概念，接下來是官方的一個例項體驗下吧！
<!doctype html> <html> <head> <title>jsPlumb - chart demonstration</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet"> <link rel="stylesheet" href="../../css/jsPlumbToolkit-defaults.css"> <link rel="stylesheet" href="../../css/main.css"> <link rel="stylesheet" href="../../css/jsPlumbToolkit-demo.css"> <link rel="stylesheet" href="demo.css"> </head> <body data-demo-id="chart" data-library="dom"> <div class="navbar navbar-top navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/"><img src="../../img/logo-medium-jsplumb.png"></a> </div> <div class="navbar-collapse collapse nav-wrapper"> <ul class="nav navbar-nav"> <li><a href="/">DEMOS</a></li> <li><a href="/doc/home.html">DOCS</a></li> <li><a href="/download">DOWNLOAD</a></li> <li><a href="http://beta.jsplumbtoolkit.com/contact.html">CONTACT</a></li> <li><a href="https://blog.jsplumbtoolkit.com">BLOG</a></li> </ul> <div class="apidoc-jsplumb-logo"><div class="container"><img src="/img/logo-docs-jsplumb.png"></div></div> <div class="social-nav hidden-xs"> <!--a href="#" class="link"><span class="icon-facebook"></span></a--> <a href="http://twitter.com/jsplumblib" class="link"><span class="icon-twitter"></span></a> <a href="http://github.com/sporritt/jsplumb/" class="link"><span class="icon-github"></span></a> <a href="http://www.linkedin.com/company/jsplumb" class="link"><span class="icon-linkedin"></span></a> </div> </div><!--/.nav-collapse --> </div> </div> <div class="jtk-demo-main"> <!-- demo --> <div class="jtk-demo-canvas canvas-wide chart-demo jtk-surface jtk-surface-nopan" id="canvas"> <div class="window" id="chartWindow1">window one</div> <div class="window" id="chartWindow2">window two</div> <div class="window" id="chartWindow3">window three</div> <div class="window" id="chartWindow4">window four</div> <div class="window" id="chartWindow5">window five</div> <div class="window" id="chartWindow6">window six</div> </div> <!-- /demo --> <!-- explanation --> <div class="description"> <h4>CHART</h4> <p>This is a simple demonstration of using jsPlumb to display hierarchical information.</p> <p>Connectors have a paintStyle of `gray` and specify an endpoint of radius 9. Each connection has an Arrow overlay indicating direction, and paints itself orange on mouse hover. </p> <p>The Bezier curve used in this demo has a 'curviness' of 50</p> </div> <!-- /explanation --> </div> <!-- JS --> <!-- support lib for bezier stuff --> <script src="../../lib/jsBezier-0.8.js"></script> <!-- event adapter --> <script src="../../lib/mottle-0.7.4.js"></script> <!-- geometry functions --> <script src="../../lib/biltong-0.3.js"></script> <!-- drag --> <script src="../../lib/katavorio-0.18.0.js"></script> <!-- jsplumb util --> <script src="../../src/util.js"></script> <script src="../../src/browser-util.js"></script> <!-- main jsplumb engine --> <script src="../../src/jsPlumb.js"></script> <!-- base DOM adapter --> <script src="../../src/dom-adapter.js"></script> <script src="../../src/overlay-component.js"></script> <!-- endpoint --> <script src="../../src/endpoint.js"></script> <!-- connection --> <script src="../../src/connection.js"></script> <!-- anchors --> <script src="../../src/anchors.js"></script> <!-- connectors, endpoint and overlays --> <script src="../../src/defaults.js"></script> <!-- bezier connectors --> <script src="../../src/connectors-bezier.js"></script> <!-- state machine connectors --> <script src="../../src/connectors-statemachine.js"></script> <!-- flowchart connectors --> <script src="../../src/connectors-flowchart.js"></script> <!-- straight connectors --> <script src="../../src/connectors-straight.js"></script> <!-- SVG renderer --> <script src="../../src/renderers-svg.js"></script> <!-- common adapter --> <script src="../../src/base-library-adapter.js"></script> <!-- no library jsPlumb adapter --> <script src="../../src/dom.jsPlumb.js"></script> <!-- /JS --> <!-- demo code --> <script src="demo.js"></script> <script src="../demo-list.js"></script> </body> </html>
jsPlumb.ready(function () {
var color = "gray";
var instance = jsPlumb.getInstance({
// notice the 'curviness' argument to this Bezier curve. the curves on this page are far smoother
// than the curves on the first demo, which use the default curviness value.
Connector: [ "Bezier", { curviness: 50 } ],
DragOptions: { cursor: "pointer", zIndex: 2000 },
PaintStyle: { stroke: color, strokeWidth: 2 },
EndpointStyle: { radius: 9, fill: color },
HoverPaintStyle: {stroke: "#ec9f2e" },
EndpointHoverStyle: {fill: "#ec9f2e" },
Container: "canvas"
});
// suspend drawing and initialise.
instance.batch(function () {
// declare some common values:
var arrowCommon = { foldback: 0.7, fill: color, width: 14 },
// use three-arg spec to create two different arrows with the common values:
overlays = [
[ "Arrow", { location: 0.7 }, arrowCommon ],
[ "Arrow", { location: 0.3, direction: -1 }, arrowCommon ]
];
// add endpoints, giving them a UUID.
// you DO NOT NEED to use this method. You can use your library's selector method.
// the jsPlumb demos use it so that the code can be shared between all three libraries.
var windows = jsPlumb.getSelector(".chart-demo .window");
for (var i = 0; i < windows.length; i++) {
instance.addEndpoint(windows[i], {
uuid: windows[i].getAttribute("id") + "-bottom",
anchor: "Bottom",
maxConnections: -1
});
instance.addEndpoint(windows[i], {
uuid: windows[i].getAttribute("id") + "-top",
anchor: "Top",
maxConnections: -1
});
}
debugger;
var conn = instance.connect({uuids: ["chartWindow3-bottom", "chartWindow6-top" ], overlays: overlays, detachable: true, reattach: true});
instance.connect({uuids: ["chartWindow1-bottom", "chartWindow2-top" ], });
instance.connect({uuids: ["chartWindow1-bottom", "chartWindow3-top" ], overlays: overlays});
instance.connect({uuids: ["chartWindow2-bottom", "chartWindow4-top" ], overlays: overlays});
instance.connect({uuids: ["chartWindow2-bottom", "chartWindow5-top" ], overlays: overlays});
instance.draggable(windows);
});
jsPlumb.fire("jsPlumbDemoLoaded", instance);
});.demo {
/* for IE10+ touch devices */
touch-action:none;
}
/** ELEMENTS **/
.chart-demo .window {
border:0.1em dotted #d4e06b;
width:14em; height:4em;
line-height:4em;
}
/** HOVER EFFECTS **/
.chart-demo .window:hover, .chart-demo .window.jtk-source-hover, .chart-demo .window.jtk-target-hover {
border:1px solid orange;
color:orange;
}
/** ELEMENT POSITIONS **/
#chartWindow1 { left:20em; top:6em;}
#chartWindow2 { left:10em;top:18em;}
#chartWindow3 { left:40em;top:18em;}
#chartWindow4 { left:4em;top:30em;}
#chartWindow5 { left:22em;top:30em;}
#chartWindow6 { left:47em;top:30em;}
#chartWindow7 { top:18em;left:46em;}
#chartWindow8 { left:63em;top:38em;}
.window {
background-color:white;
border:1px solid #346789;
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;
-moz-border-radius:0.5em;
border-radius:0.5em;
position:absolute;
color:black;
padding:0.5em;
width:80px;
height:80px;
line-height: 80px;
-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;
}
path, .jtk-endpoint { cursor:pointer; }
感覺效果挺不錯的，實現也挺簡單，今天就先這樣，接下來就設計一個設計器。
整個流程設計器的實現已在github中，有興趣可以先看看https://github.com/oOKevinOo/myJsplumb