Merge branch 'master' of http://39.106.78.171:3000/shaojiahao/ShangHaiYuan-AnXin

src/app/canvas-share-data.service.ts

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import {ReplaySubject} from 'rxjs';
+import { ReplaySubject } from 'rxjs';
 import { Observable } from 'rxjs';
 import { GameMode } from './working-area/model/gameMode';
 
@@ -8,7 +8,7 @@ import { GameMode } from './working-area/model/gameMode';
   providedIn: 'root'
 })
 export class CanvasShareDataService {
-  constructor(private http:HttpClient) { }
+  constructor(private http: HttpClient) { }
   private _sendMessage: ReplaySubject<any> = new ReplaySubject<any>(1);
 
   examDisposalNodesData; // 考生进入时获取当前试卷的处置节点
@@ -18,22 +18,22 @@ export class CanvasShareDataService {
 
 
 
-  isChange:boolean = false; // 数据 是否改动
+  isChange: boolean = false; // 数据 是否改动
 
-  selectTemplateData:any; // 选择当前 模板数据
+  selectTemplateData: any; // 选择当前 模板数据
 
   // 总平面图/建筑 楼层
-  selectStorey: any = {area: '', details: ''}; // 选择当前 楼层 数据
+  selectStorey: any = { area: '', details: '' }; // 选择当前 楼层 数据
   originalcompanyBuildingData: any; // 单位/建筑 数据
   originaleveryStoreyData: any; // 总平面图/楼层/区域 楼层数据
   // 总平面图/建筑 楼层
 
   // 处置 节点
   allDisposalNode: any = []; // 所有 处置节点
-  allNodeMarkers: any = { highlightMarkers:{}, markers:{} }; // 灾情 标签信息
+  allNodeMarkers: any = { highlightMarkers: {}, markers: {} }; // 灾情 标签信息
   selectPanelPoint: DisposalNodeData = new DisposalNodeData(); // 当前数据节点
-  selectPanelPointBaseData: any = {description: '', notes: '', weather: '', airTemperature: '', windDirection: '', windScale: ''}; // 当前 数据节点 对应 父级节点
+  selectPanelPointBaseData: any = { description: '', notes: '', weather: '', airTemperature: '', windDirection: '', windScale: '' }; // 当前 数据节点 对应 父级节点
-  customizeDisposalNode:any; // 新建 自定义数据节点 底图+名称
+  customizeDisposalNode: any; // 新建 自定义数据节点 底图+名称
   // 处置 节点
 
   /**
@@ -42,36 +42,36 @@ export class CanvasShareDataService {
   gameMode: GameMode = GameMode.BasicInformation;
 
   facilityAssetsName = new Map<string, string>([
-    [ '消防水池', '消防水池'],
+    ['消防水池', '消防水池'],
-    [ '疏散楼梯', '疏散楼梯'],
+    ['疏散楼梯', '疏散楼梯'],
-    [ '消防电梯', '消防电梯'],
+    ['消防电梯', '消防电梯'],
-    [ '避难区域', '避难区域'],
+    ['避难区域', '避难区域'],
-    [ '安全出口', '安全出口'],
+    ['安全出口', '安全出口'],
-    [ '地上消火栓', '室外消火栓' ],
+    ['地上消火栓', '室外消火栓'],
-    [ '地下消火栓', '室外消火栓' ],
+    ['地下消火栓', '室外消火栓'],
-    [ '室内消火栓', '室内消火栓' ],
+    ['室内消火栓', '室内消火栓'],
-    [ '供水管网', '供水管网'],
+    ['供水管网', '供水管网'],
-    [ '湿式自动喷淋系统', '湿式自动喷淋系统'],
+    ['湿式自动喷淋系统', '湿式自动喷淋系统'],
-    [ '水幕系统', '水幕系统' ],
+    ['水幕系统', '水幕系统'],
-    [ '消防泵房', '消防泵房'],
+    ['消防泵房', '消防泵房'],
-    [ '水泵接合器（地上）', '水泵接合器'],
+    ['水泵接合器（地上）', '水泵接合器'],
-    [ '水泵接合器（地下）', '水泵接合器'],
+    ['水泵接合器（地下）', '水泵接合器'],
-    [ '水泵接合器（墙壁）', '水泵接合器'],
+    ['水泵接合器（墙壁）', '水泵接合器'],
-    [ '消防水泵房', '消防水泵房'],
+    ['消防水泵房', '消防水泵房'],
-    [ '箱式消火栓', '箱式消火栓'],
+    ['箱式消火栓', '箱式消火栓'],
-    [ '固定水炮', '消防水炮' ],
+    ['固定水炮', '消防水炮'],
-    [ '消防水罐', '储水罐'],
+    ['消防水罐', '储水罐'],
-    [ '消防水罐2', '储水罐'],
+    ['消防水罐2', '储水罐'],
-    [ '卧式水罐', '储水罐'],
+    ['卧式水罐', '储水罐'],
-    [ '消防泵', '水泵' ],
+    ['消防泵', '水泵'],
-    [ '泡沫泵', '水泵' ],
+    ['泡沫泵', '水泵'],
-    [ '泡沫泵房', '泡沫站'],
+    ['泡沫泵房', '泡沫站'],
-    [ '泡沫栓', '泡沫栓' ],
+    ['泡沫栓', '泡沫栓'],
-    [ '泡沫枪', '泡沫枪'],
+    ['泡沫枪', '泡沫枪'],
-    [ '泡沫发生器', '泡沫发生器' ],
+    ['泡沫发生器', '泡沫发生器'],
-    [ '消防管网', '消防管网'],
+    ['消防管网', '消防管网'],
-    [ '泡沫管网', '消防管网'],
+    ['泡沫管网', '消防管网'],
-    [ 'DCS控制室', 'DCS控制室']
+    ['DCS控制室', 'DCS控制室']
   ]);
 
   /** * 向其他组件发送信息 *
@@ -79,15 +79,15 @@ export class CanvasShareDataService {
   public sendMessage(message: any) {
     this._sendMessage.next(message);
   }
-  public getMessage(): Observable <any> {
+  public getMessage(): Observable<any> {
     return this._sendMessage.asObservable();
   }
 
   //分段上传
-  sectionUpload (companyId:string,file) {
+  sectionUpload(companyId: string, file) {
-    let data = {filename: file.name}
+    let data = { filename: file.name }
-    return new Promise ((resolve, reject)=>{
+    return new Promise((resolve, reject) => {
-      this.http.post(`/api/NewMultipartUpload/PlanPlatform/${companyId}/DisposalNode`,{},{params:data}).subscribe(async (data:any)=>{ //初始化分段上传
+      this.http.post(`/api/NewMultipartUpload/PlanPlatform/${companyId}/DisposalNode`, {}, { params: data }).subscribe(async (data: any) => { //初始化分段上传
         let objectName = data.objectName
         let uploadId = data.uploadId
         let PartNumberETag = []; //每次返回需要保存的信息
@@ -96,17 +96,17 @@ export class CanvasShareDataService {
         let shardSize = 5 * 1024 * 1024 //5MB一个分片
         let allSlice = Math.ceil(fileSize / shardSize) //总文件/5MB===共分多少段
 
-        for (let i = 0;i < allSlice;i++) { //循环分段上传
+        for (let i = 0; i < allSlice; i++) { //循环分段上传
           let start = i * shardSize //切割文件开始位置
           let end = Math.min(fileSize, start + shardSize); //切割文件结束位置
           let formData = new FormData()
-            formData.append("file",file.slice(start, end))
+          formData.append("file", file.slice(start, end))
 
           //同步写法实现异步调用
           let result = await new Promise((resolve, reject) => {
             // await 需要后面返回一个 promise 对象
-              this.http.post(`/api/MultipartUpload/PlanPlatform/${objectName}?uploadId=${uploadId}&partNumber=${i+1}`,formData).subscribe((data:any)=>{
+            this.http.post(`/api/MultipartUpload/PlanPlatform/${objectName}?uploadId=${uploadId}&partNumber=${i + 1}`, formData).subscribe((data: any) => {
-                let msg = { "partNumber":data.partNumber || null, "eTag": data.eTag || null }
+              let msg = { "partNumber": data.partNumber || null, "eTag": data.eTag || null }
               resolve(msg) // 调用 promise 内置方法处理成功
             })
           });
@@ -114,8 +114,8 @@ export class CanvasShareDataService {
 
           if (PartNumberETag.length === allSlice) { //分块上传完成
             let data = PartNumberETag
-              let paramsData = {uploadId:uploadId}
+            let paramsData = { uploadId: uploadId }
-              this.http.post(`/api/CompleteMultipartUpload/PlanPlatform/${objectName}`,data,{params:paramsData}).subscribe(data=>{
+            this.http.post(`/api/CompleteMultipartUpload/PlanPlatform/${objectName}`, data, { params: paramsData }).subscribe(data => {
               resolve(objectName)
             })
           }
@@ -127,7 +127,7 @@ export class CanvasShareDataService {
   }
 
   // 处置节点 筛选出 匹配数据 匹配不到 return undefined
-  findDisposalNode(parentId: string= null, name: string= null) {
+  findDisposalNode(parentId: string = null, name: string = null) {
     if (parentId && name) { // 匹配 父id, name
       const returnData = this.allDisposalNode.find(item => item.parentId === parentId && item.name === name);
       return returnData;
@@ -154,7 +154,7 @@ export class CanvasShareDataService {
   /**
    * 删除建筑数据中当前楼层的数据
    */
-  public deleteBuildingDataByCurrentFloorData():void {
+  public deleteBuildingDataByCurrentFloorData(): void {
     Object.keys(this.originaleveryStoreyData.data).forEach((key) => {
       // 删除建筑数据
       delete this.originalcompanyBuildingData.data[key];
@@ -294,7 +294,22 @@ export class CanvasShareDataService {
         facility.Id = '';
         facility.Name = this.facilityAssetsName.get(item.Name);
         facility.AssetName = item.Name;
-        facility.PropertyInfos = item.PropertyInfos;
+        facility.PropertyInfos = [];
+        item.PropertyInfos.forEach(e => {
+          var p: PropertyInfo = new PropertyInfo();
+          p.Enabled = e.Enabled;
+          p.Order = e.Order;
+          p.PhysicalUnit = e.PhysicalUnit;
+          p.PropertyName = e.PropertyName;
+          p.PropertyType = e.PropertyType;
+          p.PropertyValue = e.PropertyValue.toString();
+          p.Required = e.Required;
+          p.RuleName = e.RuleName;
+          p.RuleValue = e.RuleValue;
+          p.Tag = e.Tag;
+          p.Visible = e.Visible;
+          facility.PropertyInfos.push(p);
+        });
         facility.SitePlanId = item.FloorId;
         list.push(facility);
       }
@@ -315,7 +330,22 @@ export class CanvasShareDataService {
         facility.Id = '';
         facility.Name = this.facilityAssetsName.get(item.Name);
         facility.AssetName = item.Name;
-        facility.PropertyInfos = item.PropertyInfos;
+        facility.PropertyInfos = [];
+        item.PropertyInfos.forEach(e => {
+          var p: PropertyInfo = new PropertyInfo();
+          p.Enabled = e.Enabled;
+          p.Order = e.Order;
+          p.PhysicalUnit = e.PhysicalUnit;
+          p.PropertyName = e.PropertyName;
+          p.PropertyType = e.PropertyType;
+          p.PropertyValue = e.PropertyValue.toString();
+          p.Required = e.Required;
+          p.RuleName = e.RuleName;
+          p.RuleValue = e.RuleValue;
+          p.Tag = e.Tag;
+          p.Visible = e.Visible;
+          facility.PropertyInfos.push(p);
+        });
         facility.BuildingAreaId = item.FloorId;
         list.push(facility);
       }
@@ -406,7 +436,7 @@ export class CompanyFacilityAssetInfo {
   public Id: string;
   public Name: string;
   public AssetName: string;
-  public PropertyInfos: string;
+  public PropertyInfos: PropertyInfo[];
   public AssetId: string;
   public CompanyId: string;
   public SitePlanId: string;
@@ -418,7 +448,7 @@ export class BuildingFacilityAssetInfo {
   public Id: string;
   public Name: string;
   public AssetName: string;
-  public PropertyInfos: string;
+  public PropertyInfos: PropertyInfo[];
   public AssetId: string;
   public BuildingId: string;
   public BuildingAreaId: string;

src/app/key-unit/basicinfo/basicinfo.component.ts

@@ -2152,7 +2152,7 @@ export class BasicinfoComponent implements OnInit {
             this.snackBar.open('请检查输入数据是否有误','确定',config);
           })
         }
-        if(item.buildtype == "地铁类"){
+        if(item.buildtype.indexOf('地铁') != -1){
           let newObj = _.cloneDeep(item)
           delete newObj.username
           delete newObj.name

src/app/ui/collection-tools-building/collection-tools.component.html

@@ -13,13 +13,20 @@
       <mat-icon>visibility</mat-icon>
     </span>
 
+    <span class="marginLeftRight">
+      <mat-checkbox color="primary" [(ngModel)]="isMultiSelect" (change)='changeMultiSelect($event)'></mat-checkbox> 多选
+    </span>
+    <span class="marginLeftRight">
+      <mat-checkbox color="primary" [(ngModel)]="isShowLegend" (change)='changeLegend($event)' [disabled]='this.canvasData.selectPanelPoint.BackgroundImageUrl'></mat-checkbox> 显示图例
+    </span>
+  
     <button (click)="copyAsset()" class="copytobutn marginLeftRight" mat-button title="复制" style="margin:0 5px;" *ngIf="isEditPattern">
       复制<mat-icon>library_books</mat-icon>
     </button>
-
     <button (click)="pasteAsset()" class="copytobutn marginLeftRight" mat-button title="粘贴" *ngIf="isEditPattern">
       粘贴<mat-icon>screen_share</mat-icon>
     </button>
+
     <span title="适应缩放" class="zoom" (click)="adaptZoom()">
       <img src="/assets/images/适应缩放.png" alt="">
       适应缩放

src/app/ui/collection-tools-building/collection-tools.component.ts

@@ -831,6 +831,11 @@ export class CollectionToolsBuildingComponent implements OnInit {
     this.renovateTreeData(false)
   }
 
+  isMultiSelect:boolean = false; // 多选/单选 切换
+  changeMultiSelect (e) { this.canvas.setMulitSelect(this.isMultiSelect) }
+  isShowLegend:boolean = true; //图例是否显示
+  changeLegend (e) { this.canvasData.selectPanelPoint.BackgroundImageUrl? null : this.canvas.setLegendVisible(this.isShowLegend) }
+
   basicInfo:boolean = true //基本信息名称显隐
   wantToWork:boolean = true //想定作业名称显隐
   //点击基本信息名称
@@ -1478,6 +1483,7 @@ export class CollectionToolsBuildingComponent implements OnInit {
     isRefresh? await this.canvas.refresh() : null
     this.canvas.setNameVisible(this.basicInfo,0)
     this.canvas.setNameVisible(this.wantToWork,1)
+    this.canvas.setLegendVisible(this.isShowLegend) //图例显隐
     isRefresh? this.canvasData.isChange = false : null //服务中 数据是否改动 改为false
     isRefresh? this.isShowProperty = true : null
     isRefresh? this.isShowAttribute = true : null
@@ -1507,7 +1513,6 @@ export class CollectionToolsBuildingComponent implements OnInit {
   //陈鹏飞↓↓↓
   //陈鹏飞↓↓↓
   params = {companyId: sessionStorage.getItem('companyId')}
-  // params = {companyId: this.route.snapshot.queryParams.id}
   allFireElements:any = []; //当前 单位/建筑 下的消防要素
 
   isShowAttribute:boolean = true; //属性栏 是否显示 默认数据

src/app/ui/collection-tools-plan/collection-tools.component.html

@@ -8,18 +8,20 @@
       <mat-icon style="vertical-align: middle; color: #279FFF;">list</mat-icon>
     </button>
 
-    <!-- <span  [ngClass]="{'icongray': !basicInfo}" title="基本信息名称显示/隐藏" class="marginLeftRight" (click)="basicInfoClick()">
+    <span class="marginLeftRight">
-      基本信息名称
+      <mat-checkbox color="primary" [(ngModel)]="isMultiSelect" (change)='changeMultiSelect($event)'></mat-checkbox> 多选
-      <mat-icon>visibility</mat-icon>
+    </span>
-    </span> -->
+    <span class="marginLeftRight">
+      <mat-checkbox color="primary" [(ngModel)]="isShowLegend" (change)='changeLegend($event)' [disabled]='this.canvasData.selectPanelPoint.BackgroundImageUrl'></mat-checkbox> 显示图例
+    </span>
   
     <button (click)="copyAsset()" class="copytobutn marginLeftRight" mat-button title="复制" style="margin:0 5px;" *ngIf="isEditPattern">
       复制<mat-icon>library_books</mat-icon>
     </button>
-
     <button (click)="pasteAsset()" class="copytobutn marginLeftRight" mat-button title="粘贴" *ngIf="isEditPattern">
       粘贴<mat-icon>screen_share</mat-icon>
     </button>
+  
     <span title="适应缩放" class="zoom" (click)="adaptZoom()">
       <img src="/assets/images/适应缩放.png" alt="">
       适应缩放

src/app/ui/collection-tools-plan/collection-tools.component.ts

@@ -834,6 +834,11 @@ export class CollectionToolsPlanComponent implements OnInit {
     // this.renovateTreeData(false)
   }
 
+  isMultiSelect:boolean = false; // 多选/单选 切换
+  changeMultiSelect (e) { this.canvas.setMulitSelect(this.isMultiSelect) }
+  isShowLegend:boolean = true; //图例是否显示
+  changeLegend (e) { this.canvasData.selectPanelPoint.BackgroundImageUrl? null : this.canvas.setLegendVisible(this.isShowLegend) }
+
   basicInfo:boolean = true //基本信息名称显隐
   wantToWork:boolean = true //想定作业名称显隐
   //点击基本信息名称
@@ -1489,6 +1494,7 @@ export class CollectionToolsPlanComponent implements OnInit {
     isRefresh? await this.canvas.refresh() : null
     this.canvas.setNameVisible(this.basicInfo,0)
     this.canvas.setNameVisible(this.wantToWork,1)
+    this.canvas.setLegendVisible(this.isShowLegend) //图例显隐
     isRefresh? this.canvasData.isChange = false : null //服务中 数据是否改动 改为false
     isRefresh? this.isShowProperty = true : null
     isRefresh? this.isShowAttribute = true : null
@@ -1517,7 +1523,6 @@ export class CollectionToolsPlanComponent implements OnInit {
   //陈鹏飞↓↓↓
   //陈鹏飞↓↓↓
   params = {companyId: sessionStorage.getItem('companyId')}
-  // params = {companyId: this.route.snapshot.queryParams.id}
   allFireElements:any = []; //当前 单位/建筑 下的消防要素
 
   isShowAttribute:boolean = true; //属性栏 是否显示 默认数据

src/app/ui/collection-tools/collection-tools.component.html

@@ -7,6 +7,7 @@
     <button mat-button (click)="toggle2()">
       <mat-icon style="vertical-align: middle; color: #279FFF;">list</mat-icon>
     </button>
+
     <span  [ngClass]="{'icongray': !basicInfo}" *ngIf="pattern" title="基本信息名称显示/隐藏" class="marginLeftRight" (click)="basicInfoClick()">
       基本信息名称<mat-icon>visibility</mat-icon>
     </span>
@@ -20,10 +21,10 @@
     <span class="marginLeftRight">
       <mat-checkbox color="primary" [(ngModel)]="isShowLegend" (change)='changeLegend($event)' [disabled]='this.canvasData.selectPanelPoint.BackgroundImageUrl'></mat-checkbox> 显示图例
     </span>
+  
     <button (click)="copyAsset()" class="copytobutn marginLeftRight" mat-button title="复制" *ngIf="isEditPattern">
       复制<mat-icon>library_books</mat-icon>
     </button>
-
     <button (click)="pasteAsset()" class="copytobutn marginLeftRight" mat-button title="粘贴" *ngIf="isEditPattern">
       粘贴<mat-icon>screen_share</mat-icon>
     </button>

src/app/working-area/model/axImageShape.ts

@@ -5,7 +5,7 @@ import { PaintMode } from './paintModel';
 import * as PIXI from 'pixi.js';
 import { PropertyInfo } from './PropertyInfo';
 import { AxShape } from './axShape';
-import { Sprite } from 'pixi.js';
+import { Sprite, Point, Rectangle } from 'pixi.js';
 import { AxArrowConnector } from './axArrowConnector';
 
 /**
@@ -31,6 +31,7 @@ export class AxImageShape extends AxShape {
         wordWrapWidth: 100,
     });
 
+
     text = new PIXI.Text(this.assetData.Name
         + '\r\n'
         + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
@@ -72,26 +73,74 @@ export class AxImageShape extends AxShape {
         this.addChild(this.selectionBox);
 
         ////
+        var leftUpPos = new Point(0, 0);
+        var upLeftDrag = false;
+        var leftDownPos = new Point(0, 0);
+        var rightUpPos = new Point(0, 0);
+        var rightDownPos = new Point(0, 0);
         // up-left
         this.upLeft = new PIXI.Sprite(this.pointTexture);
+        this.upLeft.cursor = 'nwse-resize';
         this.upLeft.anchor.set(0.5);
         this.addChild(this.upLeft);
         this.upLeft.interactive = true;
+        this.upLeft.on('pointerdown', event => {
+
+            upLeftDrag = true;
+            var imageRect = new Rectangle(this.image.x, this.image.y, this.image.width, this.image.height);
+            console.log('图片的边界大小', imageRect);
+            rightDownPos = new Point(imageRect.right, imageRect.bottom);
+
+            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));
+            event.stopPropagation();
+        });
+        this.upLeft.on('pointermove', event => {
+
+            // 移动时调整形状大小，然后重绘边框
+            // 检查右下角距离鼠标的位置，
+            if (upLeftDrag) {
+                leftUpPos = event.data.getLocalPosition(this.upLeft.parent);
+                console.log('鼠标点击位置的坐标', leftUpPos);
+
+                this.assetData.Width = Math.abs(leftUpPos.x);
+                this.assetData.Height = Math.abs(leftUpPos.x);
+                this.refresh();
+            }
+
+        });
+        this.upLeft.on('pointerup', event => {
+            if (upLeftDrag) {
+                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.upLeft.on('pointerupoutside', event => {
+            if (upLeftDrag) {
+                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.upLeft.visible = false;
         // up-right
         this.upRight = new PIXI.Sprite(this.pointTexture);
+        this.upRight.cursor = 'nesw-resize';
         this.upRight.anchor.set(0.5);
         this.addChild(this.upRight);
         this.upRight.interactive = true;
         this.upRight.visible = false;
         // down-left
         this.downLeft = new PIXI.Sprite(this.pointTexture);
+        this.downLeft.cursor = 'nesw-resize';
         this.downLeft.anchor.set(0.5);
         this.addChild(this.downLeft);
         this.downLeft.interactive = true;
         this.downLeft.visible = false;
         // down-right
         this.downRight = new PIXI.Sprite(this.pointTexture);
+        this.downRight.cursor = 'nwse-resize';
         this.downRight.anchor.set(0.5);
         this.addChild(this.downRight);
         this.downRight.interactive = true;
@@ -193,71 +242,8 @@ 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();
-    //                     }
-    //                 }
-    //             }
-    // }
     // 刷新
     public refresh() {
-        if (this.assetData.CanConnect) {
-
-        }
         this.image.width = this.assetData.Width;
         this.image.height = this.assetData.Height;
         this.image.angle = this.assetData.Angle;
@@ -267,5 +253,6 @@ export class AxImageShape extends AxShape {
         this.text.x = this.image.x;
         this.text.y = this.image.y - this.image.height / 2;
         this.angle = -this.workingArea.backgroundImage.angle;
+        this.drawBorder(1 / this.workingArea.backgroundImage.scale.x);
     }
 }

src/app/working-area/model/axShape.ts

@@ -32,7 +32,7 @@ export class AxShape extends Graphics {
         this.workingArea.backgroundImage.addChild(this);
         this.zIndex = 200;
         this.interactive = true;
-        this.buttonMode = true;
+        // this.buttonMode = true;
         this
             .on('pointerdown', event => {
                 event.stopPropagation();
@@ -112,7 +112,7 @@ export class AxShape extends Graphics {
 
         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);
+        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);

src/app/working-area/working-area.component.ts

@@ -90,7 +90,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    */
   public selection: AxSelection = new AxSelection();
   /**
-   * 当前鼠标的点
+   * 当前鼠标点击的点
    */
   public currentClickPoint: PIXI.Graphics = new PIXI.Graphics();
   /**
@@ -151,6 +151,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   public animationTime;
   // 是否按下Ctrl键
   isCtrlKeyClicked = false;
+  // 是否开启多点连线垂直绘制
+  isDrawVerticalLine = false;
   /**
    * 本软件版本号由四部分组成：<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如：1.0.0.20210105_beta
    * Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，一般而言，该版本软件的Bug较多，需要继续修改。
@@ -162,7 +164,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * 重大调整-主版本号增加
    * 日期变更-日期版本号增加
    */
-  public VERSION = '1.2.2.20210220_beta';
+  // todo  shift绘制垂直线段
+  public VERSION = '1.3.0.20210220_beta';
   /**
    * 数据初始化
    */
@@ -171,12 +174,31 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     PIXI.utils.skipHello();
     this.sayHello();
     this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => {
-
+      // if (event.keyCode === 16) {
+      //   this.isDrawVerticalLine = true;
+      // }
+      switch (event.keyCode) {
+        case 16:
+          this.isDrawVerticalLine = true;
+          break;
+        default:
+          break;
+      }
     });
     this.eventManager.addGlobalEventListener('window', 'keyup', (event: any) => {
-      // 按Del键删除选中的图标
+      // // 按Del键删除选中的图标
-      if (event.keyCode === 46) {
+      // if (event.keyCode === 46) {
+      //   this.deleteSelectedShape();
+      // }
+      switch (event.keyCode) {
+        case 16: // shift
+          this.isDrawVerticalLine = false;
+          break;
+        case 46: // delete
           this.deleteSelectedShape();
+          break;
+        default:
+          break;
       }
     });
   }
@@ -774,8 +796,27 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
               break;
             case PaintMode.lineIcon:
               this.previewLineSegment.visible = true;
+
+              var point = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
+              if (this.isDrawVerticalLine && this.paintPoints.length !== 0) {
+                // 起点距离终点水平距离
+                const dh = Math.abs(point.x - this.currentClickPoint.x);
+                // 起点距离终点垂直距离
+                const dv = Math.abs(point.y - this.currentClickPoint.y);
+                if (dh >= dv) {
+                  // 绘制水平线
+                  point = new PIXI.Point(this.circleShadow.x, this.currentClickPoint.y);
+
+                } else {
+                  // 绘制垂直线
+                  point = new PIXI.Point(this.currentClickPoint.x, this.circleShadow.y);
+                }
+                this.currentClickPoint.position = new PIXI.Point(point.x, point.y);
+              } else {
                 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.paintPoints.push(point);
 
               if (this.paintPoints.length >= 2) {
                 this.enterPaintEndButton.position = this.circleShadow.position;
@@ -832,8 +873,28 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
               break;
             case PaintMode.polygonIcon:
               this.previewLineSegment.visible = true;
+              // 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);
+              if (this.isDrawVerticalLine && this.paintPoints.length !== 0) {
+                // 起点距离终点水平距离
+                const dh = Math.abs(point.x - this.currentClickPoint.x);
+                // 起点距离终点垂直距离
+                const dv = Math.abs(point.y - this.currentClickPoint.y);
+                if (dh >= dv) {
+                  // 绘制水平线
+                  point = new PIXI.Point(this.circleShadow.x, this.currentClickPoint.y);
+
+                } else {
+                  // 绘制垂直线
+                  point = new PIXI.Point(this.currentClickPoint.x, this.circleShadow.y);
+                }
+                this.currentClickPoint.position = new PIXI.Point(point.x, point.y);
+              } else {
                 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.paintPoints.push(point);
               if (this.paintPoints.length === 1) {
                 this.enterPaintEndButton.position = this.circleShadow.position;
               } else if (this.paintPoints.length >= 3) {
@@ -868,8 +929,28 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
               this.enterPaintEndButton.position = this.circleShadow.position;
               this.enterPaintEndButton.visible = true;
               this.enterPaintEndButton.zIndex = this.backgroundImage.children.length;
+              // 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);
+              if (this.isDrawVerticalLine && this.paintPoints.length !== 0) {
+                // 起点距离终点水平距离
+                const dh = Math.abs(point.x - this.currentClickPoint.x);
+                // 起点距离终点垂直距离
+                const dv = Math.abs(point.y - this.currentClickPoint.y);
+                if (dh >= dv) {
+                  // 绘制水平线
+                  point = new PIXI.Point(this.circleShadow.x, this.currentClickPoint.y);
+
+                } else {
+                  // 绘制垂直线
+                  point = new PIXI.Point(this.currentClickPoint.x, this.circleShadow.y);
+                }
+                this.currentClickPoint.position = new PIXI.Point(point.x, point.y);
+              } else {
                 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.paintPoints.push(point);
               if (this.paintPoints.length < 2) {
                 return;
               }
@@ -1207,10 +1288,29 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * @param pointB 点B
    */
   private refreshPreviewLineSegment(pointA: PIXI.Point, pointB: PIXI.Point) {
+    const ps: PIXI.Point = pointA;
+    let pe: PIXI.Point = pointB;
+    if (this.isDrawVerticalLine) {
+      // 起点距离终点水平距离
+      const dh = Math.abs(pointB.x - pointA.x);
+      // 起点距离终点垂直距离
+      const dv = Math.abs(pointB.y - pointA.y);
+      if (dh >= dv) {
+        // 绘制水平线
+        pe = new PIXI.Point(pointB.x, pointA.y);
+
+      } else {
+        // 绘制垂直线
+        pe = new PIXI.Point(pointA.x, pointB.y);
+      }
+    }
+
     this.previewLineSegment.clear();
     this.previewLineSegment.lineStyle(1 / this.backgroundImage.scale.x, 0x00ff00, 1);
-    this.previewLineSegment.moveTo(pointA.x, pointA.y);
+    // this.previewLineSegment.moveTo(pointA.y, pointA.y);
-    this.previewLineSegment.lineTo(pointB.x, pointB.y);
+    // this.previewLineSegment.lineTo(pointB.x, pointB.y);
+    this.previewLineSegment.moveTo(ps.x, ps.y);
+    this.previewLineSegment.lineTo(pe.x, pe.y);
   }
   /**
    * 创建半径图标影子