详解js中构造流程图的核心技术JsPlumb_javascript技巧

      

        工厂模型
        

        
        工艺段模型
        

          

            
              

                工段
              
            
          
          

            
              

                工位
              
            
          
        
      
    
    

//基本连接线样式
var connectorPaintStyle = {
  strokeStyle: "#1e8151",
  fillStyle: "transparent",
  radius: 5,
  lineWidth: 2
};
// 鼠标悬浮在连接线上的样式
var connectorHoverStyle = {
  lineWidth: 3,
  strokeStyle: "#216477",
  outlineWidth: 2,
  outlineColor: "white"
};
var endpointHoverStyle = {
  fillStyle: "#216477",
  strokeStyle: "#216477"
};
//空心圆端点样式设置
var hollowCircle = {
  DragOptions: { cursor: 'pointer', zIndex: 2000 },
  endpoint: ["Dot", { radius: 7 }], //端点的形状
  connectorStyle: connectorPaintStyle,//连接线的颜色，大小样式
  connectorHoverStyle: connectorHoverStyle,
  paintStyle: {
    strokeStyle: "#1e8151",
    fillStyle: "transparent",
    radius: 5,
    lineWidth: 2
  },    //端点的颜色样式
  //anchor: "AutoDefault",
  isSource: true,  //是否可以拖动（作为连线起点）
  connector: ["Straight", { stub: [0, 0], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }], //连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ]
  isTarget: true,  //是否可以放置（连线终点）
  maxConnections: -1,  // 设置连接点最多可以连接几条线
  connectorOverlays: [["Arrow", { width: 10, length: 10, location: 1 }]]
};

　　　　　　　　$(function(){
        //左边区域的draggable事件
        $("#divContentLeftMenu .node").draggable({
          helper: "clone",
          scope: "plant"
        });

        //中间拖拽区的drop事件
        $("#divCenter").droppable({
          scope: "plant",
          drop: function (event, ui) {
            // 创建工厂模型到拖拽区
            CreateModel(ui, $(this));
          }
        });
　　　　　　　　});  
 
//1.创建模型（参数依次为：drop事件的ui、当前容器、id、当前样式）
 function CreateModel(ui, selector) {
    //1.1 添加html模型
    var modelid = $(ui.draggable).attr("id");
    i++;
    var id = modelid + i;
    var cur_css = modelid;
    var type = $(ui.helper).attr("dbtype");
    $(selector).append('
' + $(ui.helper).html() + '
');
    var left = parseInt(ui.offset.left - $(selector).offset().left);
    var top = parseInt(ui.offset.top - $(selector).offset().top);
    $("//m.sbmmt.com/m/article/#" + id).css("left", left).css("top", top);
    //jsPlumb.setContainer($("#divCenter"));
    //1.2 添加连接点
    jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);
    jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle);
    jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle);
    jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle);
    jsPlumb.draggable(id);

    //1.3 注册实体可draggable和resizable
    $("//m.sbmmt.com/m/article/#" + id).draggable({
      containment: "parent",
      start: function () {
        startMove();
      },
      drag: function (event, ui) {
        MoveSelectDiv(event, ui, id);
        jsPlumb.repaintEverything();
      },
      stop: function () {
        jsPlumb.repaintEverything();
      }
    });

    $("//m.sbmmt.com/m/article/#" + id).resizable({
      resize: function () {
        jsPlumb.repaintEverything();
      },
      stop: function () {
        jsPlumb.repaintEverything();
        //oInitElement.SendPropRequest("DTO_TM_PLANT", $(this));
      }
    });
    return id;
  };