Sfoglia il codice sorgente

Merge branch 'master' of http://39.106.8.246:3003/web/persagy-web

YaolongHan 4 anni fa
parent
commit
94ac3a4a25

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

@@ -1,6 +1,6 @@
 {
     "name": "@persagy-web/big",
-    "version": "2.2.22",
+    "version": "2.2.23",
     "description": "博锐尚格建筑信息化库",
     "main": "lib/index.js",
     "types": "lib/index.d.js",
@@ -41,7 +41,7 @@
         "typescript": "^3.9.3"
     },
     "dependencies": {
-        "@persagy-web/graph": "2.2.24",
+        "@persagy-web/graph": "2.2.26",
         "axios": "^0.18.0",
         "pako": "^1.0.10",
         "polybooljs": "^1.2.0"

+ 64 - 0
persagy-web-big/src/enums/SRelation.ts

@@ -0,0 +1,64 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .F88X
+ *        X8888Y
+ *      .}888888N;
+ *        i888888N;        .:!              .I$WI:
+ *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
+ *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
+ *            +888888N;  .8888888Y                                  "&&8Y.}8,
+ *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
+ *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
+ *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
+ *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
+ *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
+ *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
+ *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
+ *      .:R888888I
+ *      .&888888I                                          Copyright (c) 2016-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+
+import { SRelationDir } from "./SRelationDir";
+import { Point, SLineStyle } from "@persagy-web/graph/lib";
+
+/**
+ * 管线对象关系接口
+ *
+ * @author 韩耀龙 <han_yao_long@163.com>
+ */
+export interface SRelation {
+    /** 图 id */
+    id?: string;
+    /** 图 id */
+    graphId?: string;
+    /** 图例实例 id */
+    relationId?: string;
+    /** 名称 */
+    name: string;
+    /** 对应的图例 ID */
+    GraphElementId?: string;
+    /** 关联节点 1_id */
+    node1Id?: string;
+    /** 关联节点 2_id */
+    node2Id?: string;
+    /** 关联锚点 1_id */
+    anchor1Id?: string;
+    /** 关联锚点 2_id */
+    anchor2Id?: string;
+    /** 方向(0:无向,1:节点 1 到节点2,2:节点 2 到节点 1) */
+    dir?: SRelationDir;
+    /** 线类型(0:直线,1:水平/垂直线,2:曲线) */
+    lineType: SLineStyle;
+    /** 线的顶点坐标 */
+    pointList: Point[];
+    /** 线的绘图样式 */
+    properties: any;
+    /** 线性样式 */
+    style: any;
+}

+ 5 - 1
persagy-web-big/src/index.ts

@@ -46,6 +46,8 @@ import { SArrowPoly } from "./items/SArrowPoly";
 import getJsonz from "./utils/getJsonz";
 import unzip from "./utils/unzip";
 import unzipBase64 from "./utils/unzipBase64";
+import { SPipeItem } from "./items/SPipeItem";
+import { SEquipItem } from "./items/SEquipItem";
 
 export {
     SLayerItem,
@@ -69,5 +71,7 @@ export {
     SArrowPoly,
     getJsonz,
     unzip,
-    unzipBase64
+    unzipBase64,
+    SPipeItem,
+    SEquipItem
 };

+ 34 - 0
persagy-web-big/src/items/SEquipItem.ts

@@ -0,0 +1,34 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .F88X
+ *        X8888Y
+ *      .}888888N;
+ *        i888888N;        .:!              .I$WI:
+ *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
+ *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
+ *            +888888N;  .8888888Y                                  "&&8Y.}8,
+ *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
+ *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
+ *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
+ *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
+ *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
+ *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
+ *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
+ *      .:R888888I
+ *      .&888888I                                          Copyright (c) 2009-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+
+import { SIconTextItem } from "./SIconTextItem";
+
+/**
+ * 设备 item
+ *
+ * @author 郝建龙 <haojianlong@sagacloud.cn>
+ */
+export class SEquipItem extends SIconTextItem {}

