xt-ems-front/static/js/goflow/codebase/GooFlow.js

// 定义一个区域图类：
function GooFlow (bgDiv, property) {
  if (navigator.userAgent.indexOf('MSIE 8.0') > 0 || navigator.userAgent.indexOf('MSIE 7.0') > 0 || navigator.userAgent.indexOf('MSIE 6.0') > 0) {
    GooFlow.prototype.useSVG = '';
  } else GooFlow.prototype.useSVG = '1';
  // 初始化区域图的对象
  this.$id = bgDiv.attr('id');
  this.$bgDiv = bgDiv; // 最父框架的DIV
  this.$bgDiv.addClass('GooFlow');
  if (GooFlow.prototype.color.font) {
    this.$bgDiv.css('color', GooFlow.prototype.color.font);
  }
  if (GooFlow.prototype.color.main) {
    this.$bgDiv.append('<style>.GooFlow_tool_btndown{background:' + GooFlow.prototype.color.main + '}</style>');
  }
  var width = (property.width || 800);
  var height = (property.height || 500);
  this.$bgDiv.css({
    width: width + 'px',
    height: height + 'px'
  });
  this.$tool = null; // 左侧工具栏对象
  this.$head = null; // 顶部标签及工具栏按钮
  this.$title = 'newFlow_1'; // 流程图的名称
  this.$id = '';
  this.$nodeRemark = {}; // 每一种结点或按钮的说明文字,JSON格式,key为类名,value为用户自定义文字说明
  this.$nowType = 'cursor'; // 当前要绘制的对象类型
  this.$lineData = {};
  this.$lineCount = 0;
  this.$nodeData = {};
  this.$nodeCount = 0;
  this.$areaData = {};
  this.$areaCount = 0;
  this.$lineDom = {};
  this.$nodeDom = {};
  this.$areaDom = {};
  this.$max = property.initNum || 1; // 计算默认ID值的起始SEQUENCE
  this.$focus = ''; // 当前被选定的结点/转换线ID,如果没选中或者工作区被清空,则为""
  this.$cursor = 'default'; // 鼠标指针在工作区内的样式
  this.$editable = false; // 工作区是否可编辑
  this.$deletedItem = {}; // 在流程图的编辑操作中被删除掉的元素ID集合,元素ID为KEY,元素类型(node,line.area)为VALUE
  this.$workExtendStep = 200; // 在自动/手动扩展可编辑区时，一次扩展后宽/高增加多少像素
  this.$setName = function (id, name, type) {
    if (type == 'node') { // 如果是结点
      this.$nodeData[id].name = name;
        this.$nodeDom[id].children('.span').text(name);
        this.$nodeDom[id].find('td:eq(1)').text(name);
    } else if (type == 'line') { // 如果是线
        this.$lineDom[id].childNodes[2].textContent = name;
        this.$lineDom[id].childNodes[1].innerHTML = name;
    }
  };
  var headHeight = 0;
  var tmp = '';

  if (property.haveHead) {
    tmp = "<div class='GooFlow_head' " + (GooFlow.prototype.color.main ? "style='border-bottom-color:" + GooFlow.prototype.color.main + "'" : '') +
      '>';
    if (property.headLabel) {
      tmp += "<label title='" + (property.initLabelText || 'newFlow_1') + "' " +
        (GooFlow.prototype.color.main ? "style='background:" + GooFlow.prototype.color.main + "'" : '') + '>' + (property.initLabelText || 'newFlow_1') + '</label>';
    }
    for (var x = 0; x < property.headBtns.length; ++x) {
      tmp += "<a href='javascript:void(0)' class='GooFlow_head_btn'><i class='ico_" + property.headBtns[x] + "'></i></a>"
    }
    tmp += '</div>';
    this.$head = $(tmp);
    this.$bgDiv.append(this.$head);
    headHeight = 28;
    // 以下是当工具栏按钮被点击时触发的事件自定义(虚函数),格式为function(),因为可直接用THIS操作对象本身,不用传参；用户可自行重定义:
    this.onBtnNewClick = null; // 新建流程图按钮被点中
    this.onBtnOpenClick = null; // 打开流程图按钮定义
    this.onBtnSaveClick = null; // 保存流程图按钮定义
    this.onFreshClick = null; // 重载流程图按钮定义
    this.onPrintClick = null; // 打印流程图按钮定义
    if (property.headBtns) {
      this.$head.on('click', {
        inthis: this
      }, function (e) {
        if (!e) e = window.event;
        var tar = e.target;
        if (tar.tagName == 'DIV' || tar.tagName == 'SPAN') return;
        else if (tar.tagName == 'A') tar = tar.childNodes[0];
        var This = e.data.inthis;
        // 定义顶部操作栏按钮的事件
        switch ($(tar).attr('class')) {
          case 'ico_new':
            if (This.onBtnNewClick != null) This.onBtnNewClick();
            break;
          case 'ico_open':
            if (This.onBtnOpenClick != null) This.onBtnOpenClick();
            break;
          case 'ico_save':
            if (This.onBtnSaveClick != null) This.onBtnSaveClick();
            break;
          case 'ico_undo':
            This.undo();
            break;
          case 'ico_redo':
            This.redo();
            break;
          case 'ico_reload':
            if (This.onFreshClick != null) This.onFreshClick();
            break;
          case 'ico_print':
            if (This.onPrintClick != null) This.onPrintClick();
            break;
        }
      });
    }
  }
  var toolWidth = 0;
  if (property.haveTool) {
    this.$bgDiv.append("<div class='GooFlow_tool'" + (property.haveHead ? '' : " style='margin-top:4px'") + "><div style='height:" + (height - headHeight - (property.haveHead ? 5 : 8)) + "px' class='GooFlow_tool_div'></div></div>");
    this.$tool = this.$bgDiv.find('.GooFlow_tool div');
    // 未加代码：加入绘图工具按钮
    this.$tool.append("<div style='margin-bottom:5px'><span/><span/><span/><span/></div>" +
      "<a href='javascript:void(0)' type='cursor' class='GooFlow_tool_btndown' id='" + this.$id + "_btn_cursor'><i class='ico_cursor'/></a>" +
      "<a href='javascript:void(0)' type='direct' class='GooFlow_tool_btn' id='" + this.$id + "_btn_direct'><i class='ico_direct'/></a>"
    );
    if (property.toolBtns && property.toolBtns.length > 0) {
      tmp = '<span/>';
      for (var i = 0; i < property.toolBtns.length; ++i) {
        tmp += "<a href='javascript:void(0)' type='" + property.toolBtns[i] + "' id='" + this.$id + '_btn_' + property.toolBtns[i].split(' ')[0] + "' class='GooFlow_tool_btn'><i class='ico_" + property.toolBtns[i] + "'/></a>"; // 加入自定义按钮
      }
      this.$tool.append(tmp);
    }
    // 加入区域划分框工具开关按钮
    if (property.haveGroup) {
      this.$tool.append("<span/><a href='javascript:void(0)' type='group' class='GooFlow_tool_btn' id='" + this.$id + "_btn_group'><i class='ico_group'/></a>");
    }
    toolWidth = 31;
    this.$nowType = 'cursor';
    // 绑定各个按钮的点击事件
    this.$tool.on('click', {
      inthis: this
    }, function (e) {
      if (!e) e = window.event;
      var tar;
      switch (e.target.tagName) {
        case 'SPAN':
          return false;
        case 'DIV':
          return false;
        case 'I':
          tar = e.target.parentNode;
          break;
        case 'A':
          tar = e.target;
      };
      var type = $(tar).attr('type');
      e.data.inthis.switchToolBtn(type);
      return false;
    });
    this.$editable = true; // 只有具有工具栏时可编辑
  }

  width = width - toolWidth - 9;
  height = height - headHeight - (property.haveHead ? 5 : 8);
  this.$bgDiv.append("<div class='GooFlow_work' style='width:" + (width) + 'px;height:' + (height) + 'px;' + (property.haveHead ? '' : 'margin-top:3px') + "'></div>");
  this.$workArea = $("<div class='GooFlow_work_inner' style='width:" + width + 'px;height:' + height + "px'></div>")
    .attr({
      'unselectable': 'on',
      'onselectstart': 'return false',
      'onselect': 'document.selection.empty()'
    });
  this.$bgDiv.children('.GooFlow_work').append(this.$workArea);

  this.$draw = null; // 画矢量线条的容器
  this.initDraw('draw_' + this.$id, width, height);
  this.$group = null;
  if (property.haveGroup) {
    this.initGroup(width, height);
  }
  this.initExpendFunc();

  if (this.$editable) {
    // 绑定工作区事件
    this.$workArea.on('click', {
      inthis: this
    }, function (e) {
      if (!e) e = window.event;
      var This = e.data.inthis;
      if (!This.$editable) return;
      var type = This.$nowType;
      if (type == 'cursor') {
        var t = $(e.target);
        var n = t.prop('tagName');
        // alert(n);
        if (n == 'svg' || (n == 'DIV' && t.prop('class').indexOf('GooFlow_work') > -1) || n == 'LABEL') {
          if (This.$lineOper.data('tid')) {
            This.focusItem(This.$lineOper.data('tid'), false);
            // This.$mpFrom.removeData("p");
          } else {
            This.blurItem();
          }
        }
        return;
      } else if (type == 'direct' || type == 'group') return;
      var X, Y;
      var ev = mousePosition(e),
        t = getElCoordinate(this);
      X = ev.x - t.left + this.parentNode.scrollLeft;
      Y = ev.y - t.top + this.parentNode.scrollTop;
      var id = This.generateMixed(3) + String(new Date().getTime());
      This.addNode(id, {
        name: 'node_' + This.$max,
        left: X,
        top: Y,
        type: This.$nowType
      });
      This.$max++;
    });
    // 划线或改线时用的绑定
    this.$workArea.mousemove({
      inthis: this
    }, function (e) {
      if (e.data.inthis.$nowType != 'direct' && !e.data.inthis.$mpTo.data('p')) return;
      var lineStart = $(this).data('lineStart');
      var lineEnd = $(this).data('lineEnd');
      if (!lineStart && !lineEnd) return;

      var ev = mousePosition(e),
        t = getElCoordinate(this);
      var X, Y;
      X = ev.x - t.left + this.parentNode.scrollLeft;
      Y = ev.y - t.top + this.parentNode.scrollTop;
      var line = document.getElementById('GooFlow_tmp_line');
      if (lineStart) {
        if (GooFlow.prototype.useSVG != '') {
          line.childNodes[0].setAttribute('d', 'M ' + lineStart.x + ' ' + lineStart.y + ' L ' + X + ' ' + Y);
          line.childNodes[1].setAttribute('d', 'M ' + lineStart.x + ' ' + lineStart.y + ' L ' + X + ' ' + Y);
          if (line.childNodes[1].getAttribute('marker-end') == 'url("#arrow2")') {
            line.childNodes[1].setAttribute('marker-end', 'url(#arrow3)');
          } else line.childNodes[1].setAttribute('marker-end', 'url(#arrow2)');
        } else line.points.value = lineStart.x + ',' + lineStart.y + ' ' + X + ',' + Y;
      } else if (lineEnd) {
        if (GooFlow.prototype.useSVG != '') {
          line.childNodes[0].setAttribute('d', 'M ' + X + ' ' + Y + ' L ' + lineEnd.x + ' ' + lineEnd.y);
          line.childNodes[1].setAttribute('d', 'M ' + X + ' ' + Y + ' L ' + lineEnd.x + ' ' + lineEnd.y);
          if (line.childNodes[1].getAttribute('marker-end') == 'url("#arrow2")') {
            line.childNodes[1].setAttribute('marker-end', 'url(#arrow3)');
          } else line.childNodes[1].setAttribute('marker-end', 'url(#arrow2)');
        } else line.points.value = X + ',' + Y + ' ' + lineEnd.x + ',' + lineEnd.y;
      }
    });
    this.$workArea.mouseup({
      inthis: this
    }, function (e) {
      var This = e.data.inthis;
      if (This.$nowType != 'direct' && !This.$mpTo.data('p')) return;
      var tmp = document.getElementById('GooFlow_tmp_line');
      if (tmp) {
        $(this).css('cursor', 'auto').removeData('lineStart').removeData('lineEnd');
        This.$mpTo.hide().removeData('p');
        This.$mpFrom.hide().removeData('p');
        This.$draw.removeChild(tmp);
        This.focusItem(This.$focus, false);
      } else {
        This.$lineOper.removeData('tid');
      }
    });
    // 为了结点而增加的一些集体delegate绑定
    this.initWorkForNode();
    // 对结点进行移动或者RESIZE时用来显示的遮罩层
    this.$ghost = $("<div class='rs_ghost'></div>").attr({
      'unselectable': 'on',
      'onselectstart': 'return false',
      'onselect': 'document.selection.empty()'
    });
    this.$bgDiv.append(this.$ghost);
    this.$textArea = $('<textarea></textarea>');
    this.$bgDiv.append(this.$textArea);
    this.$lineMove = $('<div class="GooFlow_linemove" style="display:none"></div>'); // 操作折线时的移动框
    this.$workArea.append(this.$lineMove);
    this.$lineMove.on('mousedown', {
      inthis: this
    }, function (e) {
      if (e.button == 2) return false;
      var lm = $(this);
      lm.css({
        'background-color': '#333'
      });
      var This = e.data.inthis;
      var ev = mousePosition(e),
        t = getElCoordinate(This.$workArea[0]);
      var X, Y;
      X = ev.x - t.left + This.$workArea[0].parentNode.scrollLeft;
      Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop;
      var p = This.$lineMove.position();
      var vX = X - p.left,
        vY = Y - p.top;
      var isMove = false;
      document.onmousemove = function (e) {
        if (!e) e = window.event;
        var ev = mousePosition(e);
        var ps = This.$lineMove.position();
        X = ev.x - t.left + This.$workArea[0].parentNode.scrollLeft;
        Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop;
        if (This.$lineMove.data('type') == 'lr') {
          X = X - vX;
          if (X < 0) X = 0;
          else if (X > This.$workArea.width()) {
            X = This.$workArea.width();
          }
          This.$lineMove.css({
            left: X + 'px'
          });
        } else if (This.$lineMove.data('type') == 'tb') {
          Y = Y - vY;
          if (Y < 0) Y = 0;
          else if (Y > This.$workArea.height()) {
            Y = This.$workArea.height();
          }
          This.$lineMove.css({
            top: Y + 'px'
          });
        }
        isMove = true;
      }
      document.onmouseup = function (e) {
        if (isMove) {
          var p = This.$lineMove.position();
          if (This.$lineMove.data('type') == 'lr') {
            This.setLineM(This.$lineMove.data('tid'), p.left + 3);
          } else if (This.$lineMove.data('type') == 'tb') {
            This.setLineM(This.$lineMove.data('tid'), p.top + 3);
          }
        }
        This.$lineMove.css({
          'background-color': 'transparent'
        });
        if (This.$focus == This.$lineMove.data('tid')) {
          This.focusItem(This.$lineMove.data('tid'));
        }
        document.onmousemove = null;
        document.onmouseup = null;
      }
    });
    var chars = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
    this.generateMixed = function (n) {
         var res = '';
         for (var i = 0; i < n; i++) {
             var id = Math.ceil(Math.random() * 24);
             res += chars[id];
         }
         return res;
    }
    // 选定一条转换线后出现的浮动操作栏，有改变线的样式和删除线等按钮。
    this.$lineOper = $("<div class='GooFlow_line_oper' style='display:none'><i class='b_l1'></i><i class='b_l2'></i><i class='b_l3'></i><i class='b_x'></i></div>"); // 选定线时显示的操作框
    this.$workArea.parent().append(this.$lineOper);
    this.$lineOper.on('click', {
      inthis: this
    }, function (e) {
      if (!e) e = window.event;
      if (e.target.tagName != 'I') return;
      var This = e.data.inthis;
      var id = $(this).data('tid');
      switch ($(e.target).attr('class')) {
        case 'b_x':
          This.delLine(id);
          this.style.display = 'none';
          break;
        case 'b_l1':
          This.setLineType(id, 'lr');
          break;
        case 'b_l2':
          This.setLineType(id, 'tb');
          break;
        case 'b_l3':
          This.setLineType(id, 'sl');
          break;
      }
    });
    // 新增移动线两个端点至新的结点功能移动功能，这里要提供移动用的DOM
    this.$mpFrom = $("<div class='GooFlow_line_mp' style='display:none'></div>");
    this.$mpTo = $("<div class='GooFlow_line_mp' style='display:none'></div>");
    this.$workArea.append(this.$mpFrom).append(this.$mpTo);
    this.initLinePointsChg();

    // 下面绑定当结点/线/分组块的一些操作事件,这些事件可直接通过this访问对象本身
    // 当操作某个单元（结点/线/分组块）被添加时，触发的方法，返回FALSE可阻止添加事件的发生
    // 格式function(id，type,json)：id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值,json即addNode,addLine或addArea方法的第二个传参json.
    this.onItemAdd = null;
    // 当操作某个单元（结点/线/分组块）被删除时，触发的方法，返回FALSE可阻止删除事件的发生
    // 格式function(id，type)：id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值
    this.onItemDel = null;
    // 当操作某个单元（结点/分组块）被移动时，触发的方法，返回FALSE可阻止移动事件的发生
    // 格式function(id，type,left,top)：id是单元的唯一标识ID,type是单元的种类,有"node","area"两种取值，线line不支持移动,left是新的左边距坐标，top是新的顶边距坐标
    this.onItemMove = null;
    // 当操作某个单元（结点/线/分组块）被重命名时，触发的方法，返回FALSE可阻止重命名事件的发生
    // 格式function(id,name,type)：id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值,name是新的名称
    this.onItemRename = null;
    // 当操作某个单元（结点/线）被由不选中变成选中时，触发的方法，返回FALSE可阻止选中事件的发生
    // 格式function(id,type)：id是单元的唯一标识ID,type是单元的种类,有"node","line"两种取值,"area"不支持被选中
    this.onItemFocus = null;
    // 当操作某个单元（结点/线）被由选中变成不选中时，触发的方法，返回FALSE可阻止取消选中事件的发生
    // 格式function(id，type)：id是单元的唯一标识ID,type是单元的种类,有"node","line"两种取值,"area"不支持被取消选中
    this.onItemBlur = null;
    // 当操作某个单元（结点/分组块）被重定义大小或造型时，触发的方法，返回FALSE可阻止重定大小/造型事件的发生
    // 格式function(id，type,width,height)：id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值;width是新的宽度,height是新的高度
    this.onItemResize = null;
    // 当移动某条折线中段的位置，触发的方法，返回FALSE可阻止重定大小/造型事件的发生
    // 格式function(id，M)：id是单元的唯一标识ID,M是中段的新X(或Y)的坐标
    this.onLineMove = null;
    // 当变换某条连接线的类型，触发的方法，返回FALSE可阻止重定大小/造型事件的发生
    // 格式function(id，type)：id是单元的唯一标识ID,type是连接线的新类型,"sl":直线,"lr":中段可左右移动的折线,"tb":中段可上下移动的折线
    this.onLineSetType = null;
    // 当变换某条连接线的端点变更连接的结点时，触发的方法，返回FALSE可阻止重定大小/造型事件的发生
    // 格式function(id，newStart,newEnd)：id是连线单元的唯一标识ID,newStart,newEnd分别是起始结点的ID和到达结点的ID
    this.onLinePointMove = null;
    // 当用重色标注某个结点/转换线时触发的方法，返回FALSE可阻止重定大小/造型事件的发生
    // 格式function(id，type，mark)：id是单元的唯一标识ID,type是单元类型（"node"结点,"line"转换线），mark为布尔值,表示是要标注TRUE还是取消标注FALSE
    this.onItemMark = null;

    if (property.useOperStack && this.$editable) { // 如果要使用堆栈记录操作并提供“撤销/重做”的功能,只在编辑状态下有效
      this.$undoStack = [];
      this.$redoStack = [];
      this.$isUndo = 0;
      /// ////////////以下是构造撤销操作/重做操作的方法
      // 为了节省浏览器内存空间,undo/redo中的操作缓存栈,最多只可放40步操作;超过40步时,将自动删掉最旧的一个缓存
      this.pushOper = function (funcName, paras) {
        var len = this.$undoStack.length;
        if (this.$isUndo == 1) {
          this.$redoStack.push([funcName, paras]);
          this.$isUndo = false;
          if (this.$redoStack.length > 40) this.$redoStack.shift();
        } else {
          this.$undoStack.push([funcName, paras]);
          if (this.$undoStack.length > 40) this.$undoStack.shift();
          if (this.$isUndo == 0) {
            this.$redoStack.splice(0, this.$redoStack.length);
          }
          this.$isUndo = 0;
        }
      };
      // 将外部的方法加入到GooFlow对象的事务操作堆栈中,在过后的undo/redo操作中可以进行控制，一般用于对流程图以外的附加信息进行编辑的事务撤销/重做控制；
      // 传参func为要执行方法对象,jsonPara为外部方法仅有的一个面向字面的JSON传参,由JSON对象带入所有要传的信息；
      // 提示:为了让外部方法能够被UNDO/REDO,需要在编写这些外部方法实现时,加入对该方法执行后效果回退的另一个执行方法的pushExternalOper
      this.pushExternalOper = function (func, jsonPara) {
        this.pushOper('externalFunc', [func, jsonPara]);
      };
      // 撤销上一步操作
      this.undo = function () {
        if (this.$undoStack.length == 0) return;
        this.blurItem();
        var tmp = this.$undoStack.pop();
        this.$isUndo = 1;
        if (tmp[0] == 'externalFunc') {
          tmp[1][0](tmp[1][1]);
        } else {
          // 传参的数量,最多支持6个.
          switch (tmp[1].length) {
            case 0:
              this[tmp[0]]();
              break;
            case 1:
              this[tmp[0]](tmp[1][0]);
              break;
            case 2:
              this[tmp[0]](tmp[1][0], tmp[1][1]);
              break;
            case 3:
              this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2]);
              break;
            case 4:
              this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2], tmp[1][3]);
              break;
            case 5:
              this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2], tmp[1][3], tmp[1][4]);
              break;
            case 6:
              this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2], tmp[1][3], tmp[1][4], tmp[1][5]);
              break;
          }
        }
      };
      // 重做最近一次被撤销的操作
      this.redo = function () {
        if (this.$redoStack.length == 0) return;
        this.blurItem();
        var tmp = this.$redoStack.pop();
        this.$isUndo = 2;
        if (tmp[0] == 'externalFunc') {
          tmp[1][0](tmp[1][1]);
        } else {
          // 传参的数量,最多支持6个.
          switch (tmp[1].length) {
            case 0:
              this[tmp[0]]();
              break;
            case 1:
              this[tmp[0]](tmp[1][0]);
              break;
            case 2:
              this[tmp[0]](tmp[1][0], tmp[1][1]);
              break;
            case 3:
              this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2]);
              break;
            case 4:
              this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2], tmp[1][3]);
              break;
            case 5:
              this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2], tmp[1][3], tmp[1][4]);
              break;
            case 6:
              this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2], tmp[1][3], tmp[1][4], tmp[1][5]);
              break;
          }
        }
      };
    }
    $(document).keydown({
      inthis: this
    }, function (e) {
      // 绑定键盘操作
      var This = e.data.inthis;
      if (This.$focus == '') return;
      switch (e.keyCode) {
        case 46: // 删除
          This.delNode(This.$focus, true);
          This.delLine(This.$focus);
          break;
      }
    });
  }
}

