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

import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, Input } 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';


@Component({
  selector: 'app-working-area',
  templateUrl: './working-area.component.html',
  styleUrls: ['./working-area.component.scss']
})
/**
 * 工作区
 */
export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterViewInit {

  constructor(private eventManager: EventManager, public canvasData: CanvasShareDataService) {
    super();
  }

  @ViewChild('content')
  content: ElementRef;
  /**
   * 父组件
   */
  @Input() init: any;
  /**
   * pixijs 程序
   */
  public app: PIXI.Application;
  /**
   * 资源加载器
   */
  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 readonly 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 animator;
  public animation;
  public animationIcon;
  public animationTime;
  /**
   * 网格
   */
  public grid: AxGrid = null;
  // 是否按下Ctrl键
  isCtrlKeyClicked = false;
  isMove = false;
  /**
   * 本软件版本号由四部分组成：<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如：1.0.0.20210105_beta
   * Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，一般而言，该版本软件的Bug较多，需要继续修改。
   * Beta版: 该版本相对于α版已有了很大的改进，消除了严重的错误，但还是存在着一些缺陷，需要经过多次测试来进一步消除，此版本主要的修改对像是软件的UI。
   * RC版: 该版本已经相当成熟了，基本上不存在导致错误的BUG，与即将发行的正式版相差无几。
   * Release版: 该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号®。
   */
  public VERSION = '1.0.13.20210126_beta';
  /**
   * 数据初始化
   */
  ngOnInit(): void {
    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();
      }
    });
  }

  public setMulitSelect(b: boolean) {
    if (b) {
      this.isCtrlKeyClicked = true;
    } else {
      this.isCtrlKeyClicked = false;
      this.rectToolGraphics.visible = false;
      this.rectToolGraphics.clear();
    }
  }
  /**
   * 删除选中的图标
   */
  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(CanvasAction.selectionChanged);
    }
  }
  /**
   * 打招呼
   */
  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 鼠标滑动事件
   */
  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 移动到选中车辆到屏幕中心点
   */
  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);
    }
  }
  /**
   * 创建画布
   */
  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.grid = new AxGrid(this.app.view.width, null, { color: 0xffffff }, true, true);
    // this.grid.x = (this.app.view.width / 2) - (this.grid.gridWidth / 2);
    // this.grid.y = (this.app.view.height / 2) - (this.grid.gridWidth / 2);
    // this.grid.pivot.set(0.5);
    this.grid.x = this.app.stage.x;
    this.grid.y = this.app.stage.y;
    this.app.stage.addChild(this.grid);
    this.grid.drawGrid();
    this.grid.onMousemove = (evt, gridCoord) => {

    };

    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();
      }
      /**
       * 显示框选
       */
      if (this.rectToolGraphics.visible === true) {

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

        this.rectToolGraphics.clear();
        this.rectToolGraphics.lineStyle(2, 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.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) { // 处置预案
        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);
      }
      this.emit('canvasDataChanged');
      this.canvasData.isChange = true;
    });
  }
  /**
   * 重置画布
   */
  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);
    // console.log(icon);
    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.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.isMove && this.isCtrlKeyClicked === false) {
          event.currentTarget.data = event.data;
          this.isMove = true;
          event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent);
          event.currentTarget.dragPoint.x -= event.currentTarget.x;
          event.currentTarget.dragPoint.y -= event.currentTarget.y;
          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);
              // this.emit('backgroundScale', this.backgroundImage.scale.x);
              break;
            case PaintMode.lineIcon:
              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));

              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
              };
              // const assetData1 = {
              //   ImageUrl: this.canvasData.selectTemplateData.imageUrl,
              //   Point: new PIXI.Point(0, 0),
              //   Width: 32,
              //   Height: 32,
              //   MultiPoint: this.paintPoints,
              //   Name: this.canvasData.selectTemplateData.name
              // };
              this.paintingIcon = new MultipointIcon(assetData1, this);
              // this.paintingIcon = new MultipointIcon(this.previewSinglePointIcon.texture, new PIXI.Point(0, 0), this.paintPoints, this,
              //   this.canvasData.selectTemplateData.name);
              // this.emit('backgroundScale', this.backgroundImage.scale.x);
              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));
              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));
                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.isMove && this.isCtrlKeyClicked === true) {
          this.rectToolGraphics.visible = true;
          this.isMove = true;
          this.initialScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
          this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
        }
      })
      .on('pointerup', event => {
        this.isMove = false;
        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) {
          this.isMove = false;
          event.currentTarget.data = null;
        }
      })
      .on('pointermove', event => {
        if (this.isMove && 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.isMove && 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) {
          this.previewImage.visible = true;
        }
      })
      .on('pointerout', (event) => {
        if (this.previewImage !== null
        && this.paintMode === PaintMode.singlePointIcon) {
          this.previewImage.visible = false;
        }
      });
    this.app.stage.addChild(this.backgroundImage);
    this.createPreviewImage();
    this.createPreviewLineSegment();
    this.createCircleShadow();
    this.createEnterPaintEndButton();
    this.backgroundImage.addChild(this.paintingLine);

  }
  public isOverlap(rect1, rect2): boolean {
    const l1 = { x: rect1.x, y: rect1.y };
    const r1 = { x: rect1.x + rect1.width, y: rect1.y + rect1.height };
    const l2 = { x: rect2.x, y: rect2.y };
    const r2 = { x: rect2.x + rect2.width, y: rect2.y + rect2.height };
    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, imageAngle: number): Promise<void> {
    if (imageAngle === undefined || imageAngle === null) {
      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.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;
    const scale = wScale < hScale ? wScale : hScale;
    // 设置图片缩放
    this.backgroundImage.scale.set(scale);
    // this.backgroundImage.visible = true;
    this.backgroundImage.children.forEach((item) => {
      if (item instanceof AxShape) {
        item.refresh();
      }
    });
  }
  /**
   * 刷新
   * @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();
  }
  /**
   * 加载无关联信息处置预案
   * @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);
  }
  /**
   * 创建安信图例
   */
  public createAxLegend() {
    const tempAssetData = {
      Id: '图例',
      Name: '图例',
      Color: '#066EED80',
      TemplateId: null,
      FloorId: this.canvasData.selectStorey.id,
      Angle: 0,
      Enabled: null,
      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) {
    this.previewLineSegment.clear();
    this.previewLineSegment.lineStyle(1 / this.backgroundImage.scale.x, 0x00ff00, 1);
    this.previewLineSegment.moveTo(pointA.x, pointA.y);
    this.previewLineSegment.lineTo(pointB.x, pointB.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() {
    console.log(this.canvasData.selectTemplateData);
    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;
    console.log(this.paintMode);
    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);
  }

  /**
   * 考官点击楼层-阅卷
   */
  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);
  }
  /**
   * 考官点击楼层-创建试卷
   */
  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);
  }
  //////////////////////////////////////////////////////////////////// 选择逻辑
  /**
   * 清空选择，选择单个形状
   * @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(CanvasAction.selectionChanged);
  }
  /**
   * 选择
   * @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(CanvasAction.selectionChanged);
  }
  /**
   * 选择集合中的形状
   * @param shape 形状集合
   */
  public selectAll(shape: AxShape[]) {
    this.selection.addArray(shape);
    this.selection.all().forEach(item => {
        this.setSelectEffect(item);
    });
    AxMessageSystem.send(CanvasAction.selectionChanged);
  }
  /**
   * 先清空再选择全部
   * @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(CanvasAction.selectionChanged);
  }
  /**
   * 选择集合中所有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(CanvasAction.selectionChanged);
    }
  }
  /**
   * 设置选中效果
   * @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.visible = b;
  }
}
enum CanvasAction {
  selectionChanged = 'selectionChanged',
  copyDataChanged = 'copyDataChanged'
}