//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(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.f_draggingBackGround = true; } //当前选择墙面 if (this.currentState.selectWallSet != null && this.currentState.selectWallSet.type == 1) { this.f_draggingBackGround = false; 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) { 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.move.moveWallcorner( args.wallid, 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); console.log(this.currentState.selectWallSet) 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) { console.log('???') 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) { this.select.f_selectWallLine = false; this.select.drawMeasure(symbol2d); this.select.selectSymbol(symbol2d); //选择好symbol的时候,不选择墙面 this.select.f_selectWallLine = false; } } } } return function (e) { 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 (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]]) { console.log(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); this.div.addEventListener("dblclick", Pan.prototype.doubleclick.bind(this), 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); } };