JSplumb 中文教程（前端自定義組件，流程圖，拓撲圖）

1. jsplumb 中文基礎教程

後續更新會在倉庫：jsplumb倉庫地址

本文的圖片是託管於七牛雲的，由於使用的是測試域名，可能不知道哪天，圖片就無法顯示了。不過每個例子都有簡單的在線demo, demo剩千圖，還是能看懂的。

1.1. 什麼是jsplumb？

你有沒有想過在你的網站上展示圖表或者甚至在瀏覽器應用程序中使用它？用jsPlumb你可以！它是完全免費的，並根據MIT許可證提供。您可以直接從jsPlumb github網站下載框架。

該項目主要由Simon Porritt開發，他在澳大利亞西德尼擔任網絡開發人員。 jsPlumb由他積極開發。作爲許多優秀的開發人員，他似乎更喜歡開發代碼而不是編寫教程，這就是爲什麼我提供一個簡單的入門教程。

1.2. jsplumb能幹什麼？

那麼如果你應該使用它取決於你想用jsPlumb做什麼。該框架適用於必須繪製圖表的Web應用程序，例如類似於Visio的應用程序或工作流程設計器等。由於圖表項目和連接的所有參數都是非常精細可控的，因此您可以繪製您可以想到的任何類型的圖表的！

1.3. 基本概念

Souce 源節點
Target 目標節點
Anchor 錨點
Endpoint 端點
Connector 連接

2. 基礎demos

2.1. 連接兩個節點
jsPlumb.ready方法和jquery的ready方法差不多的功能，jsPlumb.connect用於建立連線

<div id="diagramContainer">
    <div id="item_left" class="item"></div>
    <div id="item_right" class="item" style="margin-left:50px;"></div>
  </div>
  <script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script>

  <script>
    /* global jsPlumb */
    jsPlumb.ready(function () {
      jsPlumb.connect({
        source: 'item_left',
        target: 'item_right',
        endpoint: 'Dot'
      })
    })
  </script>

參數說明： jsPlumb.connect(config) return connection

2.2. 可拖動節點

使用draggable可以讓節點被拖動

<div id="diagramContainer">
    <div id="item_left" class="item"></div>
    <div id="item_right" class="item" style="left:150px;"></div>
  </div>
  <script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script>

  <script>
    /* global jsPlumb */
    jsPlumb.ready(function () {
      jsPlumb.connect({
        source: 'item_left',
        target: 'item_right',
        endpoint: 'Rectangle'
      })

      jsPlumb.draggable('item_left')
      jsPlumb.draggable('item_right')
    })
  </script>

2.3. 連接的其他參數

可以通過connector去設置鏈接線的形狀，如直線或者曲線之類的。anchor可以去設置錨點的位置。

jsplumb連線的樣式有四種

Bezier: 貝塞爾曲線
Flowchart: 具有90度轉折點的流程線
StateMachine: 狀態機
Straight: 直線

<div id="diagramContainer">
    <div id="item_left" class="item"></div>
    <div id="item_right" class="item" style="left:150px;"></div>
  </div>
  <script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script>

  <script>
    /* global jsPlumb */
    jsPlumb.ready(function () {
      jsPlumb.connect({
        source: 'item_left',
        target: 'item_right',
        endpoint: 'Rectangle',
        connector: ['Bezier'],
        anchor: ['Left', 'Right']
      })

      jsPlumb.draggable('item_left')
      jsPlumb.draggable('item_right')
    })
  </script>

2.4. 設置連接的默認值

很多連線都是相同設置的情況下，可以將配置抽離出來，作爲一個單獨的變量，作爲connect的第二個參數傳入。實際上connect的第二個參數會和第一個參數merge，作爲一個整體。

<script>
    /* global jsPlumb */
    jsPlumb.ready(function () {
      var common = {
        endpoint: 'Rectangle',
        connector: ['Bezier'],
        anchor: ['Left', 'Right']
      }

      jsPlumb.connect({
        source: 'item_left',
        target: 'item_right'
      }, common)

      jsPlumb.draggable('item_left')
      jsPlumb.draggable('item_right')
    })
  </script>

2.5. 給連接加上樣式

例如給連線設置不同的顏色，設置不同的粗細之類的。

jsPlumb.connect({
  source: 'item_left',
  target: 'item_right',
  paintStyle: { stroke: 'lightgray', strokeWidth: 3 },
  endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 }
}, common)

2.6. 給連接加上箭頭

箭頭實際上是通過設置overlays去設置的，可以設置箭頭的長寬以及箭頭的位置，location 0.5表示箭頭位於中間，location 1表示箭頭設置在連線末端。一根連線是可以添加多個箭頭的。

overlays也是一個比較重要的概念，overlays可以理解爲遮罩層。遮罩層不僅僅可以設置箭頭，也可以設置其他內容。

