Kaynağa Gözat

注释修改

haojianlong 4 yıl önce
ebeveyn
işleme
4514ca5dfd

+ 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) {

Dosya farkı çok büyük olduğundan ihmal edildi
+ 77 - 51
persagy-web-edit/src/items/SBaseImageEdit.ts