front_end/libs/Controls/Pan.js

//CLASS:控制平移。
function Pan(layer) {
	this.layer = layer;
	this.calculateLine = this.layer.calculateLine;
	this.calculateElement = this.layer.calculateElement;
	this.div = this.layer.div;
	this.currentState = this.layer.currentState;
	this.previousState = this.layer.previousState;
	this.calculateElement = this.layer.calculateElement;
	this.active();
	//区分双击和单击
	this._doubleclick = false;

	//拖拽背景
	this.f_draggingBackGround = false;
	//拖拽墙
	this.f_draggingWallLine = false;
	//拖拽楼梯面
	this.f_draggingStairLine = false;
	//拖拽墙角 
	this.f_draggingWallCorner = false;
	//拖拽楼梯角
	this.f_draggingStairCorner = false;
	//拖拽门或窗等元素
	this.f_draggingSymbol = false;
	//拖拽symbol的端点
	this.f_draggingEndpoint = false;
	//拖拽旋转梯角
	this.f_draggingSpiralCorner = false;
	//拖拽旋转梯
	this.f_draggingSpiralPlane = false;
	//修建墙
	this.f_buildingWall = false;
	//修建隔断
	this.f_buildingPartition = false;
	//修建直梯
	this.f_buildingWinderStair = false;
	//修建螺旋梯
	this.f_buildingSpiral = false;
	//添加symbol,比如：门或者窗户等
	this.f_buildingSymbol = false;

	//用来判断拖拽函数调用了几次，如果少于2次，则弹出编辑框
	this.dragging = { count: 0, type: null };

	this.build = this.layer.build;
	this.select = this.layer.select;
	this.data2d = this.layer.data2d;
	this.move = this.layer.move;

	this.lastPoint = {};
	this.diffX = 0;
	this.diffY = 0;

	this.addNew();
	//控制显示编辑wall
	this.editwall = null;

	this.ajustEndPointForWall = null;
};

