Bläddra i källkod

锚点添加id;缩放反比

haojianlong 5 år sedan
förälder
incheckning
9b0c944c52

+ 2 - 2
saga-web-big/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@saga-web/big",
-    "version": "1.0.56",
+    "version": "1.0.57",
     "description": "上格云建筑信息化库",
     "main": "lib/index.js",
     "types": "lib/index.d.js",
@@ -42,6 +42,6 @@
         "typescript": "^3.9.3"
     },
     "dependencies": {
-        "@saga-web/graph": "2.1.94"
+        "@saga-web/graph": "2.1.95"
     }
 }

+ 152 - 138
saga-web-big/src/items/SIconTextItem.ts

@@ -8,124 +8,124 @@ import {
 import { SItemStatus } from "..";
 import { SMouseEvent } from "@saga-web/base";
 import { SSize, SRect, SPainter, SColor, SFont } from "@saga-web/draw";
+import { Anchor } from "../types/topology/Anchor";
 
 /**
  * 图例item  icon
  *
  * */
 export class SIconTextItem extends SObjectItem {
-
     /** item状态  */
     _status: SItemStatus = SItemStatus.Normal;
     get status(): SItemStatus {
-      return this._status;
+        return this._status;
     }
     set status(v: SItemStatus) {
-      this._status = v;
-      if (v == SItemStatus.Normal) {
-        this.moveable = true;
-        this.textItem.moveable = false;
-        this.img.moveable = false;
-      } else if (v == SItemStatus.Edit) {
-        this.moveable = false;
-        this.textItem.moveable = true;
-        this.img.moveable = true;
-      } else if (v == SItemStatus.Create) {
-        this.moveable = true;
-        this.textItem.moveable = false;
-        this.img.moveable = false;
-      }
-      this.update();
+        this._status = v;
+        if (v == SItemStatus.Normal) {
+            this.moveable = true;
+            this.textItem.moveable = false;
+            this.img.moveable = false;
+        } else if (v == SItemStatus.Edit) {
+            this.moveable = false;
+            this.textItem.moveable = true;
+            this.img.moveable = true;
+        } else if (v == SItemStatus.Create) {
+            this.moveable = true;
+            this.textItem.moveable = false;
+            this.img.moveable = false;
+        }
+        this.update();
     }
 
     /** 是否显示文字  */
     _showText: boolean = true;
     get showText(): boolean {
-      return this._showText;
+        return this._showText;
     }
     set showText(v: boolean) {
-      if (v === this._showText) {
-        return
-      }
-      this._showText = v;
-      if (v) {
-        this.textItem.show();
-      } else {
-        this.textItem.hide();
-      }
+        if (v === this._showText) {
+            return;
+        }
+        this._showText = v;
+        if (v) {
+            this.textItem.show();
+        } else {
+            this.textItem.hide();
+        }
     }
 
     /** X轴坐标 */
     get x(): number {
-      return this.pos.x;
+        return this.pos.x;
     } // Get x
     set x(v: number) {
-      this.pos.x = v;
-      this.$emit("changePos");
-      this.update();
+        this.pos.x = v;
+        this.$emit("changePos");
+        this.update();
     } // Set x
     /** Y轴坐标 */
     get y(): number {
-      return this.pos.y;
+        return this.pos.y;
     } // Get y
     set y(v: number) {
-      this.pos.y = v;
-      this.$emit("changePos");
-      this.update();
+        this.pos.y = v;
+        this.$emit("changePos");
+        this.update();
     } // Set y
 
     /** icon宽 */
     get sWidth(): number {
-      return this.img.width;
+        return this.img.width;
     }
     set sWidth(v: number) {
-      this.img.width = v;
-      this.changeAhchorPoint();
-      this.update();
+        this.img.width = v;
+        this.changeAhchorPoint();
+        this.update();
     }
 
     /** icon宽 */
     get sHeight(): number {
-      return this.img.height;
+        return this.img.height;
     }
     set sHeight(v: number) {
-      this.img.height = v;
-      this.changeAhchorPoint();
-      this.update();
+        this.img.height = v;
+        this.changeAhchorPoint();
+        this.update();
     }
 
     /** 是否显示锚点  */
     _showAnchor: boolean = false;
     get showAnchor(): boolean {
-      return this._showAnchor;
+        return this._showAnchor;
     }
     set showAnchor(v: boolean) {
-      this._showAnchor = v;
-      this.anchorList.forEach(t => {
-        t.visible = v;
-      })
+        this._showAnchor = v;
+        this.anchorList.forEach(t => {
+            t.visible = v;
+        });
     }
 
     get text(): string {
-      return this.textItem.text;
+        return this.textItem.text;
     }
     set text(v: string) {
-      this.textItem.text = v;
-      this.update();
+        this.textItem.text = v;
+        this.update();
     }
     get color(): SColor {
-      return this.textItem.color;
+        return this.textItem.color;
     }
     set color(v: SColor) {
-      this.textItem.color = v;
-      this.update();
+        this.textItem.color = v;
+        this.update();
     }
     get font(): SFont {
-      return this.textItem.font;
+        return this.textItem.font;
     }
     set font(v: SFont) {
-      this.textItem.font = v;
-      this.update();
+        this.textItem.font = v;
+        this.update();
     }
     /** img Item    */
     img: SImageItem = new SImageItem(this);
@@ -137,32 +137,46 @@ export class SIconTextItem extends SObjectItem {
      * 构造体
      *
      * */
-    constructor(parent: SGraphItem | null) {
-      super(parent);
-      this.img.url = `http://adm.sagacloud.cn:8080/doc/assets/img/logo.png`;
-      this.img.width = 24;
-      this.img.height = 24;
-      this.img.connect("onMove", this, this.changeAhchorPoint.bind(this));
-      let anchorPoint = [
-        { x: this.img.x, y: this.img.y + (this.img.height / 2) }, 
-        { x: this.img.x, y: this.img.y - (this.img.height / 2) }, 
-        { x: this.img.x - (this.img.width / 2), y: this.img.y }, 
-        { x: this.img.x + (this.img.width / 2), y: this.img.y }
-      ];
-      this.anchorList = anchorPoint.map(t => {
-        let item = new SAnchorItem(this);
-        item.moveTo(t.x, t.y);
-        return item;
-      });
-      this.update();
-      this.textItem.text = "";
-      this.textItem.backgroundColor = SColor.White;
-      this.textItem.font.size = 12;
-      // 偏移二分之一文本高度
-      this.textItem.moveTo(17, -(this.textItem.height * 0.5));
-      this.moveable = true;
-      this.selectable = true;
-      this.isTransform = false;
+    constructor(parent: SGraphItem | null, data?: Anchor[]) {
+        super(parent);
+        this.img.url = `http://adm.sagacloud.cn:8080/doc/assets/img/logo.png`;
+        this.img.width = 24;
+        this.img.height = 24;
+        this.img.connect("onMove", this, this.changeAhchorPoint.bind(this));
+        let anchorPoint;
+        if (data && data.length) {
+            anchorPoint = data.map(t => {
+                return {
+                    x: t.Pos.X,
+                    y: t.Pos.Y,
+                    id: t.ID
+                };
+            });
+        } else {
+            anchorPoint = [
+                { x: this.img.x, y: this.img.y + this.img.height / 2, id: "" },
+                { x: this.img.x, y: this.img.y - this.img.height / 2, id: "" },
+                { x: this.img.x - this.img.width / 2, y: this.img.y, id: "" },
+                { x: this.img.x + this.img.width / 2, y: this.img.y, id: "" }
+            ];
+        }
+        this.anchorList = anchorPoint.map(t => {
+            let item = new SAnchorItem(this);
+            if (t.id) {
+                item.id = t.id;
+            }
+            item.moveTo(t.x, t.y);
+            return item;
+        });
+        this.update();
+        this.textItem.text = "";
+        this.textItem.backgroundColor = SColor.White;
+        this.textItem.font.size = 12;
+        // 偏移二分之一文本高度
+        this.textItem.moveTo(17, -(this.textItem.height * 0.5));
+        this.moveable = true;
+        this.selectable = true;
+        this.isTransform = false;
     }
 
     /**
@@ -170,18 +184,18 @@ export class SIconTextItem extends SObjectItem {
      *
      * */
     private changeAhchorPoint(): void {
-      // 判断是否有锚点
-      if (this.anchorList.length) {
-        let anchorPoint = [
-          { x: this.img.x, y: this.img.y + (this.img.height / 2) }, 
-          { x: this.img.x, y: this.img.y - (this.img.height / 2) }, 
-          { x: this.img.x - (this.img.width / 2), y: this.img.y }, 
-          { x: this.img.x + (this.img.width / 2), y: this.img.y }
-        ]; 
-        this.anchorList.forEach((item, index) => {
-          item.moveTo(anchorPoint[index].x, anchorPoint[index].y);
-        })
-      }
+        // 判断是否有锚点
+        if (this.anchorList.length) {
+            let anchorPoint = [
+                { x: this.img.x, y: this.img.y + this.img.height / 2 },
+                { x: this.img.x, y: this.img.y - this.img.height / 2 },
+                { x: this.img.x - this.img.width / 2, y: this.img.y },
+                { x: this.img.x + this.img.width / 2, y: this.img.y }
+            ];
+            this.anchorList.forEach((item, index) => {
+                item.moveTo(anchorPoint[index].x, anchorPoint[index].y);
+            });
+        }
     } // Function changeAhchorPoint()
 
     /**
@@ -189,12 +203,12 @@ export class SIconTextItem extends SObjectItem {
      *
      * */
     onMouseDown(event: SMouseEvent): boolean {
-      if (this.status == SItemStatus.Normal) {
-        return super.onMouseDown(event);
-      } else if (this.status == SItemStatus.Edit) {
-        return super.onMouseDown(event);
-      }
-      return true;
+        if (this.status == SItemStatus.Normal) {
+            return super.onMouseDown(event);
+        } else if (this.status == SItemStatus.Edit) {
+            return super.onMouseDown(event);
+        }
+        return true;
     } // Function onMouseDown()
 
     /**
@@ -204,7 +218,7 @@ export class SIconTextItem extends SObjectItem {
      * @param   newSize 改之后大小
      * */
     onResize(oldSize: SSize, newSize: SSize) {
-      console.log(arguments);
+        console.log(arguments);
     } // Function onResize()
 
     /**
@@ -214,16 +228,16 @@ export class SIconTextItem extends SObjectItem {
      * @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();
-      }
-      this.update();
-      return true;
+        // 如果位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();
+        }
+        this.update();
+        return true;
     } // Function onDoubleClick()
 
     /**
@@ -232,11 +246,17 @@ export class SIconTextItem extends SObjectItem {
      * @return  SRect   所有子对象的并集
      * */
     boundingRect(): SRect {
-      let rect = this.img.boundingRect().adjusted(this.img.pos.x, this.img.pos.y, 0, 0);
-      if (this.showText) {
-        rect = rect.unioned(this.textItem.boundingRect().adjusted(this.textItem.pos.x, this.textItem.pos.y, 0, 0));
-      }
-      return rect.adjusted(-5, -5, 10, 10);
+        let rect = this.img
+            .boundingRect()
+            .adjusted(this.img.pos.x, this.img.pos.y, 0, 0);
+        if (this.showText) {
+            rect = rect.unioned(
+                this.textItem
+                    .boundingRect()
+                    .adjusted(this.textItem.pos.x, this.textItem.pos.y, 0, 0)
+            );
+        }
+        return rect.adjusted(-5, -5, 10, 10);
     } // Function boundingRect()
 
     /**
@@ -245,26 +265,20 @@ export class SIconTextItem extends SObjectItem {
      * @param   painter painter对象
      */
     onDraw(painter: SPainter): void {
-      if (this.status == SItemStatus.Normal) {
-        if (this.selected) {
-          painter.pen.lineWidth = painter.toPx(1);
-          painter.pen.lineDash = [
-            painter.toPx(3),
-            painter.toPx(7)
-          ];
-          painter.pen.color = SColor.Black;
-          painter.brush.color = SColor.Transparent;
-          painter.drawRect(this.boundingRect());
+        if (this.status == SItemStatus.Normal) {
+            if (this.selected) {
+                painter.pen.lineWidth = painter.toPx(1);
+                painter.pen.lineDash = [painter.toPx(3), painter.toPx(7)];
+                painter.pen.color = SColor.Black;
+                painter.brush.color = SColor.Transparent;
+                painter.drawRect(this.boundingRect());
+            }
+        } else if (this.status == SItemStatus.Edit) {
+            painter.pen.lineWidth = painter.toPx(1);
+            painter.pen.lineDash = [painter.toPx(3), painter.toPx(7)];
+            painter.pen.color = SColor.Red;
+            painter.brush.color = SColor.Transparent;
+            painter.drawRect(this.boundingRect());
         }
-      } else if (this.status == SItemStatus.Edit) {
-        painter.pen.lineWidth = painter.toPx(1);
-        painter.pen.lineDash = [
-          painter.toPx(3),
-          painter.toPx(7)
-        ];
-        painter.pen.color = SColor.Red;
-        painter.brush.color = SColor.Transparent;
-        painter.drawRect(this.boundingRect());
-      }
     } // Function onDraw()
-  }
+}

+ 3 - 3
saga-web-graph/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@saga-web/graph",
-    "version": "2.1.94",
+    "version": "2.1.95",
     "description": "上格云二维图形引擎。",
     "main": "lib/index.js",
     "types": "lib/index.d.js",
@@ -35,12 +35,12 @@
         "eslint-plugin-prettier": "^3.1.0",
         "node-ssh": "^6.0.0",
         "prettier": "^1.18.2",
-        "@types/jest": "^24.0.15",
         "ts-jest": "^24.0.2",
         "typedoc": "^0.17.4",
         "typescript": "^3.5.3"
     },
     "dependencies": {
-        "@saga-web/draw": "2.1.100"
+        "@saga-web/draw": "2.1.100",
+        "@types/uuid": "^8.0.0"
     }
 }

+ 5 - 1
saga-web-graph/src/SGraphItem.ts

@@ -94,8 +94,12 @@ export class SGraphItem extends SObject {
 
     /** 缩放比例 */
     scale: number = 1;
-    /**  */
+    /** 放缩反比例   */
     private _inverseScale: number = 1;
+    get inverseScale(): number {
+        return this._inverseScale;
+    } // Get inverseScale
+
     /** 旋转角度 */
     rolate: number = 0;
 

+ 11 - 0
saga-web-graph/src/items/SAnchorItem.ts

@@ -1,5 +1,6 @@
 import { SPainter, SColor } from "@saga-web/draw/lib";
 import { SGraphItem } from "../SGraphItem";
+import { v1 as uuidv1 } from "uuid";
 
 /**
  * 锚点item
@@ -19,6 +20,16 @@ export class SAnchorItem extends SGraphItem {
     sceneDis: number = 10;
 
     /**
+     * 构造函数
+     *
+     * @param   parent      指向父对象
+     */
+    constructor(parent: SGraphItem | null = null) {
+        super(parent);
+        this.id = uuidv1();
+    } // Function constructor()
+
+    /**
      * Item绘制操作
      *
      * @param   painter       painter对象