Merge branch 'master' of http://39.106.8.246:3003/web/persagy_topo_editer

package.json

@@ -9,9 +9,9 @@
   },
   "dependencies": {
     "@persagy-web/base": "2.2.1",
-    "@persagy-web/big": "2.2.11",
+    "@persagy-web/big": "2.2.13",
     "@persagy-web/draw": "2.2.8",
-    "@persagy-web/graph": "2.2.15",
+    "@persagy-web/graph": "2.2.17",
     "ant-design-vue": "^1.6.5",
     "axios": "^0.20.0",
     "core-js": "^3.6.5",

src/components/editClass/big-edit/items/SBaseArrowEdit.ts

@@ -43,12 +43,27 @@ export class SBaseArrowEdit extends SArrowEdit {
     constructor(parent: SGraphItem | null, data: Marker) {
         super(parent);
         this.data = data;
-        if (data.Style && data.Style.Line) {
-            let setPointList: SPoint[];
-            setPointList = data.Style.Line.map((i:any) => {
-                return new SPoint(i.X, i.Y)
-            });
-            this.line = setPointList;
+        if (data.Style && data.Style.Default) {
+            // 关于顶点
+            if (data.Style.Default.Line) {
+                let setPointList: SPoint[];
+                setPointList = data.Style.Default.Line.map(i => {
+                    return new SPoint(i.X, i.Y)
+                });
+                this.line = setPointList;
+            }
+            // 颜色
+            if (data.Style.Default.StrokeColor) {
+                this.strokeColor = new SColor(data.Style.Default.StrokeColor)
+            }
+            // 线宽
+            if (data.Style.Default.LineWidth) {
+                this.lineWidth = data.Style.Default.LineWidth
+            }
+            // 线样式
+            if (data.Style.Default.LineStyle) {
+                this.lineStyle = data.Style.Default.LineStyle
+            }
         }
     }
     /**

src/components/editClass/big-edit/items/SBaseCircleEdit.ts

@@ -43,12 +43,27 @@ export class SBaseCircleEdit extends SCircleEdit {
     constructor(parent: SGraphItem | null, data: Marker) {
         super(parent);
         this.data = data;
-        if (data.Style && data.Style.Line) {
-            let setPointList: SPoint[];
-            setPointList = data.Style.Line.map((i:any) => {
-                return new SPoint(i.X, i.Y)
-            });
-            this.line = setPointList;
+        if (data.Style && data.Style.Default) {
+            // 关于顶点
+            if (data.Style.Default.Line) {
+                let setPointList: SPoint[];
+                setPointList = data.Style.Default.Line.map(i => {
+                    return new SPoint(i.X, i.Y)
+                });
+                this.line = setPointList;
+            }
+            // 颜色
+            if (data.Style.Default.StrokeColor) {
+                this.strokeColor = new SColor(data.Style.Default.StrokeColor)
+            }
+            // 线宽
+            if (data.Style.Default.LineWidth) {
+                this.lineWidth = data.Style.Default.LineWidth
+            }
+            // 线样式
+            if (data.Style.Default.LineStyle) {
+                this.lineStyle = data.Style.Default.LineStyle
+            }
         }
     }
     /**

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

@@ -43,12 +43,27 @@ export class SBaseRectEdit extends SRectEdit {
     constructor(parent: SGraphItem | null, data: Marker) {
         super(parent);
         this.data = data;
-        if (data.Style && data.Style.Line) {
-            let setPointList: SPoint[];
-            setPointList = data.Style.Line.map((i:any) => {
-                return new SPoint(i.X, i.Y)
-            });
-            this.line = setPointList;
+        if (data.Style && data.Style.Default) {
+            // 关于顶点
+            if (data.Style.Default.Line) {
+                let setPointList: SPoint[];
+                setPointList = data.Style.Default.Line.map(i => {
+                    return new SPoint(i.X, i.Y)
+                });
+                this.line = setPointList;
+            }
+            // 颜色
+            if (data.Style.Default.StrokeColor) {
+                this.strokeColor = new SColor(data.Style.Default.StrokeColor)
+            }
+            // 线宽
+            if (data.Style.Default.LineWidth) {
+                this.lineWidth = data.Style.Default.LineWidth
+            }
+            // 线样式
+            if (data.Style.Default.LineStyle) {
+                this.lineStyle = data.Style.Default.LineStyle
+            }
         }
     }
     /**

src/components/editClass/big-edit/items/SBaseTriangleEdit.ts

@@ -43,12 +43,27 @@ export class SBaseTriangelEdit extends STriangleEdit {
     constructor(parent: SGraphItem | null, data: Marker) {
         super(parent);
         this.data = data;
-        if (data.Style && data.Style.Line) {
-            let setPointList: SPoint[];
-            setPointList = data.Style.Line.map((i:any) => {
-                return new SPoint(i.X, i.Y)
-            });
-            this.line = setPointList;
+        if (data.Style && data.Style.Default) {
+            // 关于顶点
+            if (data.Style.Default.Line) {
+                let setPointList: SPoint[];
+                setPointList = data.Style.Default.Line.map(i => {
+                    return new SPoint(i.X, i.Y)
+                });
+                this.line = setPointList;
+            }
+            // 颜色
+            if (data.Style.Default.StrokeColor) {
+                this.strokeColor = new SColor(data.Style.Default.StrokeColor)
+            }
+            // 线宽
+            if (data.Style.Default.LineWidth) {
+                this.lineWidth = data.Style.Default.LineWidth
+            }
+            // 线样式
+            if (data.Style.Default.LineStyle) {
+                this.lineStyle = data.Style.Default.LineStyle
+            }
         }
     }
     /**

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

@@ -28,7 +28,7 @@ import { SMouseButton, SMouseEvent, SUndoStack } from "@persagy-web/base";
 import { SItemStatus } from "@persagy-web/big";;
 import {
   SLineStyle,
-  SGraphItem, SGraphPointListInsert
+  SGraphItem, SGraphPointListInsert, SGraphPointListUpdate
 } from "@persagy-web/graph/";
 import { SGraphEdit } from "..";
 import { SMathUtil } from '@persagy-web/big/lib/utils/SMathUtil';
@@ -66,6 +66,20 @@ export class SArrowEdit extends SGraphEdit {
   dis: number = 5;
   /** 拖动灵敏度   */
   private sceneDis: number = 5;
+  /** 是否垂直水平绘制   */
+  private _verAndLeve: Boolean = false;
+  get verAndLeve(): Boolean {
+    return this._verAndLeve;
+  }
+  set verAndLeve(bool: Boolean) {
+    this._verAndLeve = bool;
+    this.update();
+  }
+  /** 当前点索引   */
+  curIndex: number = -1;
+
+  /** 当前点坐标   */
+  private curPoint: SPoint | null = null;
   /** 线条颜色    */
   _strokeColor: SColor = SColor.Black;
   get strokeColor(): SColor {
@@ -84,6 +98,15 @@ export class SArrowEdit extends SGraphEdit {
     this._fillColor = v;
     this.update();
   }
+  /** 选中端点填充色 */
+  private _activeFillColor: SColor = new SColor("#2196f3");
+  get activeFillColor(): SColor {
+      return this._activeFillColor;
+  }
+  set activeFillColor(v: SColor) {
+      this._activeFillColor = v;
+      this.update();
+  }
   /** 边框样式 */
   _lineStyle: SLineStyle = SLineStyle.Solid;
   get lineStyle(): SLineStyle {
@@ -113,6 +136,7 @@ export class SArrowEdit extends SGraphEdit {
    */
   constructor(parent: SGraphItem | null, l?: SPoint | SPoint[]) {
     super(parent);
+    this.showSelect = false;
     if (l) {
       if (l instanceof SPoint) {
         this.line.push(l);
@@ -128,19 +152,22 @@ export class SArrowEdit extends SGraphEdit {
   } // Constructor
 
   /**
-   * 大小改变
-  */
-  resize(oldSize: SRect, newSize: SRect): void {
-    const xs = newSize.width / oldSize.width;
-    const ys = newSize.height / oldSize.height;
-    this.line = this.line.map(t => {
-      t.x = t.x * xs;
-      t.y = t.y * ys;
-      return t
-    })
-    this.calRect()
-    this.update()
-  }
+   * 鼠标双击事件
+   *
+   * @param	event         事件参数
+   * @return	boolean
+   */
+  onDoubleClick(event: SMouseEvent): boolean {
+    if (this.status == SItemStatus.Normal) {
+      this.status = SItemStatus.Edit;
+      this.grabItem(this);
+    } else if (this.status == SItemStatus.Edit) {
+      this.status = SItemStatus.Normal;
+      this.releaseItem();
+    }
+    this.update();
+    return true;
+  } // Function onDoubleClick()
 
   /**
      * 鼠标按下事件
@@ -149,29 +176,96 @@ export class SArrowEdit extends SGraphEdit {
      * @return  是否处理事件
      * */
   onMouseDown(event: SMouseEvent): boolean {
+    this.curIndex = -1;
+    this.curPoint = null;
+    if (event.shiftKey || this._verAndLeve) {
+      event = this.compare(event);
+    }
     if (event.buttons == SMouseButton.LeftButton) {
-      if (this.status == SItemStatus.Create) {
+      if (this.status == SItemStatus.Normal) {
+        return super.onMouseDown(event);
+      } 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;
-      } else {
-        return super.onMouseDown(event);
       }
     }
     return true;
   } // Function onMouseDown()
 
   /**
+     * shift垂直水平创建或编辑
+     *
+     * @param   event   事件
+     * */
+  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];
+        }
+      }
+      const dx = Math.abs(event.x - last.x);
+      const dy = Math.abs(event.y - last.y);
+      if (dy > dx) {
+        event.x = last.x;
+      } else {
+        event.y = last.y;
+      }
+    }
+    return event;
+  } // Function compare()
+
+  /**
+     * 获取点击点与Point[]中的点距离最近点
+     *
+     * @param   p   鼠标点击点
+     * */
+  findNearestPoint(p: SPoint): void {
+    let len = this.sceneDis;
+    for (let i = 0; i < this.line.length; i++) {
+      let dis = SMathUtil.pointDistance(
+        p.x,
+        p.y,
+        this.line[i].x,
+        this.line[i].y
+      );
+      if (dis < len) {
+        len = dis;
+        this.curIndex = i;
+        this.curPoint = new SPoint(this.line[this.curIndex]);
+      }
+    }
+  } // Function findNearestPoint()
+
+  /**
      * 鼠标移动事件
      *
      * @param   event   鼠标事件
      * @return  是否处理事件
      * */
-  onMouseMove(event: SMouseEvent): boolean {
+  onMouseMove(event: SMouseEvent): boolean {    
+    if (event.shiftKey || this._verAndLeve) {
+      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.calRect()
       }
+    } 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.calRect()
+      }
     } else {
       return super.onMouseMove(event);
     }
@@ -186,9 +280,26 @@ export class SArrowEdit extends SGraphEdit {
      * @return	boolean
      */
   onMouseUp(event: SMouseEvent): boolean {
-    if (this.status != SItemStatus.Create) {
-      super.onMouseUp(event);
-    }
+    if (this.status == SItemStatus.Edit) {
+      if (this.curIndex > -1) {
+          const p = new SPoint(
+              this.line[this.curIndex].x,
+              this.line[this.curIndex].y
+          );
+          this.recordAction(SGraphPointListUpdate, [
+              this.line,
+              this.curPoint,
+              p,
+              this.curIndex
+          ]);
+      }
+  } else if (this.status == SItemStatus.Normal) {
+      this.moveToOrigin(this.x, this.y);
+      return super.onMouseUp(event);
+  }
+  this.curIndex = -1;
+  this.curPoint = null;
+  return true;
     return true;
   } // Function onMouseUp()
 
@@ -240,6 +351,23 @@ export class SArrowEdit extends SGraphEdit {
   } // Function addPoint()
 
   /**
+     * 移动后处理所有坐标,并肩原点置为场景原点
+     *
+     * @param   x   x坐标
+     * @param   y   y坐标
+     * */
+  moveToOrigin(x: number, y: number): void {
+    super.moveToOrigin(x, y);
+    this.line = this.line.map(t => {
+      t.x = t.x + x;
+      t.y = t.y + y;
+      return t;
+    });
+    this.x = 0;
+    this.y = 0;
+  } // Function moveToOrigin()
+
+  /**
      * 记录相关动作并推入栈中
      *
      * @param	SGraphCommand   相关命令类
@@ -324,22 +452,55 @@ export class SArrowEdit extends SGraphEdit {
    * @param   painter painter对象
    */
   onDraw(painter: SPainter): void {
+    painter.pen.color = this.strokeColor;
     if (this.line.length == 2) {
-      painter.pen.color = this.strokeColor;
       painter.brush.color = this.fillColor;
       painter.pen.lineWidth = this.lineWidth
       if (this.lineStyle == SLineStyle.Dashed) {
         painter.pen.lineDash = [
-            painter.toPx(this.lineWidth * 3),
-            painter.toPx(this.lineWidth * 7)
+          painter.toPx(this.lineWidth * 3),
+          painter.toPx(this.lineWidth * 7)
         ];
       } else if (this.lineStyle == SLineStyle.Dotted) {
-          painter.pen.lineDash = [
-              painter.toPx(this.lineWidth * 2),
-              painter.toPx(this.lineWidth * 2)
-          ];
+        painter.pen.lineDash = [
+          painter.toPx(this.lineWidth * 2),
+          painter.toPx(this.lineWidth * 2)
+        ];
+      }
+      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`);
+        painter.shadow.shadowOffsetX = 5;
+        painter.shadow.shadowOffsetY = 5;
       }
       painter.drawArrowLine(this.line[0], this.line[1], { begin: SArrowStyleType.None, end: SArrowStyleType.Basic });
-    }
+      if (
+        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(
+              this.line[0].x,
+              this.line[0].y,
+              painter.toPx(5)
+          );
+      }
+  }
   } // Function onDraw()
 } // Class SArrowEdit

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

@@ -182,6 +182,7 @@ export class SLineEdit extends SGraphEdit {
      * */
     constructor(parent: SGraphItem | null, l?: SPoint | SPoint[]) {
         super(parent);
+        this.showSelect = false;
         if (l) {
             if (l instanceof SPoint) {
                 this.line.push(l);

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

@@ -197,6 +197,7 @@ export class STextEdit extends SGraphEdit {
      */
     constructor(parent: SGraphItem | null, str: string = "") {
         super(parent);
+        this.showSelect = false;
         this._text = str;
         this._font = new SFont("sans-serif", 12);
         this.height = 12;

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

@@ -342,7 +342,9 @@ export class PTopoScene extends SBaseEditScene {
             Properties: {
             },
             Style: {
-                Line: [{ X: event.x, Y: event.y }],
+                Default: {
+                    Line: [{ X: event.x, Y: event.y }],
+                }
             }
         }
         const circleItem = new SBaseCircleEdit(null, data);