Pan.prototype.startPan = (function() {
	var strategy = {
		//建立墙或隔断
		wall: function (args) {
			this.layer.div.style.cursor = "crosshair";

			if ((this.build.buildwallState == 1 || this.build.buildwallState == 2) &&
				this.currentState.selectWallSet != null
			) {
				this.build.buildwallState = null;
				var point = this.build.adjustPoint(args.point);
				this.build.temp_buildwallId != null && (
					this.layer.vectors[this.build.temp_buildwallId].geometry.points[1] = args.point
				);
				this.build.BuildingWall(point);
				this.layer.vectors[this.build.buildwallId].geometry.endLines = this.build.getRelaEndLines();
				this.ajustEndPointForWall = this.currentState.selectWallSet.id + ";" + this.build.buildwallId;
				this.build.finishWall();
			} else { //开始画墙
				this.build.buildwallState = 2;
				this.build.BuildingWall(args.point);
			}
			this.layer.control.refreshCanvas = true;
		},
		WinderStair: function (args) {
			this.layer.div.style.cursor = "crosshair";
			this.f_buildingWinderStair = true;
			if (this.build.buildwallState == 1) {
				this.build.buildwallState = 2;
			}
			this.build.BuildingWinderStair(args.point);
		},
		Spiral: function (args) {
			this.layer.div.style.cursor = "crosshair";
			this.build.BuildingSpiral(args.point);
			this.currentState.startbuild = null;
		},
		__default: function (args) {
			if (this.layer.build.tryAddSymbol == null) {
				this.f_draggingBackGround = false;
				this.f_draggingSpiralPlane = false;
				this.f_draggingWallCorner = false;
				this.f_draggingWallLine = false;
				this.f_draggingSpiralCorner = false;
				this.f_draggingStairLine = false;
				this.f_draggingStairCorner = false;

				if (this.currentState.selectWallSet != null) {
					this.f_draggingWallCorner = this.currentState.selectWallSet.type == 0; // 当前选择墙角
					this.f_draggingWallLine = this.currentState.selectWallSet.type == 1; // 当前选择墙面
				} else if (this.currentState.selectStairSet == null) {
					this.f_draggingBackGround = true;
				} else if (this.currentState.selectStairSet.geoType == "Spiral") {
					this.f_draggingSpiralCorner = this.currentState.selectStairSet.type == 0;
					this.f_draggingSpiralPlane = this.currentState.selectStairSet.type == 1
				} else {
					this.f_draggingStairCorner = this.currentState.selectStairSet.type == 0; // 当前选择楼梯角
					this.f_draggingStairLine = this.currentState.selectStairSet.type == 0; // 当前选择楼梯面
				}
				
				this.currentState.currentWallId
			}


			//当前选择墙面
			if (this.currentState.selectWallSet != null && this.currentState.selectWallSet.type == 1) {
				this.f_draggingWallLine = true;
				this.f_draggingWallCorner = false;

				this.select.f_selectWallLine = true;

				if (this.layer.build.tryAddSymbol != null) {
					this.select.convertTrue(this.layer.build.tryAddSymbol);
					this.layer.build.tryAddSymbol = null;
					this.f_draggingWallLine = false;
				} else if (this.select.f_selectSymbol) {
					this.f_draggingWallLine = false;
					this.f_draggingSymbol = true;
					this.select.f_selectWallLine = false;

					var symbol2d = this.layer.vectors[this.currentState.currentSymbolId];

					//编辑门或窗等元素的大小
					if (BABYLON.Vector2.Distance(symbol2d.geometry.point1, args.point) < sysmbolCircleR) {
						this.select.selectSymbolIds.selectEndPointIndex = 1;
						this.select.selectSymbolPoint(symbol2d, args.point);
						this.f_draggingEndpoint = true;
					} else if (BABYLON.Vector2.Distance(symbol2d.geometry.point2, args.point) < sysmbolCircleR) {
						this.select.selectSymbolIds.selectEndPointIndex = 2;
						this.select.selectSymbolPoint(symbol2d, args.point);
						this.f_draggingEndpoint = true;
					}
				} else {
					this.dragging.type = "wall";
					this.dragging.wallid = this.currentState.selectWallSet.id;
					this.dragging.index = this.currentState.selectWallSet.index;
				}
			}

		}
	}

	return function (e) {
		if (!(this.__firstbuildwallState && !this.build.buildwallState) && !this.__updateCurrentState) {
			this.lastX = e.offsetX;
			this.lastY = e.offsetY;
			this.pan(e, true)
		}
		this.__firstbuildwallState = this.build.buildwallState

		this.__updateCurrentState = false
		
		for (var key in strategy) {
			strategy[key] = strategy[key].bind(this)
		}
		strategy.partition = strategy.wall

		if (this.layer.control.draggingDialog) {
			return;
		}

		document.getElementById('configuratorWindow2').style.display = "none";
		this.currentState.addSymbol = null;

		//在一开始保存点击的位置。
		this.lastX = (e.offsetX || e.layerX);
		this.lastY = (e.offsetY || e.layerY);

		var point = this.layer.getPositionFromPx({ x: this.lastX, y: this.lastY });

		if (this.currentState.startbuild) {
			strategy[this.currentState.startbuild]({point: point})
		} else {
			strategy.__default({ point: point })
		}

		//设置鼠标样式。
		this.layer.div.style.cursor = "move";
		this.layer.renderer.autoRedraw();
		CanvasSketch.stopEventBubble(e);
	};
})();