overlays有五種類型，下面給出簡介。

Arrow 一個可配置的箭頭
Label 標籤，可以在鏈接上顯示文字信息
PlainArrow 原始類型的箭頭
Diamond 菱形箭頭
Custom 自定義類型

jsPlumb.connect({
  source: 'item_left',
  target: 'item_right',
  paintStyle: { stroke: 'lightgray', strokeWidth: 3 },
  endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 },
  overlays: [ ['Arrow', { width: 12, length: 12, location: 0.5 }] ]
}, common)

2.7. 增加一個端點

addEndpoint方法可以用來增加端點

   jsPlumb.ready(function () {
      jsPlumb.addEndpoint('item_left', {
        anchors: ['Right']
      })
    })

2.8. 拖動創建連接

如果你將isSource和isTarget設置成true，那麼久可以用戶在拖動時，自動創建鏈接。


jsPlumb.ready(function () {
      jsPlumb.setContainer('diagramContainer')

      var common = {
        isSource: true,
        isTarget: true,
        connector: ['Straight']
      }

      jsPlumb.addEndpoint('item_left', {
        anchors: ['Right']
      }, common)

      jsPlumb.addEndpoint('item_right', {
        anchor: 'Left'
      }, common)

      jsPlumb.addEndpoint('item_right', {
        anchor: 'Right'
      }, common)
    })

一般來說拖動創建的鏈接，可以再次拖動，讓鏈接斷開。如果不想觸發這種行爲，可以設置。

  jsPlumb.importDefaults({
    ConnectionsDetachable: false
  })

2.9. 給端點增加樣式

通過設置各種 *Style來改變鏈接或者端點的樣式。

jsPlumb.ready(function () {
      jsPlumb.setContainer('diagramContainer')

      var common = {
        isSource: true,
        isTarget: true,
        connector: 'Straight',
        endpoint: 'Dot',
        paintStyle: {
          fill: 'white',
          outlineStroke: 'blue',
          strokeWidth: 3
        },
        hoverPaintStyle: {
          outlineStroke: 'lightblue'
        },
        connectorStyle: {
          outlineStroke: 'green',
          strokeWidth: 1
        },
        connectorHoverStyle: {
          strokeWidth: 2
        }
      }

      jsPlumb.addEndpoint('item_left', {
        anchors: ['Right']
      }, common)

      jsPlumb.addEndpoint('item_right', {
        anchor: 'Left'
      }, common)

      jsPlumb.addEndpoint('item_right', {
        anchor: 'Right'
      }, common)
    })

2.10. 限制節點拖動區域

默認情況下，節點可以被拖動到區域外邊，如果想只能在區域內拖動，需要設置containment，這樣節點只能在固定區域內移動。

jsPlumb.setContainer('id')

2.11. 給鏈接添加點擊事件：點擊刪除連線

// 請單點擊一下連接線, 
jsPlumb.bind('click', function (conn, originalEvent) {
  if (window.prompt('確定刪除所點擊的鏈接嗎？ 輸入1確定') === '1') {
    jsPlumb.detach(conn)
  }
})

jsPlumb支持許多事件

jsPlumb Events列表

connection
connection
Detached
connectionMoved
click
dblclick
endpointClick
endpointDblClick
contextmenu
beforeDrop
beforeDetach
zoom
Connection Events
Endpoint Events
Overlay Events
Unbinding Events

2.12. 刪除節點，包括節點相關的連接

// nodeId爲節點id, remove方法可以刪除節點以及和節點相關的連線
console.log('3 秒後移除左邊節點包括它的連線')
setTimeout(function () {
  jsPlumb.remove('item_left')
}, 3000)

2.13. 一個端點如何拖拽出多條連線

默認情況下，maxConnections的值是1，也就是一個端點最多隻能拉出一條連線。

你也可以設置成其他值，例如5，表示最多可以有5條連線。

如果你想不限制連線的數量，那麼可以將該值設置爲-1

var common = {
  isSource: true,
  isTarget: true,
  connector: ['Straight'],
  maxConnections: -1
}

jsPlumb.addEndpoint('item_left', {
  anchors: ['Right']
}, common)

2.14. 整個節點作爲source或者target

整個節點作爲source或者target，並且將錨點設置成Continuous，那麼錨點就會隨着節點的位置改變而改變自己的位置。

jsPlumb的錨點分爲四類

Static 靜態固定位置的錨點
Dynamic jsPlumb自動選擇合適的錨點，動態錨點
Perimeter 邊緣錨點，會根據節點形狀去改變位置
Continuous 根據節點位置，自動調整位置的錨點

 window.jsPlumb.ready(function () {
      var jsPlumb = window.jsPlumb

      jsPlumb.makeSource('A', {
        endpoint:"Dot",
        anchor: "Continuous"
      })

      jsPlumb.makeTarget('B', {
        endpoint:"Dot",
        anchor: "Continuous"
      })

      jsPlumb.draggable('A')
      jsPlumb.draggable('B')
    })

