import { coordinate } from "../Coordinate.js"; import LayerEvents from "../enum/LayerEvents.js"; import UIEvents from "../enum/UIEvents.js"; import RoadTemplate from "../enum/RoadTemplate.js"; import RoadStructure from "../enum/RoadStructure.js"; import VectorType from "../enum/VectorType.js"; import VectorStyle from "../enum/VectorStyle.js"; import VectorWeight from "../enum/VectorWeight.js"; import GeoActions from "../enum/GeoActions.js"; import VectorEvents from "../enum/VectorEvents.js"; import SVGType from "../enum/SVGType.js"; import { stateService } from "../Service/StateService.js"; import { uiService } from "../Service/UIService.js"; import { dataService } from "../Service/DataService.js"; import { historyService } from "../Service/HistoryService.js"; import { elementService } from "../Service/ElementService"; import { lineService } from "../Service/LineService.js"; import { circleService } from "../Service/CircleService.js"; import { textService } from "../Service/TextService.js"; import { svgService } from "../Service/SVGService.js"; import { magnifierService } from "../Service/MagnifierService.js"; import { mathUtil } from "../Util/MathUtil"; import Constant from "../Constant"; // import { roomsUtil } from "../Room/RoomsUtil.js"; import { addRoad } from "../Controls/AddRoad"; import { addLine } from "./AddLine.js"; import VectorCategory from "../enum/VectorCategory.js"; // import { floorplanData } from "../VectorData.js"; import Message from "@/components/base/components/message/message.vue"; import { pointService } from "../Service/PointService.js"; import Settings from "../Settings.js"; import { addPoint } from "./AddPoint.js"; import { locationModeControl } from "./LocationModeControl.js"; import { curveRoadPointService } from "../Service/CurveRoadPointService.js"; import { roadService } from "../Service/RoadService.js"; import { curveRoadService } from "../Service/CurveRoadService.js"; import Msg from "../enum/Msg.js"; export default class UIControl { constructor(layer, newsletter, graphicStateUI) { this._prompts = []; this.layer = layer; this.newsletter = newsletter; this.graphicStateUI = graphicStateUI; } get selectUI() { return this.newsletter.selectUI; } set selectUI(selectUI) { this.updateEventNameForSelectUI(selectUI); this.newsletter.selectUI = selectUI; } get focusVector() { return this.newsletter.focusVector; } set focusVector(focusVector) { this.newsletter.focusVector = focusVector; } /** * 获取选中要操作的UI */ get currentUI() {} /** * 设置选中要操作的UI */ set currentUI(value) { this.selectUI = value; } clearUI() { this.clearCurrentUI(); this.clearSelectUI(); } clearFocusVector() { this.focusVector = null; } clearSelectUI() { this.selectUI = null; } clearCurrentUI() { this.currentUI = null; } //点击左侧栏后,更新事件 updateEventNameForSelectUI(selectUI) { console.log(this.selectUI, selectUI); if (selectUI != null) { if (this.selectUI == selectUI) { return; } else if (this.selectUI != selectUI) { if (this.selectUI != null) { //先取消当前事件和进程 this.layer.exit(); } //执行新的事件 if (uiService.isBelongRoad(selectUI) || selectUI == "road") { stateService.setEventName(LayerEvents.AddRoad); } else if (selectUI == UIEvents.CurveRoad) { stateService.setEventName(LayerEvents.AddCurveRoad); } else if (uiService.isBelongLine(selectUI)) { stateService.setEventName(LayerEvents.AddLine); } // else if (selectUI == UIEvents.CurveLine) { // stateService.setEventName(LayerEvents.AddCurveLine); // } else if (uiService.isBelongPoint(selectUI)) { stateService.setEventName(LayerEvents.AddPoint); } else if (selectUI == UIEvents.Circle) { stateService.setEventName(LayerEvents.AddCircle); } else if (selectUI == UIEvents.Text) { stateService.setEventName(LayerEvents.AddText); } else if (selectUI == UIEvents.Magnifier) { stateService.setEventName(LayerEvents.AddMagnifier); } else if (SVGType[selectUI]) { uiService.setSelectSVGType(selectUI); stateService.setEventName(LayerEvents.AddSVG); } else if (selectUI == UIEvents.Img) { stateService.setEventName(LayerEvents.Img); } else if (uiService.isBelongRoadTemplate(selectUI)) { stateService.setEventName(LayerEvents.AddRoadTemplate); } else if (uiService.isBelongRoadStructure(selectUI)) { stateService.setEventName(LayerEvents.AddRoadStructure); } else if (selectUI == Constant.angleLocationMode) { uiService.setSelectLocationMode(Constant.angleLocationMode); let msg = locationModeControl.setAngle(); if (msg != Msg.OK) { this.prompt({ msg: msg, time: 1000 }); } else { this.layer.history.save(); this.layer.renderer.autoRedraw(); } } } } } updateVectorForSelectUI(selectUI) { console.log("selectUI", selectUI); const focusItem = stateService.getFocusItem(); // if (selectUI == VectorStyle.Bold || selectUI == VectorStyle.Thinning) { // if (focusItem.type == VectorType.Line) { // let Line = dataService.getLine(focusItem.vectorId); // Line.setStyle(selectUI); // } else if (focusItem.type == VectorType.RoadEdge) { // let roadEdge = dataService.getRoadEdge(focusItem.vectorId); // if (roadEdge) { // roadEdge.setStyle(selectUI); // } else { // roadEdge = dataService.getCurveRoadEdge(focusItem.vectorId); // roadEdge.setStyle(selectUI); // } // } // this.layer.history.save(); // this.layer.renderer.autoRedraw(); // } // else if (uiService.isBelongRoadEdgeStyle(selectUI)) { let key = null; if (VectorStyle[selectUI]) { key = "setStyle"; } else if (VectorWeight[selectUI]) { key = "setWeight"; } if (focusItem.type == VectorType.Line) { let Line = dataService.getLine(focusItem.vectorId); // Line.setStyle(selectUI); Line[key](selectUI); } else if (focusItem.type == VectorType.CurveLine) { let Line = dataService.getCurveLine(focusItem.vectorId); // Line.setStyle(selectUI); Line[key](selectUI); } else { let roadEdge = dataService.getRoadEdge(focusItem.vectorId); if (roadEdge) { // roadEdge.setStyle(selectUI); roadEdge[key](selectUI); let crossPoint = dataService.getCrossPoint4(focusItem.vectorId); if (crossPoint) { crossPoint[key](selectUI); } } else { roadEdge = dataService.getCurveRoadEdge(focusItem.vectorId); // roadEdge.setStyle(selectUI); roadEdge[key](selectUI); } } this.layer.history.save(); this.layer.renderer.autoRedraw(); } else if (selectUI == VectorEvents.AddLane) { if (focusItem && focusItem.vectorId) { stateService.setEventName(VectorEvents.AddLane); } // if (focusItem && focusItem.dir && focusItem.vectorId) { // let road = dataService.getRoad(focusItem.vectorId); // if (road) { // if (focusItem.dir == "left") { // roadService.updateForAddSubtractLanesCount( // road.vectorId, // road.leftDrivewayCount + 1, // focusItem.dir // ); // } else { // roadService.updateForAddSubtractLanesCount( // road.vectorId, // road.rightDrivewayCount + 1, // focusItem.dir // ); // } // } else { // road = dataService.getCurveRoad(focusItem.vectorId); // if (focusItem.dir == "left") { // curveRoadService.updateForAddSubtractLanesCount( // road.vectorId, // road.leftDrivewayCount + 1, // focusItem.dir // ); // } else { // curveRoadService.updateForAddSubtractLanesCount( // road.vectorId, // road.rightDrivewayCount + 1, // focusItem.dir // ); // } // } // } } else if (selectUI == VectorEvents.DelLane) { if (focusItem && focusItem.vectorId) { stateService.setEventName(VectorEvents.DelLane); } // if (focusItem && focusItem.dir && focusItem.vectorId) { // let road = dataService.getRoad(focusItem.vectorId); // if (road) { // if (focusItem.dir == "left") { // roadService.updateForAddSubtractLanesCount( // road.vectorId, // road.leftDrivewayCount - 1, // focusItem.dir // ); // } else { // roadService.updateForAddSubtractLanesCount( // road.vectorId, // road.rightDrivewayCount - 1, // focusItem.dir // ); // } // } else { // road = dataService.getCurveRoad(focusItem.vectorId); // if (focusItem.dir == "left") { // curveRoadService.updateForAddSubtractLanesCount( // road.vectorId, // road.leftDrivewayCount - 1, // focusItem.dir // ); // } else { // curveRoadService.updateForAddSubtractLanesCount( // road.vectorId, // road.rightDrivewayCount - 1, // focusItem.dir // ); // } // } // } } else if (selectUI == VectorEvents.AddCrossPoint) { if (focusItem && focusItem.vectorId) { stateService.setEventName(VectorEvents.AddCrossPoint); } // if (focusItem && focusItem.dir && focusItem.vectorId) { // const curveRoad = dataService.getCurveRoad(focusItem.vectorId); // let index = mathUtil.getIndexForCurvesPoints( // this.mousePosition, // curveRoad.points // ); // if (index != -1) { // curveRoadService.addCPoint(curveRoad, this.mousePosition, index); // } else { // const dis1 = mathUtil.getDistance( // curveRoad.points[0], // this.mousePosition // ); // const dis2 = mathUtil.getDistance( // curveRoad.points[curveRoad.points.length - 1], // this.mousePosition // ); // if (dis1 > dis2) { // curveRoadService.addCPoint( // curveRoad, // this.mousePosition, // curveRoad.points.length - 2 // ); // } else { // curveRoadService.addCPoint(curveRoad, this.mousePosition, 1); // } // } // } } else if (selectUI == VectorEvents.MinusCrossPoint) { if (focusItem && focusItem.vectorId) { stateService.setEventName(VectorEvents.MinusCrossPoint); } // if (focusItem && focusItem.dir && focusItem.vectorId) { // const curvePoint = dataService.getCurveRoadPoint(focusItem.vectorId); // const curveRoad = dataService.getCurveRoad(curvePoint.parent); // curveRoadService.subCPoint(curveRoad, curvePoint.getIndex()); // } } else if (selectUI == VectorEvents.AddBranchRoad) { } else if (selectUI == VectorEvents.AddNarrowRoad) { } else if (selectUI == VectorEvents.UnLock) { let road = dataService.getRoad(focusItem.vectorId); if (road) { roadService.convertToLines(focusItem.vectorId); } else { road = dataService.getCurveRoad(focusItem.vectorId); if (road) { curveRoadService.convertToCurveLines(focusItem.vectorId); } } if (road) { this.deleteVector(focusItem.vectorId, focusItem.type); this.layer.history.save(); this.layer.renderer.autoRedraw(); } } } async handleGeo(action) { let needAutoRedraw = false; const item = stateService.getFocusItem(); if (item && item.vectorId) { switch (action) { case GeoActions.CopyAction: await this.copyVector(item.vectorId, item.type); needAutoRedraw = true; break; case GeoActions.DeleteAction: this.deleteVector(item.vectorId, item.type); needAutoRedraw = true; break; } } if (needAutoRedraw) { this.layer.history.save(); this.layer.renderer.autoRedraw(); } } //删除按钮 deleteVector(vectorId, geoType) { switch (geoType) { case VectorType.Point: pointService.deletePoint(vectorId); break; case VectorType.Line: let line = dataService.getLine(vectorId); dataService.deleteLine(vectorId); if (vectorId == Settings.baseLineId) { this.layer.initLocation(); } else if ( line.getCategory() == VectorCategory.Line.ExtendedPositionLine || line.getCategory() == VectorCategory.Line.PositionLine || line.getCategory() == VectorCategory.Line.GuidePositionLine ) { let startPoint = dataService.getPoint(line.startId); let endPoint = dataService.getPoint(line.endId); if (startPoint.getCategory() != VectorCategory.Point.BasePoint) { pointService.deletePoint(line.startId); } if (endPoint.getCategory() != VectorCategory.Point.BasePoint) { pointService.deletePoint(line.endId); } } break; case VectorType.CurveLine: lineService.deleteCurveLine(vectorId); break; case VectorType.CurvePoint: const curvePoint = dataService.getCurvePoint(vectorId); lineService.deleteCrossPointForCurveLine( vectorId, curvePoint.getParent() ); break; case VectorType.Circle: dataService.deleteCircle(vectorId); break; case VectorType.Text: dataService.deleteText(vectorId); break; case VectorType.Magnifier: dataService.deleteMagnifier(vectorId); break; case VectorType.Road: roadService.deleteRoadForLinked(vectorId); break; case VectorType.RoadPoint: const roadPoint = dataService.getRoadPoint(vectorId); const roadPointParent = roadPoint.getParent(); for (let key in roadPointParent) { roadService.deleteRoadForLinked(key); } break; case VectorType.CurveRoadPoint: curveRoadPointService.deleteCurveRoadPoint(vectorId); break; case VectorType.CurveRoad: dataService.deleteCurveRoad(vectorId); break; case VectorType.SVG: dataService.deleteSVG(vectorId); break; } this.layer.exit(); uiService.setSelectLineCategory(VectorCategory.Line.NormalLine); uiService.setSelectPointCategory(VectorCategory.Point.NormalPoint); this.clearFocusVector(); } //复制按钮 async copyVector(vectorId, geoType) { let item; switch (geoType) { case VectorType.Line: lineService.copy(vectorId); break; case VectorType.CurveLine: lineService.copyCurveLine(vectorId); break; case VectorType.Circle: circleService.copy(vectorId); break; case VectorType.Text: textService.copy(vectorId); break; case VectorType.Road: const roadId = roadService.copyRoad(vectorId); item = stateService.getFocusItem(); item.vectorId = roadId; break; case VectorType.CurveRoad: const curveRoadId = curveRoadService.copyCurveRoad(vectorId); item = stateService.getFocusItem(); item.vectorId = curveRoadId; break; case VectorType.Magnifier: await magnifierService.copy(vectorId); break; case VectorType.SVG: svgService.copy(vectorId); break; } } //截图 async screenShot() { let canvas = this.layer.canvas; this.menu_view_reset(); //隐藏grid Settings.screenMode = true; dataService.setGridDisplay(false); this.layer.renderer.autoRedraw(); // this.downloadCadImg(canvas, "test.jpg"); const blob = await this.getCadBlob(canvas); //显示grid dataService.setGridDisplay(true); Settings.screenMode = false; this.layer.renderer.autoRedraw(); return blob; } getCadBlob(canvas) { var type = "jpg"; return new Promise((resolve) => canvas.toBlob(resolve, `${type}/image`)); } // downloadCadImg(canvas, filename) { // // 图片导出为 jpg 格式 // var type = "jpg"; // var imgData = canvas.toDataURL(type, 3); // canvas.toBlob(`${type}/image`); // // 加工image data,替换mime type // imgData = imgData.replace(this._fixType(type), "image/octet-stream"); // // 下载后的图片名 // //var filename = 'cad_' + new Date().getTime() + '.' + type // // download // this.saveFile(imgData, filename); // } saveFile(data, filename) { var save_link = document.createElementNS( "http://www.w3.org/1999/xhtml", "a" ); save_link.href = data; save_link.download = filename; var event = document.createEvent("MouseEvents"); event.initMouseEvent( "click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null ); save_link.dispatchEvent(event); } _fixType(type) { type = type.toLowerCase().replace(/jpg/i, "jpeg"); var r = type.match(/png|jpeg|bmp|gif/)[0]; return "image/" + r; } /****************************************************************************针对菜单*******************************************************************************/ //撤销 menu_revoke() { this.layer.history.goPreState(); const historyState = historyService.getHistoryState(); this.graphicStateUI.canRevoke = historyState.pre; this.graphicStateUI.canRecovery = true; this.layer.stopAddVector(); this.layer.renderer.autoRedraw(); } //恢复 menu_recovery() { this.layer.history.goNextState(); const historyState = historyService.getHistoryState(); this.graphicStateUI.canRecovery = historyState.next; this.graphicStateUI.canRevoke = true; this.layer.stopAddVector(); this.layer.renderer.autoRedraw(); } menu_view_reset() { coordinate.reSet(this.layer.canvas); this.layer.renderer.autoRedraw(); } // value 为true则开 false则关 menu_backgroundImg(value) { console.log(value); // const backgroundImg = dataService.getBackgroundImg(); backgroundImg.setDisplay(value); this.graphicStateUI.showBackImage = value; this.layer.renderer.autoRedraw(); } menu_clear(isBack) { dataService.clear(); Settings.selectLocationMode = null; Settings.baseLineId = null; uiService.setSelectBasePointId(null); elementService.hideAll(); this.layer.exit(); this.layer.initLocation(); if (!isBack) { this.layer.history.save(); } else { historyService.clearHistoryRecord(); this.layer.uiControl.graphicStateUI.canRevoke = false; this.layer.uiControl.graphicStateUI.canRecovery = false; } this.layer.renderer.autoRedraw(); } /******************************************************************************************************************************************************************/ prompt(msg) { this._prompts.push( Message.success(typeof msg === "string" ? { msg } : msg) ); } // 进入持续添加出确认与取消框 showConfirm() { this.graphicStateUI.continuedMode = true; } confirmEntry() { console.log("确认"); this.graphicStateUI.continuedMode = false; this.layer.exit(); this.layer.history.save(); this.layer.renderer.autoRedraw(); uiService.setSelectPointCategory(VectorCategory.Point.NormalPoint); uiService.setSelectLineCategory(VectorCategory.Line.NormalLine); } confirmCancel() { console.log("取消"); this.graphicStateUI.continuedMode = false; this.layer.exit(); this.layer.history.save(); this.layer.history.handleUndo(); this.layer.renderer.autoRedraw(); uiService.setSelectPointCategory(VectorCategory.Point.NormalPoint); uiService.setSelectLineCategory(VectorCategory.Line.NormalLine); } // 设置默认设置 setDefaultSetting(setting) { console.log("获得设置", setting); uiService.setRoadMidDivideWidth( // (setting.roadQuarantineWidth / coordinate.res) * coordinate.ratio setting.roadQuarantineWidth / coordinate.res ); uiService.setCurveRoadMidDivideWidth( // (setting.roadQuarantineWidth / coordinate.res) * coordinate.ratio setting.roadQuarantineWidth / coordinate.res ); uiService.setSingleLaneWidth( // (setting.singleRoadWidth / coordinate.res) * coordinate.ratio setting.singleRoadWidth / coordinate.res ); // uiService.setLineWidth(setting.lineWidth / 1000 / coordinate.res); uiService.setLineWidth(setting.lineWidth); this.layer.renderer.autoRedraw(); } // 获取默认设置 getDefaultSetting() { const singleLaneWidth = uiService.getSingleLaneWidth(); const roadMidDivideWidth = uiService.getRoadMidDivideWidth(); const lineWidth = uiService.getLineWidth(); return { singleRoadWidth: singleLaneWidth * coordinate.res, roadQuarantineWidth: roadMidDivideWidth * coordinate.res, // lineWidth: lineWidth * coordinate.res * 1000, lineWidth: lineWidth, }; } hidePrompt() { for (let prompt of this._prompts) { prompt(); } } }