// 在canvas上移动各个菜单对应发生的事件
Pan.prototype.pan = function () {
	var strategy = {
		// 拖拽视图
		f_draggingBackGround: function (args) {
			this.layer.center.x -= args.dx * this.layer.res;
			this.layer.center.y += args.dy * this.layer.res;
			this.layer.moveTo(this.layer.zoom, this.layer.center);
		},
		// 拖拽直梯顶点
		f_draggingStairCorner: function (args) {
			this.move.moveStaircorner(
				this.currentState.currentStairId,
				this.currentState.currentstartlinePointIndex,
				args.point
			);
		},
		// 拖拽直梯中心线
		f_draggingStairLine: function (args) {
			this.move.moveStairLine(
				this.currentState.currentStairId,
				args.dx,
				args.dy,
				this.currentState.currentstartlinePointIndex,
				this.currentState.currentendlinePointIndex
			);
		},
		// 拖拽旋转体
		f_draggingSpiralCorner: function (args) {
			this.move.moveSpiralcorner(
				this.currentState.currentStairId, 
				args.point,
				this.currentState.currentstartlinePointIndex
			);
		},
		// 拖拽螺旋体平面位置
		f_draggingSpiralPlane: function (args) {
			this.move.moveSpiralPlane(
				this.currentState.currentStairId, 
				args.dx, 
				args.dy
			);
		},
		// 拖拽墙面的角度
		f_draggingWallCorner: function (args) {
			// this.currentState.currentWallId = this.currentState.selectWallSet.id;
			this.move.moveWallcorner(
				this.currentState.selectWallSet.id,
				this.currentState.currentstartlinePointIndex, 
				args.point
			);
		},
		// 拖拽墙面中心线
		f_draggingWallLine: function (args) {
			this.move.moveWallLine(
				args.wallid,
				args.dx,
				args.dy,
				this.currentState.currentstartlinePointIndex,
				this.currentState.currentendlinePointIndex
			);
			this.dragging.count++
		},
		// 拖拽设置门窗顶点 设置位置
		f_draggingSymbol: function (args) {
			this.move.moveExistSymbol(
				this.lastPoint, 
				args.point, 
				this.currentState.currentSymbolId
			);
		},
		// 拖拽设置门窗顶点 设置长度
		f_draggingEndpoint: function (args) {
			this.move.moveSymbolEndpoint(args.point);
		},
		

		// 其余设置都经过
		__default: function (args) {

			if (this.f_buildingWall || this.f_buildingPartition) { //修墙
				this.build.buildwallState = 1;
				this.layer.build.BuildingWall(args.point);
			}	else if (this.f_buildingWinderStair) { //修楼梯
				this.build.buildwallState = 1;
				this.layer.build.BuildingWinderStair(args.point);
			}

			this.previousState.save(this.currentState);
			this.currentState.selectStairSet = this.calculateElement.stairsContain(args.point);  //判断是否在楼梯上

			if (this.currentState.selectStairSet != null &&
				this.currentState.addSymbol == null) {

				var stairid = this.currentState.selectStairSet.id;
				this.layer.vectors[stairid].geometry.geoType == "Spiral" ?
					strategy.__selectStairSpiral(args) :
					strategy.__selectStair(args)

			} else if (this.layer.data2d.wallIds.length > 0) {
				
				//当前点是否在墙上
				this.currentState.selectWallSet = this.calculateElement.wallsContain(args.point);
				this.__updateCurrentState = true

				this.currentState.selectWallSet ?
					strategy.__selectWallSet(args) : 
					strategy.__selectNotWallSet(args)
			}
		},
		// 悬停在直梯上
		__selectStair: function (args) {
			var repeat = this.currentState.isRetain(this.previousState);

			if (!repeat) {
				this.select.clearSelect();
				this.currentState.currentendlinePointIndex = this.currentState.selectStairSet.endindex;
				this.currentState.currentStairId = this.currentState.selectStairSet.id;
				this.currentState.currentstartlinePointIndex = this.currentState.selectStairSet.index;
			}

			if (this.currentState.selectStairSet.type == 0) { //当前选择的是楼梯的拐角
				//状态变化，选择拐角
				repeat || this.select.selectStairCorner(
					this.currentState.selectStairSet.id,
					this.currentState.selectStairSet.index
				);
			} else if (this.currentState.selectStairSet.type == 1) { //当前选择的是楼梯面
				repeat || (this.select.f_selectStairLine = true)

				if (this.select.f_selectStairLine && this.currentState.currentLineId == null) {
					this.select.selectStairWallLine(
						this.currentState.currentStairId,
						this.currentState.currentstartlinePointIndex,
						this.currentState.currentendlinePointIndex
					);
				}
			}
		},
		// 悬停在螺旋梯形上
		__selectStairSpiral: function (args) {
			var stairid = this.currentState.selectStairSet.id;
			var repeat = this.previousState.type == this.currentState.selectStairSet.type &&
				this.previousState.currentStairId == stairid;

			if (!repeat) {
				if (this.currentState.selectStairSet.type == 0) {
					this.select.endselectSpiralPlane();
					this.select.selectSpiralCorner(
						this.currentState.selectStairSet.id,
						this.currentState.selectStairSet.index
					);
				} else {
					this.select.endselectSpiralCorner();
					this.select.selectSpiralPlane(this.currentState.selectStairSet.id);
				}
			}
		},
		// 什么都没选择，在空白区域移动
		__selectNotWallSet: function (args) {
			if (this.layer.build.tryAddSymbol != null && this.layer.build.tryAddSymbol.attributes.draw) {
				var moving = this.layer.move.moveVirtualSymbol2(this.layer.build.tryAddSymbol, args.point);
				if (!moving) {
					return;
				}
			} else {
				this.select.clearSelect();
			}
		},
		// 移动到墙面上
		__selectWallSet: function (args) {
			var repeat = !!this.currentState.isRetain(this.previousState);
			var r = this.layer.parameter.wallThickness && 
				this.layer.parameter.wallThickness / 2;

			if (!repeat) {
				this.select.clearSelect();

				this.currentState.currentendlinePointIndex = this.currentState.selectWallSet.endindex;
				this.currentState.currentWallId = this.currentState.selectWallSet.id;
				this.currentState.currentstartlinePointIndex = this.currentState.selectWallSet.index;
			}

			if (this.currentState.addSymbol != null) {
				return (
					this.layer.build.tryAddSymbol != null &&
					this.layer.build.tryAddSymbol.geometry.symbolType != "Stair"
				) && this.layer.move.moveVirtualSymbol1(this.layer.build.tryAddSymbol, args.point) //添加假的元素：门、窗等
			}

			// 选择的是墙角 角度
			if (this.currentState.selectWallSet.type == 0) {
				!repeat && this.select.selectWallCorner(
					this.currentState.selectWallSet.id,
					this.currentState.selectWallSet.index
				);
			} else if (this.currentState.selectWallSet.type == 1) { //选择墙面
				!repeat && (this.select.f_selectWallLine = true);
				strategy.__stateChangeWall(args, this.currentState.currentWallId)
			}

			if (this.select.f_selectWallLine && this.currentState.currentLineId == null) {
				this.select.selectStairWallLine(
					this.currentState.currentWallId, 
					this.currentState.currentstartlinePointIndex, 
					this.currentState.currentendlinePointIndex
				);
			} else if (!this.select.f_selectWallLine) {
				this.select.endSelectWallLine();
			}
		},

			//状态变化，选择墙面
		__stateChangeWall: function(args, id) {
			//从当前选择的symbol到不选择这个symbol
			if (this.currentState.currentSymbolId != null) {
				var symbol2d = this.layer.vectors[id].symbol2Ds[this.currentState.currentSymbolId];
				var index = Math.min(
					symbol2d.attributes.wallstartindex,
					symbol2d.attributes.wallendindex
				);

				var r = this.layer.vectors[id].geometry.wallInfo[index].thick / 2;

				if (!this.calculateElement.lineContain(
					symbol2d.geometry.point1,
					symbol2d.geometry.point2,
					args.point, r)
				) {
					this.select.endSelectSymbol(
						this.select.selectSymbolIds.vectorid,
						this.select.selectSymbolIds.selects,
						this.select.selectSymbolIds.vectorMeasureid
					);
					this.select.f_selectSymbol = false;
					this.select.f_selectWallLine = true;
				}
			} else { //当前没有选择symbol
				
				var symbol2d = this.calculateElement.symbolsContain(args.point);
				if (symbol2d != null) {
					// if

					this.select.f_selectWallLine = false;
					this.select.drawMeasure(symbol2d);
					this.select.selectSymbol(symbol2d);

					//选择好symbol的时候，不选择墙面
					this.select.f_selectWallLine = false;
				}
			}
		}
	}

	return function (e, force) {
		for (var key in strategy) {
			strategy[key] = strategy[key].bind(this)
		}
		
		if (this.layer.control.draggingDialog) {
			return
		}

		var offsetX = (e.offsetX || e.layerX)
		var offsetY = (e.offsetY || e.layerY)
		var args = {
			dx: offsetX - this.lastX, //计算改变的像素值
			dy: offsetY - this.lastY,
			point: this.layer.getPositionFromPx({ x: offsetX, y: offsetY }), //当前位置
			wallid: this.currentState.currentWallId
		}

		if (!force && (args.dx == 0 && args.dy == 0)) {
			return CanvasSketch.stopEventBubble(e);
		}

		// 保存最后一次位置
		this.lastPoint = this.layer.getPositionFromPx(
			{ x: this.lastX, y: this.lastY }
		);
		// 更新位置
		this.lastX = offsetX;
		this.lastY = offsetY;
		for (var i = 0, keys = Object.keys(strategy); i < keys.length; i++) {
			if (this[keys[i]]) {
				strategy[keys[i]](args);
				break;
			}
		}
		(i === keys.length) && strategy.__default(args)

		if (this.layer.control.refreshCanvas || 
			this.layer.control.refreshBackgroundCanvas || 
			this.layer.control.refreshSelectCanvas) {
			this.layer.renderer.autoRedraw();
		}

		CanvasSketch.stopEventBubble(e);
	};
}();