+ 226 - 0
persagy-web-big/src/items/SPipeItem.ts

@@ -0,0 +1,226 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .F88X
+ *        X8888Y
+ *      .}888888N;
+ *        i888888N;        .:!              .I$WI:
+ *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
+ *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
+ *            +888888N;  .8888888Y                                  "&&8Y.}8,
+ *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
+ *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
+ *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
+ *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
+ *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
+ *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
+ *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
+ *      .:R888888I
+ *      .&888888I                                          Copyright (c) 2016-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+
+import { SGraphItem, SAnchorItem } from "@persagy-web/graph/lib/";
+import { SMouseEvent } from "@persagy-web/base/lib";
+import { SPoint, SColor } from "@persagy-web/draw";
+import { SLineStyle } from "@persagy-web/graph/";
+import { SPolylineItem } from "./SPolylineItem";
+import { SRelation } from "../enums/SRelation";
+
+/**
+ * 编辑基础管道
+ *
+ * @author 韩耀龙 <han_yao_long@163.com>
+ */
+export class SPipeItem extends SPolylineItem {
+    //属性
+    /** 关系型数据 */
+    _relationData: SRelation | null = null;
+    set relationData(val) {
+        this._relationData = val;
+        this.initData();
+    } // set legendData()
+    get relationData(): SRelation | null {
+        return this._relationData;
+    } // get legendData()
+
+    /** 起始锚点  */
+    startAnchor: SAnchorItem | null = null;
+    /** 结束锚点  */
+    endAnchor: SAnchorItem | null = null;
+    /** 关联锚点1ID  */
+    _anchor1Id: string = "";
+    get anchor1Id(): string {
+        return this._anchor1Id;
+    } // get anchor1Id()
+    set anchor1Id(v: string) {
+        this._anchor1Id = v;
+        if (this.relationData) {
+            this.relationData.anchor1Id = this._anchor1Id;
+        }
+    } // set anchor1Id()
+
+    /** 关联锚点2ID  */
+    _anchor2Id: string = "";
+    get anchor2Id(): string {
+        return this._anchor2Id;
+    } // get anchor2Id()
+    set anchor2Id(v: string) {
+        this._anchor2Id = v;
+        if (this.relationData) {
+            this.relationData.anchor2Id = this._anchor2Id;
+        }
+    } // set anchor2Id()
+
+    /** 关联节点1ID */
+    _node1Id: string = "";
+    get node1Id(): string {
+        return this._node1Id;
+    } // get node1Id()
+    set node1Id(v: string) {
+        this._node1Id = v;
+        if (this.relationData) {
+            this.relationData.node1Id = this._node1Id;
+        }
+    } // set node1Id()
+
+    /** 关联节点2ID */
+    _node2Id: string = "";
+    get node2Id(): string {
+        return this._node2Id;
+    } // get node2Id()
+    set node2Id(v: string) {
+        this._node2Id = v;
+        if (this.relationData) {
+            this.relationData.node2Id = this._node2Id;
+        }
+    } // set node2Id()
+
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      数据
+     */
+    constructor(parent: SGraphItem | null, data: SRelation) {
+        super(parent, []);
+        this.relationData = data;
+    }
+
+    /**
+     * 设置relationData 时 对 item 做设置
+     */
+    initData(): void {
+        const data = this.relationData;
+        if (!data) return;
+        // 名称
+        this.name = data.name;
+        // 线样式
+        // @ts-ignore
+        this.lineStyle = SLineStyle[data.lineType]
+            ? SLineStyle[data.lineType]
+            : SLineStyle.Solid;
+        // 折线点
+        if (data.pointList) {
+            let setPointList: SPoint[];
+            setPointList = data.pointList.map(i => {
+                return new SPoint(i.x, i.y);
+            });
+            this.pointList = setPointList;
+        }
+
+        //锚点
+        if (data.node1Id) {
+            this._node1Id = data.node1Id;
+        }
+
+        if (data.node2Id) {
+            this._node2Id = data.node2Id;
+        }
+
+        if (data.anchor1Id) {
+            this._anchor1Id = data.anchor1Id;
+        }
+
+        if (data.anchor2Id) {
+            this._anchor2Id = data.anchor2Id;
+        }
+
+        // 样式
+        if (data.style && data.style.default) {
+            // 颜色
+            if (data.style.default.strokeColor) {
+                this.strokeColor = new SColor(data.style.default.strokeColor);
+            }
+
+            // 线宽
+            if (data.style.default.lineWidth) {
+                this.lineWidth = data.style.default.lineWidth;
+            }
+        }
+    }
+
+    /**
+     * 鼠标按下事件
+     *
+     * @param event   保存事件参数
+     * @return 是否处理该事件
+     */
+    onMouseDown(event: SMouseEvent): boolean {
+        super.onMouseDown(event);
+        return true;
+    }
+
+    /**
+     * 接收事件作出修改
+     */
+    changePos() {
+        if (this.startAnchor) {
+            // 判断删除equip后,不移动
+            if (this.startAnchor.parent && this.startAnchor.parent.parent) {
+                let p = this.startAnchor.mapToScene(0, 0);
+                this.pointList[0] = new SPoint(p.x - this.x, p.y - this.y);
+            }
+        }
+
+        if (this.endAnchor) {
+            // 删除equip后
+            if (this.endAnchor.parent && this.endAnchor.parent.parent) {
+                let p = this.endAnchor.mapToScene(0, 0);
+                this.pointList[this.pointList.length - 1] = new SPoint(
+                    p.x - this.x,
+                    p.y - this.y
+                );
+            }
+        }
+    }
+
+    /**
+     * 返回对象储存的相关数据
+     *
+     * @return 相关数据
+     */
+    toData(): any {
+        this.moveToOrigin(this.x, this.y);
+        const data = this.relationData;
+        if (!data) return;
+
+        if (this.pointList.length) {
+            const Line = this.pointList.map(pos => {
+                return {
+                    x: pos.x,
+                    y: pos.y
+                };
+            });
+            data.pointList = Line;
+        }
+
+        data.style.default.strokeColor = this.strokeColor.value;
+        data.style.default.lineWidth = this.lineWidth;
+        return data;
+    }
+}

