//公共方法
var GooFunc = {
	getElCoordinate: function (dom) {
		var t = dom.offsetTop;
		var l = dom.offsetLeft;
		dom = dom.offsetParent;
		while (dom) {
			t += dom.offsetTop;
			l += dom.offsetLeft;
			dom = dom.offsetParent;
		};
		return {top: t, left: l};
	},
	mousePosition: function (ev) {
		var dom = document.getElementById('divIndexContent');
		var domX = dom.scrollLeft;
		var domY = dom.scrollTop;
		//兼容各种浏览器的,获取鼠标真实位置
		if (!ev) ev = window.event;
		if (ev.pageX || ev.pageY) {
			return {x: ev.pageX + domX, y: ev.pageY + domY};
		}
		return {
			x: ev.clientX + document.documentElement.scrollLeft - document.body.clientLeft,
			y: ev.clientY + document.documentElement.scrollTop - document.body.clientTop
		};
	},
	getAjaxData: function (url, successFn, completeFn) {
		$.ajax({
			url: url,
			type: 'GET',
			async: true,
			dataType: 'json',
			success: successFn,
			error: function (data, xhr, textStatus) {
				console.log('错误')
				console.log(xhr)
				console.log(textStatus)
			},
			complete: completeFn
		})
	}
}

/*
 * Todo:  ## 构造函数 ***************************************************************************************
 * Author: LE
 * Date: 2017/2/15
 * time: 14:59
 * */