Pan.prototype.endPan = function (e) {
	if (this.layer.control.draggingDialog) {
		return;
	}
	this.layer.div.style.cursor = "default";
	//调整墙的测量线
	var flag = false;
	if (this.f_draggingWallCorner) {
		this.layer.build.adjustEndPoint(this.currentState.currentWallId);
		flag = true;
	}
	else if (this.f_draggingWallLine) {
		if (this.dragging.count < 3) {
			//弹出编辑框
			clearTimeout(this.editwall);
			this.editwall = setTimeout("this.layer.menu.showWallDialog()", 800);
			this.layer.menu.initEdit2D(this.dragging.wallid, this.dragging.index);
		}
		else {
			this.layer.build.adjustEndPoint(this.currentState.currentWallId);
			flag = true;
		}
		this.dragging.count = 0;
		this.f_draggingWallLine = false;
	}
	else if (this.ajustEndPointForWall != null) {
		var ids = this.ajustEndPointForWall.split(";")
		this.layer.build.adjustEndPoint2(ids[1], ids[0]);
		this.ajustEndPointForWall = null;
		flag = true;
	}

	if (flag) {
		this.layer.control.refreshCanvas = true;
		this.layer.renderer.autoRedraw();
		//调整墙的测量线

	}

	this.reset();
	CanvasSketch.stopEventBubble(e);
};

