examSystem-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';


@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 selection: Selection = new Selection(this);
  /**
   * 当前鼠标的点
   */
  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');
  /**
   * 框选工具图形
   */
  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 carAreas: PolygonIcon[];
  // 车辆数据
  public carData: Map<string, any> = new Map<string, any>();
  // 当前选择的车辆id
  public selectCar: any = null;
  /**
   * 数据初始化
   */
  ngOnInit(): void {
    this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => {
      if (event.keyCode === 17) {
        this.selection.isMultiselection = true;
      }
    });
    this.eventManager.addGlobalEventListener('window', 'keyup', (event: any) => {
      if (event.keyCode === 17) {
        this.selection.isMultiselection = false;
        this.rectToolGraphics.visible = false;
        this.rectToolGraphics.clear();
      }
      // 按Del键删除选中的图标
      if (event.keyCode === 46) {
        this.selection.objects.forEach(item => {
          if (this.allowEdit
            && this.canvasData.gameMode === item.assetData.GameMode) {
            this.backgroundImage.removeChild(this.backgroundImage.getChildByName(item.assetData.Id));
          }
        });
        this.selection.deselectAll();
        this.emit('deleteIcon');
      }
    });
  }
  /**
   * 页面初始化
   */
  ngAfterViewInit(): void {
    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.emit('backgroundScale', 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.emit('backgroundScale', 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.emit('backgroundScale', this.backgroundImage.scale.x);
  }
  /**
   *
   * @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
    )) {
      console.log(this.backgroundImage.position);
      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: 0xE9FAFF
    });
    this.content.nativeElement.appendChild(this.app.view);
    this.animator = new Charm(PIXI);

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

      if (this.circleShadow !== null && this.backgroundImage !== 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('select', shape => {
      if (shape instanceof AxShape) {
        shape.showBorder();
        shape.setPointVisiable(this.allowEdit);
      }
    });
    /**
     * 取消选中事件
     */
    this.on('deselect', shape => {
      if (shape instanceof AxShape) {
        shape.hideBorder();
        shape.setPointVisiable(false);
      }
    });
    /**
     * 根据背景缩放事件
     */
    this.on('backgroundScale', scale => {
      const data = 1 / scale;
      this.backgroundImage?.children.forEach(item => {
        if (item instanceof AxImageShape) {
            item.setItemScale(data);
            item.drawBorder(data);
        } else if (item instanceof MultipointIcon) {
          item.setItemScale(data);
          item.drawBorder(data);
        } else if (item instanceof PolygonIcon) {
          item.setItemScale(data);
          item.drawBorder(data);
        } else if (item instanceof AxPreviewImageShape) {
          item.scale.set(data);
        } else if (item instanceof AxArrowConnector) {
          item.setItemScale(data);
          item.drawBorder(data);
        }
      });
    });
    /**
     * 创建图标事件（数据处理）
     */
    this.on('createIcon', obj => {
      if (obj.assetData.GameMode === GameMode.BasicInformation) { // 基本信息
        // 添加楼层数据
        this.canvasData.originaleveryStoreyData.data[obj.assetData.Id] = obj.assetData;
        // 添加建筑数据
        this.canvasData.originalcompanyBuildingData.data[obj.assetData.Id] = obj.assetData;
      } else if (obj.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[obj.assetData.Id] = obj.assetData;
      } else if (obj.assetData.GameMode === GameMode.Examinee) { // 考生考试      
        if (obj.assetData.Tag === 1) {
          this.canvasData.examOriginaleveryStoreyData.data[obj.assetData.Id] = obj.assetData;
        } else {
          if (this.canvasData.selectPanelPoint.Data === undefined
            || this.canvasData.selectPanelPoint.Data === null) {
            this.canvasData.selectPanelPoint.Data = new FloorNodeData();
          }
          this.canvasData.selectPanelPoint.Data.Stock[obj.assetData.Id] = obj.assetData;
        }
      }
      this.canvasData.isChange = true;
    });
    /**
     * 删除图标事件(数据处理)
     */
    this.on('deleteIcon', obj => {
      if (obj.assetData.GameMode === GameMode.BasicInformation) { // 基本信息
        // 删除楼层数据
        delete this.canvasData.originaleveryStoreyData.data[obj.assetData.Id];
        // 删除建筑数据
        delete this.canvasData.originalcompanyBuildingData.data[obj.assetData.Id];
      } else if (obj.assetData.GameMode === GameMode.Assignment) { // 处置预案
        delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[obj.assetData.Id];
        delete this.canvasData.selectPanelPoint.Data.Increment[obj.assetData.Id];
        delete this.canvasData.selectPanelPoint.Data.Stock[obj.assetData.Id];
      } else if (obj.assetData.GameMode === GameMode.Examinee) { // 考生考试      
        if (obj.assetData.Tag === 1) {
          // 删除楼层数据
          delete this.canvasData.examOriginaleveryStoreyData.data[obj.assetData.Id];
        } else {
          delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[obj.assetData.Id];
          delete this.canvasData.selectPanelPoint.Data.Increment[obj.assetData.Id];
          delete this.canvasData.selectPanelPoint.Data.Stock[obj.assetData.Id];
        }
        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);
      }
    });
  }
  /**
   * 根据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();
    }
  }
  /**
   *
   * @param value 缩放倍数
   */
  public setIconScale(value: number): void {
    this.backgroundImage.children.forEach(item => {
      if (item instanceof AxImageShape) {
        console.log(item.image.scale);
        item.image.scale.set(value);
      } else if (item instanceof MultipointIcon) {

      } else if (item instanceof PolygonIcon) {

      }
    });
  }
  /**
   * 设置高亮
   */
  public setHighlight(ids: string[]): void {
    this.selection.deselectAll();
    ids.forEach(item => {
      let obj = this.backgroundImage.getChildByName(item);
      if (obj === null) {
        obj = this.app.stage.getChildByName(item);
      }
      this.selection.select(obj);
    });
  }
  /**
   * 创建背景图
   */
  public createBackground(imageUrl:string,imageAngle:number) {
    if (this.backgroundImage !== null) {
      this.backgroundImage.destroy();
      this.backgroundImage = null;
    } 
    this.createBackgroundImage()
    this.refreshBackgroundImage(imageUrl,imageAngle);
  }
  /**
   * 创建楼层图形
   */
  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.moveable = this.allowEdit && this.canvasData.gameMode === singleIcon.assetData.GameMode;
          break;
        case 1:
          const icon = new MultipointIcon(floorData[key], this);
          break;
        case 2:
          const polygonIcon = new PolygonIcon(floorData[key], this);
          break;
        case 3:
          if (floorData[key].Name === '水带') {
            const distance = new AxArrowConnector(floorData[key], this, false, true);
          } else if(floorData[key].Name === '距离'){
            const distance = new AxArrowConnector(floorData[key], this, true, true);
          }else if(floorData[key].Name === '普通墙' || floorData[key].Name === '承重墙'){
            const wall = new AxArrowConnector(floorData[key], this, false, false);
          }
          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.moveable = this.allowEdit && this.canvasData.gameMode === singleIcon.assetData.GameMode;
              break;
            case 1:
                const icon = new MultipointIcon(nodeData[key][tempKey], this);
                break;
            case 2:
              const polygonIcon = new PolygonIcon(nodeData[key][tempKey], this);
              break;
            case 3:
              const pipeline = new AxArrowConnector(nodeData[key][tempKey], this,false,true);
              break;
        }
        });
      });
    }
    this.emit('backgroundScale', this.backgroundImage.scale.x);
  }
  /**
   * 创建确认绘制结束按钮
   */
  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('mousedown', 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('mousedown', event => {
        if (!event.currentTarget.dragging && this.selection.isMultiselection === false) {
          this.selection.deselectAll();
          event.currentTarget.data = event.data;
          event.currentTarget.dragging = 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:
              console.log(this.backgroundImage.toLocal(this.mousePosition));
              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;
              }

              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.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.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 {
                  this.paintingShape.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints));
                  this.paintingShape.redraw();
                }
              }
              this.emit('backgroundScale', this.backgroundImage.scale.x);
              break;
          }
        } else if (!event.currentTarget.dragging && this.selection.isMultiselection === true) {
          this.rectToolGraphics.visible = true;
          event.currentTarget.dragging = true;
          this.initialScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
          this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
        }
      })
      .on('mouseup', event => {
        if (event.currentTarget.dragging) {
          event.currentTarget.dragging = false;
          event.currentTarget.data = null;
        }
        if (this.rectToolGraphics.visible === true) {
          this.backgroundImage.children.forEach(item => {
            if ( item instanceof AxImageShape
              || item instanceof MultipointIcon
              || item instanceof PolygonIcon
              || item instanceof AxArrowConnector) {
              // 判断2个矩形是否相交
              const rect1 = this.rectToolGraphics.getBounds();
              const rect2 = item.getBounds();
              if (this.isOverlap(rect1, rect2)) {
                this.selection.select(item);       
              }
            }
          });
          this.rectToolGraphics.clear();
          this.rectToolGraphics.visible = false;
        }
      })
      .on('mouseupoutside', event => {
        if (event.currentTarget.dragging) {
          event.currentTarget.dragging = false;
          event.currentTarget.data = null;
        }
      })
      .on('mousemove', event => {
        if (event.currentTarget.dragging && this.selection.isMultiselection === 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 (event.currentTarget.dragging && this.selection.isMultiselection === true) {
          if (this.rectToolGraphics.visible === true) {
            this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
          }
        }
      })
      .on('rightclick', event => {
        event.stopPropagation();
        this.selection.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 = this.canvasData.selectStorey.imageUrl,imageAngle:number = this.canvasData.selectStorey.imageAngle): Promise<void> {
    if (!imageUrl) {
      this.backgroundImage.visible = false;
    } else {
      this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl);
      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.angle = imageAngle;
      this.backgroundImage.visible = true;
    }
  }
  /**
   * 清空画布
   */
  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 {
    // if (this.previewSinglePointIcon === null) {
    //   this.previewSinglePointIcon = PIXI.Sprite.from(this.canvasData.selectTemplateData.imageUrl);
    //   this.previewSinglePointIcon.width = this.canvasData.selectTemplateData.width;
    //   this.previewSinglePointIcon.height = this.canvasData.selectTemplateData.height;
    //   this.previewSinglePointIcon.anchor.set(0.5);
    //   this.previewSinglePointIcon.interactive = false;
    //   this.backgroundImage.addChild(this.previewSinglePointIcon);
    //   this.previewSinglePointIcon.scale.set(1 / this.backgroundImage.scale.x);
    // }
    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.beginFill(0xFFCC5A);
    // this.circleShadow.drawCircle(0, 0, 10);
    // this.circleShadow.endFill();
    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();
  }
  showConnectionPoint(b: boolean) {
    this.backgroundImage?.children.forEach(item => {
        if (item instanceof AxImageShape) {
          if (item.assetData.CanConnect) {
            item.showConnectionPoint(b);
         }
      }
    });
  }
  /**
   * 开始绘制
   */
  public beginPaint() {
    console.log(this.canvasData.selectTemplateData);
    this.selection.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:
        if (this.canvasData.selectTemplateData.name==='水带') {
          this.showConnectionPoint(true);
        } else {
          
        }
        break;
      case PaintMode.endPaint:
        this.showConnectionPoint(false);
        if (this.previewImage !== null) {
          this.previewImage.visible = false;
        }
        // 重置组件状态
        if ( this.paintingIcon !== undefined
          && this.paintingIcon !== null) {
          this.backgroundImage.removeChild(this.paintingIcon);
        }

        // if (this.paintingShape !== undefined
        //   && this.paintingShape !== null) {
        //   this.backgroundImage.removeChild(this.paintingShape);
        // }
        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:
        if (this.canvasData.selectTemplateData.name !== '水带') {
          this.emit('createIcon', this.paintingShape);
          this.paintingShape = null;
        }
        break;
    }
    this.paintPoints.splice(0, this.paintPoints.length);
    this.emit('backgroundScale', this.backgroundImage.scale.x);
  }
  /**
   * 复制
   */
  public copy(): void {
    this.copyData = [];
    this.selection.objects.forEach(item => {
      const newData = JSON.parse(JSON.stringify(item.assetData));
      this.copyData.push(newData);
    });
  }
  /**
   * 粘贴
   */
  public paste(companyId: string, buildingId: string, floorId: string): void {
    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);
      // if (newData.IsFromBuilding) {
      //   this.canvasData.originalcompanyBuildingData.data[newData.Id] = newData;
      // } else {
      this.canvasData.originaleveryStoreyData.data[newData.Id] = newData;
      // }
      switch (item.InteractiveMode) {
        case PaintMode.singlePointIcon:
          const singleIcon = new AxImageShape(newData, this);
          break;
        case PaintMode.lineIcon:
          const lineIcon = new MultipointIcon(newData, this);
          break;
        case PaintMode.polygonIcon:
          const polygonIcon = new PolygonIcon(newData, this);
          break;
        case PaintMode.Pipeline:
          if (item.Name === '距离') {
            const wall = new AxArrowConnector(newData, this,true,true);
          } else if (item.Name === '普通墙' || item.Name === '承重墙') {
            const wall = new AxArrowConnector(newData, this,false,false);
          }
          break;
      }
      this.selection.select(this.backgroundImage.getChildByName(newData.Id));
    });
    this.emit('backgroundScale', this.backgroundImage.scale.x);
  }
  ////////////////////////////////////////////////////////////////////////通用/////////////////////////////////////////////////////////////////////////////
  /**
   *
   * @param id 图标ID
   * @param b 显示/隐藏
   */
  public setIconVisible(ids: string[], b: boolean) {
    ids.forEach(item => {
      this.backgroundImage.getChildByName(item).visible = b;
    });
  }
  ////////////////////////////////////////////////////////////////////////采集平台加载逻辑///////////////////////////////////////////////////////////////////////
  public onBasicInformationClickFloor() {
    
  }

  ////////////////////////////////////////////////////////////////////////编制平台加载逻辑///////////////////////////////////////////////////////////////////////
  public onClickAssignmentFloor() {
    
  }

  ////////////////////////////////////////////////////////////////////////考试系统加载逻辑///////////////////////////////////////////////////////////////////////
    /**
   * 处理考生隐藏数据
   */
  public processinghiddenData() {
    for (let key in this.canvasData.originaleveryStoreyData.data){
      if (this.canvasData.hiddenBasicInfoFacilities.indexOf(key)!==-1) {
        delete this.canvasData.originaleveryStoreyData.data[key];
      }
    }
  }

  /**
   * 考生点击楼层
   */
  public onExamineeClickFloor() {
    // // 创建背景图
    // this.createBackground(this.canvasData.selectStorey.imageUrl, this.canvasData.selectStorey.imageAngle);
    // // 创建楼层图形
    // this.createFloorShape(this.canvasData.examOriginaleveryStoreyData.data);
    // // 处理共享数据中考官隐藏的数据
    // this.processinghiddenData();
    // // 建楼层图形
    // this.createFloorShape(this.canvasData.originaleveryStoreyData.data);
    // // 创建处置预案图形
    // this.createNodeShape(this.canvasData.selectPanelPoint.Data);
    // // 隐藏基本信息图形
    // this.setNameVisible(false, 0);
    // // 隐藏想定作业图形
    // this.setNameVisible(false, 1);
    // console.log("考生加载................................")
    // 创建背景图
    this.createBackground(this.canvasData.selectStorey.imageUrl, this.canvasData.selectStorey.imageAngle);
    // 创建楼层图形
    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 onExaminerClickFloor() {
    // 创建背景图
    this.createBackground(this.canvasData.selectStorey.imageUrl, this.canvasData.selectStorey.imageAngle);
    // 创建楼层图形
    this.createFloorShape(this.canvasData.examOriginaleveryStoreyData.data);
    // 创建楼层图形
    this.createFloorShape(this.canvasData.originaleveryStoreyData.data);
    // 创建处置预案图形
    this.createNodeShape(this.canvasData.selectPanelPoint.Data);
    // 隐藏图标
    this.setIconVisible(this.canvasData.hiddenBasicInfoFacilities, false);
  }
}

