Sfoglia il codice sorgente

Merge branch 'master' of http://39.106.8.246:3003/web/persagy-web

YaolongHan 4 anni fa
parent
commit
a0dde43f21

+ 5 - 0
persagy-web-big/src/items/SMaskItem.ts

@@ -27,6 +27,11 @@
 import { SGraphItem, SLineStyle, SGraphRectItem } from "@persagy-web/graph/lib";
 import { SPoint, SPainter, SPath } from "@persagy-web/draw/lib";
 
+/**
+ * 展示类矩形蒙版 item
+ *
+ * @author 郝建龙 <haojianlong@sagacloud.cn>
+ */
 export default class SMaskItem extends SGraphRectItem {
     /** 绘制的路径 */
     mask: SPath | undefined;

+ 5 - 0
persagy-web-big/src/items/SSceneMaskItem.ts

@@ -39,6 +39,11 @@ import { SItemStatus } from "..";
 import { SMouseEvent } from "@persagy-web/base";
 import { SMathUtil } from "@persagy-web/graph/lib/utils/SMathUtil";
 
+/**
+ * 任意多边形蒙版 item
+ *
+ * @author 郝建龙 <haojianlong@sagacloud.cn>
+ */
 export class SSceneMaskItem extends SGraphStyleItem {
     /** 轮廓线坐标 */
     outline: SPoint[] = [];

+ 1 - 1
persagy-web-big/src/items/equip/SEquipItem.ts

@@ -31,7 +31,7 @@ import { SIconTextItem } from "../icon/SIconTextItem";
 import { svgTobase64 } from "../../utils/svgTobase64";
 
 /**
- * 编辑基础设备类
+ * 基础设备类
  *
  * @author 韩耀龙 <han_yao_long@163.com>
  */

+ 1 - 1
persagy-web-big/src/items/equip/SPipeItem.ts

@@ -32,7 +32,7 @@ import { SPolylineItem } from "../shape/SPolylineItem";
 import { SRelation } from "../../enums/SRelation";
 
 /**
- * 编辑基础管道
+ * 基础管道
  *
  * @author 韩耀龙 <han_yao_long@163.com>
  */

+ 1 - 1
persagy-web-big/src/items/shape/SArrowItem.ts

@@ -29,7 +29,7 @@ import { SPolylineItem } from "../../index";
 import { SLineStyle } from "@persagy-web/graph";
 
 /**
- * 折线箭头 item
+ * 折线两端箭头 item
  *
  * @author 郝建龙 <haojianlong@sagacloud.cn>
  */

+ 1 - 1
persagy-web-big/src/items/shape/SArrowPoly.ts

@@ -30,7 +30,7 @@ import { SMathUtil } from "@persagy-web/graph/lib/utils/SMathUtil";
 import { SItemStatus } from "../../index";
 
 /**
- * 箭头多边形类型
+ * 多边形箭头类型
  *
  * @author  郝建龙 <haojianlong@sagacloud.cn>
  */

+ 1 - 1
persagy-web-big/src/items/shape/SCircleCornerPolylineItem.ts

@@ -32,7 +32,7 @@ import {
 import { SPoint, SPainter, SRect, SPath } from "@persagy-web/draw";
 
 /**
- * 圆角折线 item
+ * 拐角为圆角折线 item
  *
  * @author 郝建龙 <haojianlong@sagacloud.com>
  */

+ 1 - 1
persagy-web-big/src/items/shape/SLineItem.ts

@@ -37,7 +37,7 @@ import {
 import { SGraphStyleItem } from "@persagy-web/graph/lib";
 
 /**
- * 线 item
+ * 线 item
  *
  * @author 郝建龙 <haojianlong@sagacloud.cn>
  */

+ 30 - 2
persagy-web-edit/src/items/SBaseCirclePolylineEdit.ts

@@ -545,9 +545,12 @@ export default class SBaseCirclePolylineEdit extends SGraphEdit {
             // 点数据列表有效
             let last = new SPoint(event.x, event.y);
             if (this.status == SItemStatus.Create) {
+                // 处于创建态
                 last = this.pointList[this.pointList.length - 1];
             } else if (this.status == SItemStatus.Edit) {
+                // 处于编辑态
                 if (this.curIndex > 1) {
+                    // 当前选中点的索引不是前两个点
                     last = this.pointList[this.curIndex - 1];
                 }
             }
@@ -555,8 +558,10 @@ export default class SBaseCirclePolylineEdit extends SGraphEdit {
             const dx = Math.abs(event.x - last.x);
             const dy = Math.abs(event.y - last.y);
             if (dy > dx) {
+                // y 轴方向差值量大
                 event.x = last.x;
             } else {
+                // x 轴方向差值量大
                 event.y = last.y;
             }
         }
@@ -583,6 +588,7 @@ export default class SBaseCirclePolylineEdit extends SGraphEdit {
      */
     boundingRect(): SRect {
         if (this.pointList.length) {
+            // 当前折线有效
             this.minX = this.pointList[0].x;
             this.maxX = this.pointList[0].x;
             this.minY = this.pointList[0].y;
@@ -590,18 +596,22 @@ export default class SBaseCirclePolylineEdit extends SGraphEdit {
             this.pointList.forEach(it => {
                 let x = it.x,
                     y = it.y;
+                // 计算 x 的最小值
                 if (x < this.minX) {
                     this.minX = x;
                 }
 
+                // 计算 y 的最小值
                 if (y < this.minY) {
                     this.minY = y;
                 }
 
+                // 计算 x 的最大值
                 if (x > this.maxX) {
                     this.maxX = x;
                 }
 
+                // 计算 y 的最大值
                 if (y > this.maxY) {
                     this.maxY = y;
                 }
@@ -625,6 +635,7 @@ export default class SBaseCirclePolylineEdit extends SGraphEdit {
      */
     contains(x: number, y: number): boolean {
         let p = new SPoint(x, y);
+        // 遍历点集列表
         for (let i = 1; i < this.pointList.length; i++) {
             let PTL = SMathUtil.pointToLine(
                 p,
@@ -635,6 +646,7 @@ export default class SBaseCirclePolylineEdit extends SGraphEdit {
                     this.pointList[i].y
                 )
             );
+            // 点击点距离折线的距离在吸附范围内
             if (PTL.MinDis < this.sceneDis) {
                 return true;
             }
@@ -647,6 +659,7 @@ export default class SBaseCirclePolylineEdit extends SGraphEdit {
      * 撤销操作
      */
     undo(): void {
+        // 处于非正常态
         if (this._status != SItemStatus.Normal) {
             this.undoStack.undo();
         }
@@ -656,6 +669,7 @@ export default class SBaseCirclePolylineEdit extends SGraphEdit {
      * 重做操作
      */
     redo(): void {
+        // 处于非正常态
         if (this._status != SItemStatus.Normal) {
             this.undoStack.redo();
         }
@@ -666,9 +680,11 @@ export default class SBaseCirclePolylineEdit extends SGraphEdit {
      */
     cancelOperate(): void {
         if (this.status == SItemStatus.Create) {
+            // 处于创建态
             this.parent = null;
             this.releaseItem();
         } else if (this.status == SItemStatus.Edit) {
+            // 处于编辑态
             this.status = SItemStatus.Normal;
             this.releaseItem();
         }
@@ -682,9 +698,11 @@ export default class SBaseCirclePolylineEdit extends SGraphEdit {
      */
     generatePath(list: SPoint[], r: number = 0): void {
         const len = list.length;
+        // 当前这小有效
         if (len) {
             this.path = new SPath();
             this.path.moveTo(list[0].x, list[0].y);
+            // 遍历点集列表
             for (let i = 1; i < len - 1; i++) {
                 const temp = list[i];
                 const next = list[i + 1];
@@ -704,11 +722,13 @@ export default class SBaseCirclePolylineEdit extends SGraphEdit {
         // 绘制基本图形
         painter.pen.color = this.strokeColor;
         if (this.lineStyle == SLineStyle.Dashed) {
+            // 类型为虚线
             painter.pen.lineDash = [
                 painter.toPx(this.lineWidth * 3),
                 painter.toPx(this.lineWidth * 7)
             ];
         } else if (this.lineStyle == SLineStyle.Dotted) {
+            // 类型为点线
             painter.pen.lineDash = [
                 painter.toPx(this.lineWidth),
                 painter.toPx(this.lineWidth)
@@ -716,18 +736,22 @@ export default class SBaseCirclePolylineEdit extends SGraphEdit {
         }
 
         const temp = JSON.parse(JSON.stringify(this.pointList));
+        // 处于创建态且最后一个点存在
         if (this.status == SItemStatus.Create && this.lastPoint) {
             temp.push(this.lastPoint);
         }
 
         if (temp.length > 2) {
+            // 当前点集中点数超过2个点,生成 path 路径
             let radius = this.radius;
             if (this.radiusIsPx) {
+                // 如果圆角半径需要转像素值
                 radius = painter.toPx(this.radius);
             }
             this.generatePath(temp, radius);
             painter.drawPath(this.path);
         } else {
+            // 否则绘制折线
             painter.drawPolyline(temp);
         }
     }
@@ -739,7 +763,9 @@ export default class SBaseCirclePolylineEdit extends SGraphEdit {
      */
     toData(): any {
         this.moveToOrigin();
+        // 数据不存在,不做转换
         if (!this.data) return;
+        // 遍历点集列表
         const Line = this.pointList.map(pos => {
             return {
                 x: pos.x,
@@ -761,8 +787,8 @@ export default class SBaseCirclePolylineEdit extends SGraphEdit {
     onDraw(painter: SPainter): void {
         // 缓存场景长度
         this.sceneDis = painter.toPx(this.dis);
-        // 创建状态
         painter.pen.lineWidth = painter.toPx(this.lineWidth);
+        // 处于创建状态且最后一个点存在
         if (this.status == SItemStatus.Create && this.lastPoint) {
             // 绘制基本图形
             this.drawBaseLine(painter);
@@ -775,11 +801,13 @@ export default class SBaseCirclePolylineEdit extends SGraphEdit {
                 painter.drawCircle(t.x, t.y, painter.toPx(5));
             });
         } else if (this.status == SItemStatus.Edit) {
+            // 处于编辑状态
             // 绘制基本图形
             this.drawBaseLine(painter);
-            // 编辑状态
+            // 遍历点集列表
             this.pointList.forEach((t, i): void => {
                 painter.brush.color = SColor.White;
+                // 该点是当前选中的点
                 if (i == this.curIndex) {
                     painter.brush.color = this.fillColor;
                 }

+ 39 - 4
persagy-web-edit/src/items/SBaseIconTextEdit.ts

@@ -64,19 +64,25 @@ export class SBaseIconTextEdit extends SGraphEdit {
     set status(v: SItemStatus) {
         this._status = v;
         if (v == SItemStatus.Normal) {
+            // 处于正常态
             this.moveable = true;
+            // 遍历文本 item 列表
             this.textItemList.map(item => {
                 item.moveable = false;
             });
             this.img.moveable = false;
         } else if (v == SItemStatus.Edit) {
+            // 处于编辑态
             this.moveable = false;
+            // 遍历文本 item 列表
             this.textItemList.map(item => {
                 item.moveable = true;
             });
             this.img.moveable = true;
         } else if (v == SItemStatus.Create) {
+            // 处于创建态
             this.moveable = true;
+            // 遍历文本 item 列表
             this.textItemList.map(item => {
                 item.moveable = false;
             });
@@ -94,16 +100,19 @@ export class SBaseIconTextEdit extends SGraphEdit {
         return this._showText;
     }
     set showText(v: boolean) {
+        // 显示状态没变,不执行改变
         if (v === this._showText) {
             return;
         }
 
         this._showText = v;
         if (v) {
+            // 若显示,则遍历文本 item 列表,依次设置显示
             this.textItemList.map(item => {
                 item.show();
             });
         } else {
+            // 若隐藏,则遍历文本 item 列表,依次设置隐藏
             this.textItemList.map(item => {
                 item.hide();
             });
@@ -121,10 +130,12 @@ export class SBaseIconTextEdit extends SGraphEdit {
         }
 
         this._selected = value;
+        // 若选中,放大图片 item
         if (value) {
             this.img.scale = 1.25;
             this.zOrder = ItemOrder.highLightOrder;
         } else {
+            // 否则
             this.img.scale = 1;
             this.zOrder = ItemOrder.markOrder;
         }
@@ -140,13 +151,17 @@ export class SBaseIconTextEdit extends SGraphEdit {
     set isActive(v: boolean) {
         this._isActive = v;
         if (v) {
+            // 激活状态
             this.cursor = "pointer";
+            // 遍历文本 item 列表,设置小手
             this.textItemList.map(item => {
                 item.cursor = "pointer";
             });
             this.img.cursor = "pointer";
         } else {
+            // 非激活状态
             this.cursor = "auto";
+            // 遍历文本 item 列表,设置默认鼠标状态
             this.textItemList.map(item => {
                 item.cursor = "auto";
             });
@@ -233,6 +248,7 @@ export class SBaseIconTextEdit extends SGraphEdit {
     } // Get color
     set color(v: SColor) {
         this._color = v;
+        // 遍历文本 item 列表,依次设置颜色
         this.textItemList.forEach(item => {
             item.color = v;
         });
@@ -246,6 +262,7 @@ export class SBaseIconTextEdit extends SGraphEdit {
     } // Get font
     set font(v: SFont) {
         this._font = v;
+        // 遍历文本 item 列表,依次设置字体
         this.textItemList.forEach((item: SBaseTextEdit, index: number) => {
             item.font = v;
             // item.moveTo(this.img.width * 0.5, v.size * (index - 0.125 - 0.5 * this.textItemList.length));
@@ -278,14 +295,17 @@ export class SBaseIconTextEdit extends SGraphEdit {
     /**
      * 如果 data 设置;初始化data
      */
-    initData() {
+    initData(): void {
+        // 数据不存在,不做处理
         if (!this.data) return;
+        // size 属性存在
         if (this.data.size) {
             this.sWidth = this.data.size.width;
             this.sHeight = this.data.size.height;
         }
         this.img.connect("onMove", this, this.changeAnchorPoint.bind(this));
         const anchorPoint = [{ x: this.img.x, y: this.img.y, id: "" }];
+        // 生成锚点列表
         this.anchorList = anchorPoint.map(t => {
             let item = new SAnchorItem(this);
             if (t.id) {
@@ -303,15 +323,19 @@ export class SBaseIconTextEdit extends SGraphEdit {
             this.data.style.default.textList
         ) {
             const textList = this.data.style.default.textList;
+            // 存在文本列表
             if (textList.length) {
                 const textItemList: any[] = [];
+                // 根据文本列表生成文本 item
                 textList.forEach((item: any, index: number) => {
                     let obj = new SBaseTextEdit(this, null);
                     obj.propertyData = item;
                     obj.text = item.text;
                     if (item.pos) {
+                        // 如果存有位置
                         obj.moveTo(item.pos.x, item.pos.x);
                     } else {
+                        // 没有位置,设置默认位置
                         obj.moveTo(
                             this.img.width * 0.5,
                             -(this.font.size * 1.25 * 0.5) + index * 10
@@ -353,6 +377,7 @@ export class SBaseIconTextEdit extends SGraphEdit {
     removeTextItem(index: number) {
         let [delteItem] = this.textItemList.splice(index, 1);
         if (this.scene) {
+            // 当前 item 场景中
             this.scene.removeItem(delteItem);
         }
     } // Function removeTextItem
@@ -369,6 +394,7 @@ export class SBaseIconTextEdit extends SGraphEdit {
                 { x: this.img.x, y: this.img.y },
                 { x: this.img.x, y: this.img.y }
             ];
+            // 目前四个锚点为同一个位置
             this.anchorList.forEach((item, index) => {
                 item.moveTo(anchorPoint[index].x, anchorPoint[index].y);
             });
@@ -391,9 +417,11 @@ export class SBaseIconTextEdit extends SGraphEdit {
     onMouseDown(event: SMouseEvent): boolean {
         this.curTextItem = null;
         if (this.status == SItemStatus.Normal) {
+            // 处于正常态
             super.onMouseDown(event);
             return true;
         } else if (this.status == SItemStatus.Edit) {
+            // 处于编辑态
             // @ts-ignore
             const ce = SGraphItem.toChildMouseEvent(this, event);
             return super.onMouseDown(ce);
@@ -409,6 +437,7 @@ export class SBaseIconTextEdit extends SGraphEdit {
      */
     onMouseUp(event: SMouseEvent): boolean {
         if (this.status == SItemStatus.Edit) {
+            // 处于编辑态
             return true;
         }
         super.onMouseUp(event);
@@ -434,9 +463,11 @@ export class SBaseIconTextEdit extends SGraphEdit {
     onDoubleClick(event: SMouseEvent): boolean {
         // 如果位show状态 双击改对象则需改为编辑状态
         if (SItemStatus.Normal == this.status) {
+            // 处于正常态
             this.status = SItemStatus.Edit;
             this.grabItem(this);
         } else if (SItemStatus.Edit == this.status) {
+            // 处于编辑态
             this.status = SItemStatus.Normal;
             this.releaseItem();
         }
@@ -455,6 +486,7 @@ export class SBaseIconTextEdit extends SGraphEdit {
             .boundingRect()
             .adjusted(this.img.pos.x, this.img.pos.y, 0, 0);
         if (this.showText) {
+            // 文本处于显示状态,需要将文本所占的区域计算进去
             this.textItemList.forEach(item => {
                 rect = rect.unioned(
                     item.boundingRect().adjusted(item.pos.x, item.pos.y, 0, 0)
@@ -472,17 +504,17 @@ export class SBaseIconTextEdit extends SGraphEdit {
     onDraw(painter: SPainter): void {
         const rect = this.boundingRect();
         const lw = painter.toPx(1);
-        // 编辑态和选中态出现绘制区域
         if (this.status == SItemStatus.Edit || this.selected) {
-            // doto 如果子元素被选中
+            // 编辑态和选中态出现绘制区域
+            // todo 如果子元素被选中
             painter.pen.lineWidth = lw;
             painter.pen.lineDash = [3 * lw, 7 * lw];
             painter.pen.color = SColor.Black;
             painter.brush.color = SColor.Transparent;
             painter.drawRect(rect);
         }
-        // 编辑态出现四个角的圆点
         if (this.status == SItemStatus.Edit) {
+            // 编辑态出现四个角的圆点
             painter.pen.lineDash = [];
             painter.brush.color = SColor.White;
             painter.drawCircle(rect.x, rect.y, 5 * lw);
@@ -531,7 +563,9 @@ export class SBaseIconTextEdit extends SGraphEdit {
      * @return 相关数据
      */
     toData(): any {
+        // 数据存在
         if (this.data) {
+            // 数据中存在大小 size 属性
             if (this.data.size) {
                 this.data.size.width = this.sWidth;
                 this.data.size.height = this.sHeight;
@@ -544,6 +578,7 @@ export class SBaseIconTextEdit extends SGraphEdit {
         }
 
         const anchorPoint = [{ x: this.img.x, y: this.img.y, id: "" }];
+        // 生成锚点 item
         this.anchorList = anchorPoint.map(t => {
             let item = new SAnchorItem(this);
             if (t.id) {

File diff suppressed because it is too large
+ 79 - 52
persagy-web-edit/src/items/SBaseImageEdit.ts


+ 91 - 31
persagy-web-edit/src/items/SBaseLineEdit.ts

@@ -34,7 +34,7 @@ import {
     SLineStyle,
     SGraphItem
 } from "@persagy-web/graph/";
-import { SGraphEdit } from ".."
+import { SGraphEdit } from "..";
 import { Marker } from "../type/Marker";
 
 /**
@@ -47,7 +47,7 @@ export class SBaseLineEdit extends SGraphEdit {
     //属性
 
     /** 编辑相关操作的数据 */
-    data: Marker
+    data: Marker;
     /** 起始锚点 */
     startItem: SGraphItem | null = null;
     /** 结束锚点 */
@@ -71,11 +71,11 @@ export class SBaseLineEdit extends SGraphEdit {
     } // Set line
 
     /** 是否垂直水平绘制 */
-    private _verAndLeve: Boolean = false;
-    get verAndLeve(): Boolean {
+    private _verAndLeve: boolean = false;
+    get verAndLeve(): boolean {
         return this._verAndLeve;
     }
-    set verAndLeve(bool: Boolean) {
+    set verAndLeve(bool: boolean) {
         this._verAndLeve = bool;
         this.update();
     }
@@ -162,32 +162,40 @@ export class SBaseLineEdit extends SGraphEdit {
         super(parent);
         this.showSelect = false;
         this.data = data;
+
+        // 数据中存有样式
         if (data.style) {
-            // 关于顶点
+            // 样式中存在顶点数据
             if (data.style.line) {
+                // 生成顶点数据
                 let setPointList: SPoint[];
-                setPointList = data.style.line.map((i: { x: number; y: number; }) => {
-                    return new SPoint(i.x, i.y)
-                });
+                setPointList = data.style.line.map(
+                    (i: { x: number; y: number }) => {
+                        return new SPoint(i.x, i.y);
+                    }
+                );
                 this.line = setPointList;
             }
+            // 样式中存在默认状态样式
             if (data.style.default) {
-                // 颜色
+                // 设置笔触颜色
                 if (data.style.default.strokeColor) {
-                    this.strokeColor = new SColor(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)
+                    this.fillColor = new SColor(data.style.default.fillColor);
                 }
-                // 线宽
+                // 设置线宽
                 if (data.style.default.lineWidth) {
-                    this.lineWidth = data.style.default.lineWidth
+                    this.lineWidth = data.style.default.lineWidth;
                 }
 
-                // 线样式
+                // 设置线样式
                 if (data.style.default.lineStyle) {
-                    this.lineStyle = data.style.default.lineStyle
+                    this.lineStyle = data.style.default.lineStyle;
                 }
             }
         }
@@ -200,9 +208,11 @@ export class SBaseLineEdit extends SGraphEdit {
      */
     private addPoint(p: SPoint): void {
         if (this.line.length < 2) {
+            // 顶点少于2个
             this.line.push(p);
             this.recordAction(SGraphPointListInsert, [this.line, p]);
         } else {
+            // 否则
             this.line[1] = p;
             this.recordAction(SGraphPointListInsert, [this.line, p, 1]);
             this.status = SItemStatus.Normal;
@@ -221,11 +231,12 @@ export class SBaseLineEdit extends SGraphEdit {
      * @return	该事件是否被处理
      */
     onDoubleClick(event: SMouseEvent): boolean {
-        // 如果为show状态 双击改对象则需改为编辑状态
         if (this.status == SItemStatus.Normal) {
+            // 处于正常态
             this.status = SItemStatus.Edit;
             this.grabItem(this);
-        } else if (this.status == SItemStatus.Edit) { // 编辑状态
+        } else if (this.status == SItemStatus.Edit) {
+            // 处于编辑状态
             this.status = SItemStatus.Normal;
             this.releaseItem();
         }
@@ -244,17 +255,22 @@ export class SBaseLineEdit extends SGraphEdit {
         this.curIndex = -1;
         this.curPoint = null;
         if (event.shiftKey || this._verAndLeve) {
+            // shift 键按下 或者 模拟 shift 键功能开启
             event = this.compare(event);
         }
         if (event.buttons == SMouseButton.LeftButton) {
+            // 左键按下
             if (this.status == SItemStatus.Normal) {
+                // 处于正常态
                 // return super.onMouseDown(event);
                 super.onMouseDown(event);
                 return true;
             } else if (this.status == SItemStatus.Edit) {
+                // 处于编辑态
                 // 判断是否点击到端点上(获取端点索引值)
                 this.findNearestPoint(new SPoint(event.x, event.y));
             } else if (this.status == SItemStatus.Create) {
+                // 处于创建态
                 this.addPoint(new SPoint(event.x, event.y));
                 return true;
             }
@@ -271,7 +287,9 @@ export class SBaseLineEdit extends SGraphEdit {
      */
     onMouseUp(event: SMouseEvent): boolean {
         if (this.status == SItemStatus.Edit) {
+            // 处于编辑态
             if (this.curIndex > -1) {
+                // 有选中的点
                 const p = new SPoint(
                     this.line[this.curIndex].x,
                     this.line[this.curIndex].y
@@ -284,8 +302,9 @@ export class SBaseLineEdit extends SGraphEdit {
                 ]);
             }
         } else if (this.status == SItemStatus.Normal) {
+            // 处于正常态
             super.onMouseUp(event);
-            return true
+            return true;
         }
 
         this.curIndex = -1;
@@ -294,19 +313,21 @@ export class SBaseLineEdit extends SGraphEdit {
     }
 
     /**
-      * 鼠标抬起事件
-      *
-      * @param event     事件参数
-      * @return	 是否处理该事件
-      */
+     * 鼠标抬起事件
+     *
+     * @param event     事件参数
+     * @return	 是否处理该事件
+     */
     onKeyUp(event: KeyboardEvent): void {
-        // 当 ESC 时
         if (27 == event.keyCode) {
+            // esc 按键
             if (this.status == SItemStatus.Edit) {
+                // 处于编辑态
                 this.status = SItemStatus.Normal;
                 this.releaseItem();
             } else if (this.status == SItemStatus.Create) {
-                this.update()
+                // 处于创建态
+                this.update();
                 this.releaseItem();
                 this.parent = null;
             }
@@ -321,21 +342,27 @@ export class SBaseLineEdit extends SGraphEdit {
      */
     onMouseMove(event: SMouseEvent): boolean {
         if (event.shiftKey || this._verAndLeve) {
+            // 按下 shift 键或者模拟 shift 键功能开启
             event = this.compare(event);
         }
 
         if (this.status == SItemStatus.Create) {
+            // 处于创建态
             if (this.line[0] instanceof SPoint) {
+                // 已经生成了一个点
                 this.line[1] = new SPoint(event.x, event.y);
                 this.pointChange();
             }
         } else if (this.status == SItemStatus.Edit) {
+            // 处于编辑态
             if (-1 != this.curIndex) {
+                // 有选中的点
                 this.line[this.curIndex].x = event.x;
                 this.line[this.curIndex].y = event.y;
                 this.pointChange();
             }
         } else {
+            // 处于正常态
             return super.onMouseMove(event);
         }
 
@@ -343,7 +370,7 @@ export class SBaseLineEdit extends SGraphEdit {
         return true;
     }
 
-     /**
+    /**
      * 点发生变化
      */
     protected pointChange(): void {
@@ -357,6 +384,7 @@ export class SBaseLineEdit extends SGraphEdit {
      */
     findNearestPoint(p: SPoint): void {
         let len = this.sceneDis;
+        // 遍历顶点数据
         for (let i = 0; i < this.line.length; i++) {
             let dis = SMathUtil.pointDistance(
                 p.x,
@@ -364,6 +392,7 @@ export class SBaseLineEdit extends SGraphEdit {
                 this.line[i].x + this.x,
                 this.line[i].y + this.y
             );
+            // 该点到线段的距离在吸附范围内
             if (dis < len) {
                 len = dis;
                 this.curIndex = i;
@@ -391,6 +420,7 @@ export class SBaseLineEdit extends SGraphEdit {
      * @param y   y 坐标
      */
     moveToOrigin(): void {
+        // 处理顶点数据
         this.line = this.line.map(t => {
             t.x = t.x + this.x;
             t.y = t.y + this.y;
@@ -408,13 +438,18 @@ export class SBaseLineEdit extends SGraphEdit {
      */
     compare(event: SMouseEvent): SMouseEvent {
         if (this.line.length) {
+            // 顶点数据存在
             let last = new SPoint(event.x, event.y);
             if (this.status == SItemStatus.Create) {
+                // 处于创建态
                 last = this.line[0];
             } else if (this.status == SItemStatus.Edit) {
+                // 处于编辑态
                 if (this.curIndex == 1) {
+                    // 编辑的是第一个点
                     last = this.line[0];
                 } else if (this.curIndex == 0) {
+                    // 编辑的是第二个点
                     last = this.line[1];
                 }
             }
@@ -422,8 +457,10 @@ export class SBaseLineEdit extends SGraphEdit {
             const dx = Math.abs(event.x - last.x);
             const dy = Math.abs(event.y - last.y);
             if (dy > dx) {
+                // y 轴方向偏移量,锁定 x 坐标
                 event.x = last.x;
             } else {
+                // x 轴方向偏移量大,锁定 y 坐标
                 event.y = last.y;
             }
         }
@@ -440,11 +477,13 @@ export class SBaseLineEdit extends SGraphEdit {
      */
     contains(x: number, y: number): boolean {
         if (this.line.length == 2) {
+            // 顶点创建完成
             let p = new SPoint(x, y);
             if (
                 SMathUtil.pointToLine(p, new SLine(this.line[0], this.line[1]))
                     .MinDis < this.sceneDis
             ) {
+                // 该点在线的吸附范围内
                 return true;
             }
         }
@@ -457,6 +496,7 @@ export class SBaseLineEdit extends SGraphEdit {
      */
     undo(): void {
         if (this.status != SItemStatus.Normal) {
+            // 处于非正常态
             this.undoStack.undo();
         }
     }
@@ -466,6 +506,7 @@ export class SBaseLineEdit extends SGraphEdit {
      */
     redo(): void {
         if (this.status != SItemStatus.Normal) {
+            // 处于非正常态
             this.undoStack.redo();
         }
     }
@@ -475,9 +516,11 @@ export class SBaseLineEdit extends SGraphEdit {
      */
     cancelOperate(): void {
         if (this.status == SItemStatus.Create) {
+            // 处于创建态
             this.parent = null;
             this.releaseItem();
         } else if (this.status == SItemStatus.Edit) {
+            // 处于编辑态
             this.status = SItemStatus.Normal;
             this.releaseItem();
         }
@@ -490,26 +533,32 @@ export class SBaseLineEdit extends SGraphEdit {
      */
     boundingRect(): SRect {
         if (this.line.length) {
+            // 已创建顶点
             this.minX = this.line[0].x;
             this.maxX = this.line[0].x;
             this.minY = this.line[0].y;
             this.maxY = this.line[0].y;
+            // 遍历顶点数据
             this.line.forEach(it => {
                 let x = it.x,
                     y = it.y;
                 if (x < this.minX) {
+                    // 保存 x 最小值
                     this.minX = x;
                 }
 
                 if (y < this.minY) {
+                    // 保存 y 最小值
                     this.minY = y;
                 }
 
                 if (x > this.maxX) {
+                    // 保存 x 最大值
                     this.maxX = x;
                 }
 
                 if (y > this.maxY) {
+                    // 保存 y 最大值
                     this.maxY = y;
                 }
             });
@@ -529,14 +578,17 @@ export class SBaseLineEdit extends SGraphEdit {
      * @return	对象数据
      */
     toData(): any {
-        this.moveToOrigin()
-        const Line = [{ x: this.line[0].x, y: this.line[0].y }, { x: this.line[1].x, y: this.line[1].y }];
+        this.moveToOrigin();
+        const Line = [
+            { x: this.line[0].x, y: this.line[0].y },
+            { x: this.line[1].x, y: this.line[1].y }
+        ];
         this.data.style.line = Line;
         this.data.style.default.lineWidth = this.lineWidth;
         this.data.style.default.lineStyle = this.lineStyle;
         this.data.style.default.strokeColor = this.strokeColor.value;
         this.data.style.default.fillColor = this.fillColor.value;
-        return this.data
+        return this.data;
     }
 
     /**
@@ -549,14 +601,17 @@ export class SBaseLineEdit extends SGraphEdit {
         painter.pen.lineWidth = painter.toPx(this.lineWidth);
         painter.pen.color = this.strokeColor;
         if (this.line.length == 2) {
+            // 顶点创建完成
             // 绘制直线
             painter.pen.color = this.strokeColor;
             if (this.lineStyle == SLineStyle.Dashed) {
+                // 线类型为虚线
                 painter.pen.lineDash = [
                     painter.toPx(this.lineWidth * 3),
                     painter.toPx(this.lineWidth * 7)
                 ];
             } else if (this.lineStyle == SLineStyle.Dotted) {
+                // 线类型为点线
                 painter.pen.lineDash = [
                     painter.toPx(2 * this.lineWidth),
                     painter.toPx(2 * this.lineWidth)
@@ -564,6 +619,7 @@ export class SBaseLineEdit extends SGraphEdit {
             }
 
             if (this.selected && this.status == SItemStatus.Normal) {
+                // 被选中而且处于正常态
                 painter.pen.lineWidth = painter.toPx(this.lineWidth * 2);
                 painter.shadow.shadowBlur = 10;
                 painter.shadow.shadowColor = new SColor(`#00000033`);
@@ -576,20 +632,24 @@ export class SBaseLineEdit extends SGraphEdit {
                 this.status == SItemStatus.Edit ||
                 this.status == SItemStatus.Create
             ) {
+                // 处于创建态或编辑态
                 // 绘制端点
                 this.line.forEach((p, i): void => {
                     painter.brush.color = this.fillColor;
                     if (i == this.curIndex) {
+                        // 当前选中的顶点特殊颜色
                         painter.brush.color = this.activeFillColor;
                     }
                     painter.drawCircle(p.x, p.y, painter.toPx(5));
                 });
             }
         } else if (this.line.length == 1) {
+            // 只有一个顶点数据
             if (
                 this.status == SItemStatus.Edit ||
                 this.status == SItemStatus.Create
             ) {
+                // 处于编辑态或者创建态
                 // 绘制端点
                 painter.brush.color = this.fillColor;
                 painter.drawCircle(

+ 12 - 0
persagy-web-edit/src/items/SBaseMaskEdit.ts

@@ -54,18 +54,24 @@ export default class SBaseMaskEdit extends SBaseRectEdit {
      * 计算矩形的左上角和右下角
      */
     protected calRect(): void {
+        // 顶点个数超过1个
         if (this.line.length > 1) {
             const fi = this.line[0];
             const se = this.line[1];
             let minx, maxx, miny, maxy;
+            // 比较并获得最大 x 值和最小 x 值
+            // 第一个点的 x 坐标较小
             if (fi.x < se.x) {
                 minx = fi.x;
                 maxx = se.x;
             } else {
+                // 否则
                 minx = se.x;
                 maxx = fi.x;
             }
 
+            // 比较并获得最大 y 值和最小 y 值
+            // 第一个坐标的 y 坐标较小
             if (fi.y < se.y) {
                 miny = fi.y;
                 maxy = se.y;
@@ -113,7 +119,9 @@ export default class SBaseMaskEdit extends SBaseRectEdit {
     }
 
     onMouseUp(event: SMouseEvent): boolean {
+        // 处于非创建态
         if (this.status != SItemStatus.Create) {
+            // 被选中
             if (this.selected) {
                 try {
                     // @ts-ignore
@@ -134,6 +142,7 @@ export default class SBaseMaskEdit extends SBaseRectEdit {
      * @param painter   绘制对象
      */
     onDraw(painter: SPainter): void {
+        // 顶点个数为 2 个
         if (this.line.length == 2) {
             painter.pen.color = this.strokeColor;
             painter.brush.color = this.fillColor;
@@ -145,12 +154,15 @@ export default class SBaseMaskEdit extends SBaseRectEdit {
                 // 否则
                 painter.pen.lineWidth = this.lineWidth;
             }
+            // 虚线类型
             if (this.lineStyle == SLineStyle.Dashed) {
                 painter.pen.lineDash = [eachPx * 3, eachPx * 7];
             } else if (this.lineStyle == SLineStyle.Dotted) {
+                // 点线类型
                 painter.pen.lineDash = [2 * eachPx, 2 * eachPx];
             }
 
+            // 蒙版生成
             if (this.mask) {
                 painter.drawPath(this.mask);
             }

+ 86 - 11
persagy-web-edit/src/items/SBasePolygonEdit.ts

@@ -157,14 +157,18 @@ export class SBasePolygonEdit extends SGraphEdit {
         this.name = data.name;
         this.showSelect = false;
         // this.text = data.Name;
+        // 样式存在
         if (data.style) {
             this.setPointList = [];
             let setPointList: SPoint[];
+            // 样式中存有轮廓线数据
             if (data.style.outLine) {
+                // 轮廓线内容类型是 SPoint 类型
                 if (data.style.outLine[0] instanceof SPoint) {
                     // @ts-ignore
                     this.setPointList = data.style.outLine;
                 } else {
+                    // 否则
                     setPointList = data.style.outLine.map(i => {
                         return new SPoint(i.x, i.y);
                     });
@@ -174,7 +178,7 @@ export class SBasePolygonEdit extends SGraphEdit {
 
             // 样式相关
             if (data.style.default) {
-                // 颜色
+                // 线条颜色
                 if (data.style.default.strokeColor) {
                     this.strokeColor = new SColor(
                         data.style.default.strokeColor
@@ -242,9 +246,11 @@ export class SBasePolygonEdit extends SGraphEdit {
      */
     insertPoint(x: number, y: number, i: number | null = null): SPoint {
         const point = new SPoint(x, y);
+        // 没有传入索引
         if (i == null) {
             this.pointList.push(point);
         } else {
+            // 否则
             this.pointList.splice(i, 0, point);
         }
 
@@ -260,18 +266,24 @@ export class SBasePolygonEdit extends SGraphEdit {
      */
     deletePoint(i: number | null = null): SPoint | null {
         let point;
+        // 传入删除的索引
         if (i != null) {
+            // 索引值无效
             if (i >= this.pointList.length || i < 0) {
                 point = null;
             } else {
+                // 否则
                 point = new SPoint(this.pointList[i].x, this.pointList[i].y);
                 this.pointList.splice(i, 1);
             }
         } else {
+            // 否则
+            // 轮廓线数据存在
             if (this.pointList.length) {
                 point = this.pointList[this.pointList.length - 1];
                 this.pointList.pop();
             } else {
+                // 否则
                 point = null;
             }
         }
@@ -292,10 +304,12 @@ export class SBasePolygonEdit extends SGraphEdit {
      */
     movePoint(x: number, y: number, i: number): SPoint | null {
         let point;
+        // 索引值无效
         if (i >= this.pointList.length || i < 0) {
             return null;
         }
 
+        // 轮廓线数据存在
         if (this.pointList.length) {
             this.pointList[i].x = x;
             this.pointList[i].y = y;
@@ -317,25 +331,28 @@ export class SBasePolygonEdit extends SGraphEdit {
         painter.pen.color = this.strokeColor;
         painter.brush.color = this.fillColor;
         painter.pen.lineWidth = painter.toPx(this.lineWidth);
+        // 线类型为虚线
         if (this.lineStyle == SLineStyle.Dashed) {
             painter.pen.lineDash = [
                 painter.toPx(this.lineWidth * 3),
                 painter.toPx(this.lineWidth * 7)
             ];
         } else if (this.lineStyle == SLineStyle.Dotted) {
+            // 线类型为点线
             painter.pen.lineDash = [
                 painter.toPx(this.lineWidth),
                 painter.toPx(this.lineWidth)
             ];
         }
 
-        // 是否选中
+        // 选中
         if (this.selected) {
             painter.shadow.shadowBlur = 10;
             painter.shadow.shadowColor = new SColor(`#00000033`);
             painter.shadow.shadowOffsetX = 5;
             painter.shadow.shadowOffsetY = 5;
         } else {
+            // 否则
             painter.shadow.shadowColor = SColor.Transparent;
         }
 
@@ -353,6 +370,7 @@ export class SBasePolygonEdit extends SGraphEdit {
         painter.pen.lineCapStyle = SLineCapStyle.Square;
         painter.pen.color = this.strokeColor;
         painter.pen.lineWidth = painter.toPx(this.lineWidth);
+        // 最后一个点存在而且轮廓线数据有效
         if (this.lastPoint && pointList.length) {
             painter.drawLine(
                 pointList[pointList.length - 1].x,
@@ -366,6 +384,7 @@ export class SBasePolygonEdit extends SGraphEdit {
         painter.pen.color = SColor.Transparent;
         painter.brush.color = new SColor(this.fillColor.value);
         painter.pen.lineWidth = painter.toPx(this.lineWidth);
+        // 最后一个点存在
         if (this.lastPoint) {
             painter.drawPolygon([...pointList, this.lastPoint]);
             // 绘制顶点块
@@ -374,8 +393,9 @@ export class SBasePolygonEdit extends SGraphEdit {
             pointList.forEach(item => {
                 painter.drawCircle(item.x, item.y, painter.toPx(this.len / 2));
             });
-            // 如果最后一个点在第一个点的灵敏度范围内,第一个点填充变红
+            // 轮廓线有效
             if (this.pointList.length) {
+                // 如果最后一个点在第一个点的灵敏度范围内,第一个点填充变红
                 if (
                     SMathUtil.pointDistance(
                         this.lastPoint.x,
@@ -395,6 +415,7 @@ export class SBasePolygonEdit extends SGraphEdit {
                 }
             }
         } else {
+            // 否则
             painter.drawPolygon(pointList);
         }
     }
@@ -416,8 +437,10 @@ export class SBasePolygonEdit extends SGraphEdit {
         // 绘制顶点块
         painter.pen.color = SColor.Black;
         painter.brush.color = SColor.White;
+        // 遍历轮廓线列表
         pointList.forEach((item, index) => {
             painter.brush.color = SColor.White;
+            // 设置选中点样式
             if (index == this.curIndex) {
                 painter.brush.color = new SColor("#2196f3");
             }
@@ -437,6 +460,7 @@ export class SBasePolygonEdit extends SGraphEdit {
             // 1 判断是否点击在多边形顶点
             let lenIndex = -1; // 当前点击到的点位索引;
             let curenLen = this.scenceLen; // 当前的灵敏度
+            // 遍历轮廓线列表
             this.pointList.forEach((item, index) => {
                 let dis = SMathUtil.pointDistance(
                     event.x,
@@ -444,6 +468,7 @@ export class SBasePolygonEdit extends SGraphEdit {
                     item.x,
                     item.y
                 );
+                // 鼠标点在线段的吸附范围内
                 if (dis < curenLen) {
                     curenLen = dis;
                     lenIndex = index;
@@ -452,6 +477,7 @@ export class SBasePolygonEdit extends SGraphEdit {
 
             // 若点击到,对该索引对应的点做删除
             if (lenIndex != -1) {
+                // 顶点个数小于3个
                 if (this.pointList.length <= 3) {
                     return;
                 }
@@ -469,11 +495,13 @@ export class SBasePolygonEdit extends SGraphEdit {
                 ]);
             }
         } else {
+            // 否则
             // 1 判断是否点击在多边形顶点
             this.curIndex = -1;
             this.curPoint = null;
             let lenIndex = -1; // 当前点击到的点位索引;
             let curenLen = this.scenceLen; // 当前的灵敏度
+            // 遍历轮廓线数据
             this.pointList.forEach((item, index) => {
                 let dis = SMathUtil.pointDistance(
                     event.x,
@@ -481,12 +509,14 @@ export class SBasePolygonEdit extends SGraphEdit {
                     item.x,
                     item.y
                 );
+                // 鼠标点在线段的吸附范围内
                 if (dis < curenLen) {
                     curenLen = dis;
                     lenIndex = index;
                 }
             });
             this.curIndex = lenIndex;
+            // 有选中的点
             // 2判断是否点击在多边形得边上
             if (-1 == lenIndex) {
                 let len = SMathUtil.pointToLine(
@@ -494,18 +524,21 @@ export class SBasePolygonEdit extends SGraphEdit {
                         new SLine(this.pointList[0], this.pointList[1])
                     ),
                     index = 0;
+                // 顶点数据个数超过3个,即有效多边形
                 if (this.pointList.length > 2) {
                     for (let i = 1; i < this.pointList.length; i++) {
                         let dis = SMathUtil.pointToLine(
                             new SPoint(event.x, event.y),
                             new SLine(this.pointList[i], this.pointList[i + 1])
                         );
+                        // 是最后一个点,则使用最后一个点链接第一个点生成线
                         if (i + 1 == this.pointList.length) {
                             dis = SMathUtil.pointToLine(
                                 new SPoint(event.x, event.y),
                                 new SLine(this.pointList[i], this.pointList[0])
                             );
                         }
+                        // 该点在多变形的吸附范围内
                         if (dis.MinDis < len.MinDis) {
                             len = dis;
                             index = i;
@@ -560,6 +593,7 @@ export class SBasePolygonEdit extends SGraphEdit {
      * 执行取消操作执行
      */
     undo(): void {
+        // 处于正常态
         if (this.status == SItemStatus.Normal) {
             return;
         }
@@ -570,6 +604,7 @@ export class SBasePolygonEdit extends SGraphEdit {
      * 执行重做操作执行
      */
     redo(): void {
+        // 处于正常态
         if (this.status == SItemStatus.Normal) {
             return;
         }
@@ -587,11 +622,12 @@ export class SBasePolygonEdit extends SGraphEdit {
      * @return  是否处理该事件
      */
     onDoubleClick(event: SMouseEvent): boolean {
-        // 如果位show状态 双击改对象则需改为编辑状
+        // 处于正常
         if (SItemStatus.Normal == this.status) {
             this.status = SItemStatus.Edit;
             this.grabItem(this);
         } else if (SItemStatus.Edit == this.status) {
+            // 处于编辑态
             this.status = SItemStatus.Normal;
             this.releaseItem();
         }
@@ -607,10 +643,13 @@ export class SBasePolygonEdit extends SGraphEdit {
      * @return  是否处理该事件
      */
     onKeyDown(event: KeyboardEvent): boolean {
+        // 处于正常态
         if (this.status == SItemStatus.Normal) {
             return false;
         } else if (this.status == SItemStatus.Create) {
+            // 处于创建态
             if (event.code == "Enter") {
+                // 按下 enter 键
                 // 当顶点大于二个时才又条件执行闭合操作并清空堆栈
                 if (this.pointList.length > 2) {
                     this.status = SItemStatus.Normal;
@@ -621,7 +660,9 @@ export class SBasePolygonEdit extends SGraphEdit {
                 }
             }
         } else if (this.status == SItemStatus.Edit) {
+            // 处于编辑态
             if (event.key == "Alt") {
+                // 按下 alt 键
                 this.isAlt = true;
             }
         }
@@ -637,11 +678,15 @@ export class SBasePolygonEdit extends SGraphEdit {
      */
     onKeyUp(event: KeyboardEvent): void {
         if (this.status == SItemStatus.Edit) {
+            // 处于编辑态
             if (event.key == "Alt") {
+                // 按下 alt 键
                 this.isAlt = false;
             } else if (event.keyCode == SKeyCode.Delete) {
+                // 按下 delete 键
                 // 当多边形的顶点大于三个允许删除点
                 if (this.pointList.length > 3) {
+                    // 顶点个数超过 3 个可以删除
                     this.deletePoint(this.curIndex);
                 }
             }
@@ -657,14 +702,16 @@ export class SBasePolygonEdit extends SGraphEdit {
      * @return	 是否处理该事件
      */
     onMouseDown(event: SMouseEvent): boolean {
+        // 按下 shift 键
         if (event.shiftKey) {
             event = this.compare(event);
         }
 
-        // 如果状态为编辑状态则添加点
+        // 处于创建态
         if (this.status == SItemStatus.Create) {
             // 新增顶点
             let len = -1;
+            // 轮廓线数据有效
             if (this.pointList.length) {
                 len = SMathUtil.pointDistance(
                     event.x,
@@ -674,6 +721,7 @@ export class SBasePolygonEdit extends SGraphEdit {
                 );
             }
 
+            // 顶点个数超过 2 个且距离第一个点的距离大于0且在多边形吸附范围内
             if (this.pointList.length > 2 && len > 0 && len < this.scenceLen) {
                 this.status = SItemStatus.Normal;
                 //3 传递完成事件状态
@@ -681,15 +729,17 @@ export class SBasePolygonEdit extends SGraphEdit {
                 //1 grabItem 置为null
                 this.releaseItem();
             } else {
+                // 否则
                 this.insertPoint(event.x, event.y);
                 // 记录新增顶点操作记录压入堆栈
                 let pos = new SPoint(event.x, event.y);
                 this.recordAction(SGraphPointListInsert, [this.pointList, pos]);
             }
         } else if (this.status == SItemStatus.Edit) {
-            // 对多边形数组做编辑操作
+            // 处于编辑态,对多边形数组做编辑操作
             this.editPolygonPoint(event);
         } else {
+            // 否则
             // return super.onMouseDown(event);
             super.onMouseDown(event);
         }
@@ -724,17 +774,22 @@ export class SBasePolygonEdit extends SGraphEdit {
      * @return 是否处理该事件
      */
     onMouseMove(event: SMouseEvent): boolean {
+        // shift 键被按下
         if (event.shiftKey) {
             event = this.compare(event);
         }
 
+        // 处于创建态
         if (this.status == SItemStatus.Create) {
             this.lastPoint = new SPoint();
             this.lastPoint.x = event.x;
             this.lastPoint.y = event.y;
             this.update();
         } else if (this.status == SItemStatus.Edit) {
+            // 处于编辑态
+            // 鼠标左键移动
             if (event.buttons == 1) {
+                // 有选中的点
                 if (-1 != this.curIndex) {
                     this.pointList[this.curIndex].x = event.x;
                     this.pointList[this.curIndex].y = event.y;
@@ -742,6 +797,7 @@ export class SBasePolygonEdit extends SGraphEdit {
             }
             this.update();
         } else {
+            // 否则
             return super.onMouseMove(event);
         }
 
@@ -754,11 +810,15 @@ export class SBasePolygonEdit extends SGraphEdit {
      * @param event   事件
      */
     compare(event: SMouseEvent): SMouseEvent {
+        // 轮廓线有效
         if (this.pointList.length) {
             let last = new SPoint(event.x, event.y);
+            // 处于创建态
             if (this.status == SItemStatus.Create) {
                 last = this.pointList[this.pointList.length - 1];
             } else if (this.status == SItemStatus.Edit) {
+                // 处于编辑态
+                // 当前有选中的点
                 if (this.curIndex > 0) {
                     last = this.pointList[this.curIndex - 1];
                 }
@@ -766,9 +826,11 @@ export class SBasePolygonEdit extends SGraphEdit {
 
             const dx = Math.abs(event.x - last.x);
             const dy = Math.abs(event.y - last.y);
+            // y 轴方向偏移量较大,则锁定 x 坐标
             if (dy > dx) {
                 event.x = last.x;
             } else {
+                // 否则,锁定 y 轴坐标
                 event.y = last.y;
             }
         }
@@ -783,7 +845,9 @@ export class SBasePolygonEdit extends SGraphEdit {
      * @return 是否处理该事件
      */
     onMouseUp(event: SMouseEvent): boolean {
+        // 处于编辑态
         if (this.status == SItemStatus.Edit) {
+            // 当前有选中的点
             if (-1 != this.curIndex) {
                 const pos = new SPoint(
                     this.pointList[this.curIndex].x,
@@ -797,6 +861,7 @@ export class SBasePolygonEdit extends SGraphEdit {
                 ]);
             }
         } else if (this.status == SItemStatus.Normal) {
+            // 处于正常态
             return super.onMouseUp(event);
         }
         return true;
@@ -806,6 +871,7 @@ export class SBasePolygonEdit extends SGraphEdit {
      * 移动后处理所有坐标,并肩原点置为场景原点
      */
     moveToOrigin(): void {
+        // 遍历顶点列表
         this.pointList = this.pointList.map(t => {
             t.x = t.x + this.x;
             t.y = t.y + this.y;
@@ -832,10 +898,10 @@ export class SBasePolygonEdit extends SGraphEdit {
     cancelOperate(): void {
         // 当状态为展示状态
         if (this.status == SItemStatus.Create) {
-            // 闭合多边形
+            // 处于创建态
             this.parent = null;
         } else if (this.status == SItemStatus.Edit) {
-            // 编辑状态
+            // 处于编辑状态
             this.status = SItemStatus.Normal;
         }
 
@@ -848,26 +914,32 @@ export class SBasePolygonEdit extends SGraphEdit {
      * @return 边界区域
      */
     boundingRect(): SRect {
+        // 轮廓线有效
         if (this.pointList.length) {
             this.minX = this.pointList[0].x;
             this.maxX = this.pointList[0].x;
             this.minY = this.pointList[0].y;
             this.maxY = this.pointList[0].y;
+            // 遍历顶点列表
             this.pointList.forEach(it => {
                 let x = it.x,
                     y = it.y;
+                // 保存 x 最小值
                 if (x < this.minX) {
                     this.minX = x;
                 }
 
+                // 保存 y 最小值
                 if (y < this.minY) {
                     this.minY = y;
                 }
 
+                // 保存 x 最大值
                 if (x > this.maxX) {
                     this.maxX = x;
                 }
 
+                // 保存 y 最大值
                 if (y > this.maxY) {
                     this.maxY = y;
                 }
@@ -891,6 +963,7 @@ export class SBasePolygonEdit extends SGraphEdit {
      */
     contains(x: number, y: number): boolean {
         let arr = this.pointList;
+        // 轮廓线数据无效或者该点不在多边形内部
         if (arr.length < 3 || !SPolygonUtil.pointIn(x, y, arr)) {
             return false;
         }
@@ -905,6 +978,7 @@ export class SBasePolygonEdit extends SGraphEdit {
      */
     toData(): any {
         this.moveToOrigin();
+        // 遍历顶点列表
         const Line = this.pointList.map(pos => {
             return {
                 x: pos.x,
@@ -929,6 +1003,7 @@ export class SBasePolygonEdit extends SGraphEdit {
     resize(old: SSize, newS: SSize): void {
         const xs = newS.width / old.width;
         const ys = newS.height / old.height;
+        // 遍历顶点列表,
         this.pointList = this.pointList.map(item => {
             item.x = item.x * xs;
             item.y = item.y * ys;
@@ -945,13 +1020,13 @@ export class SBasePolygonEdit extends SGraphEdit {
         this.scenceLen = painter.toPx(this.len);
         // 当状态为展示状态
         if (this.status == SItemStatus.Normal) {
-            // 闭合多边形
+            // 处于正常态
             this.drawShowPolygon(painter, this.pointList);
         } else if (this.status == SItemStatus.Create) {
-            // 创建
+            // 处于创建态
             this.drawCreatePolygon(painter, this.pointList);
         } else {
-            // 编辑状态
+            // 处于编辑状态
             this.drawEditPolygon(painter, this.pointList);
         }
     }