Jelajahi Sumber

注释修改

haojianlong 4 tahun lalu
induk
melakukan
2a99bcb28b

+ 2 - 1
persagy-web-edit/src/items/SBaseImageEdit.ts

@@ -560,13 +560,14 @@ export class SBaseImageEdit extends SGraphEdit {
             painter.drawImage(this.img, 0, 0, this.imgWidth, this.imgHeight);
         }
 
-        // 是否选中
         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;
         }
 

+ 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);
         }
     }