debug

src/components/editClass/edit/items/SBasePolygonEdit.ts

@@ -17,7 +17,7 @@
  *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
  *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
  *      .:R888888I
- *      .&888888I                                          Copyright (c) 2016-2020.  博锐尚格科技股份有限公司
+ *      .&888888I                                          Copyright (c) 2009-2020.  博锐尚格科技股份有限公司
  *        ~8888'
  *        .!88~                                                                     All rights reserved.
  *
@@ -25,11 +25,11 @@
  */
 
 import {
+    SGraphItem,
     SGraphPointListDelete,
     SGraphPointListInsert,
     SGraphPointListUpdate,
-    SLineStyle,
-    SGraphItem
+    SLineStyle
 } from "@persagy-web/graph";
 import { SKeyCode, SMouseEvent, SUndoStack } from "@persagy-web/base/";
 import {
@@ -41,34 +41,28 @@ import {
     SPolygonUtil,
     SRect
 } from "@persagy-web/draw";
-import { SItemStatus } from "@persagy-web/big";
+import { SItemStatus, ItemOrder } from "@persagy-web/big";
+import { Marker } from "../type/Marker";
 import { SMathUtil } from "@persagy-web/big/lib/utils/SMathUtil";
 import { SGraphEdit } from ".."
-import { Marker } from "../type/Marker";
-import { ItemOrder } from '@persagy-web/big/lib';
 /**
- * 多边形编辑类
+ * 编辑多边形
  *
- * @author  韩耀龙(han_yao_long@163.com)
+ * @author  韩耀龙
  */
 export class SBasePolygonEdit extends SGraphEdit {
-    //属性
-    /**编辑相关操作的数据 */
-    data: Marker
-    /** 起始锚点  */
-    startItem: SGraphItem | null = null;
-    /** 结束锚点  */
-    endItem: SGraphItem | null = null;
-    /** X坐标最小值  */
+    /** X坐标最小值 */
     private minX = Number.MAX_SAFE_INTEGER;
-    /** X坐标最大值  */
+    /** X坐标最大值 */
     private maxX = Number.MIN_SAFE_INTEGER;
-    /** Y坐标最小值  */
+    /** Y坐标最小值 */
     private minY = Number.MAX_SAFE_INTEGER;
-    /** Y坐标最大值  */
+    /** Y坐标最大值 */
     private maxY = Number.MIN_SAFE_INTEGER;
 
-    /** 轮廓线坐标  */
+    /** 图例节点对象数据 */
+    data: Marker;
+    /** 轮廓线坐标 */
     private pointList: SPoint[] = [];
     // 获取当前状态
     get getPointList(): SPoint[] {
@@ -79,22 +73,12 @@ export class SBasePolygonEdit extends SGraphEdit {
         this.pointList = arr;
         this.update();
     }
-    /** 是否垂直水平绘制   */
-    private _verAndLeve: Boolean = false;
-    get verAndLeve(): Boolean {
-        return this._verAndLeve;
-    }
-    set verAndLeve(bool: Boolean) {
-        this._verAndLeve = bool;
-        this.update();
-    }
-    // 当前状态
+
+    /** 当前状态 */
     protected _status: number = SItemStatus.Normal;
-    // 获取当前状态
     get status(): SItemStatus {
         return this._status;
     }
-    // 编辑当前状态
     set status(value: SItemStatus) {
         this._status = value;
         this.undoStack.clear();
@@ -102,49 +86,49 @@ export class SBasePolygonEdit extends SGraphEdit {
     }
 
     /** 边框颜色 */
-    _strokeColor: SColor = new SColor("#0091FF");
+    _strokeColor: SColor = SColor.Black;
     /**  画笔颜色 */
     get strokeColor(): SColor {
         return this._strokeColor;
-    }
+    } // Get strokeColor
     set strokeColor(v: SColor) {
         this._strokeColor = v;
         this.update();
-    }
+    } // Set strokeColor
 
     /** 填充颜色 */
-    _fillColor: SColor = new SColor("#1EE887");
+    _fillColor: SColor = new SColor("#2196f3");
     get fillColor(): SColor {
         return this._fillColor;
-    }
+    } // Get fillColor
     set fillColor(v: SColor) {
         this._fillColor = v;
         this.update();
-    }
+    } // Set fillColor
 
     /** 边框样式 */
     _lineStyle: SLineStyle = SLineStyle.Solid;
     get lineStyle(): SLineStyle {
         return this._lineStyle;
-    }
+    } // Get lineStyle
     set lineStyle(v: SLineStyle) {
         this._lineStyle = v;
         this.update();
-    }
+    } // Set lineStyle
 
