import Load from "./Load"; import { stateService } from "./Service/StateService"; import { elementService } from "./Service/ElementService"; import { dataService } from "./Service/DataService"; import { textService } from "./Service/TextService"; import { historyService } from "./Service/HistoryService"; import UIControl from "./Controls/UIControl"; import { locationModeControl } from "./Controls/LocationModeControl"; import { moveText } from "./Controls/MoveText"; import { moveSVG } from "./Controls/MoveSVG"; import { moveMagnifier } from "./Controls/MoveMagnifier"; import { addRoad } from "./Controls/AddRoad"; import { addCrossRoad } from "./Controls/AddCrossRoad"; import { addLine } from "./Controls/AddLine"; import { addPoint } from "./Controls/AddPoint"; import { addCircle } from "./Controls/AddCircle"; import { addText } from "./Controls/AddText"; import { addMagnifier } from "./Controls/AddMagnifier"; import { addSVG } from "./Controls/AddSVG"; import { moveRoad } from "./Controls/MoveRoad"; import { moveLine } from "./Controls/MoveLine"; import { movePoint } from "./Controls/MovePoint"; import { moveCircle } from "./Controls/MoveCircle"; import { coordinate } from "./Coordinate"; import Render from "./Renderer/Render"; import { draw } from "./Renderer/Draw"; import { listenLayer } from "./ListenLayer"; import LayerEvents from "./enum/LayerEvents.js"; import UIEvents from "./enum/UIEvents.js"; import SelectState from "./enum/SelectState.js"; import VectorType from "./enum/VectorType"; import { mathUtil } from "./Util/MathUtil"; import History from "./History/History"; import mitt from "mitt"; import { roadService } from "./Service/RoadService"; import { edgeService } from "./Service/EdgeService"; import { roadPointService } from "./Service/RoadPointService"; import { curveRoadService } from "./Service/CurveRoadService"; import { curveRoadPointService } from "./Service/CurveRoadPointService"; import VectorCategory from "./enum/VectorCategory"; import Settings from "./Settings"; import Constant from "./Constant"; import { uiService } from "./Service/UIService"; import { imageService } from "./Service/ImageService"; import VectorEvents from "./enum/VectorEvents"; import { lineService } from "./Service/LineService"; const minDragDis = 10; const minZoom = 20; const maxZoom = 800; export default class Layer { constructor(canvas, newsletter, graphicState) { this.canvas = canvas; this.load = new Load(this); this.uiControl = new UIControl(this, newsletter, graphicState); this.renderer = new Render(this); this.history = new History(this); this.coordinate = coordinate; this.mousePosition = null; this.dragging = false; // 当前是否正在拖拽 this.start(); Object.setPrototypeOf(Object.getPrototypeOf(this), mitt()); } start() { if (this.canvas) { this.canvas.width = this.canvas.clientWidth; this.canvas.height = this.canvas.clientHeight; coordinate.init(this.canvas); draw.initContext(this.canvas); dataService.initVectorData(); this.bindEvents(); } window.vectorData = dataService.vectorData; } bindEvents() { this.canvas.addEventListener("contextmenu", function (e) { e.preventDefault(); }); this.canvas.addEventListener("mousedown", this.onMouseDown.bind(this)); this.canvas.addEventListener("mousemove", this.onMouseMove.bind(this)); this.canvas.addEventListener("mouseup", this.onMouseUp.bind(this)); this.canvas.addEventListener("touchstart", this.onMouseDown.bind(this)); this.canvas.addEventListener("touchmove", this.onMouseMove.bind(this)); this.canvas.addEventListener("touchend", this.onMouseUp.bind(this)); this.canvas.addEventListener("mousewheel", this.onWheel.bind(this)); this.canvas.addEventListener("DOMMouseScroll", this.onWheel.bind(this)); this.canvas.addEventListener("resize", this.reSize.bind(this)); document.addEventListener("keydown", this.onKeydown.bind(this)); } reSize = function () { console.log("resize"); coordinate.updateForCanvas(); this.renderer.autoRedraw(); }; onMouseDown(e) { if (e instanceof TouchEvent) { this.startX = e.touches[0].pageX; this.startY = e.touches[0].pageY; this.lastX = e.touches[0].pageX; this.lastY = e.touches[0].pageY; } else { this.startX = e.offsetX || e.layerX; this.startY = e.offsetY || e.layerY; this.lastX = e.offsetX || e.layerX; this.lastY = e.offsetY || e.layerY; } let position = coordinate.getXYFromScreen({ x: this.startX, y: this.startY, }); // 右键 if (e.button == 2) { this.stopAddVector(); return; } this.dragging = false; //用于支持平板电脑 listenLayer.start(position); let selectItem = stateService.getSelectItem(); let focusItem = stateService.getFocusItem(); if (selectItem && focusItem && selectItem.vectorId != focusItem.vectorId) { stateService.clearFocusItem(); } this.setEventName("mouseDown"); const eventName = stateService.getEventName(); switch (eventName) { case LayerEvents.AddRoad: stateService.setEventName(LayerEvents.AddingRoad); addRoad.setNewRoadPoint("start", position); break; case LayerEvents.AddCurveRoad: stateService.setEventName(LayerEvents.AddingCurveRoad); addRoad.setNewRoadPoint("start", position); break; case LayerEvents.AddLine: stateService.setEventName(LayerEvents.AddingLine); addLine.setNewLinePoint(position); break; // case LayerEvents.AddCurveLine: // stateService.setEventName(LayerEvents.AddingCurveLine); // addLine.setNewLinePoint(position); // break; case LayerEvents.AddPoint: stateService.setEventName(LayerEvents.MovePoint); const newPoint = addPoint.buildPoint(position); if (newPoint) { stateService.setSelectItem( newPoint.vectorId, VectorType.Point, SelectState.Select ); this.renderer.autoRedraw(); } break; case LayerEvents.AddCircle: stateService.setEventName(LayerEvents.AddingCircle); addCircle.setCenter(position); break; case LayerEvents.AddText: stateService.setEventName(LayerEvents.MoveText); addText.buildText(position); stateService.setSelectItem( addText.newText.vectorId, VectorType.Text, SelectState.Select ); addText.clear(); break; case LayerEvents.AddSVG: stateService.setEventName(LayerEvents.MoveSVG); addSVG.buildSVG(position); addSVG.newSVG.setType(Settings.selectSVGType); stateService.setSelectItem(addSVG.newSVG.vectorId, VectorType.SVG, -1); addSVG.clear(); break; case LayerEvents.AddMagnifier: stateService.setEventName(LayerEvents.MoveMagnifier); addMagnifier.buildMagnifier(position); stateService.setSelectItem( addMagnifier.newMagnifier.vectorId, VectorType.Magnifier, SelectState.Select ); addMagnifier.clear(); break; case VectorEvents.AddLane: let selectAddLaneFlag = false; if (selectItem && selectItem.dir && selectItem.vectorId) { let road = dataService.getRoad(selectItem.vectorId); if (road) { selectAddLaneFlag = true; let roadLanCount = road.getLanesCount(selectItem.dir); if (selectItem.dir == "left") { roadService.updateForAddSubtractLanesCount( road.vectorId, roadLanCount + 1, selectItem.dir ); } else { roadService.updateForAddSubtractLanesCount( road.vectorId, roadLanCount + 1, selectItem.dir ); } } else { road = dataService.getCurveRoad(selectItem.vectorId); if (road) { selectAddLaneFlag = true; let curveRoadLanCount = road.getLanesCount(selectItem.dir); if (selectItem.dir == "left") { curveRoadService.updateForAddSubtractLanesCount( road.vectorId, curveRoadLanCount + 1, selectItem.dir ); } else { curveRoadService.updateForAddSubtractLanesCount( road.vectorId, curveRoadLanCount + 1, selectItem.dir ); } } } this.history.save(); this.renderer.autoRedraw(); } if (!selectAddLaneFlag) { stateService.clearEventName(); } break; case VectorEvents.DelLane: let selectDelLaneFlag = false; if (selectItem && selectItem.dir && selectItem.vectorId) { let road = dataService.getRoad(selectItem.vectorId); if (road) { selectDelLaneFlag = true; let roadLanCount = road.getLanesCount(selectItem.dir); if (selectItem.dir == "left") { roadService.updateForAddSubtractLanesCount( road.vectorId, roadLanCount - 1, selectItem.dir ); } else { roadService.updateForAddSubtractLanesCount( road.vectorId, roadLanCount - 1, selectItem.dir ); } } else { road = dataService.getCurveRoad(selectItem.vectorId); if (road) { selectDelLaneFlag = true; let curveRoadLanCount = road.getLanesCount(selectItem.dir); if (selectItem.dir == "left") { curveRoadService.updateForAddSubtractLanesCount( road.vectorId, curveRoadLanCount - 1, selectItem.dir ); } else { curveRoadService.updateForAddSubtractLanesCount( road.vectorId, curveRoadLanCount - 1, selectItem.dir ); } } } this.history.save(); this.renderer.autoRedraw(); } if (!selectDelLaneFlag) { stateService.clearEventName(); } break; case VectorEvents.AddCrossPoint: if (focusItem && focusItem.vectorId) { if (focusItem.type == VectorType.CurveRoad) { const curveRoad = dataService.getCurveRoad(focusItem.vectorId); let index = mathUtil.getIndexForCurvesPoints( position, curveRoad.points ); if (index != -1) { curveRoadService.addCPoint(curveRoad, position, index); } else { const dis1 = mathUtil.getDistance(curveRoad.points[0], position); const dis2 = mathUtil.getDistance( curveRoad.points[curveRoad.points.length - 1], position ); if (dis1 > dis2) { index = curveRoad.points.length - 2; } else { index = 1; } curveRoadService.addCPoint(curveRoad, position, index); } curveRoadService.setLanes(curveRoad.vectorId); // curveRoadService.updateForMovePoint( // curveRoad.points[index + 1].vectorId, // position // ); } else if (focusItem.type == VectorType.Line) { let line = dataService.getLine(focusItem.vectorId); const weight = line.getWeight(); let startPoint = dataService.getPoint(line.startId); let endPoint = dataService.getPoint(line.endId); dataService.deleteLine(focusItem.vectorId); let curveLine = lineService.createCurveLine(startPoint, endPoint); mathUtil.clonePoint(curveLine.points[1], position); curveLine.curves = mathUtil.getCurvesByPoints(curveLine.points); curveLine.setWeight(weight); const style = line.getStyle(); curveLine.setStyle(style); } else if (focusItem.type == VectorType.CurveLine) { let curveLine = dataService.getCurveLine(focusItem.vectorId); let index = mathUtil.getIndexForCurvesPoints( position, curveLine.points ); if (index != -1) { lineService.addCPoint(position, index, focusItem.vectorId); } else { const dis1 = mathUtil.getDistance(curveLine.points[0], position); const dis2 = mathUtil.getDistance( curveLine.points[curveLine.points.length - 1], position ); if (dis1 > dis2) { index = curveLine.points.length - 2; } else { index = 1; } lineService.addCPoint(position, index, focusItem.vectorId); } } stateService.clearEventName(); this.history.save(); this.renderer.autoRedraw(); } break; case VectorEvents.MinusCrossPoint: if (selectItem && selectItem.vectorId) { const curvePoint = dataService.getCurveRoadPoint(selectItem.vectorId); if (curvePoint) { const curveRoad = dataService.getCurveRoad(curvePoint.parent); if (curveRoad.points.length > 3) { curveRoadService.subCPoint(curveRoad, curvePoint.getIndex()); curveRoadService.setLanes(curveRoad.vectorId); stateService.clearEventName(); } this.history.save(); this.renderer.autoRedraw(); } } break; } selectItem = stateService.getSelectItem(); stateService.setDraggingItem(selectItem); stateService.clearFocusItem(); if ( selectItem && this.uiControl.focusVector && selectItem.vectorId == this.uiControl.focusVector.vectorId ) { } else { this.uiControl.clearFocusVector(); } // 清除上一个状态 // 设置当前事件名称 e.preventDefault(); e.stopPropagation(); } onMouseMove(e) { let X = e.offsetX || e.layerX; let Y = e.offsetY || e.layerY; if (e instanceof TouchEvent) { X = e.touches[0].pageX; Y = e.touches[0].pageY; //切换到缩放 if (e.touches.length > 1) { //记录开始的两个触摸点的坐标 if (!this.StorePage1 || !this.StorePage2) { this.onMouseUp(e); this.StorePage1 = { x: e.touches[0].pageX, y: e.touches[0].pageY }; this.StorePage2 = { x: e.touches[1].pageX, y: e.touches[1].pageY }; this.StoreMidePage = { x: (this.StorePage1.x + this.StorePage2.x) / 2, y: (this.StorePage1.y + this.StorePage2.y) / 2, }; return; } const point1 = { x: e.touches[0].pageX, y: e.touches[0].pageY, }; const point2 = { x: e.touches[1].pageX, y: e.touches[1].pageY, }; let dis1 = mathUtil.getDistance(point1, point2) / 100; let dis2 = mathUtil.getDistance(this.StorePage1, this.StorePage2) / 100; let zoom = (coordinate.zoom * dis1) / dis2; this.zoomVector(this.StoreMidePage, zoom); mathUtil.clonePoint(this.StorePage1, point1); mathUtil.clonePoint(this.StorePage2, point2); return; } } let dx = X - this.lastX; let dy = Y - this.lastY; dx = dx * coordinate.ratio; dy = dy * coordinate.ratio; let position = coordinate.getXYFromScreen({ x: X, y: Y, }); this.mousePosition = { x: position.x, y: position.y, }; const eventName = stateService.getEventName(); if ( !this.dragging && Math.abs(X - this.startX) < minDragDis && Math.abs(Y - this.startY) < minDragDis ) { return; } this.dragging = true; if ( Math.abs(X - this.startX) > minDragDis || Math.abs(Y - this.startY) > minDragDis ) { // 是否拖拽了 if (eventName != null) { if ( eventName == LayerEvents.MoveMagnifier && stateService.getSelectItem().state != 0 ) { } else { stateService.clearFocusItem(); this.uiControl.clearFocusVector(); } } } // 是否需要重绘 let needAutoRedraw = false; let point = null; this.lastX = X; this.lastY = Y; const draggingItem = stateService.getDraggingItem(); switch (eventName) { case null: //监控 needAutoRedraw = listenLayer.start(position); let seleteItem = stateService.getSelectItem(); if (seleteItem != null) { console.log("选中:" + seleteItem.vectorId); } else { } break; case LayerEvents.PanBackGround: stateService.clearItems(); let center = {}; center.x = coordinate.center.x - (dx * coordinate.defaultZoom) / coordinate.zoom; center.y = coordinate.center.y + (dy * coordinate.defaultZoom) / coordinate.zoom; let tempCenter = {}; mathUtil.clonePoint(tempCenter, coordinate.center); mathUtil.clonePoint(coordinate.center, center); let inScreen = imageService.backgroundImgVertexsInScreenXY(); if (!inScreen) { dataService.setGridForPan(); needAutoRedraw = true; } else { mathUtil.clonePoint(coordinate.center, tempCenter); } break; case LayerEvents.AddRoad: needAutoRedraw = true; listenLayer.start(position); if ( listenLayer.modifyPoint && listenLayer.modifyPoint.hasOwnProperty("x") ) { position = { x: listenLayer.modifyPoint.x, y: listenLayer.modifyPoint.y, }; } elementService.hideAll(); //鼠标样式 elementService.setPoint(position); elementService.showPoint(); this.showElementLine(position, eventName); break; case LayerEvents.AddLine: needAutoRedraw = true; listenLayer.start(position); if ( listenLayer.modifyPoint && listenLayer.modifyPoint.hasOwnProperty("x") ) { position = { x: listenLayer.modifyPoint.x, y: listenLayer.modifyPoint.y, }; } elementService.hideAll(); elementService.setPoint(position); elementService.showPoint(); this.showElementLine(position, eventName); break; case LayerEvents.AddCurveLine: needAutoRedraw = true; listenLayer.start(position); if ( listenLayer.modifyPoint && listenLayer.modifyPoint.hasOwnProperty("x") ) { position = { x: listenLayer.modifyPoint.x, y: listenLayer.modifyPoint.y, }; } elementService.hideAll(); elementService.setPoint(position); elementService.showPoint(); this.showElementLine(position, eventName); break; case LayerEvents.AddCircle: needAutoRedraw = true; listenLayer.start(position); if ( listenLayer.modifyPoint && listenLayer.modifyPoint.hasOwnProperty("x") ) { position = { x: listenLayer.modifyPoint.x, y: listenLayer.modifyPoint.y, }; } elementService.hideAll(); elementService.setPoint(position); elementService.showPoint(); this.showElementLine(position); break; case LayerEvents.AddingRoad: needAutoRedraw = true; listenLayer.start(position); // listenLayer.start(position, { // exceptLineId: exceptLineId, // exceptPointId: exceptPointId, // addRoad.startInfo.linkedRoadId // addRoad.startInfo.linkedRoadPointId // }); if ( listenLayer.modifyPoint && listenLayer.modifyPoint.hasOwnProperty("x") ) { position = { x: listenLayer.modifyPoint.x, y: listenLayer.modifyPoint.y, }; // console.log( // "LayerEvents.AddingRoad:" + JSON.stringify(listenLayer.modifyPoint) // ); } elementService.execute(addRoad.startInfo.position, position); elementService.setPoint(position); elementService.setNewRoad(addRoad.startInfo.position, position); elementService.showNewRoad(); addRoad.setNewRoadPoint("end", position); addRoad.canAdd = addRoad.canAddRoadForEnd(position); if (!addRoad.canAdd) { elementService.setNewRoadState("error"); } else { elementService.setNewRoadState("normal"); } elementService.showPoint(); this.showElementLine(position, eventName); break; case LayerEvents.AddingLine: needAutoRedraw = true; let exceptLineId = null; let exceptPointId = null; if (addLine.newLine != null) { exceptLineId = addLine.newLine.vectorId; exceptPointId = addLine.newLine.endId; if (exceptPointId) { let exceptPoint = dataService.getPoint(exceptPointId); exceptLineId = exceptPoint.getParent(); } } listenLayer.start(position, { //exceptLineId: exceptLineId, exceptLineIds: exceptLineId, exceptPointId: exceptPointId, }); if ( listenLayer.modifyPoint && listenLayer.modifyPoint.hasOwnProperty("x") ) { position = { x: listenLayer.modifyPoint.x, y: listenLayer.modifyPoint.y, }; } // elementService.execute(addLine.startInfo.position, position); // elementService.setPoint(position); if (addLine.newLine == null) { addLine.buildLine(position); } else { addLine.updateLine(position); } elementService.hideAll(); elementService.setPoint(position); elementService.showPoint(); this.showElementLine(position, eventName); break; case LayerEvents.AddingCurveLine: needAutoRedraw = true; let exceptCurveLineId = null; let exceptCurvePointId = null; if (addLine.newLine != null) { exceptCurveLineId = addLine.newLine.vectorId; exceptCurvePointId = addLine.newLine.endId; } listenLayer.start(position, { exceptCurveLineId: exceptCurveLineId, exceptCurvePointId: exceptCurvePointId, }); if ( listenLayer.modifyPoint && listenLayer.modifyPoint.hasOwnProperty("x") ) { position = { x: listenLayer.modifyPoint.x, y: listenLayer.modifyPoint.y, }; } // elementService.execute(addLine.startInfo.position, position); // elementService.setPoint(position); if (addLine.newLine == null) { addLine.buildCurveLine(position); } else { addLine.updateCurveLine(position); } elementService.hideAll(); elementService.setPoint(position); elementService.showPoint(); this.showElementLine(position, eventName); break; case LayerEvents.AddingCircle: needAutoRedraw = true; let exceptCircleId = null; if (addCircle.newCircle != null) { exceptCircleId = addCircle.newCircle.vectorId; } listenLayer.start(position, { exceptCircleId: exceptCircleId }); if ( listenLayer.modifyPoint && listenLayer.modifyPoint.hasOwnProperty("x") ) { position = { x: listenLayer.modifyPoint.x, y: listenLayer.modifyPoint.y, }; } if (addCircle.newCircle == null) { addCircle.buildCircle(position); } else { addCircle.updateCircle(position); } elementService.hideAll(); elementService.setPoint(position); elementService.showPoint(); this.showElementLine(position); break; case LayerEvents.MoveRoad: needAutoRedraw = true; //只允许拖拽一条公路 let road = dataService.getRoad(draggingItem.vectorId); let start = dataService.getRoadPoint(road.startId); let end = dataService.getRoadPoint(road.endId); if ( Object.keys(start.getParent()).length == 1 && Object.keys(end.getParent()).length == 1 ) { //拖拽的路只有一条 moveRoad.moveRoad( draggingItem.vectorId, (dx * coordinate.defaultZoom) / coordinate.zoom, (dy * coordinate.defaultZoom) / coordinate.zoom ); } break; case LayerEvents.MoveRoadPoint: point = dataService.getRoadPoint(draggingItem.vectorId); listenLayer.start(position, { exceptRoadPointId: draggingItem.vectorId, exceptRoadIds: point.parent, }); if ( listenLayer.modifyPoint && (listenLayer.modifyPoint.linkedRoadPointId || listenLayer.modifyPoint.linkedRoadId || listenLayer.modifyPoint.linkedCurveRoadPointId || listenLayer.modifyPoint.linkedRoadPointIdX || listenLayer.modifyPoint.linkedRoadPointIdY) ) { position = { x: listenLayer.modifyPoint.x, y: listenLayer.modifyPoint.y, }; } else { listenLayer.modifyPoint = null; } let flag = moveRoad.moveingRoadPoint( draggingItem.vectorId, position, listenLayer.modifyPoint ); if (!flag) { elementService.hideAll(); } else { this.showElementLine(point, eventName); } needAutoRedraw = true; break; case LayerEvents.AddCurveRoad: needAutoRedraw = true; listenLayer.start(position); if ( listenLayer.modifyPoint && listenLayer.modifyPoint.hasOwnProperty("x") ) { position = { x: listenLayer.modifyPoint.x, y: listenLayer.modifyPoint.y, }; } elementService.hideAll(); elementService.setPoint(position); elementService.showPoint(); this.showElementLine(position, eventName); break; case LayerEvents.AddingCurveRoad: needAutoRedraw = true; listenLayer.start(position); if ( listenLayer.modifyPoint && listenLayer.modifyPoint.hasOwnProperty("x") ) { position = { x: listenLayer.modifyPoint.x, y: listenLayer.modifyPoint.y, }; } elementService.execute(addRoad.startInfo.position, position); elementService.setPoint(position); elementService.setNewRoad(addRoad.startInfo.position, position); elementService.showNewRoad(); addRoad.setNewRoadPoint("end", position); addRoad.canAdd = addRoad.canAddRoadForEnd(position); if (!addRoad.canAdd) { elementService.setNewRoadState("error"); } else { elementService.setNewRoadState("normal"); } elementService.showPoint(); this.showElementLine(position, eventName); break; case LayerEvents.MoveCurveRoad: needAutoRedraw = true; moveRoad.moveCurveRoad( draggingItem.vectorId, (dx * coordinate.defaultZoom) / coordinate.zoom, (dy * coordinate.defaultZoom) / coordinate.zoom ); break; case LayerEvents.MoveCurveRoadPoint: if (!draggingItem || !draggingItem.vectorId) { return; } point = dataService.getCurveRoadPoint(draggingItem.vectorId); listenLayer.start(position, { exceptCurveRoadPointId: draggingItem.vectorId, exceptCurveRoadId: point.parent, //不会融合,所以parent只有一个 }); if ( listenLayer.modifyPoint && (listenLayer.modifyPoint.linkedCurveRoadPointId || listenLayer.modifyPoint.linkedRoadPointId || listenLayer.modifyPoint.linkedRoadId || listenLayer.modifyPoint.linkedRoadPointIdX || listenLayer.modifyPoint.linkedRoadPointIdY || listenLayer.modifyPoint.linkedCurvePointIdX || listenLayer.modifyPoint.linkedCurvePointIdY || listenLayer.modifyPoint.linkedCurveRoadPointIdX) ) { position = { x: listenLayer.modifyPoint.x, y: listenLayer.modifyPoint.y, }; } moveRoad.moveCurveRoadPoint(draggingItem.vectorId, position); this.showElementLine(point, eventName); needAutoRedraw = true; break; case LayerEvents.MoveCrossPoint: if (!draggingItem || !draggingItem.vectorId) { return; } moveRoad.moveCrossPoint(draggingItem.vectorId, position); needAutoRedraw = true; break; case LayerEvents.MoveEdge: moveRoad.moveEdge(draggingItem.vectorId, position); needAutoRedraw = true; break; case LayerEvents.MoveCurveEdge: if (listenLayer.modifyPoint) { moveRoad.moveCurveEdge( draggingItem.vectorId, listenLayer.modifyPoint.selectIndex, position ); } needAutoRedraw = true; break; case LayerEvents.MoveLine: if (draggingItem != null) { let flag = moveLine.moveLine( draggingItem.vectorId, (dx * coordinate.defaultZoom) / coordinate.zoom, (dy * coordinate.defaultZoom) / coordinate.zoom ); if (!flag) { this.lastX = this.lastX - dx / coordinate.ratio; this.lastY = this.lastY - dy / coordinate.ratio; } needAutoRedraw = true; } break; case LayerEvents.MovePoint: if (draggingItem != null) { point = dataService.getPoint(draggingItem.vectorId); listenLayer.start(position, { exceptPointId: draggingItem.vectorId, exceptLineIds: point.parent, }); if ( listenLayer.modifyPoint && listenLayer.modifyPoint.x && listenLayer.modifyPoint.y ) { position = { x: listenLayer.modifyPoint.x, y: listenLayer.modifyPoint.y, }; } let movePointFlag = movePoint.movePoint( position, draggingItem.vectorId ); needAutoRedraw = true; if (!point) { stateService.clearEventName(); } else if (movePointFlag) { this.showElementLine(point, eventName); } } break; case LayerEvents.MoveCurvePoint: if (draggingItem != null) { let curvePoint = dataService.getCurvePoint(draggingItem.vectorId); listenLayer.start(position, { exceptCurvePointId: draggingItem.vectorId, exceptCurveLineId: curvePoint.parent, }); if ( listenLayer.modifyPoint && listenLayer.modifyPoint.hasOwnProperty("x") ) { position = { x: listenLayer.modifyPoint.x, y: listenLayer.modifyPoint.y, }; } movePoint.moveCurvePoint(position, draggingItem.vectorId); let curveLine = dataService.getCurveLine(curvePoint.getParent()); this.showElementLine(curvePoint, eventName); needAutoRedraw = true; } break; case LayerEvents.MoveCurveLine: if (draggingItem != null) { moveLine.moveCurveLine( draggingItem.vectorId, (dx * coordinate.defaultZoom) / coordinate.zoom, (dy * coordinate.defaultZoom) / coordinate.zoom ); needAutoRedraw = true; } break; case LayerEvents.MoveCircle: if (draggingItem != null) { if (draggingItem.state == -1) { moveCircle.moveFull( draggingItem.vectorId, (dx * coordinate.defaultZoom) / coordinate.zoom, (dy * coordinate.defaultZoom) / coordinate.zoom ); } else if ( draggingItem.state == 0 || draggingItem.state == 1 || draggingItem.state == 2 || draggingItem.state == 3 ) { moveCircle.movePoint( position, draggingItem.vectorId, draggingItem.state ); } else { debugger; } needAutoRedraw = true; } break; case LayerEvents.MoveText: needAutoRedraw = true; if (draggingItem != null) { let vectorText = dataService.getText(draggingItem.vectorId); if (!vectorText.linkedPointId) { moveText.moveFullText(position, draggingItem.vectorId); } else { movePoint.movePoint(position, vectorText.linkedPointId); } } break; case LayerEvents.MoveSVG: needAutoRedraw = true; if (draggingItem != null) { if (draggingItem.state == -1) { moveSVG.moveFullSVG(position, draggingItem.vectorId); } else { moveSVG.movePoint( position, draggingItem.vectorId, draggingItem.state ); } } break; case LayerEvents.MoveMagnifier: needAutoRedraw = true; if (draggingItem != null) { moveMagnifier.moveFullMagnifier( position, draggingItem.vectorId, draggingItem.state ); } break; } if (needAutoRedraw) { this.renderer.autoRedraw(); } } onMouseUp(e) { // 右键 if (e.button == 2) { this.dragging = false; return; } let X = e.offsetX || e.layerX; let Y = e.offsetY || e.layerY; if (e instanceof TouchEvent) { X = this.lastX; Y = this.lastY; this.StorePage1 = null; this.StorePage2 = null; this.StoreMidePage = null; if (e.touches.length > 1) { this.dragging = false; return; } } let eventName = stateService.getEventName(); const draggingItem = stateService.getDraggingItem(); const selectItem = stateService.getSelectItem(); let focusItem = null; if (!this.dragging && selectItem) { focusItem = { vectorId: selectItem.vectorId, type: selectItem.type, cursor: { x: this.lastX, y: this.lastY }, dir: selectItem.dir, }; stateService.setFocusItem(focusItem); this.uiControl.focusVector = focusItem; stateService.clearDraggingItem(); } else { this.uiControl.clearFocusVector(); } this.dragging = false; let position = coordinate.getXYFromScreen({ x: X, y: Y, }); let needAutoRedraw = false; switch (eventName) { case null: if (e instanceof TouchEvent) { stateService.clearSelectItem(); stateService.clearDraggingItem(); this.uiControl.clearFocusVector(); this.renderer.autoRedraw(); } return; case LayerEvents.PanBackGround: needAutoRedraw = true; stateService.clearFocusItem(); this.uiControl.clearFocusVector(); this.uiControl.clearCurrentUI(); break; case LayerEvents.MoveRoadPoint: if (!draggingItem || !draggingItem.vectorId) { break; } needAutoRedraw = true; elementService.hideAll(); let point = dataService.getRoadPoint(draggingItem.vectorId); if (point) { listenLayer.start(point, { exceptRoadPointId: draggingItem.vectorId, exceptRoadIds: point.parent, }); moveRoad.finishByMoveRoadPoint(point); this.history.save(); } break; // case LayerEvents.AddRoad: // addRoad.setNewRoadPoint("start", position); // break; case LayerEvents.AddingRoad: needAutoRedraw = true; if (addRoad.canAdd) { addRoad.buildRoad(); elementService.hideAll(); } this.uiControl.confirmEntry(); //不能连续创建道路 break; case LayerEvents.AddingLine: needAutoRedraw = true; addLine.finish(position); this.updateForLocation(); //绘制的是基准线 if ( addLine.newLine && Settings.baseLineId == addLine.newLine.vectorId ) { stateService.clearEventName(); this.history.save(); } addLine.clearVectorData(); elementService.hideAll(); break; case LayerEvents.AddingCurveLine: needAutoRedraw = true; addLine.finishCurveLine(position); addLine.clearVectorData(); this.history.save(); elementService.hideAll(); break; case LayerEvents.AddingCircle: needAutoRedraw = true; addCircle.finish(position); addCircle.clear(); this.uiControl.clearSelectUI(); this.history.save(); elementService.hideAll(); break; case LayerEvents.MoveText: needAutoRedraw = true; this.history.save(); elementService.hideAll(); this.uiControl.clearUI(); break; case LayerEvents.MoveSVG: needAutoRedraw = true; this.history.save(); elementService.hideAll(); break; case LayerEvents.MoveMagnifier: needAutoRedraw = true; this.history.save(); elementService.hideAll(); this.uiControl.clearUI(); break; case LayerEvents.MoveSVG: needAutoRedraw = true; this.history.save(); elementService.hideAll(); break; case LayerEvents.AddingCurveRoad: needAutoRedraw = true; if (addRoad.canAdd) { addRoad.buildCurveRoad(); elementService.hideAll(); } this.uiControl.confirmEntry(); //不能连续创建道路 break; case LayerEvents.MoveRoad: needAutoRedraw = true; this.history.save(); break; case LayerEvents.MoveCurveRoad: needAutoRedraw = true; this.history.save(); break; case LayerEvents.MoveCurveRoadPoint: needAutoRedraw = true; if ( listenLayer.modifyPoint && listenLayer.modifyPoint.linkedCurveRoadPointId ) { let curveRoadPoint1 = dataService.getCurveRoadPoint( listenLayer.modifyPoint.linkedCurveRoadPointId ); let curveRoadPoint2 = dataService.getCurveRoadPoint( draggingItem.vectorId ); if ( listenLayer.modifyPoint.linkedCurveRoadPointId != draggingItem.vectorId && curveRoadPoint1.getParent() == curveRoadPoint2.getParent() ) { curveRoadPointService.deleteCurveRoadPoint( listenLayer.modifyPoint.linkedCurveRoadPointId ); } } this.history.save(); break; case LayerEvents.MoveCrossPoint: needAutoRedraw = true; this.history.save(); break; case LayerEvents.MoveEdge: needAutoRedraw = true; this.history.save(); break; case LayerEvents.MoveCurveEdge: needAutoRedraw = true; this.history.save(); break; case LayerEvents.MoveLine: needAutoRedraw = true; this.history.save(); break; case LayerEvents.MovePoint: needAutoRedraw = true; if (draggingItem && draggingItem.vectorId) { movePoint.finish(draggingItem.vectorId); uiService.setSelectPointCategory(VectorCategory.Point.NormalPoint); } this.history.save(); elementService.hideAll(); break; case LayerEvents.MoveCurvePoint: needAutoRedraw = true; if ( listenLayer.modifyPoint && listenLayer.modifyPoint.linkedCurvePointId ) { let curvePoint1 = dataService.getCurvePoint( listenLayer.modifyPoint.linkedCurvePointId ); let curvePoint2 = dataService.getCurvePoint(draggingItem.vectorId); if ( listenLayer.modifyPoint.linkedCurvePointId != draggingItem.vectorId && curvePoint1.getParent() == curvePoint2.getParent() ) { lineService.deleteCrossPointForCurveLine( listenLayer.modifyPoint.linkedCurvePointId, curvePoint1.getParent() ); } } elementService.hideAll(); this.history.save(); break; case LayerEvents.MoveCurveLine: needAutoRedraw = true; this.history.save(); break; case LayerEvents.MoveCircle: needAutoRedraw = true; this.history.save(); break; case LayerEvents.AddPoint: // 绘制的是基准点 if (Settings.selectPointCategory == VectorCategory.Point.BasePoint) { uiService.setSelectPointCategory(null); stateService.clearEventName(); this.history.save(); } else { this.uiControl.showConfirm(); } needAutoRedraw = true; elementService.hideAll(); break; case LayerEvents.AddRoadTemplate: addCrossRoad.build(position); this.history.save(); this.renderer.autoRedraw(); break; } this.setEventName("mouseUp"); stateService.clearDraggingItem(); stateService.clearSelectItem(); if (needAutoRedraw) { this.renderer.autoRedraw(); } } onWheel(e) { e.preventDefault(); const type = e.type; if (type == "DOMMouseScroll" || type == "mousewheel") { // 当在canvas用滚轮滚动时 const delta = e.wheelDelta ? (e.wheelDelta / 120) * 20 : (-(e.detail || 0) / 3) * 20; const zoom = coordinate.zoom + delta; let X = e.offsetX || e.layerX; let Y = e.offsetY || e.layerY; this.zoomVector( { x: X, y: Y, }, zoom ); } } zoomVector(position, zoom) { if (zoom < minZoom || zoom > maxZoom) { return; } let tempCenter = {}; mathUtil.clonePoint(tempCenter, coordinate.center); let tempZoom = coordinate.zoom; coordinate.updateZoom(position, zoom); let inScreen = imageService.backgroundImgVertexsInScreenXY(); if (!inScreen) { dataService.setGridForZoom(); this.renderer.autoRedraw(); } else { mathUtil.clonePoint(coordinate.center, tempCenter); coordinate.zoom = tempZoom; } } setEventName(eventType) { let eventName = stateService.getEventName(); if (eventType == "mouseDown") { if (eventName == null) { const selectItem = stateService.getSelectItem(); if (selectItem == null) { stateService.setEventName(LayerEvents.PanBackGround); } else if (selectItem.type == VectorType.Road) { stateService.setEventName(LayerEvents.MoveRoad); } else if (selectItem.type == VectorType.RoadPoint) { stateService.setEventName(LayerEvents.MoveRoadPoint); } else if (selectItem.type == VectorType.CurveRoad) { stateService.setEventName(LayerEvents.MoveCurveRoad); } else if (selectItem.type == VectorType.CurveRoadPoint) { stateService.setEventName(LayerEvents.MoveCurveRoadPoint); } else if (selectItem.type == VectorType.CrossPoint) { stateService.setEventName(LayerEvents.MoveCrossPoint); } else if (selectItem.type == VectorType.RoadEdge) { stateService.setEventName(LayerEvents.MoveEdge); } else if (selectItem.type == VectorType.CurveRoadEdge) { stateService.setEventName(LayerEvents.MoveCurveEdge); } else if (selectItem.type == VectorType.Point) { stateService.setEventName(LayerEvents.MovePoint); } else if (selectItem.type == VectorType.Line) { stateService.setEventName(LayerEvents.MoveLine); } else if (selectItem.type == VectorType.CurvePoint) { stateService.setEventName(LayerEvents.MoveCurvePoint); } else if (selectItem.type == VectorType.CurveLine) { stateService.setEventName(LayerEvents.MoveCurveLine); } else if (selectItem.type == VectorType.Circle) { stateService.setEventName(LayerEvents.MoveCircle); } else if (selectItem.type == VectorType.Text) { stateService.setEventName(LayerEvents.MoveText); } else if (selectItem.type == VectorType.Magnifier) { stateService.setEventName(LayerEvents.MoveMagnifier); } else if (selectItem.type == VectorType.SVG) { stateService.setEventName(LayerEvents.MoveSVG); } } } else if (eventType == "mouseUp") { if (eventName == LayerEvents.AddingRoad) { // this.uiControl.showConfirm(); stateService.setEventName(LayerEvents.AddRoad); } else if (eventName == LayerEvents.AddingLine) { this.uiControl.showConfirm(); stateService.setEventName(LayerEvents.AddLine); } else if (eventName == LayerEvents.AddingCurveRoad) { // this.uiControl.showConfirm(); stateService.setEventName(LayerEvents.AddCurveRoad); } else if (eventName == LayerEvents.AddLine) { stateService.setEventName(LayerEvents.AddingLine); } else if (eventName == LayerEvents.AddPoint) { } else if (eventName == VectorEvents.AddLane) { } else if (eventName == VectorEvents.DelLane) { } else { stateService.clearEventName(); } } } exit() { stateService.clear(); this.uiControl.clearUI(); this.uiControl.clearFocusVector(); this.uiControl.clearCurrentUI(); } stopAddVector() { let eventName = stateService.getEventName(); if ( eventName != LayerEvents.AddingRoad && eventName != LayerEvents.AddingLine ) { stateService.clearEventName(); } else if (eventName == LayerEvents.AddingRoad) { stateService.setEventName(LayerEvents.AddRoad); } else if (eventName == LayerEvents.AddingLine) { stateService.setEventName(LayerEvents.AddLine); } addLine.clear(); //之前会保留category this.uiControl.clearUI(); elementService.hideAll(); this.renderer.autoRedraw(); } initLocation() { uiService.setBaseLineId(null); this.uiControl.graphicStateUI.canAngleLocationMode = false; this.uiControl.graphicStateUI.canAllLocationMode = false; this.uiControl.graphicStateUI.canVerticalMeasure = false; this.uiControl.graphicStateUI.existsBaseLine = false; } //更新定位信息 updateForLocation() { if (Settings.baseLineId) { this.uiControl.graphicStateUI.canAngleLocationMode = true; this.uiControl.graphicStateUI.canAllLocationMode = true; this.uiControl.graphicStateUI.existsBaseLine = true; this.uiControl.graphicStateUI.canVerticalMeasure = true; } else { this.uiControl.graphicStateUI.canAngleLocationMode = false; this.uiControl.graphicStateUI.canAllLocationMode = false; this.uiControl.graphicStateUI.existsBaseLine = false; this.uiControl.graphicStateUI.canVerticalMeasure = false; } } // showElementLine(point, eventName) { // let otherPoint1 = null; // let otherPoint2 = null; // if ( // listenLayer.modifyPoint && // listenLayer.modifyPoint.linkedRoadPointIdX && // (eventName == LayerEvents.AddingRoad || // eventName == LayerEvents.MoveRoadPoint || // eventName == LayerEvents.AddRoad) // ) { // otherPoint1 = dataService.getRoadPoint( // listenLayer.modifyPoint.linkedRoadPointIdX // ); // } else if ( // listenLayer.modifyPoint && // listenLayer.modifyPoint.linkedCurveRoadPointIdX && // (eventName == LayerEvents.AddingCurveRoad || // eventName == LayerEvents.MoveCurveRoadPoint || // eventName == LayerEvents.AddCurveRoad) // ) { // otherPoint1 = dataService.getCurveRoadPoint( // listenLayer.modifyPoint.linkedCurvePointIdX // ); // } else if ( // listenLayer.modifyPoint && // listenLayer.modifyPoint.linkedPointIdX && // (eventName == LayerEvents.AddLine || eventName == LayerEvents.MovePoint) // ) { // otherPoint1 = dataService.getPoint( // listenLayer.modifyPoint.linkedPointIdX // ); // } else if ( // listenLayer.modifyPoint && // listenLayer.modifyPoint.linkedCurvePointIdX && // (eventName == LayerEvents.AddCurveLine || // eventName == LayerEvents.MoveCurvePoint) // ) { // otherPoint1 = dataService.getCurvePoint( // listenLayer.modifyPoint.linkedCurvePointIdX // ); // } // if ( // listenLayer.modifyPoint && // listenLayer.modifyPoint.linkedRoadPointIdY && // (eventName == LayerEvents.AddingRoad || // eventName == LayerEvents.MoveRoadPoint || // eventName == LayerEvents.AddRoad) // ) { // otherPoint2 = dataService.getRoadPoint( // listenLayer.modifyPoint.linkedRoadPointIdY // ); // } else if ( // listenLayer.modifyPoint && // listenLayer.modifyPoint.linkedCurvePointIdY && // (eventName == LayerEvents.AddingCurveRoad || // eventName == LayerEvents.MoveCurveRoadPoint || // eventName == LayerEvents.AddCurveRoad) // ) { // otherPoint2 = dataService.getCurveRoadPoint( // listenLayer.modifyPoint.linkedCurvePointIdY // ); // } else if ( // listenLayer.modifyPoint && // listenLayer.modifyPoint.linkedPointIdY && // (eventName == LayerEvents.AddLine || eventName == LayerEvents.MovePoint) // ) { // otherPoint2 = dataService.getPoint( // listenLayer.modifyPoint.linkedPointIdY // ); // } else if ( // listenLayer.modifyPoint && // listenLayer.modifyPoint.linkedCurvePointIdY && // (eventName == LayerEvents.AddCurveLine || // eventName == LayerEvents.MoveCurvePoint) // ) { // otherPoint2 = dataService.getCurvePoint( // listenLayer.modifyPoint.linkedCurvePointIdY // ); // } // let otherPoint = {}; // if (otherPoint1) { // otherPoint.x = otherPoint1.x; // otherPoint.y = otherPoint1.y; // } // if (otherPoint2) { // otherPoint.y = otherPoint2.y; // if (!otherPoint.hasOwnProperty("x")) { // otherPoint.x = otherPoint2.x; // } // } // if (otherPoint.hasOwnProperty("x") && otherPoint.hasOwnProperty("y")) { // elementService.execute(otherPoint, point); // } else { // elementService.hideAll(); // } // } showElementLine(point) { let otherPoint1 = null; let otherPoint2 = null; if (listenLayer.modifyPoint && listenLayer.modifyPoint.linkedRoadPointIdX) { otherPoint1 = dataService.getRoadPoint( listenLayer.modifyPoint.linkedRoadPointIdX ); } else if ( listenLayer.modifyPoint && listenLayer.modifyPoint.linkedCurveRoadPointIdX ) { otherPoint1 = dataService.getCurveRoadPoint( listenLayer.modifyPoint.linkedCurvePointIdX ); } else if ( listenLayer.modifyPoint && listenLayer.modifyPoint.linkedPointIdX ) { otherPoint1 = dataService.getPoint( listenLayer.modifyPoint.linkedPointIdX ); } else if ( listenLayer.modifyPoint && listenLayer.modifyPoint.linkedCurvePointIdX ) { otherPoint1 = dataService.getCurvePoint( listenLayer.modifyPoint.linkedCurvePointIdX ); } if (listenLayer.modifyPoint && listenLayer.modifyPoint.linkedRoadPointIdY) { otherPoint2 = dataService.getRoadPoint( listenLayer.modifyPoint.linkedRoadPointIdY ); } else if ( listenLayer.modifyPoint && listenLayer.modifyPoint.linkedCurvePointIdY ) { otherPoint2 = dataService.getCurveRoadPoint( listenLayer.modifyPoint.linkedCurvePointIdY ); } else if ( listenLayer.modifyPoint && listenLayer.modifyPoint.linkedPointIdY ) { otherPoint2 = dataService.getPoint( listenLayer.modifyPoint.linkedPointIdY ); } else if ( listenLayer.modifyPoint && listenLayer.modifyPoint.linkedCurvePointIdY ) { otherPoint2 = dataService.getCurvePoint( listenLayer.modifyPoint.linkedCurvePointIdY ); } let otherPoint = {}; if (otherPoint1) { otherPoint.x = otherPoint1.x; otherPoint.y = otherPoint1.y; } if (otherPoint2) { otherPoint.y = otherPoint2.y; if (!otherPoint.hasOwnProperty("x")) { otherPoint.x = otherPoint2.x; } } elementService.execute(otherPoint, point); } //测试用 onKeydown(e) { let focusItem = stateService.getFocusItem(); if (focusItem) { console.log("键盘(foucus有效):" + e.code); //添加固定点 if (e.code == "KeyQ") { uiService.setSelectPointCategory(VectorCategory.Point.FixPoint); stateService.setEventName(LayerEvents.AddPoint); } //一键测量 if (e.code == "KeyA") { locationModeControl.setAngle(); this.renderer.autoRedraw(); this.history.save(); } } } }