GooFlow.prototype = {
  useSVG: '',
  getSvgMarker: function (id, color) {
    var m = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
    m.setAttribute('id', id);
    m.setAttribute('viewBox', '0 0 6 6');
    m.setAttribute('refX', 5);
    m.setAttribute('refY', 3);
    m.setAttribute('markerUnits', 'strokeWidth');
    m.setAttribute('markerWidth', 6);
    m.setAttribute('markerHeight', 6);
    m.setAttribute('orient', 'auto');
    var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path.setAttribute('d', 'M 0 0 L 6 3 L 0 6 z');
    path.setAttribute('fill', color);
    path.setAttribute('stroke-width', 0);
    m.appendChild(path);
    return m;
  },
  initDraw: function (id, width, height) {
    var elem;
    if (GooFlow.prototype.useSVG != '') {
      this.$draw = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); // 可创建带有指定命名空间的元素节点
      this.$workArea.prepend(this.$draw);
      var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
      this.$draw.appendChild(defs);
      defs.appendChild(GooFlow.prototype.getSvgMarker('arrow1', GooFlow.prototype.color.line || '#3892D3'));
      defs.appendChild(GooFlow.prototype.getSvgMarker('arrow2', GooFlow.prototype.color.mark || '#ff8800'));
      defs.appendChild(GooFlow.prototype.getSvgMarker('arrow3', GooFlow.prototype.color.mark || '#ff8800'));
    } else {
      this.$draw = document.createElement('v:group');
      this.$draw.coordsize = width + ',' + height;
      this.$workArea.prepend("<div class='GooFlow_work_vml' style='position:relative;width:" + width + 'px;height:' + height + "px'></div>");
      this.$workArea.children('div')[0].insertBefore(this.$draw, null);
    }
    this.$draw.id = id;
    this.$draw.style.width = width + 'px';
    this.$draw.style.height = +height + 'px';
    // 绑定连线的点击选中以及双击编辑事件
    var tmpClk = null;
    if (GooFlow.prototype.useSVG != '') tmpClk = 'g';
    else tmpClk = 'PolyLine';
    if (!this.$editable) return;

    $(this.$draw).delegate(tmpClk, 'click', {
      inthis: this
    }, function (e) {
      e.data.inthis.focusItem(this.id, true);
    });
    // $(this.$draw).delegate(tmpClk, 'dblclick', {
    //   inthis: this
    // }, function (e) {
    //   var oldTxt, x, y, from, to;
    //   var This = e.data.inthis;
    //   if (GooFlow.prototype.useSVG != '') {
    //     oldTxt = this.childNodes[2].textContent;
    //     from = this.getAttribute('from').split(',');
    //     to = this.getAttribute('to').split(',');
    //   } else {
    //     oldTxt = this.childNodes[1].innerHTML;
    //     var n = this.getAttribute('fromTo').split(',');
    //     from = [n[0], n[1]];
    //     to = [n[2], n[3]];
    //   }
    //   if (This.$lineData[this.id].type == 'lr') {
    //     from[0] = This.$lineData[this.id].M;
    //     to[0] = from[0];
    //   } else if (This.$lineData[this.id].type == 'tb') {
    //     from[1] = This.$lineData[this.id].M;
    //     to[1] = from[1];
    //   }
    //   x = (parseInt(from[0], 10) + parseInt(to[0], 10)) / 2 - 64;
    //   y = (parseInt(from[1], 10) + parseInt(to[1], 10)) / 2 - 18;
    //   var t = getElCoordinate(This.$workArea[0]);
    //   This.$textArea.val(oldTxt).css({
    //     display: 'block',
    //     width: 130,
    //     height: 26,
    //     left: t.left + x - This.$workArea[0].parentNode.scrollLeft,
    //     top: t.top + y - This.$workArea[0].parentNode.scrollTop
    //   }).data('id', This.$focus).focus();
    //   This.$workArea.parent().one('mousedown', function (e) {
    //     if (e.button == 2) return false;
    //     This.setName(This.$textArea.data('id'), This.$textArea.val(), 'line');
    //     This.$textArea.val('').removeData('id').hide();
    //   });
    // });
  },
  initGroup: function (width, height) {
    this.$group = $("<div class='GooFlow_work_group' style='width:" + width + 'px;height:' + height + "px'></div>"); // 存放背景区域的容器
    this.$workArea.prepend(this.$group);
    if (!this.$editable) return;

    // 区域划分框操作区的事件绑定
    this.$group.on('mousedown', {
      inthis: this
    }, function (e) { // 绑定RESIZE功能以及移动功能
      if (e.button == 2) return false;
      var This = e.data.inthis;
      if (This.$nowType != 'group') return;
      if (!e) e = window.event;
      var cursor = $(e.target).css('cursor');
      var id = e.target.parentNode;
      switch (cursor) {
        case 'nw-resize':
          id = id.parentNode;
          break;
        case 'w-resize':
          id = id.parentNode;
          break;
        case 'n-resize':
          id = id.parentNode;
          break;
        case 'move':
          break;
        default:
          return;
      }
      id = id.id;

      var ev = mousePosition(e),
        t = getElCoordinate(This.$workArea[0]);

      var X, Y;
      X = ev.x - t.left + This.$workArea[0].parentNode.scrollLeft;
      Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop;
      if (cursor != 'move') {
        This.$ghost.css({
          display: 'block',
          width: This.$areaData[id].width + 'px',
          height: This.$areaData[id].height + 'px',
          top: This.$areaData[id].top + t.top - This.$workArea[0].parentNode.scrollTop + 'px',
          left: This.$areaData[id].left + t.left - This.$workArea[0].parentNode.scrollLeft + 'px',
          cursor: cursor
        });
        var vX = (This.$areaData[id].left + This.$areaData[id].width) - X;
        var vY = (This.$areaData[id].top + This.$areaData[id].height) - Y;
      } else {
        var vX = X - This.$areaData[id].left;
        var vY = Y - This.$areaData[id].top;
      }
      var isMove = false;
      This.$ghost.css('cursor', cursor);
      document.onmousemove = function (e) {
        if (!e) e = window.event;
        var ev = mousePosition(e);
        if (cursor != 'move') {
          X = ev.x - t.left + This.$workArea[0].parentNode.scrollLeft - This.$areaData[id].left + vX;
          Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop - This.$areaData[id].top + vY;
          if (X < 200) X = 200;
          if (Y < 100) Y = 100;
          switch (cursor) {
            case 'nw-resize':
              This.$ghost.css({
                width: X + 'px',
                height: Y + 'px'
              });
              break;
            case 'w-resize':
              This.$ghost.css({
                width: X + 'px'
              });
              break;
            case 'n-resize':
              This.$ghost.css({
                height: Y + 'px'
              });
              break;
          }
        } else {
          if (This.$ghost.css('display') == 'none') {
            This.$ghost.css({
              display: 'block',
              width: This.$areaData[id].width + 'px',
              height: This.$areaData[id].height + 'px',
              top: This.$areaData[id].top + t.top - This.$workArea[0].parentNode.scrollTop + 'px',
              left: This.$areaData[id].left + t.left - This.$workArea[0].parentNode.scrollLeft + 'px',
              cursor: cursor
            });
          }
          X = ev.x - vX;
          Y = ev.y - vY;
          if (X < t.left - This.$workArea[0].parentNode.scrollLeft) {
            X = t.left - This.$workArea[0].parentNode.scrollLeft;
          } else if (X + This.$workArea[0].parentNode.scrollLeft + This.$areaData[id].width > t.left + This.$workArea.width()) {
            X = t.left + This.$workArea.width() - This.$workArea[0].parentNode.scrollLeft - This.$areaData[id].width;
          }
          if (Y < t.top - This.$workArea[0].parentNode.scrollTop) {
            Y = t.top - This.$workArea[0].parentNode.scrollTop;
          } else if (Y + This.$workArea[0].parentNode.scrollTop + This.$areaData[id].height > t.top + This.$workArea.height()) {
            Y = t.top + This.$workArea.height() - This.$workArea[0].parentNode.scrollTop - This.$areaData[id].height;
          }
          This.$ghost.css({
            left: X + 'px',
            top: Y + 'px'
          });
        }
        isMove = true;
      }
      document.onmouseup = function (e) {
        This.$ghost.empty().hide();
        document.onmousemove = null;
        document.onmouseup = null;
        if (!isMove) return;
        if (cursor != 'move') {
          This.resizeArea(id, This.$ghost.outerWidth(), This.$ghost.outerHeight());
        } else {
          This.moveArea(id, X + This.$workArea[0].parentNode.scrollLeft - t.left, Y + This.$workArea[0].parentNode.scrollTop - t.top);
        }
        return false;
      }
    });
    // 绑定修改文字说明功能
    // this.$group.on('dblclick', {
    //   inthis: this
    // }, function (e) {
    //   var This = e.data.inthis;
    //   if (This.$nowType != 'group') return;
    //   if (!e) e = window.event;
    //   if (e.target.tagName != 'LABEL') return false;
    //   var oldTxt = e.target.innerHTML;
    //   var p = e.target.parentNode;
    //   var x = parseInt(p.style.left, 10) + 18,
    //     y = parseInt(p.style.top, 10) + 1;
    //   var t = getElCoordinate(This.$workArea[0]);
    //   This.$textArea.val(oldTxt).css({
    //     display: 'block',
    //     width: 120,
    //     height: 26,
    //     left: t.left + x - This.$workArea[0].parentNode.scrollLeft,
    //     top: t.top + y - This.$workArea[0].parentNode.scrollTop
    //   }).data('id', p.id).focus();
    //   This.$workArea.parent().one('mouseup', function (e) {
    //     if (e.button == 2) return false;
    //     if (This.$textArea.css('display') == 'block') {
    //       This.setName(This.$textArea.data('id'), This.$textArea.val(), 'area');
    //       This.$textArea.val('').removeData('id').hide();
    //     }
    //     return false;
    //   });
    //   return false;
    // });
    // 绑定点击事件
    this.$group.mouseup({
      inthis: this
    }, function (e) {
      var This = e.data.inthis;
      if (This.$textArea.css('display') == 'block') {
        This.setName(This.$textArea.data('id'), This.$textArea.val(), 'area');
        This.$textArea.val('').removeData('id').hide();
        return false;
      };

      if (This.$nowType != 'group') return;
      if (!e) e = window.event;
      switch ($(e.target).attr('class')) {
        case 'rs_close':
          This.delArea(e.target.parentNode.parentNode.id);
          return false; // 删除该分组区域
        case 'bg':
          return;
      }
      switch (e.target.tagName) {
        case 'LABEL':
          return false;
        case 'I': // 绑定变色功能
          var id = e.target.parentNode.id;
          switch (This.$areaData[id].color) {
            case 'red':
              This.setAreaColor(id, 'yellow');
              break;
            case 'yellow':
              This.setAreaColor(id, 'blue');
              break;
            case 'blue':
              This.setAreaColor(id, 'green');
              break;
            case 'green':
              This.setAreaColor(id, 'red');
              break;
          }
          return false;
      }
      if (e.data.inthis.$ghost.css('display') == 'none') {
        var X, Y;
        var ev = mousePosition(e),
          t = getElCoordinate(this);
        X = ev.x - t.left + this.parentNode.parentNode.scrollLeft;
        Y = ev.y - t.top + this.parentNode.parentNode.scrollTop;
        var color = ['red', 'yellow', 'blue', 'green'];
        e.data.inthis.addArea(new Date().getTime(), {
          name: 'area_' + e.data.inthis.$max,
          left: X,
          top: Y,
          color: color[e.data.inthis.$max % 4],
          width: 200,
          height: 100
        });
        e.data.inthis.$max++;
        return false;
      }
    });
  },
  // 加入手动扩展编辑区功能，一次扩展200px
  initExpendFunc: function () {
    this.$workArea.append('<div class="Gooflow_extend_right"></div><div class="Gooflow_extend_bottom"></div>');
    this.$workArea.children('.Gooflow_extend_right').on('click', {
      inthis: this
    }, function (e) {
      var This = e.data.inthis;
      var w = This.$workArea.width() + This.$workExtendStep;
      var h = This.$workArea.height();
      This.$workArea.css({
        width: w + 'px'
      });
      if (GooFlow.prototype.useSVG == '') {
        This.$draw.coordsize = w + ',' + h;
      }
      This.$draw.style.width = w + 'px';
      if (This.$group != null) {
        This.$group.css({
          width: w + 'px'
        });
      }
      var parentDiv = This.$workArea.parent()[0];
      parentDiv.scrollLeft = parentDiv.scrollWidth;
      return false;
    });
    this.$workArea.children('.Gooflow_extend_bottom').on('click', {
      inthis: this
    }, function (e) {
      var This = e.data.inthis
      var w = This.$workArea.width();
      var h = This.$workArea.height() + This.$workExtendStep;
      This.$workArea.css({
        height: h + 'px'
      });
      if (GooFlow.prototype.useSVG == '') {
        This.$draw.coordsize = w + ',' + h;
      }
      This.$draw.style.height = h + 'px';
      if (This.$group != null) {
        This.$group.css({
          height: h + 'px'
        });
      }
      var parentDiv = This.$workArea.parent()[0];
      parentDiv.scrollTop = parentDiv.scrollHeight;
      return false;
    });
  },
  // 初始化用来改变连线的连接端点的两个小方块的操作事件
  initLinePointsChg: function () {
    this.$mpFrom.on('mousedown', {
      inthis: this
    }, function (e) {
      var This = e.data.inthis;
      This.switchToolBtn('cursor');
      var ps = This.$mpFrom.data('p').split(',');
      var pe = This.$mpTo.data('p').split(',');
      $(this).hide();
      This.$workArea.data('lineEnd', {
        'x': pe[0],
        'y': pe[1],
        'id': This.$lineData[This.$lineOper.data('tid')].to
      }).css('cursor', 'crosshair');
      var line = GooFlow.prototype.drawLine('GooFlow_tmp_line', [ps[0], ps[1]], [pe[0], pe[1]], true, true);
      This.$draw.appendChild(line);
      return false;
    });
    this.$mpTo.on('mousedown', {
      inthis: this
    }, function (e) {
      var This = e.data.inthis;
      This.switchToolBtn('cursor');
      var ps = This.$mpFrom.data('p').split(',');
      var pe = This.$mpTo.data('p').split(',');
      $(this).hide();
      This.$workArea.data('lineStart', {
        'x': ps[0],
        'y': ps[1],
        'id': This.$lineData[This.$lineOper.data('tid')].from
      }).css('cursor', 'crosshair');
      var line = GooFlow.prototype.drawLine('GooFlow_tmp_line', [ps[0], ps[1]], [pe[0], pe[1]], true, true);
      This.$draw.appendChild(line);
      return false;
    });
  },
  // 每一种类型结点及其按钮的说明文字
  setNodeRemarks: function (remark) {
    if (this.$tool == null) return;
    this.$tool.children('a').each(function () {
      this.title = remark[$(this).attr('id').split('btn_')[1]];
    });
    this.$nodeRemark = remark;
  },

  // 切换左边工具栏按钮,传参TYPE表示切换成哪种类型的按钮
  switchToolBtn: function (type) {
    this.$tool.children('#' + this.$id + '_btn_' + this.$nowType.split(' ')[0]).attr('class', 'GooFlow_tool_btn');
    if (this.$nowType == 'group') {
      this.$workArea.prepend(this.$group);
      for (var key in this.$areaDom) this.$areaDom[key].addClass('lock').children('div:eq(1)').css('display', 'none');
    }
    this.$nowType = type;
    this.$tool.children('#' + this.$id + '_btn_' + type.split(' ')[0]).attr('class', 'GooFlow_tool_btndown');
    if (this.$nowType == 'group') {
      this.blurItem();
      this.$workArea.append(this.$group);
      for (var key in this.$areaDom) this.$areaDom[key].removeClass('lock').children('div:eq(1)').css('display', '');
    } else if (this.$nowType == 'direct') {
      this.blurItem();
    }
    if (this.$textArea.css('display') == 'none') this.$textArea.removeData('id').val('').hide();
  },
  // 增加一个流程结点,传参为一个JSON,有id,name,top,left,width,height,type(结点类型)等属性
  addNode: function (id, json) {
    if (this.onItemAdd != null && !this.onItemAdd(id, 'node', json)) return;
    if (this.$undoStack && this.$editable) {
      this.pushOper('delNode', [id]);
    }
    var mark = json.marked ? ' item_mark' : '';
    var mark2 = mark + json.type === 'plug' ? 'plugShape' : '';
    if (json.type.indexOf(' round') < 0 && json.type !== 'plug') {
      if (!json.width || json.width < 104) json.width = 104;
      if (!json.height || json.height < 55) json.height = 55;
      if (!json.top || json.top < 0) json.top = 0;
      if (!json.left || json.left < 0) json.left = 0;
      if (json.type === 'plug') {
          json.width = 60;
          json.height = 60;
      }
      this.$nodeDom[id] = $("<div class='GooFlow_item " + mark + "' id='" + id + "' style='top:" + json.top + 'px;left:' + json.left + "px'><table cellspacing='1' style='width:" + (json.width - 2) + 'px;height:' + (json.height - 2) + "px;'><tr><td class='icon ico'><i class='ico_" + json.type + "'></i></td><td class='icon'>" + json.name + "</td></tr></table><div style='display:none'><div class='rs_bottom'></div><div class='rs_right'></div><div class='rs_rb'></div><div class='rs_close'></div></div></div>");
    } else if (json.type === 'plug') {
        json.width = 60;
        json.height = 60;
        if (!json.top || json.top < 0) json.top = 0;
        if (!json.left || json.left < 0) json.left = 0;
        this.$nodeDom[id] = $("<div class='GooFlow_item " + mark2 + "' id='" + id + "' style='top:" + json.top + 'px;left:' + json.left + "px;'><table cellspacing='0' style='width:" + (json.width - 2) + 'px;height:' + (json.height - 2) + "px;'><tr><td class='icon ico'><i class='ico_" + json.type + "'></i></td></tr></table><div style='display:none'><div class='rs_close'></div></div><div class='span'>" + json.name + '</div></div>');
    } else {
      json.width = 26;
      json.height = 26;
      json.top += 16;
      this.$nodeDom[id] = $("<div class='GooFlow_item item_round " + mark + "' id='" + id + "' style='top:" + json.top + 'px;left:' + json.left + "px;'><table cellspacing='0'><tr><td class='icon ico'><i class='ico_" + json.type + "'></i></td></tr></table><div  style='display:none'><div class='rs_close'></div></div><div class='span'>" + json.name + '</div></div>');
    }
    if (GooFlow.prototype.color.node) {
      if (json.type.indexOf(' mix') > -1) {
        this.$nodeDom[id].css({
          'background-color': GooFlow.prototype.color.mix,
          'border-color': GooFlow.prototype.color.mix
        });
        if (GooFlow.prototype.color.mixFont) {
          this.$nodeDom[id].find('td:eq(1)').css('color', GooFlow.prototype.color.mixFont);
          this.$nodeDom[id].find('.span').css('color', GooFlow.prototype.color.mixFont);
        }
      } else {
        this.$nodeDom[id].css({
          'background-color': GooFlow.prototype.color.node,
          'border-color': GooFlow.prototype.color.node
        });
      }
      if (mark && GooFlow.prototype.color.mark) {
        this.$nodeDom[id].css({
          'border-color': GooFlow.prototype.color.mark
        });
      }
    }
    if (json.type.indexOf(' mix') > -1) {
      this.$nodeDom[id].addClass('item_mix');
    }

    var ua = navigator.userAgent.toLowerCase();
    if (ua.indexOf('msie') != -1 && ua.indexOf('8.0') != -1) {
      this.$nodeDom[id].css('filter', 'progid:DXImageTransform.Microsoft.Shadow(color=#94AAC2,direction=135,strength=2)');
    }
    this.$workArea.append(this.$nodeDom[id]);
    json.group = '';
    this.$nodeData[id] = json;
    ++this.$nodeCount;
    if (this.$editable) {
      this.$nodeData[id].alt = true;
      if (this.$deletedItem[id]) delete this.$deletedItem[id]; // 在回退删除操作时,去掉该元素的删除记录
    }
  },

  initWorkForNode: function () {
    // 绑定点击事件
    this.$workArea.delegate('.GooFlow_item', 'click', {
      inthis: this
    }, function (e) {
      e.data.inthis.focusItem(this.id, true);
      $(this).removeClass('item_mark');
    });
    // 绑定用鼠标移动事件
    this.$workArea.delegate('.icon', 'mousedown', {
      inthis: this
    }, function (e) {
      if (!e) e = window.event;
      if (e.button == 2) return false;
      var This = e.data.inthis;
      if (This.$nowType == 'direct') return;
      var Dom = $(this).parents('.GooFlow_item');
      var id = Dom.attr('id');
      This.focusItem(id, true);

      var ev = mousePosition(e),
        t = getElCoordinate(This.$workArea[0]);

      Dom.children('table').clone().prependTo(This.$ghost);
      var X, Y;
      X = ev.x - t.left + This.$workArea[0].parentNode.scrollLeft;
      Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop;
      var vX = X - This.$nodeData[id].left,
        vY = Y - This.$nodeData[id].top;
      var isMove = false;
      document.onmousemove = function (e) {
        if (!e) e = window.event;
        var ev = mousePosition(e);
        if (X == ev.x - vX && Y == ev.y - vY) return false;
        X = ev.x - vX;
        Y = ev.y - vY;
        if (isMove && This.$ghost.css('display') == 'none') {
          This.$ghost.css({
            display: 'block',
            width: This.$nodeData[id].width + 'px',
            height: This.$nodeData[id].height + 'px',
            top: This.$nodeData[id].top + t.top - This.$workArea[0].parentNode.scrollTop + 'px',
            left: This.$nodeData[id].left + t.left - This.$workArea[0].parentNode.scrollLeft + 'px',
            cursor: 'move'
          });
        }

        if (X < t.left - This.$workArea[0].parentNode.scrollLeft) {
          X = t.left - This.$workArea[0].parentNode.scrollLeft;
        } else if (X + This.$workArea[0].parentNode.scrollLeft + This.$nodeData[id].width > t.left + This.$workArea.width()) {
          X = t.left + This.$workArea.width() - This.$workArea[0].parentNode.scrollLeft - This.$nodeData[id].width;
        }
        if (Y < t.top - This.$workArea[0].parentNode.scrollTop) {
          Y = t.top - This.$workArea[0].parentNode.scrollTop;
        } else if (Y + This.$workArea[0].parentNode.scrollTop + This.$nodeData[id].height > t.top + This.$workArea.height()) {
          Y = t.top + This.$workArea.height() - This.$workArea[0].parentNode.scrollTop - This.$nodeData[id].height;
        }
        This.$ghost.css({
          left: X + 'px',
          top: Y + 'px'
        });
        isMove = true;
      }
      document.onmouseup = function (e) {
        if (isMove) This.moveNode(id, X + This.$workArea[0].parentNode.scrollLeft - t.left, Y + This.$workArea[0].parentNode.scrollTop - t.top);
        This.$ghost.empty().hide();
        document.onmousemove = null;
        document.onmouseup = null;
      }
    });
    if (!this.$editable) return;
    // 绑定鼠标覆盖/移出事件
    this.$workArea.delegate('.GooFlow_item', 'mouseenter', {
      inthis: this
    }, function (e) {
      if (e.data.inthis.$nowType != 'direct' && !document.getElementById('GooFlow_tmp_line')) return;
      $(this).addClass('item_mark').addClass('crosshair').css('border-color', GooFlow.prototype.color.mark || '#ff8800');
    });
    this.$workArea.delegate('.GooFlow_item', 'mouseleave', {
      inthis: this
    }, function (e) {
      if (e.data.inthis.$nowType != 'direct' && !document.getElementById('GooFlow_tmp_line')) return;
      $(this).removeClass('item_mark').removeClass('crosshair');
      if (this.id == e.data.inthis.$focus) {
        $(this).css('border-color', GooFlow.prototype.color.line || '#3892D3');
      } else {
        $(this).css('border-color', GooFlow.prototype.color.node || '#A1DCEB');
      }
    });
    // 绑定连线时确定初始点
    this.$workArea.delegate('.GooFlow_item', 'mousedown', {
      inthis: this
    }, function (e) {
      if (e.button == 2) return false;
      var This = e.data.inthis;
      if (This.$nowType != 'direct') return;
      var ev = mousePosition(e),
        t = getElCoordinate(This.$workArea[0]);
      var X, Y;
      X = ev.x - t.left + This.$workArea[0].parentNode.scrollLeft;
      Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop;
      This.$workArea.data('lineStart', {
        'x': X,
        'y': Y,
        'id': this.id
      }).css('cursor', 'crosshair');
      var line = GooFlow.prototype.drawLine('GooFlow_tmp_line', [X, Y], [X, Y], true, true);
      This.$draw.appendChild(line);
    });
    // 绑定连线时确定结束点
    this.$workArea.delegate('.GooFlow_item', 'mouseup', {
      inthis: this
    }, function (e) {
      var This = e.data.inthis;
      if (This.$nowType != 'direct' && !This.$mpTo.data('p')) return;
      var lineStart = This.$workArea.data('lineStart');
      var lineEnd = This.$workArea.data('lineEnd');
      if (lineStart && !This.$mpTo.data('p')) {
        var id = This.generateMixed(4) + String(new Date().getTime());
        This.addLine(id, {
          from: lineStart.id,
          to: this.id,
          name: ''
        });
        This.$max++;
      } else {
        if (lineStart) {
          This.moveLinePoints(This.$focus, lineStart.id, this.id);
        } else if (lineEnd) {
          This.moveLinePoints(This.$focus, this.id, lineEnd.id);
        }
        if (!This.$nodeData[this.id].marked) {
          $(this).removeClass('item_mark');
          if (this.id != This.$focus) {
            $(this).css('border-color', GooFlow.prototype.color.node);
          } else {
            $(this).css('border-color', GooFlow.prototype.color.line);
          }
        }
      }
    });
    // 绑定双击编辑事件
    // this.$workArea.delegate('.GooFlow_item > .span', 'dblclick', {
    //   inthis: this
    // }, function (e) {
    //   var oldTxt = this.innerHTML;
    //   var This = e.data.inthis;
    //   var id = this.parentNode.id;
    //   var t = getElCoordinate(This.$workArea[0]);
    //   This.$textArea.val(oldTxt).css({
    //       display: 'block',
    //       height: $(this).height() + 6,
    //       width: 100,
    //       left: t.left + This.$nodeData[id].left - This.$workArea[0].parentNode.scrollLeft - 26,
    //       top: t.top + This.$nodeData[id].top - This.$workArea[0].parentNode.scrollTop + 26
    //     })
    //     .data('id', This.$focus).focus();
    //   This.$workArea.parent().one('mousedown', function (e) {
    //     if (e.button == 2) return false;
    //     This.setName(This.$textArea.data('id'), This.$textArea.val(), 'node');
    //     This.$textArea.val('').removeData('id').hide();
    //   });
    // });
    // this.$workArea.delegate('.ico + td', 'dblclick', {
    //   inthis: this
    // }, function (e) {
    //   var oldTxt = this.innerHTML;
    //   var This = e.data.inthis;
    //   var id = $(this).parents('.GooFlow_item').attr('id');
    //   var t = getElCoordinate(This.$workArea[0]);
    //   This.$textArea.val(oldTxt).css({
    //       display: 'block',
    //       width: $(this).width() + 26,
    //       height: $(this).height() + 6,
    //       left: t.left + 26 + This.$nodeData[id].left - This.$workArea[0].parentNode.scrollLeft,
    //       top: t.top + 2 + This.$nodeData[id].top - This.$workArea[0].parentNode.scrollTop
    //     })
    //     .data('id', This.$focus).focus();
    //   This.$workArea.parent().one('mousedown', function (e) {
    //     if (e.button == 2) return false;
    //     This.setName(This.$textArea.data('id'), This.$textArea.val(), 'node');
    //     This.$textArea.val('').removeData('id').hide();
    //   });
    // });
    // 绑定结点的删除功能
    this.$workArea.delegate('.rs_close', 'click', {
      inthis: this
    }, function (e) {
      if (!e) e = window.event;
      e.data.inthis.delNode(e.data.inthis.$focus);
      return false;
    });
    // 绑定结点的RESIZE功能
    this.$workArea.delegate('.GooFlow_item > div > div[class!=rs_close]', 'mousedown', {
      inthis: this
    }, function (e) {
      if (!e) e = window.event;
      if (e.button == 2) return false;
      var cursor = $(this).css('cursor');
      if (cursor == 'pointer') {
        return;
      }
      var This = e.data.inthis;
      var id = This.$focus;
      This.switchToolBtn('cursor');
      e.cancelBubble = true;
      e.stopPropagation();

      var ev = mousePosition(e),
        t = getElCoordinate(This.$workArea[0]);
      This.$ghost.css({
        display: 'block',
        width: This.$nodeData[id].width + 'px',
        height: This.$nodeData[id].height + 'px',
        top: This.$nodeData[id].top + t.top - This.$workArea[0].parentNode.scrollTop + 'px',
        left: This.$nodeData[id].left + t.left - This.$workArea[0].parentNode.scrollLeft + 'px',
        cursor: cursor
      });
      var X, Y;
      X = ev.x - t.left + This.$workArea[0].parentNode.scrollLeft;
      Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop;
      var vX = (This.$nodeData[id].left + This.$nodeData[id].width) - X;
      var vY = (This.$nodeData[id].top + This.$nodeData[id].height) - Y;
      var isMove = false;
      This.$ghost.css('cursor', cursor);
      document.onmousemove = function (e) {
        if (!e) e = window.event;
        var ev = mousePosition(e);
        X = ev.x - t.left + This.$workArea[0].parentNode.scrollLeft - This.$nodeData[id].left + vX;
        Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop - This.$nodeData[id].top + vY;
        if (X < 104) X = 104;
        if (Y < 26) Y = 26;
        isMove = true;
        switch (cursor) {
          case 'nw-resize':
            This.$ghost.css({
              width: X + 'px',
              height: Y + 'px'
            });
            break;
          case 'w-resize':
            This.$ghost.css({
              width: X + 'px'
            });
            break;
          case 'n-resize':
            This.$ghost.css({
              height: Y + 'px'
            });
            break;
        }
      }
      document.onmouseup = function (e) {
        document.onmousemove = null;
        document.onmouseup = null;
        This.$ghost.hide();
        if (!isMove) return;
        if (!e) e = window.event;
        This.resizeNode(id, This.$ghost.outerWidth(), This.$ghost.outerHeight());
      }
    });
  },
  // 获取结点/连线/分组区域的详细信息
  getItemInfo: function (id, type) {
    switch (type) {
      case 'node':
        return this.$nodeData[id] || null;
      case 'line':
        return this.$lineData[id] || null;
      case 'area':
        return this.$areaData[id] || null;
    }
  },
  // 取消所有结点/连线被选定的状态
  blurItem: function () {
    if (this.$focus != '') {
      var jq = $('#' + this.$focus);
      if (jq.prop('tagName') == 'DIV') {
        if (this.onItemBlur != null && !this.onItemBlur(this.$focus, 'node')) return false;
        jq.removeClass('item_focus').children('div:eq(0)').css('display', 'none');
        if (this.$nodeData[this.$focus].marked) {
          jq.addClass('item_mark').css('border-color', GooFlow.prototype.color.mark || '#ff8800');
        }
      } else {
        if (this.onItemBlur != null && !this.onItemBlur(this.$focus, 'line')) return false;
        if (GooFlow.prototype.useSVG != '') {
          if (!this.$lineData[this.$focus].marked) {
            jq[0].childNodes[1].setAttribute('stroke', GooFlow.prototype.color.line || '#3892D3');
            jq[0].childNodes[1].setAttribute('marker-end', 'url(#arrow1)');
          }
        } else {
          if (!this.$lineData[this.$focus].marked) {
            jq[0].strokeColor = GooFlow.prototype.color.line || '#3892D3';
          }
        }
        this.$lineMove.hide().removeData('type').removeData('tid');
        if (this.$editable) {
          this.$lineOper.hide().removeData('tid');
          this.$mpFrom.hide().removeData('p');
          this.$mpTo.hide().removeData('p');
        }
      }
    }
    this.$focus = '';
    return true;
  },
  // 选定某个结点/转换线 bool:TRUE决定了要触发选中事件，FALSE则不触发选中事件，多用在程序内部调用。
  focusItem: function (id, bool) {
    var jq = $('#' + id);
    if (jq.length == 0) return;
    if (!this.blurItem()) return; // 先执行"取消选中",如果返回FLASE,则也会阻止选定事件继续进行.
    if (jq.prop('tagName') == 'DIV') {
      if (bool && this.onItemFocus != null && !this.onItemFocus(id, 'node'));
      jq.addClass('item_focus');
      if (GooFlow.prototype.color.line) {
        jq.css('border-color', GooFlow.prototype.color.line);
      }
      if (this.$editable) jq.children('div:eq(0)').css('display', 'block');
      this.$workArea.append(jq);
    } else { // 如果是连接线
      if (this.onItemFocus != null && !this.onItemFocus(id, 'line'));
      if (GooFlow.prototype.useSVG != '') {
        jq[0].childNodes[1].setAttribute('stroke', GooFlow.prototype.color.mark || '#ff8800');
        jq[0].childNodes[1].setAttribute('marker-end', 'url(#arrow2)');
      } else {
        jq[0].strokeColor = GooFlow.prototype.color.mark || '#ff8800';
      }
      if (!this.$editable) return;
      var x, y, from, to, n;
      if (GooFlow.prototype.useSVG != '') {
        from = jq.attr('from').split(',');
        to = jq.attr('to').split(',');
        n = [from[0], from[1], to[0], to[1]];
      } else {
        n = jq[0].getAttribute('fromTo').split(',');
        from = [n[0], n[1]];
        to = [n[2], n[3]];
      }
      from[0] = parseInt(from[0], 10);
      from[1] = parseInt(from[1], 10);
      to[0] = parseInt(to[0], 10);
      to[1] = parseInt(to[1], 10);
      // var t=getElCoordinate(this.$workArea[0]);
      if (this.$lineData[id].type == 'lr') {
        from[0] = this.$lineData[id].M;
        to[0] = from[0];

        this.$lineMove.css({
          width: '5px',
          height: (to[1] - from[1]) * (to[1] > from[1] ? 1 : -1) + 'px',
          left: from[0] - 3 + 'px',
          top: (to[1] > from[1] ? from[1] : to[1]) + 1 + 'px',
          cursor: 'e-resize',
          display: 'block'
        }).data({
          'type': 'lr',
          'tid': id
        });
      } else if (this.$lineData[id].type == 'tb') {
        from[1] = this.$lineData[id].M;
        to[1] = from[1];
        this.$lineMove.css({
          width: (to[0] - from[0]) * (to[0] > from[0] ? 1 : -1) + 'px',
          height: '5px',
          left: (to[0] > from[0] ? from[0] : to[0]) + 1 + 'px',
          top: from[1] - 3 + 'px',
          cursor: 's-resize',
          display: 'block'
        }).data({
          'type': 'tb',
          'tid': id
        });
      }
      x = (from[0] + to[0]) / 2 - 40;
      y = (from[1] + to[1]) / 2 + 4;
      this.$lineOper.css({
        display: 'block',
        left: x + 'px',
        top: y + 'px'
      }).data('tid', id);
      if (this.$editable) {
        this.$mpFrom.css({
          display: 'block',
          left: n[0] - 4 + 'px',
          top: n[1] - 4 + 'px'
        }).data('p', n[0] + ',' + n[1]);
        this.$mpTo.css({
          display: 'block',
          left: n[2] - 4 + 'px',
          top: n[3] - 4 + 'px'
        }).data('p', n[2] + ',' + n[3]);
      }
      this.$draw.appendChild(jq[0]);
    }
    this.$focus = id;
    this.switchToolBtn('cursor');
  },
  // 移动结点到一个新的位置
  moveNode: function (id, left, top) {
    if (!this.$nodeData[id]) return;
    if (this.onItemMove != null && !this.onItemMove(id, 'node', left, top)) return;
    if (this.$undoStack) {
      var paras = [id, this.$nodeData[id].left, this.$nodeData[id].top];
      this.pushOper('moveNode', paras);
    }
    if (left < 0) left = 0;
    if (top < 0) top = 0;
    $('#' + id).css({
      left: left + 'px',
      top: top + 'px'
    });
    this.$nodeData[id].left = left;
    this.$nodeData[id].top = top;
    // 重画转换线
    this.resetLines(id, this.$nodeData[id]);
    if (this.$editable) {
      this.$nodeData[id].alt = true;
    }
  },
  // 设置结点/连线/分组区域的文字信息
  setName: function (id, name, type) {
    var oldName;
    if (type == 'node') { // 如果是结点
      if (!this.$nodeData[id]) return;
      if (this.$nodeData[id].name == name) return;
      if (this.onItemRename != null && !this.onItemRename(id, name, 'node'));
      oldName = this.$nodeData[id].name;
      this.$nodeData[id].name = name;
      if (this.$nodeData[id].type.indexOf('round') > 1) {
        this.$nodeDom[id].children('.span').text(name);
      } else {
        this.$nodeDom[id].find('td:eq(1)').text(name);

        var width = this.$nodeDom[id].width();
        var height = this.$nodeDom[id].height();
        this.$nodeDom[id].children('table').css({
          width: width + 'px',
          height: height + 'px'
        });
        this.$nodeData[id].width = width;
        this.$nodeData[id].height = height;
      }
      if (this.$editable) {
        this.$nodeData[id].alt = true;
      }
      // 重画转换线
      this.resetLines(id, this.$nodeData[id]);
    } else if (type == 'line') { // 如果是线
      if (!this.$lineData[id]) return;
      if (this.$lineData[id].name == name) return;
      if (this.onItemRename != null && !this.onItemRename(id, name, 'line'));
      oldName = this.$lineData[id].name;
      this.$lineData[id].name = name;
      if (GooFlow.prototype.useSVG != '') {
        this.$lineDom[id].childNodes[2].textContent = name;
      } else {
        this.$lineDom[id].childNodes[1].innerHTML = name;
        var n = this.$lineDom[id].getAttribute('fromTo').split(',');
        var x;
        if (this.$lineData[id].type != 'lr') {
          x = (n[2] - n[0]) / 2;
        } else {
          var Min = n[2] > n[0] ? n[0] : n[2];
          if (Min > this.$lineData[id].M) Min = this.$lineData[id].M;
          x = this.$lineData[id].M - Min;
        }
        if (x < 0) x = x * -1;
        this.$lineDom[id].childNodes[1].style.left = x - this.$lineDom[id].childNodes[1].offsetWidth / 2 + 4 + 'px';
      }
      if (this.$editable) {
        this.$lineData[id].alt = true;
      }
    } else if (type == 'area') { // 如果是分组区域
      if (!this.$areaData[id]) return;
      if (this.$areaData[id].name == name) return;
      if (this.onItemRename != null && !this.onItemRename(id, name, 'area'));
      oldName = this.$areaData[id].name;
      this.$areaData[id].name = name;
      this.$areaDom[id].children('label').text(name);
      if (this.$editable) {
        this.$areaData[id].alt = true;
      }
    }
    if (this.$undoStack) {
      var paras = [id, oldName, type];
      this.pushOper('setName', paras);
    }
  },
  // 设置结点的尺寸,仅支持非开始/结束结点
  resizeNode: function (id, width, height) {
    if (!this.$nodeData[id]) return;
    if (this.onItemResize != null && !this.onItemResize(id, 'node', width, height)) return;
    if (this.$nodeData[id].type == 'start' || this.$nodeData[id].type == 'end') return;
    if (this.$undoStack) {
      var paras = [id, this.$nodeData[id].width, this.$nodeData[id].height];
      this.pushOper('resizeNode', paras);
    }

    this.$nodeDom[id].children('table').css({
      width: width - 2 + 'px',
      height: height - 2 + 'px'
    });
    // width=this.$nodeDom[id].outerWidth();
    // height=this.$nodeDom[id].outerHeight();
    // this.$nodeDom[id].children("table").css({width:width-2+"px",height:height-2+"px"});
    this.$nodeData[id].width = width;
    this.$nodeData[id].height = height;
    if (this.$editable) {
      this.$nodeData[id].alt = true;
    }
    // 重画转换线
    this.resetLines(id, this.$nodeData[id]);
  },
  // 删除结点
  delNode: function (id, trigger) {
    if (!this.$nodeData[id]) return;
    if (trigger != false && this.onItemDel != null && !this.onItemDel(id, 'node')) return;
    // 先删除可能的连线
    for (var k in this.$lineData) {
      if (this.$lineData[k].from == id || this.$lineData[k].to == id) {
        // this.$draw.removeChild(this.$lineDom[k]);
        // delete this.$lineData[k];
        // delete this.$lineDom[k];
        this.delLine(k, false);
      }
    }
    // 再删除结点本身
    if (this.$undoStack) {
      var paras = [id, this.$nodeData[id]];
      this.pushOper('addNode', paras);
    }
    delete this.$nodeData[id];
    this.$nodeDom[id].remove();
    delete this.$nodeDom[id];
    --this.$nodeCount;
    if (this.$focus == id) this.$focus = '';

    if (this.$editable) {
      // 在回退新增操作时,如果节点ID以this.$id+"_node_"开头,则表示为本次编辑时新加入的节点,这些节点的删除不用加入到$deletedItem中
      if (id.indexOf(this.$id + '_node_') < 0) {
        this.$deletedItem[id] = 'node';
      }
    }
  },
  // 设置流程图的名称
  setTitle: function (text) {
    this.$title = text;
    if (this.$head) this.$head.children('label').attr('title', text).text(text);
  },
  setId: function (id) {
      this.$id = id
  },
  // 载入一组数据
  loadData: function (data) {
    var t = this.$editable;
    this.$editable = false;
    if (data.title) this.setTitle(data.title);
    if (data.initNum) this.$max = data.initNum;
    this.$id = data.id;
    for (var i in data.nodes) {
      this.addNode(i, data.nodes[i]);
    }
    for (var j in data.lines) {
      this.addLine(j, data.lines[j]);
    }
    for (var k in data.areas) {
      this.addArea(k, data.areas[k]);
    }
    this.$editable = t;
    this.$deletedItem = {};
    // 自行重构工作区，使之大小自适应
    var width = this.$workArea.width();
    var height = this.$workArea.height();
    var maxW = 0,
      maxH = 0;
    for (var key in this.$nodeData) {
      var item = this.$nodeData[key];
      if (maxW < item.width + item.left) {
        maxW = item.width + item.left;
      }
      if (maxH < item.height + item.top) {
        maxH = item.height + item.top;
      }
    }
    for (var key in this.$areaData) {
      var item = this.$areaData[key];
      if (maxW < item.width + item.left) {
        maxW = item.width + item.left;
      }
      if (maxH < item.height + item.top) {
        maxH = item.height + item.top;
      }
    }
    M = 0;
    for (var key in this.$lineData) {
      var item = this.$lineData[key];
      if (item.M && item.type == 'lt' && maxW < item.M) {
        maxW = M + 4;
      }
      if (item.M && item.type == 'tb' && maxH < item.M) {
        maxH = M + 4;
      }
    }
    while (maxW > width) {
      width += this.$workExtendStep;
    }
    while (maxH > height) {
      height += this.$workExtendStep;
    }
    this.$workArea.css({
      height: height + 'px',
      width: width + 'px'
    });
    if (GooFlow.prototype.useSVG == '') {
      this.$draw.coordsize = width + ',' + height;
    }
    this.$draw.style.width = width + 'px';
    this.$draw.style.height = +height + 'px';
    if (this.$group != null) {
      this.$group.css({
        height: height + 'px',
        width: width + 'px'
      });
    }
  },
  // 用AJAX方式，远程读取一组数据
  // 参数para为JSON结构，与JQUERY中$.ajax()方法的传参一样
  loadDataAjax: function (para) {
    var This = this;
    $.ajax({
      type: para.type,
      url: para.url,
      dataType: 'json',
      data: para.data,
      success: function (msg) {
        if (para.dataFilter) para.dataFilter(msg, 'json');
        This.loadData(msg);
        if (para.success) para.success(msg);
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        if (para.error) para.error(textStatus, errorThrown);
      }
    })
  },
  // 把画好的整个流程图导出到一个变量中(其实也可以直接访问GooFlow对象的$nodeData,$lineData,$areaData这三个JSON属性)
  exportData: function () {
    var ret = {
      title: this.$title,
      id: this.$id,
      nodes: this.$nodeData,
      lines: this.$lineData,
      areas: this.$areaData,
      initNum: this.$max
    };
    for (var k1 in ret.nodes) {
      if (!ret.nodes[k1].marked) {
        delete ret.nodes[k1]['marked'];
      }
    }
    for (var k2 in ret.lines) {
      if (!ret.lines[k2].marked) {
        delete ret.lines[k2]['marked'];
      }
    }
    return ret;
  },
  exportDataToXML: function (JsonData) {
    let file = `
    <?xml version="1.0" encoding="UTF-8"?>
    <definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:activiti="http://activiti.org/bpmn" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xmlns:tns="http://www.activiti.org/test" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="test2019" exporter="camunda modeler" exporterVersion="2.7.1" name="" targetNamespace="http://www.activiti.org/test">
                <process id="${this.$id}" name="${this.$title}" isExecutable="true">
        `
    let nodeData = '',
        lineData = '',
        detail = '',
        startData = '',
        data = '',
        endData = '';
    // 转换节点
    for (let itemNode in this.$nodeData) {
        if (this.$nodeData[itemNode].type.indexOf('start') >= 0) {
            startData += `
                <startEvent id="${itemNode}" name="${this.$nodeData[itemNode].name}">
                    ${this.checkNodeLine(itemNode)}
                </startEvent>
            `
        } else if (this.$nodeData[itemNode].type.indexOf('end') >= 0) {
            endData += `
                <endEvent id="${itemNode}" name="${this.$nodeData[itemNode].name}">
                    ${this.checkNodeLine(itemNode)}
                </endEvent>
            `
        } else if (this.$nodeData[itemNode].type === 'plug') {
            data += `
                <exclusiveGateway id="${itemNode}" name="${this.$nodeData[itemNode].name}">
                    ${this.checkNodeLine(itemNode)}
                </exclusiveGateway>
            `
        } else {
            data += `
                <userTask id="${itemNode}" activiti:candidateGroups="${this.$nodeData[itemNode].group}" activiti:exclusive="true" name="${this.$nodeData[itemNode].name}">
                    ${this.checkNodeLine(itemNode)}
                </userTask>
            `
        }
    }
    nodeData = startData + data + endData;
    // 转换线
    for (let item in this.$lineData) {
        if (this.$lineData[item].rules) {
            lineData += `
                <sequenceFlow id="${item}" sourceRef="${this.$lineData[item].from}" targetRef="${this.$lineData[item].to}">
                    <conditionExpression xsi:type="tFormalExpression">
                        <![CDATA[ ${this.$lineData[item].rules} ]]>
                    </conditionExpression>
                </sequenceFlow>
            `
        } else {
            lineData += `
                <sequenceFlow id="${item}" sourceRef="${this.$lineData[item].from}" targetRef="${this.$lineData[item].to}"/>
            `
        }
    }
    lineData += '</process>'
    // 生成描述
    detail += ` 
            <bpmndi:BPMNDiagram documentation="background=#3C3F41;count=1;horizontalcount=1;orientation=0;width=842.4;height=1195.2;imageableWidth=832.4;imageableHeight=1185.2;imageableX=5.0;imageableY=5.0" id="Diagram-_1" name="New Diagram">
            <bpmndi:BPMNPlane bpmnElement="${this.$id}">
        `
    for (let item in this.$nodeData) {
        detail += `
            <bpmndi:BPMNShape id="Shape-${item}" bpmnElement="${item}">  
                <omgdc:Bounds height="${this.$nodeData[item].height}" width="${this.$nodeData[item].width}" x="${this.$nodeData[item].left}" y="${this.$nodeData[item].top}"/>
                <bpmndi:BPMNLabel>
                    <omgdc:Bounds height="${this.$nodeData[item].height}" width="${this.$nodeData[item].width}" x="0.0" y="0.0"/>
                </bpmndi:BPMNLabel>
            </bpmndi:BPMNShape>
        ` // + this.$nodeData[item].width / 2    //  + this.$nodeData[item].height / 2
    }
    for (let item in this.$lineData) {
        if (this.$lineData[item].type !== 'sl') {
            let arr = this.calcPolyPoints(this.$nodeData[this.$lineData[item].from], this.$nodeData[this.$lineData[item].to], this.$lineData[item].type, this.$lineData[item].M)
            detail += `
                <bpmndi:BPMNEdge id="BPMNEdge_${item}" bpmnElement="${item}">
                    <omgdi:waypoint xsi:type="omgdc:Point" x="${arr.start[0]}" y="${arr.start[1]}"/>
                    <omgdi:waypoint xsi:type="omgdc:Point" x="${arr.m1[0]}" y="${arr.m1[1]}"/>
                    <omgdi:waypoint xsi:type="omgdc:Point" x="${arr.m2[0]}" y="${arr.m2[1]}"/>
                    <omgdi:waypoint xsi:type="omgdc:Point" x="${arr.end[0]}" y="${arr.end[1]}"/>
                    <bpmndi:BPMNLabel>
                        <omgdc:Bounds height="-1.0" width="-1.0" x="-1.0" y="-1.0"/>
                    </bpmndi:BPMNLabel>
                </bpmndi:BPMNEdge>
            `
        } else {
            let arr = this.calcStartEnd(this.$nodeData[this.$lineData[item].from], this.$nodeData[this.$lineData[item].to])
            detail += `
                <bpmndi:BPMNEdge id="BPMNEdge_${item}" bpmnElement="${item}">
                    <omgdi:waypoint xsi:type="omgdc:Point" x="${arr.start[0]}" y="${arr.start[1]}"/>
                    <omgdi:waypoint xsi:type="omgdc:Point" x="${arr.end[0]}" y="${arr.end[1]}"/>
                    <bpmndi:BPMNLabel>
                        <omgdc:Bounds height="-1.0" width="-1.0" x="-1.0" y="-1.0"/>
                    </bpmndi:BPMNLabel>
                </bpmndi:BPMNEdge>
            `
        }
    }
    detail += `
                </bpmndi:BPMNPlane>
            </bpmndi:BPMNDiagram>
        </definitions>
    `
    return (file + nodeData + lineData + detail)
  },