/**
 * 选择器
 */
export class Selection {
  constructor(private workingArea: WorkingAreaComponent) {}
  public objects: any[] = [];
  public isMultiselection = false;
  /**
   * 返回选择器中是否包含对象
   * @param obj 对象
   */
  public contains(obj: any): boolean {
    return this.objects.includes(obj);
  }
  /**
   * 选定对象
   * @param obj 对象
   */
  public select(obj: any) {
    if (!this.contains(obj)) {
      this.workingArea.emit('select', obj);
      this.objects.push(obj);
    }
  }
  /**
   * 取消选定对象
   * @param obj 对象
   */
  public deselect(obj: any) {
    if (this.contains(obj)) {
      this.workingArea.emit('deselect', obj);
      const idx = this.objects.findIndex(x => x === obj);
      this.objects.splice(idx, 1);
    }
  }
  /**
   * 选定或取消选定对象
   * @param obj 对象
   */
  public selectOrDeselect(obj: any) {
    if (this.contains(obj)) {
      this.deselect(obj);
    } else {
      this.select(obj);
    }
  }
  /**
   * 取消选定所有已选定对象
   */
  public deselectAll() {
    this.objects.forEach(item => {
      this.workingArea.emit('deselect', item);
    });
    this.objects.splice(0, this.objects.length);
  }
  /**
   * 取消选定所有对象后选定一个对象
   * @param obj 对象
   */
  public selectOne(obj: any) {
    if (this.isMultiselection) {
      this.selectOrDeselect(obj);
    } else {
      this.deselectAll();
      this.select(obj);
    }
  }
  /**
   * 选定对象集合中所有对象
   * @param objects 对象集合
   */
  public selectAll(objects: any[]) {
    this.objects.forEach(item => {
      this.select(item);
    });
  }
}


/**
 * 车辆类型
 */
export enum Type {
  水源 = 0,
  举高喷射消防车 = 1,
  泡沫消防车 = 2,
  水罐消防车 = 3,
  压缩空气泡沫消防车 = 4
}