[新增素材]

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

@@ -145,6 +145,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
     });
     setTimeout(() => {
       this.createCanvas();
+      this.loadDemoScene();
     }, 0);
   }
 
@@ -204,7 +205,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       backgroundColor: 0xE9FAFF
     });
     this.content.nativeElement.appendChild(this.app.view);
-    this.init.getSitePlan(); // 调用父组件 初始化方法
+    // this.init.getSitePlan(); // 调用父组件 初始化方法
 
     this.createBackgroundImage();
     // this.createPreviewSinglePointIcon();
@@ -351,6 +352,41 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       }
     });
   }
+  /**
+   * 加载测试界面
+   */
+  public loadDemoScene() {
+    this.backgroundImage.texture = PIXI.Texture.from('./assets/images/demo.jpg');
+    setTimeout(() => {
+      const assetData = {
+        TemplateId: null,
+        FloorId: null,
+        Angle: 0,
+        Color: 0,
+        Enabled: true,
+        FillMode: 0,
+        FireElementId: 0,
+        FixedSize: true,
+        Height: 32,
+        Width: 32,
+        Id: ObjectID.default.generate(),
+        ImageUrl: './assets/images/泡沫消防车.png',
+        InteractiveMode: 0,
+        MultiPoint: null,
+        Point: new PIXI.Point(5295 - (this.backgroundImage.texture.width / 2), 4067 - (this.backgroundImage.texture.height / 2)),
+        Name: '',
+        PropertyInfos: null,
+        Border: null,
+        DrawMode: null,
+        Thickness: 0,
+        IsFromBuilding: false,
+        GameMode: 0
+      };
+      const single = new SinglePointIcon(assetData, this);
+    }, 100);
+
+    // this.backgroundImage.anchor.set(0);
+  }
   /**
    *
    * @param id 图标ID
@@ -910,7 +946,7 @@ export class SinglePointIcon extends PIXI.Container {
 
   private text = new PIXI.Text(this.assetData.Name
     + '\r\n'
-    + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
+    + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
   private image = PIXI.Sprite.from(this.assetData.ImageUrl);
   constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
     super();
@@ -996,7 +1032,7 @@ export class SinglePointIcon extends PIXI.Container {
     this.image.angle = this.assetData.Angle;
     this.text.text = this.assetData.Name
       + '\r\n'
-      + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue;
+      + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue;
     this.text.x = this.image.x;
     this.text.y = this.image.y - this.image.height / 2;
   }
@@ -1027,7 +1063,7 @@ export class MultipointIcon extends PIXI.Container {
 
   private text = new PIXI.Text(this.assetData.Name
     + '\r\n'
-    + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
+    + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
   /**
    *
    * @param texture 图片素材
@@ -1624,3 +1660,117 @@ export class PropertyInfo {
    */
   public PropertyValue: string;
 }
+/**
+ * demo图标
+ */
+export class DemoIcon extends PIXI.Container {
+  style = new PIXI.TextStyle({
+    fontFamily: 'Arial',
+    fontSize: 18,
+    fontStyle: 'normal',
+    fontWeight: 'bold',
+    fill: ['#000000'],
+    stroke: '#ffffff',
+    strokeThickness: 3,
+    dropShadow: true,
+    dropShadowColor: '#000000',
+    dropShadowBlur: 3,
+    dropShadowAngle: Math.PI / 6,
+    dropShadowDistance: 1,
+    wordWrap: false,
+    wordWrapWidth: 100,
+  });
+
+  private text = new PIXI.Text(this.assetData.Name
+    + '\r\n'
+    + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
+  private image = PIXI.Sprite.from(this.assetData.ImageUrl);
+  constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
+    super();
+    this.workingArea.backgroundImage.addChild(this);
+    this.x = this.assetData.Point.x;
+    this.y = this.assetData.Point.y;
+    this.name = this.assetData.Id;
+
+    this.image.angle = this.assetData.Angle;
+
+    this.image.x = 0;
+    this.image.y = 0;
+    this.image.width = this.assetData.Width;
+    this.image.height = this.assetData.Height;
+
+    this.image.alpha = 1;
+    this.image.anchor.set(0.5);
+    this.image.interactive = true;
+    this.image
+      .on('mousedown', event => {
+        event.stopPropagation();
+        this.workingArea.selection.selectOne(this);
+        if (this.workingArea.allowEdit) {
+          event.currentTarget.parent.data = event.data;
+          event.currentTarget.parent.alpha = 0.5;
+          event.currentTarget.parent.dragging = true;
+        }
+      })
+      .on('mouseup', event => {
+        if (event.currentTarget.parent.dragging) {
+          event.currentTarget.parent.alpha = 1;
+          event.currentTarget.parent.dragging = false;
+          event.currentTarget.parent.data = null;
+        }
+      })
+      .on('mouseupoutside', event => {
+        if (event.currentTarget.parent.dragging) {
+          event.currentTarget.parent.alpha = 1;
+          event.currentTarget.parent.dragging = false;
+          event.currentTarget.parent.data = null;
+        }
+      })
+      .on('mousemove', event => {
+        if (event.currentTarget.parent.dragging) {
+          const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent);
+          event.currentTarget.parent.x = newPosition.x;
+          event.currentTarget.parent.y = newPosition.y;
+          this.assetData.Point = new PIXI.Point(this.x, this.y);
+          this.workingArea.canvasData.isChange = true;
+        }
+      })
+      .on('rightclick', event => {
+
+      })
+      .on('mouseover', event => {
+
+      });
+
+    this.workingArea.on('backgroundScale', data => {
+      if (this.assetData.FixedSize) {
+        const scale = 1 / data;
+        this.scale.set(scale);
+      }
+    });
+
+    this.text.x = this.image.x;
+    this.text.y = this.image.y - this.image.height / 2;
+    this.text.anchor.set(0.5, 1);
+
+    this.addChild(this.text);
+    this.addChild(this.image);
+  }
+  // 设置名称
+  public setNameVisible(value: boolean, mode: GameMode) {
+    if (this.assetData.GameMode === mode) {
+      this.text.visible = value;
+    }
+  }
+  // 刷新
+  public refresh() {
+    this.image.width = this.assetData.Width;
+    this.image.height = this.assetData.Height;
+    this.image.angle = this.assetData.Angle;
+    this.text.text = this.assetData.Name
+      + '\r\n'
+      + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue;
+    this.text.x = this.image.x;
+    this.text.y = this.image.y - this.image.height / 2;
+  }
+}