[新增] 设置名称显示状态

doc_workingArea/readme.md

@@ -63,13 +63,17 @@ this.workingArea.refresh();
 
 调用该函数后，如果共享数据中的{选择楼层数据}{建筑数据}Version是1.0，则数据会被修改为2.0数据，但并没有修改共享数据中isChange=true（待定）
 
-### TODO
+### 设置名称显示/隐藏
 
-* 创建后新增共享数据
-
-* 移动时修改共享数据
+```tsx
+/**
+ * 设置名称显示
+ * @param value true  显示 false 隐藏
+ * @param mode BasicInformation = 0 基本信息 Assignment想定作业 = 1 想定作业
+ */
+this.workingArea.setNameVisible(true, 0);
+this.workingArea.setNameVisible(false, 0);
+```
 
-* 删除时删除共享数据
 
-* 调整点位置时修改共享数据
 

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

@@ -60,7 +60,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       // console.log('按下了' + event.keyCode);
       if (event.keyCode === 17) {
         this.selection.isMultiselection = true;
-        this.refresh();
+        // this.setNameVisible(true, 0);
       }
     });
     this.eventManager.addGlobalEventListener('window', 'keyup', (event: any) => {
@@ -187,6 +187,22 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       // console.log(this.currentClickPoint.position);
     });
   }
+  /**
+   * 设置名称显示
+   * @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 SinglePointIcon) {
+        item.setNameVisible(value, mode);
+      } else if (item instanceof MultipointIcon) {
+        item.setNameVisible(value, mode);
+      } else if (item instanceof PolygonIcon) {
+        item.setNameVisible(value, mode);
+      }
+    });
+  }
   /**
    * 刷新
    */
@@ -733,6 +749,12 @@ export class SinglePointIcon extends PIXI.Container {
     this.addChild(this.text);
     this.addChild(singlePointIcon);
   }
+  // 设置名称
+  public setNameVisible(value: boolean, mode: GameMode) {
+    if (this.assetData.GameMode === mode) {
+      this.text.visible = value;
+    }
+  }
 }
 /**
  * 多点连线
@@ -741,6 +763,9 @@ export class MultipointIcon extends PIXI.Container {
   public pointsData: PIXI.Point[];
   public pointsGraphics: PIXI.Graphics[] = [];
   public iconsTilingSprite: PIXI.TilingSprite[] = [];
+  private text = new PIXI.Text(this.assetData.Name, {
+    fontFamily: 'Arial', fontSize: 18, fill: 0xffffff, align: 'center'
+  });
   /**
    *
    * @param texture 图片素材
@@ -772,12 +797,12 @@ export class MultipointIcon extends PIXI.Container {
       this.addChild(icon);
       if (i === 0) {
         // 名称
-        const text = new PIXI.Text(this.assetData.Name, {
-          fontFamily: 'Arial', fontSize: 18, fill: 0xffffff, align: 'center'
-        });
-        text.anchor.set(0.5);
-        text.y -= this.assetData.Height;
-        icon.addChild(text);
+        // this.text = new PIXI.Text(this.assetData.Name, {
+        //   fontFamily: 'Arial', fontSize: 18, fill: 0xffffff, align: 'center'
+        // });
+        this.text.anchor.set(0.5);
+        this.text.y -= this.assetData.Height;
+        icon.addChild(this.text);
       }
     }
     // 画点
@@ -923,6 +948,12 @@ export class MultipointIcon extends PIXI.Container {
       item.visible = value;
     });
   }
+  // 设置名称
+  public setNameVisible(value: boolean, mode: GameMode) {
+    if (this.assetData.GameMode === mode) {
+      this.text.visible = value;
+    }
+  }
 }
 /**
  * 多边形
@@ -932,6 +963,9 @@ export class PolygonIcon extends PIXI.Container {
   public pointsGraphics: PIXI.Graphics[] = [];
   public polygonGraphics: PIXI.Graphics = new PIXI.Graphics();
   public polygonLineGraphics: PIXI.Graphics = new PIXI.Graphics();
+  private text = new PIXI.Text(this.assetData.Name, {
+    fontFamily: 'Arial', fontSize: 18, fill: 0xffffff, align: 'center'
+  });
   /**
    *
    * @param points  点集合
@@ -968,12 +1002,12 @@ export class PolygonIcon extends PIXI.Container {
     this.polygonLineGraphics.closePath();
     this.addChild(this.polygonLineGraphics);
     // 名称
-    const text = new PIXI.Text(this.assetData.Name, {
-      fontFamily: 'Arial', fontSize: 18, fill: 0xffffff, align: 'center'
-    });
-    text.anchor.set(0.5);
-    text.y -= this.assetData.Height;
-    this.polygonLineGraphics.addChild(text);
+    // const text = new PIXI.Text(this.assetData.Name, {
+    //   fontFamily: 'Arial', fontSize: 18, fill: 0xffffff, align: 'center'
+    // });
+    this.text.anchor.set(0.5);
+    this.text.y -= this.assetData.Height;
+    this.polygonLineGraphics.addChild(this.text);
     // 添加圆点事件
     this.pointsGraphics.forEach((item, index, array) => {
       item.interactive = true;
@@ -1078,6 +1112,17 @@ export class PolygonIcon extends PIXI.Container {
     });
     return points;
   }
+  /**
+   * 设置名称显示
+   * @param value true/false 显示/隐藏
+   * @param mode BasicInformation = 0 基本信息
+   *             Assignment想定作业 = 1 想定作业
+   */
+  public setNameVisible(value: boolean, mode: GameMode) {
+    if (this.assetData.GameMode === mode) {
+      this.text.visible = value;
+    }
+  }
 }
 
 export class Line extends PIXI.Container {