diff --git a/src/app/canvas-share-data.service.ts b/src/app/canvas-share-data.service.ts index 62c8cc0..adf46a6 100644 --- a/src/app/canvas-share-data.service.ts +++ b/src/app/canvas-share-data.service.ts @@ -8,7 +8,9 @@ import { GameMode } from './working-area/model/gameMode'; export class CanvasShareDataService { constructor() { } private _sendMessage: ReplaySubject = new ReplaySubject(1); - GameMode: any; + + examDisposalNodesData; // 考生进入时获取当前试卷的处置节点 + examFacilityAssetsData; // 考生进入时获取当前试卷要考察的消防设施 isChange = false; // 数据 是否改动 @@ -16,14 +18,23 @@ export class CanvasShareDataService { // 总平面图/建筑 楼层 selectStorey: any = {area: '', details: ''}; // 选择当前 楼层 数据 + originalcompanyBuildingData: any; // 单位/建筑 数据 + originaleveryStoreyData: any; // 总平面图/楼层/区域 楼层数据 + + + examOriginaleveryStoreyData: any; // 考生答卷 总平面图/楼层/区域 楼层数据 + + hiddenBasicInfoFacilities: any = []; // 考生答卷 当前楼层需要隐藏的基本信息素材 // 总平面图/建筑 楼层 // 处置 节点 allDisposalNode: any = []; // 所有 处置节点 allNodeMarkers: any; // 灾情 标签信息 + selectPanelPoint: DisposalNodeData = new DisposalNodeData(); + selectPanelPointBaseData: any = {description: '', notes: '', weather: '', airTemperature: '', windDirection: '', windScale: ''}; // 当前 数据节点 所对应的 天气,详情 数据节点 // 处置 节点 /** diff --git a/src/app/ui/collection-tools/collection-tools.component.ts b/src/app/ui/collection-tools/collection-tools.component.ts index dd1eaef..d53b5f5 100644 --- a/src/app/ui/collection-tools/collection-tools.component.ts +++ b/src/app/ui/collection-tools/collection-tools.component.ts @@ -1160,7 +1160,7 @@ export class CollectionToolsComponent implements OnInit { this.http.get('/api/CompanyAccount/CompanyData').subscribe((data:any)=>{ this.canvasData.originalcompanyBuildingData = data || {} // 单位原数据 this.canvasData.originalcompanyBuildingData.data? this.canvasData.originalcompanyBuildingData.data = JSON.parse(this.canvasData.originalcompanyBuildingData.data) : this.canvasData.originalcompanyBuildingData.data = {} - this.canvasData.originalcompanyBuildingData.version? null : this.canvasData.originalcompanyBuildingData.version = "2.0" + this.canvasData.originalcompanyBuildingData.version = "2.0" this.canvasData.originalcompanyBuildingData.companyId? null : this.canvasData.originalcompanyBuildingData.companyId = sessionStorage.getItem('companyId') resolve('success') }) @@ -1173,7 +1173,7 @@ export class CollectionToolsComponent implements OnInit { this.http.get(`/api/CompanyAccount/SitePlanData`,{params}).subscribe((data:any)=>{ this.canvasData.originaleveryStoreyData = data || {} // 楼层原数据 this.canvasData.originaleveryStoreyData.data? this.canvasData.originaleveryStoreyData.data = JSON.parse(this.canvasData.originaleveryStoreyData.data) : this.canvasData.originaleveryStoreyData.data = {} - this.canvasData.originaleveryStoreyData.version? null : this.canvasData.originaleveryStoreyData.version = "2.0" + this.canvasData.originaleveryStoreyData.version = "2.0" this.canvasData.originaleveryStoreyData.sitePlanId? null : this.canvasData.originaleveryStoreyData.sitePlanId = e.id || null this.renovateTreeData() }) @@ -1185,7 +1185,7 @@ export class CollectionToolsComponent implements OnInit { this.http.get(`/api/CompanyAccount/BuildingData`,{params:e}).subscribe((data:any)=>{ this.canvasData.originalcompanyBuildingData = data || {} // 建筑原数据 this.canvasData.originalcompanyBuildingData.data? this.canvasData.originalcompanyBuildingData.data = JSON.parse(this.canvasData.originalcompanyBuildingData.data) : this.canvasData.originalcompanyBuildingData.data = {} - this.canvasData.originalcompanyBuildingData.version? null : this.canvasData.originalcompanyBuildingData.version = "2.0" + this.canvasData.originalcompanyBuildingData.version = "2.0" this.canvasData.originalcompanyBuildingData.buildingId? null : this.canvasData.originalcompanyBuildingData.buildingId = e.buildingId resolve('success') }) @@ -1198,7 +1198,7 @@ export class CollectionToolsComponent implements OnInit { this.http.get(`/api/CompanyAccount/BuildingAreaData`,{params}).subscribe((data:any)=>{ this.canvasData.originaleveryStoreyData = data || {} // 楼层原数据 this.canvasData.originaleveryStoreyData.data? this.canvasData.originaleveryStoreyData.data = JSON.parse(this.canvasData.originaleveryStoreyData.data) : this.canvasData.originaleveryStoreyData.data = {} - this.canvasData.originaleveryStoreyData.version? null : this.canvasData.originaleveryStoreyData.version = "2.0" + this.canvasData.originaleveryStoreyData.version = "2.0" this.canvasData.originaleveryStoreyData.buildingAreaId? null : this.canvasData.originaleveryStoreyData.buildingAreaId = e.id || null this.renovateTreeData() }) @@ -1437,7 +1437,7 @@ export class CollectionToolsComponent implements OnInit { item.order = this.sitePlanData[this.sitePlanData.length-1].order+1 this.http.post('/api/CompanyAccount/SitePlans',item).subscribe((data:any)=>{ let newData = { - version: this.canvasData.originaleveryStoreyData.version || "2.0", + version: "2.0", id: "", data: JSON.stringify( paramsData ) || null, sitePlanId: data.id @@ -1454,7 +1454,7 @@ export class CollectionToolsComponent implements OnInit { item.order = this.sitePlanData[this.sitePlanData.length-1].order+1 this.http.post('/api/CompanyAccount/BuildingAreas',item).subscribe((data:any)=>{ let newData = { - version: this.canvasData.originaleveryStoreyData.version || "2.0", + version: "2.0", id: "", data: JSON.stringify( paramsData ) || null, buildingAreaId: data.id diff --git a/src/app/ui/plan/plan.component.html b/src/app/ui/plan/plan.component.html index 00adef4..0f6cc34 100644 --- a/src/app/ui/plan/plan.component.html +++ b/src/app/ui/plan/plan.component.html @@ -1,2 +1 @@ - - + diff --git a/src/app/working-area/model/axArrowConnector.ts b/src/app/working-area/model/axArrowConnector.ts index 6c53382..d9ba040 100644 --- a/src/app/working-area/model/axArrowConnector.ts +++ b/src/app/working-area/model/axArrowConnector.ts @@ -29,14 +29,14 @@ export class AxArrowConnector extends AxShape { }); pts: PIXI.Point[]; - markerStart = true;// 是否绘制起始箭头 - markerEnd = true;// 是否绘制结束箭头 - constructor(assetData: any, workingArea: WorkingAreaComponent,markerStart: boolean,markerEnd:boolean) { + markerStart = true; // 是否绘制起始箭头 + markerEnd = true; // 是否绘制结束箭头 + constructor(assetData: any, workingArea: WorkingAreaComponent, markerStart: boolean, markerEnd: boolean) { super(assetData, workingArea); this.markerStart = markerStart; this.markerEnd = markerEnd; - + this.position = this.assetData.Point; this.name = assetData.Id; this.text = new PIXI.Text(this.assetData.Name + '\r\n' @@ -51,12 +51,12 @@ export class AxArrowConnector extends AxShape { this.sortableChildren = true; this.text.zIndex = this.children.length; this.text.visible = this.showName; - this.text.angle = -this.workingArea.backgroundImage.angle; + this.text.angle = -this.workingArea.backgroundImage.angle; } public drawPoints() { this.assetData.MultiPoint.forEach(element => { - var point = new Sprite(this.pointTexture); + const point = new Sprite(this.pointTexture); point.position = element; point.anchor.set(0.5); this.pointSprites.push(point); @@ -67,7 +67,7 @@ export class AxArrowConnector extends AxShape { value .on('pointerdown', event => { event.stopPropagation(); - if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) { + if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) { event.currentTarget.data = event.data; event.currentTarget.alpha = 0.5; event.currentTarget.dragging = true; @@ -102,7 +102,7 @@ export class AxArrowConnector extends AxShape { }) .on('rightclick', event => { }); - }) + }); this.setPointVisiable(false); } @@ -110,10 +110,10 @@ export class AxArrowConnector extends AxShape { * 设置点显示状态 * @param b true/false */ - public setPointVisiable(b:boolean) { + public setPointVisiable(b: boolean) { this.pointSprites.forEach(item => { item.visible = b; - }) + }); } // 设置缩放 public setItemScale(scale: number) { @@ -121,6 +121,7 @@ export class AxArrowConnector extends AxShape { this.pointSprites.forEach(point => { point.scale.set(scale); }); + this.refresh(); } public setNameVisible(value: boolean, mode: GameMode) { if (this.assetData.GameMode === mode) { @@ -128,12 +129,12 @@ export class AxArrowConnector extends AxShape { } } /** - * + * * @param scale 绘制边框 */ public drawBorder(scale: number) { - let visible = this.pointSprites[0].visible; - this.setPointVisiable(false); + const visible = this.pointSprites[0].visible; + this.setPointVisiable(false); super.drawBorder(scale); this.setPointVisiable(visible); } @@ -152,17 +153,22 @@ export class AxArrowConnector extends AxShape { + '\r\n' + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue; const strokeWidth = 1; - const startWidth = 30 + strokeWidth; - const endWidth = 30 + strokeWidth; - const edgeWidth = this.assetData.Thickness === 0 ? 10 : this.assetData.Thickness; // 宽度 + + const edgeWidth = this.assetData.Thickness === 0 ? 5 : this.assetData.Thickness; // 宽度 + + const startWidth = edgeWidth * 2 + strokeWidth; + const endWidth = edgeWidth * 2 + strokeWidth; + const openEnded = false; const spacing = (openEnded) ? 0 : 0 + strokeWidth / 2; - const startSize = 30 + strokeWidth; - const endSize = 30 + strokeWidth; + + const startSize = edgeWidth * 2 + strokeWidth; + const endSize = edgeWidth * 2 + strokeWidth; + const isRounded = true; const lineColor = 0x000000; - const fillColor: number = this.assetData.Color.substring(0, 7).replace('#', '0x');; + const fillColor: number = this.assetData.Color.substring(0, 7).replace('#', '0x'); const pe = pts[pts.length - 1]; @@ -200,8 +206,8 @@ export class AxArrowConnector extends AxShape { // } // c.lineStyle(1, 0x000000, 1); c.clear(); - c.lineTextureStyle({ width: 1, color: lineColor, join: PIXI.LINE_JOIN.ROUND }); - + c.lineTextureStyle({ width: 1 / this.workingArea.backgroundImage.scale.x, color: lineColor, join: PIXI.LINE_JOIN.ROUND }); + const startNx = nx; const startNy = ny; if (!openEnded) { @@ -338,12 +344,9 @@ export class AxArrowConnector extends AxShape { fns[i](); } - if (openEnded) - { + if (openEnded) { c.closePath(); - } - else - { + } else { c.closePath(); c.endFill(); } @@ -420,10 +423,10 @@ export class AxArrowConnector extends AxShape { return (ccw < 0.0) ? -1 : ((ccw > 0.0) ? 1 : 0); } - redraw(): void{ + redraw(): void { this.pointSprites.forEach(item => { item.destroy(); - }) + }); this.pointSprites.splice(0, this.pointSprites.length); this.refresh(); this.drawPoints(); diff --git a/src/app/working-area/model/axGrid.ts b/src/app/working-area/model/axGrid.ts new file mode 100644 index 0000000..348c709 --- /dev/null +++ b/src/app/working-area/model/axGrid.ts @@ -0,0 +1,259 @@ +import * as PIXI from 'pixi.js'; + +const DEFAULT_LINE_STYLE = { + width: 1, + color: 0xffffff, + alpha: 1, + alignment: 0.5, + native: true, +}; + +/** + * @description 在屏幕上绘制网格的实用程序类。 + * @extends PIXI.Graphics + */ +export class AxGrid extends PIXI.Graphics { + private _cellSize: number; + private _correctedWidth: number; + private _gridWidth: number; + private _useCorrectedWidth: boolean; + private _drawBoundaries: any; + private _amtLines: any; + /** + * @param {number} cellSize 默认值:网格边长的平方根 + */ + set cellSize(cellSize) { + this._cellSize = cellSize || Math.sqrt(this._correctedWidth); + } + + get cellSize() { + return this._cellSize; + } + + /** + * 网格边等距线的数量 + */ + get amtLines() { + return Math.floor(this.gridWidth / this.cellSize); + } + + /** + * 由' width '构造函数参数给出的网格的请求宽度。 + */ + get originalWidth() { + return this._gridWidth; + } + + /** + * 修正后的网格宽度，即大于最小平方根的数 + * 修正后的宽度。 + */ + get correctedWidth() { + return this._correctedWidth; + } + + get useCorrectedWidth() { + return this._useCorrectedWidth; + } + + /** + * 网格中每个角落的坐标。 + * @returns {{ x1: number, y1: number, x2: number, y2: number}} + * 最左边(**x1**)，最上面(**y1**)，最右边(**x2**)和最下面(**y2**)的坐标。 + */ + get bounds() { + return { + x1: this.x, + y1: this.y, + x2: this.x + this._correctedWidth, + y2: this.y + this._correctedWidth, + }; + } + + set drawBoundaries(drawBoundaries) { + this._drawBoundaries = drawBoundaries; + } + + get drawBoundaries() { + return this._drawBoundaries; + } + + /** + * 网格的实际宽度。 + * 当' cellSize '不是默认值时，网格的宽度将为 + * 在' width '构造函数中给出的宽度。否则，就是修改后的宽度。 + */ + get gridWidth() { + if (!this.useCorrectedWidth) { return this._gridWidth; } + return Math.abs(this.cellSize - Math.sqrt(this._correctedWidth)) <= 1e-6 ? this._correctedWidth : this._gridWidth; + } + + /** + * + * @param {number} width number. Required. + * + * The target sidelength of the grid. It is best for `width` to be a perfect square (i.e., 2, 4, 9, 16, 25, etc.). If + * not and the parameter `useCorrectedWidth` is set to **false**, then the grid will use a corrected width, + * which is the smallest perfect square greater than `width`. + * + * @param {number} cellSize number, null. Optional, default: square root of corrected width + * + * The size of each cell in the grid. + * If the value is **null**, the grid will use the default value. + * + * @param {{ width: number, color: number, alpha: number, alignment: number, native: boolean }}. Object. Optional. + * + * default: + * **{ + * width: 1, + * color: 0xffffff, + * alpha: 1, + * alignment: 0.5, + * native: true + * }** + * + * Configuration for the line style on the object. See documentation on `PIXI.Graphics` for more on the `LineStyle` class. + * + * @param {boolean} useCorrectedWidth boolean. Optional. default: **true** + * If **true**, the grid will use the smallest perfect square greater than `width`. + * Otherwise, the grid will use the exact value given by `width`. + * + * @param {boolean} drawBoundaries boolean. Optional. default: **true** + * If **true**, the grid will draw its boundaries. + * Otherwise, the grid will not draw its boundaries. Mouse pointer detection is not affected. + */ + constructor( + width, + cellSize= null, + lineConfig = null, + useCorrectedWidth = true, + drawBoundaries = true, + ) { + super(); + + this._cellSize = null; + this._amtLines = null; + + this._gridWidth = width; + this._useCorrectedWidth = useCorrectedWidth; + this._correctedWidth = null; + this._correctWidth(); + + this._drawBoundaries = drawBoundaries; + + this.cellSize = cellSize; + + const lConfig = { ...DEFAULT_LINE_STYLE, ...(lineConfig || {} )}; + this.lineStyle( + lConfig.width, + lConfig.color, + lConfig.alpha, + lConfig.alignment, + lConfig.native + ); + + // handle mouse move + this.interactive = true; + this.on('mousemove', (evt) => { + const mouseCoords = evt.data.getLocalPosition(evt.currentTarget.parent); + // 检查鼠标是否在此网格的范围内。如果不是，那就什么都不做。 + if ( + mouseCoords.x >= this.bounds.x1 && + mouseCoords.x <= this.bounds.x2 && + mouseCoords.y >= this.bounds.y1 && + mouseCoords.y <= this.bounds.y2 + ) { + const gridCoords = this.getCellCoordinates(mouseCoords.x, mouseCoords.y); + this.onMousemove(evt, gridCoords); + } + }); + } + + /** + * 绘制网格 + */ + drawGrid() { + this.clearGrid(true); + for (let i = (this._drawBoundaries ? 0 : 1); i <= this.amtLines - (this._drawBoundaries ? 0 : 1); i += 1) { + const startCoord = i * this._cellSize; + + // 画列 + this.moveTo(startCoord, 0); + this.lineTo(startCoord, this._correctedWidth); + + // 画行 + this.moveTo(0, startCoord); + this.lineTo(this._correctedWidth, startCoord); + } + this.endFill(); + + return this; + } + + /** + * 清除网格 + * + * @param {boolean} retainLineStyle 可选，默认：true + * + * 当**true**时，线条样式对象的配置将被保留。 + * 否则，对象的行样式将恢复为' PIXI '指定的默认值。图形的对象。 + */ + clearGrid(retainLineStyle = true) { + const { width, alignment, color, alpha, native } = this.line; + this.clear(); + + if (!retainLineStyle) { return; } + this.lineStyle(width, color, alpha, alignment, native); + + return this; + } + + /** + * Transforms global coordinates to grid coordinates. + * @param {number} x + * The global X coordinate. + * + * @param {number} y + * The global Y coordinate. + */ + getCellCoordinates(x, y) { + return { + x: Math.floor((x - this.bounds.x1) / this.cellSize), + y: Math.floor((y - this.bounds.y1) / this.cellSize), + }; + } + + /** + * 检测到mousemove事件后触发的回调。 + * + * @param {PIXI.InteractionData} evt + * 'PIXI.InteractionData '事件 + * + * @param {{x: number, y: number}} gridCoords + * 网格坐标 + */ + onMousemove(evt, gridCoords) { + + } + + // 计算修正后的宽度。如果`useCorrectedWidth`构造函数参数设置为**false**， + // 然后，它简单地保持“width”的给定值作为修正后的宽度。 + _correctWidth() { + if (!this._useCorrectedWidth) { + this._correctedWidth = this._gridWidth; + } + + this._correctedWidth = Math.ceil(Math.sqrt(this._gridWidth)) ** 2; + } + + // 计算修正后的宽度。如果`useCorrectedWidth`构造函数参数设置为**false**， + // 然后，它简单地保持“width”的给定值作为修正后的宽度。 + correctWidth(width: number) { + if (!this._useCorrectedWidth) { + this._correctedWidth = width; + } + + this._correctedWidth = Math.ceil(Math.sqrt(width)) ** 2; + this.cellSize = null; + } +} diff --git a/src/app/working-area/model/axImageShape.ts b/src/app/working-area/model/axImageShape.ts index d12ae3c..2a91bd1 100644 --- a/src/app/working-area/model/axImageShape.ts +++ b/src/app/working-area/model/axImageShape.ts @@ -13,7 +13,7 @@ import { AxArrowConnector } from './axArrowConnector'; * AxImageShape */ export class AxImageShape extends AxShape { - connectPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png'); + // connectPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png'); style = new PIXI.TextStyle({ fontFamily: 'Arial', fontSize: 18, @@ -100,55 +100,55 @@ export class AxImageShape extends AxShape { - if (this.assetData.CanConnect) { - // connectPoint - this.connectPoint = new PIXI.Sprite(this.connectPointTexture); - this.connectPoint.anchor.set(0.5); - this.connectPoint.x = this.image.x; - this.connectPoint.y = this.image.y; - this.addChild(this.connectPoint); - this.connectPoint.interactive = true; - this.connectPoint - .on('pointerdown', event => { - event.stopPropagation(); - this.paintingPipeline(this.x, this.y); - }) - .on('pointerover', event => { - this.setSelectionBox(true, this.connectPoint); - }) - .on('pointerout', event => { - this.setSelectionBox(false); - }); - this.showConnectionPoint(false); - } + // if (this.assetData.CanConnect) { + // // connectPoint + // this.connectPoint = new PIXI.Sprite(this.connectPointTexture); + // this.connectPoint.anchor.set(0.5); + // this.connectPoint.x = this.image.x; + // this.connectPoint.y = this.image.y; + // this.addChild(this.connectPoint); + // this.connectPoint.interactive = true; + // this.connectPoint + // .on('pointerdown', event => { + // event.stopPropagation(); + // // this.paintingPipeline(this.x, this.y); + // }) + // .on('pointerover', event => { + // this.setSelectionBox(true, this.connectPoint); + // }) + // .on('pointerout', event => { + // this.setSelectionBox(false); + // }); + // // this.showConnectionPoint(false); + // } this.setItemScale(1 / this.workingArea.backgroundImage.scale.x); } - // 设置选择框 - public setSelectionBox(b: boolean, sprite?: PIXI.Sprite) { - if (b) { - this.selectionBox.lineStyle(2, 0x00EB00, 1); - this.selectionBox.position = sprite.position; - this.selectionBox.drawRect(- sprite.width / 2, - sprite.height / 2, sprite.width, sprite.height); - } else { - this.selectionBox.clear(); - } - } + // // 设置选择框 + // public setSelectionBox(b: boolean, sprite?: PIXI.Sprite) { + // if (b) { + // this.selectionBox.lineStyle(2, 0x00EB00, 1); + // this.selectionBox.position = sprite.position; + // this.selectionBox.drawRect(- sprite.width / 2, - sprite.height / 2, sprite.width, sprite.height); + // } else { + // this.selectionBox.clear(); + // } + // } // 设置名称 public setNameVisible(value: boolean, mode: GameMode) { if (this.assetData.GameMode === mode) { this.text.visible = value; } } - // 显示连接点 - public showConnectionPoint(b: boolean) { - this.connectPoint.visible = b; - } + // // 显示连接点 + // public showConnectionPoint(b: boolean) { + // this.connectPoint.visible = b; + // } /** * 设置点显示状态 * @param value 显示状态 */ public setPointVisiable(value: boolean) { - let rect = this.getLocalBounds(); + const rect = this.getLocalBounds(); this.upLeft.x = rect.left; this.upLeft.y = rect.top; this.upRight.x = rect.right; @@ -163,15 +163,15 @@ export class AxImageShape extends AxShape { this.downRight.visible = value; } /** - * + * * @param scale 绘制边框 */ public drawBorder(scale: number) { - let visible = this.upLeft.visible; + const visible = this.upLeft.visible; this.setPointVisiable(false); - + super.drawBorder(scale); - let rect = this.getLocalBounds(); + const rect = this.getLocalBounds(); this.upLeft.x = rect.left; this.upLeft.y = rect.top; this.upRight.x = rect.right; @@ -193,66 +193,66 @@ export class AxImageShape extends AxShape { this.downRight.scale.set(scale); } } - paintingPipeline(x: number, y: number) { - if (this.assetData.CanConnect) { - if (this.workingArea.getPaintMode() === PaintMode.Pipeline) { - if (this.workingArea.paintingShape === null) { - this.workingArea.previewLineSegment.visible = true; - this.workingArea.currentClickPoint.position = - new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y); - this.workingArea.paintPoints.push(new PIXI.Point(x, y)); - const json = JSON.parse(JSON.stringify(this.workingArea.canvasData.selectTemplateData.propertyInfos)); - const list = []; - json.forEach(element => { - const property = new PropertyInfo(element); - list.push(property); - }); - const tempData = { - TemplateId: this.workingArea.canvasData.selectTemplateData.id, - CanConnect: this.workingArea.canvasData.selectTemplateData.canConnect, - Pipelines: new Array(), - FloorId: this.workingArea.canvasData.selectStorey.id, - Angle: this.workingArea.canvasData.selectTemplateData.angle, - Color: this.workingArea.canvasData.selectTemplateData.color, - Enabled: this.workingArea.canvasData.selectTemplateData.enabled, - FillMode: this.workingArea.canvasData.selectTemplateData.fillMode, - FireElementId: this.workingArea.canvasData.selectTemplateData.fireElementId, - FixedSize: this.workingArea.canvasData.selectTemplateData.fixedSize, - Height : 32, - Width : 32, - Id: ObjectID.default.generate(), - ImageUrl: this.workingArea.canvasData.selectTemplateData.imageUrl, - InteractiveMode: this.workingArea.canvasData.selectTemplateData.interactiveMode, - MultiPoint : JSON.parse(JSON.stringify(this.workingArea.paintPoints)), - Point: new PIXI.Point(0, 0), - Name : this.workingArea.canvasData.selectTemplateData.name, - PropertyInfos: list, - Border : this.workingArea.canvasData.selectTemplateData.border, - DrawMode : this.workingArea.canvasData.selectTemplateData.drawMode, - Thickness : this.workingArea.canvasData.selectTemplateData.thickness, - IsFromBuilding : this.workingArea.canvasData.selectTemplateData.isFromBuilding, - GameMode: this.workingArea.canvasData.gameMode, - LinkedObjects: new Array(this.assetData.Id), - Tag: this.workingArea.canvasData.selectTemplateData.tag - }; - this.workingArea.paintingShape = new AxArrowConnector(tempData, this.workingArea,false,true); - this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id); - this.workingArea.emit('createIcon', this.workingArea.paintingShape); - } else { - this.workingArea.previewLineSegment.visible = false; - this.workingArea.currentClickPoint.position = - new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y); - this.workingArea.paintPoints.push(new PIXI.Point(x, y)); - this.workingArea.paintingShape.assetData.MultiPoint = - JSON.parse(JSON.stringify(this.workingArea.paintPoints)); - this.workingArea.paintingShape.assetData.LinkedObjects.push(this.assetData.Id); - this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id); - this.workingArea.paintingShape.redraw(); - this.workingArea.initPipelineData(); - } - } - } - } + // paintingPipeline(x: number, y: number) { + // if (this.assetData.CanConnect) { + // if (this.workingArea.getPaintMode() === PaintMode.Pipeline) { + // if (this.workingArea.paintingShape === null) { + // this.workingArea.previewLineSegment.visible = true; + // this.workingArea.currentClickPoint.position = + // new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y); + // this.workingArea.paintPoints.push(new PIXI.Point(x, y)); + // const json = JSON.parse(JSON.stringify(this.workingArea.canvasData.selectTemplateData.propertyInfos)); + // const list = []; + // json.forEach(element => { + // const property = new PropertyInfo(element); + // list.push(property); + // }); + // const tempData = { + // TemplateId: this.workingArea.canvasData.selectTemplateData.id, + // CanConnect: this.workingArea.canvasData.selectTemplateData.canConnect, + // Pipelines: new Array(), + // FloorId: this.workingArea.canvasData.selectStorey.id, + // Angle: this.workingArea.canvasData.selectTemplateData.angle, + // Color: this.workingArea.canvasData.selectTemplateData.color, + // Enabled: this.workingArea.canvasData.selectTemplateData.enabled, + // FillMode: this.workingArea.canvasData.selectTemplateData.fillMode, + // FireElementId: this.workingArea.canvasData.selectTemplateData.fireElementId, + // FixedSize: this.workingArea.canvasData.selectTemplateData.fixedSize, + // Height : 32, + // Width : 32, + // Id: ObjectID.default.generate(), + // ImageUrl: this.workingArea.canvasData.selectTemplateData.imageUrl, + // InteractiveMode: this.workingArea.canvasData.selectTemplateData.interactiveMode, + // MultiPoint : JSON.parse(JSON.stringify(this.workingArea.paintPoints)), + // Point: new PIXI.Point(0, 0), + // Name : this.workingArea.canvasData.selectTemplateData.name, + // PropertyInfos: list, + // Border : this.workingArea.canvasData.selectTemplateData.border, + // DrawMode : this.workingArea.canvasData.selectTemplateData.drawMode, + // Thickness : this.workingArea.canvasData.selectTemplateData.thickness, + // IsFromBuilding : this.workingArea.canvasData.selectTemplateData.isFromBuilding, + // GameMode: this.workingArea.canvasData.gameMode, + // LinkedObjects: new Array(this.assetData.Id), + // Tag: this.workingArea.canvasData.selectTemplateData.tag + // }; + // this.workingArea.paintingShape = new AxArrowConnector(tempData, this.workingArea, false, true); + // this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id); + // this.workingArea.emit('createIcon', this.workingArea.paintingShape); + // } else { + // this.workingArea.previewLineSegment.visible = false; + // this.workingArea.currentClickPoint.position = + // new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y); + // this.workingArea.paintPoints.push(new PIXI.Point(x, y)); + // this.workingArea.paintingShape.assetData.MultiPoint = + // JSON.parse(JSON.stringify(this.workingArea.paintPoints)); + // this.workingArea.paintingShape.assetData.LinkedObjects.push(this.assetData.Id); + // this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id); + // this.workingArea.paintingShape.redraw(); + // this.workingArea.initPipelineData(); + // } + // } + // } + // } // 刷新 public refresh() { if (this.assetData.CanConnect) { diff --git a/src/app/working-area/model/axLegend.ts b/src/app/working-area/model/axLegend.ts index 56a67c5..a886fd3 100644 --- a/src/app/working-area/model/axLegend.ts +++ b/src/app/working-area/model/axLegend.ts @@ -1,7 +1,7 @@ import { Constructor } from '@angular/material/core/common-behaviors/constructor'; import { MatGridTileHeaderCssMatStyler } from '@angular/material/grid-list'; import { DefaultProxy } from 'cesium'; -import { Sprite, Texture,Text, Graphics, Point } from 'pixi.js'; +import { Sprite, Texture, Text, Graphics, Point } from 'pixi.js'; import { WorkingAreaComponent } from '../working-area.component'; import { AxShape } from './axShape'; @@ -10,20 +10,20 @@ import { AxShape } from './axShape'; */ export class AxLegend extends AxShape { // 数据 - public shapeMap: Map = new Map(); + public shapeMap: Map = new Map(); pen: Graphics = new Graphics(); // up: Sprite = new Sprite(this.pointTexture); // down: Sprite= new Sprite(this.pointTexture); // left: Sprite= new Sprite(this.pointTexture); // right: Sprite= new Sprite(this.pointTexture); - upLeft: Sprite= new Sprite(this.pointTexture); - upRight: Sprite= new Sprite(this.pointTexture); - downLeft: Sprite= new Sprite(this.pointTexture); - downRight: Sprite= new Sprite(this.pointTexture); + upLeft: Sprite = new Sprite(this.pointTexture); + upRight: Sprite = new Sprite(this.pointTexture); + downLeft: Sprite = new Sprite(this.pointTexture); + downRight: Sprite = new Sprite(this.pointTexture); /** * */ - constructor(assetData: any, workingArea: WorkingAreaComponent,shapeMap:Map) { + constructor(assetData: any, workingArea: WorkingAreaComponent, shapeMap: Map) { super(assetData, workingArea); this.angle = -this.workingArea.backgroundImage.angle; this.name = this.assetData.Id; @@ -34,9 +34,11 @@ export class AxLegend extends AxShape { this.shapeMap = shapeMap; this.createPoint(); this.refresh(); + this.sortableChildren = true; + this.pen.zIndex = -1; } // 添加数据 - public addItem(item:Legend) { + public addItem(item: Legend) { if (this.shapeMap.has(item.Name)) { this.shapeMap.get(item.Name).Count++; } else { @@ -58,35 +60,35 @@ export class AxLegend extends AxShape { refresh() { this.removeChildren(); let index = 1; - let offset = 25; + const offset = 25; let number = this.assetData.PropertyInfos[0].PropertyValue; - let width = 300; - let height = 50; - for (let i = 0; i < number; i++){ - if (i >= this.shapeMap.size) break; - let x = width * i; - var textImage = new Text('图例',{ + const width = 300; + const height = 50; + for (let i = 0; i < number; i++) { + if (i >= this.shapeMap.size) { break; } + const x = width * i; + const textImage = new Text('图例', { fontSize: 20, - fill: ['#0000ff'], + fill: ['#0000ff'], }); - textImage.anchor.set(0.5) + textImage.anchor.set(0.5); textImage.x = x; textImage.y = 0; this.addChild(textImage); - var textName = new Text("名称"+' 【数量】',{ + const textName = new Text('名称' + ' 【数量】', { fontSize: 20, - fill: ['#0000ff'], + fill: ['#0000ff'], }); - textName.anchor.set(0,0.5); + textName.anchor.set(0, 0.5); textName.x = x + 32 + offset; textName.y = 0; this.addChild(textName); } - for (let item of this.shapeMap.values()) { - let x = index % number === 0 ? (number -1) * width : (index % number - 1) * width; - let y = Math.ceil(index / number) * height; - let image: Sprite = Sprite.from(item.ImageUrl); + for (const item of this.shapeMap.values()) { + const x = index % number === 0 ? (number - 1) * width : (index % number - 1) * width; + const y = Math.ceil(index / number) * height; + const image: Sprite = Sprite.from(item.ImageUrl); image.width = 32; image.height = 32; image.anchor.set(0.5); @@ -94,27 +96,27 @@ export class AxLegend extends AxShape { image.y = y; this.addChild(image); - var textName = new Text(item.Name+' 【'+item.Count.toString()+'】',{ + const textName = new Text(item.Name + ' 【' + item.Count.toString() + '】', { fontSize: 20, }); - textName.anchor.set(0,0.5); - textName.x = x + image.width/2 + offset; + textName.anchor.set(0, 0.5); + textName.x = x + image.width / 2 + offset; textName.y = y; this.addChild(textName); index++; } if (this.shapeMap.size > 0) { - let rect = this.getLocalBounds(); + const rect = this.getLocalBounds(); this.pen.clear(); - this.pen.beginFill(0xffffff,0.01); + this.pen.beginFill(0xffffff, 1); this.pen.lineStyle(3, 0x000000); - this.pen.moveTo(rect.left-offset, rect.top-offset); - this.pen.lineTo(rect.right+offset, rect.top-offset); - this.pen.lineTo(rect.right+offset, rect.bottom+offset); + this.pen.moveTo(rect.left - offset, rect.top - offset); + this.pen.lineTo(rect.right + offset, rect.top - offset); + this.pen.lineTo(rect.right + offset, rect.bottom + offset); this.pen.lineTo(rect.left - offset, rect.bottom + offset); this.pen.closePath(); this.pen.endFill(); - } + } this.addChild(this.pen); // 添加border this.addChild(this.border); @@ -142,18 +144,18 @@ export class AxLegend extends AxShape { event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); - var pointStart = this.position; - var pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.downRight.position)); + const pointStart = this.position; + const pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.downRight.position)); const delX = pointEnd.x - pointStart.x; const delY = pointEnd.y - pointStart.y; - + this.pivot.set(this.downRight.x, this.downRight.y); - + this.position.x += delX; this.position.y += delY; - this.assetData.PivotX = this.pivot.x; + this.assetData.PivotX = this.pivot.x; this.assetData.PivotY = this.pivot.y; this.assetData.Point = new Point(this.x, this.y); }) @@ -174,19 +176,19 @@ export class AxLegend extends AxShape { .on('pointermove', event => { if (event.currentTarget.dragging) { const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); - var startPos = this.position; - var endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition)); - var width = (endPos.x - startPos.x); - var height = (endPos.y - startPos.y); - var scaleX = width / (this.width / this.scale.x); - var scaleY = height / (this.width / this.scale.x); - var angle = Math.abs(this.angle); + const startPos = this.position; + const endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition)); + const width = (endPos.x - startPos.x); + const height = (endPos.y - startPos.y); + const scaleX = width / (this.width / this.scale.x); + const scaleY = height / (this.width / this.scale.x); + const angle = Math.abs(this.angle); console.log(angle); if (angle === 0) { this.scale.set(-scaleX); } else if (angle === 90) { this.scale.set(scaleY); - } else if (angle === 180) { + } else if (angle === 180) { this.scale.set(scaleX); } else if (angle === 270) { this.scale.set(-scaleY); @@ -210,18 +212,18 @@ export class AxLegend extends AxShape { event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); - var pointStart = this.position; - var pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.downLeft.position)); + const pointStart = this.position; + const pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.downLeft.position)); const delX = pointEnd.x - pointStart.x; const delY = pointEnd.y - pointStart.y; - + this.pivot.set(this.downLeft.x, this.downLeft.y); - + this.position.x += delX; this.position.y += delY; - this.assetData.PivotX = this.pivot.x; + this.assetData.PivotX = this.pivot.x; this.assetData.PivotY = this.pivot.y; this.assetData.Point = new Point(this.x, this.y); }) @@ -242,19 +244,19 @@ export class AxLegend extends AxShape { .on('pointermove', event => { if (event.currentTarget.dragging) { const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); - var startPos = this.position; - var endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition)); - var width = (endPos.x - startPos.x); - var height = (endPos.y - startPos.y); - var scaleX = width / (this.width / this.scale.x); - var scaleY = height / (this.width / this.scale.x); - var angle = Math.abs(this.angle); + const startPos = this.position; + const endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition)); + const width = (endPos.x - startPos.x); + const height = (endPos.y - startPos.y); + const scaleX = width / (this.width / this.scale.x); + const scaleY = height / (this.width / this.scale.x); + const angle = Math.abs(this.angle); console.log(angle); if (angle === 0) { this.scale.set(scaleX); } else if (angle === 90) { this.scale.set(-scaleY); - } else if (angle === 180) { + } else if (angle === 180) { this.scale.set(-scaleX); } else if (angle === 270) { this.scale.set(scaleY); @@ -278,18 +280,18 @@ export class AxLegend extends AxShape { event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); - var pointStart = this.position; - var pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.upRight.position)); + const pointStart = this.position; + const pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.upRight.position)); const delX = pointEnd.x - pointStart.x; const delY = pointEnd.y - pointStart.y; - + this.pivot.set(this.upRight.x, this.upRight.y); - + this.position.x += delX; this.position.y += delY; - this.assetData.PivotX = this.pivot.x; + this.assetData.PivotX = this.pivot.x; this.assetData.PivotY = this.pivot.y; this.assetData.Point = new Point(this.x, this.y); }) @@ -310,19 +312,19 @@ export class AxLegend extends AxShape { .on('pointermove', event => { if (event.currentTarget.dragging) { const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); - var startPos = this.position; - var endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition)); - var width = (endPos.x - startPos.x); - var height = (endPos.y - startPos.y); - var scaleX = width / (this.width / this.scale.x); - var scaleY = height / (this.width / this.scale.x); - var angle = Math.abs(this.angle); + const startPos = this.position; + const endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition)); + const width = (endPos.x - startPos.x); + const height = (endPos.y - startPos.y); + const scaleX = width / (this.width / this.scale.x); + const scaleY = height / (this.width / this.scale.x); + const angle = Math.abs(this.angle); console.log(angle); if (angle === 0) { this.scale.set(-scaleX); } else if (angle === 90) { this.scale.set(scaleY); - } else if (angle === 180) { + } else if (angle === 180) { this.scale.set(scaleX); } else if (angle === 270) { this.scale.set(-scaleY); @@ -346,14 +348,14 @@ export class AxLegend extends AxShape { event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); - var pointStart = this.position; - var pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.upLeft.position)); + const pointStart = this.position; + const pointEnd = this.workingArea.backgroundImage.toLocal(this.toGlobal(this.upLeft.position)); const delX = pointEnd.x - pointStart.x; const delY = pointEnd.y - pointStart.y; - + this.pivot.set(this.upLeft.x, this.upLeft.y); - + this.position.x += delX; this.position.y += delY; @@ -378,19 +380,19 @@ export class AxLegend extends AxShape { .on('pointermove', event => { if (event.currentTarget.dragging) { const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); - var startPos = this.position; - var endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition)); - var width = (endPos.x - startPos.x); - var height = (endPos.y - startPos.y); - var scaleX = width / (this.width / this.scale.x); - var scaleY = height / (this.width / this.scale.x); - var angle = Math.abs(this.angle); + const startPos = this.position; + const endPos = this.workingArea.backgroundImage.toLocal(this.toGlobal(newPosition)); + const width = (endPos.x - startPos.x); + const height = (endPos.y - startPos.y); + const scaleX = width / (this.width / this.scale.x); + const scaleY = height / (this.width / this.scale.x); + const angle = Math.abs(this.angle); console.log(angle); if (angle === 0) { this.scale.set(scaleX); } else if (angle === 90) { this.scale.set(-scaleY); - } else if (angle === 180) { + } else if (angle === 180) { this.scale.set(-scaleX); } else if (angle === 270) { this.scale.set(scaleY); @@ -407,7 +409,7 @@ export class AxLegend extends AxShape { * @param value 显示状态 */ public setPointVisiable(value: boolean) { - let rect = this.getLocalBounds(); + const rect = this.getLocalBounds(); this.upLeft.x = rect.left; this.upLeft.y = rect.top; this.upRight.x = rect.right; @@ -422,16 +424,16 @@ export class AxLegend extends AxShape { this.downRight.visible = value; } /** - * + * * @param scale 绘制边框 */ public drawBorder(scale: number) { - let visible = this.upLeft.visible; + const visible = this.upLeft.visible; console.log(visible); this.setPointVisiable(false); - + super.drawBorder(scale); - let rect = this.getLocalBounds(); + const rect = this.getLocalBounds(); this.upLeft.x = rect.left; this.upLeft.y = rect.top; this.upRight.x = rect.right; @@ -444,14 +446,14 @@ export class AxLegend extends AxShape { } } -export class Legend{ +export class Legend { public Name: string; public ImageUrl: string; public Count: number; /** * */ - constructor(name:string,imageUrl:string,count:number) { + constructor(name: string, imageUrl: string, count: number) { this.Name = name; this.ImageUrl = imageUrl; this.Count = count; diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index 7b8f07e..04d2c17 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -18,6 +18,7 @@ import { AxArrowConnector } from './model/axArrowConnector'; import { AxLegend, Legend } from './model/axLegend'; import { NullTemplateVisitor } from '@angular/compiler'; import { AxRectangleShape } from './model/axRectangleShape'; +import { AxGrid } from './model/axGrid'; @Component({ @@ -112,7 +113,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV /** * 编辑点图片 */ - editorPointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png') + editorPointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png'); /** * 框选工具图形 */ @@ -136,23 +137,23 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV public animation; public animationIcon; public animationTime; - // 车辆作业面 - public carAreas: PolygonIcon[]; - // 车辆数据 - public carData: Map = new Map(); - // 当前选择的车辆id - public selectCar: any = null; - // 本软件版本号由四部分组成：<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如：1.0.0.20210105_beta - // Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，一般而言，该版本软件的Bug较多，需要继续修改。 - // Beta版: 该版本相对于α版已有了很大的改进，消除了严重的错误，但还是存在着一些缺陷，需要经过多次测试来进一步消除，此版本主要的修改对像是软件的UI。 - // RC版: 该版本已经相当成熟了，基本上不存在导致错误的BUG，与即将发行的正式版相差无几。 - // Release版: 该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号®。 - public VERSION = '1.0.6.20210112_beta'; + /** + * 网格 + */ + public grid: AxGrid = null; + /** + * 本软件版本号由四部分组成：<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如：1.0.0.20210105_beta + * Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，一般而言，该版本软件的Bug较多，需要继续修改。 + * Beta版: 该版本相对于α版已有了很大的改进，消除了严重的错误，但还是存在着一些缺陷，需要经过多次测试来进一步消除，此版本主要的修改对像是软件的UI。 + * RC版: 该版本已经相当成熟了，基本上不存在导致错误的BUG，与即将发行的正式版相差无几。 + * Release版: 该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号®。 + */ + public VERSION = '1.0.10.20210118_beta'; /** * 数据初始化 */ ngOnInit(): void { - PIXI.utils.skipHello() + PIXI.utils.skipHello(); this.sayHello(); this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => { if (event.keyCode === 17) { @@ -181,28 +182,27 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.selection.deselectAll(); } /** - * + * * @param obj 删除一个形状 */ public deleteShape(shape) { if (this.allowEdit && this.canvasData.gameMode === shape.assetData.GameMode) { - this.emit('deleteIcon',shape); + this.emit('deleteIcon', shape); } } /** * 打招呼 */ sayHello() { - var _a; + let _a; if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { - var args = [ - "\n %c 版本号 - " + this.VERSION + "\n", + const args = [ + '\n %c 版本号 - ' + this.VERSION + '\n', 'color: #ff66a5; background: #000000; padding:5px 0;', ]; (_a = window.console).log.apply(_a, args); - } - else if (window.console) { - window.console.log("\n %c 版本号 - " + this.VERSION + "\n"); + } else if (window.console) { + window.console.log('\n %c 版本号 - ' + this.VERSION + '\n'); } } /** @@ -229,7 +229,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV if (this.backgroundImage.scale.x >= 32) { this.backgroundImage.scale.x = 32; this.backgroundImage.scale.y = 32; - this.resizeItem(1/this.backgroundImage.scale.x) + this.resizeItem(1 / this.backgroundImage.scale.x); return; } this.backgroundImage.pivot.set(pivot.x, pivot.y); @@ -243,7 +243,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV if (this.backgroundImage.scale.x <= 0.1) { this.backgroundImage.scale.x = 0.1; this.backgroundImage.scale.y = 0.1; - this.resizeItem(1/this.backgroundImage.scale.x) + this.resizeItem(1 / this.backgroundImage.scale.x); return; } this.backgroundImage.pivot.set(pivot.x, pivot.y); @@ -254,10 +254,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.backgroundImage.position.x += delX; this.backgroundImage.position.y += delY; } - this.resizeItem(1/this.backgroundImage.scale.x) + this.resizeItem(1 / this.backgroundImage.scale.x); } // 重置图形缩放 - public resizeItem(size:number) { + public resizeItem(size: number) { this.backgroundImage.children.forEach(item => { if (item instanceof AxShape) { item.setItemScale(size); @@ -300,11 +300,24 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV antialias: true, transparent: false, resolution: 1, - backgroundColor: 0xE9FAFF + backgroundColor: 0xE9EAEA }); this.content.nativeElement.appendChild(this.app.view); this.app.view.style.border = '1px dashed blue'; this.animator = new Charm(PIXI); + // 创建网格 + this.grid = new AxGrid(this.app.view.width, null, { color: 0xffffff }, true, true); + // this.grid.x = (this.app.view.width / 2) - (this.grid.gridWidth / 2); + // this.grid.y = (this.app.view.height / 2) - (this.grid.gridWidth / 2); + // this.grid.pivot.set(0.5); + this.grid.x = this.app.stage.x; + this.grid.y = this.app.stage.y; + this.app.stage.addChild(this.grid); + this.grid.drawGrid(); + this.grid.onMousemove = (evt, gridCoord) => { + console.log(gridCoord); + }; + this.createBackgroundImage(); this.app.ticker.add((delta) => { this.animator.update(); @@ -350,17 +363,17 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV // let upLeft: PIXI.Sprite= new PIXI.Sprite(this.editorPointTexture); // let upRight: PIXI.Sprite= new PIXI.Sprite(this.editorPointTexture); // let downLeft: PIXI.Sprite= new PIXI.Sprite(this.editorPointTexture); - // let downRight: PIXI.Sprite = new PIXI.Sprite(this.editorPointTexture); + // let downRight: PIXI.Sprite = new PIXI.Sprite(this.editorPointTexture); // } else { axShape.showBorder(); - axShape.drawBorder(1/this.backgroundImage.scale.x); - axShape.setPointVisiable(this.allowEdit); + axShape.drawBorder(1 / this.backgroundImage.scale.x); + axShape.setPointVisiable(this.allowEdit); // } }); /** * 取消选中事件 */ - this.on('deselect', (axShape:AxShape)=> { + this.on('deselect', (axShape: AxShape) => { axShape.hideBorder(); axShape.setPointVisiable(false); }); @@ -368,7 +381,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 创建图标事件（数据处理） */ this.on('createIcon', (axShape: AxShape) => { - console.log("新增图标："+axShape.assetData.Name); + console.log('新增图标：' + axShape.assetData.Name); if (axShape.assetData.GameMode === GameMode.BasicInformation) { // 基本信息 // 添加楼层数据 this.canvasData.originaleveryStoreyData.data[axShape.assetData.Id] = axShape.assetData; @@ -381,23 +394,22 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.canvasData.selectPanelPoint.Data = new FloorNodeData(); } this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id] = axShape.assetData; + } else if (axShape.assetData.GameMode === GameMode.Examinee) { // 考生考试 + if (axShape.assetData.Tag === 1) { + this.canvasData.examOriginaleveryStoreyData.data[axShape.assetData.Id] = axShape.assetData; + } else { + if (this.canvasData.selectPanelPoint.Data === undefined + || this.canvasData.selectPanelPoint.Data === null) { + this.canvasData.selectPanelPoint.Data = new FloorNodeData(); + } + this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id] = axShape.assetData; + } } - // else if (obj.assetData.GameMode === GameMode.Examinee) { // 考生考试 - // if (obj.assetData.Tag === 1) { - // this.canvasData.examOriginaleveryStoreyData.data[obj.assetData.Id] = obj.assetData; - // } else { - // if (this.canvasData.selectPanelPoint.Data === undefined - // || this.canvasData.selectPanelPoint.Data === null) { - // this.canvasData.selectPanelPoint.Data = new FloorNodeData(); - // } - // this.canvasData.selectPanelPoint.Data.Stock[obj.assetData.Id] = obj.assetData; - // } - // } - var temp = this.backgroundImage.getChildByName("图例") as AxLegend; + const temp = this.backgroundImage.getChildByName('图例') as AxLegend; if ( temp !== undefined && temp !== null - && axShape.assetData.Name !== "图例") { - var itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1); + && axShape.assetData.Name !== '图例') { + const itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1); temp.addItem(itemLegend); } this.emit('canvasDataChanged'); @@ -406,13 +418,13 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV /** * 删除图标事件(数据处理) */ - this.on('deleteIcon', (axShape:AxShape)=>{ + this.on('deleteIcon', (axShape: AxShape) => { // 删除图例对象 - var temp = this.backgroundImage.getChildByName("图例") as AxLegend; + const temp = this.backgroundImage.getChildByName('图例') as AxLegend; if ( temp !== undefined && temp !== null - && axShape.assetData.Name !== "图例") { - var itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1); + && axShape.assetData.Name !== '图例') { + const itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1); temp.deleteItem(itemLegend); } @@ -426,18 +438,17 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[axShape.assetData.Id]; delete this.canvasData.selectPanelPoint.Data.Increment[axShape.assetData.Id]; delete this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id]; - } - // else if (assetData.GameMode === GameMode.Examinee) { // 考生考试 - // if (assetData.Tag === 1) { - // // 删除楼层数据 - // delete this.canvasData.examOriginaleveryStoreyData.data[assetData.Id]; - // } else { - // delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[assetData.Id]; - // delete this.canvasData.selectPanelPoint.Data.Increment[assetData.Id]; - // delete this.canvasData.selectPanelPoint.Data.Stock[assetData.Id]; - // } + } else if (axShape.assetData.GameMode === GameMode.Examinee) { // 考生考试 + if (axShape.assetData.Tag === 1) { + // 删除楼层数据 + delete this.canvasData.examOriginaleveryStoreyData.data[axShape.assetData.Id]; + } else { + delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[axShape.assetData.Id]; + delete this.canvasData.selectPanelPoint.Data.Increment[axShape.assetData.Id]; + delete this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id]; + } - // } + } this.backgroundImage.removeChild(axShape); this.emit('canvasDataChanged'); this.canvasData.isChange = true; @@ -519,7 +530,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 创建楼层图形 */ public createFloorShape(floorData: any) { - if (floorData === undefined || floorData === null) return; + if (floorData === undefined || floorData === null) { return; } Object.keys(floorData).forEach((key) => { switch (floorData[key].InteractiveMode) { case 0: @@ -535,9 +546,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV case 3: if (floorData[key].Name === '水带') { const distance = new AxArrowConnector(floorData[key], this, false, true); - } else if(floorData[key].Name === '距离'){ + } else if (floorData[key].Name === '距离') { const distance = new AxArrowConnector(floorData[key], this, true, true); - }else if(floorData[key].Name === '普通墙' || floorData[key].Name === '承重墙'){ + } else if (floorData[key].Name === '普通墙' || floorData[key].Name === '承重墙') { const wall = new AxArrowConnector(floorData[key], this, false, false); } break; @@ -551,7 +562,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV public createNodeShape(nodeData: any) { if (nodeData !== undefined && nodeData !== null) { Object.keys(nodeData).forEach((key) => { - if (nodeData[key] === undefined || nodeData[key] === null) { return;} + if (nodeData[key] === undefined || nodeData[key] === null) { return; } Object.keys(nodeData[key]).forEach((tempKey) => { switch (nodeData[key][tempKey].InteractiveMode) { case 0: @@ -565,7 +576,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV const polygonIcon = new PolygonIcon(nodeData[key][tempKey], this); break; case 3: - const pipeline = new AxArrowConnector(nodeData[key][tempKey], this,false,true); + const pipeline = new AxArrowConnector(nodeData[key][tempKey], this, false, true); break; } }); @@ -595,8 +606,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV /** * 创建背景图 */ - public createBackgroundImage(){ - this.backgroundImage = PIXI.Sprite.from('assets/images/noImg.png') + public createBackgroundImage() { + this.backgroundImage = PIXI.Sprite.from('assets/images/noImg.png'); this.backgroundImage.anchor.set(0.5); // this.backgroundImage.x = this.app.view.width / 2; // this.backgroundImage.y = this.app.view.height / 2; @@ -618,7 +629,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.backgroundImage.sortableChildren = true; this.backgroundImage .on('pointerdown', event => { - if (event.data.button !== 0) return; + if (event.data.button !== 0) { return; } console.log(this.backgroundImage.toLocal(this.mousePosition)); if (!event.currentTarget.dragging && this.selection.isMultiselection === false) { this.selection.deselectAll(); @@ -753,14 +764,14 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV // this.paintingIcon = new PolygonIcon(this.paintPoints, this); break; case PaintMode.Pipeline: - if (this.canvasData.selectTemplateData.name === '水带') { - if (this.paintingShape !== null) { - this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); - this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); - this.paintingShape.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints)); - this.paintingShape.refresh(); - } - } else { + // if (this.canvasData.selectTemplateData.name === '水带-------') { + // if (this.paintingShape !== null) { + // this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); + // this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); + // this.paintingShape.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints)); + // this.paintingShape.refresh(); + // } + // } else { this.previewLineSegment.visible = true; this.enterPaintEndButton.position = this.circleShadow.position; this.enterPaintEndButton.visible = true; @@ -803,17 +814,19 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV Tag: this.canvasData.selectTemplateData.tag }; if (this.canvasData.selectTemplateData.name === '距离') { - this.paintingShape = new AxArrowConnector(assetData2, this,true,true); + this.paintingShape = new AxArrowConnector(assetData2, this, true, true); } else if (this.canvasData.selectTemplateData.name === '普通墙' || this.canvasData.selectTemplateData.name === '承重墙') { - this.paintingShape = new AxArrowConnector(assetData2, this,false,false); + this.paintingShape = new AxArrowConnector(assetData2, this, false, false); + } else if (this.canvasData.selectTemplateData.name === '水带' ) { + this.paintingShape = new AxArrowConnector(assetData2, this, false, true); } } else { this.paintingShape.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints)); this.paintingShape.redraw(); } - } + // } // this.emit('backgroundScale', this.backgroundImage.scale.x); - break; + break; } } else if (!event.currentTarget.dragging && this.selection.isMultiselection === true) { this.rectToolGraphics.visible = true; @@ -837,7 +850,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV const rect1 = this.rectToolGraphics.getBounds(); const rect2 = item.getBounds(); if (this.isOverlap(rect1, rect2)) { - this.selection.select(item); + this.selection.select(item); } } }); @@ -887,25 +900,25 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.backgroundImage.addChild(this.paintingLine); } - public isOverlap(rect1, rect2):boolean { - const l1 = { x: rect1.x, y: rect1.y } - const r1 = { x: rect1.x + rect1.width, y: rect1.y + rect1.height } - const l2 = { x: rect2.x, y: rect2.y } - const r2 = { x: rect2.x + rect2.width, y: rect2.y + rect2.height } + public isOverlap(rect1, rect2): boolean { + const l1 = { x: rect1.x, y: rect1.y }; + const r1 = { x: rect1.x + rect1.width, y: rect1.y + rect1.height }; + const l2 = { x: rect2.x, y: rect2.y }; + const r2 = { x: rect2.x + rect2.width, y: rect2.y + rect2.height }; if ( l1.x > r2.x || l2.x > r1.x || l1.y > r2.y || l2.y > r1.y - ) return false - return true + ) { return false; } + return true; } /** * 刷新背景图 */ - public async refreshBackgroundImage(imageUrl:string = this.canvasData.selectStorey.imageUrl,imageAngle:number = this.canvasData.selectStorey.imageAngle): Promise { - if (imageUrl === undefined || imageUrl === null || imageUrl === "") { + public async refreshBackgroundImage(imageUrl: string = this.canvasData.selectStorey.imageUrl, imageAngle: number = this.canvasData.selectStorey.imageAngle): Promise { + if (imageUrl === undefined || imageUrl === null || imageUrl === '') { this.backgroundImage.visible = false; } else { this.backgroundImage.visible = false; @@ -916,13 +929,13 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl); this.backgroundImage.angle = imageAngle; // 等待图片加载完成 - let imageWidth = this.backgroundImage.texture.width; - let imageHeight = this.backgroundImage.texture.height; - let appWidth = this.app.view.width - 470; - let appHeight = this.app.view.height; - let wScale = appWidth / imageWidth; - let hScale = appHeight / imageHeight; - let scale = wScale < hScale ? wScale : hScale; + const imageWidth = this.backgroundImage.texture.width; + const imageHeight = this.backgroundImage.texture.height; + const appWidth = this.app.view.width - 470; + const appHeight = this.app.view.height; + const wScale = appWidth / imageWidth; + const hScale = appHeight / imageHeight; + const scale = wScale < hScale ? wScale : hScale; // 设置图片缩放 this.backgroundImage.scale.set(scale); this.backgroundImage.visible = true; @@ -930,67 +943,45 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV if (item instanceof AxShape) { item.refresh(); } - }) + }); } } /** * 刷新 - * @param imageUrl - * @param imageAngle + * @param imageUrl + * @param imageAngle */ public async refresh(imageUrl: string = this.canvasData.selectStorey.imageUrl, imageAngle: number = this.canvasData.selectStorey.imageAngle): Promise { await this.refreshBackgroundImage(); // 清空所有图形 this.selection.deselectAll(); - let itemList = []; - this.backgroundImage.children.forEach(item => { - if (item instanceof AxShape && item instanceof AxPreviewImageShape===false) { - itemList.push(item.name); + const itemList = []; + this.backgroundImage.children.forEach(item => { + if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) { + itemList.push(item.name); } }); - itemList.forEach(item => { + itemList.forEach(item => { this.backgroundImage.getChildByName(item).destroy(); // let child = this.backgroundImage.getChildByName(item); // this.backgroundImage.removeChild(child); - }) - //加载当前数据 + }); + // 加载当前数据 this.createFloorShape(this.canvasData.originaleveryStoreyData.data); // 创建处置预案图形 this.createNodeShape(this.canvasData.selectPanelPoint.Data); this.createAxLegend(); - - // // 测试代码 - // const tempAssetData = { - // Id: "图例",//ObjectID.default.generate() - // Color: "#066EED80", - // PropertyInfos: [ - // { - // Tag : '', - // Order : 0, - // Enabled : true, - // Visible : true, - // Required : false, - // RuleName : "", - // RuleValue : "", - // PhysicalUnit : "", - // PropertyName : "列", - // PropertyType : 2, - // PropertyValue : 2, - // }, - // ] - // }; - // var rectShape = new AxRectangleShape(0, 0, 100, 100,tempAssetData,this); } /** * 创建安信图例 */ public createAxLegend() { const tempAssetData = { - Id: "图例", - Name:"图例", - Color: "#066EED80", + Id: '图例', + Name: '图例', + Color: '#066EED80', TemplateId: null, FloorId: this.canvasData.selectStorey.id, Angle: 0, @@ -1016,10 +1007,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV Enabled : true, Visible : true, Required : false, - RuleName : "", - RuleValue : "", - PhysicalUnit : "", - PropertyName : "列", + RuleName : '', + RuleValue : '', + PhysicalUnit : '', + PropertyName : '列', PropertyType : 2, PropertyValue : 2, }, @@ -1028,13 +1019,13 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV PivotX: 0, PivotY: 0, }; - let shapeMap: Map = new Map(); + const shapeMap: Map = new Map(); let data = null; - for (let item in this.canvasData.originaleveryStoreyData.data) { + for (const item in this.canvasData.originaleveryStoreyData.data) { if (shapeMap.has(this.canvasData.originaleveryStoreyData.data[item].Name)) { shapeMap.get(this.canvasData.originaleveryStoreyData.data[item].Name).Count++; } else { - if (item !== "图例") { + if (item !== '图例') { shapeMap.set(this.canvasData.originaleveryStoreyData.data[item].Name, new Legend( this.canvasData.originaleveryStoreyData.data[item].Name, this.canvasData.originaleveryStoreyData.data[item].ImageUrl, @@ -1046,15 +1037,15 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV } } if (data === null) { - var axLegend = new AxLegend(tempAssetData, this, shapeMap); - var rect = this.backgroundImage.getLocalBounds(); - var itemRect = axLegend.getLocalBounds(); + const axLegend = new AxLegend(tempAssetData, this, shapeMap); + const rect = this.backgroundImage.getLocalBounds(); + const itemRect = axLegend.getLocalBounds(); axLegend.x = rect.right - itemRect.right; axLegend.y = rect.bottom - itemRect.bottom; axLegend.assetData.Point = new PIXI.Point(axLegend.x, axLegend.y); this.emit('createIcon', axLegend); } else { - var axLegend = new AxLegend(data, this, shapeMap); + const axLegend = new AxLegend(data, this, shapeMap); } } // /** @@ -1083,15 +1074,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 创建预览单点图标 */ private createPreviewImage(): void { - // if (this.previewSinglePointIcon === null) { - // this.previewSinglePointIcon = PIXI.Sprite.from(this.canvasData.selectTemplateData.imageUrl); - // this.previewSinglePointIcon.width = this.canvasData.selectTemplateData.width; - // this.previewSinglePointIcon.height = this.canvasData.selectTemplateData.height; - // this.previewSinglePointIcon.anchor.set(0.5); - // this.previewSinglePointIcon.interactive = false; - // this.backgroundImage.addChild(this.previewSinglePointIcon); - // this.previewSinglePointIcon.scale.set(1 / this.backgroundImage.scale.x); - // } this.previewImage = new AxPreviewImageShape(this); this.previewImage.visible = false; } @@ -1113,7 +1095,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV */ private refreshPreviewLineSegment(pointA: PIXI.Point, pointB: PIXI.Point) { this.previewLineSegment.clear(); - this.previewLineSegment.lineStyle(1/this.backgroundImage.scale.x, 0x00ff00, 1); + this.previewLineSegment.lineStyle(1 / this.backgroundImage.scale.x, 0x00ff00, 1); this.previewLineSegment.moveTo(pointA.x, pointA.y); this.previewLineSegment.lineTo(pointB.x, pointB.y ); } @@ -1122,9 +1104,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * @param x 半径 */ private createCircleShadow(): void { - // this.circleShadow.beginFill(0xFFCC5A); - // this.circleShadow.drawCircle(0, 0, 10); - // this.circleShadow.endFill(); this.circleShadow.visible = false; this.backgroundImage.addChild(this.circleShadow); } @@ -1134,18 +1113,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV private refreshPreviewPoint() { this.circleShadow.clear(); this.circleShadow.beginFill(0x00ff00); - this.circleShadow.drawCircle(0, 0, 5/this.backgroundImage.scale.x); + this.circleShadow.drawCircle(0, 0, 5 / this.backgroundImage.scale.x); this.circleShadow.endFill(); } - showConnectionPoint(b: boolean) { - this.backgroundImage?.children.forEach(item => { - if (item instanceof AxImageShape) { - if (item.assetData.CanConnect) { - item.showConnectionPoint(b); - } - } - }); - } /** * 开始绘制 */ @@ -1198,14 +1168,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.circleShadow.visible = true; break; case PaintMode.Pipeline: - if (this.canvasData.selectTemplateData.name==='水带') { - this.showConnectionPoint(true); - } else { - - } + break; case PaintMode.endPaint: - this.showConnectionPoint(false); if (this.previewImage !== null) { this.previewImage.visible = false; } @@ -1214,11 +1179,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV && this.paintingIcon !== null) { this.backgroundImage.removeChild(this.paintingIcon); } - - // if (this.paintingShape !== undefined - // && this.paintingShape !== null) { - // this.backgroundImage.removeChild(this.paintingShape); - // } if (this.paintingShape !== null) { this.backgroundImage.removeChild(this.paintingShape); this.paintingShape = null; @@ -1300,14 +1260,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV } break; case PaintMode.Pipeline: - if (this.canvasData.selectTemplateData.name !== '水带') { this.emit('createIcon', this.paintingShape); this.paintingShape = null; - } - break; + break; } this.paintPoints.splice(0, this.paintPoints.length); - // this.emit('backgroundScale', this.backgroundImage.scale.x); } /** * 复制 @@ -1331,34 +1288,33 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV newData.BuildingId = buildingId; newData.FloorId = floorId; newData.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5); - // if (newData.IsFromBuilding) { - // this.canvasData.originalcompanyBuildingData.data[newData.Id] = newData; - // } else { - this.canvasData.originaleveryStoreyData.data[newData.Id] = newData; - // } switch (item.InteractiveMode) { case PaintMode.singlePointIcon: const singleIcon = new AxImageShape(newData, this); + this.emit('createIcon', singleIcon); break; case PaintMode.lineIcon: const lineIcon = new MultipointIcon(newData, this); + this.emit('createIcon', lineIcon); break; case PaintMode.polygonIcon: const polygonIcon = new PolygonIcon(newData, this); + this.emit('createIcon', polygonIcon); break; case PaintMode.Pipeline: if (item.Name === '距离') { - const wall = new AxArrowConnector(newData, this,true,true); + const wall = new AxArrowConnector(newData, this, true, true); + this.emit('createIcon', wall); } else if (item.Name === '普通墙' || item.Name === '承重墙') { - const wall = new AxArrowConnector(newData, this,false,false); + const wall = new AxArrowConnector(newData, this, false, false); + this.emit('createIcon', wall); } break; } this.selection.select(this.backgroundImage.getChildByName(newData.Id)); }); - // this.emit('backgroundScale', this.backgroundImage.scale.x); } - ////////////////////////////////////////////////////////////////////////通用///////////////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////////// 通用///////////////////////////////////////////////////////////////////////////// /** * * @param id 图标ID @@ -1369,97 +1325,87 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.backgroundImage.getChildByName(item).visible = b; }); } - ////////////////////////////////////////////////////////////////////////采集平台加载逻辑/////////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////////// 采集平台加载逻辑/////////////////////////////////////////////////////////////////////// - ////////////////////////////////////////////////////////////////////////编制平台加载逻辑/////////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////////// 编制平台加载逻辑/////////////////////////////////////////////////////////////////////// - ////////////////////////////////////////////////////////////////////////考试系统加载逻辑/////////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////////// 考试系统加载逻辑/////////////////////////////////////////////////////////////////////// /** * 考生点击楼层 */ public async onExamineeClickFloor() { - // this.backgroundImage.visible = false; - // this.backgroundImage.scale.set(1); - // this.backgroundImage.pivot.set(0); - // this.backgroundImage.x = this.app.view.width / 2; - // this.backgroundImage.y = this.app.view.height / 2; - // this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl); - // this.backgroundImage.angle = imageAngle; - // // 等待图片加载完成 - // let imageWidth = this.backgroundImage.texture.width; - // let imageHeight = this.backgroundImage.texture.height; - // let appWidth = this.app.view.width - 470; - // let appHeight = this.app.view.height; - // let wScale = appWidth / imageWidth; - // let hScale = appHeight / imageHeight; - // let scale = wScale < hScale ? wScale : hScale; - // // 设置图片缩放 - // this.backgroundImage.scale.set(scale); - // // 清空所有图形 - // this.selection.deselectAll(); - // let itemList = []; - // this.backgroundImage.children.forEach(item => { - // if (item instanceof AxShape && item instanceof AxPreviewImageShape===false) { - // itemList.push(item.name); - // } - // }); + await this.refreshBackgroundImage(); + // 清空所有图形 + this.selection.deselectAll(); + const itemList = []; + this.backgroundImage.children.forEach(item => { + if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) { + itemList.push(item.name); + } + }); - // itemList.forEach(item => { - // this.backgroundImage.getChildByName(item).destroy(); - // }) - // // 创建楼层图形 - // this.createFloorShape(this.canvasData.examOriginaleveryStoreyData.data); - // // 创建楼层图形 - // this.createFloorShape(this.canvasData.originaleveryStoreyData.data); - // // 创建处置预案图形 - // this.createNodeShape(this.canvasData.selectPanelPoint.Data); - // // 隐藏图标 - // this.setIconVisible(this.canvasData.hiddenBasicInfoFacilities, false); - // this.backgroundImage.visible = true; + itemList.forEach(item => { + this.backgroundImage.getChildByName(item).destroy(); + }); + // 创建楼层图形 + this.createFloorShape(this.canvasData.examOriginaleveryStoreyData.data); + // 创建楼层图形 + this.createFloorShape(this.canvasData.originaleveryStoreyData.data); + // 创建处置预案图形 + this.createNodeShape(this.canvasData.selectPanelPoint.Data); + // 隐藏图标 + this.setIconVisible(this.canvasData.hiddenBasicInfoFacilities, false); } /** - * 考官点击楼层 + * 考官点击楼层-阅卷 */ public async onExaminerClickFloor() { - // this.backgroundImage.visible = false; - // this.backgroundImage.scale.set(1); - // this.backgroundImage.pivot.set(0); - // this.backgroundImage.x = this.app.view.width / 2; - // this.backgroundImage.y = this.app.view.height / 2; - // this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl); - // this.backgroundImage.angle = imageAngle; - // // 等待图片加载完成 - // let imageWidth = this.backgroundImage.texture.width; - // let imageHeight = this.backgroundImage.texture.height; - // let appWidth = this.app.view.width - 470; - // let appHeight = this.app.view.height; - // let wScale = appWidth / imageWidth; - // let hScale = appHeight / imageHeight; - // let scale = wScale < hScale ? wScale : hScale; - // // 设置图片缩放 - // this.backgroundImage.scale.set(scale); - // // 清空所有图形 - // this.selection.deselectAll(); - // let itemList = []; - // this.backgroundImage.children.forEach(item => { - // if (item instanceof AxShape && item instanceof AxPreviewImageShape===false) { - // itemList.push(item.name); - // } - // }); + await this.refreshBackgroundImage(); + // 清空所有图形 + this.selection.deselectAll(); + const itemList = []; + this.backgroundImage.children.forEach(item => { + if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) { + itemList.push(item.name); + } + }); - // itemList.forEach(item => { - // this.backgroundImage.getChildByName(item).destroy(); - // }) - // // 创建楼层图形 - // this.createFloorShape(this.canvasData.examOriginaleveryStoreyData.data); - // // 创建楼层图形 - // this.createFloorShape(this.canvasData.originaleveryStoreyData.data); - // // 创建处置预案图形 - // this.createNodeShape(this.canvasData.selectPanelPoint.Data); - // // 隐藏图标 - // this.setIconVisible(this.canvasData.hiddenBasicInfoFacilities, false); - // this.backgroundImage.visible = true; + itemList.forEach(item => { + this.backgroundImage.getChildByName(item).destroy(); + }); + // 创建楼层图形 + this.createFloorShape(this.canvasData.examOriginaleveryStoreyData.data); + // 创建楼层图形 + this.createFloorShape(this.canvasData.originaleveryStoreyData.data); + // 创建处置预案图形 + this.createNodeShape(this.canvasData.selectPanelPoint.Data); + // 隐藏图标 + this.setIconVisible(this.canvasData.hiddenBasicInfoFacilities, false); + } + /** + * 考官点击楼层-创建试卷 + */ + public async onExaminerClickFloor_CreateTestpaper() { + await this.refreshBackgroundImage(); + // 清空所有图形 + this.selection.deselectAll(); + const itemList = []; + this.backgroundImage.children.forEach(item => { + if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) { + itemList.push(item.name); + } + }); + + itemList.forEach(item => { + this.backgroundImage.getChildByName(item).destroy(); + }); + // 创建楼层图形 + this.createFloorShape(this.canvasData.originaleveryStoreyData.data); + // 创建处置预案图形 + this.createNodeShape(this.canvasData.selectPanelPoint.Data); + // 隐藏图标 + this.setNameVisible(false, 0); } }