3 jsPlumb默認配置簡介

jsPlumb的配置項有很多，如果你不主動去設置，那麼jsPlumb就使用默認的配置。

另外建議你不要修改默認的配置，而是使用自定義的方式。

另外一點要注意，如果你想修改默認配置，那麼使用importDefaults方法，並且屬性的首字母要大寫。如果你用addEndpoint, 並使用類似maxConnections的屬性，那麼首字母要小寫。

var common = {
  isSource: true,
  isTarget: true,
  connector: ['Straight'],
  maxConnections: -1
}

jsPlumb.addEndpoint('item_left', {
  anchors: ['Right']
}, common)
Anchor : "BottomCenter",
Anchors : [ null, null ],
ConnectionsDetachable   : true,
ConnectionOverlays  : [],
Connector : "Bezier",
Container : null,
DoNotThrowErrors  : false,
DragOptions : { },
DropOptions : { },
Endpoint : "Dot",
Endpoints : [ null, null ],
EndpointOverlays : [ ],
EndpointStyle : { fill : "#456" },
EndpointStyles : [ null, null ],
EndpointHoverStyle : null,
EndpointHoverStyles : [ null, null ],
HoverPaintStyle : null,
LabelStyle : { color : "black" },
LogEnabled : false,
Overlays : [ ],
MaxConnections : 1,
PaintStyle : { strokeWidth : 8, stroke : "#456" },
ReattachConnections : false,
RenderMode : "svg",
Scope : "jsPlumb_DefaultScope"

你也可以從jsPlumb.Defaults對象中查看默認的配置。如果你想要更加個性化的設置連線，那麼最好可以瞭解一下，它的默認設置有哪些，從而方便的來完成自己的設計需求。

默認參數的簡介:

Anchor 錨點，即端點鏈接的位置
Anchors 多個錨點 [源錨點，目標錨點].
Connector 鏈接
ConnectionsDetachable 節點是否可以用鼠標拖動使其斷開，默認爲true。即用鼠標鏈接上的連線，也可以使用鼠標拖動讓其斷開。設置成false，可以讓其拖動也不會自動斷開。
Container 連線的容器
DoNotThrowErrors 是否拋出錯誤
ConnectionOverlays 鏈接遮罩層
DragOptions 拖動設置
DropOptions 拖放設置
Endpoint 端點
Endpoints 數組形式的，[源端點，目標端點]
EndpointOverlays 端點遮罩層
EndpointStyle 端點樣式
EndpointStyles [源端點樣式，目標端點樣式]
EndpointHoverStyle 端點鼠標經過的樣式
EndpointHoverStyles [源端點鼠標經過樣式，目標端點鼠標經過樣式]
HoverPaintStyle 鼠標經過鏈接線時的樣式
LabelStyle 標籤樣式
LogEnabled 是否啓用日誌
Overlays 連接線和端點的遮罩層樣式
MaxConnections 端點最大連接線數量默認爲1，設置成-1可以表示無數個鏈接
PaintStyle 連線樣式
ReattachConnections 端點是否可以再次重新鏈接
RenderMode 渲染模式，默認是svg
Scope 作用域，用來區分哪些端點可以鏈接，作用域相同的可以鏈接

// 可以使用importDefaults，來重寫某些默認設置
jsPlumb.importDefaults({
  PaintStyle : {
    strokeWidth:13,
    stroke: 'rgba(200,0,0,0.5)'
  },
  DragOptions : { cursor: "crosshair" },
  Endpoints : [ [ "Dot", { radius:7 } ], [ "Dot", { radius:11 } ] ],
  EndpointStyles : [{ fill:"#225588" }, { fill:"#558822" }]
});

JSplumb 中文教程（前端自定義組件，流程圖，拓撲圖）

1. jsplumb 中文基礎教程

1.1. 什麼是jsplumb？

1.2. jsplumb能幹什麼？

1.3. 基本概念

2. 基礎demos

2.2. 可拖動節點

2.3. 連接的其他參數

2.4. 設置連接的默認值

2.5. 給連接加上樣式

2.6. 給連接加上箭頭

2.7. 增加一個端點

2.8. 拖動創建連接

2.9. 給端點增加樣式

2.10. 限制節點拖動區域

2.11. 給鏈接添加點擊事件：點擊刪除連線

2.12. 刪除節點，包括節點相關的連接

2.13. 一個端點如何拖拽出多條連線

2.14. 整個節點作爲source或者target

3 jsPlumb默認配置簡介

node中fs模塊之文件操作

webpack中的一些基本操作（VUE）

jsplumb入門教程及視頻教程鏈接

JSplumb 中文教程（前端自定義組件，流程圖，拓撲圖）

js中特殊字符去重寫法

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結