版本更新1.0.17

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

@@ -70,6 +70,7 @@ export class CanvasShareDataService {
     [ '泡沫枪', '泡沫枪'],
     [ '泡沫发生器', '泡沫发生器' ],
     [ '消防管网', '消防管网'],
+    [ '泡沫管网', '消防管网'],
     [ 'DCS控制室', 'DCS控制室']
   ]);
 

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

@@ -1,4 +1,3 @@
-import { allowedNodeEnvironmentFlags } from "process";
 
 /**
  * 选择器

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, Input } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, Input, OnDestroy } from '@angular/core';
 import * as PIXI from 'pixi.js';
 import { EventEmitter } from 'events';
 import { EventManager } from '@angular/platform-browser';
@@ -32,10 +32,11 @@ import { EVENT_SELECTION_CHANGED } from './model/events';
 /**
  * 工作区
  */
-export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterViewInit {
+export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterViewInit,OnDestroy {
 
   constructor(private eventManager: EventManager, public canvasData: CanvasShareDataService) {
     super();
+    console.log('组件构造函数');
   }
 
   @ViewChild('content')
@@ -87,7 +88,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   /**
    * 选择器
    */
-  public readonly selection: AxSelection = new AxSelection();
+  public selection: AxSelection = new AxSelection();
   /**
    * 当前鼠标的点
    */
@@ -157,26 +158,18 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * RC版: 该版本已经相当成熟了，基本上不存在导致错误的BUG，与即将发行的正式版相差无几。
    * Release版: 该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号®。
    */
-  public VERSION = '1.0.16.20210203_beta';
+  public VERSION = '1.0.17.20210204_beta';
   /**
    * 数据初始化
    */
   ngOnInit(): void {
+    console.log('组件OnInit');
     PIXI.utils.skipHello();
     this.sayHello();
     this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => {
-      // event.stopPropagation();
+
-      // if (event.keyCode === 17) {
-      //   this.isCtrlKeyClicked = true;
-      // }
     });
     this.eventManager.addGlobalEventListener('window', 'keyup', (event: any) => {
-      // event.stopPropagation();
-      // if (event.keyCode === 17) {
-      //   this.isCtrlKeyClicked = false;
-      //   this.rectToolGraphics.visible = false;
-      //   this.rectToolGraphics.clear();
-      // }
       // 按Del键删除选中的图标
       if (event.keyCode === 46) {
         this.deleteSelectedShape();
@@ -184,6 +177,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     });
   }
   ngOnDestroy(): void {
+    console.log('组件OnDestroy');
+    this.selection.clear();
     this.camera2D.destroy();
     this.app.destroy();
   }
@@ -352,7 +347,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       worldHeight: 20000,
       interaction: this.app.renderer.plugins.interaction,
     });
-
+    this.camera2D.pivot.set(0.5);
+    this.camera2D.position = new PIXI.Point(0, 0);
     this.app.stage.addChild(this.camera2D);
 
     this.camera2D
@@ -459,7 +455,43 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     this.grid2D.updateGrid();
     this.resizeItem(1 / this.camera2D.scale.x);
   }
+  /**
+   * 重置相机
+   */
+  private resetCamera2D() {
+    this.camera2D.scale.set(1);
+    this.camera2D.x = (this.app.view.width - this.backgroundImage.width) / 2;
+    this.camera2D.y = (this.app.view.height - this.backgroundImage.height) / 2;
+    this.updateCamera2D();
+  }
+  /**
+   * 缩放适应
+   */
+  public zoomFit() {
+    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;
+    let scale = wScale < hScale ? wScale : hScale;
 
+    if (scale < 0.12) {
+      scale = 0.12;
+    }
+    if (scale > 16) {
+      scale = 16;
+    }
+    this.camera2D.scale.set(scale);
+    if (wScale < hScale) {
+      this.camera2D.x = 470 / 2;
+      this.camera2D.y = (appHeight - (imageHeight * this.camera2D.scale.y)) / 2;
+    } else {
+      this.camera2D.x = 470 / 2 + (appWidth - (imageWidth * this.camera2D.scale.x)) / 2;
+      this.camera2D.y = 0;
+    }
+    this.updateCamera2D();
+  }
   /**
    * 创建2D网格
    */
@@ -506,11 +538,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
      * 创建图标事件（数据处理）
      */
     this.on('createIcon', (axShape: AxShape) => {
-      console.log('新增图标：' + axShape.assetData.Name);
       if (axShape.assetData.GameMode === GameMode.BasicInformation) { // 基本信息
         // 添加楼层数据
         this.canvasData.originaleveryStoreyData.data[axShape.assetData.Id] = axShape.assetData;
-        console.log(this.canvasData.originaleveryStoreyData);
         // 添加建筑数据
         this.canvasData.originalcompanyBuildingData.data[axShape.assetData.Id] = axShape.assetData;
       } else if (axShape.assetData.GameMode === GameMode.Assignment) { // 处置预案
@@ -541,27 +571,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       this.canvasData.isChange = true;
       this.updateCamera2D();
     });
-    //     ///
-    // this.app.renderer.plugins.interaction.on('pointerdown', (event) => {
-    //   if (event.data.button !== 2) { return };
-    //   this.dragFlag = true;
-    //   this.startPoint = { x: event.data.global.x, y: event.data.global.y };
-    // });
-    // this.app.renderer.plugins.interaction.on('pointermove', (event) => {
-    //   if (this.dragFlag) {
-    //     const dx = event.data.global.x - this.startPoint.x;
-    //     const dy = event.data.global.y - this.startPoint.y;
-    //     this.app.stage.position.x += dx;
-    //     this.app.stage.position.y += dy;
-    //     this.startPoint = { x: event.data.global.x, y: event.data.global.y };
-    //   }
-    // });
-    // this.app.renderer.plugins.interaction.on('pointerup', (event) => {
-    //   this.dragFlag = false;
-    // });
   }