Pan.prototype.doubleclick = function (e) {
	//clearTimeout(this.timeId);
	var id = this.currentState.currentWallId;
	clearTimeout(this.editwall);
	document.getElementById('configuratorWindow2').style.display = "none";
	if (this.currentState.currentSymbolId != null) {
		return;
	}

	//建墙
	//if(this.currentState.currentLineId==null)
	if (this.currentState.startbuild == "wall" || this.currentState.startbuild == "partition") {
		this.build.finishWall();
		this.layer.control.refreshCanvas = true;
	}
	else if (this.currentState.startbuild == "WinderStair") {
		this.build.buildwallState = null;
		this.f_buildingWinderStair = false;
		var point = this.layer.getPositionFromPx({ x: (e.offsetX || e.layerX), y: (e.offsetY || e.layerY) });
		this.build.BuildingWinderStair(point);
	}
	//墙面上双击
	else if (!this.currentState.startbuild && this.currentState.selectWallSet != null && this.currentState.selectWallSet.type == 1) {
		var point = this.layer.getPositionFromPx({ x: (e.offsetX || e.layerX), y: (e.offsetY || e.layerY) });
		var line = this.calculateLine.createLine(this.layer.vectors[id].geometry.points[this.currentState.currentstartlinePointIndex], this.layer.vectors[id].geometry.points[this.currentState.currentendlinePointIndex]);
		point = this.calculateLine.getJoinLinePoint(point, line);
		point = new Point(point.x, point.y);
		point.floor = this.layer.vectors[id].geometry.points[this.currentState.currentstartlinePointIndex].floor;

		var points = this.layer.vectors[id].geometry.points;
		points.splice(this.currentState.currentstartlinePointIndex + 1, 0, point);
		var wallInfo = {};
		wallInfo.height = this.layer.vectors[id].geometry.wallInfo[this.currentState.currentstartlinePointIndex].height;
		wallInfo.thick = this.layer.vectors[id].geometry.wallInfo[this.currentState.currentstartlinePointIndex].thick;
		wallInfo.measuredistance = this.layer.vectors[id].geometry.wallInfo[this.currentState.currentstartlinePointIndex].measuredistance;
		this.layer.vectors[id].geometry.wallInfo.splice(this.currentState.currentstartlinePointIndex + 1, 0, wallInfo);

		this.calculateElement.updateSymbolsWallCornerIndexAdd(id, this.currentState.currentstartlinePointIndex + 1, point);

		this.layer.vectors[id].geometry.points = points;
		this.layer.drawVector(this.layer.vectors[id]);
		var index = this.currentState.currentstartlinePointIndex + 1;

		//this.layer.vectors[id].geometry.wallInfo[index].height = this.layer.vectors[id].geometry.wallInfo[this.currentState.currentstartlinePointIndex].height;
		//this.layer.vectors[id].geometry.wallInfo[index].thick = this.layer.vectors[id].geometry.wallInfo[this.currentState.currentstartlinePointIndex].height;
		//this.layer.vectors[id].geometry.wallInfo[index].measuredistance = this.layer.vectors[id].geometry.wallInfo[this.currentState.currentstartlinePointIndex].height;

		this.select.clearSelect();
		this.currentState.currentWallId = id;
		this.select.selectWallCorner(id, index);
	}

	this.layer.renderer.autoRedraw();
	CanvasSketch.stopEventBubble(e);
};

