import Load from './Load' import { stateService } from './Service/StateService' import { elementService } from './Service/ElementService' import { floorplanService } from './Service/FloorplanService' import { tagService } from './Service/TagService' import { tableService } from './Service/TableService' import { historyService } from './Service/HistoryService' import UIControl from './Controls/UIControl' import { moveTag } from './Controls/MoveTag' import { moveTable } from './Controls/MoveTable' import { addWall } from './Controls/AddWall' import { moveWall } from './Controls/MoveWall' import { addRectangle } from './Controls/AddRectangle' import { moveRectangle } from './Controls/MoveRectangle' import { addCircle } from './Controls/AddCircle' import { moveCircle } from './Controls/MoveCircle' import { addIcon } from './Controls/AddIcon' import { moveIcon } from './Controls/MoveIcon' import { addArrow } from './Controls/AddArrow' import { moveArrow } from './Controls/MoveArrow' import { coordinate } from './Coordinate' import Render from './Renderer/Render' import { draw } from './Renderer/Draw' import { listenLayer } from './ListenLayer' import { floorplanData } from './FloorplanData' import LayerEvents from './enum/LayerEvents.js' import UIEvents from './enum/UIEvents.js' import SelectState from './enum/SelectState.js' import Constant from './Constant' import VectorType from './enum/VectorType' import MathUtil, { mathUtil } from './MathUtil' import { wallService } from './Service/WallService' import History from './History/History' import { signService } from './Service/SignService' export default class Layer { constructor() { //super() this.load = new Load(this) this.uiControl = new UIControl(this) this.renderer = new Render(this) this.history = new History(this) this.canvas = null; this.startX = null this.startY = null } //开始 start(canvas,vectorData) { coordinate.init(canvas) this.canvas = canvas; this.load.load(vectorData); draw.initContext(this.canvas) this.bindEvents() } 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('mousewheel', this.onWheel.bind(this)) this.canvas.addEventListener('DOMMouseScroll', this.onWheel.bind(this)) } onMouseDown(e) { this.startX = e.offsetX || e.layerX this.startY = e.offsetY || e.layerY this.lastX = e.offsetX || e.layerX this.lastY = e.offsetY || e.layerY // 右键 if (e.button == 2) { this.stopAddVector() this.renderer.autoRedraw() return } const eventName = stateService.getEventName() //点击第一次 if (eventName == LayerEvents.AddWall) { let flag = addWall.setNewWallPoint('start', { x: this.startX, y: this.startY, }) if (!flag) { return } } //点击第二次 else if (eventName == LayerEvents.AddingWall) { let flag = addWall.setNewWallPoint('end', { x: this.startX, y: this.startY, }) if (!flag) { return } if (addWall.canAdd) { addWall.buildWall() this.history.save() } else { return } } else if (eventName == LayerEvents.AddRectangle) { addRectangle.execute({ x: this.startX, y: this.startY, }) } else if (eventName == LayerEvents.AddCircle) { addCircle.execute({ x: this.startX, y: this.startY, }) } else if (eventName == LayerEvents.AddIcon) { addIcon.execute({ x: this.startX, y: this.startY, }) } else if (eventName == LayerEvents.AddArrow) { addArrow.execute({ x: this.startX, y: this.startY, }) } else { const selectItem = stateService.getSelectItem() if (eventName == null && selectItem) { stateService.setDraggingItem(selectItem) this.uiControl.selectUI = selectItem.type } else if (eventName == null) { this.uiControl.clearUI(); } } this.setEventName('mouseDown') // 清除上一个状态 // 设置当前事件名称 e.preventDefault() e.stopPropagation() } onMouseMove(e) { const X = e.offsetX || e.layerX const Y = e.offsetY || e.layerY if(this.lastX == null){ this.lastX = X; } if(this.lastY == null){ this.lastY = Y; } let dx = X - this.lastX let dy = Y - this.lastY let position = coordinate.getXYFromScreen({ x: X, y: Y, }) const eventName = stateService.getEventName() // 是否需要重绘 let needAutoRedraw = false const draggingItem = stateService.getDraggingItem() switch (eventName) { case null: //监控当前选择的构件 needAutoRedraw = listenLayer.start(position) break case LayerEvents.PanBackGround: stateService.clearItems() coordinate.center.x = coordinate.center.x - (dx * Constant.defaultZoom) / coordinate.zoom / coordinate.res coordinate.center.y = coordinate.center.y + (dy * Constant.defaultZoom) / coordinate.zoom / coordinate.res this.lastX = X this.lastY = Y needAutoRedraw = true break case LayerEvents.AddWall: stateService.clearDraggingItem() stateService.clearFocusItem() needAutoRedraw = true listenLayer.start(position) if (listenLayer.modifyPoint) { position = { x: listenLayer.modifyPoint.x, y: listenLayer.modifyPoint.y, } } elementService.execute(null, position) elementService.setStartAddWall(position) elementService.showStartAddWall() break case LayerEvents.AddingWall: stateService.clearDraggingItem() stateService.clearFocusItem() needAutoRedraw = true let startPosition = { x: addWall.startInfo.position.x, y: addWall.startInfo.position.y, } listenLayer.start(position,null,null,startPosition) if (listenLayer.modifyPoint) { position = { x: listenLayer.modifyPoint.x, y: listenLayer.modifyPoint.y, } } elementService.execute(startPosition, position) elementService.setStartAddWall(position) if (!elementService.newWall.display) { elementService.setNewWall(startPosition, position) elementService.showNewWall() //画墙 } else { if (!listenLayer.modifyPoint && addWall.startInfo.linkedPointId) { //角度很正 let newEndPosition = elementService.checkAngle(position, addWall.startInfo.linkedPointId, null) if (newEndPosition) { mathUtil.clonePoint(position, newEndPosition) listenLayer.modifyPoint = { x:newEndPosition.x, y:newEndPosition.y } } } elementService.setNewWallEndPosition(position) //改变end位置 } addWall.canAdd = addWall.canAddWallForEnd(position) if (!addWall.canAdd) { elementService.setNewWallState('error') } else { elementService.setNewWallState('normal') } break case LayerEvents.MoveWall: dx = (dx * Constant.defaultZoom) / coordinate.zoom dy = (dy * Constant.defaultZoom) / coordinate.zoom // 1表示可以继续移动,2表示不能移动(启动距离还不够),3表示wallId被删除了,4表示重新开始移动(需要达到一定距离才能启动),5表示不能移动(不合适) let moveFlag = moveWall.moveWallPlane(draggingItem.vectorId, dx, dy) // 启动的时候需要点距离,所以真正移动了才更新lastX和lastY if (moveFlag == 1) { this.lastX = X this.lastY = Y needAutoRedraw = true } // 需要继续保持移动,一般是距离不够启动 else if (moveFlag == 2) { } // wallId被删除了 else if (moveFlag == 3) { this.history.save() stateService.clearSelectItem() stateService.clearDraggingItem() stateService.clearEventName() listenLayer.clear() needAutoRedraw = true } // wallId有一端被吸附了,这时候需要重新启动 else if (moveFlag == 4) { this.lastX = X this.lastY = Y this.startX = X this.startY = Y needAutoRedraw = true } else if (moveFlag == 5) { this.lastX = X this.lastY = Y } break case LayerEvents.MoveWallPoint: let point = floorplanService.getPoint(draggingItem.vectorId) listenLayer.start(position, draggingItem.vectorId, point.parent) if (listenLayer.modifyPoint) { position = { x: listenLayer.modifyPoint.x, y: listenLayer.modifyPoint.y, } } elementService.execute(null, position) let flag = moveWall.movePoint(draggingItem.vectorId, position, listenLayer.modifyPoint) if (!flag) { elementService.hideAll() } needAutoRedraw = true break case LayerEvents.AddRectangle: stateService.clearDraggingItem() stateService.clearFocusItem() needAutoRedraw = true elementService.setStartAddWall(position) elementService.showStartAddWall() break case LayerEvents.AddingRectangle: stateService.clearDraggingItem() stateService.clearFocusItem() needAutoRedraw = true elementService.setStartAddWall(position) elementService.showStartAddWall() addRectangle.execute(position) break case LayerEvents.MoveRectangle: needAutoRedraw = true if (draggingItem != null) { moveRectangle.moveFullRectangle(dx,dy, draggingItem.vectorId) } this.lastX = X this.lastY = Y break case LayerEvents.MoveRectangleVertex: needAutoRedraw = true if (draggingItem != null) { elementService.setStartAddWall(position) elementService.showStartAddWall() moveRectangle.moveRectangleVertex(position,draggingItem.vectorId,parseInt(draggingItem.selectIndex.substring(7))) } break case LayerEvents.MoveRectangleSide: needAutoRedraw = true if (draggingItem != null) { moveRectangle.moveRectangleSide(position,draggingItem.vectorId,parseInt(draggingItem.selectIndex.substring(5))) } break case LayerEvents.AddCircle: stateService.clearDraggingItem() stateService.clearFocusItem() needAutoRedraw = true elementService.setStartAddWall(position) elementService.showStartAddWall() break case LayerEvents.AddingCircle: stateService.clearDraggingItem() stateService.clearFocusItem() needAutoRedraw = true elementService.setStartAddWall(position) elementService.showStartAddWall() addCircle.execute(position) break case LayerEvents.MoveCircle: needAutoRedraw = true if (draggingItem != null) { moveCircle.moveFullCircle(dx,dy, draggingItem.vectorId) } this.lastX = X this.lastY = Y break case LayerEvents.MoveCircleVertex: needAutoRedraw = true if (draggingItem != null) { moveCircle.moveCircleVertex(position,draggingItem.vectorId,parseInt(draggingItem.selectIndex.substring(7))) } break case LayerEvents.AddIcon: stateService.clearDraggingItem() stateService.clearFocusItem() needAutoRedraw = true elementService.setStartAddWall(position) elementService.showStartAddWall() break case LayerEvents.AddingIcon: stateService.clearDraggingItem() stateService.clearFocusItem() needAutoRedraw = true elementService.setStartAddWall(position) elementService.showStartAddWall() addIcon.execute(position) break case LayerEvents.MoveIcon: needAutoRedraw = true if (draggingItem != null) { moveIcon.moveFullIcon(dx,dy, draggingItem.vectorId) } this.lastX = X this.lastY = Y break case LayerEvents.MoveIconVertex: needAutoRedraw = true if (draggingItem != null) { moveIcon.moveIconVertex(position,draggingItem.vectorId,parseInt(draggingItem.selectIndex.substring(7))) } break case LayerEvents.AddArrow: stateService.clearDraggingItem() stateService.clearFocusItem() needAutoRedraw = true elementService.setStartAddWall(position) elementService.showStartAddWall() break case LayerEvents.AddingArrow: stateService.clearDraggingItem() stateService.clearFocusItem() needAutoRedraw = true elementService.setStartAddWall(position) elementService.showStartAddWall() addArrow.execute(position) break case LayerEvents.MoveArrow: needAutoRedraw = true if (draggingItem != null) { moveArrow.moveFullArrow(dx,dy, draggingItem.vectorId) } this.lastX = X this.lastY = Y break case LayerEvents.moveArrowVertex: needAutoRedraw = true if (draggingItem != null) { moveArrow.moveArrowVertex(position,draggingItem.vectorId,draggingItem.selectIndex) } break case LayerEvents.AddTag: needAutoRedraw = true if (draggingItem == null) { const tag = tagService.createTag(position) if (tag.vectorId) { stateService.setSelectItem(tag.vectorId, VectorType.Tag, SelectState.All) stateService.setDraggingItem(stateService.selectItem) } } else { moveTag.moveFullTag(dx,dy, draggingItem.vectorId) this.lastX = X this.lastY = Y } break case LayerEvents.MoveTag: needAutoRedraw = true if (draggingItem != null) { moveTag.moveFullTag(dx,dy, draggingItem.vectorId) this.lastX = X this.lastY = Y } break case LayerEvents.AddTable: needAutoRedraw = true if (draggingItem == null) { const table = tableService.createTable(position) if (table.vectorId) { stateService.setSelectItem(table.vectorId, VectorType.Table, SelectState.All) stateService.setDraggingItem(stateService.selectItem) } } else { moveTable.moveFullTable(dx,dy, draggingItem.vectorId) this.lastX = X this.lastY = Y } break case LayerEvents.MoveTable: needAutoRedraw = true if (draggingItem != null) { moveTable.moveFullTable(dx,dy, draggingItem.vectorId) this.lastX = X this.lastY = Y } break case LayerEvents.AddSign: needAutoRedraw = true if (draggingItem == null) { const signType = this.uiControl.getSignTypeForUI() const sign = signService.createSign(position, signType) if (sign.vectorId) { stateService.setSelectItem(sign.vectorId, signType, SelectState.All) stateService.setDraggingItem(stateService.selectItem) } } else { const sign = floorplanService.getSign(draggingItem.vectorId) mathUtil.clonePoint(sign.center, position) } break case LayerEvents.MoveSign: needAutoRedraw = true const sign = floorplanService.getSign(draggingItem.vectorId) mathUtil.clonePoint(sign.center, position) break } if (needAutoRedraw) { this.renderer.autoRedraw() } } onMouseUp(e) { const X = e.offsetX || e.layerX const Y = e.offsetY || e.layerY let eventName = stateService.getEventName() const draggingItem = stateService.getDraggingItem() let focusItem = null if (draggingItem && draggingItem.vectorId) { if(mathUtil.getDistance({ x:this.startX, y:this.startY }, { x:X, y:Y }) 1) { stateService.clearEventName() addWall.clear() elementService.hideAll() this.uiControl.clearUI(); this.history.save() } } break case LayerEvents.MoveWall: if(focusItem == null){ needAutoRedraw = true this.history.save() } else{ this.uiControl.showAttributes(focusItem); } break case LayerEvents.AddingRectangle: needAutoRedraw = true if(mathUtil.getDistance(addRectangle.start,addRectangle.end)-1){ stateService.setEventName(LayerEvents.MoveRectangleVertex) } else if(selectItem.selectIndex.indexOf(SelectState.Side)>-1){ stateService.setEventName(LayerEvents.MoveRectangleSide) } } else if (selectItem.type == VectorType.Circle) { if(selectItem.selectIndex == SelectState.All){ stateService.setEventName(LayerEvents.MoveCircle) } else if(selectItem.selectIndex.indexOf(SelectState.Vertex)>-1){ stateService.setEventName(LayerEvents.MoveCircleVertex) } } else if (selectItem.type == VectorType.Icon) { if(selectItem.selectIndex == SelectState.All){ stateService.setEventName(LayerEvents.MoveIcon) } else if(selectItem.selectIndex.indexOf(SelectState.Vertex)>-1){ stateService.setEventName(LayerEvents.MoveIconVertex) } } else if (selectItem.type == VectorType.Arrow) { if(selectItem.selectIndex == SelectState.All){ stateService.setEventName(LayerEvents.MoveArrow) } else{ stateService.setEventName(LayerEvents.moveArrowVertex) } } else if (selectItem.type == VectorType.Table) { stateService.setEventName(LayerEvents.MoveTable) } } else if (eventName == LayerEvents.AddWall) { stateService.setEventName(LayerEvents.AddingWall) } } else if (eventType == 'mouseUp') { if (eventName == LayerEvents.AddTag) { stateService.clearEventName() } else if (eventName == LayerEvents.AddRectangle) { stateService.setEventName(LayerEvents.AddingRectangle) } else if (eventName == LayerEvents.AddCircle) { stateService.setEventName(LayerEvents.AddingCircle) } else if (eventName == LayerEvents.AddIcon) { stateService.setEventName(LayerEvents.AddingIcon) } else if (eventName == LayerEvents.AddArrow) { stateService.setEventName(LayerEvents.AddingArrow) } else if (eventName == LayerEvents.AddTable) { stateService.clearEventName() } else if (eventName != LayerEvents.AddWall && eventName != LayerEvents.AddingWall ) { //&& eventName != LayerEvents.AddRectangle && eventName != LayerEvents.AddingRectangle && eventName != LayerEvents.AddCircle && eventName != LayerEvents.AddingCircle && eventName != LayerEvents.AddArrow && eventName != LayerEvents.AddingArrow && eventName != LayerEvents.AddIcon && eventName != LayerEvents.AddingIcon stateService.clearEventName() } } } exit() { stateService.clearItems() stateService.clearEventName() this.uiControl.clearUI() } stopAddVector() { let eventName = stateService.getEventName() if (eventName != LayerEvents.AddingWall) { stateService.clearEventName() const draggingItem = stateService.getDraggingItem() if (eventName == LayerEvents.AddTag) { if (draggingItem && draggingItem.vectorId) { tagService.deleteTag(draggingItem.vectorId) this.uiControl.clearUI(); } } else if (eventName == LayerEvents.AddTable) { if (draggingItem && draggingItem.vectorId) { tableService.deleteTable(draggingItem.vectorId) this.uiControl.clearUI(); } } else if (eventName == LayerEvents.AddSign) { if (draggingItem && draggingItem.vectorId) { floorplanService.deleteSign(draggingItem.vectorId) } } } else { stateService.setEventName(LayerEvents.AddWall) } this.uiControl.clearUI() elementService.hideAll() } deleteItem() { let item = stateService.getFocusItem() if (item) { if (item.type == VectorType.Wall) { floorplanService.deleteWall(item.vectorId) } else if (componentService.isComponent(item.type)) { floorplanService.deleteComponent(item.vectorId) } else if (item.type == VectorType.Tag) { floorplanService.deleteTag(item.vectorId) } else if (item.type == VectorType.Table) { floorplanService.deleteTable(item.vectorId) } else if (signService.isSign(item.type)) { floorplanService.deleteSign(item.vectorId) } else if (item.type == VectorType.WallCorner) { wallService.deleteWallCorner(item.vectorId) } this.history.save() this.renderer.autoRedraw() } } }