+ 10 - 7
persagy-web-big/src/items/SPolylineItem.ts

@@ -24,10 +24,10 @@
  * *********************************************************************************************************************
  */
 
-import {SColor, SLine, SPainter, SPoint, SRect} from "@persagy-web/draw";
-import {SKeyCode, SMouseEvent, SUndoStack} from "@persagy-web/base";
-import {SItemStatus} from "..";
-import {SMathUtil} from "../utils/SMathUtil";
+import { SColor, SLine, SPainter, SPoint, SRect } from "@persagy-web/draw";
+import { SKeyCode, SMouseEvent, SUndoStack } from "@persagy-web/base";
+import { SItemStatus } from "..";
+import { SMathUtil } from "../utils/SMathUtil";
 import {
     SGraphItem,
     SGraphPointListDelete,
@@ -353,7 +353,10 @@ export class SPolylineItem extends SGraphItem {
         }
 
         // delete删除点
-        if (event.keyCode == SKeyCode.Delete && this.status == SItemStatus.Edit) {
+        if (
+            event.keyCode == SKeyCode.Delete &&
+            this.status == SItemStatus.Edit
+        ) {
             this.deletePoint(this.curIndex);
         }
     }
@@ -409,8 +412,8 @@ export class SPolylineItem extends SGraphItem {
      */
     findAddPos(p: SPoint): void {
         let len = SMathUtil.pointToLine(
-            p,
-            new SLine(this.pointList[0], this.pointList[1])
+                p,
+                new SLine(this.pointList[0], this.pointList[1])
             ),
             index = 0;
         if (this.pointList.length > 2) {

+ 1 - 1
persagy-web-graph/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@persagy-web/graph",
-    "version": "2.2.25",
+    "version": "2.2.27",
     "description": "博锐尚格二维图形引擎。",
     "main": "lib/index.js",
     "types": "lib/index.d.js",

+ 41 - 0
persagy-web-graph/src/enums/SGraphLineStyle.ts

@@ -0,0 +1,41 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .F88X
+ *        X8888Y
+ *      .}888888N;
+ *        i888888N;        .:!              .I$WI:
+ *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
+ *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
+ *            +888888N;  .8888888Y                                  "&&8Y.}8,
+ *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
+ *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
+ *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
+ *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
+ *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
+ *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
+ *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
+ *      .:R888888I
+ *      .&888888I                                          Copyright (c) 2009-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+
+/**
+ * 线样式
+ *
+ * @author 郝建龙 <haojianlong@sagacloud.cn>
+ */
+export enum SLineStyle {
+    /** 实线 */
+    Solid,
+    /** 虚线 */
+    Dashed,
+    /** 点线 */
+    Dotted,
+    /** 无 */
+    None
+}

+ 6 - 2
persagy-web-graph/src/index.ts

@@ -41,7 +41,7 @@ import { SImageItem } from "./items/SImageItem";
 import { SObjectItem } from "./items/SObjectItem";
 import { SAnchorItem } from "./items/SAnchorItem";
 import { STextItem } from "./items/STextItem";
-import { SGraphLineItem } from "./items/SGraphLineItem"
+import { SGraphLineItem } from "./items/SGraphLineItem";
 import { SImageShowType } from "./enums/SImageShowType";
 import { SLineStyle } from "./enums/SLineStyle";
 import { SOrderSetType } from "./enums/SOrderSetType";
@@ -58,6 +58,8 @@ import { SGraphRectItem } from "./items/SGraphRectItem";
 import { SGraphRect } from "./types/SGraphRect";
 import { SGraphSvgItem } from "./items/SGraphSvgItem";
 import { SGraphSvg } from "./types/SGraphSvg";
+import { SGraphStyleItem } from "./items/SGraphStyleItem";
+import { SGraphCircleItem } from "./items/SGraphCircleItem";
 
 export {
     SGraphItem,
@@ -91,5 +93,7 @@ export {
     SGraphRectItem,
     SGraphSvgItem,
     SGraphSvg,
-    SGraphLineItem
+    SGraphLineItem,
+    SGraphStyleItem,
+    SGraphCircleItem,
 };

+ 140 - 0
persagy-web-graph/src/items/SGraphCircleItem.ts

@@ -0,0 +1,140 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .F88X
+ *        X8888Y
+ *      .}888888N;
+ *        i888888N;        .:!              .I$WI:
+ *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
+ *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
+ *            +888888N;  .8888888Y                                  "&&8Y.}8,
+ *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
+ *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
+ *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
+ *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
+ *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
+ *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
+ *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
+ *      .:R888888I
+ *      .&888888I                                          Copyright (c) 2009-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+
+import { SGraphItem } from "../SGraphItem";
+import { SPainter, SRect } from "@persagy-web/draw";
+import { SLineStyle, SGraphStyleItem } from "..";
+import { SPoint } from "@persagy-web/draw/lib";
+
+/**
+ * 圆 item
+ *
+ * @author 郝建龙 <haojianlong@sagacloud.cn>
+ */
+export class SGraphCircleItem extends SGraphStyleItem {
+    /** 矩形两个对角 */
+    private _line: SPoint[] = [];
+    get line(): SPoint[] {
+        return this._line;
+    } // Get line
+    set line(arr: SPoint[]) {
+        this._line = arr;
+        this.update();
+    } // Set line
+
+    /** 矩形左上角 */
+    private _leftTop: SPoint = new SPoint();
+    /** 矩形右下角 */
+    private _rightBottom: SPoint = new SPoint();
+
+    /**
+     * 构造函数
+     *
+     * @param parent    指向父对象
+     * @param data      矩形数据
+     */
+    constructor(parent: SGraphItem | null, data: SPoint[]) {
+        super(parent);
+        this.data = data;
+        if (data.length) {
+            this.line = data;
+            this.calRect();
+        }
+    } // Constructor
+
+    /**
+     * 计算矩形的左上角和右下角
+     */
+    private calRect(): void {
+        if (this.line.length > 1) {
+            const fi = this.line[0];
+            const se = this.line[1];
+            let minx, maxx, miny, maxy;
+            if (fi.x < se.x) {
+                minx = fi.x;
+                maxx = se.x;
+            } else {
+                minx = se.x;
+                maxx = fi.x;
+            }
+
+            if (fi.y < se.y) {
+                miny = fi.y;
+                maxy = se.y;
+            } else {
+                miny = se.y;
+                maxy = fi.y;
+            }
+
+            this._leftTop = new SPoint(minx, miny);
+            this._rightBottom = new SPoint(maxx, maxy);
+        }
+    } // Function calRect()
+
+    /**
+     * Item 对象边界区域
+     *
+     * @return SRect   外接矩阵
+     */
+    boundingRect(): SRect {
+        if (this.line.length > 1) {
+            this.calRect();
+            return new SRect(this._leftTop, this._rightBottom);
+        }
+        return new SRect();
+    } // Function boundingRect()
+
+    /**
+     * Item 绘制操作
+     *
+     * @param painter    绘制对象
+     */
+    onDraw(painter: SPainter): void {
+        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)
+                ];
+            } else if (this.lineStyle == SLineStyle.Dotted) {
+                painter.pen.lineDash = [
+                    painter.toPx(this.lineWidth * 2),
+                    painter.toPx(this.lineWidth * 2)
+                ];
+            }
+
+            painter.drawEllipse(
+                (this._leftTop.x + this._rightBottom.x) / 2,
+                (this._leftTop.y + this._rightBottom.y) / 2,
+                (this._rightBottom.x - this._leftTop.x) / 2,
+                (this._rightBottom.y - this._leftTop.y) / 2
+            );
+        }
+    } // Function onDraw()
+}