-    /** 边框的宽 只可输入像素宽*/
-    _lineWidth: number = 4;
+    /** 边框的宽 只可输入像素宽 */
+    _lineWidth: number = 1;
     get lineWidth(): number {
         return this._lineWidth;
-    }
+    } // Get lineWidth
     set lineWidth(v: number) {
         this._lineWidth = v;
         this.update();
-    }
+    } // Set lineWidth
 
-    /** 是否闭合    */
+    /** 是否闭合 */
     closeFlag: boolean = false;
-    /** 鼠标移动点  */
+    /** 鼠标移动点 */
     private lastPoint: SPoint | null = null;
     /** 当前鼠标获取顶点对应索引 */
     private curIndex: number = -1;
@@ -152,17 +136,18 @@ export class SBasePolygonEdit extends SGraphEdit {
     private curPoint: null | SPoint = null;
     /** 灵敏像素 */
     private len: number = 10;
-    /** 场景像素 内部将灵敏像素换算为场景实际距离  */
+    /** 场景像素 内部将灵敏像素换算为场景实际距离 */
     private scenceLen: number = 15;
-    /** 场景像素  */
+    /** 场景像素 */
     private isAlt: boolean = false;
-    /** undoredo堆栈 */
+    /** undo/redo堆栈 */
     protected undoStack: SUndoStack = new SUndoStack();
 
     /**
      * 构造函数
      *
      * @param parent    指向父对象
+     * @param data      图例节点对象数据
      */
     constructor(parent: SGraphItem | null, data: Marker) {
         super(parent);
@@ -170,64 +155,72 @@ export class SBasePolygonEdit extends SGraphEdit {
         // this.textItem.isTransform = false;
         this.zOrder = ItemOrder.polygonOrder;
         this.data = data;
-        this.name = data.Name;
+        this.name = data.name;
         // this.text = data.Name;
-        if (data) {
+        if (data.style) {
             this.setPointList = [];
             let setPointList: SPoint[];
-            if (data.OutLine) {
-                if (data.OutLine[0] instanceof SPoint) {
+            if (data.style.outLine) {
+                if (data.style.outLine[0] instanceof SPoint) {
                     // @ts-ignore
-                    this.setPointList = data.OutLine;
+                    this.setPointList = data.style.outLine;
                 } else {
-                    setPointList = data.OutLine.map(i => {
-                        return (new SPoint(i.X, i.Y))
+                    setPointList = data.style.outLine.map(i => {
+                        return (new SPoint(i.x, i.y))
                     })
                     this.setPointList = setPointList;
                 }
             }
-            if (data.Properties.Zorder) {
-                this.zOrder = data.Properties.Zorder;
-            }
-            // 设置线宽
-            if (data.Properties.LineWidth) {
-                this.lineWidth = data.Properties.LineWidth;
-            }
-            if (data.Properties.StrokeColor) {
-                this.strokeColor = data.Properties.StrokeColor.includes('#') ? new SColor(data.Properties.StrokeColor) : new SColor(hexify(data.Properties.StrokeColor));
-            }
-            if (data.Properties.FillColor) {
-                this.fillColor = data.Properties.FillColor.includes('#') ? new SColor(data.Properties.FillColor) : new SColor(hexify(data.Properties.FillColor))
-            }
-            if (data.Properties.TextPos) {
-                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
-            }
-            if (data.Properties.color) {
-                this.color = new SColor(data.Properties.color);
-            }
-            if (data.Properties.font) {
-                this.font = new SFont("sans-serif", data.Properties.font);
-            }
-            if (data.Properties && data.Properties.IsActive) {
-                this.isActive = data.Properties.IsActive;
-            }
-            if (data.AttachObjectIds && data.AttachObjectIds.length) {
-                this.isActive = true;
-            }
-            switch (data.Properties.LineDash) {
-                case "solid":
-                    this.lineStyle = SLineStyle.Solid;
-                    break;
-                case "dotted":
-                    this.lineStyle = SLineStyle.Dotted;
-                    break;
-                case "dashed":
-                    this.lineStyle = SLineStyle.Dashed;
-                    break;
-                default:
-                    this.lineStyle = SLineStyle.Solid;
+            // 样式相关
+            if (data.style.default) {
+                // 颜色
+                if (data.style.default.strokeColor) {
+                    this.strokeColor = new SColor(data.style.default.strokeColor)
+                }
+                // 线宽
+                if (data.style.default.lineWidth) {
+                    this.lineWidth = data.style.default.lineWidth
+                }
+                // 线样式
+                if (data.style.default.lineStyle) {
+                    this.lineStyle = data.style.default.lineStyle
+                }
+                // 填充色
+                if (data.style.default.fillColor) {
+                    this.fillColor = new SColor(data.style.default.fillColor)
+                }
             }
         }
+        // if (data) {
+        //     if (data.Properties.Zorder) {
+        //         this.zOrder = data.Properties.Zorder;
+        //     }
+        //     // 设置线宽
+
+        //     if (data.Properties.TextPos) {
+        //         this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
+        //     }
+        //     if (data.Properties.color) {
+        //         this.color = new SColor(data.Properties.color);
+        //     }
+        //     if (data.Properties.font) {
+        //         this.font = new SFont("sans-serif", data.Properties.font);
+        //     }
+        //     if (data.Properties && data.Properties.IsActive) {
+        //         this.isActive = data.Properties.IsActive;
+        //     }
+        // }
+        // 监听多边形创建完成事件,并动态计算文本位置
+        // this.connect("finishCreated", this, () => {
+        //     // 计算文本位置
+        //     let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
+        //         return pre + (cur.x / arr.length)
+        //     }, 0),
+        //         y: number = this.getPointList.reduce((pre, cur, index, arr) => {
+        //             return pre + (cur.y / arr.length)
+        //         }, 0);
+        //     this.textItem.moveTo(x, y);
+        // })
     }
 
     //////////////////
@@ -250,7 +243,7 @@ export class SBasePolygonEdit extends SGraphEdit {
         }
         this.update();
         return point;
-    }
+    } // Function insertPoint()
 
     /**
      * 删除点位
@@ -279,7 +272,7 @@ export class SBasePolygonEdit extends SGraphEdit {
         this.curPoint = null;
         this.update();
         return point;
-    }
+    } // Function deletePoint()
 
     /**
      * 多边形顶点的移动位置
@@ -300,16 +293,7 @@ export class SBasePolygonEdit extends SGraphEdit {
         }
         point = this.pointList[i];
         return point;
-    }
-
-    /**
-     * 打印出多边形数组
-     *
-     * @return  顶点数组
-     */
-    PrintPointList(): SPoint[] {
-        return this.pointList;
-    }
+    } // Function movePoint()
 
     ////////////
     //  以下为三种状态下的绘制多边形方法
@@ -347,7 +331,7 @@ export class SBasePolygonEdit extends SGraphEdit {
         }
         painter.drawPolygon([...pointList]);
         painter.restore();
-    }
+    } // Function drawShowPolygon()
 
     /**
      * 创建状态 --绘制多边形数组
@@ -403,7 +387,7 @@ export class SBasePolygonEdit extends SGraphEdit {
         } else {
             painter.drawPolygon(pointList);
         }
-    }
+    } // Function drawCreatePolygon()
 
     /**
      *
@@ -429,7 +413,7 @@ export class SBasePolygonEdit extends SGraphEdit {
             }
             painter.drawCircle(item.x, item.y, painter.toPx(this.len / 2));
         });
-    }
+    } // Function drawCreatePolygon()
 
     /**
      * 编辑状态操作多边形数组
@@ -543,7 +527,7 @@ export class SBasePolygonEdit extends SGraphEdit {
             // 刷新视图
             this.update();
         }
-    }
+    } // Function editPolygonPoint()
 
     /////////////////////
     // undo、redo相关操作
@@ -557,7 +541,7 @@ export class SBasePolygonEdit extends SGraphEdit {
         // 记录相关命令并推入堆栈中
         const sgraphcommand = new SGraphCommand(this.scene, this, ...any);
         this.undoStack.push(sgraphcommand);
-    }
+    } // Function recordAction()
 
     /**
      * 执行取消操作执行
@@ -567,7 +551,7 @@ export class SBasePolygonEdit extends SGraphEdit {
             return;
         }
         this.undoStack.undo();
-    }
+    } // Function undo()
 
     /**
      * 执行重做操作执行
@@ -577,7 +561,7 @@ export class SBasePolygonEdit extends SGraphEdit {
             return;
         }
         this.undoStack.redo();
-    }
+    } // Function redo()
 
     ///////////////////////////////
     // 以下为鼠标事件
@@ -658,7 +642,7 @@ export class SBasePolygonEdit extends SGraphEdit {
      * @return	boolean
      */
     onMouseDown(event: SMouseEvent): boolean {
-        if (event.shiftKey || this.verAndLeve) {
+        if (event.shiftKey) {
             event = this.compare(event);
         }
         // 如果状态为编辑状态则添加点
@@ -723,7 +707,7 @@ export class SBasePolygonEdit extends SGraphEdit {
      */
 
     onMouseMove(event: SMouseEvent): boolean {
-        if (event.shiftKey || this.verAndLeve) {
+        if (event.shiftKey) {
             event = this.compare(event);
         }
         if (this.status == SItemStatus.Create) {
@@ -756,7 +740,7 @@ export class SBasePolygonEdit extends SGraphEdit {
             if (this.status == SItemStatus.Create) {
                 last = this.pointList[this.pointList.length - 1];
             } else if (this.status == SItemStatus.Edit) {
-                if (this.curIndex > 1) {
+                if (this.curIndex > 0) {
                     last = this.pointList[this.curIndex - 1];
                 }
             }
@@ -910,4 +894,4 @@ export class SBasePolygonEdit extends SGraphEdit {
             this.drawEditPolygon(painter, this.pointList);
         }
     } // Function onDraw()
-}
+} // Class SPolygonItem

src/components/editClass/edit/items/SBaseRectEdit.ts

@@ -137,6 +137,9 @@ export class SBaseRectEdit extends SGraphEdit {
       if (data.style.default.strokeColor) {
         this.strokeColor = new SColor(data.style.default.strokeColor)
       }
+      if (data.style.default.fillColor) {
+        this.fillColor = new SColor(data.style.default.fillColor)
+      }
       // 线宽
       if (data.style.default.lineWidth) {
         this.lineWidth = data.style.default.lineWidth

src/components/editClass/persagy-edit/PTopoScene.ts

@@ -1,5 +1,5 @@
 import { SBaseEditScene, SBaseExpainEdit, SBaseEquipment } from "./../big-edit";
-import { SBaseRectEdit, SBaseLineEdit, SBaseTextEdit, SGraphEdit, SBaseArrowEdit, SBaseCircleEdit, SBaseTriangleEdit } from "./../edit";
+import { SBaseRectEdit, SBaseLineEdit, SBaseTextEdit, SGraphEdit, SBaseArrowEdit, SBaseCircleEdit, SBaseTriangleEdit, SBasePolygonEdit } from "./../edit";
 import { SPersagyImageEdit } from "./"
 import { SMouseEvent } from "@persagy-web/base/lib";
 import { SGraphSelectContainer, SLineStyle } from "@persagy-web/graph";
@@ -62,7 +62,8 @@ export class PTopoScene extends SBaseEditScene {
             this.clearCmdStatus();
         }
         else if (this.editCmd == "EditBasePolygon") {
-            console.log('编辑多边形')
+            this.addPolygonItem(event);
+            this.clearCmdStatus();
         } else if (this.editCmd == "EditBaseRect") {
             this.addRectItem(event)
             this.clearCmdStatus();
@@ -354,22 +355,53 @@ export class PTopoScene extends SBaseEditScene {
             },
             style: {
                 default: {
-                    line: [{ x: event.x, y: event.y }],
-                }
+                },
+                line: [{ x: event.x, y: event.y }],
             }
         }
         const circleItem = new SBaseCircleEdit(null, data);
         circleItem.status = SItemStatus.Create;
-        this.addItem(circleItem);
-        this.undoStack.push(new SGraphAddCommand(this, circleItem));
         circleItem.selectable = true;
         this.grabItem = circleItem;
+        this.addItem(circleItem);
+        this.undoStack.push(new SGraphAddCommand(this, circleItem));
         circleItem.connect("finishCreated", this, this.finishCreated);
         circleItem.connect("onContextMenu", this, this.getItem);
         if (this.view) {
             this.view.update();
         }
     }
+
+    /**
+     * 添加基本多边形
+     */
+    addPolygonItem(event: SMouseEvent): void {
+        const data = {
+            name: '基础多边形',
+            type: "Zone",
+            pos: { x: 0, y: 0 },
+            properties: {
+                type: "BasePolygon",
+            },
+            style: {
+                outLine: [{ x: event.x, y: event.y }],
+                default: {
+                }
+            }
+        }
+        const polygonItem = new SBasePolygonEdit(null, data);
+        polygonItem.status = SItemStatus.Create;
+        polygonItem.selectable = true;
+        this.addItem(polygonItem);
+        this.undoStack.push(new SGraphAddCommand(this, polygonItem));
+        this.grabItem = polygonItem;
+        polygonItem.connect("finishCreated", this, this.finishCreated);
+        polygonItem.connect("onContextMenu", this, this.getItem);
+        if (this.view) {
+            this.view.update();
+        }
+    }
+
     /**
      * 添加基本设备item
      */

src/components/editview/baseTopoEditer.vue

@@ -157,6 +157,7 @@ export default {
         parse.parseData(res.content.elements);
         parse.markers.forEach((item) => {
           item.selectable = true;
+          item.moveable = true;
           this.scene.addItem(item);
         });
       });

src/components/editview/leftToolBar/data.js

@@ -38,10 +38,16 @@ export const baseEditItems = [{
                     activeIcon:require("./../../../assets/images/leftImgs/"+ "EditBaseRect"+"Active"+".png")
                 },
                 {
-                    name: '三角形',
-                    id: "EditBaseTriangle",
-                    icon:require("./../../../assets/images/leftImgs/"+"EditBaseTriangle.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "EditBaseTriangle"+"Active"+".png")
+                    name: '多边形',
+                    id: "EditBasePolygon",
+                    icon:require("./../../../assets/images/leftImgs/"+"polygon.png"),
+                    activeIcon:require("./../../../assets/images/leftImgs/"+ "polygon"+"Active"+".png")
+                },
+                {
+                    name: '圆',
+                    id: "EditBaseCircle",
+                    icon:require("./../../../assets/images/leftImgs/"+"circle.png"),
+                    activeIcon:require("./../../../assets/images/leftImgs/"+ "circle"+"Active"+".png")
                 },
                 {
                     name: '箭头',

src/components/editview/rightPropertyBar/property.vue

@@ -26,7 +26,8 @@
         itemType == 'BaseRect' ||
         itemType == 'BaseTriangle' ||
         itemType == 'BaseArrow' ||
-        itemType == 'BaseCircle'
+        itemType == 'BaseCircle' ||
+        itemType == 'BasePolygon'
       "
     ></BaseGraphy>
     <BaseImagePro
@@ -115,7 +116,8 @@ export default {
         this.itemType == "BaseRect" ||
         this.itemType == "BaseTriangle" ||
         this.itemType == "BaseArrow" ||
-        this.itemType == "BaseCircle"
+        this.itemType == "BaseCircle" ||
+        this.itemType == "BasePolygon"
       ) {
         this.Width = item.width; //item 宽
         this.Height = item.height; //item 高