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

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';
// import { OutlineFilter } from 'pixi-filters';
import { AssetData, CanvasShareDataService, DisposalNodeData, FloorNodeData } from '../canvas-share-data.service';
import * as ObjectID from 'bson-objectid';
import { Charm } from './charm';
import { AxImageShape } from './model/axImageShape';
import { GameMode } from './model/gameMode';
import { MultipointIcon } from './model/multipointIcon';
import { PolygonIcon } from './model/polygonIcon';
import { PaintMode } from './model/paintModel';
import { AxShape } from './model/axShape';
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';
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({
  selector: 'app-working-area',
  templateUrl: './working-area.component.html',
  styleUrls: ['./working-area.component.scss']
})
/**
 * 工作区
 */
export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterViewInit, OnDestroy {

  constructor(private eventManager: EventManager, public canvasData: CanvasShareDataService) {
    super();
    console.log('组件构造函数');
  }

  @ViewChild('content')
  content: ElementRef;
  /**
   * 父组件
   */
  @Input() init: any;
  /**
   * pixijs 程序
   */
  public app: PIXI.Application = null;
  /**
   * 相机
   */
  public camera2D: Viewport = null;
  /**
   * 网格
   */
  public grid2D: Grid2D = null;
  /**
   * 资源加载器
   */
  public loader = PIXI.Loader.shared;
  /**
   * 背景图
   */
  public backgroundImage: PIXI.Sprite = null;
  /**
   * 绘制图片形状时预览状态的图片
   */
  public previewImage: AxPreviewImageShape = null;
  /**
   * 预览线段
   */
  public previewLineSegment = new PIXI.Graphics();
  /**
   * 预览原点
   */
  public circleShadow = new PIXI.Graphics();
  /**
   * 鼠标位置
   */
  public mousePosition: PIXI.Point = new PIXI.Point(0, 0);
  /**
   * 绘画模式
   */
  private paintMode: PaintMode = PaintMode.endPaint;
  /**
   * 选择器
   */
  public selection: AxSelection = new AxSelection();
  /**
   * 当前鼠标点击的点
   */
  public currentClickPoint: PIXI.Graphics = new PIXI.Graphics();
  /**
   * 绘制点集合
   */
  public paintPoints: PIXI.Point[] = [];
  /**
   * 绘制中的多点图标
   */
  public paintingIcon: MultipointIcon;
  /**
   * 绘制中的图形
   */
  public paintingShape: AxShape = null;
  /**
   * 绘制中的连线
   */
  public paintingLine: PIXI.Graphics = new PIXI.Graphics();
  /**
   * 绿色描边
   */
  // public outlineFilterGreen = new OutlineFilter(2, 0x00ff00);
  /**
   * 拷贝素材数据
   */
  public copyData: any[] = [];
  /**
   * 确认绘制按钮
   */
  private enterPaintEndButton = PIXI.Sprite.from('assets/images/enterPaintButton.png');
  /**
   * 编辑点图片
   */
  editorPointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png');
  backgroundTexture: PIXI.Texture = PIXI.Texture.from('assets/images/noImg.png');
  /**
   * 框选工具图形
   */
  private rectToolGraphics = new PIXI.Graphics();
  /**
   * 初始鼠标位置
   */
  private initialScreenMousePos: PIXI.Point = new PIXI.Point();
  /**
   * 最终鼠标位置
   */
  private finalScreenMousePos: PIXI.Point = new PIXI.Point();
  /**
   * 允许编辑
   */
  public allowEdit = true;
  /**
   * 图形索引
   */
  public shapesIndex: Map<string, number> = new Map<string, number>();
  /**
   * 动画控制器
   */
  public animator;
  public animation;
  public animationIcon;
  public animationTime;
  // 是否按下Ctrl键
  isCtrlKeyClicked = false;
  // 是否开启多点连线垂直绘制
  isDrawVerticalLine = false;
  /**
   * 本软件版本号由四部分组成：<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如：1.0.0.20210105_beta
   * Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，一般而言，该版本软件的Bug较多，需要继续修改。
   * Beta版: 该版本相对于α版已有了很大的改进，消除了严重的错误，但还是存在着一些缺陷，需要经过多次测试来进一步消除，此版本主要的修改对像是软件的UI。
   * RC版: 该版本已经相当成熟了，基本上不存在导致错误的BUG，与即将发行的正式版相差无几。
   * Release版: 该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号®。
   * 修改-修订版本号增加
   * 新增-子版本号增加
   * 重大调整-主版本号增加
   * 日期变更-日期版本号增加
   */
  public VERSION = '1.4.3.20210415_rc';
  /**
   * 数据初始化
   */
  ngOnInit(): void {
    console.log('组件OnInit');
    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键删除选中的图标
      // if (event.keyCode === 46) {
      //   this.deleteSelectedShape();
      // }
      switch (event.keyCode) {
        case 16: // shift
          this.isDrawVerticalLine = false;
          break;
        case 46: // delete
          this.deleteSelectedShape();
          break;
        default:
          break;
      }
    });
  }
  ngOnDestroy(): void {
    console.log('组件OnDestroy');
    this.selection.clear();
    this.camera2D.destroy();
    this.app.destroy();
  }
  public setMulitSelect(b: boolean) {
    if (b) {
      this.isCtrlKeyClicked = true;
      this.camera2D.plugins.pause('drag');
    } else {
      this.isCtrlKeyClicked = false;
      this.camera2D.drag();
    }
  }
  /**
   * 删除选中的图标
   */
  public deleteSelectedShape() {
    if (this.selection.size() > 0) {
      this.selection.all().forEach(axShape => {
        if (this.allowEdit && this.canvasData.gameMode === axShape.assetData.GameMode) {
          // 删除图例对象
          const temp = this.backgroundImage.getChildByName('图例') as AxLegend;
          if (temp !== undefined
            && temp !== null
            && axShape.assetData.Name !== '图例') {
            const itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1);
            temp.deleteItem(itemLegend);
          }
          if (axShape.assetData.GameMode === GameMode.BasicInformation) { // 基本信息
            // 删除楼层数据
            delete this.canvasData.originaleveryStoreyData.data[axShape.assetData.Id];
            // 删除建筑数据
            delete this.canvasData.originalcompanyBuildingData.data[axShape.assetData.Id];
          } else if (axShape.assetData.GameMode === GameMode.Assignment) { // 处置预案
            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 (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.selection.clear();
      this.emit('canvasDataChanged');
      this.canvasData.isChange = true;
      AxMessageSystem.send(EVENT_SELECTION_CHANGED);
    }
  }
  /**
   * 打招呼
   */
  sayHello() {
    let _a;
    if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
      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');
    }
  }
  /**
   * 页面初始化
   */
  ngAfterViewInit(): void {
    setTimeout(() => {
      this.createCanvas();
    });
    window.onresize = () => {
      this.resetCanvas();
    };
  }
  /**
   *
   * @param event 鼠标滑动事件,改用ViewPort控制
   */
  // public mouseWheelHandel(event) {
  //   const delX = this.mousePosition.x - this.backgroundImage.position.x;
  //   const delY = this.mousePosition.y - this.backgroundImage.position.y;
  //   const pivot = this.backgroundImage.toLocal(this.mousePosition);
  //   const delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
  //   if (delta > 0) {
  //     if (this.backgroundImage.scale.x >= 32) {
  //       this.backgroundImage.scale.x = 32;
  //       this.backgroundImage.scale.y = 32;
  //       this.resizeItem(1 / this.backgroundImage.scale.x);
  //       return;
  //     }
  //     this.backgroundImage.pivot.set(pivot.x, pivot.y);

  //     this.backgroundImage.scale.x += this.backgroundImage.scale.x * 0.1;
  //     this.backgroundImage.scale.y += this.backgroundImage.scale.y * 0.1;

  //     this.backgroundImage.position.x += delX;
  //     this.backgroundImage.position.y += delY;
  //   } else if (delta < 0) {
  //     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);
  //       return;
  //     }
  //     this.backgroundImage.pivot.set(pivot.x, pivot.y);

  //     this.backgroundImage.scale.x -= this.backgroundImage.scale.x * 0.1;
  //     this.backgroundImage.scale.y -= this.backgroundImage.scale.y * 0.1;

  //     this.backgroundImage.position.x += delX;
  //     this.backgroundImage.position.y += delY;
  //   }
  //   this.resizeItem(1 / this.backgroundImage.scale.x);
  // }
  // 重置图形缩放
  public resizeItem(size: number) {
    this.backgroundImage.children.forEach(item => {
      if (item instanceof AxShape) {
        item.setItemScale(size);
        item.drawBorder(size);
      }
    });
  }
  /**
   *
   * @param icon 移动到选中车辆到屏幕中心点，改用Viewport控制
   */
  // public moveIconToScreenCenter(icon) {
  //   if (icon.parent === this.backgroundImage && (
  //     icon.assetData.Type === 1 ||
  //     icon.assetData.Type === 2 ||
  //     icon.assetData.Type === 3 ||
  //     icon.assetData.Type === 4
  //   )) {
  //     this.backgroundImage.pivot.set(icon.x, icon.y);
  //     this.backgroundImage.position.set(771, 404);
  //     clearTimeout(this.animationTime);
  //     this.animation?.pause();
  //     this.animationIcon?.scale.set(1);
  //     this.animation = this.animator.breathe(icon, 10, 10, 30, true, 0);
  //     this.animationIcon = icon;
  //     this.animationTime = setTimeout(() => {
  //       this.animation?.pause();
  //       this.animationIcon?.scale.set(1);
  //     }, 5000);
  //   }
  // }


  /**
   * 创建2D相机
   */
  private createViewport(): void {
    var gridSize = Dimensioning.cmToPixel(Configuration.getNumericValue(viewBounds) * 1);
    this.camera2D = new Viewport({
      screenWidth: this.app.view.width,
      screenHeight: this.app.view.height,
      worldWidth: gridSize,
      worldHeight: gridSize,
      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
      .clamp({
        left: -gridSize / 2,
        right: gridSize / 2,
        top: -gridSize / 2,
        bottom: gridSize / 2,
      })
      .drag()
      .pinch()
      .wheel()
      .clampZoom({
        minScale: 0.12,
        maxScale: 16,
      })
      .decelerate();

    this.camera2D.on('wheel', event => {
      this.updateCamera2D();
    });

    this.camera2D.on('pointerdown', event => {
      if (this.isCtrlKeyClicked === true
        && event.data.button === 0) {
        this.rectToolGraphics.visible = true;
        this.initialScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
        this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
      }
    });
    this.camera2D.on('pointerup', event => {
      if (this.isCtrlKeyClicked === true) {
        this.rectToolGraphics.visible = false;
        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) && item.interactive) {
              shapes.push(item);
            }
          }
        });
        this.rectToolGraphics.clear();
        this.selectAll(shapes);
      }
    });
    this.camera2D.on('pointerupoutside', event => {
      if (this.isCtrlKeyClicked === true) {
        this.rectToolGraphics.visible = false;
        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) && item.interactive) {
              shapes.push(item);
            }
          }
        });
        this.rectToolGraphics.clear();
        this.selectAll(shapes);
      }
    });
    this.camera2D.on('pointermove', event => {
      if (this.isCtrlKeyClicked === true
        && this.rectToolGraphics.visible === true) {
        this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);

        const init = this.initialScreenMousePos;
        const final = this.finalScreenMousePos;

        this.rectToolGraphics.clear();
        this.rectToolGraphics.lineStyle(1 / this.camera2D.scale.x, 0x00ff00, 1);
        this.rectToolGraphics.beginFill(0xccccf2, 0.25);
        if (final.x > init.x && final.y > init.y) {
          this.rectToolGraphics.drawRect(init.x, init.y, final.x - init.x, final.y - init.y);
        } else if (final.x > init.x && final.y < init.y) {
          this.rectToolGraphics.drawRect(init.x, final.y, final.x - init.x, init.y - final.y);
        } else if (final.x < init.x && final.y > init.y) {
          this.rectToolGraphics.drawRect(final.x, init.y, init.x - final.x, final.y - init.y);
        } else if (final.x < init.x && final.y < init.y) {
          this.rectToolGraphics.drawRect(final.x, final.y, init.x - final.x, init.y - final.y);
        }
        this.rectToolGraphics.endFill();
      }
    });
    // 右键事件
    this.camera2D.on('rightclick', event => {
      event.stopPropagation();
      this.deselectAll();
      this.setPaintMode(PaintMode.endPaint);
    });

  }
  /**
   * 更新2D相机
   */
  private updateCamera2D() {
    this.grid2D.updateGrid();
    this.resizeItem(1 / this.camera2D.scale.x);
  }
  /**
   * 重置相机
   */
  public 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.width;
    const imageHeight = this.backgroundImage.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网格
   */
  private createGrid2D(): void {
    this.grid2D = new Grid2D(this.camera2D, null);
    this.camera2D.addChild(this.grid2D);
  }
  /**
   * 创建画布
   */
  private createCanvas(): void {
    this.app = new PIXI.Application({
      width: this.content.nativeElement.clientWidth,
      height: this.content.nativeElement.clientHeight,
      antialias: true,
      transparent: false,
      resolution: 1,
      backgroundColor: 0xE9EAEA
    });
    this.content.nativeElement.appendChild(this.app.view);
    this.app.view.style.border = '1px dashed blue';
    this.animator = new Charm(PIXI);

    this.createViewport();
    this.createGrid2D();
    this.createBackgroundImage();

    this.app.ticker.add((delta) => {
      this.animator.update();
      this.mousePosition = this.app.renderer.plugins.interaction.mouse.global;
      // 预览图片
      if (this.previewImage !== undefined && this.previewImage !== null) {
        this.previewImage.position = this.backgroundImage.toLocal(this.mousePosition);
      }

      if (this.circleShadow !== undefined && this.circleShadow !== null) {
        this.circleShadow.position = this.backgroundImage.toLocal(this.mousePosition);
        this.refreshPreviewLineSegment(this.currentClickPoint.position, this.circleShadow.position);
        this.refreshPreviewPoint();
      }
    });
    /**
     * 创建图标事件（数据处理）
     */
    this.on('createIcon', (axShape: AxShape) => {
      if (axShape.assetData.GameMode === GameMode.BasicInformation) { // 基本信息
        // 添加楼层数据
        this.canvasData.originaleveryStoreyData.data[axShape.assetData.Id] = axShape.assetData;
        // 添加建筑数据
        this.canvasData.originalcompanyBuildingData.data[axShape.assetData.Id] = axShape.assetData;
      } else if (axShape.assetData.GameMode === GameMode.Assignment) { // 处置预案
        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 (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;
        }
      }
      const temp = this.backgroundImage.getChildByName('图例') as AxLegend;
      if (temp !== undefined
        && temp !== null
        && axShape.assetData.Name !== '图例') {
        const itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1);
        temp.addItem(itemLegend);
        // 设置新增图形的名称/编号
        let Id = temp.shapeMap.get(axShape.assetData.Name).Index;
        let index = "000";
        // 检查Id的长度
        if (Id < 10) {
          index = axShape.assetData.Name + "00" + Id;
        } else if (Id < 100) {
          index = axShape.assetData.Name + "0" + Id;
        } else {
          index = axShape.assetData.Name + Id;
        }
        (axShape.assetData.PropertyInfos.find(i => i.PropertyName == "名称/编号")).PropertyValue = index;
      }
      this.emit('canvasDataChanged');
      this.canvasData.isChange = true;
      this.updateCamera2D();
    });
  }
  /**
   * 重置画布
   */
  public resetCanvas() {
    this.app.renderer.resize(this.content.nativeElement.clientWidth, this.content.nativeElement.clientHeight);
  }
  /**
   * 设置名称显示
   * @param value true  显示 false 隐藏
   * @param mode BasicInformation = 0 基本信息 Assignment想定作业 = 1 想定作业
   */
  public setNameVisible(value: boolean, mode: GameMode): void {
    this.backgroundImage?.children.forEach(item => {
      if (item instanceof AxImageShape) {
        item.setNameVisible(value, mode);
      } else if (item instanceof MultipointIcon) {
        item.setNameVisible(value, mode);
      } else if (item instanceof PolygonIcon) {
        item.setNameVisible(value, mode);
      } else if (item instanceof AxArrowConnector) {
        item.setNameVisible(value, mode);
      }
    });
  }
  /**
   * 根据id刷新图标
   * @param id 图标数据id
   */
  public refreshIcon(id: string): void {
    const icon = this.backgroundImage.children.find(item => item.name === id);
    if (icon instanceof AxImageShape) {
      icon.refresh();
    } else if (icon instanceof MultipointIcon) {
      icon.refresh();
    } else if (icon instanceof PolygonIcon) {
      icon.refresh();
    } else if (icon instanceof AxArrowConnector) {
      icon.redraw();
    } else if (icon instanceof AxLegend) {
      icon.refresh();
    }
  }
  /**
   *
   * @param value 缩放倍数
   */
  public setIconScale(value: number): void {
    this.backgroundImage.children.forEach(item => {
      if (item instanceof AxImageShape) {
        item.image.scale.set(value);
      } else if (item instanceof MultipointIcon) {

      } else if (item instanceof PolygonIcon) {

      }
    });
  }
  /**
   * 创建楼层图形
   */
  public createFloorShape(floorData: any) {
    if (floorData === undefined || floorData === null) { return; }
    Object.keys(floorData).forEach((key) => {
      switch (floorData[key].InteractiveMode) {
        case 0:
          const singleIcon = new AxImageShape(floorData[key], this);
          singleIcon.allowEdit = this.allowEdit && this.canvasData.gameMode === singleIcon.assetData.GameMode;
          break;
        case 1:
          const icon = new MultipointIcon(floorData[key], this);
          icon.allowEdit = this.allowEdit && this.canvasData.gameMode === icon.assetData.GameMode;
          break;
        case 2:
          const polygonIcon = new PolygonIcon(floorData[key], this);
          polygonIcon.allowEdit = this.allowEdit && this.canvasData.gameMode === polygonIcon.assetData.GameMode;
          break;
        case 3:
          if (floorData[key].Name === '水带') {
            const waterLine = new AxArrowConnector(floorData[key], this, false, true);
            waterLine.allowEdit = this.allowEdit && this.canvasData.gameMode === waterLine.assetData.GameMode;
          } else if (floorData[key].Name === '距离') {
            const distance = new AxArrowConnector(floorData[key], this, true, true);
            distance.allowEdit = this.allowEdit && this.canvasData.gameMode === distance.assetData.GameMode;
          } else if (floorData[key].Name === '普通墙' || floorData[key].Name === '承重墙') {
            const wall = new AxArrowConnector(floorData[key], this, false, false);
            wall.allowEdit = this.allowEdit && this.canvasData.gameMode === wall.assetData.GameMode;
          }
          break;
      }
    });
    // this.emit('backgroundScale', this.backgroundImage.scale.x);
  }
  /**
   * 创建节点图形
   */
  public createNodeShape(nodeData: any) {
    if (nodeData !== undefined && nodeData !== null) {
      Object.keys(nodeData).forEach((key) => {
        if (nodeData[key] === undefined || nodeData[key] === null) { return; }
        Object.keys(nodeData[key]).forEach((tempKey) => {
          switch (nodeData[key][tempKey].InteractiveMode) {
            case 0:
              const singleIcon = new AxImageShape(nodeData[key][tempKey], this);
              singleIcon.allowEdit = this.allowEdit && this.canvasData.gameMode === singleIcon.assetData.GameMode;
              break;
            case 1:
              const icon = new MultipointIcon(nodeData[key][tempKey], this);
              icon.allowEdit = this.allowEdit && this.canvasData.gameMode === icon.assetData.GameMode;
              break;
            case 2:
              const polygonIcon = new PolygonIcon(nodeData[key][tempKey], this);
              polygonIcon.allowEdit = this.allowEdit && this.canvasData.gameMode === polygonIcon.assetData.GameMode;
              break;
            case 3:
              const pipeline = new AxArrowConnector(nodeData[key][tempKey], this, false, true);
              pipeline.allowEdit = this.allowEdit && this.canvasData.gameMode === pipeline.assetData.GameMode;
              break;
          }
        });
      });
    }
  }

  /**
   * 创建确认绘制结束按钮
   */
  private createEnterPaintEndButton() {
    this.enterPaintEndButton.width = 60;
    this.enterPaintEndButton.height = 60;
    this.enterPaintEndButton.anchor.set(0.5);
    this.enterPaintEndButton.position = new PIXI.Point(0, 0);
    this.enterPaintEndButton.interactive = true;
    this.enterPaintEndButton.buttonMode = true;
    this.enterPaintEndButton
      .on('pointerdown', event => {
        event.stopPropagation();
        this.enterPaint();
      });
    this.backgroundImage.addChild(this.enterPaintEndButton);
    this.enterPaintEndButton.zIndex = this.backgroundImage.children.length;
    this.enterPaintEndButton.visible = false;
  }
  /**
   * 创建背景图
   */
  public createBackgroundImage() {
    this.backgroundImage = PIXI.Sprite.from('assets/images/noImg.png');
    this.backgroundImage.anchor.set(0.5);
    this.backgroundImage.interactive = true;
    this.backgroundImage.name = 'background';
    this.backgroundImage.sortableChildren = true;
    this.backgroundImage
      .on('pointerdown', event => {
        if (event.data.button !== 0) { return; }
        if (this.isCtrlKeyClicked === false) {
          switch (this.paintMode) {
            case PaintMode.endPaint:
              break;
            case PaintMode.singlePointIcon:
              // 整理数据
              const json = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos));
              const list = [];
              json.forEach(element => {
                const property = new PropertyInfo(element);
                list.push(property);
              });
              const assetData = {
                TemplateId: this.canvasData.selectTemplateData.id,
                CanConnect: this.canvasData.selectTemplateData.canConnect,
                Pipelines: new Array(),
                FloorId: this.canvasData.selectStorey.id,
                Angle: this.canvasData.selectTemplateData.angle,
                Color: this.canvasData.selectTemplateData.color,
                Enabled: this.canvasData.selectTemplateData.enabled,
                FillMode: this.canvasData.selectTemplateData.fillMode,
                FireElementId: this.canvasData.selectTemplateData.fireElementId,
                FixedSize: this.canvasData.selectTemplateData.fixedSize,
                Height: 32,
                Width: 32,
                Id: ObjectID.default.generate(),
                ImageUrl: this.canvasData.selectTemplateData.imageUrl,
                InteractiveMode: this.canvasData.selectTemplateData.interactiveMode,
                MultiPoint: null,
                Point: new PIXI.Point(this.previewImage.x, this.previewImage.y),
                Name: this.canvasData.selectTemplateData.name,
                PropertyInfos: list,
                Border: this.canvasData.selectTemplateData.border,
                DrawMode: this.canvasData.selectTemplateData.drawMode,
                Thickness: this.canvasData.selectTemplateData.thickness,
                IsFromBuilding: this.canvasData.selectTemplateData.isFromBuilding,
                GameMode: this.canvasData.gameMode,
                Tag: this.canvasData.selectTemplateData.tag
              };
              const singleIcon = new AxImageShape(assetData, this);
              this.emit('createIcon', singleIcon);
              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(point);

              if (this.paintPoints.length >= 2) {
                this.enterPaintEndButton.position = this.circleShadow.position;
                this.enterPaintEndButton.visible = true;
                this.enterPaintEndButton.zIndex = this.backgroundImage.children.length;
              }

              if (this.paintingIcon !== null) {
                this.backgroundImage.removeChild(this.paintingIcon);
              }
              const jsonObject = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos));
              const propertyList = [];
              jsonObject.forEach(element => {
                const property = new PropertyInfo(element);
                propertyList.push(property);
              });
              const assetData1 = {
                TemplateId: this.canvasData.selectTemplateData.id,
                FloorId: this.canvasData.selectStorey.id,
                Angle: this.canvasData.selectTemplateData.angle,
                Color: this.canvasData.selectTemplateData.color,
                Enabled: this.canvasData.selectTemplateData.enabled,
                FillMode: this.canvasData.selectTemplateData.fillMode,
                FireElementId: this.canvasData.selectTemplateData.fireElementId,
                FixedSize: this.canvasData.selectTemplateData.fixedSize,
                Height: 32,
                Width: 32,
                Id: ObjectID.default.generate(),
                ImageUrl: this.canvasData.selectTemplateData.imageUrl,
                InteractiveMode: this.canvasData.selectTemplateData.interactiveMode,
                MultiPoint: JSON.parse(JSON.stringify(this.paintPoints)),
                Point: new PIXI.Point(0, 0),
                Name: this.canvasData.selectTemplateData.name,
                PropertyInfos: propertyList,
                Border: this.canvasData.selectTemplateData.border,
                DrawMode: this.canvasData.selectTemplateData.drawMode,
                Thickness: this.canvasData.selectTemplateData.thickness,
                IsFromBuilding: this.canvasData.selectTemplateData.isFromBuilding,
                GameMode: this.canvasData.gameMode,
                Tag: this.canvasData.selectTemplateData.tag
              };
              this.paintingIcon = new MultipointIcon(assetData1, this);
              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(point);
              if (this.paintPoints.length === 1) {
                this.enterPaintEndButton.position = this.circleShadow.position;
              } else if (this.paintPoints.length >= 3) {
                this.enterPaintEndButton.visible = true;
                this.enterPaintEndButton.zIndex = this.backgroundImage.children.length;
              }
              this.paintPoints.forEach((value, index, array) => {
                if (index === 0) {
                  this.paintingLine.clear();
                  this.paintingLine.lineStyle(1, 0xffd900, 1);
                  this.paintingLine.moveTo(value.x, value.y);
                } else {
                  this.paintingLine.lineTo(value.x, value.y);
                }
              });

              // if (this.paintingIcon !== null) {
              //   this.backgroundImage.removeChild(this.paintingIcon);
              // }
              // 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 {
              this.previewLineSegment.visible = true;
              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(point);
              if (this.paintPoints.length < 2) {
                return;
              }
              if (this.paintingShape === null) {
                const jsonObject = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos));
                const propertyList = [];
                jsonObject.forEach(element => {
                  const property = new PropertyInfo(element);
                  propertyList.push(property);
                });
                const assetData2 = {
                  TemplateId: this.canvasData.selectTemplateData.id,
                  FloorId: this.canvasData.selectStorey.id,
                  Angle: this.canvasData.selectTemplateData.angle,
                  Color: this.canvasData.selectTemplateData.color,
                  Enabled: this.canvasData.selectTemplateData.enabled,
                  FillMode: this.canvasData.selectTemplateData.fillMode,
                  FireElementId: this.canvasData.selectTemplateData.fireElementId,
                  FixedSize: this.canvasData.selectTemplateData.fixedSize,
                  Height: 32,
                  Width: 32,
                  Id: ObjectID.default.generate(),
                  ImageUrl: this.canvasData.selectTemplateData.imageUrl,
                  InteractiveMode: this.canvasData.selectTemplateData.interactiveMode,
                  MultiPoint: JSON.parse(JSON.stringify(this.paintPoints)),
                  Point: new PIXI.Point(0, 0),
                  Name: this.canvasData.selectTemplateData.name,
                  PropertyInfos: propertyList,
                  Border: this.canvasData.selectTemplateData.border,
                  DrawMode: this.canvasData.selectTemplateData.drawMode,
                  Thickness: this.canvasData.selectTemplateData.thickness,
                  IsFromBuilding: this.canvasData.selectTemplateData.isFromBuilding,
                  GameMode: this.canvasData.gameMode,
                  Tag: this.canvasData.selectTemplateData.tag
                };
                if (this.canvasData.selectTemplateData.name === '距离') {
                  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);
                } 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;
          }
        }
        // else if (this.isCtrlKeyClicked === true) {
        //   this.rectToolGraphics.visible = true;
        //   this.initialScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
        //   this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
        // }
      })
      .on('pointerup', event => {

      })
      .on('pointerupoutside', event => {

      })
      .on('pointermove', event => {

      })
      .on('pointerover', (event) => {
        if (this.previewImage !== null
          && this.paintMode === PaintMode.singlePointIcon) {
          this.previewImage.visible = true;
        }
      })
      .on('pointerout', (event) => {
        if (this.previewImage !== null
          && this.paintMode === PaintMode.singlePointIcon) {
          this.previewImage.visible = false;
        }
      });
    this.camera2D.addChild(this.backgroundImage);
    this.createPreviewImage();
    this.createPreviewLineSegment();
    this.createCircleShadow();
    this.createEnterPaintEndButton();
    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 };
    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;
  }

  /**
   * 刷新背景图
   */
  public async refreshBackgroundImage(
    imageUrl: string = this.canvasData.selectStorey.imageUrl,
    imageAngle: number = this.canvasData.selectStorey.imageAngle,
    imageWidth: number = this.canvasData.selectStorey.imageWidth,
    imageHeight: number = this.canvasData.selectStorey.imageHeight,
  ): Promise<void> {
    if (imageAngle === undefined || imageAngle === null) {
      imageAngle = 0;
    }
    this.backgroundImage.scale.set(1);
    // this.backgroundImage.pivot.set(0);
    if (imageUrl === undefined || imageUrl === null || imageUrl === '') {
      this.backgroundImage.texture = this.backgroundTexture;
    } else {
      // this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl);
      if (imageWidth !== undefined
        && imageWidth !== null
        && imageWidth !== 0
        && imageHeight !== undefined
        && imageHeight !== null
        && imageHeight !== 0) {
        // console.log(imageWidth, imageHeight);
        // this.backgroundImage.width = imageWidth;
        // this.backgroundImage.height = imageHeight;
        this.backgroundImage.texture =
          await PIXI.Texture.fromURL(imageUrl + '?x-oss-process=image/resize,m_fixed,h_' + imageHeight + ',w_' + imageWidth); // 图片处理
      } else {
        // this.backgroundImage.width = this.backgroundImage.texture.width;
        // this.backgroundImage.height = this.backgroundImage.texture.height;
        this.backgroundImage.texture =
          await PIXI.Texture.fromURL(imageUrl); // 请求原图
      }
    }

    this.backgroundImage.angle = imageAngle;

    // if (imageWidth !== undefined
    //   && imageWidth !== null
    //   && imageWidth !== 0
    //   && imageHeight !== undefined
    //   && imageHeight !== null
    //   && imageHeight !== 0) {
    //   console.log(imageWidth, imageHeight);
    //   this.backgroundImage.width = imageWidth;
    //   this.backgroundImage.height = imageHeight;
    // } else {
    //   this.backgroundImage.width = this.backgroundImage.texture.width;
    //   this.backgroundImage.height = this.backgroundImage.texture.height;
    // }

    this.backgroundImage.x = this.backgroundImage.width / 2;
    this.backgroundImage.y = this.backgroundImage.height / 2;

    this.resetCamera2D();
  }
  /**
   * 刷新
   * @param imageUrl
   * @param imageAngle
   */
  public async refresh(): Promise<void> {
    await this.refreshBackgroundImage(this.canvasData.selectStorey.imageUrl, this.canvasData.selectStorey.imageAngle);
    // 清空所有图形
    this.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();
      // let child = this.backgroundImage.getChildByName(item);
      // this.backgroundImage.removeChild(child);
    });
    // 加载当前数据
    this.createFloorShape(this.canvasData.originaleveryStoreyData.data);
    // 创建处置预案图形
    this.createNodeShape(this.canvasData.selectPanelPoint.Data);
    this.createAxLegend();
    if (this.canvasData.gameMode == GameMode.Assignment) {
      this.setLegendVisible(false);
    }
    this.updateCamera2D();
  }
  /**
   * 加载无关联信息处置预案
   * @data 处置预案数据
  */
  public async loadNoRelevantInformationDisposalPlan(data: DisposalNodeData): Promise<void> {
    await this.refreshBackgroundImage(data.BackgroundImageUrl, data.BackgroundImageAngle);
    // 清空所有图形
    this.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.createNodeShape(this.canvasData.selectPanelPoint.Data);

    this.updateCamera2D();
  }
  /**
   * 创建安信图例
   */
  public createAxLegend() {
    const tempAssetData = {
      Id: '图例',
      Name: '图例',
      Color: '#066EED80',
      TemplateId: null,
      FloorId: this.canvasData.selectStorey.id,
      Angle: 0,
      Enabled: true,
      FillMode: null,
      FireElementId: null,
      FixedSize: null,
      Height: 32,
      Width: 32,
      ImageUrl: null,
      InteractiveMode: null,
      MultiPoint: null,
      Point: new PIXI.Point(0, 0),
      Border: null,
      DrawMode: null,
      Thickness: null,
      IsFromBuilding: null,
      GameMode: this.canvasData.gameMode,
      PropertyInfos: [
        {
          Tag: '',
          Order: 0,
          Enabled: true,
          Visible: true,
          Required: false,
          RuleName: '',
          RuleValue: '',
          PhysicalUnit: '',
          PropertyName: '列',
          PropertyType: 2,
          PropertyValue: '2',
        },
      ],
      Scale: 1,
      PivotX: 0,
      PivotY: 0,
    };
    const shapeMap: Map<string, Legend> = new Map<string, Legend>();
    let data = null;
    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 !== '图例') {
          shapeMap.set(this.canvasData.originaleveryStoreyData.data[item].Name, new Legend(
            this.canvasData.originaleveryStoreyData.data[item].Name,
            this.canvasData.originaleveryStoreyData.data[item].ImageUrl,
            1
          ));
        } else {
          data = this.canvasData.originaleveryStoreyData.data[item];
        }
      }
    }
    if (data === null) {
      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 {
      const axLegend = new AxLegend(data, this, shapeMap);
    }
  }
  // /**
  //  * 清空画布
  //  */
  // public destroyBackgroundImage(): void {
  //   this.app.stage.removeChild(this.backgroundImage);
  //   this.backgroundImage = null;
  // }
  /**
  // //  * 设置背景图缩放
  // //  * @param scale 缩放系数
  // //  */
  // public setBackgroundScale(scale: number): void {
  //   this.backgroundImage?.scale.set(scale);
  //   this.emit('backgroundScale', this.backgroundImage?.scale.x);
  // }
  // /**
  //  * 设置背景图角度
  //  * @param imageAngle 角度值
  //  */
  // public setBackgroundAngle(imageAngle: number) {
  //   this.backgroundImage.angle = imageAngle;
  // }
  /**
   * 创建预览单点图标
   */
  private createPreviewImage(): void {
    this.previewImage = new AxPreviewImageShape(this);
    this.previewImage.visible = false;
  }
  /**
   * 创建预览线段
   */
  private createPreviewLineSegment() {
    this.previewLineSegment.visible = false;
    this.backgroundImage.addChild(this.currentClickPoint);
    this.backgroundImage.addChild(this.previewLineSegment);

    this.backgroundImage.addChild(this.rectToolGraphics);
    this.rectToolGraphics.visible = false;
  }
  /**
   * 刷新预览线段
   * @param pointA 点A
   * @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.y, pointA.y);
    // this.previewLineSegment.lineTo(pointB.x, pointB.y);
    this.previewLineSegment.moveTo(ps.x, ps.y);
    this.previewLineSegment.lineTo(pe.x, pe.y);
  }
  /**
   * 创建半径图标影子
   * @param x 半径
   */
  private createCircleShadow(): void {
    this.circleShadow.visible = false;
    this.backgroundImage.addChild(this.circleShadow);
  }
  /**
   * 刷新预览点
   */
  private refreshPreviewPoint() {
    this.circleShadow.clear();
    this.circleShadow.beginFill(0x00ff00);
    this.circleShadow.drawCircle(0, 0, 5 / this.backgroundImage.scale.x);
    this.circleShadow.endFill();
  }
  /**
   * 开始绘制
   */
  public beginPaint() {
    this.deselectAll();
    this.setPaintMode(PaintMode.endPaint);
    this.setPaintMode(this.canvasData.selectTemplateData.interactiveMode);
  }
  /**
   * 初始化管线数据
   */
  public initPipelineData(): void {
    this.paintPoints = [];
    this.paintingShape = null;
  }
  public beginPaintingArrows(): void {
    this.paintMode = PaintMode.Arrows;
  }
  /**
   * 设置绘制状态
   * @param mode 状态
   */
  public setPaintMode(mode: PaintMode) {
    if (this.paintMode === mode) {
      return;
    }
    this.paintMode = mode;
    switch (this.paintMode) {
      case PaintMode.singlePointIcon:
        this.previewImage.visible = true;
        this.previewImage.setImageUrl(this.canvasData.selectTemplateData.imageUrl);
        break;
      case PaintMode.lineIcon:
        this.circleShadow.visible = false;
        this.previewLineSegment.visible = false;
        this.paintPoints.splice(0, this.paintPoints.length);
        if (this.paintingIcon !== null) {
          this.backgroundImage.removeChild(this.paintingIcon);
        }
        this.previewImage.setImageUrl(this.canvasData.selectTemplateData.imageUrl);
        this.circleShadow.visible = true;
        break;
      case PaintMode.polygonIcon:
        this.circleShadow.visible = false;
        this.previewLineSegment.visible = false;
        this.paintingIcon = null;
        this.paintPoints.splice(0, this.paintPoints.length);
        this.paintingLine.clear();
        this.circleShadow.visible = true;
        break;
      case PaintMode.Pipeline:

        break;
      case PaintMode.endPaint:
        if (this.previewImage !== null) {
          this.previewImage.visible = false;
        }
        // 重置组件状态
        if (this.paintingIcon !== undefined
          && this.paintingIcon !== null) {
          this.backgroundImage.removeChild(this.paintingIcon);
        }
        if (this.paintingShape !== null) {
          this.backgroundImage.removeChild(this.paintingShape);
          this.paintingShape = null;
        }
        this.enterPaintEndButton.visible = false;
        this.paintingLine.clear();
        this.resetData();
        break;
      default:
        break;
    }
  }
  /**
   * 获取绘制状态
   */
  public getPaintMode(): PaintMode {
    return this.paintMode;
  }
  /**
   * 重置
   */
  public resetData() {
    this.initPipelineData();
    //
    this.circleShadow.visible = false;
    this.previewLineSegment.visible = false;
  }
  /**
   * 确认绘制
   */
  private enterPaint(): void {
    this.previewLineSegment.visible = false;
    this.enterPaintEndButton.visible = false;
    switch (this.paintMode) {
      case PaintMode.singlePointIcon:

        break;
      case PaintMode.lineIcon:
        if (this.paintPoints.length >= 2) {
          this.emit('createIcon', this.paintingIcon);
          this.paintingIcon = null;
        }
        break;
      case PaintMode.polygonIcon:
        this.paintingLine.clear();
        if (this.paintPoints.length >= 3) {
          const jsonList = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos));
          const propertyList = [];
          jsonList.forEach(element => {
            const property = new PropertyInfo(element);
            propertyList.push(property);
          });
          const assetData = {
            TemplateId: this.canvasData.selectTemplateData.id,
            FloorId: this.canvasData.selectStorey.id,
            Angle: this.canvasData.selectTemplateData.angle,
            Color: this.canvasData.selectTemplateData.color,
            Enabled: this.canvasData.selectTemplateData.enabled,
            FillMode: this.canvasData.selectTemplateData.fillMode,
            FireElementId: this.canvasData.selectTemplateData.fireElementId,
            FixedSize: this.canvasData.selectTemplateData.fixedSize,
            Height: 32,
            Width: 32,
            Id: ObjectID.default.generate(),
            ImageUrl: this.canvasData.selectTemplateData.imageUrl,
            InteractiveMode: this.canvasData.selectTemplateData.interactiveMode,
            MultiPoint: JSON.parse(JSON.stringify(this.paintPoints)),
            Point: new PIXI.Point(0, 0),
            Name: this.canvasData.selectTemplateData.name,
            PropertyInfos: propertyList,
            Border: this.canvasData.selectTemplateData.border,
            DrawMode: this.canvasData.selectTemplateData.drawMode,
            Thickness: this.canvasData.selectTemplateData.thickness,
            IsFromBuilding: this.canvasData.selectTemplateData.isFromBuilding,
            GameMode: this.canvasData.gameMode
          };
          const polygonIcon = new PolygonIcon(assetData, this);
          this.emit('createIcon', polygonIcon);
        }
        break;
      case PaintMode.Pipeline:
        this.emit('createIcon', this.paintingShape);
        this.paintingShape = null;
        break;
    }
    this.paintPoints.splice(0, this.paintPoints.length);
  }
  /**
   * 复制
   */
  public copy(): void {
    this.copyData = [];
    this.selection.all().forEach(item => {
      const newData = JSON.parse(JSON.stringify(item.assetData));
      this.copyData.push(newData);
    });
  }
  /**
   * 粘贴
   */
  public paste(companyId: string, buildingId: string, floorId: string): void {
    const ids: string[] = [];
    if (this.copyData.length > 0) {
      this.copyData.forEach(item => {
        item.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5);
        const newData = JSON.parse(JSON.stringify(item));
        newData.Id = ObjectID.default.generate(),
          newData.CompanyId = companyId;
        newData.BuildingId = buildingId;
        newData.FloorId = floorId;
        newData.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5);
        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);
              this.emit('createIcon', wall);
            } else if (item.Name === '普通墙' || item.Name === '承重墙') {
              const wall = new AxArrowConnector(newData, this, false, false);
              this.emit('createIcon', wall);
            }
            break;
        }
        ids.push(newData.Id);
      });
      this.setHighlight(ids);
    }
  }
  //////////////////////////////////////////////////////////////////////// 通用/////////////////////////////////////////////////////////////////////////////
  /**
   *
   * @param id 图标ID
   * @param b 显示/隐藏
   */
  public setIconVisible(ids: string[], b: boolean) {
    ids.forEach(item => {
      this.backgroundImage.getChildByName(item).visible = b;
    });
  }
  //////////////////////////////////////////////////////////////////////// 采集平台加载逻辑///////////////////////////////////////////////////////////////////////

  //////////////////////////////////////////////////////////////////////// 编制平台加载逻辑///////////////////////////////////////////////////////////////////////

  //////////////////////////////////////////////////////////////////////// 考试系统加载逻辑///////////////////////////////////////////////////////////////////////
  /**
   * 考生点击楼层
   */
  public async onExamineeClickFloor() {
    await this.refreshBackgroundImage(this.canvasData.selectStorey.imageUrl, this.canvasData.selectStorey.imageAngle);
    // 清空所有图形
    this.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.updateCamera2D();
  }

  /**
   * 考官点击楼层-阅卷
   */
  public async onExaminerClickFloor() {
    await this.refreshBackgroundImage(this.canvasData.selectStorey.imageUrl, this.canvasData.selectStorey.imageAngle);
    // 清空所有图形
    this.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.updateCamera2D();
  }
  /**
   * 考官点击楼层-创建试卷
   */
  public async onExaminerClickFloor_CreateTestpaper() {
    await this.refreshBackgroundImage(this.canvasData.selectStorey.imageUrl, this.canvasData.selectStorey.imageAngle);
    // 清空所有图形
    this.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);

    this.updateCamera2D();
  }
  //////////////////////////////////////////////////////////////////// 选择逻辑
  /**
   * 清空选择，选择单个形状
   * @param shape 形状
   */
  public selectSingle(shape: AxShape) {
    if (this.selection.first() !== null) {
      this.selection.all().forEach(item => {
        this.clearSelectEffect(item);
      });
      this.selection.clear();
    }
    this.selection.add(shape);
    this.setSelectEffect(shape);
    AxMessageSystem.send(EVENT_SELECTION_CHANGED);
  }
  /**
   * 选择
   * @param shape 形状
   */
  public select(shape: AxShape) {
    if (this.selection.first() !== null
      && !this.isCtrlKeyClicked
      && !this.selection.has(shape)) {
      this.selection.all().forEach(item => {
        this.clearSelectEffect(item);
      });
      this.selection.clear();
    }
    this.selection.add(shape);
    this.setSelectEffect(shape);
    AxMessageSystem.send(EVENT_SELECTION_CHANGED);
  }
  /**
   * 选择集合中的形状
   * @param shape 形状集合
   */
  public selectAll(shape: AxShape[]) {
    if (shape.length > 0) {
      this.selection.addArray(shape);
      this.selection.all().forEach(item => {
        this.setSelectEffect(item);
      });
      AxMessageSystem.send(EVENT_SELECTION_CHANGED);
    }
  }
  /**
   * 先清空再选择全部
   * @param shape 形状集合
   */
  public selectAllWithClear(shape: AxShape[]) {
    if (this.selection.first() !== null) {
      this.selection.all().forEach(item => {
        this.clearSelectEffect(item);
      });
      this.selection.clear();
    }
    this.selection.addArray(shape);
    this.selection.all().forEach(item => {
      this.setSelectEffect(item);
    });
    AxMessageSystem.send(EVENT_SELECTION_CHANGED);
  }
  /**
   * 选择集合中所有id的形状
   * @param ids 形状id集合
   */
  public setHighlight(ids: string[]): void {
    const shapes: AxShape[] = [];
    // 重新选择
    ids.forEach(item => {
      const obj = this.backgroundImage.getChildByName(item);
      shapes.push(obj as AxShape);
    });
    this.selectAllWithClear(shapes);
  }
  /**
   * 取消所有选择
   */
  public deselectAll() {
    if (this.selection.first() !== null) {
      this.selection.all().forEach(item => {
        this.clearSelectEffect(item);
      });
      this.selection.clear();
      AxMessageSystem.send(EVENT_SELECTION_CHANGED);
    }
  }
  /**
   * 设置选中效果
   * @param shape 形状
   */
  public setSelectEffect(shape: AxShape) {
    shape.hideBorder();
    shape.setPointVisiable(false);
    shape.showBorder();
    shape.drawBorder(1 / this.backgroundImage.scale.x);
    shape.setPointVisiable(this.allowEdit);
  }
  /**
   * 设置形状选中效果
   * @param shape 形状
   */
  public clearSelectEffect(shape: AxShape) {
    shape.hideBorder();
    shape.setPointVisiable(false);
  }
  //////////////////////////////////////////////////////////////////////////////////////////////// 图例
  /**
   * 设置图例显示隐藏
   * @param b true 显示，false隐藏
   */
  public setLegendVisible(b: boolean): void {
    const legend = this.backgroundImage.getChildByName('图例') as AxLegend;
    legend.interactive = b;
    legend.visible = b;
  }
}