+ 83 - 78
persagy-web-graph/src/items/SGraphRectItem.ts

@@ -24,41 +24,32 @@
  * *********************************************************************************************************************
  */
 
-import { SGraphShape } from "./SGraphShape";
 import { SGraphItem } from "../SGraphItem";
-import { SPainter, SRect,SColor } from "@persagy-web/draw";
-import { SGraphRect,SLineStyle } from "..";
+import { SPainter, SRect } from "@persagy-web/draw";
+import { SGraphStyleItem, SLineStyle } from "..";
+import { SPoint } from "@persagy-web/draw/lib";
 
 /**
  * 矩形(包含圆角矩形) item
  *
  * @author 郝洁 <haojie@persagy.com>
  */
-export class SGraphRectItem extends SGraphShape {
-    /** item 宽 */
-    private _width: number = 0;
-    get width(): number {
-        return this._width;
-    }
-    set width(v: number) {
-        if (v == this._width) {
-            return;
-        }
-        this._width = v;
-        this.update();
-    }
-    /** item 高 */
-    private _height: number = 0;
-    get height(): number {
-        return this._height;
-    }
-    set height(v: number) {
-        if (v == this._height) {
-            return;
-        }
-        this._height = v;
+export class SGraphRectItem extends SGraphStyleItem {
+    /** 矩形两个对角 */
+    private _line: SPoint[] = [];
+    get line(): SPoint[] {
+        return this._line;
+    }
+    set line(arr: SPoint[]) {
+        this._line = arr;
         this.update();
     }
+
+    /** 矩形左上角 */
+    private _leftTop: SPoint = new SPoint();
+    /** 矩形右下角 */
+    private _rightBottom: SPoint = new SPoint();
+
     /** 绘制矩形的圆角半径 */
     private _radius: number = 0;
     get radius(): number {
@@ -71,60 +62,21 @@ export class SGraphRectItem extends SGraphShape {
         this._radius = v;
         this.update();
     }
-    /** 线条颜色 */
-    _strokeColor: SColor = SColor.Black;
-    get strokeColor(): SColor {
-        return this._strokeColor;
-    }
-    set strokeColor(v: SColor) {
-        this._strokeColor = v;
-        this.update();
-    }
-
-    /** 填充色 */
-    _fillColor: SColor = new SColor("#2196f3");
-    get fillColor(): SColor {
-        return this._fillColor;
-    }
-    set fillColor(v: SColor) {
-        this._fillColor = v;
-        this.update();
-    }
-
-    /** 边框样式 */
-    _lineStyle: SLineStyle = SLineStyle.Solid;
-    get lineStyle(): SLineStyle {
-        return this._lineStyle;
-    }
-    set lineStyle(v: SLineStyle) {
-        this._lineStyle = v;
-        this.update();
-    }
-
-    /** 线条宽度 */
-    _lineWidth: number = 1;
-    get lineWidth(): number {
-        return this._lineWidth;
-    }
-    set lineWidth(v: number) {
-        this._lineWidth = v;
-        this.update();
-    }
 
     /**
      * 构造函数
      *
      * @param parent    指向父对象
      * @param data      矩形数据
+     * @param radius    圆角半径
      */
-    constructor(parent: SGraphItem | null, data: SGraphRect) {
-        super(parent, data.style);
-        this.width = data.width;
-        this.height = data.height;
-        this.moveTo(data.x, data.y);
-        if (data.radius && !isNaN(data.radius)) {
-            this.radius = Number(data.radius);
+    constructor(parent: SGraphItem | null, data: SPoint[], radius: number = 0) {
+        super(parent);
+        if (data.length) {
+            this.line = data;
+            this.calRect();
         }
+        this.radius = radius;
     }
 
     /**
@@ -133,20 +85,73 @@ export class SGraphRectItem extends SGraphShape {
      * @return	边界区域
      */
     boundingRect(): SRect {
-        return new SRect(0, 0, this.width, this.height);
+        if (this.line.length > 1) {
+            return new SRect(this._leftTop, this._rightBottom);
+        }
+
+        return new SRect();
     }
 
     /**
+     * 计算矩形的左上角和右下角
+     */
+    private calRect(): void {
+        if (this.line.length > 1) {
+            const fi = this.line[0];
+            const se = this.line[1];
+            let minx, maxx, miny, maxy;
+            if (fi.x < se.x) {
+                minx = fi.x;
+                maxx = se.x;
+            } else {
+                minx = se.x;
+                maxx = fi.x;
+            }
+
+            if (fi.y < se.y) {
+                miny = fi.y;
+                maxy = se.y;
+            } else {
+                miny = se.y;
+                maxy = fi.y;
+            }
+
+            this._leftTop = new SPoint(minx, miny);
+            this._rightBottom = new SPoint(maxx, maxy);
+        }
+    } // Function calRect()
+
+    /**
      * 绘制
      *
      * @param painter   绘制对象
      */
     onDraw(painter: SPainter): void {
-        super.onDraw(painter);
-        if (this.radius != 0) {
-            painter.drawRoundRect(0, 0, this.width, this.height, this.radius);
-        } else {
-            painter.drawRect(0, 0, this.width, this.height);
+        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)
+                ];
+            } else if (this.lineStyle == SLineStyle.Dotted) {
+                painter.pen.lineDash = [
+                    painter.toPx(this.lineWidth * 2),
+                    painter.toPx(this.lineWidth * 2)
+                ];
+            }
+
+            if (this.radius != 0) {
+                painter.drawRoundRect(
+                    this._leftTop,
+                    this._rightBottom,
+                    this.radius
+                );
+            } else {
+                painter.drawRect(this._leftTop, this._rightBottom);
+            }
         }
     }
 }

+ 1 - 1
persagy-web-graph/src/items/SGraphShape.ts

@@ -37,7 +37,7 @@ import {
 /**
  * 图形 item 基类
  *
- * @author  郝建龙 <haojianlong@sagacloud.cn>
+ * @author 郝建龙 <haojianlong@sagacloud.cn>
  */
 export class SGraphShape extends SGraphItem {
     /** 当前 item 的风格 */

+ 76 - 0
persagy-web-graph/src/items/SGraphStyleItem.ts

@@ -0,0 +1,76 @@
+/*
+ * *********************************************************************************************************************
+ *
+ *          !!
+ *        .F88X
+ *        X8888Y
+ *      .}888888N;
+ *        i888888N;        .:!              .I$WI:
+ *          R888888I      .'N88~            i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
+ *          .R888888I    .;N8888~          .X8'  "8I.!,/8"  !%NY8`"8I8~~8>,88I
+ *            +888888N;  .8888888Y                                  "&&8Y.}8,
+ *            ./888888N;  .R888888Y        .'}~    .>}'.`+>  i}!    "i'  +/'  .'i~  !11,.:">,  .~]!  .i}i
+ *              ~888888%:  .I888888l      .]88~`1/iY88Ii+1'.R$8$8]"888888888>  Y8$  W8E  X8E  W8888'188Il}Y88$*
+ *              18888888    E8888881    .]W%8$`R8X'&8%++N8i,8N%N8+l8%`  .}8N:.R$RE%N88N%N$K$R  188,FE$8%~Y88I
+ *            .E888888I  .i8888888'      .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
+ *            8888888I  .,N888888~        ~88i"8W,!N8*.I88.}888%F,i$88"F88"  888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
+ *          i888888N'      I888Y          ]88;/EX*IFKFK88X  K8R  .l8W  88Y  ~88}'88E&%8W.X8N``]88!.$8K  .:W8I
+ *        .i888888N;        I8Y          .&8$  .X88!  i881.:%888>I88  ;88]  +88+.';;;;:.Y88X  18N.,88l  .+88/
+ *      .:R888888I
+ *      .&888888I                                          Copyright (c) 2009-2020.  博锐尚格科技股份有限公司
+ *        ~8888'
+ *        .!88~                                                                     All rights reserved.
+ *
+ * *********************************************************************************************************************
+ */
+
+import { SGraphItem } from "../SGraphItem";
+import { SColor } from "@persagy-web/draw/lib";
+import { SLineStyle } from "../enums/SGraphLineStyle";
+
+/**
+ * 样式 item
+ *
+ * @author 郝建龙 <haojianlong@sagacloud.cn>
+ */
+export class SGraphStyleItem extends SGraphItem {
+    /** 笔触颜色 */
+    _strokeColor: SColor = SColor.Black;
+    get strokeColor(): SColor {
+        return this._strokeColor;
+    } // Get strokeColor
+    set strokeColor(v: SColor) {
+        this._fillColor = new SColor(v);
+        this.update();
+    } // Set strokeColor
+
+    /** 填充颜色 */
+    _fillColor: SColor = SColor.Black;
+    get fillColor(): SColor {
+        return this._fillColor;
+    } // Get fillColor
+    set fillColor(v: SColor) {
+        this._fillColor = new SColor(v);
+        this.update();
+    } // Set fillColor
+
+    /** 线条样式 */
+    _lineStyle: SLineStyle = SLineStyle.Solid;
+    get lineStyle(): SLineStyle {
+        return this._lineStyle;
+    } // Get lineStyle
+    set lineStyle(v: SLineStyle) {
+        this._lineStyle = v;
+        this.update();
+    } // Set lineStyle
+
+    /** 线条宽度 */
+    _lineWidth: number = 1;
+    get lineWidth(): number {
+        return this._lineWidth;
+    } // Get lineWidth
+    set lineWidth(v: number) {
+        this._lineWidth = v;
+        this.update();
+    } // Set lineWidth
+}