From eb11e3165341ce0165d4a1ebb2e523b10ceb56b5 Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Tue, 16 May 2023 16:56:39 +0800 Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=E5=A4=84=E7=BD=AE=E7=B4=A0?= =?UTF-8?q?=E6=9D=90bug=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../examiner-index.component.html | 4 +- .../collection-tools.component.ts | 4 +- .../working-area/model/axArrowConnector.ts | 14 +- src/app/working-area/model/axImageShape.ts | 204 +++++++++++------- src/app/working-area/model/axLegend.ts | 7 +- src/app/working-area/model/axShape.ts | 40 ++-- src/app/working-area/model/configuration.ts | 2 +- .../working-area/working-area.component.ts | 72 +++++-- 8 files changed, 226 insertions(+), 121 deletions(-) diff --git a/src/app/examiner/examiner-index/examiner-index.component.html b/src/app/examiner/examiner-index/examiner-index.component.html index bcb33dd..de6948d 100644 --- a/src/app/examiner/examiner-index/examiner-index.component.html +++ b/src/app/examiner/examiner-index/examiner-index.component.html @@ -47,7 +47,9 @@ {{item.title}} - {{item.organizationsName}} + + {{i}} + {{item.startTime|date:'yyyy-MM-dd HH:mm'}} {{item.endTime|date:'yyyy-MM-dd HH:mm'}} diff --git a/src/app/ui/collection-tools/collection-tools.component.ts b/src/app/ui/collection-tools/collection-tools.component.ts index 85afe75..af7a128 100644 --- a/src/app/ui/collection-tools/collection-tools.component.ts +++ b/src/app/ui/collection-tools/collection-tools.component.ts @@ -29,6 +29,7 @@ import { WorkingAreaComponent } from "../../working-area/working-area.component" import { CanvasShareDataService, DisposalNodeData, + FloorNodeData, } from "../../canvas-share-data.service"; //引入服务 import Viewer from "viewerjs"; import Swiper from "swiper"; @@ -1359,7 +1360,7 @@ export class CollectionToolsComponent implements OnInit { this.selectSitePlanIndex = 0; Promise.all([fireData, planData]).then((res) => { - // this.canvasData.selectPanelPoint.Data= {}; + this.canvasData.selectPanelPoint.Data = new FloorNodeData(); this.getSitePlanStorey(this.selectingSitePlan); //获取 平面图 楼层数据 }); }); @@ -1377,6 +1378,7 @@ export class CollectionToolsComponent implements OnInit { this.selectSitePlanIndex = 0; Promise.all([fireData, planData]).then((res) => { + this.canvasData.selectPanelPoint.Data = new FloorNodeData(); // this.canvasData.selectPanelPoint.Data= {}; this.getBuildingStorey(this.selectingSitePlan); //获取 建筑 楼层数据 }); diff --git a/src/app/working-area/model/axArrowConnector.ts b/src/app/working-area/model/axArrowConnector.ts index d9ba040..4cc3ce8 100644 --- a/src/app/working-area/model/axArrowConnector.ts +++ b/src/app/working-area/model/axArrowConnector.ts @@ -154,20 +154,22 @@ export class AxArrowConnector extends AxShape { + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue; const strokeWidth = 1; - const edgeWidth = this.assetData.Thickness === 0 ? 5 : this.assetData.Thickness; // 宽度 + const edgeWidth = this.assetData.Thickness === 0 ? 1 : this.assetData.Thickness; // 宽度 - const startWidth = edgeWidth * 2 + strokeWidth; - const endWidth = edgeWidth * 2 + strokeWidth; + const startScale = this.assetData.Thickness <= 5 ? 5 : 2; // 宽度 + + const startWidth = edgeWidth * startScale + strokeWidth; + const endWidth = edgeWidth * startScale + strokeWidth; const openEnded = false; const spacing = (openEnded) ? 0 : 0 + strokeWidth / 2; - const startSize = edgeWidth * 2 + strokeWidth; - const endSize = edgeWidth * 2 + strokeWidth; + const startSize = edgeWidth * startScale + strokeWidth; + const endSize = edgeWidth * startScale + strokeWidth; const isRounded = true; - const lineColor = 0x000000; + const lineColor : 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]; diff --git a/src/app/working-area/model/axImageShape.ts b/src/app/working-area/model/axImageShape.ts index ddb7ccf..4cdf6b9 100644 --- a/src/app/working-area/model/axImageShape.ts +++ b/src/app/working-area/model/axImageShape.ts @@ -93,7 +93,9 @@ export class AxImageShape extends AxShape { this.up.on('pointerdown', event => { this.upDrag = true; this.image.anchor.set(0.5, 1); - this.image.position.set(this.image.position.x, this.image.position.y + (this.image.height / 2)); + this.position.set(this.x, this.y + this.image.height * 0.5); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); event.stopPropagation(); }); this.up.on('pointermove', event => { @@ -104,6 +106,7 @@ export class AxImageShape extends AxShape { var dY = Math.abs(pos.y - this.image.y); this.assetData.Height = Math.abs(dY); this.refresh(); + this.text.y = this.image.y - this.image.height / 2; AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); } @@ -112,14 +115,18 @@ export class AxImageShape extends AxShape { if (this.upDrag) { this.upDrag = false; this.image.anchor.set(0.5); - this.image.position.set(this.image.position.x, this.image.position.y - (this.image.height / 2)); + this.position.set(this.position.x, this.position.y - (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.up.on('pointerupoutside', event => { if (this.upDrag) { this.upDrag = false; this.image.anchor.set(0.5); - this.image.position.set(this.image.position.x, this.image.position.y - (this.image.height / 2)); + this.position.set(this.position.x, this.position.y - (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.up.visible = false; @@ -132,7 +139,9 @@ export class AxImageShape extends AxShape { this.down.on('pointerdown', event => { this.downDrag = true; this.image.anchor.set(0.5, 0); - this.image.position.set(this.image.position.x, this.image.position.y - (this.image.height / 2)); + this.position.set(this.x, this.y - (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); event.stopPropagation(); }); this.down.on('pointermove', event => { @@ -151,14 +160,18 @@ export class AxImageShape extends AxShape { if (this.downDrag) { this.downDrag = false; this.image.anchor.set(0.5); - this.image.position.set(this.image.position.x, this.image.position.y + (this.image.height / 2)); + this.position.set(this.x, this.y + (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.down.on('pointerupoutside', event => { if (this.downDrag) { this.downDrag = false; this.image.anchor.set(0.5); - this.image.position.set(this.image.position.x, this.image.position.y + (this.image.height / 2)); + this.position.set(this.x, this.y + (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.down.visible = false; @@ -171,7 +184,9 @@ export class AxImageShape extends AxShape { this.left.on('pointerdown', event => { this.leftDrag = true; this.image.anchor.set(1, 0.5); - this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y); + this.position.set(this.position.x + (this.image.width / 2), this.position.y); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); event.stopPropagation(); }); this.left.on('pointermove', event => { @@ -190,14 +205,18 @@ export class AxImageShape extends AxShape { if (this.leftDrag) { this.leftDrag = false; this.image.anchor.set(0.5); - this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y); + this.position.set(this.position.x - (this.image.width / 2), this.position.y); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.left.on('pointerupoutside', event => { if (this.leftDrag) { this.leftDrag = false; this.image.anchor.set(0.5); - this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y); + this.position.set(this.position.x - (this.image.width / 2), this.position.y); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.left.visible = false; @@ -210,7 +229,9 @@ export class AxImageShape extends AxShape { this.right.on('pointerdown', event => { this.rightDrag = true; this.image.anchor.set(0, 0.5); - this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y); + this.position.set(this.position.x - (this.image.width / 2), this.position.y); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); event.stopPropagation(); }); this.right.on('pointermove', event => { @@ -229,14 +250,18 @@ export class AxImageShape extends AxShape { if (this.rightDrag) { this.rightDrag = false; this.image.anchor.set(0.5); - this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y); + this.position.set(this.position.x + (this.image.width / 2), this.position.y); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.right.on('pointerupoutside', event => { if (this.rightDrag) { this.rightDrag = false; this.image.anchor.set(0.5); - this.image.position.set(this.image.position.x + (this.image.width / 2)); + this.position.set(this.position.x + (this.image.width / 2), this.position.y); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.right.visible = false; @@ -249,7 +274,9 @@ export class AxImageShape extends AxShape { this.upLeft.on('pointerdown', event => { this.upLeftDrag = true; this.image.anchor.set(1); - this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + this.position.set(this.position.x + (this.image.width / 2), this.position.y + (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); event.stopPropagation(); }); this.upLeft.on('pointermove', event => { @@ -271,14 +298,18 @@ export class AxImageShape extends AxShape { if (this.upLeftDrag) { this.upLeftDrag = false; this.image.anchor.set(0.5); - this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + this.position.set(this.position.x - (this.image.width / 2), this.position.y - (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.upLeft.on('pointerupoutside', event => { if (this.upLeftDrag) { this.upLeftDrag = false; this.image.anchor.set(0.5); - this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + this.position.set(this.position.x - (this.image.width / 2), this.position.y - (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.upLeft.visible = false; @@ -291,7 +322,9 @@ export class AxImageShape extends AxShape { this.upRight.on('pointerdown', event => { this.upRightDrag = true; this.image.anchor.set(0, 1); - this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + this.position.set(this.position.x - (this.image.width / 2), this.position.y + (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); event.stopPropagation(); }); this.upRight.on('pointermove', event => { @@ -313,14 +346,18 @@ export class AxImageShape extends AxShape { if (this.upRightDrag) { this.upRightDrag = false; this.image.anchor.set(0.5); - this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + this.position.set(this.position.x + (this.image.width / 2), this.position.y - (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.upRight.on('pointerupoutside', event => { if (this.upRightDrag) { this.upRightDrag = false; this.image.anchor.set(0.5); - this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + this.position.set(this.position.x + (this.image.width / 2), this.position.y - (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.upRight.visible = false; @@ -333,7 +370,9 @@ export class AxImageShape extends AxShape { this.downLeft.on('pointerdown', event => { this.downLeftDrag = true; this.image.anchor.set(1, 0); - this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + this.position.set(this.position.x + (this.image.width / 2), this.position.y - (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); event.stopPropagation(); }); this.downLeft.on('pointermove', event => { @@ -355,14 +394,18 @@ export class AxImageShape extends AxShape { if (this.downLeftDrag) { this.downLeftDrag = false; this.image.anchor.set(0.5); - this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + this.position.set(this.position.x - (this.image.width / 2), this.position.y + (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.downLeft.on('pointerupoutside', event => { if (this.downLeftDrag) { this.downLeftDrag = false; this.image.anchor.set(0.5); - this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + this.position.set(this.position.x - (this.image.width / 2), this.position.y + (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.downLeft.visible = false; @@ -375,7 +418,9 @@ export class AxImageShape extends AxShape { this.downRight.on('pointerdown', event => { this.downRightDrag = true; this.image.anchor.set(0, 0); - this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2)); + this.position.set(this.position.x - (this.image.width / 2), this.position.y - (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); event.stopPropagation(); }); this.downRight.on('pointermove', event => { @@ -397,14 +442,18 @@ export class AxImageShape extends AxShape { if (this.downRightDrag) { this.downRightDrag = false; this.image.anchor.set(0.5); - this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + this.position.set(this.position.x + (this.image.width / 2), this.position.y + (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.downRight.on('pointerupoutside', event => { if (this.downRightDrag) { this.downRightDrag = false; this.image.anchor.set(0.5); - this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2)); + this.position.set(this.position.x + (this.image.width / 2), this.position.y + (this.image.height / 2)); + this.assetData.Point = new PIXI.Point(this.x, this.y); + this.drawBorder(); } }); this.downRight.visible = false; @@ -422,7 +471,8 @@ export class AxImageShape extends AxShape { * @param value 显示状态 */ public setPointVisiable(value: boolean) { - const rect = this.getLocalBounds(); + const rect1 = this.image.getLocalBounds(); + const rect = new Rectangle(rect1.x * this.image.scale.x, rect1.y * this.image.scale.y, rect1.width * this.image.scale.x, rect1.height * this.image.scale.y); this.up.x = rect.right - rect.width / 2; this.up.y = rect.top; this.down.x = rect.right - rect.width / 2; @@ -452,28 +502,28 @@ export class AxImageShape extends AxShape { * * @param scale 绘制边框 */ - public drawBorder(scale: number) { + public drawBorder() { const visible = this.upLeft.visible; this.setPointVisiable(false); + const scale = this.assetData.FixedSize ? 1 : 1 / this.workingArea.backgroundImage.scale.x; + this.border.clear(); + const rect1 = this.image.getLocalBounds(); + const rect = new Rectangle(rect1.x * this.image.scale.x, rect1.y * this.image.scale.y, rect1.width * this.image.scale.x, rect1.height * this.image.scale.y); + const p1 = new PIXI.Point(rect.left, rect.top); + const p2 = new PIXI.Point(rect.right, rect.top); + const p3 = new PIXI.Point(rect.right, rect.bottom); + const p4 = new PIXI.Point(rect.left, rect.bottom); + + this.border.lineStyle(scale * 1, 0x00a8ff); + + const spaceLength = scale * 1; + const lineLenght = rect.width + 0.5 + 0.5; + const dashLength = scale * (lineLenght + spaceLength - Math.floor((rect.width + rect.height) / 2 / 4.1)) / Math.floor((rect.width + rect.height) / 2 / 4.1); + this.drawDash(this.border, p1.x - 0.5 * scale, p1.y, p2.x + 0.5 * scale, p2.y, dashLength, spaceLength); + this.drawDash(this.border, p2.x, p2.y - 0.5 * scale, p3.x, p3.y + 0.5 * scale, dashLength, spaceLength); + this.drawDash(this.border, p3.x + 0.5 * scale, p3.y, p4.x - 0.5 * scale, p4.y, dashLength, spaceLength); + this.drawDash(this.border, p4.x, p4.y + 0.5 * scale, p1.x, p1.y - 0.5 * scale, dashLength, spaceLength); - super.drawBorder(scale); - const rect = this.getLocalBounds(); - this.up.x = rect.right - rect.width / 2; - this.up.y = rect.top; - this.down.x = rect.right - rect.width / 2; - this.down.y = rect.bottom; - this.left.x = rect.left; - this.left.y = rect.bottom - rect.height / 2; - this.right.x = rect.right; - this.right.y = rect.bottom - rect.height / 2; - this.upLeft.x = rect.left; - this.upLeft.y = rect.top; - this.upRight.x = rect.right; - this.upRight.y = rect.top; - this.downLeft.x = rect.left; - this.downLeft.y = rect.bottom; - this.downRight.x = rect.right; - this.downRight.y = rect.bottom; this.setPointVisiable(visible); } public setItemScale(scale: number) { @@ -501,41 +551,41 @@ export class AxImageShape extends AxShape { + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue; - if (this.image.anchor.x == 0) { - if (this.image.anchor.y == 0) { - this.text.x = this.image.x + this.image.width / 2; - this.text.y = this.image.y; - } else if (this.image.anchor.y == 0.5) { - this.text.x = this.image.x + this.image.width / 2; - this.text.y = this.image.y - this.image.height / 2; - } else if (this.image.anchor.y == 1) { - this.text.x = this.image.x + this.image.width / 2; - this.text.y = this.image.y - this.image.height; - } + // if (this.image.anchor.x == 0) { + // if (this.image.anchor.y == 0) { + // this.text.x = this.image.x + this.image.width / 2; + // this.text.y = this.image.y; + // } else if (this.image.anchor.y == 0.5) { + // this.text.x = this.image.x + this.image.width / 2; + // this.text.y = this.image.y - this.image.height / 2; + // } else if (this.image.anchor.y == 1) { + // this.text.x = this.image.x + this.image.width / 2; + // this.text.y = this.image.y - this.image.height; + // } - } else if (this.image.anchor.x == 0.5) { - if (this.image.anchor.y == 0) { - this.text.x = this.image.x; - this.text.y = this.image.y; - } else if (this.image.anchor.y == 0.5) { + // } else if (this.image.anchor.x == 0.5) { + // if (this.image.anchor.y == 0) { + // this.text.x = this.image.x; + // this.text.y = this.image.y; + // } else if (this.image.anchor.y == 0.5) { - } else if (this.image.anchor.y == 1) { - this.text.x = this.image.x; - this.text.y = this.image.y - this.image.height; - } - } else if (this.image.anchor.x == 1) { - if (this.image.anchor.y == 0) { - this.text.x = this.image.x - this.image.width / 2; - this.text.y = this.image.y; - } else if (this.image.anchor.y == 0.5) { - this.text.x = this.image.x - this.image.width / 2; - this.text.y = this.image.y - this.image.height / 2; - } else if (this.image.anchor.y == 1) { - this.text.x = this.image.x - this.image.width / 2; - this.text.y = this.image.y - this.image.height; - } - } + // } else if (this.image.anchor.y == 1) { + // this.text.x = this.image.x; + // this.text.y = this.image.y - this.image.height; + // } + // } else if (this.image.anchor.x == 1) { + // if (this.image.anchor.y == 0) { + // this.text.x = this.image.x - this.image.width / 2; + // this.text.y = this.image.y; + // } else if (this.image.anchor.y == 0.5) { + // this.text.x = this.image.x - this.image.width / 2; + // this.text.y = this.image.y - this.image.height / 2; + // } else if (this.image.anchor.y == 1) { + // this.text.x = this.image.x - this.image.width / 2; + // this.text.y = this.image.y - this.image.height; + // } + // } this.angle = -this.workingArea.backgroundImage.angle; - this.drawBorder(1 / this.workingArea.backgroundImage.scale.x); + this.drawBorder(); } } diff --git a/src/app/working-area/model/axLegend.ts b/src/app/working-area/model/axLegend.ts index dffc4a8..51efe69 100644 --- a/src/app/working-area/model/axLegend.ts +++ b/src/app/working-area/model/axLegend.ts @@ -1,6 +1,3 @@ -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 { WorkingAreaComponent } from '../working-area.component'; import { AxShape } from './axShape'; @@ -27,10 +24,10 @@ export class AxLegend extends AxShape { super(assetData, workingArea); this.angle = -this.workingArea.backgroundImage.angle; this.name = this.assetData.Id; - this.pivot.set(this.assetData.PivotX, this.assetData.PivotY); + this.pivot.set(this.assetData.PivotX == undefined ? 0 : this.assetData.PivotX, this.assetData.PivotY == undefined ? 0 : this.assetData.PivotY); this.x = this.assetData.Point.x; this.y = this.assetData.Point.y; - this.scale.set(this.assetData.Scale); + this.scale.set(this.assetData.Scale == undefined ? 1 : this.assetData.Scale); this.shapeMap = shapeMap; this.createPoint(); this.refresh(); diff --git a/src/app/working-area/model/axShape.ts b/src/app/working-area/model/axShape.ts index 85ab02c..aee9466 100644 --- a/src/app/working-area/model/axShape.ts +++ b/src/app/working-area/model/axShape.ts @@ -2,6 +2,7 @@ import { Constructor } from '@angular/material/core/common-behaviors/constructor import * as PIXI from 'pixi.js'; import { Point, Rectangle, Graphics, Container } from 'pixi.js'; import { WorkingAreaComponent } from '../working-area.component'; +import { PaintMode } from './paintModel'; /** * 安信形状 @@ -35,14 +36,16 @@ export class AxShape extends Graphics { // this.buttonMode = true; this .on('pointerdown', event => { - event.stopPropagation(); - if (this.allowSelect - && event.data.button === 0) { - this.workingArea.select(this); - } - if (this.allowEdit) { - this.mouseDragging = true; - this.mousePosition = new PIXI.Point(event.data.global.x, event.data.global.y); + if (workingArea.getPaintMode() !== PaintMode.Pipeline) { + event.stopPropagation(); + if (this.allowSelect + && event.data.button === 0) { + this.workingArea.select(this); + } + if (this.allowEdit) { + this.mouseDragging = true; + this.mousePosition = event.data.getLocalPosition(this.workingArea.backgroundImage); + } } }) .on('pointerup', event => { @@ -53,15 +56,26 @@ export class AxShape extends Graphics { }) .on('pointermove', event => { if (this.mouseDragging) { + // const newPosition = event.data.getLocalPosition(this.workingArea.backgroundImage); + // const x = newPosition.x - this.x; + // const y = newPosition.y - this.y; + // this.workingArea.selection.all().forEach(item => { + // item.x += x; + // item.y += y; + // item.assetData.Point = new PIXI.Point(item.x, item.y); + // this.workingArea.canvasData.isChange = true; + // }); + + const newPosition = event.data.getLocalPosition(this.workingArea.backgroundImage); + const offsetX = newPosition.x - this.mousePosition.x; + const offsetY = newPosition.y - this.mousePosition.y; this.workingArea.selection.all().forEach(item => { - const x = event.data.global.x - this.mousePosition.x; - const y = event.data.global.y - this.mousePosition.y; - item.x += x * (1 / this.workingArea.camera2D.scale.x); - item.y += y * (1 / this.workingArea.camera2D.scale.y); + item.x += offsetX; + item.y += offsetY; item.assetData.Point = new PIXI.Point(item.x, item.y); this.workingArea.canvasData.isChange = true; }); - this.mousePosition = new PIXI.Point(event.data.global.x, event.data.global.y); + this.mousePosition = newPosition; } }) .on('rightclick', event => { diff --git a/src/app/working-area/model/configuration.ts b/src/app/working-area/model/configuration.ts index f26898b..7a8ec8a 100644 --- a/src/app/working-area/model/configuration.ts +++ b/src/app/working-area/model/configuration.ts @@ -77,7 +77,7 @@ export var config = { directionalDrag: true, boundsX: 500, boundsY: 500, - viewBounds: 60000 + viewBounds: 100000 }; export var wallInformation = { exterior: false, interior: false, midline: true, labels: true, exteriorlabel: 'e:', interiorlabel: 'i:', midlinelabel: 'm:' }; diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index 1e10cd4..46b0bb5 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -16,7 +16,6 @@ import { PropertyInfo } from './model/PropertyInfo'; import { AxPreviewImageShape } from './model/axPreviewImageShape'; import { AxArrowConnector } from './model/axArrowConnector'; import { AxLegend, Legend } from './model/axLegend'; -import { AxGrid } from './model/axGrid'; import { AxSelection } from './model/axSelection'; import { AxMessageSystem } from './model/axMessageSystem'; import { Grid2D } from './model/grid2D'; @@ -24,7 +23,7 @@ import { Viewport } from 'pixi-viewport'; import { EVENT_IMAGE_RESIZE, EVENT_SELECTION_CHANGED } from './model/events'; import { Dimensioning } from './model/dimensioning'; import { Configuration, viewBounds } from './model/configuration'; -import { id } from 'date-fns/locale'; + @Component({ @@ -64,6 +63,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 资源加载器 */ public loader = PIXI.Loader.shared; + /** + * 背景容器 + */ + public backgroundContainer = new PIXI.Container(); /** * 背景图 */ @@ -171,7 +174,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 重大调整-主版本号增加 * 日期变更-日期版本号增加 */ - public VERSION = '1.4.3.20210415_rc'; + public VERSION = '1.5.2.20210719'; /** * 数据初始化 */ @@ -223,6 +226,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.camera2D.drag(); } } + /** * 删除选中的图标 */ @@ -401,6 +405,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.camera2D.on('wheel', event => { this.updateCamera2D(); + this.enterPaintEndButton.scale.set(1/this.camera2D.scale.x); }); this.camera2D.on('pointerdown', event => { @@ -478,7 +483,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.deselectAll(); this.setPaintMode(PaintMode.endPaint); }); - } /** * 更新2D相机 @@ -610,16 +614,37 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV } (axShape.assetData.PropertyInfos.find(i => i.PropertyName == "名称/编号")).PropertyValue = index; } + axShape.refresh(); this.emit('canvasDataChanged'); this.canvasData.isChange = true; this.updateCamera2D(); }); + + + } + + /** + * 截屏 + */ + takeScreenshot() { + this.backgroundContainer.setParent(this.app.stage); + this.app.renderer.extract.canvas(this.backgroundContainer).toBlob((b) => { + const a = document.createElement('a'); + document.body.append(a); + a.download = 'screenshot'; + a.href = URL.createObjectURL(b); + a.click(); + a.remove(); + }, 'image/png'); + this.backgroundContainer.setParent(this.camera2D); } /** * 重置画布 */ public resetCanvas() { - this.app.renderer.resize(this.content.nativeElement.clientWidth, this.content.nativeElement.clientHeight); + if (!this.init.isGis) { + this.app.renderer.resize(this.content.nativeElement.clientWidth, this.content.nativeElement.clientHeight); + } } /** * 设置名称显示 @@ -742,8 +767,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 创建确认绘制结束按钮 */ private createEnterPaintEndButton() { - this.enterPaintEndButton.width = 60; - this.enterPaintEndButton.height = 60; + // this.enterPaintEndButton.width = 20; + // this.enterPaintEndButton.height = 20; + // this.enterPaintEndButton.scale.set(1/this.camera2D.scale.x); + this.enterPaintEndButton.anchor.set(0.5); this.enterPaintEndButton.position = new PIXI.Point(0, 0); this.enterPaintEndButton.interactive = true; @@ -754,7 +781,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.enterPaint(); }); this.backgroundImage.addChild(this.enterPaintEndButton); - this.enterPaintEndButton.zIndex = this.backgroundImage.children.length; + this.enterPaintEndButton.zIndex = this.backgroundImage.children.length + 200; this.enterPaintEndButton.visible = false; } /** @@ -785,6 +812,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV TemplateId: this.canvasData.selectTemplateData.id, CanConnect: this.canvasData.selectTemplateData.canConnect, Pipelines: new Array(), + BuildingId: this.canvasData.selectStorey.buildingId, FloorId: this.canvasData.selectStorey.id, Angle: this.canvasData.selectTemplateData.angle, Color: this.canvasData.selectTemplateData.color, @@ -808,6 +836,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV GameMode: this.canvasData.gameMode, Tag: this.canvasData.selectTemplateData.tag }; + const singleIcon = new AxImageShape(assetData, this); this.emit('createIcon', singleIcon); break; @@ -838,7 +867,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV if (this.paintPoints.length >= 2) { this.enterPaintEndButton.position = this.circleShadow.position; this.enterPaintEndButton.visible = true; - this.enterPaintEndButton.zIndex = this.backgroundImage.children.length; + this.enterPaintEndButton.zIndex = this.backgroundImage.children.length + 200; } if (this.paintingIcon !== null) { @@ -905,7 +934,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.enterPaintEndButton.position = this.circleShadow.position; } else if (this.paintPoints.length >= 3) { this.enterPaintEndButton.visible = true; - this.enterPaintEndButton.zIndex = this.backgroundImage.children.length; + this.enterPaintEndButton.zIndex = this.backgroundImage.children.length + 200; } this.paintPoints.forEach((value, index, array) => { if (index === 0) { @@ -934,7 +963,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.previewLineSegment.visible = true; this.enterPaintEndButton.position = this.circleShadow.position; this.enterPaintEndButton.visible = true; - this.enterPaintEndButton.zIndex = this.backgroundImage.children.length; + this.enterPaintEndButton.zIndex = this.backgroundImage.children.length + 200; // this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); // this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); var point = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); @@ -1035,7 +1064,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.previewImage.visible = false; } }); - this.camera2D.addChild(this.backgroundImage); + this.backgroundContainer.addChild(this.backgroundImage); + this.camera2D.addChild(this.backgroundContainer); this.createPreviewImage(); this.createPreviewLineSegment(); this.createCircleShadow(); @@ -1071,10 +1101,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV imageWidth: number = this.canvasData.selectStorey.imageWidth, imageHeight: number = this.canvasData.selectStorey.imageHeight, ): Promise { + console.log('当前背景图',imageUrl) if (imageAngle === undefined || imageAngle === null) { imageAngle = 0; } - this.backgroundImage.scale.set(1); + this.backgroundImage.scale ? this.backgroundImage.scale.set(1) : null; // this.backgroundImage.pivot.set(0); if (imageUrl === undefined || imageUrl === null || imageUrl === '') { this.backgroundImage.texture = this.backgroundTexture; @@ -1246,6 +1277,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.emit('createIcon', axLegend); } else { const axLegend = new AxLegend(data, this, shapeMap); + axLegend.assetData.PropertyInfos[0].PropertyType = Number(axLegend.assetData.PropertyInfos[0].PropertyType); + axLegend.assetData.PropertyInfos[0].PropertyValue = String(axLegend.assetData.PropertyInfos[0].PropertyValue); } } // /** @@ -1449,7 +1482,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV const property = new PropertyInfo(element); propertyList.push(property); }); - const assetData = { + const assetData: AssetData = { TemplateId: this.canvasData.selectTemplateData.id, FloorId: this.canvasData.selectStorey.id, Angle: this.canvasData.selectTemplateData.angle, @@ -1460,6 +1493,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV FixedSize: this.canvasData.selectTemplateData.fixedSize, Height: 32, Width: 32, + BuildingId: this.canvasData.selectStorey.buildingId, + CompanyId: "", + FloorName: "", Id: ObjectID.default.generate(), ImageUrl: this.canvasData.selectTemplateData.imageUrl, InteractiveMode: this.canvasData.selectTemplateData.interactiveMode, @@ -1599,7 +1635,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV this.backgroundImage.getChildByName(item).destroy(); }); // 创建楼层图形 - // this.createFloorShape(this.canvasData.examOriginaleveryStoreyData.data); + this.createFloorShape(this.canvasData.examOriginaleveryStoreyData.data); // 创建楼层图形 this.createFloorShape(this.canvasData.originaleveryStoreyData.data); // 创建处置预案图形 @@ -1613,9 +1649,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV * 考官点击楼层-创建试卷 */ public async onExaminerClickFloor_CreateTestpaper() { + console.log("abc") await this.refreshBackgroundImage(this.canvasData.selectStorey.imageUrl, this.canvasData.selectStorey.imageAngle); - // 清空所有图形 - this.deselectAll(); + // // 清空所有图形 + // this.deselectAll(); const itemList = []; this.backgroundImage.children.forEach(item => { if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) { @@ -1708,6 +1745,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV ids.forEach(item => { const obj = this.backgroundImage.getChildByName(item); shapes.push(obj as AxShape); + console.log((obj as AxShape).assetData); }); this.selectAllWithClear(shapes); }