jsPlumb使用小結

類似于mxgraph，主要用于拖拽節點生成工作流；引入：

yufp.require.require([
  './libs/jsPlumb/css/jsPlumbToolkit-defaults.css',
  './libs/jsPlumb/css/jsPlumbToolkit-demo.css'
]);
define([
  './libs/jsPlumb/js/jsPlumb.js',
  './custom/widgets/js/yufpFlowDesign.js'// 流程元件
], function (require, exports) {
           

初始化jsPlumb執行個體：

_this.instance = jsPlumb.getInstance({
        Endpoint: ['Dot', { // 這個是控制連線終端那個小點的半徑
        }],
        Connector: 'Flowchart', // Bezier（貝塞爾曲線），Straight（直線），Flowchart（流程圖），StateMachine（狀态機）
        HoverPaintStyle: { // 這個是滑鼠放在連線上顯示的效果寬度
          stroke: '#456',
          strokeWidth: 2
        },
        Container: 'canvas' // 挂載ID <div id="canvas"><div>
});
           

注冊連接配接類型：

_this.instance.registerConnectionType('basic', {
        paintStyle: {strokeWidth: 1, stroke: '#666'},
        anchor: ['Left', 'Right'],
        connector: ['Flowchart', {
          stub: [5, 5],
          gap: 10,
          cornerRadius: 5,
          alwaysRespectStubs: true
        }]
});
           

改變連線顔色：

_this.instance.bind('connectionDrag', function (c) {
   c.setPaintStyle({ stroke: '#666', strokeWidth: 1 });
});
           

阻止浏覽器預設右鍵點選：

var canvas = document.getElementById('canvas');
canvas.oncontextmenu = function () {
  return false;
};
           

清空畫布：

_this.instance.empty(_this.containerId);// containerId: 'canvas',；<div id="canvas"></div>
           

流程圖繪制：