// 定义一个区域图类：
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.$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 // 在自动/手动扩展可编辑区时，一次扩展后宽/高增加多少像素
  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)
      var t = getElCoordinate(this)
      X = ev.x - t.left + this.parentNode.scrollLeft
      Y = ev.y - t.top + this.parentNode.scrollTop
      This.addNode(new Date().getTime(), {
        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)
      var 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)
      var t = getElCoordinateOveride(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
      var 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
      }
    })

    // 选定一条转换线后出现的浮动操作栏，有改变线的样式和删除线等按钮。
    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
    this.onItemDbClick = 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 = getElCoordinateOveride(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)
      var t = getElCoordinateOveride(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
      var y = parseInt(p.style.top, 10) + 1
      var t = getElCoordinateOveride(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)
        var t = getElCoordinateOveride(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' : ''
    if (json.type.indexOf(' round') < 0) {
      if (!json.width || json.width < 104) json.width = 104
      if (!json.height || json.height < 26) json.height = 26
      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" +
          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='ico'><i class='ico_" +
          json.type +
          "'></i></td><td>" +
          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 {
      json.width = 26
      json.height = 26
      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='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])
    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('.ico', '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)
      var t = getElCoordinateOveride(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
      var 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)
          var 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')) {
          This.addLine(new Date().getTime(), {
            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 = getElCoordinateOveride(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')
      winDbClick(oldTxt, id)
      /* var t = getElCoordinateOveride(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)
        var t = getElCoordinateOveride(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'))
        return
      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')) return
      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=getElCoordinateOveride(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'))
        return
      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'))
        return
      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'))
        return
      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)
  },
  // 载入一组数据
  loadData: function(data) {
    var t = this.$editable
    this.$editable = false
    if (data.title) this.setTitle(data.title)
    if (data.initNum) this.$max = data.initNum
    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
    var 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
      }
    }
    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,
      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
  },
  // 只把本次编辑流程图中作了变更(包括增删改)的元素导出到一个变量中,以方便用户每次编辑载入的流程图后只获取变更过的数据
  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
    var x12 = n1.left + n1.width
    var x21 = n2.left
    var 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
    var y12 = n1.top + n1.height
    var y21 = n2.top
    var 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 = []
    var m1 = []
    var m2 = []
    var 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]
    var 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]
    var 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
    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
    var 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)
  }
})