function GooFlow(bgDiv, property,url) {
	/*
	 * Todo: 初始化属性设置 【初始化】
	 * Author: LE
	 * Date: 2017/2/15
	 * time: 15:17
	 * */
	// *************************************************** 【UI相关】
	this.$id = property.id || bgDiv.attr("id"); // 容器id
	this.$bgDiv = bgDiv;                        // 容器对象
	this.$headBox = null;                       // 头部容器对象
	this.$toolBar = null;                       // 工具栏操作
	this.$flowChart = null;                     // 流程图工具
	this.$contBox = null;                       // 主内容容器
	this.$contBoxLeft = null;                   // 端点内容
	this.$contBoxRight = null;                  // 转换器内容
	this.$workAreaWrap = null;                  // 流程图区域容器
	this.$workArea = null;                      // 流程图区域
	this.$draw = null;                          // SVG绘制区
	this.$fileCode = '';                        // 流程图文件唯一标识
	this.$fileName = '';                        // 流程图文件名称

	// *************************************************** 【线条相关】
	this.$lineData = {};                        // 数据
	this.$lineType = '';                        // 类型
	this.$lineCount = 0;                        // 数量
	this.$lineDom = {};                         // DOM
	this.$lineMoveing = false;                  // 是否在移动
	this.$deteLineId = '';                      // 删除指定ID
	this.$lineMove = null;                      // 线条移动镜像
	this.$canDelLine = false;                   // 是否使用Delete删除线条

	// *************************************************** 【结点相关】
	this.$nodeData = {};                        // 数据
	this.$nodeCount = 0;                        // 数量
	this.$nodeDom = {};                         // DOM
	this.$newNodeValue = '';                    // 值
	this.$nodeConfig = '';                    // 配置项
	this.$nodeType = '';                        // 结点类型
	this.$deteNodeId = '';                      // 删除指定ID
	this.$ghost = null;                         // 结点镜像

	// *************************************************** 【当前选中】
	this.$nowType = "cursor";                   // 当前操作类型
	this.$focus = "";                           // SVG操作区中选中对象

	// *************************************************** 【其他】
	this.$MainContener = property.MainContener; // 重要内容
	this.$editable = property.editable;         // 是否可编辑

	// *************************************************** 【公用变量】
	var that = this;

	// *************************************************** 【请求地址】
	var getAllEndpointsURL = url + "/process/getAllEndpoints",
		getAllProcessorsURL = url + "/process/getAllProcessors",
		dataPostURL = URL + "/process/json";



	/*
	 * Todo: 初始化布局 【初始化】
	 * Author: LE
	 * Date: 2017/2/15
	 * time: 15:17
	 * */
	this.$headBox = $("<div class='GooFlow_top_box'></div>");  // 头部
	this.$contBox = $("<div class='GooFlow_cont_box'></div>"); // 中间主体内容
	this.$bgDiv.append(this.$headBox).append(this.$contBox);

	/*
	 * Todo: 工具栏构建 【UI相关--HEAD】
	 * Author: LE
	 * Date: 2017/2/15
	 * time: 15:17
	 * */
	if (property.haveTool) {
		var HtmlStr = "",
			i = 0,
			length = property.toolBtns.length;

		// 工具栏UI构建
		HtmlStr = "<div class='GooFlow_tool'>";
		for (; i < length; ++i) {
			HtmlStr += "<i class='ico_" + property.toolBtns[i] + "'></i>";
		}
		HtmlStr += "</div>";
		this.$toolBar = $(HtmlStr);
		this.$headBox.append(this.$toolBar);

		// 工具栏功能绑定
		this.$toolBar.children().on("click", function () {
			var icoName = $(this).attr("class").match(/ico_\w+/g)[0];
			switch (icoName) {
				case "ico_save":
					that.exportData();
					break;
				case "ico_undo":
					that.undo();
					break;
				case "ico_redo":
					that.redo();
					break;
			}
		});
	}

	/*
	 * Todo: 流程图结点构建 【UI相关--HEAD】
	 * Author: LE
	 * Date: 2017/2/15
	 * time: 15:17
	 * */
	if (property.flowChart) {
		var HtmlStr = "",
			i = 0,
			length = property.flowBtns.length;
		// 流程图结点UI构建
		HtmlStr += "<div class='GooFlow_flowChart'>"
		// 加入用户自定义工具栏
		for (; i < length; ++i) {
			HtmlStr += "<i id='" + this.$id + "_btn_" + property.flowBtns[i] + "' class='ico_" + property.flowBtns[i] + "'/></i>";
		}
		HtmlStr += "</div>"
		this.$flowChart = $(HtmlStr);
		this.$headBox.append(this.$flowChart);
	}

	/*
	 * Todo: 端点及转换器公共筛选方法
	 * Author: LE
	 * Date: 2017/2/20
	 * time: 10:09
	 * */
	function itemSearchFn(obj) {
		var $list = obj.find($('.GooFlow_app_list_item'));
		var $input = obj.find($('.GooFlow_app_search_input'));
		var $item = obj.find($('.GooFlow_app_item'));
		$input.on('keyup', {inthis: that}, function () {
			var input = $input.val()
			if (input.length > 0) {
				$item.hide();
				var filterObj = $item.filter(function (index) {
					return $(this).text().indexOf(input) >= 0;
				})
				if (filterObj.length > 0) {
					filterObj.css("display", "block").parent().parent().parent().addClass('selected');
				} else {
					$item.show();
					$list.removeClass('selected');
				}
			}
			else {
				$item.show();
				$list.removeClass('selected');
			}
		})
	}

	/*
	 * Todo: 端点及转换器公共HTML结构搭建 【UI相关】
	 * Author: LE
	 * Date: 2017/2/20
	 * time: 10:09
	 * */
	function renderHtml(title, className, htmlStr) {
		var appBox = $("<div class='GooFlow_app'></div>");
		var appHead = $("<div class='GooFlow_app_head'><h1 class='GooFlow_app_tit'></h1><div class='GooFlow_app_search'><input class='GooFlow_app_search_input' type='text' placeholder='快速搜索'><div class='GooFlow_search_btn'></div></div></div>");
		var appCont = $("<div class='GooFlow_app_cont'><ul class='GooFlow_app_list'></ul></div>");

		appHead.children('.GooFlow_app_tit').text(title);
		appCont.children('.GooFlow_app_list').append(htmlStr);
		appBox.prepend(appHead).append(appCont).addClass(className);
		return appBox;
	}

	/*
	 * Todo: 端点数据渲染及事件添加 【UI相关】
	 * Author: LE
	 * Date: 2017/2/20
	 * time: 10:09
	 * */
	function getAllEndpointsFn(data) {
		var list = $.parseJSON(data.message),
			htmlStr = '';
		for (var i = 0; i < list.length; i++) {
			htmlStr += "<li class='GooFlow_app_list_item'>";
			htmlStr += "<div class='GooFlow_app_list_tit'>" + list[i].title + "</div>";
			htmlStr += "<div class='GooFlow_app_list_box'><ul>";
			for (var j = 0; j < list[i].list.length; j++) {
				htmlStr += "<li class='GooFlow_app_item' data-type='" + list[i].list[j].nodeType +
					"' data-value ='" + list[i].list[j].value + "' data-config='"  + list[i].list[j].config +
					"'><div class='app_icon'></div> <div class='app_name'>" + list[i].list[j].name + "</div></li>"
			}
			htmlStr += "</ul></li>";
		}
		if (htmlStr) {
			that.$contBoxLeft = renderHtml('端点', 'GooFlow_left', htmlStr);
			that.$contBox.prepend(that.$contBoxLeft)

			// tab标签页
			$('.GooFlow_app_list_tit', that.$contBoxLeft).on("click", function () {
				$('.GooFlow_app_item', that.$contBoxLeft).show();
				$(this).parent().toggleClass('selected').siblings().removeClass('selected');
			});
			// 拖拽
			addNodeByDrag($('.GooFlow_app_item', that.$contBoxLeft), 'task');
			// 筛选
			itemSearchFn(that.$contBoxLeft);

		}
	}

	/*
	 * Todo: 转换器数据渲染及事件添加 【UI相关】
	 * Author: LE
	 * Date: 2017/2/20
	 * time: 10:09
	 * */
	function getAllProcessorsFn(data) {

		var list = $.parseJSON(data.message),
			htmlStr = '';
		htmlStr += "<li class='GooFlow_app_list_item'><div class='GooFlow_app_list_box'><ul>";
		for (var i = 0; i < list.length; i++) {
			htmlStr += "<li class='GooFlow_app_item' data-type='" + list[i].nodeType +
				"' data-value='" + list[i].value + "' data-config='" + list[i].config +
				"'><div class='app_icon'></div> <div class='app_name'>" + list[i].name + "</div></li>"
		}
		htmlStr += "</ul></li>";
		if (htmlStr) {
			that.$contBoxRight = renderHtml('转换器', 'GooFlow_right', htmlStr);
			that.$contBox.prepend(that.$contBoxRight)

			// 拖拽
			addNodeByDrag($('.GooFlow_app_item', that.$contBoxRight), 'plug');
			// 筛选
			itemSearchFn(that.$contBoxRight);
		}
	}

	/*
	 * Todo: 端点及转换数据加载 【ajax相关】
	 * Author: LE
	 * Date: 2017/2/20
	 * time: 10:09
	 * */
	GooFunc.getAjaxData(getAllEndpointsURL, getAllEndpointsFn);
	GooFunc.getAjaxData(getAllProcessorsURL, getAllProcessorsFn);

	/*
	 * Todo: 画布区域HTML结构搭建 【UI相关】
	 * Author: LE
	 * Date: 2017/2/20
	 * time: 10:09
	 * */
	this.initDraw("draw_" + this.$id);

	// 结点镜像 & 文本框
	this.$ghost = $("<div class='rs_ghost GooFlow_item'></div>").attr({
		"unselectable": "on",
		"onselectstart": 'return false',
		"onselect": 'document.selection.empty()'
	});
	this.$textArea = $("<textarea class='text_input'></textarea>");
	this.$bgDiv.append(this.$ghost).append(this.$textArea);
	// 操作折线时的移动框 & 线条增删改操作框
	this.$lineMove = $("<div class='GooFlow_line_move' style='display:none'></div>");
	this.$lineOper = $("<div class='GooFlow_line_oper' style='display:none'><b class='b_l1'></b><b class='b_l2'></b><b class='b_l3'></b><b class='b_x'></b></div>");
	this.$workArea.append(this.$lineMove).append(this.$lineOper);

	/*
	 * Todo: 结点拖拽 【增加结点触发方法】
	 * Author: LE
	 * Date: 2017/2/20
	 * time: 10:03
	 * */
	var onDrag = false;
	function addNodeByDrag(obj, type) {
		obj.mousedown(function () {
			that.$nowType = type;
			if (!type) {
				var thisType = $(this).attr("id").split("btn_")[1];
				that.$nowType = thisType;
			}
			onDrag = true;
			that.$newNodeTxt = $(this).children('.app_name').text();
			that.$newNodeValue = $(this).attr('data-value');
			that.$nodeType = $(this).attr('data-type');
			that.$nodeConfig = $(this).attr('data-config');
		});
		$(document).mouseup(function () {
			onDrag = false;
		});
		that.$workArea.mousemove(function () {
			if (onDrag) {
				var X, Y;
				var ev = GooFunc.mousePosition();
				X = ev.x - 433 + this.parentNode.scrollLeft;
				Y = ev.y - 262 + this.parentNode.scrollTop;
				that.$workArea.children('#node-ghost').attr({class: 'node-' + that.$nowType});
				that.$workArea.css({cursor: 'move'}).children('#node-ghost').css({
					display: "block",
					top: Y + "px",
					left: X + "px",
					cursor: "move",
				});
			}
		})
		that.$workArea.mouseup(function () {
			if (onDrag) {
				addNodeOnArea();
				onDrag = false;
				that.$workArea.css({cursor: 'pointer'}).children('#node-ghost').remove();
			}
		});
		that.$workArea.mouseenter(function () {
			that.$workArea.append("<div id='node-ghost'></div>");
		})
		that.$workArea.mouseleave(function () {
			that.$workArea.css({cursor: 'pointer'}).children('#node-ghost').remove();
		})

		function addNodeOnArea() {
			var X, Y;
			var ev = GooFunc.mousePosition();
			X = ev.x - 433 + that.$workArea[0].parentNode.scrollLeft;
			Y = ev.y - 262 + that.$workArea[0].parentNode.scrollTop;
			that.addNode(that.$id + "_node_" + that.$nodeCount, {
				name: "node_" + that.$nodeCount,
				type: that.$nowType,
				left: X,
				top: Y
			});
		}
	}
	addNodeByDrag(this.$flowChart.children());

	/*
	 * Todo: ### 画布区域功能设置 ******************************************* //
	 * Author: LE
	 * Date: 2017/2/15
	 * time: 15:15
	 * */
	if (this.$editable) {
		// 事件添加
		this.initEvents();

		/*
		 * Todo: 取消&重做函数 【堆栈相关】
		 * Author: LE
		 * Date: 2017/2/15
		 * time: 15:12
		 * */
		if (property.useOperStack) {
			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;
				}
			};

			this.pushExternalOper = function (func, jsonPara) {
				this.pushOper("externalFunc", [func, jsonPara]);
			};

			//撤销上一步操作
			this.undo = function () {
				if (this.$undoStack.length == 0)   return;
				var tmp = this.$undoStack.pop();
				this.$isUndo = 1;
				if (tmp[0] == "externalFunc") {
					tmp[1][0](tmp[1][1]);
				}
				else {
					//传参的数量,最多支持5个.
					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;
					}
				}
			};

			//重做最近一次被撤销的操作
			this.redo = function () {
				if (this.$redoStack.length == 0)   return;
				var tmp = this.$redoStack.pop();
				this.$isUndo = 2;
				if (tmp[0] == "externalFunc") {
					tmp[1][0](tmp[1][1]);
				}
				else {
					//传参的数量,最多支持5个.
					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;
					}
				}
			};

		}

	}

}

