完善允许编辑

src/app/working-area/model/axGrid.ts

@@ -8,58 +8,38 @@ const DEFAULT_LINE_STYLE = {
   native: true,
 };
 
-/**
- * @description 在屏幕上绘制网格的实用程序类。
- * @extends PIXI.Graphics
- */
 export class AxGrid extends PIXI.Graphics {
-    private _cellSize: number;
-    private _correctedWidth: number;
-    private _gridWidth: number;
-    private _useCorrectedWidth: boolean;
-    private _drawBoundaries: any;
-    private _amtLines: any;
-  /**
-   * @param {number} cellSize 默认值:网格边长的平方根
-   */
+  private _cellSize: number;
+  private _correctedWidth: number;
+  private _gridWidth: number;
+  private _useCorrectedWidth: boolean;
+  private _drawBoundaries: any;
+  private _amtLines: any;
+
   set cellSize(cellSize) {
     this._cellSize = cellSize || Math.sqrt(this._correctedWidth);
   }
-
   get cellSize() {
     return this._cellSize;
   }
-
-  /**
-   * 网格边等距线的数量
-   */
   get amtLines() {
     return Math.floor(this.gridWidth / this.cellSize);
   }
-
-  /**
-   * 由' width '构造函数参数给出的网格的请求宽度。
-   */
   get originalWidth() {
     return this._gridWidth;
   }
-
   /**
-   * 修正后的网格宽度，即大于最小平方根的数
-   * 修正后的宽度。
+   * 修正后的网格宽度，大于最小平方根的数
    */
   get correctedWidth() {
     return this._correctedWidth;
   }
-
   get useCorrectedWidth() {
     return this._useCorrectedWidth;
   }
 
   /**
    * 网格中每个角落的坐标。
-   * @returns {{ x1: number, y1: number, x2: number, y2: number}}
-   * 最左边(**x1**)，最上面(**y1**)，最右边(**x2**)和最下面(**y2**)的坐标。
    */
   get bounds() {
     return {
@@ -78,50 +58,11 @@ export class AxGrid extends PIXI.Graphics {
     return this._drawBoundaries;
   }
 
-  /**
-   * 网格的实际宽度。
-   * 当' cellSize '不是默认值时，网格的宽度将为
-   * 在' width '构造函数中给出的宽度。否则，就是修改后的宽度。
-   */
   get gridWidth() {
     if (!this.useCorrectedWidth) { return this._gridWidth; }
     return Math.abs(this.cellSize - Math.sqrt(this._correctedWidth)) <= 1e-6 ? this._correctedWidth : this._gridWidth;
   }
 
-  /**
-    *
-    * @param {number} width number. Required.
-    *
-    * The target sidelength of the grid. It is best for `width` to be a perfect square (i.e., 2, 4, 9, 16, 25, etc.). If
-    * not and the parameter `useCorrectedWidth` is set to **false**, then the grid will use a corrected width,
-    * which is the smallest perfect square greater than `width`.
-    *
-    * @param {number} cellSize number, null. Optional, default: square root of corrected width
-    *
-    * The size of each cell in the grid.
-    * If the value is **null**, the grid will use the default value.
-    *
-    * @param {{ width: number, color: number, alpha: number, alignment: number, native: boolean }}. Object. Optional.
-    *
-    *  default:
-    *  **{
-    *    width: 1,
-    *    color: 0xffffff,
-    *    alpha: 1,
-    *    alignment: 0.5,
-    *    native: true
-    *  }**
-    *
-    * Configuration for the line style on the object. See documentation on `PIXI.Graphics` for more on the `LineStyle` class.
-    *
-    * @param {boolean} useCorrectedWidth boolean. Optional. default: **true**
-    * If **true**, the grid will use the smallest perfect square greater than `width`.
-    * Otherwise, the grid will use the exact value given by `width`.
-    *
-    * @param {boolean} drawBoundaries boolean. Optional. default: **true**
-    * If **true**, the grid will draw its boundaries.
-    * Otherwise, the grid will not draw its boundaries. Mouse pointer detection is not affected.
-   */
   constructor(
     width,
     cellSize= null,
@@ -151,12 +92,9 @@ export class AxGrid extends PIXI.Graphics {
       lConfig.alignment,
       lConfig.native
     );
-
-    // handle mouse move
     this.interactive = true;
     this.on('mousemove', (evt) => {
       const mouseCoords = evt.data.getLocalPosition(evt.currentTarget.parent);
-      // 检查鼠标是否在此网格的范围内。如果不是，那就什么都不做。
       if (
         mouseCoords.x >= this.bounds.x1 &&
         mouseCoords.x <= this.bounds.x2 &&
@@ -192,11 +130,6 @@ export class AxGrid extends PIXI.Graphics {
 
   /**
    * 清除网格
-   *
-   * @param {boolean} retainLineStyle 可选，默认：true
-   *
-   * 当**true**时，线条样式对象的配置将被保留。
-   * 否则，对象的行样式将恢复为' PIXI '指定的默认值。图形的对象。
    */
   clearGrid(retainLineStyle = true) {
     const { width, alignment, color, alpha, native } = this.line;
@@ -207,14 +140,10 @@ export class AxGrid extends PIXI.Graphics {
 
     return this;
   }
-
   /**
-   * Transforms global coordinates to grid coordinates.
-   * @param {number} x
-   * The global X coordinate.
-   *
-   * @param {number} y
-   * The global Y coordinate.
+   * 返回网格的坐标
+   * @param x 坐标x
+   * @param y 坐标y
    */
   getCellCoordinates(x, y)  {
     return {
@@ -222,22 +151,15 @@ export class AxGrid extends PIXI.Graphics {
       y: Math.floor((y - this.bounds.y1) / this.cellSize),
     };
   }
-
   /**
-   * 检测到mousemove事件后触发的回调。
-   *
-   * @param {PIXI.InteractionData} evt
-   * 'PIXI.InteractionData '事件
-   *
-   * @param {{x: number, y: number}} gridCoords
-   * 网格坐标
+   * 鼠标移动事件
+   * @param evt 鼠标事件
+   * @param gridCoords 鼠标所在网格坐标
    */
   onMousemove(evt, gridCoords) {
 
   }
-
-    // 计算修正后的宽度。如果`useCorrectedWidth`构造函数参数设置为**false**，
-  // 然后，它简单地保持“width”的给定值作为修正后的宽度。
+  // 默认宽度
   _correctWidth() {
     if (!this._useCorrectedWidth) {
       this._correctedWidth = this._gridWidth;
@@ -245,9 +167,7 @@ export class AxGrid extends PIXI.Graphics {
 
     this._correctedWidth = Math.ceil(Math.sqrt(this._gridWidth)) ** 2;
   }
-
-  // 计算修正后的宽度。如果`useCorrectedWidth`构造函数参数设置为**false**，
-  // 然后，它简单地保持“width”的给定值作为修正后的宽度。
+  // 自定义宽度
   correctWidth(width: number) {
     if (!this._useCorrectedWidth) {
       this._correctedWidth = width;

src/app/working-area/model/axSelection.ts

@@ -1,3 +1,5 @@
+import { allowedNodeEnvironmentFlags } from "process";
+
 /**
  * 选择器
  */
@@ -17,6 +19,17 @@ export class AxSelection {
     public has(obj: any): boolean {
         return this.objects.has(obj);
     }
+    // 是否所有选择对象都允许编辑
+    public allowEdit(): boolean {
+        let allowEdit = true;
+        for (const item of this.objects) {
+            if (!item.allowEdit) {
+                allowEdit = false;
+                break;
+            }
+        }
+        return allowEdit;
+    }
     // 获得所有对象
     public all() {
         return [...this.objects];

src/app/working-area/model/axShape.ts

@@ -10,10 +10,8 @@ export class AxShape extends Graphics {
     assetData: any;
     pointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png');
     workingArea: WorkingAreaComponent;
-    // 可以被移动的
-    moveable = true;
-    // 可以被选中的
-    selectable = true;
+    // 允许选择
+    allowSelect = true;
     // 允许编辑
     allowEdit = true;
     // 是否显示名称
@@ -38,10 +36,10 @@ export class AxShape extends Graphics {
         this
             .on('pointerdown', event => {
             event.stopPropagation();
-            if (this.selectable) {
+            if (this.allowSelect) {
                 this.workingArea.select(this);
             }
-            if (this.moveable) {
+            if (this.allowEdit) {
                 this.mouseDragging = true;
                 this.mousePosition = new PIXI.Point(event.data.global.x, event.data.global.y);
             }

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

@@ -490,21 +490,26 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
       switch (floorData[key].InteractiveMode) {
         case 0:
           const singleIcon = new AxImageShape(floorData[key], this);
-          singleIcon.moveable = this.allowEdit && this.canvasData.gameMode === singleIcon.assetData.GameMode;
+          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 distance = new AxArrowConnector(floorData[key], this, false, true);
+            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;
         }
@@ -522,22 +527,24 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
           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;
+              singleIcon.allowEdit = this.allowEdit && this.canvasData.gameMode === singleIcon.assetData.GameMode;
               break;
             case 1:
-                const icon = new MultipointIcon(nodeData[key][tempKey], this);
-                break;
+              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;
         }
         });
       });
     }
-    // this.emit('backgroundScale', this.backgroundImage.scale.x);
   }
   /**
    * 创建确认绘制结束按钮