Parcourir la source

点击relationitem判断

haojianlong il y a 5 ans
Parent
commit
077231a37d
6 fichiers modifiés avec 131 ajouts et 9 suppressions
  1. 1 1
      package.json
  2. 12 5
      src/TopoScene.ts
  3. 1 1
      src/items/EquipItem.ts
  4. 34 2
      src/items/RelationItem.ts
  5. 32 0
      src/types/PointToLine.ts
  6. 51 0
      src/util/SMathUtil.ts

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
     "name": "@saga-web/topology",
-    "version": "1.0.77",
+    "version": "1.0.78",
     "description": "上格云拓扑图引擎",
     "main": "lib/index.js",
     "types": "lib/index.d.js",

+ 12 - 5
src/TopoScene.ts

@@ -86,6 +86,8 @@ export class TopoScene extends SGraphyScene {
     lineType: number = 0;
     /** 当前关系item    */
     relatItem: RelationItem | null = null;
+    /** 设备-关系item统一回调   */
+    callback: Function = (): void => {};
     /** */
     loadData(data: GraphyData): void {
         if (data.equipList && data.equipList.length) {
@@ -114,9 +116,10 @@ export class TopoScene extends SGraphyScene {
     addEquip(equip: Equip): void {
         let item = new EquipItem(null, equip);
         item.moveTo(equip.Pos.X, equip.Pos.Y);
+        this.click(item);
         item.visible = this.isShowEquip;
         this.EquipList.push(item);
-        if (equip.AnchorList.length) {
+        if (equip.AnchorList && equip.AnchorList.length) {
             this.addAllAnchor(item, equip.AnchorList);
         }
         this.addItem(item);
@@ -139,6 +142,7 @@ export class TopoScene extends SGraphyScene {
      */
     addAnchor(parent: SGraphyItem, anchor: Anchor): void {
         let item = new AnchorItem(parent, anchor);
+        this.click(item);
         item.visible = this.isShowEquip;
         this.AnchorList.push(item);
     } // Function addAnchor()
@@ -158,9 +162,10 @@ export class TopoScene extends SGraphyScene {
     /**
      *  添加设备item
      */
-    addRelation(equip: Relation): void {
-        let item = new RelationItem(null, equip);
+    addRelation(rela: Relation): void {
+        let item = new RelationItem(null, rela);
         item.visible = this.isShowRelation;
+        this.click(item);
         this.RelationList.push(item);
         this.addItem(item);
     } // Function addRelation()
@@ -202,6 +207,7 @@ export class TopoScene extends SGraphyScene {
                     if (anc.parent) {
                         anc.parent.connect("changePos", item, item.change);
                     }
+                    this.click(item);
                     this.RelationList.push(item);
                     this.relatItem = item;
                     this.grabItem = item;
@@ -239,6 +245,7 @@ export class TopoScene extends SGraphyScene {
     createItem(data: Equip): SGraphyItem {
         this.isAdding = true;
         this.grabItem = new EquipItem(null, data);
+        this.click(this.grabItem);
         return this.grabItem;
     } // Function createItem()
 
@@ -303,7 +310,7 @@ export class TopoScene extends SGraphyScene {
      *  绑定设备右键事件
      *
      */
-    click(item: SGraphyItem, fn: Function) {
-        item.connect("ContextMenu", this, fn);
+    click(item: SGraphyItem): void {
+        item.connect("ContextMenu", this, this.callback);
     }
 } // Class TopoScene

+ 1 - 1
src/items/EquipItem.ts

@@ -167,7 +167,7 @@ export class EquipItem extends SGraphyItem {
         if (this.name) {
             painter.brush.color = SColor.Black;
             painter.font.size = 12;
-            painter.drawText(this.name, -20, this.height / 2);
+            painter.drawText(this.name, -20, this.height / 2 + 15);
         }
     } // Function onDraw()
 } // Class EquipItem

+ 34 - 2
src/items/RelationItem.ts

@@ -19,12 +19,13 @@
  */
 
 import { SGraphyItem } from "@saga-web/graphy/lib";
-import { SColor, SPainter, SPoint, SRect } from "@saga-web/draw/lib";
+import { SColor, SLine, SPainter, SPoint, SRect } from "@saga-web/draw/lib";
 import { Relation } from "../types/Relation";
 import { SMouseEvent } from "@saga-web/base/lib";
 import { BaseRelationItem } from "./BaseRelationItem";
 import { AnchorItem } from "./AnchorItem";
 import { ItemOrder } from "../types/ItemOrder";
+import { SMathUtil } from "../util/SMathUtil";
 
 /**
  * 关系item-折线画法-横平竖直
@@ -162,10 +163,30 @@ export class RelationItem extends BaseRelationItem {
     } // Function onContextMenu()
 
     /**
-     *
+     *  点击点是否在item范围内
      *
      */
     contains(x: number, y: number): boolean {
+        if (this.closeFlag) {
+            let p = new SPoint(x, y),
+                l = 10;
+            //  todo差缩放
+            for (let i = 1; i < this.pointList.length; i++) {
+                let PTL = SMathUtil.pointToLine(
+                    p,
+                    new SLine(
+                        this.pointList[i - 1].x,
+                        this.pointList[i - 1].y,
+                        this.pointList[i].x,
+                        this.pointList[i].y
+                    )
+                );
+                if (PTL.MinDis < l) {
+                    return true;
+                }
+            }
+            return false;
+        }
         return false;
     }
 
@@ -238,6 +259,17 @@ export class RelationItem extends BaseRelationItem {
         painter.pen.dashOffset = this.dashOffset;
         painter.pen.color = SColor.White;
         painter.drawPolyline(this.pointList);
+
+        if (this.name) {
+            painter.brush.color = SColor.Black;
+            painter.font.size = 12;
+            painter.drawText(
+                this.name,
+                this.pointList[0].x + 20,
+                this.pointList[0].y
+            );
+        }
+
         this.dashOffset -= 2;
         if (!this.closeFlag) {
             painter.pen.color = new SColor("#409EFF");

+ 32 - 0
src/types/PointToLine.ts

@@ -0,0 +1,32 @@
+/*
+ * ********************************************************************************************************************
+ *
+ *                      :*$@@%$*:                         ;:                ;;    ;;
+ *                    :@@%!  :!@@%:                       %!             ;%%@@%$ =@@@@@@@%;     @%@@@%%%%@@@@@
+ *                   :@%;       :$=                       %%$$$%$$         ;$$  ;$@=   !@$
+ *                   =@!                                  %!              @ $=;%   !@@@%:      !$$$$$$$$$$$$$$=
+ *                   =@*                                  %!              @ $= % %@=   =%@!      %=
+ *              *$%%! @@=        ;=$%%%$*:                %!              @ $= % =%%%%%%@$      *%:         =%
+ *            %@@!:    !@@@%=$@@@@%!  :*@@$:              %!              @ $= % $*     ;@      @*          :%*
+ *          ;@@!          ;!!!;:         ;@%:      =======@%========*     @ $$ % $%*****$@     :@$=*********=@$
+ *          $@*   ;@@@%=!:                *@*
+ *          =@$    ;;;!=%@@@@=!           =@!
+ *           %@$:      =@%: :*@@@*       %@=                    Copyright (c) 2016-2019.  北京上格云技术有限公司
+ *            ;%@@$=$@@%*       *@@@$=%@@%;
+ *               ::;::             ::;::                                              All rights reserved.
+ *
+ * ********************************************************************************************************************
+ */
+
+import { SLine, SPoint } from "@saga-web/draw/lib";
+
+/**
+ * 距离最短线接口
+ *
+ * @author  郝建龙
+ */
+export interface PointToLine {
+    MinDis: number;
+    Line: SLine | undefined;
+    Point: SPoint | undefined;
+} // Interface Space

+ 51 - 0
src/util/SMathUtil.ts

@@ -19,6 +19,7 @@
  */
 
 import { SLine, SPoint, SRect } from "@saga-web/draw/lib";
+import { PointToLine } from "../types/PointToLine";
 
 export class SMathUtil {
     /**
@@ -126,4 +127,54 @@ export class SMathUtil {
         }
         return Math.abs(sum / 2);
     }
+
+    /**
+     * 计算点到线段垂线与线段的交点
+     *
+     * @param   p   点
+     * @param   l   线段
+     * @return  距离
+     */
+    static pointToLine(p: SPoint, l: SLine): PointToLine {
+        let d = {
+            MinDis: Number.MAX_SAFE_INTEGER,
+            Line: new SLine(),
+            Point: new SPoint()
+        };
+        let bgX = Math.max(l.x1, l.x2);
+        let smX = Math.min(l.x1, l.x2);
+        if (l.dx == 0) {
+            // l.dx为0 说明线段是垂直于x轴的
+            let bgY = Math.max(l.y1, l.y2);
+            let smY = Math.min(l.y1, l.y2);
+            if (p.y > smY && p.y < bgY) {
+                d.MinDis = Math.abs(p.x - l.x1);
+                d.Line = l;
+                d.Point = new SPoint(l.x1, p.y);
+            }
+        } else if (l.dy == 0) {
+            // l.dy为0 说明线段是平行于x轴的
+            if (p.x > smX && p.x < bgX) {
+                d.MinDis = Math.abs(p.y - l.y1);
+                d.Line = l;
+                d.Point = new SPoint(p.x, l.y1);
+            }
+        } else {
+            // 直线1
+            let k1 = (l.y1 - l.y2) / (l.x1 - l.x2);
+            let b1 = l.y1 - k1 * l.x1;
+            // 直线2
+            let k2 = -1 / k1;
+            let b2 = p.y - k2 * p.x;
+            // 交点
+            let x = (b1 - b2) / (k2 - k1);
+            let y = k1 * x + b1;
+            if (x > smX && x < bgX) {
+                d.MinDis = SMathUtil.pointDistance(p.x, p.y, x, y);
+                d.Line = l;
+                d.Point = new SPoint(x, y);
+            }
+        }
+        return d;
+    } // Function pointDistance()
 } // Class SMathUtil