/*
 * Todo:  ## 原型方法 ***************************************************************************************
 * Author: LE
 * Date: 2017/2/15
 * time: 14:59
 * */
GooFlow.prototype = {
    useSVG: true,
	/*
	 * Todo: 初始化画布 【SVG & 箭头 UI相关】
	 * Author: LE
	 * Date: 2017/2/20
	 * time: 9:51
	 * */
    initDraw: function (id) {
        this.$workAreaWrap = $("<div class='GooFlow_work'></div>");
        this.$workArea = $("<div class='GooFlow_work_inner'></div>").attr({
            "unselectable": "on",
            "onselectstart": 'return false',
            "onselect": 'document.selection.empty()'
        });

        this.$workAreaWrap.append(this.$workArea);
        this.$contBox.append(this.$workAreaWrap);

        this.$draw = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        this.$workArea.prepend(this.$draw);
        this.$workArea.prepend("<div class='file-box'>编码：<input id='fileCode' value='" + this.$fileCode +
			"'>流程名称：<input id='fileName' value='" + this.$fileName +
			"'></div>")
        // 设置画布属性
        this.$draw.id = id;
        this.$draw.style.width = '100%';
        this.$draw.style.height = '100%';

        // 定义可以重复利用的元素
        var defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
        this.$draw.appendChild(defs);
        defs.appendChild(getSvgMarker("arrow1", "#323232"));
        defs.appendChild(getSvgMarker("arrow2", "#00b7ee"));
        defs.appendChild(getSvgMarker("arrow3", "#f00"));

        function getSvgMarker(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", 8);
            m.setAttribute("markerHeight", 8);
            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  L 2 3 z");
            path.setAttribute("fill", color);
            path.setAttribute("stroke-width", 2);
            m.appendChild(path);
            return m;
        }

    },

	/*
	 * Todo: ### 初始化事件绑定********************************--开始
	 * Author: LE
	 * Date: 2017/2/15
	 * time: 15:09
	 * */
    initEvents: function () {
        // 防止回调函数里this偏移
        var that = this;
        var timeId = null;

		/*
		 * Todo: 空白区域点击事件 【单击事件】
		 * Author: LE
		 * Date: 2017/2/20
		 * time: 10:05
		 * */
        $(this.$draw).on("click", function (e) {
            that.$canDelLine = false;
            var n = $(e.target).prop("tagName");
            if (n == "svg") {
                that.blurItem();
            }
        });

		/*
		 * Todo: 结点事件绑定 【@@】
		 * Author: LE
		 * Date: 2017/2/20
		 * time: 10:22
		 * */
        this.$workArea.on({
            // 选中
            click: function () {
                clearTimeout(timeId);
                var Dom = $(this);
                var id = Dom.attr("id");
                that.focusItem(id, true);
            },
            // 编辑
            dblclick: function () {
                var id = $(this).attr('id'),
                    objPosition = $(this).position(),
                    objLeft = objPosition.left,
                    objTop = objPosition.top,
                    oldTxt = that.$nodeData[id].config;
	                console.log(that.$nodeData[id]);

                // 编辑的时候禁止delete键删除
                that.$canDelLine = false;
                that.$deteNodeId = '';
                that.$deteLineId = '';

                clearTimeout(timeId);
                that.$textArea.val(oldTxt).css({
                    display: "block",
                    left: objLeft + 170,
                    top: objTop + 50
                }).data("id", that.$focus).focus();

                that.$workArea.parent().one("mousedown", function () {
                    that.setName(that.$textArea.data("id"), that.$textArea.val(), "node");
                    that.$textArea.val("").removeData("id").hide();
                });

            },
            // 移动
            mousedown: function (e) {
                if (!e) e = window.event;
                var Dom = $(this);
                var id = Dom.attr("id");
                clearTimeout(timeId);
                timeId = setTimeout(function () {
	                that.focusItem(id, true);
	                var ev = GooFunc.mousePosition(e),
                        t = GooFunc.getElCoordinate(that.$workArea[0]),
                        c = GooFunc.getElCoordinate(that.$MainContener);

                    that.$ghost.css({
                        display: "block",
                        top: that.$nodeData[id].top + 133 - that.$workArea[0].parentNode.scrollTop + "px",
                        left: that.$nodeData[id].left + 200 - that.$workArea[0].parentNode.scrollLeft + "px",
                        cursor: "move"
                    });

                    var X, Y;
                    X = ev.x - t.left + that.$workArea[0].parentNode.scrollLeft;
                    Y = ev.y - t.top + that.$workArea[0].parentNode.scrollTop;
                    var vX = X - that.$nodeData[id].left, vY = Y - that.$nodeData[id].top;
                    var isMove = false;

                    document.onmousemove = function (e) {
                        if (!e) {
                            e = window.event;
                        }
                        var ev = GooFunc.mousePosition(e);
                        X = ev.x - vX - c.left;
                        Y = ev.y - vY - c.top;
                        if (X < t.left - c.left - that.$workArea[0].parentNode.scrollLeft) {
                            X = t.left - c.left - that.$workArea[0].parentNode.scrollLeft;
                        }
                        else if (X + that.$workArea[0].parentNode.scrollLeft + that.$nodeData[id].width > t.left - c.left + that.$workArea.width()) {
                            X = t.left - c.left + that.$workArea.width() - that.$workArea[0].parentNode.scrollLeft - that.$nodeData[id].width;
                        }
                        if (Y < t.top - c.top - that.$workArea[0].parentNode.scrollTop) {
                            Y = t.top - c.top - that.$workArea[0].parentNode.scrollTop;
                        }
                        else if (Y + that.$workArea[0].parentNode.scrollTop + that.$nodeData[id].height > t.top - c.top + that.$workArea.height()) {
                            Y = t.top - c.top + that.$workArea.height() - that.$workArea[0].parentNode.scrollTop - that.$nodeData[id].height;
                        }
                        that.$ghost.css({left: X - 230 + "px", top: Y - 133 + "px"});
                        isMove = true;
                    }
                    document.onmouseup = function () {
                        if (isMove) that.moveNode(id, X + that.$workArea[0].parentNode.scrollLeft - t.left + c.left, Y + that.$workArea[0].parentNode.scrollTop - t.top + c.top);
                        {
                            that.$ghost.empty().hide();
                        }
                        document.onmousemove = null;
                        document.onmouseup = null;
                    }
                }, 150);
            },
            // 显示连线图标
            mouseenter: function () {
                var moving = that.$lineMoveing;
                if (!moving) {
                    var w = $(this).width() + 60 + 'px';
                    var h = $(this).height() + 30 + 'px';
                    $(this).append("<div class='line-begin' style='width:" + w + ";height:" + h + "'><div class='line-begin-icon top'></div><div class='line-begin-icon left'></div><div class='line-begin-icon right'></div><div class='line-begin-icon bottom'></div></div>")
                }
                if (moving) {
                    $(this).addClass('item-mark');
                }
            },
            mouseleave: function () {
                $(this).children('.line-begin').remove();
                $(this).removeClass('item-mark');
            },
            // 结束连线
            mouseup: function () {
                clearTimeout(timeId);
                if (that.$lineMoveing) {
                    var type = $(this).children('.GooFlow_item_cont').children('.GooFlow_item_txt').attr("id").split("type-")[1]
                    var obj = $(this);
                    if (that.$nowType != "cursor") {
                        return;
                    }

                    var lineT, lineM;
                    var lineType = that.$lineType;

                    switch (lineType) {
                        case 'top':
                        case 'bottom':
                            lineT = 'tb';
                            break;
                        case 'left':
                        case 'right':
                            lineT = 'lr';
                            break;
                    }

                    var lineStart = that.$workArea.data("lineStart");
                    console.log("lineStart" + lineStart);
                    var n1 = that.$nodeData[lineStart.id], n2 = that.$nodeData[obj[0].id];

                    //To结点中心点位置判断
                    var sLeft = n1.left;
                    var sRight = sLeft + n1.width;
                    var sTop = n1.top;
                    var sBottom = sTop + n1.height;

                    var EXcenter = n2.left + n2.width / 2;
                    var EYcenter = n2.top + n2.height / 2;

                    // 当To结点中心点在From结点内时，用直线
                    if ((EXcenter >= sLeft && EXcenter <= sRight) || (EYcenter >= sTop && EYcenter <= sBottom)) {
                        lineT = 'sl';
                        lineM = '';
                    }

                    var lineM = GooFlow.prototype.getMValue(n1, n2, lineT);

                    if (lineStart) {
                        that.addLine(that.$id + "_line_" + that.$lineCount, {
                            from: lineStart.id,
                            to: obj[0].id,
                            name: "",
                            x: lineStart.x,
                            y: lineStart.y,
                            typeFrom: lineStart.typeFrom,
                            typeTo: type,
                            type: lineT,
                            M: lineM
                        });
                    }
                }

            }
        }, ".GooFlow_item").on({
            // 删除
            mousedown: function () {
                that.delNode(that.$focus);
                return false;
            }
        }, ".rs_close")


	    $('.file-box input').click(function () {
		    // 编辑的时候禁止delete键删除
		    that.blurItem();
	    })
		/*
		 * Todo: 连线链接 【 $$$】
		 * Author: LE
		 * Date: 2017/2/20
		 * time: 10:23
		 * */
        this.$workArea.on({
            // 连线开始
            mousedown: function () {
                var cs = $(this).attr("class").split(/\s+/);
                that.$lineMoveing = true;
                that.$lineType = cs[1];
                var obj = $(this).parent().parent();
                that.$nowType = "cursor";

                var type = obj.children('.GooFlow_item_cont').children('.GooFlow_item_txt').attr("id").split("type-")[1]
                // 将划线开始点定为元素中心点
                var X, Y;
                var objPosition = obj.position();
                var objLeft = objPosition.left;
                var objTop = objPosition.top;
                var w = (obj.width()) / 2;
                var h = (obj.height()) / 2;
                X = objLeft + w;
                Y = objTop + h;

                that.$workArea.data("lineStart", {
                    "x": X,
                    "y": Y,
                    "id": obj[0].id,
                    "typeFrom": type
                }).css("cursor", "crosshair");

                var line = GooFlow.prototype.drawLine("GooFlow_tmp_line", [X, Y], [X, Y], true, true);
                that.$draw.appendChild(line);

                $(document).mouseup(function () {
                    $('.GooFlow_item').removeClass('item-mark');
                    that.$lineMoveing = false;
                })
                return false;
            }
        }, ".GooFlow_item .line-begin > *").on({
            // 连线中
            mousemove: function (e) {
                if (that.$nowType == "cursor") {
                    var lineStart = $(this).data("lineStart");
                    if (!lineStart)return;
                    var ev = GooFunc.mousePosition(e), t = GooFunc.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");
                    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)");
                    }
                }
            },
            // 连线结束
            mouseup: function () {
                if (that.$nowType != "cursor") {
                    return;
                }
                $(this).css("cursor", "auto").removeData("lineStart");
                var HtmlStr = document.getElementById("GooFlow_tmp_line");
                if (HtmlStr) {
                    that.$draw.removeChild(HtmlStr);
                }
            }
        })

		/*
		 * Todo: 线条文字编辑 【 $$$】
		 * Author: LE
		 * Date: 2017/2/20
		 * time: 10:23
		 * */
        $(this.$draw).on({
            click: function () {
                that.focusItem(this.id, true);
            },
            dblclick: function () {
                var oldTxt, x, y, from, to;
                // 编辑的时候禁止delete键删除
                that.$canDelLine = false;
                that.$deteNodeId = '';
                that.$deteLineId = '';

                if (GooFlow.prototype.useSVG != "") {
                    oldTxt = this.childNodes[2].textContent;
                    from = this.getAttribute("from").split(",");
                    to = this.getAttribute("to").split(",");
                }

                if (that.$lineData[this.id].type == "lr") {
                    from[0] = that.$lineData[this.id].M;
                    to[0] = from[0];
                }
                else if (that.$lineData[this.id].type == "tb") {
                    from[1] = that.$lineData[this.id].M;
                    to[1] = from[1];
                }

                x = (parseInt(from[0], 10) + parseInt(to[0], 10)) / 2 + 230;
                y = (parseInt(from[1], 10) + parseInt(to[1], 10)) / 2 + 60;

                that.$textArea.val(oldTxt).css({
                    display: "block",
                    left: x,
                    top: y
                }).data("id", that.$focus).focus();

                that.$workArea.parent().one("mousedown", function () {
                    that.setName(that.$textArea.data("id"), that.$textArea.val(), "line");
                    that.$textArea.val("").removeData("id").hide();
                });
            }
        }, 'g');

		/*
		 * Todo: 线条移动 【 $$$】
		 * Author: LE
		 * Date: 2017/2/20
		 * time: 10:33
		 * */
        this.$lineMove.on("mousedown", function (e) {
            var lm = $(this);
            lm.css({"background-color": "#333"});
            var ev = GooFunc.mousePosition(e), t = GooFunc.getElCoordinate(that.$workArea[0]);
            var X, Y;
            X = ev.x - t.left + that.$workArea[0].parentNode.scrollLeft;
            Y = ev.y - t.top + that.$workArea[0].parentNode.scrollTop;
            var p = that.$lineMove.position();
            var vX = X - p.left, vY = Y - p.top;
            var isMove = false;

            document.onmousemove = function (e) {
                if (!e) e = window.event;
                var ev = GooFunc.mousePosition(e);
                var ps = that.$lineMove.position();
                X = ev.x - t.left + that.$workArea[0].parentNode.scrollLeft;
                Y = ev.y - t.top + that.$workArea[0].parentNode.scrollTop;
                if (that.$lineMove.data("type") == "lr") {
                    X = X - vX;
                    if (X < 0) X = 0;
                    else if (X > that.$workArea.width())
                        X = that.$workArea.width();
                    that.$lineMove.css({left: X + "px"});
                }
                else if (that.$lineMove.data("type") == "tb") {
                    Y = Y - vY;
                    if (Y < 0) Y = 0;
                    else if (Y > that.$workArea.height())
                        Y = that.$workArea.height();
                    that.$lineMove.css({top: Y + "px"});
                }
                isMove = true;
            }

            document.onmouseup = function (e) {
                if (isMove) {
                    var p = that.$lineMove.position();
                    if (that.$lineMove.data("type") == "lr")
                        that.setLineM(that.$lineMove.data("tid"), p.left + 3);
                    else if (that.$lineMove.data("type") == "tb")
                        that.setLineM(that.$lineMove.data("tid"), p.top + 3);
                }
                that.$lineMove.css({"background-color": "transparent"});
                if (that.$focus == that.$lineMove.data("tid")) {
                    that.focusItem(that.$lineMove.data("tid"));
                }
                document.onmousemove = null;
                document.onmouseup = null;
            }
        });
        this.$lineOper.on("click", function (e) {
            if (e.target.tagName != "B")   return;
            var id = $(this).data("tid");
            switch ($(e.target).attr("class")) {
                case "b_x":
                    that.delLine(id);
                    this.style.display = "none";
                    break;
                case "b_l1":
                    that.setLineType(id, "lr");
                    break;
                case "b_l2":
                    that.setLineType(id, "tb");
                    break;
                case "b_l3":
                    that.setLineType(id, "sl");
                    break;
            }
        });

    },

	/*
	 * Todo: ### 初始化事件绑定******************************--结束
	 * */

	/*
	 * Todo: 取消选定状态 【取消聚焦公共方法】
	 * Author: LE
	 * Date: 2017/2/20
	 * time: 9:53
	 * */
    blurItem: function () {
	    this.$canDelLine = false;
	    this.$deteNodeId = '';
	    this.$deteLineId = '';
        if (this.$focus != "") {
            // 获取被选中对象
            var jq = $("#" + this.$focus);
            if (jq.prop("tagName") == "DIV") {
                if (this.onItemBlur != null && !this.onItemBlur(id, "node"))  return false;
                jq.removeClass("item_focus").children(".rs-box").css("display", "none");
            }
            else {
                if (this.onItemBlur != null && !this.onItemBlur(id, "line"))  return false;
                if (GooFlow.prototype.useSVG != "") {
                    if (!this.$lineData[this.$focus].marked) {
                        jq[0].childNodes[1].setAttribute("stroke", "#323232");
                        jq[0].childNodes[1].setAttribute("marker-end", "url(#arrow1)");
                    }
                }
                else {
                    if (!this.$lineData[this.$focus].marked) jq[0].strokeColor = "#323232";
                }
                this.$lineMove.hide().removeData("type").removeData("tid");
                if (this.$editable) this.$lineOper.hide().removeData("tid");
            }
        }
        this.$focus = "";
        return true;
    },

	/*
	 * Todo: 选定状态 【聚焦公共方法】
	 * Author: LE
	 * Date: 2017/2/20
	 * time: 9:53
	 * */
    focusItem: function (id, bool) {

        var jq = $("#" + id);
        var that = this;
        this.$ghost.attr({'class': 'rs_ghost ' + jq.attr('class')});
        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 (this.$editable) jq.children(".rs-box").css("display", "block");
            this.$workArea.append(jq);
            that.$canDelLine = false;
            that.$deteLineId = '';
            that.$deteNodeId = id;
            $(document).keydown(function (e) {
                if (e.keyCode != 8 && that.$deteNodeId) {
                    return
                }
                that.delNode(that.$deteNodeId);
            });
        }
        else {//如果是连接线
            if (this.onItemFocus != null && !this.onItemFocus(id, "line"))    return;
            that.$canDelLine = true;
            that.$deteNodeId = '';
            that.$deteLineId = id;
            $(document).keydown(function (e) {
                if (e.keyCode == 8 && that.$deteLineId) {
                    that.delLine(that.$deteLineId);
                    $('.GooFlow_line_oper').hide();
                }
            })

            if (GooFlow.prototype.useSVG != "") {
                jq[0].childNodes[1].setAttribute("stroke", "#00b7ee");
                jq[0].childNodes[1].setAttribute("marker-end", "url(#arrow2)");
            }
            else    jq[0].strokeColor = "#00b7ee";
            if (!this.$editable) return;
            var x, y, from, to;
            if (GooFlow.prototype.useSVG != "") {
                from = jq.attr("from").split(",");
                to = jq.attr("to").split(",");
            } else {
                var 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);

            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 - 35;
            y = (from[1] + to[1]) / 2 + 6;
            this.$lineOper.css({display: "block", left: x + "px", top: y + "px"}).data("tid", id);
        }
        this.$focus = id;
        this.$nowType = "cursor";
    },

	/*
	 * Todo: 增加结点 【结点公共方法 @@】
	 * Author: LE
	 * Date: 2017/2/20
	 * time: 9:53
	 * */
    addNode: function (id, json) {
        if (this.onItemAdd != null && !this.onItemAdd(id, "node", json))return;
        if (this.$undoStack) {
            this.pushOper("delNode", [id]);
        }

        if (json.type != "start" && json.type != "end") {
            if (json.top < 0) json.top = 0;
            if (json.left < 0) json.left = 0;

            switch (json.type) {
                case "state":
                    json.name = '判断';
                    json.config = '';
                    json.nodeType = 'judgement'
                    break;
                case "complex":
                    json.name = '循环';
                    json.config = 'splitJsonArray';
                    json.nodeType = 'circle'
                    break;
                case "join":
                    json.name = '聚合';
                    json.config = '';
                    json.nodeType = 'aggregate'
                    break;
                case "fork":
                    json.name = '分流';
                    json.config = '';
                    json.nodeType = 'multicast'
                    break;
                case "task":
                    json.name = this.$newNodeTxt || json.name;
                    json.value = this.$newNodeValue || json.value;
                    json.config = this.$nodeConfig || json.config;
                    json.nodeType = this.$nodeType || json.nodeType;
                    break;
                case "plug":
                    json.name = this.$newNodeTxt || json.name;
                    json.value = this.$newNodeValue || json.value;
                    json.config = this.$nodeConfig || json.config;
                    json.nodeType = this.$nodeType || json.nodeType;
                    break;
            }

            this.$nodeDom[id] = $("<div class='GooFlow_item node-" + json.type + "' id='" + id + "' style='top:" + json.top + "px;left:" + json.left + "px'><div class='GooFlow_item_cont'> <i class='fa ico_" + json.type + "'></i><span class='GooFlow_item_txt' id='type-" + json.type + "'>" + json.name + "</span></div> <div class='rs-box' style='display:none'><div class='rs_close'><i class='fa fa-close' aria-hidden='true'></i></div></div></div>");

        }

        this.$workArea.append(this.$nodeDom[id]);
        json.width = this.$nodeDom[id].width();
        json.height = this.$nodeDom[id].height();
        this.$nodeData[id] = json;
        ++this.$nodeCount;
    },

	/*
	 * Todo: 删除结点 【结点公共方法 @@】
	 * Author: LE
	 * Date: 2017/2/20
	 * time: 9:55
	 * */
    delNode: function (id) {
        if (!this.$nodeData[id]) return;
        if (this.$undoStack) {
            var paras = [id, this.$nodeData[id]];
            this.pushOper("addNode", paras);
        }
        if (this.onItemDel != null && !this.onItemDel(id, "node"))    return;
        delete this.$nodeData[id];
        this.$nodeDom[id].remove();
        delete this.$nodeDom[id];
        if (this.$focus == id) this.$focus = "";
        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];
            }
        }
    },

	/*
	 * Todo: 结点移动 【结点移动方法 @@】
	 * Author: LE
	 * Date: 2017/2/20
	 * time: 9:54
	 * */
    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]);
    },

	/*
	 * Todo: 设置结点线等内容 【内容设置公共方法 @@ $$】
	 * Author: LE
	 * Date: 2017/2/20
	 * time: 9:54
	 * */
    setName: function (id, config, type) {
        var oldName;

        if (type == "node") {//如果是结点
            if (!this.$nodeData[id]) return;
            this.$nodeData[id].config = config;
        }
        else if (type == "line") {//如果是线
            if (!this.$lineData[id]) return;
            if (this.$lineData[id].config == config)   return;
            oldName = this.$lineData[id].value;
            this.$lineData[id].config = config;
            this.$lineDom[id].childNodes[2].textContent = config;
        }

    },

	/*
	 * Todo: 增加线条 【$$】
	 * Author: LE
	 * Date: 2017/2/15
	 * time: 16:46
	 * */
    addLine: function (id, json, isDataLoad) {

        if (!isDataLoad) {
            if (this.$undoStack) {
                this.pushOper("delLine", [id]);
            }

            if (json.from == json.to) {
                return;
            }

            var typeF = json.typeFrom || json.type;
            var typeT = json.typeTo || json.type;

            for (var k in this.$lineData) {
                // 单出
                var onlyOut = (json.from == this.$lineData[k].from);
                // 单进
                var onlyIn = (json.to == this.$lineData[k].to);
                // 来源等于去向
                var formEto = (json.from == this.$lineData[k].to);
                // 去向等于来源
                var tofrom = (json.to == this.$lineData[k].from);

                // 不能反向
                if (tofrom && formEto) {
                    return;
                }

                // 设置除了聚合其余都默认单进
                if (typeT != 'join') {
                    if (onlyIn) {
                        return;
                    }
                }

                switch (typeF) {
                    case 'task':
                    case 'plug':
                        if (onlyOut) {
                            return;
                        }
                        break;
                    case 'state':
                    case 'complex':
                        if (json.from == this.$lineData[k].from) {
                            var i = 0;
                            for (var j in this.$lineData) {
                                if (json.from == this.$lineData[j].from) {
                                    i++
                                }
                            }
                            if (i >= 2) {
                                return;
                            }
                        }
                        break;
                }

            }
        }

        //获取开始/结束结点的数据
        var n1 = this.$nodeData[json.from], n2 = this.$nodeData[json.to];
        if (!n1 || !n2) {
            return;
        }

        // 划线函数以及线条类型处理
        var res;
        if (json.type && json.type != "sl") {
            res = GooFlow.prototype.calcPolyPoints(n1, n2, json.type, json.M);
        }
        else {
            res = GooFlow.prototype.calcStartEnd(n1, n2);// 刚开始连线时,默认为直线
        }

        if (!res) {
            return;
        }

        // 存储线条
        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].config = json.name;

        if (json.mark) {
            this.$lineData[id].marked = json.mark;
        }
        else {
            this.$lineData[id].marked = false;
        }

        if (this.$lineData[id].type == "sl") {
            this.$lineDom[id] = GooFlow.prototype.drawLine(id, res.start, res.end, json.mark);
        }
        else {
            this.$lineDom[id] = GooFlow.prototype.drawPoly(id, res.start, res.m1, res.m2, res.end, json.mark);
        }

        this.$draw.appendChild(this.$lineDom[id]);

        if (GooFlow.prototype.useSVG == "") {
            this.$lineDom[id].childNodes[1].innerHTML = json.name;
            if (this.$lineData[id].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[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 = json.name;
        }

        ++this.$lineCount;
    },

	/*
	 * Todo: 线条删除  【$$】
	 * Author: LE
	 * Date: 2017/2/20
	 * time: 9:57
	 * */
    delLine: function (id) {
        if (!this.$lineData[id]) 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 = "";
    },

	/*
	 * Todo: 直线生成 【$$】
	 * Author: LE
	 * Date: 2017/2/15
	 * time: 14:57
	 * */
    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", 15);
            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", 1.2);
            path.setAttribute("stroke-linecap", "round");
            path.setAttribute("fill", "none");
            if (dash) path.setAttribute("style", "stroke-dasharray:6,5");
            if (mark) {
                path.setAttribute("stroke", "#00b7ee");
                path.setAttribute("marker-end", "url(#arrow2)");
            }
            else {
                path.setAttribute("stroke", "#323232");
                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.textContent=id;
                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 = "#00b7ee";
            else    line.strokeColor = "#323232";
        }
        return line;
    },

	/*
	 * Todo: 折线生成 【$$】
	 * Author: LE
	 * Date: 2017/2/20
	 * time: 10:26
	 * */
    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", 15);
            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", 1.2);
            path.setAttribute("stroke-linecap", "round");
            path.setAttribute("fill", "none");
            if (mark) {
                path.setAttribute("stroke", "#00b7ee");
                path.setAttribute("marker-end", "url(#arrow2)");
            }
            else {
                path.setAttribute("stroke", "#323232");
                path.setAttribute("marker-end", "url(#arrow1)");
            }
            poly.appendChild(hi);
            poly.appendChild(path);
            var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
            //text.textContent=id;
            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 = "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 = "#00b7ee";
            else    poly.strokeColor = "#323232"
        }
        return poly;
    },

	/*
	 * Todo: 直线坐标计算  【$$】
	 * Author: LE
	 * Date: 2017/2/20
	 * time: 10:26
	 * */
    calcStartEnd: function (n1, n2) {
        if (!n1 || !n2) {
            return {"start": [], "end": []};
        }
        var X_1, Y_1, X_2, Y_2;

        //X判断：
        var x11 = n1.left, x12 = n1.left + n1.width / 2, x13 = n1.left + n1.width, x21 = n2.left, x22 = n2.left + n2.width / 2, x23 = n2.left + n2.width;
        //Y判断：
        var y11 = n1.top, y12 = n1.top + n1.height / 2, y13 = n1.top + n1.height, y21 = n2.top, y22 = n2.top + n2.height / 2, y23 = n2.top + n2.height;
        X_1 = x12;
        X_2 = x22;

        // 结点2在结点1左边
        if (x11 >= x23) {
            X_1 = x11;
            Y_1 = y12;
            X_2 = x23;
            Y_2 = y22;
        }

        //结点2在结点1右边
        else if (x21 >= x13) {
            X_1 = x13;
            Y_1 = y12;
            X_2 = x21;
            Y_2 = y22;
        }

        else {
            // 结点2在结点1上边
            if (y11 >= y22) {
                Y_1 = y11;
                Y_2 = y23;
            }

            //结点2在结点1下边
            else if (y12 <= y21) {
                Y_1 = y13;
                Y_2 = y21;
            }
        }


        return {"start": [X_1, Y_1], "end": [X_2, Y_2]};

    },

	/*
	 * Todo: 折线坐标计算  【$$】
	 * Author: LE
	 * Date: 2017/2/20
	 * time: 10:27
	 * */
    calcPolyPoints: function (n1, n2, type, M) {

        //开始/结束两个结点的中心
        var SP = {x: n1.left + n1.width / 2, y: n1.top + n1.height / 2};
        var EP = {x: n2.left + n2.width / 2, y: n2.top + n2.height / 2};
        var sp = [], m1 = [], m2 = [], ep = [];

        //如果是允许中段可左右移动的折线,则参数M为可移动中段线的X坐标
        //粗略计算起始点
        sp = [SP.x, SP.y];
        ep = [EP.x, EP.y];
        if (type == "lr") {
            //粗略计算2个中点
            m1 = [M, SP.y];
            m2 = [M, EP.y];
            //再具体分析修改开始点和中点1
            if (m1[0] > n1.left && m1[0] < n1.left + n1.width) {
                m1[1] = (SP.y > EP.y ? n1.top : n1.top + n1.height);
                sp[0] = m1[0];
                sp[1] = m1[1];
            }
            else {
                sp[0] = (m1[0] < n1.left ? n1.left : n1.left + n1.width)
            }
            //再具体分析中点2和结束点
            if (m2[0] > n2.left && m2[0] < n2.left + n2.width) {
                m2[1] = (SP.y > EP.y ? n2.top + n2.height : n2.top);
                ep[0] = m2[0];
                ep[1] = m2[1];
            }
            else {
                ep[0] = (m2[0] < n2.left ? n2.left : n2.left + n2.width)
            }
        }
        //如果是允许中段可上下移动的折线,则参数M为可移动中段线的Y坐标
        else if (type == "tb") {
            //粗略计算2个中点
            m1 = [SP.x, M];
            m2 = [EP.x, M];
            //再具体分析修改开始点和中点1
            if (m1[1] > n1.top && m1[1] < n1.top + n1.height) {
                m1[0] = (SP.x > EP.x ? n1.left : n1.left + n1.width);
                sp[0] = m1[0];
                sp[1] = m1[1];
            }
            else {
                sp[1] = (m1[1] < n1.top ? n1.top : n1.top + n1.height)
            }
            //再具体分析中点2和结束点
            if (m2[1] > n2.top && m2[1] < n2.top + n2.height) {
                m2[0] = (SP.x > EP.x ? n2.left + n2.width : n2.left);
                ep[0] = m2[0];
                ep[1] = m2[1];
            }
            else {
                ep[1] = (m2[1] < n2.top ? n2.top : n2.top + n2.height);
            }
        }
        return {start: sp, m1: m1, m2: m2, end: ep};
    },

	/*
	 * Todo: 折线固定中线计算  【$$】
	 * Author: LE
	 * Date: 2017/2/20
	 * time: 10:27
	 * */
    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;
        }
    },

	/*
	 * Todo: 重置线条  【$$】
	 * Author: LE
	 * Date: 2017/2/20
	 * time: 9:56
	 * */
    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;
        }
    },

	/*
	 * Todo: 重置线条类型  【$$】
	 * Author: LE
	 * Date: 2017/2/20
	 * time: 9:56
	 * */
    setLineType: function (id, newType) {
        if (!newType || newType == null || newType == "" || newType == this.$lineData[id].type)  return false;
        if (this.$undoStack) {
            var paras = [id, this.$lineData[id].type];
            this.pushOper("setLineType", paras);
            if (this.$lineData[id].type != "sl") {
                var para2 = [id, this.$lineData[id].M];
                this.pushOper("setLineM", para2);
            }
        }
        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);
            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.$focus == id);
            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);
        }
    },

	/*
	 * Todo: 重置折线中点  【$$】
	 * Author: LE
	 * Date: 2017/2/20
	 * time: 9:57
	 * */
    setLineM: function (id, M, noStack) {
        if (!this.$lineData[id] || M < 0 || !this.$lineData[id].type || this.$lineData[id].type == "sl")   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.$focus == id);
        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;
    },


	/*
	 * Todo: 初始化数据加载 【AJAX相关】
	 * Author: LE
	 * Date: 2017/2/15
	 * time: 15:02
	 * */
    loadData: function (url) {
    	var that = this;
	    $.ajax({
		    url: url,
		    type: 'GET',
		    async: true,
		    dataType: 'json',
		    success: function (data) {
		    	var data = $.parseJSON(data.message);
			    that.fileMsg(data.code,data.name);
			    for (var i in data.result.nodes) {
				    that.addNode(i, data.result.nodes[i]);
			    }
			    for (var j in data.result.lines) {
				    that.addLine(j, data.result.lines[j], true);
			    }
		    },
		    error: function (data, xhr, textStatus) {
			    console.log('错误')
			    console.log(xhr)
			    console.log(textStatus)
		    },
	    })
    },

	fileMsg:function (code,name) {
		$('#fileCode').val(code);
		$('#fileName').val(name);
    },

	/*
	 * Todo: 导出数据  【AJAX相关】
	 * Author: LE
	 * Date: 2017/2/20
	 * time: 9:58
	 * */
    exportData: function () {
        this.$fileCode = $('#fileCode').val();
        this.$fileName = $('#fileName').val();
        var data = {
            nodes: {},
            lines: {}
        }
        var nodes = data.nodes;
        var lines = data.lines;

		function keyJson(obj, target, args) {
			for (var k in obj) {
				var jsonstr = JSON.stringify(obj[k], args);
				$.parseJSON(jsonstr);
				target[k] = $.parseJSON(jsonstr)
			}
		}

		keyJson(this.$nodeData, nodes, ['name', 'value', 'nodeType', 'config']);
		keyJson(this.$lineData, lines, ['from', 'to', 'config']);

		console.log(this.$lineData);

        var positionData = {
            nodes: this.$nodeData,
            lines: this.$lineData
        }

        postData = {
            code: this.$fileCode,
            name: this.$fileName,
            positionJson: JSON.stringify(positionData),
            flowJson: JSON.stringify(data)
        }

        console.log(postData);

		var nodeArr = [];
		var specialArr = [];
		var fromArr = [];
		var toArr = [];
		var noError = true;


		// 存储所有结点名，并将判断和循环结点单独存储
		for (var i in nodes) {
			nodeArr.push(i);
			if (nodes[i].nodeType === 'judgement') {
				specialArr.push(i)
			}
		}

		// 存储所有的线条的开始结点和结束结点

	    for (var j in lines) {
			fromArr.push(lines[j].from);
			toArr.push(lines[j].to);
		}

		// 如果存在没有连线的结点则报错
		nodeArr.forEach(function (elem) {
			var nodeWithoutLines = (fromArr.indexOf(elem) === -1) && (toArr.indexOf(elem) === -1) || (nodes[elem].config === '')
			if (nodeWithoutLines) {
				noError = false;
				$('#' + elem).addClass('node-error');
			} else {
				$('#' + elem).removeClass('node-error');
			}
		});

		// 判断和循环必须有两条线
	    // 每个节点都必须有配置项
	    specialArr.forEach(function (elem) {
			var i = 0;
			fromArr.forEach(function (el) {
				if (elem === el) {
					i++
				}
			})
			if (i < 2) {
				noError = false;
				$('#' + elem).addClass('special-error');
			} else {
				$('#' + elem).removeClass('special-error');
				for (var e in lines) {
					if (lines[e].from === elem) {
						console.log(lines[e]);
						if (lines[e].config === '') {
							noError = false;
							$('#' + e + ' path').attr({"marker-end":"url(#arrow3)","stroke":"#f00"});
							$('#' + elem).addClass('special-error');
						} else {
							$('#' + e + ' path').attr({"marker-end":"url(#arrow1)","stroke":"#323232"});
						}
					}
				}
			}
		})

	    // 标题code和name不能为空
	    if (this.$fileCode === '' || this.$fileName === ''){
		    noError = false;
		    $('.file-box').addClass('node-error');
	    }else{
		    $('.file-box').removeClass('node-error');
	    }

		// 如果没有错误则弹出保存菜单
		if (noError) {
			saveConfirm();
		} else {
			$.ligerDialog.alert('<p style="padding: 10px;">您还有未编排完成的对象，无法保存。</p>')
		}


		/*
		 * Todo: 保存发送请求
		 * Author: LE
		 * Date: 2017/2/22
		 * time: 18:59
		 * */
		function saveConfirm() {
			var callback = function (yes) {
				if (yes) {
					$.ajax({
						type: "POST",
						url: dataPostURL,
						data: postData,
						success: function () {
						}
					});
				}
			}

			$.ligerDialog.confirm2 = function (content, title, callback) {
				if (typeof (title) == "function") {
					callback = title;
					type = null;
				}
				var btnclick = function (item, Dialog) {
					Dialog.close();
					if (callback) {
						callback(item.type == 'ok');
					}
				};
				p = {
					type: 'question',
					content: content,
					buttons: [
						{
							text: $.ligerDefaults.DialogString.yes,
							onclick: btnclick,
							type: 'ok',
							cls: 'l-dialog-btn-ok'
						}, {
							text: $.ligerDefaults.DialogString.no,
							onclick: btnclick,
							type: 'no',
							cls: 'l-dialog-btn-no'
						}
					]
				};
				if (typeof (title) == "string" && title != "") p.title = title;
				$.extend(p, {
					width: 350,
					showMax: false,
					showToggle: false,
					showMin: false
				});
				return $.ligerDialog(p);
			};

			$.ligerDialog.confirm2('<p style="font-size: 15px;font-weight: bold;text-align: center;line-height: 20px">是否确认保存为正式流程，确认后流程将立即生效？</p><p style="margin-top: 10px;color: #999;text-align: center;line-height: 20px;">如果是请按确认，如果不是请按取消</p>', '保存流程', callback)

			$('.l-dialog-content').css({"padding": "0 40px 20px 40px"});
		}

    }

};

/*
 * Todo:  ## 注册JQ插件 ****************************************************************************
 * Author: LE
 * Date: 2017/2/15
 * time: 14:59
 * */
$.fn.extend({
	createGooFlow: function (property,url) {
		/*
		 * Todo: 初始化配置参数
		 * Author: LE
		 * Date: 2017/2/20
		 * time: 9:59
		 * */
		var defaultOption = {
			// ******************************************************* UI相关
			id: '',
			MainContener: $('body')[0],
			width: '100%',
			height: '100%',

			// ******************************************************* 工具栏
			haveTool: true,
			toolBtns: ["save", "undo", "redo"],
			toolBtnRemarks: ['保存', '撤销', '重做'],

			// ******************************************************* 流程图工具
			flowChart: true,
			flowBtns: ["state", "complex", "join", "fork"],
			useOperStack: true,  // 是否启用回滚栈, 如否, 头部工具栏的回滚和重做按钮都将失效
			editable: true,      // 是否可编辑

		};
		var options = $.extend({}, defaultOption, property);
		return new GooFlow(this, options,url);
	}
});