Pan.prototype.Events = [["mousedown", Pan.prototype.startPan],
["mousemove", Pan.prototype.pan],
["mouseup", Pan.prototype.endPan],
["dblclick", Pan.prototype.doubleclick]];

Pan.prototype.active = function () {

	this.div.addEventListener("mousedown", Pan.prototype.startPan.bind(this), true);
	this.div.addEventListener("mousemove", Pan.prototype.pan.bind(this), true);
	this.div.addEventListener("mouseup", Pan.prototype.endPan.bind(this), true);

	var doubleclick = Pan.prototype.doubleclick.bind(this)
	var startTime = null
	this.div.addEventListener("click", function() {
		if (startTime && Date.now() - startTime <= 300) {
			doubleclick.apply(this, arguments)
		} else {
			startTime = Date.now()
		}
	}, true);
};

Pan.prototype.reset = function () {
	this.f_draggingBackGround = false;
	this.f_draggingWallLine = false;
	this.f_draggingWallCorner = false;
	this.f_draggingStairLine = false;
	this.f_draggingStairCorner = false;
	this.f_draggingSpiralPlane = false;
	this.f_draggingSpiralCorner = false;
	this.f_draggingSymbol = false;
	this.f_draggingEndpoint = false;
	//this.f_buildingWall=false;
	this.f_buildingSymbol = false;
};

//新建一个空白页
Pan.prototype.addNew = function () {
	document.getElementById("toolbarMenu").addEventListener("click", function (e) {
		if (e.target.parentElement.parentElement.id == "toolbarNew") {
			if (confirm("您确定要重新打开网页？")) {
				//如果是true ，那么就把页面刷新
				//location.reload();
				this.layer.menu.show2D();
				for (var vectorId in this.layer.vectors) {
					this.layer.deleteVector(vectorId);
					this.layer.data2d.wallIds = [];
				} 
				this.layer.clear();
				this.select.clearSelect();
				if (my3DEngine != null && typeof (my3DEngine) != "undefined") {
					my3DEngine.clearAllSymbols();
					my3DEngine = null;
				}
				one3d = true;
				this.currentState.currentWallId = null;
				addWall();

			}
		}
		else if (e.target.parentElement.parentElement.id == "toolbarSave") {
			alert("save");
		}
		else if (e.target.parentElement.parentElement.id == "toolbarOption") {
			var aw = document.getElementById("aboutWindow");
			aw.style.display = "block";
			//alert("option");
		}
		else if (e.target.parentElement.parentElement.id == "userOption") {
			alert("user");
		}
	}.bind(this));

	function addWall() {
		var vectors = [];
		var points = [];
		var point1 = new Point(wallleftX, wallleftY);
		points.push(point1);

		var point2 = new Point(wallrightX, wallleftY);
		points.push(point2);

		var point3 = new Point(wallrightX, wallrightY);
		points.push(point3);

		var point4 = new Point(wallleftX, wallrightY);
		points.push(point4);


		var wall = new Wall(points, document.getElementById("imgWall"));
		var vector = new Vector(wall, wallStyle);
		wallId = vector.id;
		vectors.push(vector);
		this.layer.addVectors(vectors);

		this.layer.data2d.wallIds.push(wallId);
	}

};