Browse Source

关系item动画添加

haojianlong 5 năm trước cách đây
mục cha
commit
d5b49f5bcc

+ 4 - 0
.npmignore

@@ -11,3 +11,7 @@ coverage
 jest.config.js
 tsconfig.json
 typedoc.json
+node_modules
+package-lock.json
+api
+docs

+ 3 - 3
package.json

@@ -1,6 +1,6 @@
 {
     "name": "@saga-web/topology",
-    "version": "1.0.65",
+    "version": "1.0.76",
     "description": "上格云拓扑图引擎",
     "main": "lib/index.js",
     "types": "lib/index.d.js",
@@ -19,8 +19,8 @@
     "publishConfig": {
         "registry": "http://dev.dp.sagacloud.cn:8082/repository/npm-hosted/"
     },
+    "files": ["lib"],
     "devDependencies": {
-        "@types/jest": "^24.0.15",
         "@typescript-eslint/eslint-plugin": "^1.12.0",
         "@typescript-eslint/parser": "^1.12.0",
         "eslint": "^6.0.1",
@@ -33,7 +33,7 @@
     "dependencies": {
         "@saga-web/base": "2.1.9",
         "@saga-web/draw": "2.1.75",
-        "@saga-web/graphy": "2.1.45",
+        "@saga-web/graphy": "^2.1.47",
         "axios": "^0.18.0",
         "pako": "^1.0.10",
         "poly-decomp": "^0.3.0",

+ 8 - 14
src/TopoScene.ts

@@ -19,7 +19,6 @@
  */
 
 import { SGraphyItem, SGraphyScene } from "@saga-web/graphy/lib";
-import Axios from "axios";
 import { Equip } from "./types/Equip";
 import { Relation } from "./types/Relation";
 import { EquipItem } from "./items/EquipItem";
@@ -82,7 +81,8 @@ export class TopoScene extends SGraphyScene {
     isAdding: boolean = false;
     /** 划线状态    */
     isLining: boolean = false;
-
+    /** 划线类型    */
+    lineType: number = 0;
     /** 当前关系item    */
     relatItem: RelationItem | null = null;
     /** */
@@ -158,11 +158,10 @@ export class TopoScene extends SGraphyScene {
     } // Function addRelation()
 
     /**
-     *  点击事件
+     *  点击按下事件
      *
      */
     onMouseDown(event: SMouseEvent): boolean {
-        console.log("mousedown");
         if (this.isAdding) {
             this.addSelectItem(event);
         } else if (this.isLining) {
@@ -170,6 +169,8 @@ export class TopoScene extends SGraphyScene {
             if (anc) {
                 // 点击的是锚点,直接处理添加到关系item点数据中
                 let ancPoint = anc.mapToScene(anc.X, anc.Y);
+                // 将点击到的锚点状态置为已连接
+                anc.isConnected = true;
                 if (this.relatItem) {
                     console.log("第二次点击锚点");
                     this.relatItem.Anchor2 = anc;
@@ -211,7 +212,7 @@ export class TopoScene extends SGraphyScene {
     } // Function onClick
 
     /**
-     *  点击事件
+     *  点击移动事件
      *
      */
     onMouseMove(event: SMouseEvent): boolean {
@@ -266,10 +267,10 @@ export class TopoScene extends SGraphyScene {
      *  @param  len     限制距离
      *  @return 点击的锚点
      * */
-    clickIsAnchor(event: SMouseEvent, len: number = 100): AnchorItem | null {
+    clickIsAnchor(event: SMouseEvent, len: number = 25): AnchorItem | null {
         let minAnchor = null;
         if (this.view) {
-            len = 100 / this.view.scale;
+            len = len / this.view.scale;
         }
         this.AnchorList.forEach(anchor => {
             if (anchor.data) {
@@ -290,13 +291,6 @@ export class TopoScene extends SGraphyScene {
     } // Function clickIsAnchor()
 
     /**
-     * 设备item位置改变时,触发修改relation连线
-     */
-    changeEquipPos(){
-
-    } // Function changeEquipPos()
-
-    /**
      *  根据两点生成折点数据
      *
      *  @param  p1  锚点1

+ 5 - 3
src/items/AnchorItem.ts

@@ -38,8 +38,8 @@ export class AnchorItem extends SGraphyItem {
     Width: number = 10;
     /** 高度  */
     Height: number = 10;
-    /** */
-
+    /** 是否被连接   */
+    isConnected: boolean = false;
     /**
      * 构造函数
      *
@@ -69,7 +69,9 @@ export class AnchorItem extends SGraphyItem {
      */
     onDraw(painter: SPainter): void {
         painter.pen.lineWidth = 2;
-        painter.brush.color = SColor.White;
+        painter.brush.color = this.isConnected
+            ? new SColor("#409EFF")
+            : SColor.White;
         painter.pen.color = new SColor("#409EFF");
         painter.drawRect(
             this.X - this.Width / 2,

+ 36 - 7
src/items/EquipItem.ts

@@ -23,9 +23,10 @@ import { SColor, SPainter, SPoint, SRect } from "@saga-web/draw/lib";
 import { SMouseEvent } from "@saga-web/base/lib";
 import { Equip } from "../types/Equip";
 import { Point } from "../types/Point";
+import { ItemOrder } from "../types/ItemOrder";
 
 /**
- * 柱子item
+ * 设备item
  *
  * @author  郝建龙
  */
@@ -80,6 +81,8 @@ export class EquipItem extends SGraphyItem {
         this.$emit("changePos");
         this.update();
     } // Set y
+    /** 展示的图片路径 */
+    Img: CanvasImageSource | undefined;
 
     constructor(parent: SGraphyItem | null, data: Equip) {
         super(parent);
@@ -89,8 +92,13 @@ export class EquipItem extends SGraphyItem {
         if (data.Size.Height) {
             this.height = data.Size.Height;
         }
+        if (data.ImgSource) {
+            this.Img = new Image();
+            this.Img.src = data.ImgSource;
+        }
         this.data = data;
         this.moveable = true;
+        this.zOrder = ItemOrder.EquipOrder;
         this.update();
     } // Constructor
 
@@ -122,17 +130,38 @@ export class EquipItem extends SGraphyItem {
     } // Function onMouseDown
 
     /**
+     * 鼠标右键事件
+     *
+     * @param	event         事件参数
+     * @return	boolean
+     */
+    onContextMenu(event: SMouseEvent): boolean {
+        this.$emit("ContextMenu", event);
+        return true;
+    } // Function onContextMenu()
+
+    /**
      * Item绘制操作
      *
      * @param   painter       painter对象
      */
     onDraw(painter: SPainter): void {
         painter.brush.color = SColor.White;
-        painter.drawRect(
-            -this.width / 2,
-            -this.height / 2,
-            this.width,
-            this.height
-        );
+        if (this.Img) {
+            painter.drawImage(
+                this.Img,
+                -this.width / 2,
+                -this.height / 2,
+                this.width,
+                this.height
+            );
+        } else {
+            painter.drawRect(
+                -this.width / 2,
+                -this.height / 2,
+                this.width,
+                this.height
+            );
+        }
     } // Function onDraw()
 } // Class EquipItem

+ 22 - 2
src/items/RelationItem.ts

@@ -24,6 +24,7 @@ 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";
 
 /**
  * 关系item-折线画法-横平竖直
@@ -43,6 +44,17 @@ export class RelationItem extends BaseRelationItem {
     Anchor1: AnchorItem | null = null;
     //
     Anchor2: AnchorItem | null = null;
+    //
+    private _dashOffset: number = 20;
+    get dashOffset(): number {
+        return this._dashOffset;
+    }
+    set dashOffset(value: number) {
+        this._dashOffset = value;
+        this.update();
+    }
+    // 定时器
+    timer: number | null = null;
     /**
      * 构造函数
      *
@@ -54,6 +66,7 @@ export class RelationItem extends BaseRelationItem {
         this.data = data;
         this.Anchor1 = data.Anchor1 || null;
         this.Anchor2 = data.Anchor2 || null;
+        this.zOrder = ItemOrder.RelateOrder;
         if (data.PointList) {
             this.pointList = data.PointList.map(it => {
                 let x = it.X,
@@ -113,7 +126,6 @@ export class RelationItem extends BaseRelationItem {
      */
     onMouseMove(event: SMouseEvent): boolean {
         if (this.pointList.length) {
-            console.log("dowm");
             this.lastPointList = [
                 this.pointList[this.pointList.length - 1],
                 this.getPoint(
@@ -189,11 +201,19 @@ export class RelationItem extends BaseRelationItem {
      * @param   painter       painter对象
      */
     onDraw(painter: SPainter): void {
-        painter.pen.lineWidth = 2;
+        painter.pen.lineWidth = 3;
         painter.pen.color = new SColor("#409EFF");
         painter.brush.color = new SColor("#409EFF");
         painter.drawPolyline(this.pointList);
+
+        painter.pen.lineWidth = 1;
+        painter.pen.lineDash = [10, 10];
+        painter.pen.dashOffset = this.dashOffset;
+        painter.pen.color = SColor.White;
+        painter.drawPolyline(this.pointList);
+        this.dashOffset -= 2;
         if (!this.closeFlag) {
+            painter.pen.color = new SColor("#409EFF");
             painter.drawPolyline(this.lastPointList);
         }
     } // Function onDraw()

+ 2 - 0
src/types/Anchor.ts

@@ -38,4 +38,6 @@ export interface Anchor {
     ConnectNum?: number;
     /** 朝向  */
     FaceType: number;
+    /** 是否被连接   */
+    isConnected?: boolean;
 } // Interface Anchor

+ 2 - 0
src/types/Equip.ts

@@ -42,4 +42,6 @@ export interface Equip {
     AttachID?: string;
     /** 类型  */
     Type?: string;
+    /** 展示的图片路径or base64   */
+    ImgSource?: string;
 } // Interface Equip

+ 31 - 0
src/types/ItemOrder.ts

@@ -0,0 +1,31 @@
+/*
+ * ********************************************************************************************************************
+ *
+ *                      :*$@@%$*:                         ;:                ;;    ;;
+ *                    :@@%!  :!@@%:                       %!             ;%%@@%$ =@@@@@@@%;     @%@@@%%%%@@@@@
+ *                   :@%;       :$=                       %%$$$%$$         ;$$  ;$@=   !@$
+ *                   =@!                                  %!              @ $=;%   !@@@%:      !$$$$$$$$$$$$$$=
+ *                   =@*                                  %!              @ $= % %@=   =%@!      %=
+ *              *$%%! @@=        ;=$%%%$*:                %!              @ $= % =%%%%%%@$      *%:         =%
+ *            %@@!:    !@@@%=$@@@@%!  :*@@$:              %!              @ $= % $*     ;@      @*          :%*
+ *          ;@@!          ;!!!;:         ;@%:      =======@%========*     @ $$ % $%*****$@     :@$=*********=@$
+ *          $@*   ;@@@%=!:                *@*
+ *          =@$    ;;;!=%@@@@=!           =@!
+ *           %@$:      =@%: :*@@@*       %@=                    Copyright (c) 2016-2019.  北京上格云技术有限公司
+ *            ;%@@$=$@@%*       *@@@$=%@@%;
+ *               ::;::             ::;::                                              All rights reserved.
+ *
+ * ********************************************************************************************************************
+ */
+
+/**
+ * 接口
+ *
+ * @author  郝建龙
+ */
+export class ItemOrder {
+    /** 设备 */
+    static EquipOrder = 100;
+    /** 关系 */
+    static RelateOrder = 50;
+} // Interface ItemOrder