//   addRule: function (id, rules) {
//       this.$lineData[id].rules = '';
//       this.$lineData[id].rules = rules;
//   },
  checkNodeLine: function (itemName) {
    let goIn = '';
    let goOut = '';
    for (let itemLine in this.$lineData) {
        if (this.$lineData[itemLine].from === itemName) {
            goOut += '<outgoing>' + itemLine + '</outgoing>'
        } else if (this.$lineData[itemLine].to === itemName) {
            goIn += '<incoming>' + itemLine + '</incoming>'
        }
    }
    return (goIn + goOut)
  },
  // 只把本次编辑流程图中作了变更(包括增删改)的元素导出到一个变量中,以方便用户每次编辑载入的流程图后只获取变更过的数据
  exportAlter: function () {
    var ret = {
      nodes: {},
      lines: {},
      areas: {}
    };
    for (var k1 in this.$nodeData) {
      if (this.$nodeData[k1].alt) {
        ret.nodes[k1] = this.$nodeData[k1];
      }
    }
    for (var k2 in this.$lineData) {
      if (this.$lineData[k2].alt) {
        ret.lines[k2] = this.$lineData[k2];
      }
    }
    for (var k3 in this.$areaData) {
      if (this.$areaData[k3].alt) {
        ret.areas[k3] = this.$areaData[k3];
      }
    }
    ret.deletedItem = this.$deletedItem;
    return ret;
  },
  // 变更元素的ID,一般用于快速保存后,将后台返回新元素的ID更新到页面中;type为元素类型(节点,连线,区块)
  transNewId: function (oldId, newId, type) {
    var tmp;
    switch (type) {
      case 'node':
        if (this.$nodeData[oldId]) {
          tmp = this.$nodeData[oldId];
          delete this.$nodeData[oldId];
          this.$nodeData[newId] = tmp;
          tmp = this.$nodeDom[oldId].attr('id', newId);
          delete this.$nodeDom[oldId];
          this.$nodeDom[newId] = tmp;
        }
        break;
      case 'line':
        if (this.$lineData[oldId]) {
          tmp = this.$lineData[oldId];
          delete this.$lineData[oldId];
          this.$lineData[newId] = tmp;
          tmp = this.$lineDom[oldId].attr('id', newId);
          delete this.$lineDom[oldId];
          this.$lineDom[newId] = tmp;
        }
        break;
      case 'area':
        if (this.$areaData[oldId]) {
          tmp = this.$areaData[oldId];
          delete this.$areaData[oldId];
          this.$areaData[newId] = tmp;
          tmp = this.$areaDom[oldId].attr('id', newId);
          delete this.$areaDom[oldId];
          this.$areaDom[newId] = tmp;
        }
        break;
    }
  },
  // 清空工作区及已载入的数据
  clearData: function () {
    for (var key in this.$nodeData) {
      this.delNode(key);
    }
    for (var key in this.$lineData) {
      this.delLine(key);
    }
    for (var key in this.$areaData) {
      this.delArea(key);
    }
    this.$deletedItem = {};
  },
  // 销毁自己
  destrory: function () {
    this.$bgDiv.empty();
    this.$lineData = null;
    this.$nodeData = null;
    this.$lineDom = null;
    this.$nodeDom = null;
    this.$areaDom = null;
    this.$areaData = null;
    this.$nodeCount = 0;
    this.$areaCount = 0;
    this.$areaCount = 0;
    this.$deletedItem = {};
  },
  /// ////////以下为有关画线的方法
  // 绘制一条箭头线，并返回线的DOM
  drawLine: function (id, sp, ep, mark, dash) {
    var line;
    if (GooFlow.prototype.useSVG != '') {
      line = document.createElementNS('http://www.w3.org/2000/svg', 'g');
      var hi = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

      if (id != '') line.setAttribute('id', id);
      line.setAttribute('from', sp[0] + ',' + sp[1]);
      line.setAttribute('to', ep[0] + ',' + ep[1]);
      hi.setAttribute('visibility', 'hidden');
      hi.setAttribute('stroke-width', 9);
      hi.setAttribute('fill', 'none');
      hi.setAttribute('stroke', 'white');
      hi.setAttribute('d', 'M ' + sp[0] + ' ' + sp[1] + ' L ' + ep[0] + ' ' + ep[1]);
      hi.setAttribute('pointer-events', 'stroke');
      path.setAttribute('d', 'M ' + sp[0] + ' ' + sp[1] + ' L ' + ep[0] + ' ' + ep[1]);
      path.setAttribute('stroke-width', mark ? 2.4 : 1.4);
      path.setAttribute('stroke-linecap', 'round');
      path.setAttribute('fill', 'none');
      if (dash) path.setAttribute('style', 'stroke-dasharray:6,5');
      if (mark) {
        path.setAttribute('stroke', GooFlow.prototype.color.mark || '#ff8800');
        path.setAttribute('marker-end', 'url(#arrow2)');
      } else {
        path.setAttribute('stroke', GooFlow.prototype.color.line || '#3892D3');
        path.setAttribute('marker-end', 'url(#arrow1)');
      }
      line.appendChild(hi);
      line.appendChild(path);
      line.style.cursor = 'crosshair';
      if (id != '' && id != 'GooFlow_tmp_line') {
        var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('fill', GooFlow.prototype.color.lineFont || '#333');
        line.appendChild(text);
        var x = (ep[0] + sp[0]) / 2;
        var y = (ep[1] + sp[1]) / 2;
        text.setAttribute('text-anchor', 'middle');
        text.setAttribute('x', x);
        text.setAttribute('y', y);
        line.style.cursor = 'pointer';
        text.style.cursor = 'text';
      }
    } else {
      line = document.createElement('v:polyline');
      if (id != '') line.id = id;
      // line.style.position="absolute";
      line.points.value = sp[0] + ',' + sp[1] + ' ' + ep[0] + ',' + ep[1];
      line.setAttribute('fromTo', sp[0] + ',' + sp[1] + ',' + ep[0] + ',' + ep[1]);
      line.strokeWeight = '1.2';
      line.stroke.EndArrow = 'Block';
      line.style.cursor = 'crosshair';
      if (id != '' && id != 'GooFlow_tmp_line') {
        var text = document.createElement('div');
        // text.innerHTML=id;
        line.appendChild(text);
        var x = (ep[0] - sp[0]) / 2;
        var y = (ep[1] - sp[1]) / 2;
        if (x < 0) x = x * -1;
        if (y < 0) y = y * -1;
        text.style.left = x + 'px';
        text.style.top = y - 6 + 'px';
        line.style.cursor = 'pointer';
      }
      if (dash) line.stroke.dashstyle = 'Dash';
      if (mark) line.strokeColor = GooFlow.prototype.color.mark || '#ff8800';
      else line.strokeColor = GooFlow.prototype.color.line || '#3892D3';
      line.fillColor = GooFlow.prototype.color.line || '#3892D3';
    }
    return line;
  },
  // 画一条只有两个中点的折线
  drawPoly: function (id, sp, m1, m2, ep, mark) {
    var poly, strPath;
    if (GooFlow.prototype.useSVG != '') {
      poly = document.createElementNS('http://www.w3.org/2000/svg', 'g');
      var hi = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      if (id != '') poly.setAttribute('id', id);
      poly.setAttribute('from', sp[0] + ',' + sp[1]);
      poly.setAttribute('to', ep[0] + ',' + ep[1]);
      hi.setAttribute('visibility', 'hidden');
      hi.setAttribute('stroke-width', 9);
      hi.setAttribute('fill', 'none');
      hi.setAttribute('stroke', 'white');
      strPath = 'M ' + sp[0] + ' ' + sp[1];
      if (m1[0] != sp[0] || m1[1] != sp[1]) {
        strPath += ' L ' + m1[0] + ' ' + m1[1];
      }
      if (m2[0] != ep[0] || m2[1] != ep[1]) {
        strPath += ' L ' + m2[0] + ' ' + m2[1];
      }
      strPath += ' L ' + ep[0] + ' ' + ep[1];
      hi.setAttribute('d', strPath);
      hi.setAttribute('pointer-events', 'stroke');
      path.setAttribute('d', strPath);
      path.setAttribute('stroke-width', mark ? 2.4 : 1.4);
      path.setAttribute('stroke-linecap', 'round');
      path.setAttribute('fill', 'none');
      if (mark) {
        path.setAttribute('stroke', GooFlow.prototype.color.mark || '#ff8800');
        path.setAttribute('marker-end', 'url(#arrow2)');
      } else {
        path.setAttribute('stroke', GooFlow.prototype.color.line || '#3892D3');
        path.setAttribute('marker-end', 'url(#arrow1)');
      }
      poly.appendChild(hi);
      poly.appendChild(path);
      var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      text.setAttribute('fill', GooFlow.prototype.color.lineFont || '#333');
      poly.appendChild(text);
      var x = (m2[0] + m1[0]) / 2;
      var y = (m2[1] + m1[1]) / 2;
      text.setAttribute('text-anchor', 'middle');
      text.setAttribute('x', x);
      text.setAttribute('y', y);
      text.style.cursor = 'text';
      poly.style.cursor = 'pointer';
    } else {
      poly = document.createElement('v:Polyline');
      if (id != '') poly.id = id;
      poly.filled = 'false';
      strPath = sp[0] + ',' + sp[1];
      if (m1[0] != sp[0] || m1[1] != sp[1]) {
        strPath += ' ' + m1[0] + ',' + m1[1];
      }
      if (m2[0] != ep[0] || m2[1] != ep[1]) {
        strPath += ' ' + m2[0] + ',' + m2[1];
      }
      strPath += ' ' + ep[0] + ',' + ep[1];
      poly.points.value = strPath;
      poly.setAttribute('fromTo', sp[0] + ',' + sp[1] + ',' + ep[0] + ',' + ep[1]);
      poly.strokeWeight = mark ? '2.4' : '1.2';
      poly.stroke.EndArrow = 'Block';
      var text = document.createElement('div');
      // text.innerHTML=id;
      poly.appendChild(text);
      var x = (m2[0] - m1[0]) / 2;
      var y = (m2[1] - m1[1]) / 2;
      if (x < 0) x = x * -1;
      if (y < 0) y = y * -1;
      text.style.left = x + 'px';
      text.style.top = y - 4 + 'px';
      poly.style.cursor = 'pointer';
      if (mark) poly.strokeColor = GooFlow.prototype.color.mark || '#ff8800';
      else poly.strokeColor = GooFlow.prototype.color.line || '#3892D3';
    }
    return poly;
  },
  // 计算两个结点间要连直线的话，连线的开始坐标和结束坐标
  calcStartEnd: function (n1, n2) {
    var X_1, Y_1, X_2, Y_2;
    // X判断：
    var x11 = n1.left,
      x12 = n1.left + n1.width,
      x21 = n2.left,
      x22 = n2.left + n2.width;
    // 结点2在结点1左边
    if (x11 >= x22) {
      X_1 = x11;
      X_2 = x22;
    }
    // 结点2在结点1右边
    else if (x12 <= x21) {
      X_1 = x12;
      X_2 = x21;
    }
    // 结点2在结点1水平部分重合
    else if (x11 <= x21 && x12 >= x21 && x12 <= x22) {
      X_1 = (x12 + x21) / 2;
      X_2 = X_1;
    } else if (x11 >= x21 && x12 <= x22) {
      X_1 = (x11 + x12) / 2;
      X_2 = X_1;
    } else if (x21 >= x11 && x22 <= x12) {
      X_1 = (x21 + x22) / 2;
      X_2 = X_1;
    } else if (x11 <= x22 && x12 >= x22) {
      X_1 = (x11 + x22) / 2;
      X_2 = X_1;
    }

    // Y判断：
    var y11 = n1.top,
      y12 = n1.top + n1.height,
      y21 = n2.top,
      y22 = n2.top + n2.height;
    // 结点2在结点1上边
    if (y11 >= y22) {
      Y_1 = y11;
      Y_2 = y22;
    }
    // 结点2在结点1下边
    else if (y12 <= y21) {
      Y_1 = y12;
      Y_2 = y21;
    }
    // 结点2在结点1垂直部分重合
    else if (y11 <= y21 && y12 >= y21 && y12 <= y22) {
      Y_1 = (y12 + y21) / 2;
      Y_2 = Y_1;
    } else if (y11 >= y21 && y12 <= y22) {
      Y_1 = (y11 + y12) / 2;
      Y_2 = Y_1;
    } else if (y21 >= y11 && y22 <= y12) {
      Y_1 = (y21 + y22) / 2;
      Y_2 = Y_1;
    } else if (y11 <= y22 && y12 >= y22) {
      Y_1 = (y11 + y22) / 2;
      Y_2 = Y_1;
    }
    return {
      'start': [X_1, Y_1],
      'end': [X_2, Y_2]
    };
  },
  // 计算两个结点间要连折线的话，连线的所有坐标
  calcPolyPoints: function (n1, n2, type, M) {
    // 开始/结束两个结点的中心
    var SP = {
      x: n1.left + n1.width / 2,
      y: n1.top + n1.height / 2
    };
    var EP = {
      x: n2.left + n2.width / 2,
      y: n2.top + n2.height / 2
    };
    var sp = [],
      m1 = [],
      m2 = [],
      ep = [];
    // 如果是允许中段可左右移动的折线,则参数M为可移动中段线的X坐标
    // 粗略计算起始点
    sp = [SP.x, SP.y];
    ep = [EP.x, EP.y];
    if (type == 'lr') {
      // 粗略计算2个中点
      m1 = [M, SP.y];
      m2 = [M, EP.y];
      // 再具体分析修改开始点和中点1
      if (m1[0] > n1.left && m1[0] < n1.left + n1.width) {
        m1[1] = (SP.y > EP.y ? n1.top : n1.top + n1.height);
        sp[0] = m1[0];
        sp[1] = m1[1];
      } else {
        sp[0] = (m1[0] < n1.left ? n1.left : n1.left + n1.width)
      }
      // 再具体分析中点2和结束点
      if (m2[0] > n2.left && m2[0] < n2.left + n2.width) {
        m2[1] = (SP.y > EP.y ? n2.top + n2.height : n2.top);
        ep[0] = m2[0];
        ep[1] = m2[1];
      } else {
        ep[0] = (m2[0] < n2.left ? n2.left : n2.left + n2.width)
      }
    }
    // 如果是允许中段可上下移动的折线,则参数M为可移动中段线的Y坐标
    else if (type == 'tb') {
      // 粗略计算2个中点
      m1 = [SP.x, M];
      m2 = [EP.x, M];
      // 再具体分析修改开始点和中点1
      if (m1[1] > n1.top && m1[1] < n1.top + n1.height) {
        m1[0] = (SP.x > EP.x ? n1.left : n1.left + n1.width);
        sp[0] = m1[0];
        sp[1] = m1[1];
      } else {
        sp[1] = (m1[1] < n1.top ? n1.top : n1.top + n1.height)
      }
      // 再具体分析中点2和结束点
      if (m2[1] > n2.top && m2[1] < n2.top + n2.height) {
        m2[0] = (SP.x > EP.x ? n2.left + n2.width : n2.left);
        ep[0] = m2[0];
        ep[1] = m2[1];
      } else {
        ep[1] = (m2[1] < n2.top ? n2.top : n2.top + n2.height);
      }
    }
    return {
      start: sp,
      m1: m1,
      m2: m2,
      end: ep
    };
  },
  // 初始化折线中段的X/Y坐标,mType='rb'时为X坐标,mType='tb'时为Y坐标
  getMValue: function (n1, n2, mType) {
    if (mType == 'lr') {
      return (n1.left + n1.width / 2 + n2.left + n2.width / 2) / 2;
    } else if (mType == 'tb') {
      return (n1.top + n1.height / 2 + n2.top + n2.height / 2) / 2;
    }
  },
  // 原lineData已经设定好的情况下，只在绘图工作区画一条线的页面元素
  addLineDom: function (id, lineData) {
    var n1 = this.$nodeData[lineData.from],
      n2 = this.$nodeData[lineData.to]; // 获取开始/结束结点的数据
    if (!n1 || !n2) return;
    // 开始计算线端点坐标
    var res;
    if (lineData.type && lineData.type != 'sl') {
      res = GooFlow.prototype.calcPolyPoints(n1, n2, lineData.type, lineData.M);
    } else {
      res = GooFlow.prototype.calcStartEnd(n1, n2);
    }
    if (!res) return;

    if (lineData.type == 'sl') {
      this.$lineDom[id] = GooFlow.prototype.drawLine(id, res.start, res.end, lineData.marked);
    } else {
      this.$lineDom[id] = GooFlow.prototype.drawPoly(id, res.start, res.m1, res.m2, res.end, lineData.marked);
    }
    this.$draw.appendChild(this.$lineDom[id]);
    if (GooFlow.prototype.useSVG == '') {
      this.$lineDom[id].childNodes[1].innerHTML = lineData.name;
      if (lineData.type != 'sl') {
        var Min = (res.start[0] > res.end[0] ? res.end[0] : res.start[0]);
        if (Min > res.m2[0]) Min = res.m2[0];
        if (Min > res.m1[0]) Min = res.m1[0];
        this.$lineDom[id].childNodes[1].style.left = (res.m2[0] + res.m1[0]) / 2 - Min - this.$lineDom[id].childNodes[1].offsetWidth / 2 + 4;
        Min = (res.start[1] > res.end[1] ? res.end[1] : res.start[1]);
        if (Min > res.m2[1]) Min = res.m2[1];
        if (Min > res.m1[1]) Min = res.m1[1];
        this.$lineDom[id].childNodes[1].style.top = (res.m2[1] + res.m1[1]) / 2 - Min - this.$lineDom[id].childNodes[1].offsetHeight / 2;
      } else {
        this.$lineDom[id].childNodes[1].style.left =
          ((res.end[0] - res.start[0]) * (res.end[0] > res.start[0] ? 1 : -1) - this.$lineDom[id].childNodes[1].offsetWidth) / 2 + 4;
      }
    } else this.$lineDom[id].childNodes[2].textContent = lineData.name;
  },
  // 增加一条线
  addLine: function (id, json) {
    if (this.onItemAdd != null && !this.onItemAdd(id, 'line', json)) return;
    if (this.$undoStack && this.$editable) {
      this.pushOper('delLine', [id]);
    }
    if (json.from == json.to) return;
    var n1 = this.$nodeData[json.from],
      n2 = this.$nodeData[json.to]; // 获取开始/结束结点的数据
    if (!n1 || !n2) return;
    // 避免两个节点间不能有一条以上同向接连线
    for (var k in this.$lineData) {
      if ((json.from == this.$lineData[k].from && json.to == this.$lineData[k].to)) {
        return;
      }
    }
    // 设置$lineData[id]
    this.$lineData[id] = {};
    if (json.type) {
      this.$lineData[id].type = json.type;
      this.$lineData[id].M = json.M;
    } else this.$lineData[id].type = 'sl'; // 默认为直线
    this.$lineData[id].from = json.from;
    this.$lineData[id].to = json.to;
    this.$lineData[id].name = json.name;
    this.$lineData[id].rules = '';

    if (json.marked) this.$lineData[id].marked = json.marked;
    else this.$lineData[id].marked = false;
    // 设置$lineData[id]完毕

    this.addLineDom(id, this.$lineData[id]);

    ++this.$lineCount;
    if (this.$editable) {
      this.$lineData[id].alt = true;
      if (this.$deletedItem[id]) delete this.$deletedItem[id]; // 在回退删除操作时,去掉该元素的删除记录
    }
  },
  // 重构所有连向某个结点的线的显示，传参结构为$nodeData数组的一个单元结构
  resetLines: function (id, node) {
    for (var i in this.$lineData) {
      var other = null; // 获取结束/开始结点的数据
      var res;
      if (this.$lineData[i].from == id) { // 找结束点
        other = this.$nodeData[this.$lineData[i].to] || null;
        if (other == null) continue;
        if (this.$lineData[i].type == 'sl') {
          res = GooFlow.prototype.calcStartEnd(node, other);
        } else {
          res = GooFlow.prototype.calcPolyPoints(node, other, this.$lineData[i].type, this.$lineData[i].M)
        }
        if (!res) break;
      } else if (this.$lineData[i].to == id) { // 找开始点
        other = this.$nodeData[this.$lineData[i].from] || null;
        if (other == null) continue;
        if (this.$lineData[i].type == 'sl') {
          res = GooFlow.prototype.calcStartEnd(other, node);
        } else {
          res = GooFlow.prototype.calcPolyPoints(other, node, this.$lineData[i].type, this.$lineData[i].M);
        }
        if (!res) break;
      }
      if (other == null) continue;
      this.$draw.removeChild(this.$lineDom[i]);
      if (this.$lineData[i].type == 'sl') {
        this.$lineDom[i] = GooFlow.prototype.drawLine(i, res.start, res.end, this.$lineData[i].marked);
      } else {
        this.$lineDom[i] = GooFlow.prototype.drawPoly(i, res.start, res.m1, res.m2, res.end, this.$lineData[i].marked);
      }
      this.$draw.appendChild(this.$lineDom[i]);
      if (GooFlow.prototype.useSVG == '') {
        this.$lineDom[i].childNodes[1].innerHTML = this.$lineData[i].name;
        if (this.$lineData[i].type != 'sl') {
          var Min = (res.start[0] > res.end[0] ? res.end[0] : res.start[0]);
          if (Min > res.m2[0]) Min = res.m2[0];
          if (Min > res.m1[0]) Min = res.m1[0];
          this.$lineDom[i].childNodes[1].style.left = (res.m2[0] + res.m1[0]) / 2 - Min - this.$lineDom[i].childNodes[1].offsetWidth / 2 + 4;
          Min = (res.start[1] > res.end[1] ? res.end[1] : res.start[1]);
          if (Min > res.m2[1]) Min = res.m2[1];
          if (Min > res.m1[1]) Min = res.m1[1];
          this.$lineDom[i].childNodes[1].style.top = (res.m2[1] + res.m1[1]) / 2 - Min - this.$lineDom[i].childNodes[1].offsetHeight / 2 - 4;
        } else {
          this.$lineDom[i].childNodes[1].style.left =
            ((res.end[0] - res.start[0]) * (res.end[0] > res.start[0] ? 1 : -1) - this.$lineDom[i].childNodes[1].offsetWidth) / 2 + 4;
        }
      } else this.$lineDom[i].childNodes[2].textContent = this.$lineData[i].name;
    }
  },
  // 重新设置连线的样式 newType= "sl":直线, "lr":中段可左右移动型折线, "tb":中段可上下移动型折线
  setLineType: function (id, newType, M) {
    if (!newType || newType == null || newType == '' || newType == this.$lineData[id].type) return false;
    if (this.onLineSetType != null && !this.onLineSetType(id, newType)) return;
    if (this.$undoStack) {
      var paras = [id, this.$lineData[id].type, this.$lineData[id].M];
      this.pushOper('setLineType', paras);
    }
    var from = this.$lineData[id].from;
    var to = this.$lineData[id].to;
    this.$lineData[id].type = newType;
    var res;
    // 如果是变成折线
    if (newType != 'sl') {
      var res = GooFlow.prototype.calcPolyPoints(this.$nodeData[from], this.$nodeData[to], this.$lineData[id].type, this.$lineData[id].M);
      if (M) {
        this.setLineM(id, M, true);
      } else {
        this.setLineM(id, this.getMValue(this.$nodeData[from], this.$nodeData[to], newType), true);
      }
    }
    // 如果是变回直线
    else {
      delete this.$lineData[id].M;
      this.$lineMove.hide().removeData('type').removeData('tid');
      res = GooFlow.prototype.calcStartEnd(this.$nodeData[from], this.$nodeData[to]);
      if (!res) return;
      this.$draw.removeChild(this.$lineDom[id]);
      this.$lineDom[id] = GooFlow.prototype.drawLine(id, res.start, res.end, this.$lineData[id].marked);
      this.$draw.appendChild(this.$lineDom[id]);
      if (GooFlow.prototype.useSVG == '') {
        this.$lineDom[id].childNodes[1].innerHTML = this.$lineData[id].name;
        this.$lineDom[id].childNodes[1].style.left =
          ((res.end[0] - res.start[0]) * (res.end[0] > res.start[0] ? 1 : -1) - this.$lineDom[id].childNodes[1].offsetWidth) / 2 + 4;
      } else {
        this.$lineDom[id].childNodes[2].textContent = this.$lineData[id].name;
      }
    }
    if (this.$focus == id) {
      this.focusItem(id);
    }
    if (this.$editable) {
      this.$lineData[id].alt = true;
    }
  },
  // 设置折线中段的X坐标值（可左右移动时）或Y坐标值（可上下移动时）
  setLineM: function (id, M, noStack) {
    if (!this.$lineData[id] || M < 0 || !this.$lineData[id].type || this.$lineData[id].type == 'sl') return false;
    if (this.onLineMove != null && !this.onLineMove(id, M)) return false;
    if (this.$undoStack && !noStack) {
      var paras = [id, this.$lineData[id].M];
      this.pushOper('setLineM', paras);
    }
    var from = this.$lineData[id].from;
    var to = this.$lineData[id].to;
    this.$lineData[id].M = M;
    var ps = GooFlow.prototype.calcPolyPoints(this.$nodeData[from], this.$nodeData[to], this.$lineData[id].type, this.$lineData[id].M);
    this.$draw.removeChild(this.$lineDom[id]);
    this.$lineDom[id] = GooFlow.prototype.drawPoly(id, ps.start, ps.m1, ps.m2, ps.end, this.$lineData[id].marked);
    this.$draw.appendChild(this.$lineDom[id]);
    if (GooFlow.prototype.useSVG == '') {
      this.$lineDom[id].childNodes[1].innerHTML = this.$lineData[id].name;
      var Min = (ps.start[0] > ps.end[0] ? ps.end[0] : ps.start[0]);
      if (Min > ps.m2[0]) Min = ps.m2[0];
      if (Min > ps.m1[0]) Min = ps.m1[0];
      this.$lineDom[id].childNodes[1].style.left = (ps.m2[0] + ps.m1[0]) / 2 - Min - this.$lineDom[id].childNodes[1].offsetWidth / 2 + 4;
      Min = (ps.start[1] > ps.end[1] ? ps.end[1] : ps.start[1]);
      if (Min > ps.m2[1]) Min = ps.m2[1];
      if (Min > ps.m1[1]) Min = ps.m1[1];
      this.$lineDom[id].childNodes[1].style.top = (ps.m2[1] + ps.m1[1]) / 2 - Min - this.$lineDom[id].childNodes[1].offsetHeight / 2 - 4;
    } else this.$lineDom[id].childNodes[2].textContent = this.$lineData[id].name;
    if (this.$editable) {
      this.$lineData[id].alt = true;
    }
  },
  // 删除转换线
  delLine: function (id, trigger) {
    if (!this.$lineData[id]) return;
    if (trigger != false && this.onItemDel != null && !this.onItemDel(id, 'node')) return;
    if (this.$undoStack) {
      var paras = [id, this.$lineData[id]];
      this.pushOper('addLine', paras);
    }
    this.$draw.removeChild(this.$lineDom[id]);
    delete this.$lineData[id];
    delete this.$lineDom[id];
    if (this.$focus == id) this.$focus = '';
    --this.$lineCount;
    if (this.$editable) {
      // 在回退新增操作时,如果节点ID以this.$id+"_line_"开头,则表示为本次编辑时新加入的节点,这些节点的删除不用加入到$deletedItem中
      if (id.indexOf(this.$id + '_line_') < 0) {
        this.$deletedItem[id] = 'line';
      }
      this.$mpFrom.hide().removeData('p');
      this.$mpTo.hide().removeData('p');
    }
    if (this.$lineOper) {
      this.$lineOper.hide().removeData('tid');
    }
  },
  // 变更连线两个端点所连的结点
  // 参数：要变更端点的连线ID，新的开始结点ID、新的结束结点ID；如果开始/结束结点ID是传入null或者""，则表示原端点不变
  moveLinePoints: function (lineId, newStart, newEnd, noStack) {
    if (newStart == newEnd) return;
    if (!lineId || !this.$lineData[lineId]) return;
    if (newStart == null || newStart == '') {
      newStart = this.$lineData[lineId].from;
    }
    if (newEnd == null || newEnd == '') {
      newEnd = this.$lineData[lineId].to;
    }

    // 避免两个节点间不能有一条以上同向接连线
    for (var k in this.$lineData) {
      if ((newStart == this.$lineData[k].from && newEnd == this.$lineData[k].to)) {
        return;
      }
    }
    if (this.onLinePointMove != null && !this.onLinePointMove(id, newStart, newEnd)) return;
    if (this.$undoStack && !noStack) {
      var paras = [lineId, this.$lineData[lineId].from, this.$lineData[lineId].to];
      this.pushOper('moveLinePoints', paras);
    }
    if (newStart != null && newStart != '') {
      this.$lineData[lineId].from = newStart;
    }
    if (newEnd != null && newEnd != '') {
      this.$lineData[lineId].to = newEnd;
    }
    // 重建转换线
    this.$draw.removeChild(this.$lineDom[lineId]);
    this.addLineDom(lineId, this.$lineData[lineId]);
    if (this.$editable) {
      this.$lineData[lineId].alt = true;
    }
  },

  // 用颜色标注/取消标注一个结点或转换线，常用于显示重点或流程的进度。
  // 这是一个在编辑模式中无用,但是在纯浏览模式中非常有用的方法，实际运用中可用于跟踪流程的进度。
  markItem: function (id, type, mark) {
    if (type == 'node') {
      if (!this.$nodeData[id]) return;
      if (this.onItemMark != null && !this.onItemMark(id, 'node', mark)) return;
      this.$nodeData[id].marked = mark || false;
      if (mark) {
        this.$nodeDom[id].addClass('item_mark').css('border-color', GooFlow.prototype.color.mark);
      } else {
        this.$nodeDom[id].removeClass('item_mark');
        if (id != this.$focus) this.$nodeDom[id].css('border-color', 'transparent');
      }
    } else if (type == 'line') {
      if (!this.$lineData[id]) return;
      if (this.onItemMark != null && !this.onItemMark(id, 'line', mark)) return;
      this.$lineData[id].marked = mark || false;
      if (GooFlow.prototype.useSVG != '') {
        if (mark) {
          this.$lineDom[id].childNodes[1].setAttribute('stroke', GooFlow.prototype.color.mark || '#ff8800');
          this.$lineDom[id].childNodes[1].setAttribute('marker-end', 'url(#arrow2)');
          this.$lineDom[id].childNodes[1].setAttribute('stroke-width', 2.4);
        } else {
          this.$lineDom[id].childNodes[1].setAttribute('stroke', GooFlow.prototype.color.line || '#3892D3');
          this.$lineDom[id].childNodes[1].setAttribute('marker-end', 'url(#arrow1)');
          this.$lineDom[id].childNodes[1].setAttribute('stroke-width', 1.4);
        }
      } else {
        if (mark) {
          this.$lineDom[id].strokeColor = GooFlow.prototype.color.mark || '#ff8800';
          this.$lineDom[id].strokeWeight = '2.4';
        } else {
          this.$lineDom[id].strokeColor = GooFlow.prototype.color.line || '#3892D3';
          this.$lineDom[id].strokeWeight = '1.2';
        }
      }
    }
    if (this.$undoStatck) {
      var paras = [id, type, !mark];
      this.pushOper('markItem', paras);
    }
  },
  /// /////////////////////以下为区域分组块操作
  moveArea: function (id, left, top) {
    if (!this.$areaData[id]) return;
    if (this.onItemMove != null && !this.onItemMove(id, 'area', left, top)) return;
    if (this.$undoStack) {
      var paras = [id, this.$areaData[id].left, this.$areaData[id].top];
      this.pushOper('moveNode', paras);
    }
    if (left < 0) left = 0;
    if (top < 0) top = 0;
    $('#' + id).css({
      left: left + 'px',
      top: top + 'px'
    });
    this.$areaData[id].left = left;
    this.$areaData[id].top = top;
    if (this.$editable) {
      this.$areaData[id].alt = true;
    }
  },
  // 删除区域分组
  delArea: function (id, trigger) {
    if (!this.$areaData[id]) return;
    if (this.$undoStack) {
      var paras = [id, this.$areaData[id]];
      this.pushOper('addArea', paras);
    }
    if (trigger != false && this.onItemDel != null && !this.onItemDel(id, 'node')) return;
    delete this.$areaData[id];
    this.$areaDom[id].remove();
    delete this.$areaDom[id];
    --this.$areaCount;
    if (this.$editable) {
      // 在回退新增操作时,如果节点ID以this.$id+"_area_"开头,则表示为本次编辑时新加入的节点,这些节点的删除不用加入到$deletedItem中
      if (id.indexOf(this.$id + '_area_') < 0) {
        this.$deletedItem[id] = 'area';
      }
    }
  },
  // 设置区域分组的颜色
  setAreaColor: function (id, color) {
    if (!this.$areaData[id]) return;
    if (this.$undoStack) {
      var paras = [id, this.$areaData[id].color];
      this.pushOper('setAreaColor', paras);
    }
    if (color == 'red' || color == 'yellow' || color == 'blue' || color == 'green') {
      this.$areaDom[id].removeClass('area_' + this.$areaData[id].color).addClass('area_' + color);
      this.$areaData[id].color = color;
    }
    if (this.$editable) {
      this.$areaData[id].alt = true;
    }
  },
  // 设置区域分块的尺寸
  resizeArea: function (id, width, height) {
    if (!this.$areaData[id]) return;
    if (this.onItemResize != null && !this.onItemResize(id, 'area', width, height)) return;
    if (this.$undoStack) {
      var paras = [id, this.$areaData[id].width, this.$areaData[id].height];
      this.pushOper('resizeArea', paras);
    }

    this.$areaDom[id].children('.bg').css({
      width: width + 'px',
      height: height + 'px'
    });
    // width=this.$areaDom[id].outerWidth();
    // height=this.$areaDom[id].outerHeight();
    // this.$areaDom[id].children("bg").css({width:width+"px",height:height+"px"});
    this.$areaData[id].width = width;
    this.$areaData[id].height = height;
    if (this.$editable) {
      this.$areaData[id].alt = true;
    }
  },
  addArea: function (id, json) {
    if (this.onItemAdd != null && !this.onItemAdd(id, 'area', json)) return;
    if (this.$undoStack && this.$editable) {
      this.pushOper('delArea', [id]);
    }
    this.$areaDom[id] = $("<div id='" + id + "' class='GooFlow_area area_" + json.color + "' style='top:" + json.top + 'px;left:' + json.left + "px'><div class='bg' style='width:" + (json.width) + 'px;height:' + (json.height) + "px'></div>" +
      '<label>' + json.name + "</label><i></i><div><div class='rs_bottom'></div><div class='rs_right'></div><div class='rs_rb'></div><div class='rs_close'></div></div></div>");
    this.$areaData[id] = json;
    this.$group.append(this.$areaDom[id]);
    if (this.$nowType != 'group') this.$areaDom[id].children('div:eq(1)').css('display', 'none');
    ++this.$areaCount;
    if (this.$editable) {
      this.$areaData[id].alt = true;
      if (this.$deletedItem[id]) delete this.$deletedItem[id]; // 在回退删除操作时,去掉该元素的删除记录
    }
  },
  // 重构整个流程图设计器的宽高
  reinitSize: function (width, height) {
    var w = (width || 800);
    var h = (height || 500);
    this.$bgDiv.css({
      height: h + 'px',
      width: w + 'px'
    });
    var headHeight = 0,
      hack = 8;
    if (this.$head != null) {
      headHeight = 26;
      hack = 5;
    }
    if (this.$tool != null) {
      this.$tool.css({
        height: h - headHeight - hack + 'px'
      });
      w -= 31;
    }
    w -= 9;
    h = h - headHeight - (this.$head != null ? 5 : 8);
    this.$workArea.parent().css({
      height: h + 'px',
      width: w + 'px'
    });

    if (this.$workArea.width() > w) {
      w = this.$workArea.width();
    }
    if (this.$workArea.height() > h) {
      h = this.$workArea.height();
    }

    this.$workArea.css({
      height: h + 'px',
      width: w + 'px'
    });
    if (GooFlow.prototype.useSVG == '') {
      this.$draw.coordsize = w + ',' + h;
    }
    this.$draw.style.width = w + 'px';
    this.$draw.style.height = +h + 'px';
    if (this.$group != null) {
      this.$group.css({
        height: h + 'px',
        width: w + 'px'
      });
    }
  }
}
GooFlow.prototype.color = {};
// 将此类的构造函数加入至JQUERY对象中
jQuery.extend({
  createGooFlow: function (bgDiv, property) {
    return new GooFlow(bgDiv, property);
  }
});