-  // dragFlag;
-  // startPoint;
   /**
    * 重置画布
    */
@@ -592,7 +602,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    */
   public refreshIcon(id: string): void {
     const icon = this.backgroundImage.children.find(item => item.name === id);
-    // console.log(icon);
     if (icon instanceof AxImageShape) {
       icon.refresh();
     } else if (icon instanceof MultipointIcon) {
@@ -710,28 +719,12 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   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;
     this.backgroundImage.interactive = true;
     this.backgroundImage.name = 'background';
-    // this.backgroundImage.angle = this.canvasData.selectStorey.imageAngle;
-    // const imageWidth = 665;
-    // const imageHeight = 530;
-    // 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.sortableChildren = true;
     this.backgroundImage
       .on('pointerdown', event => {
         if (event.data.button !== 0) { return; }
-        // console.log(this.backgroundImage.toLocal(this.mousePosition));
         if (this.isCtrlKeyClicked === false) {
           switch (this.paintMode) {
             case PaintMode.endPaint:
@@ -931,47 +924,14 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
         // }
       })
       .on('pointerup', event => {
-        // event.currentTarget.data = null;
 
-        // if (this.rectToolGraphics.visible === true) {
-        //   const shapes: AxShape[] = [];
-        //   this.backgroundImage.children.forEach(item => {
-        //     if ( item instanceof AxShape
-        //       && item instanceof AxPreviewImageShape === false) {
-        //       // 判断2个矩形是否相交
-        //       const rect1 = this.rectToolGraphics.getBounds();
-        //       const rect2 = item.getBounds();
-        //       if (this.isOverlap(rect1, rect2)) {
-        //         shapes.push(item);
-        //       }
-        //     }
-        //   });
-        //   this.rectToolGraphics.clear();
-        //   this.rectToolGraphics.visible = false;
-        //   this.selectAll(shapes);
-        // }
       })
       .on('pointerupoutside', event => {
-        // if (this.isMove) {
+
-          // event.currentTarget.data = null;
-        // }
       })
       .on('pointermove', event => {
-        // if (this.isCtrlKeyClicked === false) {
+
-        //   // const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
-        //   // event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x;
-        //   // event.currentTarget.y = newPosition.y - event.currentTarget.dragPoint.y;
-        // } else if (this.isCtrlKeyClicked === true) {
-        //   if (this.rectToolGraphics.visible === true) {
-        //     this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
-        //   }
-        // }
       })
-      // .on('rightclick', event => {
-      //   event.stopPropagation();
-      //   this.deselectAll();
-      //   this.setPaintMode(PaintMode.endPaint);
-      // })
       .on('pointerover', (event) => {
         if (this.previewImage !== null
         && this.paintMode === PaintMode.singlePointIcon) {
@@ -992,6 +952,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     this.backgroundImage.addChild(this.paintingLine);
 
   }
+  /**
+   * 判断矩形一是否包含矩形二
+   * @param rect1 矩形一
+   * @param rect2 矩形二
+   */
   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 };
@@ -1014,43 +979,21 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       imageAngle = 0;
     }
     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;
     if (imageUrl === undefined || imageUrl === null || imageUrl === '') {
       this.backgroundImage.texture = this.backgroundTexture;
     } else {
       this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl);
     }
-    this.backgroundImage.x = this.backgroundImage.width/2;
+    this.backgroundImage.x = this.backgroundImage.width / 2;
-    this.backgroundImage.y = this.backgroundImage.height/2;
+    this.backgroundImage.y = this.backgroundImage.height / 2;
     this.backgroundImage.angle = imageAngle;
-    // 等待图片加载完成
-    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;
-    let scale = wScale < hScale ? wScale : hScale;
 
-    if (scale < 0.12) {
+    this.resetCamera2D();
-      scale = 0.12;
+    // this.backgroundImage.children.forEach((item) => {
-    }
+    //   if (item instanceof AxShape) {
-    if (scale > 16) {
+    //     item.refresh();
-      scale = 16;
+    //   }
-    }
+    // });
-    this.camera2D.scale.set(scale);
-    this.camera2D.x = 235;
-    this.camera2D.y = 0;
-    // 设置图片缩放
-    // this.backgroundImage.scale.set(scale);
-    // this.backgroundImage.visible = true;
-    this.backgroundImage.children.forEach((item) => {
-      if (item instanceof AxShape) {
-        item.refresh();
-      }
-    });
   }
   /**
    * 刷新
@@ -1250,7 +1193,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
    * 开始绘制
    */
   public beginPaint() {
-    console.log(this.canvasData.selectTemplateData);
     this.deselectAll();
     this.setPaintMode(PaintMode.endPaint);
     this.setPaintMode(this.canvasData.selectTemplateData.interactiveMode);
@@ -1342,7 +1284,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
   private enterPaint(): void {
     this.previewLineSegment.visible = false;
     this.enterPaintEndButton.visible = false;
-    console.log(this.paintMode);
     switch (this.paintMode) {
       case PaintMode.singlePointIcon:
         break;